/* =========================
   Basis & Layout
========================= */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background: url('Hintergrundbild.webp') no-repeat center center fixed;
    background-size: cover;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
}

body::before {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);   /* 45% Abdunklung */
    pointer-events: none;
    z-index: -1;
}
html { overflow-x: hidden; }

/* ===== Typo-Variablen (Überschrift > Frage, Logo koppeln) ===== */
:root{
    --h1: clamp(2.8rem, 7vw, 3.2rem);    /* Grundgröße Überschrift */
    --frage-scale: 0.85;              /* Frage = 62% von --h1 */
    --logo-factor: 1.5;              /* Logo-Höhe relativ zu --h1 */
}

/* =========================
   Header / Titelzeile
========================= */
.header {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.title-container {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.logo {
    /* früher: width: clamp(60px, 10vw, 100px); */
    height: calc(var(--h1) * var(--logo-factor));
    width: auto;
    border-radius: 8%;
}

.ueberschrift {
    font-family: "Times New Roman", Times, serif;
    /* früher: font-size: clamp(2rem, 5vw, 5rem); */
    font-size: var(--h1);
    font-weight: 1000;
    letter-spacing: 2px;
}

.divider {
    width: 60%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    margin: 20px auto;
}

/* =========================
   Ticker (Laufband)
========================= */
.ticker {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.ticker-content {
    display: inline-block;
    animation: scrollText 15s linear infinite;
}

.ticker-content span {
    display: inline-block;
    white-space: nowrap;
    font-size: 1.5rem;
    padding-right: 1%;
}

@keyframes scrollText {
    from { transform: translateX(0%); }
    to   { transform: translateX(10%); }
}

/* =========================
   Hauptbereich / Auswahl
========================= */
.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 50%;
    margin-top: 10%;

    /* Sicherer linker Abstand auf Desktop:
       mind. 24px, wächst sanft bis max. 20% */
    margin-left: clamp(24px, 8vw, 20%);

    text-align: center;
}

/* Frage: nie zu nah am linken Rand (nur Desktop relevant) */
.frage {
    font-family: "Times New Roman", Times, serif;
    /* früher: font-size: 3.5rem; */
    font-size: calc(var(--h1) * var(--frage-scale));  /* immer kleiner als H1 */
    font-weight: bold;
    margin-top: 25%;
    text-align: left;
    padding-left: clamp(8px, 1.6vw, 24px);
}

/* Graue Box: schmal (inhaltbreit) */
.glass-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-left: 40px;
    width: fit-content;                 /* nur so breit wie nötig */
    max-width: min(520px, 90vw);        /* Safety auf kleinen Screens */
}

select,
button {
    padding: 10px;
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    margin-top: 10px;
    min-height: 48px;            /* Tap-Ziel sicher */
    min-width: 48px;
    font-size: max(16px, 1rem);  /* verhindert iOS-Zoom */
    line-height: 1.2;
}
/* NEU: Select größer + schwarzer Text (auch auf iOS) */
.glass-box select{
    width: clamp(220px, 44vw, 340px);
    height: 60px;                /* gleiche Höhe wie #redirectButton */
    padding: 0 44px 0 16px;      /* rechts Platz für den System-Pfeil */
    font-size: clamp(18px, 2.4vw, 28px);

    background-color: #fff;
    color: #000;
    -webkit-text-fill-color: #000;  /* iOS erzwingen */

    border: 1px solid rgba(0,0,0,.15);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Optionen sicher schwarz */
#suche option{ color:#000; }
#suche option[disabled]{ color:#888; }

#redirectButton{
    -webkit-appearance:none; appearance:none;
    width:60px;               /* vorher 48px */
    height:60px;              /* vorher 48px */
    border:0; border-radius:12px;
    cursor:pointer;

    /* ICON deutlich größer machen */
    background:
            center/38px 38px no-repeat                /* vorher 22px */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 11h11.17l-3.59-3.59L12 6l6 6-6 6-1.41-1.41L15.17 13H4z'/%3E%3C/svg%3E"),
            linear-gradient(135deg,#007bff,#00bfff);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    transition: transform .05s ease;
}
#redirectButton:active{ transform: scale(0.98); }


/* =========================
   Slideshow / Screen
========================= */
.screen {
    position: absolute;
    top: 40%;
    left: 70%;
    transform: translateX(-50%);
    width: 40%;
    height: 50%;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 0 55px rgba(0, 174, 255, 0.7);  /* kein seitlicher Versatz */
    animation: glowEffect 2s infinite alternate ease-in-out;
    max-width: 100vw;
}

@keyframes glowEffect {
    0%   { box-shadow: 0 0 55px #ffffff; }
    100% { box-shadow: 0 0 55px #ffffff; }
}

.slideshow-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slideshow-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    border-radius: 10px;
    border: 3px solid rgba(0, 174, 255, 0.5);
}

.slideshow-image:first-child { opacity: 1; }

/* =========================
   Startlogo-Animation
========================= */
.logo-animation {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeOut 2.5s ease-out 3s forwards;
}

.animated-logo {
    width: 150px;
    height: 150px;
    background: blue;
    border-radius: 5px; /* wenn komplett rund gewünscht: 50% */
    box-shadow: 0 0 1000px rgba(0, 191, 255, 0.8);
    animation: rotateLogo 2.5s ease-in-out forwards,
    neonGlow 1.5s infinite alternate;
}

@keyframes rotateLogo {
    0%   { transform: scale(3) rotate(0deg);   opacity: 1; }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

@keyframes neonGlow {
    0% {
        box-shadow:
                0 0 20px rgba(0,174,255,0.7),
                0 0 40px rgba(0,174,255,0.6),
                0 0 80px rgba(0,174,255,0.7);
    }
    100% {
        box-shadow:
                0 0 40px rgba(0,174,255,1),
                0 0 80px rgba(0,174,255,0.7),
                0 0 140px rgba(0,174,255,0.5);
    }
}


@keyframes fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; display: none; }
}

/* =========================
   Sichtbarkeits-Helfer
========================= */
.hidden { display: none; }

.show {
    display: block;
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* =========================
   Bestehende MQs (nur Typo via --h1)
========================= */

@media only screen and (max-width: 2500px) {
    .content { margin-top: -3.8%; margin-left: 30%; }
    select, button { font-size: 2rem; }
}

@media (max-width: 1300px) {
    .content {
        width: min(900px, 92%);
        margin: 16px auto 0;
        align-items: center;
        text-align: center;
    }
    .frage { margin: 0 0 12px 0; text-align: center; }
    .header {
        position: static; top: auto; left: auto; transform: none;
        display: flex; justify-content: center; align-items: center;
        gap: 20px; margin: 24px auto 8px;
    }
    .screen {
        position: static; top: auto; left: auto; transform: none;
        width: min(1100px, 92%);
        height: clamp(260px, 45vw, 560px);
        margin: 24px auto 32px;
    }
}

@media (max-width: 1200px) {
    .content { width: 55%; margin-left: 20%; }
    /* Typo nur über --h1 steuern: keine direkten font-sizes hier */
    :root { --h1: clamp(4.1rem, 4.8vw, 3.2rem); }
    select, button { font-size: 2rem; }
    .screen { left: 66%; width: 44%; height: 46%; }
}

@media (max-width: 992px) {
    .header { top: 8%; }
    .content { width: 60%; margin-left: 18%; margin-top: 8%; }
    :root { --h1: clamp(2.6rem, 5.4vw, 3rem); }
    select, button { font-size: 1.8rem; }
    .screen { left: 64%; width: 46%; height: 44%; }
}

@media (max-width: 820px) {
    .header { top: 6%; }
    .content { width: 80%; margin-left: 10%; margin-top: 14%; }
    :root { --h1: clamp(1.9rem, 6vw, 2.8rem); }
    select, button { font-size: 1.6rem; }
    .screen {
        position: static; transform: none; width: 92%; height: 320px;
        margin: 24px auto 0; box-shadow: 0 0 40px rgba(0,174,255,0.45);
    }
}

@media (max-width: 600px) {
    .header { top: 4%; }
    .logo { /* Höhe bleibt automatisch an --h1 gekoppelt */ }
    :root { --h1: clamp(2.6rem, 6.5vw, 2.4rem); }
    .content { width: 92%; margin-left: 4%; margin-top: 18%; text-align: left; }
    .glass-box { gap: 12px; padding: 16px; }
    select, button { font-size: 1.3rem; padding: 10px 12px; }
    #redirectButton { font-size: 1.2rem; }
    .screen { width: 96%; height: 260px; }
}

@media (max-width: 430px) {
    .header { top: 3.5%; }
    .content { width: 94%; margin-left: 3%; margin-top: 16%; }
    :root { --h1: 2.2rem; }
    .screen { height: 220px; }
}

@media (max-width: 375px) {
    body { overflow-y: auto; }
    .header { margin: 12px auto 4px; gap: 12px; }
    .logo { /* skaliert weiter über --h1 */ }
    :root { --h1: clamp(1.8rem, 7vw, 2rem); }
    .content { width: 94%; margin: 12px auto 0; text-align: left; align-items: stretch; }
    .glass-box { padding: 12px; gap: 10px; }
    select, button { font-size: 1.1rem; padding: 10px 10px; margin-top: 6px; }
    #redirectButton { font-size: 1.05rem; }
    .screen {
        position: static; transform: none; width: 96%;
        min-height: 200px; height: clamp(200px, 50vw, 280px);
        margin: 16px auto 22px; box-shadow: 0 0 24px rgba(0,174,255,0.35);
    }
    .slideshow-image { border-width: 2px; }
    .logo-animation .animated-logo { width: 120px; height: 120px; }
}

@media (max-width: 320px) {
    .header { gap: 10px; }
    .logo { /* Höhe weiter gekoppelt */ }
    :root { --h1: 1.6rem; }
    .content { width: 96%; margin: 10px auto 0; }
    select, button { font-size: 1rem; padding: 8px 10px; }
    .screen {
        width: 98%; min-height: 180px;
        height: clamp(180px, 52vw, 240px); margin: 14px auto 18px;
    }
    .logo-animation .animated-logo { width: 104px; height: 104px; }
}

@media (max-width: 280px) {
    .header { margin: 8px auto 2px; }
    .title-container { gap: 10px; flex-wrap: wrap; }
    :root { --h1: clamp(1.25rem, 8.5vw, 1.6rem); }
    .content { width: 98%; margin: 8px auto 0; }
    .glass-box { padding: 10px; gap: 8px; }
    select, button { font-size: 0.95rem; padding: 8px 8px; }
    #redirectButton { font-size: 0.95rem; }
    .screen {
        width: 98%; min-height: 160px;
        height: clamp(160px, 54vw, 210px);
        margin: 12px auto 16px; border-radius: 8px;
        box-shadow: 0 0 18px rgba(0,174,255,0.3);
    }
    .logo-animation .animated-logo { width: 92px; height: 92px; }
}

/* =========================
   SPEZIAL: Höhen-/A11y-/Notch-Handling
========================= */
@media (max-height: 700px) and (orientation: landscape) {
    .header { top: 6%; }
    .content { margin-top: 8%; }
    .screen { top: 28%; height: 46%; }
    /* frühere: .überschrift{font-size:3rem} -> jetzt nur --h1 anpassen */
    :root { --h1: 3rem; }
}

@media (max-height: 560px) {
    .screen { height: 45vh; min-height: 160px; }
    /* .frage margin-top bleibt unverändert */
}

@media (prefers-reduced-motion: reduce) {
    .ticker-content, .animated-logo, .screen, .slideshow-image {
        animation: none; transition: none;
    }
}

@supports (padding: max(0px)) {
    @media (max-width: 600px) {
        body {
            padding-left: max(0px, env(safe-area-inset-left));
            padding-right: max(0px, env(safe-area-inset-right));
            padding-top: max(0px, env(safe-area-inset-top));
            padding-bottom: max(0px, env(safe-area-inset-bottom));
        }
    }
}

/* =========================
   WICHTIGER OVERRIDE (Layout, wie gehabt)
========================= */
@media (max-width: 1300px) {
    .header {
        position: static; top: auto; left: auto; transform: none;
        display: flex; justify-content: center; align-items: center;
        gap: 20px; margin: 24px auto 8px;
    }

    .content {
        width: min(900px, 92%);
        margin: 50px auto 0;
        align-items: center;
        text-align: center;
    }

    .frage {
        margin: 0 0 12px 0;
        text-align: center;
        padding-left: 0;               /* Desktop-Padding neutralisieren */
        /* Größe kommt bereits aus calc(var(--h1) * var(--frage-scale)) */
    }

    .glass-box {
        margin-inline: auto;
        justify-content: center;
    }

    .screen {
        position: static; top: auto; left: auto; transform: none;
        width: min(1100px, 92%);
        height: clamp(260px, 45vw, 560px);
        margin: 64px auto 32px;
    }
}