/* ==========================================================================
   Schlager Nr. 1 Finder – SchlagerMAX
   Alle Farben/Größen kommen als CSS-Variablen aus den Komponenten-Optionen.
   ========================================================================== */

.snr1 {
    /* Standardwerte (werden inline aus den Optionen überschrieben) */
    --snr1-akzent: #e30613;
    --snr1-akzent-text: #fff;
    --snr1-buehne: #241a4b;
    --snr1-buehne-text: #fff;
    --snr1-text-hell: #1f1b2e;
    --snr1-karte-hell: #fff;
    --snr1-schrift: inherit;
    --snr1-basis: 17px;
    --snr1-titel: 2.9;
    --snr1-cover: 240px;
    --snr1-ecken: 16px;

    /* abgeleitet – helles Schema */
    --snr1-text: var(--snr1-text-hell);
    --snr1-karte: var(--snr1-karte-hell);
    --snr1-leise: #6a6580;
    --snr1-linie: rgba(31, 27, 46, .12);
    --snr1-tint: #f6f3fa;
    --snr1-schatten: 0 24px 48px -28px rgba(20, 12, 50, .45);

    container-type: inline-size;
    container-name: snr1;
    display: block;
    width: 100%;
    /* Container haben sonst keine Eigenbreite – in Flex-/Grid-Templates würde der Bereich zusammenschrumpfen */
    contain-intrinsic-inline-size: min(720px, calc(100vw - 32px));
    max-width: var(--snr1-maxbreite, none);
    margin: 0 auto;
    color: var(--snr1-text);
    font-family: var(--snr1-schrift);
    font-size: var(--snr1-basis);
    line-height: 1.5;
}

@supports (color: color-mix(in srgb, red, blue)) {
    .snr1 {
        --snr1-leise: color-mix(in srgb, var(--snr1-text) 62%, var(--snr1-karte));
        --snr1-linie: color-mix(in srgb, var(--snr1-text) 13%, transparent);
        --snr1-tint: color-mix(in srgb, var(--snr1-akzent) 7%, var(--snr1-karte));
    }
}

/* dunkles Schema */
.snr1--dunkel {
    --snr1-text: #f2eff9;
    --snr1-karte: #1d1832;
    --snr1-leise: #b3adc9;
    --snr1-linie: rgba(255, 255, 255, .13);
    --snr1-tint: #272040;
    --snr1-schatten: 0 24px 48px -24px rgba(0, 0, 0, .8);
}

@media (prefers-color-scheme: dark) {
    .snr1--auto {
        --snr1-text: #f2eff9;
        --snr1-karte: #1d1832;
        --snr1-leise: #b3adc9;
        --snr1-linie: rgba(255, 255, 255, .13);
        --snr1-tint: #272040;
        --snr1-schatten: 0 24px 48px -24px rgba(0, 0, 0, .8);
    }
}

.snr1--dunkel .snr1-platte { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16), 0 16px 30px -12px rgba(0, 0, 0, .9); }

@media (prefers-color-scheme: dark) {
    .snr1--auto .snr1-platte { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16), 0 16px 30px -12px rgba(0, 0, 0, .9); }
}

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

:where(.snr1) a { color: inherit; }

.snr1-vh {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

.snr1-seitentitel { margin: 0 0 .8em; }

.snr1-intro,
.snr1-unten { max-width: 70ch; margin: 0 0 2em; }
.snr1-unten { margin-top: 2.5em; }

/* --------------------------------------------------------------------------
   Bühne (Suchbereich)
   -------------------------------------------------------------------------- */
.snr1-buehne {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0 0 2.4em;
    padding: clamp(26px, 5vw, 52px) clamp(20px, 5vw, 56px);
    background: var(--snr1-buehne);
    color: var(--snr1-buehne-text);
    border-radius: var(--snr1-ecken);
}

/* Scheinwerfer von links oben */
.snr1-buehne::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -60%;
    left: -15%;
    width: 70%;
    height: 220%;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0) 62%);
    transform: rotate(-18deg);
    pointer-events: none;
}

.snr1-buehne__titel {
    margin: 0 0 .3em;
    color: inherit;
    font-size: calc(var(--snr1-basis) * 2.05);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.015em;
}

.snr1-buehne__unter {
    max-width: 68ch;
    margin: 0 0 1.5em;
    opacity: .82;
}

/* Umschalter Datum / Interpret / Song */
.snr1-typ {
    display: inline-flex;
    gap: 2px;
    margin: 0 0 .9em;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
}

.snr1-typ input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.snr1-typ label {
    padding: .42em 1.05em;
    border-radius: 999px;
    font-size: .92em;
    font-weight: 650;
    cursor: pointer;
    opacity: .85;
    transition: background-color .15s, color .15s;
}

.snr1-typ input:checked + label {
    background: var(--snr1-buehne-text);
    color: var(--snr1-buehne);
    opacity: 1;
}

.snr1-typ input:focus-visible + label {
    outline: 2px solid var(--snr1-buehne-text);
    outline-offset: 2px;
}

.snr1-feldreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.snr1-feld { position: relative; flex: 1 1 280px; }

.snr1-input,
.snr1-los {
    height: 3.2em;
    border: 0;
    border-radius: calc(var(--snr1-ecken) * .6);
    font: inherit;
}

.snr1-input {
    width: 100%;
    padding: 0 1.1em;
    background: #fff;
    color: #17131f;
    font-size: 1.05em;
}

.snr1-los {
    padding: 0 1.7em;
    background: var(--snr1-akzent);
    color: var(--snr1-akzent-text);
    font-weight: 800;
    cursor: pointer;
}

.snr1-los:hover { filter: brightness(1.08); }

.snr1-input:focus-visible,
.snr1-los:focus-visible {
    outline: 3px solid var(--snr1-buehne-text);
    outline-offset: 2px;
}

/* Autovervollständigung */
.snr1-ac {
    position: absolute;
    z-index: 60;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    color: #17131f;
    border-radius: calc(var(--snr1-ecken) * .6);
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .4);
}

.snr1-ac__item { padding: .6em 1.1em; cursor: pointer; }
.snr1-ac__item:hover,
.snr1-ac__item.is-aktiv { background: #f1edf8; }

/* --------------------------------------------------------------------------
   Abschnitte & Hinweise
   -------------------------------------------------------------------------- */
.snr1-abschnitt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2em .6em;
    margin: 2.2em 0 .8em;
    color: var(--snr1-text);
    font-size: calc(var(--snr1-basis) * 1.35);
    font-weight: 800;
    line-height: 1.2;
}

.snr1-abschnitt small {
    color: var(--snr1-leise);
    font-size: .62em;
    font-weight: 600;
}

.snr1-hinweis {
    margin: 0 0 2em;
    padding: 1em 1.2em;
    background: var(--snr1-tint);
    border-left: 4px solid var(--snr1-akzent);
    border-radius: calc(var(--snr1-ecken) * .5);
    color: var(--snr1-text);
}

/* --------------------------------------------------------------------------
   Hauptergebnis: Platte gleitet aus der Hülle
   -------------------------------------------------------------------------- */
.snr1-held {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 52px);
    padding: clamp(22px, 4vw, 44px);
    padding-right: clamp(22px, 5vw, 60px);
    background: var(--snr1-karte);
    border: 1px solid var(--snr1-linie);
    border-radius: var(--snr1-ecken);
    box-shadow: var(--snr1-schatten);
    color: var(--snr1-text);
}

.snr1-held__bild {
    position: relative;
    width: var(--snr1-cover);
    aspect-ratio: 1;
    margin-right: calc(var(--snr1-cover) * .5);
}

.snr1-held__huelle {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--snr1-ecken) * .35);
    box-shadow: 0 20px 36px -18px rgba(0, 0, 0, .6);
}

.snr1-platte {
    position: absolute;
    z-index: 1;
    top: 4%;
    left: 4%;
    width: 92%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, var(--snr1-karte) 0 2.2%, var(--snr1-akzent) 2.6% 16%, #0e0c14 16.5% 18%, transparent 18.5%),
        repeating-radial-gradient(circle, #16131d 0 2px, #25212e 2px 3px);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    transform: translateX(52%) rotate(30deg);
}

.snr1--animiert .snr1-platte {
    animation: snr1-platte-raus 1.1s cubic-bezier(.2, .75, .25, 1) .25s both;
}

@keyframes snr1-platte-raus {
    from { transform: translateX(0) rotate(0deg); }
    to   { transform: translateX(52%) rotate(30deg); }
}

.snr1-held__jahr {
    position: absolute;
    top: clamp(10px, 2vw, 20px);
    right: clamp(16px, 3vw, 30px);
    color: var(--snr1-leise);
    font-size: calc(var(--snr1-basis) * 2.3);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    text-decoration: none;
}

.snr1-held__jahr:hover,
.snr1-held__jahr:focus-visible { color: var(--snr1-akzent); }

.snr1-held__text { min-width: 0; }

.snr1-held__label {
    margin: 0 0 .5em;
    color: var(--snr1-akzent);
    font-weight: 750;
}

.snr1-held__interpret {
    margin: 0;
    font-size: calc(var(--snr1-basis) * var(--snr1-titel));
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}

.snr1-held__interpret a { text-decoration: none; }
.snr1-held__interpret a:hover,
.snr1-held__interpret a:focus-visible { color: var(--snr1-akzent); }

.snr1-held__titel {
    margin: .3em 0 0;
    color: var(--snr1-leise);
    font-size: calc(var(--snr1-basis) * 1.4);
    line-height: 1.25;
}

/* Wochen auf Platz 1 als Balken */
.snr1-wochen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 1.3em 0 .45em;
}

.snr1-wochen i {
    display: block;
    width: 18px;
    height: 7px;
    border-radius: 4px;
    background: var(--snr1-akzent);
}

.snr1-wochen b { margin-left: .3em; color: var(--snr1-akzent); font-size: .85em; }

.snr1-held__zeit {
    display: flex;
    flex-wrap: wrap;
    gap: .15em 1em;
    margin: 0;
}

.snr1-held__zeit span { color: var(--snr1-leise); }

.snr1-held__quelle {
    padding: 0 .7em;
    background: var(--snr1-tint);
    border-radius: 999px;
    font-size: .85em;
}

.snr1-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: 1.5em;
}

.snr1-knopf {
    display: inline-flex;
    align-items: center;
    padding: .55em 1.1em;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-size: .88em;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.snr1 .snr1-knopf { color: #fff; }
.snr1-knopf:hover,
.snr1-knopf:focus-visible { filter: brightness(.9); }
.snr1-knopf:focus-visible { outline: 3px solid var(--snr1-akzent); outline-offset: 2px; }

.snr1-knopf--youtube { background: #d91a12; }
.snr1-knopf--spotify { background: #168d41; }
.snr1-knopf--apple   { background: #d1203d; }
.snr1-knopf--amazon  { background: #232f3e; }

.snr1 .snr1-knopf--teilen {
    background: transparent;
    color: var(--snr1-text);
    box-shadow: inset 0 0 0 1.5px var(--snr1-linie);
}

.snr1 .snr1-knopf--teilen:hover { color: var(--snr1-akzent); box-shadow: inset 0 0 0 1.5px var(--snr1-akzent); filter: none; }

.snr1--links-dezent .snr1-knopf:not(.snr1-knopf--teilen) {
    background: var(--snr1-tint);
    color: var(--snr1-text);
}

.snr1--links-dezent .snr1-knopf:not(.snr1-knopf--teilen):hover { color: var(--snr1-akzent); filter: none; }

/* Initialen statt Cover */
.snr1-huelle--leer {
    display: grid;
    place-items: center;
    background: var(--snr1-buehne);
    color: var(--snr1-buehne-text);
    font-weight: 800;
    letter-spacing: -.03em;
}

.snr1-held__huelle.snr1-huelle--leer { font-size: calc(var(--snr1-cover) * .3); }

/* --------------------------------------------------------------------------
   Listen (Jahr, Jahrzehnt, Interpret, Song, „Heute“)
   -------------------------------------------------------------------------- */
.snr1-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--snr1-karte);
    border: 1px solid var(--snr1-linie);
    border-radius: var(--snr1-ecken);
    overflow: hidden;
}

.snr1-zeile {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px 18px;
    margin: 0;
    padding: 12px clamp(14px, 2.5vw, 22px);
    border-top: 1px solid var(--snr1-linie);
}

.snr1-zeile:first-child { border-top: 0; }
.snr1-zeile:hover { background: var(--snr1-tint); }

.snr1-zeile__bild {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: calc(var(--snr1-ecken) * .3);
    font-size: 1.05em;
}

.snr1-zeile__text { display: flex; flex-direction: column; min-width: 0; }

.snr1-zeile__interpret {
    font-size: 1.08em;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.snr1-zeile__interpret:hover,
.snr1-zeile__interpret:focus-visible { color: var(--snr1-akzent); }

.snr1-zeile__titel { color: var(--snr1-leise); overflow-wrap: anywhere; }

.snr1-zeile__quelle { color: var(--snr1-leise); font-size: .8em; }

.snr1-zeile__zeit {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: .92em;
    white-space: nowrap;
}

.snr1-zeile__zeit small { color: var(--snr1-leise); font-size: .88em; }

.snr1-zeile__jahr {
    min-width: 3.1ch;
    color: var(--snr1-akzent);
    font-size: 1.45em;
    font-weight: 800;
    text-align: right;
    text-decoration: none;
}

.snr1-zeile__jahr:hover,
.snr1-zeile__jahr:focus-visible { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Jahrzehnte
   -------------------------------------------------------------------------- */
.snr1-dekaden ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.snr1-dekade {
    display: inline-block;
    padding: .45em 1.1em;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px var(--snr1-linie);
    color: var(--snr1-text);
    font-weight: 700;
    text-decoration: none;
}

.snr1-dekade:hover,
.snr1-dekade:focus-visible { box-shadow: inset 0 0 0 1.5px var(--snr1-akzent); color: var(--snr1-akzent); }

.snr1 .snr1-dekade.is-aktiv {
    background: var(--snr1-akzent);
    box-shadow: none;
    color: var(--snr1-akzent-text);
}

.snr1 a:focus-visible { outline: 3px solid var(--snr1-akzent); outline-offset: 2px; border-radius: 4px; }

/* --------------------------------------------------------------------------
   Modul (kompakte Suchbox)
   -------------------------------------------------------------------------- */
.snr1--modul .snr1-buehne { margin: 0; padding: 22px 20px; }
.snr1--modul .snr1-buehne__titel { font-size: calc(var(--snr1-basis) * 1.3); }
.snr1--modul .snr1-feld { flex-basis: 100%; }
.snr1--modul .snr1-los { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .snr1-held {
        grid-template-columns: 1fr;
        padding-top: 28px;
    }

    .snr1-held__bild {
        width: min(var(--snr1-cover), 50vw);
        margin-right: calc(min(var(--snr1-cover), 50vw) * .5);
    }

    .snr1-held__huelle.snr1-huelle--leer { font-size: calc(min(var(--snr1-cover), 50vw) * .3); }
    .snr1-held__jahr { display: none; }
    .snr1-held__interpret { font-size: calc(var(--snr1-basis) * var(--snr1-titel) * .72); }
    .snr1-held__titel { font-size: calc(var(--snr1-basis) * 1.2); }
}

@media (max-width: 600px) {
    .snr1-buehne__titel { font-size: calc(var(--snr1-basis) * 1.55); }
    .snr1-los { flex: 1 1 100%; }

    .snr1-zeile {
        grid-template-columns: 48px minmax(0, 1fr) auto;
        align-items: start;
    }

    .snr1-zeile__bild { width: 48px; height: 48px; }

    .snr1-zeile__zeit {
        grid-column: 2 / 4;
        grid-row: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 .6em;
        align-items: baseline;
        white-space: normal;
    }

    .snr1-zeile__jahr { display: none; }
    .snr1-zeile__text { grid-column: 2 / 4; }
}

@media (prefers-reduced-motion: reduce) {
    .snr1 *,
    .snr1 *::before,
    .snr1 *::after { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------------------
   Wo auf Platz 1 / Erfolgreichster Schlager des Jahres
   -------------------------------------------------------------------------- */
.snr1-held__grund {
    margin: .7em 0 0;
    padding: .55em .9em;
    background: var(--snr1-tint);
    border-radius: calc(var(--snr1-ecken) * .45);
    font-size: .92em;
}

.snr1-held__grund strong { color: var(--snr1-akzent); }

.snr1-zeile__grund { color: var(--snr1-leise); font-size: .82em; line-height: 1.35; margin-top: .15em; }

.snr1-jahreshits__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.snr1-jahreshit {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 16px;
    background: var(--snr1-karte);
    border: 1px solid var(--snr1-linie);
    border-top: 4px solid var(--snr1-akzent);
    border-radius: var(--snr1-ecken);
    color: var(--snr1-text);
}

.snr1-jahreshit__bild {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: calc(var(--snr1-ecken) * .35);
    font-size: 1.6em;
}

.snr1-jahreshit__text { display: flex; flex-direction: column; min-width: 0; }
.snr1-jahreshit__jahr { color: var(--snr1-akzent); font-weight: 800; font-size: 1.15em; line-height: 1.1; }

.snr1-jahreshit__interpret {
    margin-top: .15em;
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.snr1-jahreshit__interpret:hover,
.snr1-jahreshit__interpret:focus-visible { color: var(--snr1-akzent); }

.snr1-jahreshit__titel { color: var(--snr1-leise); overflow-wrap: anywhere; }

.snr1-jahreshit__grund {
    margin: .6em 0 0;
    font-size: .88em;
    line-height: 1.4;
}

.snr1-jahreshit__grund strong { color: var(--snr1-text); }

@media (max-width: 600px) {
    .snr1-jahreshits__liste { grid-template-columns: 1fr; }
    .snr1-jahreshit { grid-template-columns: 64px minmax(0, 1fr); }
    .snr1-jahreshit__bild { width: 64px; height: 64px; }
}

/* ==========================================================================
   Suchbereich: Schrift wächst mit der Breite des Bereichs (Container-Queries)
   ========================================================================== */
@supports (font-size: 1cqi) {
    .snr1-buehne__titel { font-size: clamp(calc(var(--snr1-basis) * 1.35), 5.2cqi, calc(var(--snr1-basis) * 2.9)); }
    .snr1-buehne__unter { font-size: clamp(calc(var(--snr1-basis) * .9), 2cqi, calc(var(--snr1-basis) * 1.15)); }
    .snr1-buehne { padding: clamp(20px, 6cqi, 56px); }
}

/* ---------- Layout A: volle Breite ---------- */
.snr1--layout-breit .snr1-feld { flex: 1 1 260px; }

/* ---------- Layout B: zentriert, Suchleiste ---------- */
.snr1--layout-zentriert .snr1-buehne { text-align: center; }
.snr1--layout-zentriert .snr1-buehne__unter { margin-left: auto; margin-right: auto; }
.snr1--layout-zentriert .snr1-buehne::before { left: 15%; width: 70%; transform: none; }

.snr1--layout-zentriert .snr1-feldreihe {
    max-width: 780px;
    margin: 0 auto;
    padding: 6px;
    gap: 6px;
    flex-wrap: nowrap;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55);
}

.snr1--layout-zentriert .snr1-input { background: transparent; border-radius: 999px; padding-left: 1.3em; }
.snr1--layout-zentriert .snr1-los { border-radius: 999px; }
.snr1--layout-zentriert .snr1-ac { text-align: left; }

/* ---------- Layout C: zweispaltig mit Suchkarte ---------- */
.snr1--layout-zweispaltig .snr1-buehne {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(20px, 5cqi, 56px);
    align-items: center;
}

.snr1--layout-zweispaltig .snr1-buehne__unter { margin-bottom: 0; }

@supports (font-size: 1cqi) {
    .snr1--layout-zweispaltig .snr1-buehne__titel { font-size: clamp(calc(var(--snr1-basis) * 1.35), 3.6cqi, calc(var(--snr1-basis) * 2.4)); }
}

.snr1--layout-zweispaltig .snr1-form {
    padding: clamp(16px, 3cqi, 26px);
    background: #fff;
    border-radius: var(--snr1-ecken);
    color: #1f1b2e;
    box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .6);
}

.snr1--layout-zweispaltig .snr1-typ { background: #efecf6; }
.snr1--layout-zweispaltig .snr1-typ input:checked + label { background: var(--snr1-buehne); color: var(--snr1-buehne-text); }
.snr1--layout-zweispaltig .snr1-typ input:focus-visible + label { outline-color: var(--snr1-buehne); }
.snr1--layout-zweispaltig .snr1-input { background: #f5f3fa; box-shadow: inset 0 0 0 1px #dcd7ea; }
.snr1--layout-zweispaltig .snr1-input:focus-visible,
.snr1--layout-zweispaltig .snr1-los:focus-visible { outline-color: var(--snr1-buehne); }
.snr1--layout-zweispaltig .snr1-feld,
.snr1--layout-zweispaltig .snr1-los { flex: 1 1 100%; }

/* ---------- schmale Bereiche (Handy, Seitenleiste) ---------- */
@container snr1 (max-width: 560px) {
    .snr1-los { flex: 1 1 100%; }
    .snr1-typ { display: flex; width: 100%; }
    .snr1-typ label { flex: 1 1 0; padding: .42em .4em; text-align: center; }
    .snr1--layout-zentriert .snr1-feldreihe { flex-wrap: wrap; border-radius: calc(var(--snr1-ecken) * .9); }
    .snr1--layout-zentriert .snr1-input { background: #f5f3fa; border-radius: calc(var(--snr1-ecken) * .6); }
    .snr1--layout-zentriert .snr1-los { border-radius: calc(var(--snr1-ecken) * .6); }
    .snr1--layout-zweispaltig .snr1-buehne { grid-template-columns: minmax(0, 1fr); }
    .snr1--layout-zweispaltig .snr1-buehne__titel { font-size: clamp(calc(var(--snr1-basis) * 1.35), 6cqi, calc(var(--snr1-basis) * 2)); }
}

/* ==========================================================================
   Bühne über die volle Bildschirmbreite (Option „Randlos“)
   --snr1-vw wird per JavaScript ohne Scrollbalken gesetzt
   ========================================================================== */
.snr1--vollbild .snr1-buehne {
    width: var(--snr1-vw, 100vw);
    max-width: none;
    margin-left: calc(50% - var(--snr1-vw, 100vw) / 2);
    margin-right: 0;
    border-radius: 0;
    padding-left: max(24px, calc((var(--snr1-vw, 100vw) - 100%) / 2 + 24px));
    padding-right: max(24px, calc((var(--snr1-vw, 100vw) - 100%) / 2 + 24px));
}

.snr1--modul.snr1--vollbild .snr1-buehne {
    width: auto;
    margin-left: 0;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: var(--snr1-ecken);
}

/* ==========================================================================
   Musik-Symbole und Hörprobe
   ========================================================================== */
.snr1-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.snr1-leiste--klein { gap: 6px; margin-top: .45em; }

.snr1-icon {
    --snr1-icon-farbe: var(--snr1-text);
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--snr1-icon-farbe);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, filter .12s ease;
}

.snr1 .snr1-icon { color: #fff; }
.snr1-leiste--klein .snr1-icon { width: 32px; height: 32px; }

.snr1-svg {
    width: 52%;
    height: 52%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.snr1-icon:hover,
.snr1-icon:focus-visible { transform: translateY(-1px); filter: brightness(1.1); }
.snr1-icon:focus-visible { outline: 3px solid var(--snr1-akzent); outline-offset: 2px; }

.snr1-icon--youtube { --snr1-icon-farbe: #d91a12; }
.snr1-icon--spotify { --snr1-icon-farbe: #168d41; }
.snr1-icon--apple   { --snr1-icon-farbe: #d1203d; }
.snr1-icon--amazon  { --snr1-icon-farbe: #232f3e; }

.snr1--links-dezent .snr1-icon:not(.snr1-icon--play) {
    --snr1-icon-farbe: var(--snr1-tint);
    color: var(--snr1-text);
    box-shadow: inset 0 0 0 1.5px var(--snr1-linie);
}

.snr1--links-dezent .snr1 .snr1-icon:not(.snr1-icon--play),
.snr1.snr1--links-dezent .snr1-icon:not(.snr1-icon--play) { color: var(--snr1-text); }

/* Play-Knopf mit Fortschrittsring */
.snr1-icon--play {
    --snr1-icon-farbe: var(--snr1-akzent);
    --snr1-fortschritt: 0%;
    color: var(--snr1-akzent-text);
}

.snr1 .snr1-icon--play { color: var(--snr1-akzent-text); }
.snr1-icon--play .snr1-svg { fill: currentColor; stroke: none; }
.snr1-icon--play .snr1-i-pause { display: none; }
.snr1-icon--play.is-spielt .snr1-i-play { display: none; }
.snr1-icon--play.is-spielt .snr1-i-pause { display: inline; }

.snr1-icon--play.is-spielt::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(var(--snr1-akzent) var(--snr1-fortschritt), var(--snr1-linie) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

.snr1-icon--play.is-laedt { opacity: .6; cursor: progress; }
.snr1-icon--play.is-leer { opacity: .35; cursor: not-allowed; }

.snr1-aktionen { align-items: center; }

/* ==========================================================================
   Listenzeilen (überarbeitet): großes Cover, Begründungen, Symbole
   ========================================================================== */
.snr1 { --snr1-listcover: 84px; }

.snr1-zeile {
    grid-template-columns: var(--snr1-listcover) minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 8px clamp(14px, 2.4vw, 24px);
    padding: 16px clamp(14px, 2.5vw, 24px);
}

.snr1-zeile__bild {
    width: var(--snr1-listcover);
    height: var(--snr1-listcover);
    border-radius: calc(var(--snr1-ecken) * .4);
    box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .55);
    font-size: calc(var(--snr1-listcover) * .3);
}

.snr1-zeile__interpret { font-size: 1.15em; }
.snr1-zeile__titel { font-size: 1.02em; }

.snr1-zeile__gruende {
    margin: .35em 0 0;
    padding: 0;
    list-style: none;
    color: var(--snr1-leise);
    font-size: .82em;
    line-height: 1.4;
}

.snr1-zeile__gruende li { position: relative; padding-left: 1em; }

.snr1-zeile__gruende li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .45em;
    height: .45em;
    border-radius: 50%;
    background: var(--snr1-akzent);
}

.snr1-zeile__zeit { padding-top: .2em; }
.snr1-zeile__jahr { line-height: 1; padding-top: .1em; }

.snr1-held__grund ul { margin: .25em 0 0; padding-left: 1.1em; }
.snr1-held__grund li { margin: .1em 0; }

@container snr1 (max-width: 600px) {
    .snr1-zeile {
        grid-template-columns: min(var(--snr1-listcover), 72px) minmax(0, 1fr) auto;
    }

    .snr1-zeile__bild {
        width: min(var(--snr1-listcover), 72px);
        height: min(var(--snr1-listcover), 72px);
    }

    .snr1-zeile__zeit {
        grid-column: 2 / 4;
        grid-row: 2;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 .6em;
        align-items: baseline;
        white-space: normal;
    }

    .snr1-zeile__jahr { display: none; }
    .snr1-zeile__text { grid-column: 2 / 4; }
}

/* ==========================================================================
   Musik-Links als moderne Chips + Play auf dem Cover
   ========================================================================== */
.snr1-chip {
    --snr1-chip-farbe: var(--snr1-leise);
    display: inline-flex;
    align-items: center;
    gap: .45em;
    height: 2.15em;
    padding: 0 .95em 0 .8em;
    border: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--snr1-linie);
    color: var(--snr1-text);
    font: inherit;
    font-size: .82em;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.snr1 .snr1-chip { color: var(--snr1-text); }

.snr1-chip .snr1-svg {
    width: 1.15em;
    height: 1.15em;
    color: var(--snr1-chip-farbe);
    stroke-width: 2.2;
}

.snr1-chip:hover,
.snr1-chip:focus-visible {
    background: var(--snr1-tint);
    box-shadow: inset 0 0 0 1px var(--snr1-chip-farbe);
}

.snr1-chip:focus-visible { outline: 3px solid var(--snr1-akzent); outline-offset: 2px; }

.snr1-chip--youtube { --snr1-chip-farbe: #d91a12; }
.snr1-chip--spotify { --snr1-chip-farbe: #169c46; }
.snr1-chip--apple   { --snr1-chip-farbe: #e0254a; }
.snr1-chip--amazon  { --snr1-chip-farbe: #e38b00; }

/* Hauptknopf „Anhören“ mit Fortschrittsbalken */
.snr1-chip--play {
    --snr1-fortschritt: 0%;
    padding: 0 1.15em 0 .95em;
    background: linear-gradient(90deg, rgba(255, 255, 255, .22) var(--snr1-fortschritt), transparent 0), var(--snr1-akzent);
    box-shadow: none;
    font-size: .9em;
}

.snr1 .snr1-chip--play { color: var(--snr1-akzent-text); }
.snr1-chip--play .snr1-svg { color: currentColor; fill: currentColor; stroke: none; }
.snr1-chip--play:hover,
.snr1-chip--play:focus-visible {
    background: linear-gradient(90deg, rgba(255, 255, 255, .22) var(--snr1-fortschritt), transparent 0), var(--snr1-akzent);
    box-shadow: none;
    filter: brightness(1.08);
}

.snr1-chip--play .snr1-i-pause,
.snr1-coverplay__knopf .snr1-i-pause { display: none; }
.snr1-chip--play.is-spielt .snr1-i-play,
.snr1-coverplay__knopf.is-spielt .snr1-i-play { display: none; }
.snr1-chip--play.is-spielt .snr1-i-pause,
.snr1-coverplay__knopf.is-spielt .snr1-i-pause { display: inline; }
.snr1-chip--play.is-laedt,
.snr1-coverplay__knopf.is-laedt { opacity: .65; cursor: progress; }
.snr1-chip--play.is-leer,
.snr1-coverplay__knopf.is-leer { opacity: .35; cursor: not-allowed; }

.snr1-aktionen .snr1-chip { font-size: .9em; height: 2.45em; }

/* Play-Knopf auf dem Cover */
.snr1-coverplay { position: relative; line-height: 0; }

.snr1-coverplay__knopf {
    --snr1-fortschritt: 0%;
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--snr1-akzent);
    color: var(--snr1-akzent-text);
    box-shadow: 0 0 0 3px var(--snr1-karte), 0 6px 14px -6px rgba(0, 0, 0, .6);
    cursor: pointer;
    transition: transform .15s ease;
}

.snr1 .snr1-coverplay__knopf { color: var(--snr1-akzent-text); }
.snr1-coverplay__knopf .snr1-svg { width: 46%; height: 46%; fill: currentColor; stroke: none; }
.snr1-coverplay__knopf:hover,
.snr1-coverplay__knopf:focus-visible { transform: scale(1.08); }
.snr1-coverplay__knopf:focus-visible { outline: 3px solid var(--snr1-akzent); outline-offset: 3px; }

.snr1-coverplay__knopf.is-spielt::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(var(--snr1-akzent-text) var(--snr1-fortschritt), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

.snr1-leiste--klein { gap: 6px; margin-top: .55em; }

/* Countdown beim Anhören */
.snr1-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    letter-spacing: .01em;
}

/* Chip „Anhören“: Restzeit hinter dem Wort, während pausiert sichtbar bleibt */
.snr1-chip--play .snr1-countdown {
    margin-left: .15em;
    padding-left: .55em;
    border-left: 1px solid currentColor;
    opacity: .9;
}

/* Runde Knöpfe: Zahl statt Pause-Symbol während des Abspielens */
.snr1-coverplay__knopf .snr1-countdown,
.snr1-icon--play .snr1-countdown {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    font-size: 13px;
    line-height: 1;
}

.snr1-coverplay__knopf.is-spielt .snr1-countdown,
.snr1-icon--play.is-spielt .snr1-countdown { display: grid; }
.snr1-coverplay__knopf.is-spielt .snr1-svg,
.snr1-icon--play.is-spielt .snr1-svg { opacity: 0; }

/* beim Überfahren wieder das Pause-Symbol zeigen */
.snr1-coverplay__knopf.is-spielt:hover .snr1-countdown,
.snr1-icon--play.is-spielt:hover .snr1-countdown { display: none; }
.snr1-coverplay__knopf.is-spielt:hover .snr1-svg,
.snr1-icon--play.is-spielt:hover .snr1-svg { opacity: 1; }

/* „Keine Hörprobe“: Chip bleibt lesbar, Zeit ausgeblendet */
.snr1-chip--play.is-leer {
    opacity: 1;
    background: var(--snr1-tint);
    box-shadow: inset 0 0 0 1px var(--snr1-linie);
    cursor: default;
    filter: none;
}

.snr1 .snr1-chip--play.is-leer { color: var(--snr1-leise); }
.snr1-chip--play.is-leer .snr1-countdown,
.snr1-chip--play.is-leer .snr1-svg { display: none; }

/* ==========================================================================
   YouTube-Popup (liegt direkt im <body>, daher feste Farben)
   ========================================================================== */
.snr1-video {
    width: min(1000px, 94vw);
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #0f0c1a;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}

.snr1-video::backdrop {
    background: rgba(12, 9, 24, .78);
    backdrop-filter: blur(3px);
}

.snr1-video__kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 18px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.snr1-video__titel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snr1-video__extern {
    color: #cfc9e6;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.snr1-video__extern:hover,
.snr1-video__extern:focus-visible { color: #fff; text-decoration: underline; }

.snr1-video__zu {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.snr1-video__zu:hover { background: rgba(255, 255, 255, .2); }
.snr1-video__zu:focus-visible,
.snr1-video__extern:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.snr1-video__rahmen { position: relative; aspect-ratio: 16 / 9; background: #000; }

.snr1-video__rahmen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 600px) {
    .snr1-video { width: 100vw; border-radius: 0; }
    .snr1-video__extern { display: none; }
}

/* Datenschutz-Hinweis vor dem YouTube-Video */
.snr1-video__hinweis {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px;
    background: #1c1830 center / cover no-repeat;
}

.snr1-video__hinweis::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 12, 26, .35), rgba(15, 12, 26, .75));
}

.snr1-video__abspielen,
.snr1-video__text { position: relative; }

.snr1-video__abspielen {
    padding: 14px 34px;
    border: 0;
    border-radius: 6px;
    background: #e30613;
    color: #fff;
    font: 800 17px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7);
}

.snr1-video__abspielen:hover { filter: brightness(1.1); }
.snr1-video__abspielen:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.snr1-video__text {
    max-width: 720px;
    padding: 14px 18px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .93);
    color: #1f1b2e;
    font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    text-align: center;
}

.snr1-video__text p { margin: 0; }
.snr1-video__text a { color: #c40512; }
.snr1-video__merken { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 13px; cursor: pointer; }

@media (max-width: 600px) {
    .snr1-video__hinweis { gap: 12px; padding: 12px; }
    .snr1-video__text { font-size: 12px; padding: 10px 12px; }
    .snr1-video__abspielen { padding: 11px 24px; font-size: 15px; }
}

/* Zusatz: Nummer 1 in Österreich / Schweiz */
.snr1-zusatz { margin-top: 2em; }
.snr1-zusatz .snr1-liste { background: var(--snr1-tint); }
.snr1-zusatz .snr1-zeile:hover { background: var(--snr1-karte); }
.snr1-zusatz__flagge {
    display: inline-block;
    width: 1.4em;
    height: 1em;
    border-radius: 2px;
    vertical-align: -.1em;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.snr1-zusatz--at .snr1-zusatz__flagge { background: linear-gradient(#ed2939 0 33.3%, #fff 33.3% 66.6%, #ed2939 66.6%); }
.snr1-zusatz--ch .snr1-zusatz__flagge {
    width: 1em;
    background:
        linear-gradient(#fff, #fff) center / 20% 60% no-repeat,
        linear-gradient(#fff, #fff) center / 60% 20% no-repeat,
        #da291c;
}
.snr1-abschnitt--klein { font-size: 1.05em; margin-top: 1.2em; }

/* ==========================================================================
   Listen modern: abgerundete Zeilen mit Abstand, jede zweite ganz leicht grau
   ========================================================================== */
.snr1-liste {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
}

.snr1-liste > .snr1-zeile,
.snr1-liste > li {
    border: 0 !important;
    border-radius: calc(var(--snr1-ecken) * .6);
    background: var(--snr1-karte);
    transition: background-color .15s ease;
}

.snr1-liste > li:nth-child(even) {
    background: color-mix(in srgb, var(--snr1-karte) 96.5%, var(--snr1-text));
}

.snr1-liste > li:hover {
    background: color-mix(in srgb, var(--snr1-karte) 93%, var(--snr1-akzent));
}

/* Zusatz-Bereiche (Österreich/Schweiz): gleiche Optik */
.snr1-zusatz .snr1-liste { background: var(--snr1-karte); }
.snr1-zusatz .snr1-zeile:hover { background: color-mix(in srgb, var(--snr1-karte) 93%, var(--snr1-akzent)); }

@supports not (background: color-mix(in srgb, #fff 50%, #000)) {
    .snr1-liste > li:nth-child(even) { background: rgba(0, 0, 0, .025); }
    .snr1-liste > li:hover { background: rgba(0, 0, 0, .05); }
}

/* Jede Zeile als eigene Karte mit Rahmen */
.snr1-liste,
.snr1-zusatz .snr1-liste {
    gap: 8px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.snr1-liste > li,
.snr1-liste > .snr1-zeile {
    border: 1px solid color-mix(in srgb, var(--snr1-karte) 86%, var(--snr1-text)) !important;
    box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .12);
}

.snr1-liste > li:hover,
.snr1-liste > .snr1-zeile:hover {
    border-color: color-mix(in srgb, var(--snr1-karte) 70%, var(--snr1-akzent)) !important;
}