/* Kopfzeile aller Landing- und Info-Seiten (DE und EN). Einzige Quelle für
   die Header-Stile: vorher lebten sie getrennt in landing-storytelling.css
   und landing-redesign.css, und Hilfe, Struktur-Hilfen und die Rechtsseiten
   sahen anders aus als die Startseite (Ben 26.10.2026). Werte 1:1 aus der
   3.0-Startseite. Wird auf jeder Seite als letztes Stylesheet geladen;
   landingHeader.test.ts prüft Markup und Einbindung. */

.site-header{position:relative;z-index:10;background:transparent;border:0;font-family:'Schibsted Grotesk',Schibsted,Arial,sans-serif}
.site-header .shell{width:min(1280px,calc(100% - 56px));margin:auto;padding:0}
.site-header .nav{height:84px;min-height:0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.site-header .brand-logo{display:flex;flex:0 0 auto;align-items:center;gap:9px;text-decoration:none}
.site-header .brand-mark{width:38px;height:38px;border-radius:9px}
.site-header .brand-text{width:190px;height:auto}
.site-header .nav-links{display:flex;gap:26px;align-items:center;font-size:15px;font-weight:400}
.site-header .nav-links a{text-decoration:none;color:#4a4c5e}
.site-header .nav-link{white-space:nowrap;min-height:0;display:inline}
.site-header .nav-link:hover{color:#16182c}
.site-header .lang-link{display:inline-flex;min-height:44px;align-items:center;padding:0;font-size:15px;letter-spacing:0}
.site-header .button{display:inline-flex;align-items:center;justify-content:center;min-height:0;background:#16182c;color:#fffafa!important;padding:14px 22px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;line-height:1.4;white-space:nowrap}
.site-header .button:hover{background:#2a2c42}
.site-header .button[hidden]{display:none}

/* Die Navigation wird schrittweise schmaler: unter 1101 px drei, unter 951 px
   zwei Abschnitts-Links neben EN und Knopf, unter 861 px nur noch EN und Knopf. */
@media(max-width:1100px){
 .site-header .nav-links>.nav-link:not(.lang-link):nth-child(n+4){display:none}
}

@media(max-width:950px){
 .site-header .nav-links>.nav-link:not(.lang-link):nth-child(n+3){display:none}
}

/* Kompakt: nur EN und Knopf */
@media(max-width:860px){
 .site-header .shell{width:calc(100% - 36px)}
 .site-header .nav{height:73px}
 .site-header .nav-links{gap:9px}
 .site-header .nav-links>a:not(.button):not(.lang-link){display:none}
 .site-header .button{padding:10px 13px}
 .site-header .brand-mark{width:30px;height:30px}
 .site-header .brand-text{width:140px}
}

/* Einzeilig bis 390 px: Wortmarke etwas schmaler, damit „Kostenlos starten“ ganz passt */
@media(max-width:430px){
 .site-header .brand-text{width:118px}
 .site-header .nav{gap:12px}
}

@media(max-width:380px){
 .site-header .brand-mark{display:none}
 .site-header .brand-text{width:118px}
 .site-header .nav{gap:10px}
 .site-header .nav-links{gap:6px}
 .site-header .button{padding:10px}
}

/* KI-Kennzeichnung (Ben 27.10.2026): Etikett an jeder gezeichneten Szene, Satz
   im Footer, Bildnachweis im Impressum. Position nur mit Null-Spezifität, damit
   bestehende Regeln am Bildcontainer (absolute, sticky …) gewinnen. */
:where(.ki-bild){position:relative}
.ki-rahmen{margin:0}
.ki-etikett{position:absolute;top:16px;right:16px;z-index:2;pointer-events:none;font:500 12px/1 'Schibsted Grotesk',Schibsted,Arial,sans-serif;letter-spacing:0;color:#fffafa;background:rgb(22 24 44 / 55%);padding:6px 9px;border-radius:7px}
.ki-hinweis{flex-basis:100%;width:100%;margin:14px 0 0;font-size:13px;line-height:1.5;color:#5d5f70}
.ki-hinweis a{color:inherit}
footer:has(.ki-hinweis){flex-wrap:wrap}

/* Mobil-Prüfung 28.10.2026 (docs/entwuerfe/2026-10-28-mobil/befunde.md) */

/* B: Etikett nicht auf dem Telefon und nicht unter dem Schlusskasten */
.ki-bild:has(.telefon,.fk-telefon) .ki-etikett{right:auto;left:16px}
.ending .ki-etikett{z-index:5}

/* C: lange Wörter in Überschriften trennen statt seitlich überlaufen */
main h1,main h2{overflow-wrap:break-word;hyphens:auto}

/* D: Tap-Ziele mindestens 44 px, ohne sichtbare Verschiebung */
.site-header .brand-logo{min-height:44px}
.site-header .button{min-height:44px}
.site-header .lang-link{padding-inline:12px;margin-inline:-12px;min-width:44px;justify-content:center}
footer a:not(.ki-hinweis a),.breadcrumb a,.press-links a,.hilfe-sprung a,.l3-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
details>summary{padding-block:11px}

/* A: Startbilder mobil (Ben 28.10.2026, Variante A). Unter 640 px stehen Bild,
   Telefon und Text untereinander statt übereinander: Startseite und
   Struktur-Hilfen (.l3-hero), SEO-Seiten (.buehne), Funktionen (.fk-buehne). */
@media(max-width:640px){
 .l3-hero .l3-buehne{display:flex;flex-direction:column;align-items:center}
 .l3-hero .l3-foto{width:100%;aspect-ratio:4/3}
 .l3-hero .l3-telefon{align-self:center;margin:-56px 0 0;width:min(240px,62vw)}
 .buehne,.fk-buehne{display:flex;flex-direction:column;align-items:center;overflow:visible;border-radius:0;aspect-ratio:auto}
 .buehne>img,.fk-buehne>img{order:1;width:100%;border-radius:20px}
 .buehne .telefon,.fk-buehne .fk-telefon{order:2;position:relative;inset:auto;margin:-48px 0 0;width:min(200px,55vw)}
 .buehne .zeile,.fk-buehne figcaption{order:3;position:static;margin:16px 0 0;max-width:none;width:100%;background:none;backdrop-filter:none;padding:0;text-align:center}
 /* .buehne.ohne-bild trägt in landing-kapitel.css eigene, spezifischere Regeln
    (Zeile, rechtsbündig, festes Seitenverhältnis); hier gleich spezifisch überschreiben. */
 .buehne.ohne-bild{flex-direction:column;align-items:center;justify-content:flex-start;aspect-ratio:auto;padding:28px 16px 20px;border-radius:20px}
 .buehne.ohne-bild .telefon{position:relative;inset:auto;margin:0;width:min(200px,55vw)}
 .buehne.ohne-bild .zeile{margin-top:16px}
}