/* =====================================================================
   standorte.css – Lesestruktur der langen Stadtseiten (standorte/kiel.html,
   luebeck.html, neumuenster.html, rostock.html). Feinschliff 10.11.2026.

   Baut ausschließlich auf den Tokens aus sub.css auf und wird NACH sub.css
   geladen. Alles hängt an der Klasse .st-dossier auf <article class="article">,
   andere Unterseiten bleiben unberührt.

   Bausteine (Markup siehe Kommentar am jeweiligen Block):
     .st-dossier   Lesespalte, Kapitelwechsel, ruhigere Fettung
     .st-rand      Randnotiz: Quellen- und Abgrenzungshinweis, leise
     .st-fakten    Behördenkontakt als Schlüssel-Wert-Block (auf <ul> oder <p>)
     .st-chronik   Chronik: Datum links, Ereignis rechts (auf <ul>)
     .st-funde     Fundliste: Datum und Ort als eigene Zeile (auf <ul>)
     .st-fund      dasselbe für Funde, die als einzelne Absätze gesetzt sind (auf <p>)
     .st-az        Aktenzeichen / Quellenkürzel am Ende eines Fundes (auf <span>)
     .st-nb        kein Umbruch in Bindestrich-Namen, Kürzeln, Telefonnummern (auf <span>);
                   einzige Stelle außerhalb von .st-dossier: der Kicker im Seitenkopf
     .st-aus       Trennzeichen, das im Quelltext und für Vorleser bleibt, im Bild aber
                   entfällt, weil die Spalte bzw. der Zeilenwechsel trennt (auf <span>)
   Warnhinweise nutzen die vorhandene .note.note--warn aus sub.css (Orange,
   kein Rot). Der Text der Seiten bleibt wortgleich, es ändert sich nur die
   Auszeichnung.
   ===================================================================== */

.st-dossier {
    --st-mass: 42rem;                          /* Lesebreite für Fließtext */
    --st-linie: rgba(30, 58, 92, 0.14);        /* Haarlinie auf dem Papierton */
}

/* ---------- Lesespalte ----------
   Fließtext, Listen und Zwischenüberschriften laufen auf 42rem (rund 80 Zeichen),
   Tabellen, Hinweise und der Kontaktblock dürfen die ganze Spalte nutzen. */
.st-dossier > :is(p, ul, ol, h3) { max-width: var(--st-mass); }
/* Schrittliste: Nummer steht im Einzug, der Text selbst hält die Lesebreite. */
.st-dossier > ol.steps { max-width: calc(var(--st-mass) + 66px); }

/* ---------- Kapitelwechsel ----------
   Vor jedem Kapitel außer dem ersten: mehr Luft und eine Haarlinie über die ganze Spalte.
   Die Kapitelüberschrift darf die ganze Spalte nutzen: in 42rem brach
   „Was in Schleswig-Holstein vorgeschrieben ist“ wegen eines Wortes zweizeilig um. */
.st-dossier > h2:not(:first-child) {
    margin-top: 76px; padding-top: 60px; border-top: 1px solid var(--st-linie);
    /* Sprungziel: die Linie verschwindet unter der Navigation, die Überschrift steht frei. */
    scroll-margin-top: calc(var(--nav-h) - 24px);
}
.st-dossier > h2 + * { margin-top: 26px; }
/* Bindestrich-Namen, Kürzel und Telefonnummern, die nicht am Strich oder Leerzeichen umbrechen sollen:
   <span class="st-nb">Schleswig-Holstein</span>, <span class="st-nb">TA KRD S-H 1/2025</span>. */
.st-dossier .st-nb { white-space: nowrap; }
/* In Kapitelüberschriften darf ein langer Bindestrich-Name auf sehr schmalen Handys am Bindestrich brechen. */
.st-dossier > h2 .st-nb { display: inline-block; white-space: normal; }
/* Kicker im Seitenkopf: bricht am Handy nach dem Komma um, nicht mitten im Ländernamen
   („Landeshauptstadt Kiel,“ / „Schleswig-Holstein“ statt „… Schleswig-“ / „Holstein“). */
.page-hero .kicker .st-nb { white-space: nowrap; }
/* Trennzeichen, das nur im Fließsatz gebraucht wird. Strich zwischen Datum und Ereignis:
   <strong>11.&nbsp;Juni 1940</strong><span class="st-aus"> – </span>erster Angriff …
   Doppelpunkt eines Vorspanns, der zur Überschrift wurde:
   <h3>Das Verfahren Schritt für Schritt<span class="st-aus">:</span></h3>
   Bleibt im Quelltext, beim Kopieren und für Vorleser erhalten, nimmt im Bild keinen Platz ein. */
.st-dossier .st-aus {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}
/* Link im fetten Vorspann: gleiches Gewicht wie der Vorspann. */
.st-dossier :is(p, li) > strong > a { font-weight: inherit; }

/* ---------- Zwischenüberschriften ---------- */
.st-dossier > h3 { margin-top: 44px; color: var(--navy-900); }
.st-dossier > h2 + h3 { margin-top: 30px; }
.st-dossier > h3 + * { margin-top: 12px; }
.st-dossier > h3 + ol.steps { margin-top: 20px; }

/* ---------- Fettung im Lesetext ----------
   600 statt 700 und Navy statt Fastschwarz: die Zahlen bleiben auffindbar,
   der Absatz wirkt nicht mehr gescheckt. Schritt-Titel bleiben kräftig. */
.st-dossier :is(p, li, td) strong { font-weight: 600; color: var(--navy-900); }
.st-dossier .steps > li > strong:first-child { font-weight: 700; }

/* ---------- Randnotiz ----------
   <p class="st-rand"><strong>Woher welche Zahl stammt.</strong> Text …</p>
   Für Quellenangaben und Abgrenzungen („Was ich bewusst nicht behaupte“). */
.st-dossier > p.st-rand {
    font-size: 0.92rem; line-height: 1.65; color: var(--gray-500);
    padding: 2px 0 2px 20px; border-left: 2px solid var(--gray-300);
    margin-top: 26px;
}
.st-dossier > p.st-rand strong { color: var(--gray-700); }
.st-dossier > p.st-rand a { font-weight: 500; }
/* Randnotiz, die im Quelltext als Ganzes in <em> steht (Rostock): gerade wie auf den
   Schwesterseiten. Linie, Größe und Grauton zeichnen die Notiz schon aus. */
.st-dossier > p.st-rand > em:only-child { font-style: normal; }
/* Zwei Randnotizen hintereinander teilen sich eine durchgehende Linie. */
.st-dossier > p.st-rand + p.st-rand { margin-top: 0; padding-top: 16px; }
/* h2/h3 behalten ihren eigenen Kapitel- bzw. Abschnittsabstand. */
.st-dossier > p.st-rand + :not(.st-rand, h2, h3) { margin-top: 26px; }

/* ---------- Gemeinsame Basis der Listenformen ----------
   Keine Raute, Haarlinien zwischen den Einträgen, Vorspann = erstes <strong> im <li>.
   display: flow-root, damit ein schwebendes Label die Zeile nie nach unten verlässt. */
.st-dossier ul:is(.st-fakten, .st-chronik, .st-funde) > li {
    display: flow-root; margin: 0; padding: 15px 0; border-top: 1px solid var(--st-linie);
}
.st-dossier ul:is(.st-fakten, .st-chronik, .st-funde) > li:first-child { border-top: 0; }
.st-dossier ul:is(.st-fakten, .st-chronik, .st-funde) > li::before { content: none; }
.st-dossier ul:is(.st-fakten, .st-chronik, .st-funde) > li > strong:first-child,
.st-dossier > p:is(.st-fakten, .st-fund) > strong:first-child { display: block; hyphens: manual; }
/* Steht hinter dem Vorspann schon ein <br>, entfällt es (sonst entstünde eine Leerzeile). */
.st-dossier > p:is(.st-fakten, .st-fund) > strong:first-child + br { display: none; }

/* ---------- Behördenkontakt als Schlüssel-Wert-Block ----------
   Liste:  <ul class="st-fakten"><li><strong>Anschrift:</strong> Lärchenweg 17 …</li> … </ul>
   Absatz: <p class="st-fakten"><strong>Dienststelle und Kontakt:</strong> Landeskriminalamt …</p>
   Das erste <strong> je Zeile wird zum Mono-Mikrolabel; der Text bleibt, wie er ist. */
.st-dossier > :is(ul, p).st-fakten {
    max-width: none; margin-top: 28px; padding: 8px 28px 8px 30px;
    background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    box-shadow: var(--shadow-card); position: relative; overflow: hidden;
    font-size: 1rem; line-height: 1.65; color: var(--gray-700);
}
.st-dossier > :is(ul, p).st-fakten::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--accent), var(--accent-400));
}
.st-dossier > p.st-fakten { padding-top: 24px; padding-bottom: 24px; }
.st-dossier > p.st-fakten + p.st-fakten { margin-top: 14px; }
.st-dossier > ul.st-fakten > li { padding: 17px 0; border-top-color: var(--gray-200); }
.st-dossier > ul.st-fakten > li > strong:first-child,
.st-dossier > p.st-fakten > strong:first-child {
    font-family: var(--mono); font-size: var(--label-size, 0.72rem); letter-spacing: var(--label-track, 0.14em);
    font-weight: 700; text-transform: uppercase; line-height: 1.5; color: var(--navy-800);
    margin-bottom: 5px;
}
.st-dossier > p.st-fakten > strong:first-child { margin-bottom: 8px; }

/* ---------- Chronik ----------
   <ul class="st-chronik"><li><strong>2.&nbsp;Juli 1940:</strong> erster RAF-Angriff …</li> … </ul> */
.st-dossier > ul.st-chronik {
    margin-top: 26px; border-top: 1px solid var(--st-linie); border-bottom: 1px solid var(--st-linie);
}
.st-dossier > ul.st-chronik > li { padding: 13px 0; text-wrap: wrap; }
.st-dossier > ul.st-chronik > li > strong:first-child { font-variant-numeric: tabular-nums; margin-bottom: 2px; }

/* ---------- Fundliste ----------
   Liste:   <ul class="st-funde"><li><strong>6.&nbsp;September 2026, Kiel-Dietrichsdorf, Insterburger Straße:</strong>
            Text … <span class="st-az">(POL-KI 260903.3)</span></li> … </ul>
   Absätze: <p class="st-fund"><strong>6. und 7.&nbsp;Mai 2026 – Friedenshain …</strong> Text …</p>
            (mehrere .st-fund hintereinander bilden dieselbe Liste mit Haarlinien)
   Taugt auch für andere Listen, deren Vorspann eine eigene Zeile verdient. */
.st-dossier > ul.st-funde {
    margin-top: 28px; border-top: 1px solid var(--st-linie); border-bottom: 1px solid var(--st-linie);
}
.st-dossier > ul.st-funde > li { padding: 20px 0 21px; }
.st-dossier > p.st-fund {
    margin-top: 28px; padding: 20px 0 21px; font-size: 1.02rem;
    border-top: 1px solid var(--st-linie); border-bottom: 1px solid var(--st-linie);
}
.st-dossier > p.st-fund + p.st-fund { margin-top: 0; border-top: 0; }
.st-dossier > p.st-fund + :not(.st-fund) { margin-top: 28px; }
.st-dossier > ul.st-funde > li > strong:first-child,
.st-dossier > p.st-fund > strong:first-child {
    font-size: 1.06rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.005em;
    margin-bottom: 6px; text-wrap: balance;
}
/* Aktenzeichen der Quelle: eigene, leise Zeile unter dem Eintrag. */
.st-dossier .st-az {
    display: block; margin-top: 8px;
    font-family: var(--mono); font-size: var(--label-sm-size, 0.6875rem); letter-spacing: var(--label-sm-track, 0.14em);
    font-weight: 700; line-height: 1.5; color: var(--gray-500); hyphens: manual;
}

/* ---------- Ab Tablet: Label und Datum in einer eigenen Spalte ----------
   Das Label schwebt im linken Innenabstand der Zeile. Bewusst kein Grid: im <li> stehen
   Textknoten, <wbr> und Links nebeneinander, ein Grid würde jeden davon zur eigenen Zelle machen.
   Der Absatz-Kontaktblock (p.st-fakten) bleibt gestapelt, seine Labels sind ganze Halbsätze. */
/* Kontaktblock: Label-Spalte nur, wo die Wertspalte mindestens 340 px breit bleibt. Die längste
   Adresse (kampfmittelraeumdienst@mzb.landsh.de, 314 px) bricht ab 641 px nicht mehr am @ um
   (sub.css blendet dort das <wbr> aus) und ragte sonst bei 641–654 und 961–994 px Fensterbreite
   aus der Karte. In den beiden schmalen Bereichen (641–680 px; 961–1020 px, wo die Seitenleiste
   dazukommt) steht das Label wie am Handy über dem Wert.
   11.5rem: „LUFTBILDAUSWERTUNG:“ (182 px) passt in die Label-Spalte, 2rem Abstand zum Wert. */
@media (min-width: 681px) and (max-width: 960px), (min-width: 1021px) {
    .st-dossier > ul.st-fakten > li { padding-left: 13.5rem; }
    .st-dossier > ul.st-fakten > li > strong:first-child {
        float: left; width: 11.5rem; margin: 0.22em 0 0 -13.5rem;
    }
}
@media (min-width: 641px) {
    /* 13.75rem: „4. und 4./5. Januar 1944:“ bleibt einzeilig. */
    .st-dossier > ul.st-chronik > li { padding-left: 14.75rem; }
    .st-dossier > ul.st-chronik > li > strong:first-child {
        float: left; width: 13.75rem; margin: 0 0 0 -14.75rem;
    }
}

/* ---------- Handy ---------- */
@media (max-width: 640px) {
    .st-dossier > h2:not(:first-child) { margin-top: 52px; padding-top: 40px; scroll-margin-top: calc(var(--nav-h) - 12px); }
    .st-dossier > h2 + * { margin-top: 22px; }
    .st-dossier > h3 { margin-top: 36px; font-size: 1.18rem; }
    .st-dossier > h2 + h3 { margin-top: 26px; }
    .st-dossier > p.st-rand { padding-left: 16px; font-size: 0.9rem; }
    .st-dossier > :is(ul, p).st-fakten { padding: 4px 18px 4px 20px; }
    .st-dossier > p.st-fakten { padding-top: 18px; padding-bottom: 18px; }
    .st-dossier > ul.st-fakten > li { padding: 15px 0; }
    .st-dossier > ul.st-funde > li, .st-dossier > p.st-fund { padding: 18px 0; }
    .st-dossier > ul.st-funde > li > strong:first-child,
    .st-dossier > p.st-fund > strong:first-child { font-size: 1.02rem; }
}

@media print {
    .st-dossier > .st-fakten { box-shadow: none; }
    .st-dossier :is(.note, .st-fakten, .st-funde > li, .st-chronik > li, .st-fund) { break-inside: avoid; }
}