/* ==========================================================================
   serious-music.net — Stylesheet
   Entwurf 1, abgenommen 05.10.2026. Cover ueberall quadratisch.
   Zwei Schriften, self-hosted: Barlow Condensed (Marke, Ueberschriften),
   Inter (Fliesstext).
   ========================================================================== */

/* --- Schriften ----------------------------------------------------------- */
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family:"Barlow Condensed"; font-style:normal; font-weight:800; font-display:swap; src:url(../fonts/barlow-condensed-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/inter-latin-700-normal.woff2) format("woff2"); }

/* --- Tokens -------------------------------------------------------------- */
:root{
    --bg:#090c11;
    --bg-deep:#05070a;
    --bg-kopf:#0b0f15;
    --panel:#0f141b;
    --panel-2:#131921;
    --linie:rgba(255,255,255,.09);
    --linie-stark:rgba(255,255,255,.16);

    --text:#e9eef4;
    --text-2:#c3ccd6;
    --muted:#8b98a6;

    --rot:#e4121f;
    --rot-hell:#ff2436;
    --rot-tief:#9c0a14;

    --font-head:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
    --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

    --radius:6px;
    --wrap:1340px;
    /* ---- Foto im Kopfbereich -----------------------------------------------
       Zwei getrennte Dinge:

       1. DAS FENSTER (der Container). Es liefert den Verlauf — links, rechts und
          unten laeuft es weich aus. Das Fenster bleibt, wo es ist.
       2. DAS BILD darin. Es hat KEINE eigene Maske und wird nicht beschnitten.
          Es haengt oben am Fenster und darf breiter sein als das Fenster; was
          uebersteht, faengt der Verlauf ab.

       Zum Einstellen reichen die Werte unten: Fenster festlegen, dann das Bild
       so skalieren und schieben, dass sie mittig im klaren Bereich sitzt.
    */
    --news-bild-h:clamp(110px, 13vw, 170px);     /* Hoehe der News-Bilder */
    --beitrag-bild-h:min(68vh, 560px);          /* Maximalhoehe im News-Artikel */
    --hero-fenster:clamp(260px, 34vw, 540px);   /* Breite des Fensters          */
    --hero-fenster-rand:0px;                     /* groesser = Fenster nach links */
    --hero-foto:100%;                            /* Bildhoehe, bezogen auf die Fensterhoehe
                                                    100% = Bild genau so hoch wie das Fenster */
    --hero-foto-oben:0px;                        /* groesser = Bild nach unten    */
    --hero-foto-rechts:0%;                       /* groesser = Bild nach links    */
    --gutter:clamp(1rem,3.5vw,2rem);
}

/* --- Basis --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%;}
body{
    margin:0;background:var(--bg);color:var(--text);
    font:400 1rem/1.65 var(--font-body);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
img,svg,video,iframe{display:block;max-width:100%;}
img{height:auto;}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--rot-hell);}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;}
ul,ol{padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--rot-hell);outline-offset:3px;}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.sm-skip{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--rot);color:#fff;padding:.6rem 1rem;border-radius:var(--radius);}
.sm-skip:focus{top:1rem;}

.sm-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter);}
.sm-wrap--schmal{max-width:820px;}
.sm-accent{color:var(--rot);}
.sm-icon{flex:0 0 auto;}

/* --- Ueberschriften ------------------------------------------------------ */
.sm-h1,.sm-h2,.sm-hero__h1,.sm-karte__titel,.sm-news__titel,.sm-kasten__titel,.sm-treffer__titel{
    font-family:var(--font-head);font-weight:800;letter-spacing:.01em;line-height:1.05;
    text-transform:uppercase;
}
.sm-h1{font-size:clamp(2rem,4.4vw,3.2rem);}
.sm-h2{font-size:clamp(1.6rem,3vw,2.3rem);display:inline-flex;align-items:center;gap:1rem;}
.sm-h2::after{content:"";flex:0 0 auto;width:clamp(48px,7vw,110px);height:3px;background:linear-gradient(90deg,var(--rot),transparent);}
.sm-label{
    display:inline-block;background:var(--rot);color:#fff;
    font:700 .72rem/1 var(--font-body);letter-spacing:.14em;text-transform:uppercase;
    padding:.46rem .7rem;border-radius:3px;
}
.sm-datum{color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;}
.sm-leer{color:var(--muted);padding:3rem 0;}
.sm-fussnote{color:var(--muted);font-size:.85rem;margin-top:1.5rem;}

/* --- Kopfbereich der Seite ----------------------------------------------- */
.sm-head{position:relative;z-index:50;background:var(--bg-kopf);}
.sm-head__top{
    background:linear-gradient(180deg,rgba(12,16,22,.92),rgba(9,12,17,.98));
    border-bottom:1px solid var(--linie);
}
.sm-head__topin{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);min-height:92px;}

.sm-marke{display:flex;flex-direction:column;gap:.25rem;}
.sm-marke__wort{
    font-family:var(--font-head);font-weight:800;line-height:.95;
    font-size:clamp(1.65rem,3.2vw,2.5rem);letter-spacing:.005em;color:#fff;
}
.sm-marke__claim{
    font:500 .62rem/1 var(--font-body);letter-spacing:.42em;color:var(--muted);text-transform:uppercase;
}
.sm-head__marke:hover .sm-marke__wort{color:#fff;}
.sm-marke--fuss .sm-marke__wort{font-size:clamp(1.4rem,2.6vw,2rem);}

.sm-head__suche{flex:1 1 auto;max-width:460px;}
.sm-suche{position:relative;display:flex;align-items:center;}
.sm-suche__feld{
    width:100%;background:rgba(255,255,255,.05);border:1px solid var(--linie);
    border-radius:999px;padding:.74rem 3rem .74rem 1.2rem;font-size:.9rem;color:var(--text);
}
.sm-suche__feld::placeholder{color:var(--muted);}
.sm-suche__feld:focus{border-color:var(--linie-stark);background:rgba(255,255,255,.08);outline:none;}
.sm-suche__knopf{position:absolute;right:.35rem;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--text-2);}
.sm-suche__knopf:hover{color:var(--rot-hell);}

.sm-social{display:flex;align-items:center;gap:.35rem;}
.sm-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--text-2);transition:color .18s,background .18s;}
.sm-social a:hover{color:#fff;background:var(--rot);}

.sm-burger{display:none;width:44px;height:44px;place-items:center;border-radius:var(--radius);border:1px solid var(--linie);}

/* --- Hauptnavigation ------------------------------------------------------ */
.sm-nav{background:var(--bg-deep);border-bottom:2px solid var(--rot);}
.sm-nav__list{display:flex;flex-wrap:wrap;align-items:stretch;}
.sm-nav__list > li > a{
    display:flex;align-items:center;gap:.5rem;height:52px;padding:0 1.05rem;
    font-family:var(--font-head);font-weight:700;font-size:1.02rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--text-2);
    border-bottom:3px solid transparent;transition:color .18s,background .18s,border-color .18s;
}
.sm-nav__list > li > a:hover{color:#fff;background:rgba(228,18,31,.14);border-bottom-color:var(--rot);}
.sm-nav__list > li.current-menu-item > a,
.sm-nav__list > li.current_page_item > a,
.sm-nav__list > li.current-menu-parent > a{background:var(--rot);color:#fff;border-bottom-color:var(--rot);}
.sm-nav__icon{opacity:.85;}

/* Untermenue */
.sm-nav__list li{position:relative;}
.sm-nav__list .sub-menu{
    position:absolute;top:100%;left:0;min-width:220px;z-index:60;
    background:var(--panel);border:1px solid var(--linie);border-radius:0 0 var(--radius) var(--radius);
    padding:.4rem 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;
}
.sm-nav__list li:hover > .sub-menu,
.sm-nav__list li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none;}
.sm-nav__list .sub-menu a{display:block;padding:.6rem 1rem;font-size:.92rem;color:var(--text-2);}
.sm-nav__list .sub-menu a:hover{color:#fff;background:rgba(255,255,255,.05);}

/* --- Buttons ------------------------------------------------------------- */
.sm-btn{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:.8rem 1.25rem;border-radius:3px;
    font-family:var(--font-head);font-weight:700;font-size:1.02rem;letter-spacing:.09em;text-transform:uppercase;
    border:1px solid transparent;transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.sm-btn:hover{transform:translateY(-1px);color:#fff;}
.sm-btn--voll{background:var(--rot);color:#fff;}
.sm-btn--voll:hover{background:var(--rot-hell);}
.sm-btn--rand{border-color:var(--linie-stark);color:var(--text);}
.sm-btn--rand:hover{border-color:var(--rot);background:rgba(228,18,31,.12);}
.sm-btn:not(.sm-btn--voll):not(.sm-btn--rand){border-color:var(--linie-stark);color:var(--text);}

.sm-mehr{
    display:inline-flex;align-items:center;gap:.4rem;color:var(--rot);
    font:700 .82rem/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;
}
.sm-mehr:hover{color:var(--rot-hell);gap:.65rem;}
.sm-mehr .sm-icon{transition:transform .18s;}

/* --- Kopfbereich Startseite (New Single) --------------------------------- */
.sm-hero{position:relative;overflow:hidden;background:var(--bg-deep);isolation:isolate;}
.sm-hero__bg{position:absolute;inset:0;z-index:-2;}
.sm-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.3;filter:saturate(.7);}
.sm-hero::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(90deg,rgba(5,7,10,.96) 0%,rgba(5,7,10,.82) 46%,rgba(5,7,10,.25) 78%,rgba(5,7,10,.55) 100%);
}
/* Das Portrait endet buendig mit dem Inhalt, nicht an der Bildschirmkante.
   Rueckmeldung Inge 08.10.2026: links und rechts soll der Rand gleich sein.
   Der Abstand von rechts ist deshalb die halbe Differenz zwischen Fenster und
   Inhaltsbreite, plus der uebliche Seitenabstand. */
/* Das Fenster: volle Hoehe des Kopfbereichs, buendig mit dem Inhaltsrand.
   Hier sitzt der Verlauf — nicht am Bild. Dadurch laesst sich das Bild darin
   frei skalieren und verschieben, ohne dass der Verlauf mitwandert. */
.sm-hero__portrait{
    position:absolute;top:0;bottom:0;
    right:calc((100% - min(100%, var(--wrap))) / 2 + var(--gutter) + var(--hero-fenster-rand));
    width:var(--hero-fenster);
    overflow:hidden;
    z-index:-1;pointer-events:none;
    -webkit-mask-image:
        linear-gradient(90deg,transparent 0,#000 16%,#000 94%,transparent 100%),
        linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
    mask-image:
        linear-gradient(90deg,transparent 0,#000 16%,#000 94%,transparent 100%),
        linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-composite:intersect;
}
/* Links weich einblenden wie bisher. Rechts jetzt auch ein schmaler Verlauf:
   seit das Portrait am Inhaltsrand endet, staende dort sonst eine harte Kante
   mitten auf der Seite. */
/* `cover` hat sie immer seitlich beschnitten — je nach Fensterhoehe waren nur
   68 bis 84 % der Bildbreite zu sehen, ihr Ruecken fiel weg. Deshalb `contain`:
   die volle Bildbreite steht, beschnitten wird allenfalls oben, und dort ist nur
   Mauer. Unten buendig, damit sie auf der Kante des Kopfbereichs sitzt.
   Der weiche Rand links ist breit (dort ist Hintergrund), rechts nur ein Hauch,
   sonst liefe er ueber ihren Ruecken. */
/* Das Bild selbst: oben angeheftet, unveraendert, ohne eigene Maske.
   Die Groesse haengt an der HOEHE, nicht an der Breite — so steht die Figur
   immer vollstaendig im Fenster, egal wie hoch der Kopfbereich gerade ist
   (die Headline laesst ihn mitwachsen). Die Breite folgt dem Seitenverhaeltnis.
   `max-width:none`, weil die Basisregel fuer Bilder sonst auf Fensterbreite
   stauchen wuerde. */
.sm-hero__portrait img{
    position:absolute;
    top:var(--hero-foto-oben);
    right:var(--hero-foto-rechts);
    height:var(--hero-foto);
    width:auto;max-width:none;display:block;
}

/* Rechts Platz lassen, damit das Cover nicht unter dem Portrait liegt. */
.sm-hero__in{position:relative;padding-block:clamp(2.5rem,6vw,4.5rem);}
/* Rechts so viel frei lassen, wie das Portrait breit ist — sonst laege das
   Cover darunter. */
/* Nicht die volle Portraitbreite freihalten: dessen linkes Fuenftel ist ohnehin
   weich ausgeblendet. Sonst bleibt fuer die Headline zu wenig uebrig — "Sunlight
   On My Face feat. Tanja" brach auf fuenf Zeilen um. */
/* Rechts so viel freihalten, wie das Fenster breit ist — abzueglich des weichen
   Randes links, dort darf das Cover ruhig hineinragen. */
@media (min-width:1100px){ .sm-hero__in{padding-right:calc(var(--gutter) + var(--hero-fenster) * .84);} }
.sm-hero__bahn{position:relative;}
/* Das Cover kleiner als zuvor: seit das Foto fast seine volle Breite freihaelt,
   blieb fuer die Headline zu wenig — der laengste Titel brach auf sechs Zeilen um.
   Dasselbe Cover steht gleich darunter in "Latest Releases" noch einmal. */
.sm-hero__slide{display:none;grid-template-columns:minmax(0,1fr) minmax(0,clamp(200px,21vw,320px));gap:clamp(1.25rem,3vw,2.5rem);align-items:center;}
/* Bewusst KEINE Keyframe-Animation am Wechsel: eine Animation, die zugleich
   display umschaltet, startet in Chrome nicht zuverlaessig — die Folie blieb
   dann auf dem Anfangsbild der Animation stehen, also unsichtbar.
   Der Einblendeffekt laeuft deshalb ueber eine Klasse, die das Skript kurz setzt. */
.sm-hero__slide.is-aktiv{display:grid;opacity:1;}
.sm-hero__slide.is-neu{animation:sm-ein .4s ease;}   /* fill-mode bewusst nicht "both": laeuft die Animation nicht (gedrosselter Hintergrund-Tab), ist die Folie trotzdem sichtbar */
@keyframes sm-ein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* Die Textspalte ist schmaler geworden, seit das Foto rechts Platz braucht.
   Deshalb oben eine kleinere Obergrenze — sonst brach der laengste Titel
   ("My Uniqueness Is Not A Weakness feat. Paul Dempsey") auf fuenf Zeilen um. */
.sm-hero__h1{font-size:clamp(2.1rem,4.6vw,3.7rem);margin:.7rem 0 .25rem;}
.sm-hero__artist{
    font-family:var(--font-head);font-weight:700;text-transform:uppercase;
    font-size:clamp(1.1rem,2.4vw,1.75rem);letter-spacing:.14em;color:var(--text-2);
}
.sm-hero__lead{max-width:48ch;color:var(--text-2);margin-top:1rem;}
.sm-hero__lead p{margin:0 0 .5rem;}
.sm-hero__knoepfe{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem;}
.sm-hero__cover{position:relative;}
.sm-hero__cover img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;box-shadow:0 24px 60px rgba(0,0,0,.6);}

/* Die Pfeile sitzen unten neben den Punkten. Seitlich wuerden sie auf schmalen
   Bildschirmen ueber der Headline liegen. */
.sm-hero__steuer{display:flex;align-items:center;gap:1rem;margin-top:1.75rem;}
.sm-hero__pfeil{
    display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;
    border:1px solid var(--linie);border-radius:50%;color:var(--text-2);
}
.sm-hero__pfeil:hover{color:#fff;border-color:var(--rot);background:rgba(228,18,31,.14);}
.sm-hero__punkte{display:flex;gap:.5rem;}
.sm-punkt{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.26);transition:background .18s,width .18s;}
.sm-punkt.is-aktiv{background:var(--rot);width:22px;border-radius:999px;}

/* --- Bloecke ------------------------------------------------------------- */
.sm-block{padding-block:clamp(2.2rem,4.5vw,3.4rem);}
.sm-block__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem;}

/* --- Latest Releases ------------------------------------------------------ */
.sm-releases{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);}
.sm-bahn{
    display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);
    gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:1rem;margin:-1rem;
    background:transparent;scrollbar-width:thin;
}
.sm-bahn > *{scroll-snap-align:start;}
.sm-bahn::-webkit-scrollbar{height:6px;}
.sm-bahn::-webkit-scrollbar-thumb{background:var(--linie-stark);border-radius:999px;}

/* --- Karten -------------------------------------------------------------- */
.sm-karte{min-width:0;}
.sm-cover{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:4px;background:var(--panel-2);transition:transform .25s,box-shadow .25s;}
.sm-karte a:hover .sm-cover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.55);}
.sm-cover--leer{display:block;border:1px dashed var(--linie);}
.sm-karte__titel{font-size:1.06rem;margin-top:.7rem;color:var(--text);}
.sm-karte a:hover .sm-karte__titel{color:var(--rot-hell);}
.sm-karte__artist{color:var(--text-2);font-size:.88rem;}
.sm-karte__datum{color:var(--muted);font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;margin-top:.2rem;}
.sm-karte__text{color:var(--text-2);font-size:.9rem;}
.sm-karte__text p{margin:0;}
.sm-karte__text p + p{margin-top:.4rem;}
.sm-karte__text a{color:var(--rot);}
.sm-preis{font-family:var(--font-head);font-weight:700;font-size:1.3rem;color:var(--rot);}

.sm-raster{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
.sm-liste{display:grid;gap:1rem;}

.sm-karte--foto figcaption{color:var(--muted);font-size:.82rem;margin-top:.5rem;}
.sm-karte--link{display:flex;gap:1rem;align-items:center;background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius);padding:1rem;}
.sm-karte--link .sm-karte__logo img{width:72px;height:72px;object-fit:cover;border-radius:4px;}
.sm-karte--link .sm-karte__titel{margin-top:0;}
/* Das Symbol fuer "oeffnet extern" gehoert in die Zeile, nicht darunter:
   svg steht im Theme sonst auf display:block. */
.sm-karte--link .sm-karte__titel a{display:inline-flex;align-items:center;gap:.4rem;}
.sm-karte--link .sm-karte__titel a .sm-icon{display:inline-block;opacity:.6;}

/* --- Songsuche im Musikarchiv -------------------------------------------- */
.sm-finder{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,16rem) auto;gap:.6rem;
    align-items:stretch;margin-bottom:1.75rem;
}
.sm-finder__feld{position:relative;display:flex;align-items:center;min-width:0;}
.sm-finder__lupe{position:absolute;left:.85rem;color:var(--muted);pointer-events:none;}
.sm-finder__input{
    width:100%;height:46px;padding:0 2.6rem 0 2.7rem;color:var(--text);
    background:rgba(255,255,255,.05);border:1px solid var(--linie);border-radius:999px;
}
.sm-finder__input::placeholder{color:var(--muted);}
.sm-finder__input:focus{border-color:var(--linie-stark);background:rgba(255,255,255,.08);outline:none;}
.sm-finder__input::-webkit-search-cancel-button{display:none;}
.sm-finder__leeren{
    position:absolute;right:.5rem;display:grid;place-items:center;width:30px;height:30px;
    border-radius:50%;font-size:1.3rem;line-height:1;color:var(--text-2);
}
.sm-finder__leeren:hover{color:var(--rot-hell);background:rgba(255,255,255,.08);}
.sm-finder__leeren[hidden]{display:none;}   /* sonst schlaegt display:grid das Attribut */

.sm-finder__wahl{
    height:46px;padding:0 2.2rem 0 1rem;color:var(--text);
    background:rgba(255,255,255,.05);border:1px solid var(--linie);border-radius:999px;
    appearance:none;-webkit-appearance:none;cursor:pointer;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.sm-finder__wahl:hover,.sm-finder__wahl:focus{border-color:var(--linie-stark);outline:none;}
.sm-finder__wahl option{background:var(--panel);color:var(--text);}
.sm-finder__los{height:46px;}

.sm-finder__treffer{
    position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:30;
    max-height:min(60vh,340px);overflow:auto;margin:0;padding:.3rem;list-style:none;
    background:var(--panel);border:1px solid var(--linie-stark);border-radius:var(--radius);
    box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.sm-finder__treffer li{margin:0;}
.sm-finder__treffer a{display:block;padding:.55rem .75rem;border-radius:4px;color:var(--text);font-size:.95rem;}
.sm-finder__treffer a:hover,.sm-finder__treffer li.is-aktiv a{background:var(--rot);color:#fff;}
.sm-finder__leer{padding:.55rem .75rem;color:var(--text-2);font-size:.95rem;}

@media (max-width:760px){
    .sm-finder{grid-template-columns:minmax(0,1fr);}
    .sm-finder__los{display:none;}
}

.sm-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.75rem;}
.sm-chip{
    display:inline-block;padding:.42rem .9rem;border:1px solid var(--linie);border-radius:999px;
    font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);
}
.sm-chip:hover,.sm-chip.is-aktiv{background:var(--rot);border-color:var(--rot);color:#fff;}

/* --- Zwei Spalten (News | Radio + Charts) -------------------------------- */
.sm-spalten{display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:minmax(0,1fr) minmax(0,360px);padding-bottom:3.5rem;}
.sm-spalten__seite{display:grid;gap:1.25rem;align-content:start;}

/* --- News ---------------------------------------------------------------- */
.sm-news__liste{display:grid;gap:1rem;}
.sm-news__eintrag{
    display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;align-items:start;
    background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius);padding:1rem;
    transition:border-color .2s,background .2s;
}
.sm-news__eintrag:hover{border-color:var(--linie-stark);background:var(--panel-2);}
.sm-news__bild{display:block;}
/* Einheitliche Hoehe, Breite folgt dem Seitenverhaeltnis des Originals. */
.sm-news__cover{display:block;height:var(--news-bild-h);width:auto;max-width:100%;border-radius:4px;background:var(--panel-2);}
.sm-news__cover.sm-cover--leer{width:var(--news-bild-h);}
.sm-news__text .sm-datum{display:inline-block;border:1px solid var(--linie);border-radius:3px;padding:.2rem .5rem;}
.sm-news__titel{font-size:clamp(1.1rem,1.9vw,1.45rem);margin:.55rem 0 .4rem;}
.sm-news__teaser{color:var(--text-2);font-size:.93rem;margin-bottom:.6rem;}
.sm-news__fuss{margin:1.25rem 0 0;text-align:center;}

/* --- Kasten (Radio, Charts) ---------------------------------------------- */
.sm-kasten{background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius);padding:1.1rem 1.15rem 1.25rem;scroll-margin-top:24px;}
/* Nach dem Sprung aus dem Menue kurz hervorheben, sonst weiss man nicht,
   wo man gelandet ist — der Kasten steht in der schmalen Spalte. */
.sm-kasten:target{border-color:var(--rot);animation:sm-ziel 2.4s ease-out 1;}
@keyframes sm-ziel{0%,22%{box-shadow:0 0 0 3px rgba(228,18,31,.35);}100%{box-shadow:0 0 0 0 rgba(228,18,31,0);}}
.sm-kasten__kopf{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem;}
.sm-kasten__titel{display:inline-flex;align-items:center;gap:.6rem;font-size:1.25rem;}
.sm-live{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.78rem;}
.sm-live i{width:8px;height:8px;border-radius:50%;background:var(--rot);animation:sm-puls 1.8s ease-in-out infinite;}
@keyframes sm-puls{0%,100%{opacity:1;}50%{opacity:.25;}}

.sm-kasten__titel a:hover{color:var(--rot-hell);}
.sm-radio__mehr{margin-top:.9rem;}
/* In der schmalen Spalte darf der Knopf nicht so wuchtig sein wie auf der Seite. */
.sm-spalten__seite .sm-embed__go{padding:.8rem 1.2rem;font-size:1rem;}
.sm-spalten__seite .sm-embed__box{padding:1.1rem;}
.sm-radio__in{display:flex;gap:.9rem;align-items:center;}
.sm-radio__cover img{width:72px;height:72px;border-radius:4px;object-fit:cover;}
.sm-radio__titel{font-weight:600;}
.sm-radio__artist{color:var(--muted);font-size:.88rem;}
.sm-radio__steuer{display:flex;align-items:center;gap:.9rem;margin-top:1rem;}
.sm-play{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--rot);color:#fff;flex:0 0 auto;}
.sm-play:hover{background:var(--rot-hell);color:#fff;}
.sm-play .sm-play__aus{display:none;}
.sm-radio.is-laeuft .sm-play__an{display:none;}
.sm-radio.is-laeuft .sm-play__aus{display:block;}
.sm-radio__balken{flex:1 1 auto;height:4px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;}
.sm-radio__balken span{display:block;height:100%;width:0;background:var(--rot);transition:width .3s linear;}
.sm-radio__unten{display:flex;align-items:center;gap:.75rem;margin-top:.9rem;color:var(--muted);}
.sm-laut{flex:1 1 auto;accent-color:var(--rot);}

/* --- Charts -------------------------------------------------------------- */
/* --- Radio-Seite --------------------------------------------------------- */
.sm-radioseite .sm-label{display:inline-flex;align-items:center;gap:.45rem;}
.sm-radioseite__player{max-width:900px;margin-top:.5rem;}
.sm-radioseite__player .sm-embed--audio iframe{border-radius:var(--radius);}
.sm-radio--gross{max-width:560px;}

.sm-charts__liste{display:grid;gap:.1rem;}
.sm-charts__eintrag{display:grid;grid-template-columns:34px 44px minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.55rem 0;border-top:1px solid var(--linie);}
.sm-charts__eintrag:first-child{border-top:0;}
.sm-platz{
    display:grid;place-items:center;width:34px;height:34px;border-radius:4px;
    background:rgba(255,255,255,.06);color:var(--text-2);
    font-family:var(--font-head);font-weight:800;font-size:1.1rem;
}
.sm-charts__eintrag:first-child .sm-platz{background:var(--rot);color:#fff;}
.sm-charts__cover img{width:44px;height:44px;border-radius:3px;object-fit:cover;}
.sm-charts__text{min-width:0;display:block;}
.sm-charts__text a{display:block;font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sm-charts__text small{display:block;color:var(--muted);font-size:.82rem;}
.sm-trend{font-size:.76rem;font-weight:700;letter-spacing:.04em;}
.sm-trend--hoch{color:#32c56b;}
.sm-trend--runter{color:#ff5a5a;}
.sm-trend--neu{color:var(--rot);}
.sm-trend--gleich{color:var(--muted);}
.sm-charts__liste--gross .sm-charts__eintrag{grid-template-columns:48px 60px minmax(0,1fr) auto;padding:.8rem 0;}
.sm-charts__liste--gross .sm-platz{width:48px;height:48px;font-size:1.4rem;}
.sm-charts__liste--gross .sm-charts__cover img{width:60px;height:60px;}

/* --- Seiten und Texte ---------------------------------------------------- */
.sm-seite{padding-block:clamp(2rem,4vw,3.2rem);}
.sm-seite__kopf{margin-bottom:1.75rem;}
.sm-seite__intro{color:var(--text-2);max-width:62ch;margin-top:.75rem;}
.sm-seite__bild{margin-bottom:2rem;}
/* Kleine Bilder aus dem Altbestand nicht hochrechnen — das About-Foto ist 383 px breit. */
.sm-seite__bild img{max-width:100%;width:auto;height:auto;border-radius:var(--radius);}
.sm-text{color:var(--text-2);max-width:72ch;}
.sm-text > * + *{margin-top:1.1rem;}
.sm-text h2{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:1.7rem;color:var(--text);margin-top:2.2rem;}
.sm-text h3{font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:1.3rem;color:var(--text);margin-top:1.8rem;}
.sm-text a{color:var(--rot);text-decoration:underline;text-underline-offset:3px;}
.sm-text ul{list-style:disc;padding-left:1.25rem;}
.sm-text ol{list-style:decimal;padding-left:1.4rem;}
.sm-text li + li{margin-top:.4rem;}
.sm-text img{border-radius:var(--radius);}

.sm-song__kopf{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;margin-bottom:2.5rem;}
.sm-song__artist{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-2);font-size:1.25rem;margin:.3rem 0 .6rem;}
.sm-song__album{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0;}
.sm-song__player{margin-bottom:2.5rem;}
.sm-lyrics{margin-top:2.5rem;}
.sm-lyrics__text{color:var(--text-2);white-space:pre-line;max-width:60ch;margin-top:1rem;}
.sm-foto__bild img{width:100%;border-radius:var(--radius);margin-bottom:2rem;}
/* News-Artikel: Bild im eigenen Seitenverhaeltnis, nur die Hoehe ist gedeckelt. */
.sm-beitrag__bild{margin:0 0 2rem;}
.sm-beitrag__bild img{display:block;width:auto;height:auto;max-width:100%;max-height:var(--beitrag-bild-h);border-radius:var(--radius);}
.sm-video__rahmen{margin-bottom:2.5rem;}

.sm-treffer{display:grid;grid-template-columns:72px minmax(0,1fr);gap:1rem;align-items:center;
    background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius);padding:.85rem;}
.sm-treffer__bild img{width:72px;height:72px;border-radius:4px;object-fit:cover;}
.sm-treffer__titel{font-size:1.15rem;margin:.3rem 0;}
.sm-treffer__text{color:var(--text-2);font-size:.9rem;}

.sm-faq{margin-top:3rem;}
.sm-faq__eintrag{border-top:1px solid var(--linie);padding:1rem 0;}
.sm-faq__eintrag summary{cursor:pointer;font-weight:600;list-style:none;}
.sm-faq__eintrag summary::-webkit-details-marker{display:none;}
.sm-faq__eintrag summary::after{content:"+";float:right;color:var(--rot);font-weight:700;}
.sm-faq__eintrag[open] summary::after{content:"\2013";}
.sm-faq__eintrag > div{color:var(--text-2);margin-top:.75rem;}

.sm-blaettern{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--linie);}
.sm-blaettern__a{display:inline-flex;align-items:center;gap:.6rem;color:var(--text-2);max-width:45%;}
.sm-blaettern__a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sm-blaettern__a--rechts{text-align:right;}

.sm-placeholder{display:grid;place-items:center;aspect-ratio:1/1;border:1px dashed var(--linie-stark);color:var(--muted);font-size:.8rem;border-radius:4px;}

/* --- Zwei-Klick-Einbettung ----------------------------------------------- */
.sm-embed__box{
    display:grid;gap:.75rem;place-items:start;
    background:var(--panel);border:1px solid var(--linie);border-radius:var(--radius);
    padding:1.5rem;
}
.sm-embed__titel{font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:1.2rem;}
.sm-embed__text{color:var(--text-2);font-size:.9rem;max-width:56ch;}
/* Dezenter Rahmen um den Zustimmungsknopf: er soll als Knopf erkennbar sein,
   ohne wie der rote Hauptknopf um Aufmerksamkeit zu buhlen. */
/* Der Knopf muss als Knopf zu erkennen sein. Ein zurueckhaltender Rahmen auf
   dunklem Grund war zu leise — hier steht der Hauptknopf-Stil der Seite.
   Das Abspielzeichen ist gefuellt, damit sofort klar ist, dass etwas startet. */
.sm-embed__go{
    padding:.95rem 1.6rem;
    font-size:1.08rem;
    box-shadow:0 6px 18px rgba(228,18,31,.28);
    transition:background .18s,box-shadow .18s,transform .18s;
}
.sm-embed__go .sm-icon{fill:currentColor;transition:transform .18s;}
.sm-embed__go:hover{
    background:var(--rot-hell);
    box-shadow:0 8px 26px rgba(228,18,31,.45);
}
.sm-embed__go:hover .sm-icon{transform:scale(1.12);}
.sm-embed__go:active{transform:translateY(0);box-shadow:0 3px 10px rgba(228,18,31,.3);}
.sm-embed__klein{font-size:.8rem;color:var(--muted);}
.sm-embed__klein a{text-decoration:underline;}
.sm-embed iframe{width:100%;border:0;border-radius:var(--radius);display:block;}
/* Video: 16:9. Audio: die Hoehe, die die Einbettung selbst angibt. */
.sm-embed--video iframe{aspect-ratio:16/9;height:auto;}
.sm-embed--audio iframe{aspect-ratio:auto;height:var(--sm-embed-h,150px);border-radius:0;}
/* Von SoundCloud verlangte Nennung unter dem Player. */
.sm-embed__quelle{font-size:.7rem;color:var(--muted);margin-top:.4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sm-embed__quelle a{color:var(--muted);}
.sm-embed__quelle a:hover{color:var(--rot-hell);}

/* --- Seitenzahlen -------------------------------------------------------- */
.pagination,.navigation.pagination{margin-top:3rem;}
.nav-links{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;}
.page-numbers{
    display:grid;place-items:center;min-width:42px;height:42px;padding:0 .7rem;
    border:1px solid var(--linie);border-radius:4px;color:var(--text-2);font-size:.92rem;
}
.page-numbers:hover,.page-numbers.current{background:var(--rot);border-color:var(--rot);color:#fff;}
.page-numbers.dots{border-color:transparent;}

/* --- Fusszeile ----------------------------------------------------------- */
.sm-foot{border-top:2px solid var(--rot);background:var(--bg-deep);margin-top:auto;}
.sm-foot__in{display:flex;align-items:center;gap:clamp(1rem,4vw,3rem);flex-wrap:wrap;padding-block:2rem;}
.sm-foot__menu{display:flex;gap:1.75rem;flex-wrap:wrap;flex:1 1 auto;justify-content:center;}
.sm-foot__menu a{color:var(--text-2);font-size:.95rem;}
.sm-foot__menu a:hover{color:var(--rot-hell);}
.sm-top{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--rot);color:var(--rot);flex:0 0 auto;}
.sm-top:hover{background:var(--rot);color:#fff;}
.sm-foot__unten{border-top:1px solid var(--linie);padding-block:1rem;color:var(--muted);font-size:.82rem;}

/* --- Schmalere Bildschirme ------------------------------------------------ */
@media (max-width:1100px){
    .sm-spalten{grid-template-columns:minmax(0,1fr);}
}

/* Tablet: das Foto bleibt stehen, darf aber nicht mehr unter dem Cover liegen.
   Dafuer wird das Fenster schmaler und der Inhalt bekommt denselben rechten
   Abstand wie am Desktop. Das Cover schrumpft mit, damit die Headline noch
   Platz hat. */
@media (min-width:861px) and (max-width:1099.98px){
    :root{--hero-fenster:min(32vw,300px);}
    /* Volle Fensterbreite freihalten, nicht wie am Desktop nur 84 % — auf
       dieser Breite wuerde das Cover sonst bis an den Verlauf des Fotos stossen. */
    .sm-hero__in{padding-right:calc(var(--gutter) + var(--hero-fenster));}
    .sm-hero__slide{grid-template-columns:minmax(0,1fr) minmax(0,clamp(140px,17vw,200px));}
    .sm-hero__h1{font-size:clamp(1.7rem,3.4vw,2.6rem);}
}
@media (max-width:860px){
    /* Zwei Zeilen: oben Wortmarke und Social, darunter Suche und Burger
       nebeneinander. Der Umbruch kommt aus einem leeren Flex-Element mit
       flex-basis:100%, damit er feststeht und nicht vom Platz abhaengt.
       Raster waere hier schlechter: die zweite Spalte wuerde so breit wie die
       Social-Icons, und neben der Suche blieb eine Luecke stehen. */
    .sm-head__topin{flex-wrap:wrap;min-height:0;padding-block:1rem;gap:.8rem 1rem;}
    .sm-head__marke{order:1;}
    .sm-social--kopf{order:2;margin-left:auto;}
    .sm-head__topin::after{content:"";order:3;flex-basis:100%;height:0;}
    /* Basis 0, sonst beansprucht die Suche ihre Inhaltsbreite und der Burger
       rutscht auf eine dritte Zeile. */
    .sm-head__suche{order:4;flex:1 1 0;min-width:0;max-width:none;}
    .sm-burger{order:5;flex:0 0 auto;display:grid;}

    .sm-nav{max-height:0;overflow:hidden;transition:max-height .28s ease;border-bottom-width:0;}
    .sm-nav.is-offen{max-height:80vh;overflow:auto;border-bottom-width:2px;}
    .sm-nav__list{flex-direction:column;}
    .sm-nav__list > li > a{height:48px;border-bottom:1px solid var(--linie);}
    .sm-nav__list .sub-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;background:rgba(255,255,255,.03);}

    .sm-hero__slide,.sm-hero__slide.is-aktiv{grid-template-columns:minmax(0,1fr);}
    .sm-hero__cover{max-width:330px;}
    .sm-hero__portrait{display:none;}
    .sm-hero__pfeil{display:none;}

    .sm-song__kopf{grid-template-columns:minmax(0,1fr);}
    .sm-song__cover{max-width:330px;}
    .sm-news__eintrag{gap:1rem;}
    :root{--news-bild-h:100px;}
    .sm-foot__in{justify-content:center;text-align:center;}
}
@media (max-width:520px){
    /* Wortmarke und Social passen sonst knapp nicht nebeneinander. */
    .sm-head__topin{gap:.7rem .6rem;}
    .sm-social--kopf a{width:34px;height:34px;}

    .sm-raster{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
    .sm-bahn{grid-auto-columns:minmax(150px,1fr);}
    .sm-news__eintrag{grid-template-columns:minmax(0,1fr);}
    :root{--news-bild-h:140px;}
}

/* --- Reduzierte Bewegung -------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}