@font-face {
    font-family:"TeleNeo";
    font-weight:100;
    font-style:normal;
    src:url("fonts/teleneo-thin.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family:"TeleNeo";
    font-weight:400;
    font-style:normal;
    src:url("fonts/teleneo-regular.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family:"TeleNeo";
    font-weight:500;
    font-style:normal;
    src:url("fonts/teleneo-medium.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family:"TeleNeo";
    font-weight:700;
    font-style:normal;
    src:url("fonts/teleneo-bold.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family:"TeleNeo";
    font-weight:900;
    font-style:normal;
    src:url("fonts/teleneo-extrabold.woff2") format("woff2");
    font-display: swap;
}

:root {
    --pink: #e20074;
    --dark: #11131c;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100dvh;
    overflow: hidden;
    background: #fff;
    font-family: "TeleNeo", Arial, Helvetica, sans-serif;
    color: #14141a;
}

.tablet {
    width: 100%;
    height: 100dvh;
    background: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.top {
    background: var(--pink);
    color: white;
    padding: 19px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex: 0 0 auto;
}

.brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.telekom-logo {
    display: block;
    width: 42px;
    height: 42px;
}

.slogan {
    font-size: 19px;
    font-weight: 700;
    text-align: right;
}

.main {
    width: min(100%, 1140px);
    margin: 0 auto;
    padding: clamp(22px, 4vw, 42px) clamp(18px, 5vw, 60px);
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

h1 {
    font-size: clamp(30px,5vw,48px);
    text-align: center;
    margin: 0;
    font-weight: 900;
    letter-spacing: -1.8px;
}

h1 span {
    color: var(--pink);
}

.sub {
    text-align: center;
    font-size: 24px;
    margin: 8px 0 20px;
}

.progress {
    height: 9px;
    background: #e5e5e8;
    border-radius: 20px;
    overflow: hidden;
    max-width: 530px;
    margin: 14px auto 8px;
}

.fill {
    height: 100%;
    background: var(--pink);
    transition: width .3s;
}

.counter {
    text-align: center;
    color: #555;
    font-weight: bold;
    margin-bottom: 18px;
}

.panel {
    background: #11141d;
    color: white;
    border-radius: 22px;
    padding: clamp(16px, 3vw, 28px);
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.poster {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 16px;
    background: #000;
    display: block;
}

/* Poster bleiben vollständig sichtbar; Suchbilder dürfen den Rahmen ausfüllen. */
.title-poster { object-fit: contain; }
.search-image { object-fit: cover; }

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 32px);
    align-items: center;
    flex: 1;
    min-height: 0;
}

.question {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 18px;
}

.choices {
    display: grid;
    gap: 13px;
}

.choice {
    background: #fff;
    color: #181820;
    border: 2px solid #e1e1e7;
    border-radius: 14px;
    padding: 17px 18px;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
    transition: .15s;
}

.choice:hover,.choice:focus-visible {
    border-color: var(--pink);
    transform: translateY(-1px);
}

.choice.selected {
    background: #ffe5f1;
    border-color: var(--pink);
}

.choice.correct {
    background: #d8f7e7;
    border-color: #18a46c;
}

.choice.wrong {
    background: #ffe1e4;
    border-color: #e74760;
}

.btn {
    background: var(--pink);
    border: 0;
    color: white;
    font-weight: 800;
    font-size: 19px;
    border-radius: 40px;
    padding: 16px 28px;
    cursor: pointer;
}

.btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 22px;
}

.note {
    color: #6a6872;
    font-size: 14px;
}

.quiz-note {
    color: #d7d8df;
    font-size: 14px;
    margin-top: 18px;
}

.feedback {
    min-height: 24px;
    font-weight: bold;
    margin-top: 12px;
    color: #fff;
}

.footer {
    background: var(--pink);
    color: white;
    padding: 17px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    flex: 0 0 auto;
}

.footer b {
    font-size: 26px;
}

.providers {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.providers .provider-logo {
    background: #fff;
    border-radius: 8px;
    width: 84px;
    height: 38px;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.provider-logo img,
.provider-logo-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.provider-choice {
    min-height: 62px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.provider-choice .provider-logo-image {
    width: 136px;
    height: 34px;
}

.provider-choice.selected {
    background: #fff;
}

.resultCard {
    border: 2px solid #f0d0df;
    background: #fff4f9;
    border-radius: 20px;
    padding: 20px;
    margin: 12px 0;
    flex: 1;
}

.resultRow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 17px 0;
}

.resultName {
    width: 115px;
    font-weight: bold;
}

.bar {
    height: 22px;
    flex: 1;
    background: #e9e9ee;
    border-radius: 30px;
    overflow: hidden;
}

.bar>div {
    height: 100%;
    background: var(--pink);
    border-radius: 30px;
}

.score {
    width: 55px;
    text-align: right;
    font-weight: bold;
}

.winner {
    font-size: 32px;
    color: var(--pink);
    font-weight: 900;
}

.muted {
    color: #5d5c66;
}

.smalltag {
    display: inline-block;
    background: #ffe2ef;
    color: #bb005a;
    border-radius: 30px;
    padding: 7px 13px;
    font-weight: 700;
    margin-bottom: 14px;
}

.hint {
    font-size: 13px;
    color: #777;
    margin-top: 15px;
}

@media (max-width: 720px) {
    .tablet {
        height: 100dvh;
    }

    .top {
        padding: 16px;
    }

    .slogan {
        font-size: 13px;
    }

    .main {
        padding: 22px 17px 28px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .grid .image-frame { height: min(35vh, 310px); }

    .question {
        font-size: 23px;
    }

    .choice {
        font-size: 17px;
        padding: 14px;
    }

    .footer {
        padding: 14px;
        flex-wrap: wrap;
    }

    .footer b {
        font-size: 20px;
    }

    .actions {
        align-items: stretch;
        flex-direction: column;
    }

    .actions .btn {
        width: 100%;
    }

    .resultRow {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
    }

    .resultName,
    .score {
        width: auto;
    }

    .bar {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 440px) {
    .top {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .slogan { text-align: left; }

    h1 { letter-spacing: -1.2px; }

    .sub { font-size: 19px; }

    .footer { align-items: center; }

    .providers { gap: 8px; }

    .providers .provider-logo { width: 76px; height: 34px; padding: 5px 8px; }
}

/* Kompaktere Darstellung für Laptops und Smartphones mit geringer Höhe. */
@media (max-height: 800px) {
    .top { padding-block: 12px; }
    .footer { padding-block: 10px; }
    .footer b { font-size: 21px; }
    .providers .provider-logo { width: 76px; height: 34px; padding: 5px 8px; }

    .main { padding-block: 16px; }
    .sub { font-size: 20px; margin: 4px 0 10px; }
    .progress { margin-block: 8px 5px; }
    .counter { margin-bottom: 10px; }
    .panel { padding: 16px; }
    .grid .image-frame { height: min(30vh, 230px); }
    .question { font-size: 24px; margin-bottom: 12px; }
    .choices { gap: 8px; }
    .choice { padding: 11px 14px; font-size: 17px; }
    .actions { margin-top: 12px; }
    .quiz-note { margin-top: 12px; }
    .btn { padding: 12px 22px; }
}

@media (max-height: 620px) {
    .top { padding-block: 8px; }
    .telekom-logo { width: 34px; height: 34px; }
    .slogan { font-size: 13px; }
    .footer { padding-block: 7px; }
    .footer b { font-size: 18px; }
    .footer > span { display: none; }
    .providers .provider-logo { width: 66px; height: 30px; padding: 4px 7px; }

    .main { padding-block: 9px; }
    h1 { font-size: clamp(25px, 5vw, 34px); }
    .sub { font-size: 16px; margin: 2px 0 6px; }
    .progress { height: 6px; margin-block: 5px 3px; }
    .counter { font-size: 13px; margin-bottom: 6px; }
    .panel { padding: 11px; border-radius: 16px; }
    .panel,
    .resultCard { flex: 0 0 auto; }
    .grid { gap: 12px; }
    .grid .image-frame { height: min(24vh, 145px); }
    .smalltag { padding: 4px 9px; margin-bottom: 7px; font-size: 13px; }
    .question { font-size: 20px; margin-bottom: 8px; }
    .choices { gap: 6px; }
    .choice { padding: 8px 11px; font-size: 15px; }
    .actions { gap: 8px; margin-top: 8px; }
    .quiz-note { font-size: 12px; margin-top: 8px; }
    .note { font-size: 12px; }
    .btn { font-size: 16px; padding: 9px 16px; }
}

@media (max-width: 720px) and (max-height: 500px) {
    .image-frame { display: none; }
    .grid { display: block; }
    .top { padding-inline: 14px; }
    .main { padding-inline: 14px; }
    .footer { padding-inline: 12px; gap: 8px; }
    .providers { gap: 5px; }
    .providers .provider-logo { width: 59px; height: 27px; padding: 4px 6px; }
}

/* Ersatzdarstellung, falls eine externe Bild-URL nicht erreichbar ist. */
.image-frame {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
    align-self: stretch;
}
.image-fallback {
    min-height: 300px;
    padding: 70px 20px;
    text-align: center;
    background: linear-gradient(135deg, #172342, #a42e73);
    color: white;
    border-radius: 16px;
    font-size: 22px;
}
.image-fallback[hidden] { display: none; }

/* Auf breiten Ansichten nutzt die Bildspalte die vollständige Grid-Höhe. */
@media (min-width: 721px) {
    .grid {
        grid-template-rows: minmax(0, 1fr);
        min-height: 0;
    }

    .grid .image-frame {
        height: 100%;
        align-self: stretch;
    }
}