/* Normalize.css einbinden */
@import url('normalize.css');

/* Roboto Font-Face deklarieren */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),
         url('../fonts/Roboto-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Grundlegende Layout-Eigenschaften */
:root {
    --header-offset: 4rem;
    --footer-offset: 4rem;
    --max-width: 65rem;
    --primary-color: #2b3756;
    --secondary-color: #FF9F1C;
    --accent-color: #E71D36;
    --bg-color: #cbd7f4;
    --bg-color-container: #25437f;
    --text-color: #dae7ff;
    --header-bg: var(--primary-color);
    --footer-bg: var(--primary-color);
    --link-color: var(--text-color);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body.bgImage {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);

    /* Dunkelblau ↔ Schwarz ↔ Dunkelblau */
    background: linear-gradient(#273040, #090a0d, #273040);

    /* Fixiert den Verlauf relativ zum Viewport */
    background-attachment: fixed;

    /* Verhindert Wiederholung und legt Höhe exakt auf 100 vh fest */
    background-repeat: no-repeat;
    background-size: 100% calc(100vh - var(--header-offset));

    /* Verschiebt den Verlauf 4 rem nach unten */
    background-position: 0 var(--header-offset);

    /* Vorbereitung für das Pseudo-Element */
    position: relative;
    line-height: 1.6;
    height: 100%;
}

body.bgImage::before {
    content: "";
    position: fixed;                 /* Deckt den ganzen Viewport ab */
    inset: 0;

    /* Kachelgrafik */
    background-image: url("../images/WebBackground2.webp");
    background-size: 400px 400px;    /* Kachelmaß */
    background-repeat: repeat;
    background-position: -10px -20px;

    /* Halbtransparenz des Bildes */
    opacity: 0.5;                    /* 0 = unsichtbar … 1 = voll sichtbar */

    pointer-events: none;            /* Lässt Klicks/Scrollen unberührt */
    z-index: -1;                     /* Hinter allen regulären Inhalten */
}

main {
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.container {
    padding: 1rem;
    overflow: auto;
    margin-top: calc(var(--header-offset));
    min-height: calc(100vh - var(--header-offset) - var(--footer-offset) - 2rem);
    width: 100%;
    background-color: var(--bg-color-container);
    box-shadow:  3px 3px 10px 3px rgba(0, 0, 0, 0.75);
    border-radius: 0.5rem;
}

.headerContent {
    position: absolute;
    padding-left: 1rem;

    /* Zentriert innerhalb des Viewports */
    left: 50%;
    transform: translateX(-50%);

    /* Legt Box-Sizing fest, damit Padding und Border zur Breite gehören */
    box-sizing: border-box;

    /* Fixiert am Viewport und sorgt für dynamische Breiten-Anpassung */
    width: 100%;              /* 100% des Viewports */
    max-width: var(--max-width); /* wird nie breiter als .bounds */

    /* Gemeinsame Styles */
    padding: 1rem 1rem;
    /*background: white;*/
    overflow: auto;
}

.footerContent {
    width: var(--max-width); /* wird nie breiter als .bounds */
    padding: 0 1rem;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    height: var(--header-offset);
    background-image: url("../images/TileBackground.png");
    background-repeat: repeat;
    z-index: 10;
}

footer {
    display: flex;      /* Flex-Layout; Höhe wächst automatisch */
    justify-content: center;
    align-items: center;

    text-align: left;
    font-size: 10pt;
    /* Padding links weiterhin in box-sizing enthalten */
    padding-left: 1rem;
    background-image: url("../images/TileBackground.png");
    background-repeat: repeat;
}

.center {
  width:100%;
  justify-content: center;
  text-align: center;
}

.lang-switcher {
    text-align: right;
    right: 0;
}

.mtop0 {
    margin-top: 0px;
}

.mtop1rem {
    margin-top: 1rem;
}

.mtop2rem {
    margin-top: 2rem;
}

.mtop5rem {
    margin-top: 5rem;
}

img {
    max-width: 100%;
    max-height: 100%;
}

/* Responsive Anpassung */
@media (max-width: 600px) {
    :root {
    --header-offset: 4rem;
    --footer-offset: 4rem;
        --max-width: 90%;
    }
}

/* Layout für Header: flex, bricht unter 600px um */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;

    flex-direction: row;

flex-wrap: wrap;
}

.site-title {
    font-weight: 700;
    font-size: 1.25rem;
    white-space: nowrap;
}



.header-flex .lang-switcher { margin-left: auto; text-align: right; 
margin-left: auto;
white-space: nowrap;
}


body {
    color: var(--text-color);
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a.underline {
    text-decoration: underline;
}

li {
    padding-top: 0.1rem;
}

ul:not(ul ul)>li:first-child {
  padding-top: 0;
}

header {
    background-color: var(--header-bg);
}

footer {
    background-color: var(--footer-bg);
    padding: 1rem 0;
}

.header-flex a, footer a {
}

button {
    background-color: #09214c;
    color: var(--text-color);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
}

button:hover {
    background-color: #18376E;
}

.legalText p, .legalText li, .legalText td, .legalText th {
    line-height: 1.4;   /* Faktor bezogen auf font-size */
    margin-block: 0;
}

.legalText div.textBlock p:first-child {
    margin-block-start: 1em;
}

.legalText div.textBlock p:last-child {
    margin-block-end: 1em;
}

.legalText .tab1 {
    margin-left: 2rem;
}

.legalText table, .legalText tr, .legalText td, .legalText th {
    border: 1px inset var(--text-color);
    border-collapse: collapse;
}

.legalText td, .legalText th {
    padding: 0.5rem;
}

.legalText th {
    text-align: left;
}

.legalText table {
    width: 70%;
}

header {
    box-shadow:  1px 1px 5px 2px rgba(0, 0, 0, 0.5);
}

.heroImage {
    box-shadow:  1px 1px 5px 2px rgba(0, 0, 0, 0.75);
}

ul ul li::before {
  content: "–";
  position: absolute;
  margin-left: -1em;
}

ul ul li {
  position: relative;
  padding-left: 0.6em;
}

ul ul {
  list-style: none;
  position: relative;
  padding-left: 1.2em;
}


/* Fügt Styling für eingebettete YouTube-Videos hinzu */
.video-wrapper {
    aspect-ratio: 720 / 1600;

    /* Standard-Rahmen von Browsern/YouTube ausschalten */
    border: 4px #d4b097 solid;

    /* Hintergrund des Iframes – falls YouTube transparente Ränder zeigt  */

    /* Optional: eigene Rundungen  */
    border-radius: 8px;

    box-shadow:  3px 3px 10px 3px rgba(0, 0, 0, 0.75);
}

.video-wrapper iframe {
    border: none;
}

.video-wrapper img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 600px) {
    .video-large {
        display: none;
    }
    .video-small {
        display: block;
        float: none;
    }
}

/* Consent Placeholder Styles */
.yt-consent-btn{
    padding:0;
    border:none;
    background:none;
    cursor:pointer;
    position:relative;
}
.yt-consent-btn .yt-consent-label{
    position:absolute;
    bottom:8px;
    right:8px;
    background:rgba(0,0,0,.6);
    color:#fff;
    padding:4px 8px;
    font-size:.9rem;
    border-radius:4px;
}

.video-wrapper.yt-embed{
    position:relative;
}
.video-wrapper.yt-embed iframe{
    position:absolute;
    inset:0;
}

/* ---- YouTube Consent Overlay ---- */
.yt-consent{
    position:relative;
}
.yt-consent-thumb{
    display:block;
    width:100%;
    height:auto;
}
.yt-consent-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:1rem;
    box-sizing:border-box;
}
.yt-consent-actions{
    margin-top:0.8rem;
    display:flex;
    gap:0.8rem;
}
.yt-consent-actions .btn-accept,
.yt-consent-actions .btn-decline{
    border:none;
    padding:0.4rem 0.8rem;
    border-radius:4px;
    cursor:pointer;
    font-size:0.9rem;
}
.yt-consent-actions .btn-accept{
    background:#ffffff;
    color:#000000;
}
.yt-consent-actions .btn-decline{
    background:transparent;
    color:#ffffff;
    border:1px solid #ffffff;
}
.yt-consent.yt-embed iframe{
    position:static;
    border:0;
}
@media (max-width: 600px){
    .yt-consent-overlay{font-size:0.9rem;}
}

/* --- YouTube Consent Button & Modal --- */
.video-group { margin-bottom: 1rem; }
.video-group.video-large {
    float: right;
    width: 30%;
    max-width: calc(60vh / 1600 * 720);
    margin: 0 0.5em 1em 1em;
}

.video-group.video-small {
    display: none;
    width: 100%;
    max-width: calc(75vh / 1600 * 720);
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 600px){
  .video-group.video-large { display: none; }
  .video-group.video-small { display: block; float:none; }

  .legalText table {
      width: 100%;
  }
}
.yt-consent-cta{
    display:block;
    width:100%;
    padding:0.5rem 1rem;
    border:none;
    border-radius:4px;
    cursor:pointer;
    margin-top:1.2rem;
    font-size:1rem;
}

/* Modal */
.yt-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.yt-modal.hidden{display:none;}
.yt-modal-box{
  background: linear-gradient(#B5C1D7, #5671A3);
  max-width:420px;
  width:90%;
  padding: 1rem;
  padding-top: 0rem;
  border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  text-align:center;
}
.yt-modal-title {
    color: #254480;
}
.yt-modal-inlay {
    background: var(--bg-color-container);
    border-radius: 8px;
    padding: 0.5rem;
}
.yt-modal-box h2{
    margin: 0.5rem;
}

.yt-modal-actions{margin-top:1rem;display:flex;justify-content:center;gap:1rem;}
.yt-modal-actions .btn-accept,
.yt-modal-actions .btn-decline{
    padding:0.5rem 1rem;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-size:1rem;
}

.video-group, .yt-consent, .yt-thumb, .yt-embed iframe{z-index:1;}