/* =========================================================================
   Druckerei Schwarzfischer — statischer Nachbau
   Alle Maße sind am Original GEMESSEN (Chromium, berechnete Stile, 390–2560),
   nicht aus dem Stylesheet gelesen.
   Belege: _quelle/referenz/erfasst/original/stile.json
   ========================================================================= */

:root {
  --text:      #333333;   /* Fließtext */
  --dunkel:    #222222;   /* Verweise, Überschriften */
  --grau:      #767676;   /* Datumszeile, Symbole */
  --linie:     #eeeeee;   /* Trennlinien über Menü und Fußzeile */
  --bild-bg:   #fafafa;   /* Hintergrund hinter dem Beitragsbild */
  --inhalt:    1000px;    /* gemessene Deckelung von .wrap */
}

/* ⚠️ KEINE Schriftdatei — und das ist kein Versehen.
   Das Original deklariert „Libre Franklin", lädt sie aber nirgends. Niemand
   sieht sie also je; jeder Besucher bekommt die nächste Schrift der Liste.
   Der Nachbau übernimmt die Liste unverändert und rendert damit exakt
   dasselbe — zum Preis von 0 KB. Siehe AENDERUNGEN.md 1.4. */
:root {
  --schrift: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.66;
}

img { max-width: 100%; height: auto; }
a { color: var(--dunkel); }

/* Sichtbarer Tastaturfokus — im Original nur teilweise vorhanden. */
:focus-visible { outline: 3px solid var(--dunkel); outline-offset: 2px; }

/* Sprungmarke nach OBEN schieben, nicht nach links (`left: -9999px`
   erzeugt waagerechten Überlauf). */
.sprungmarke {
  position: absolute; top: -60px; left: 10px; z-index: 20;
  background: #fff; color: var(--dunkel); padding: 10px 16px;
  font-weight: 800; transition: top .15s;
}
.sprungmarke:focus { top: 10px; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* =========================================================================
   GRUNDSATZ ZUR BREITE
   Die Inhaltsfläche ist auf JEDER Seite gleich breit: höchstens 1000 px,
   darunter die Fensterbreite abzüglich des Randes. Was darin steht — Text,
   Text mit Bild oder nur Bild — ändert daran nichts.
   ========================================================================= */
.wrap {
  width: 100%;
  max-width: var(--inhalt);
  margin-inline: auto;
  padding-inline: 30px;
}
@media (min-width: 768px) { .wrap { padding-inline: 48px; } }

/* =========================================================================
   Kopf
   ========================================================================= */
.kopf { position: relative; background: #000; }

.kopf__bild {
  position: relative;
  min-height: 112px;
  display: flex; align-items: flex-end;
  background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
                    url('bilder/cropped-druckerei4-schmal.webp');
  background-size: cover;
  background-position: 50% 50%;
}
/* Nur die Startseite zeigt das Kopfbild in voller Fensterhöhe — gemessen:
   900 px bei einem 900 px hohen Fenster, 675 px bei 390 px Breite. */
.kopf--gross .kopf__bild { min-height: 675px; }
@media (min-width: 768px) { .kopf--gross .kopf__bild { min-height: 100vh; } }
@media (min-width: 768px) { .kopf__bild { min-height: 165px; } }
/* Ab 900 px Fensterbreite lohnt die grosse Fassung — darunter waeren
   355 KB fuer ein 390 px breites Bild verschwendet. */
@media (min-width: 901px) {
  .kopf__bild {
    background-image: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)),
                      url('bilder/cropped-druckerei4.webp');
  }
}

.kopf__text { padding-block: 15px; }
@media (min-width: 768px) { .kopf__text { padding-block: 30px; } }
.kopf--gross .kopf__text { padding-block: 0 37px; }

.kopf__titel {
  margin: 0;
  font-size: 24px; line-height: 30px; font-weight: 800;
  color: #fff; text-transform: uppercase; letter-spacing: .08em;
}
.kopf__untertitel {
  margin: 0;
  font-size: 13px; line-height: 21.58px; color: #fff;
}
@media (min-width: 768px) {
  .kopf__titel { font-size: 36px; line-height: 45px; }
  .kopf__untertitel { font-size: 16px; line-height: 24px; }
}
.kopf__titel a { color: inherit; text-decoration: none; }

/* =========================================================================
   Menü
   ========================================================================= */
/* Auf der Startseite liegt die Leiste IM Kopfbild, an dessen unterem Rand —
   gemessen: Kopf 900 px hoch, Leiste bei y=828. Auf allen anderen Seiten
   steht sie darunter. */
@media (min-width: 768px) {
  .kopf--gross { position: relative; }
  .kopf--gross + .menue { position: absolute; left: 0; right: 0; bottom: 0; }
  .startseite .kopf--gross .kopf__bild { padding-bottom: 72px; }
}

.menue {
  background: #fff;
  border-top: 1px solid var(--linie);
  font-size: 14px; line-height: 21px;
}
.menue .wrap { padding-block: 10.5px; }
@media (min-width: 768px) { .menue .wrap { padding-inline: 28px; } }

/* Das Kästchen ist unsichtbar, aber vorhanden — mit der Tastatur erreichbar
   und über das Label bedienbar. */
.menue__kaestchen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%);
}
.menue__schalter {
  display: block; cursor: pointer;
  padding: 8px 0; font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; color: var(--dunkel);
}
.menue__schalter::after { content: " ▾"; }
.menue__kaestchen:checked ~ .menue__schalter::after { content: " ▴"; }
.menue__kaestchen:focus-visible ~ .menue__schalter { outline: 3px solid var(--dunkel); outline-offset: 2px; }
.menue__liste { display: none; }
.menue__kaestchen:checked ~ .menue__liste { display: block; }

.menue ul { list-style: none; margin: 0; padding: 0; }

.menue a {
  display: block; padding: 14px 17.5px;
  color: var(--dunkel); font-weight: 600; text-decoration: none;
}
.menue a:hover, .menue a:focus-visible { color: var(--grau); }
.menue [aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }

/* Untermenüs: im Original klappen sie per JavaScript auf. Hier reicht CSS —
   sie öffnen bei Zeigerkontakt UND bei Tastaturfokus. */
.menue li { position: relative; }
.menue li ul {
  position: absolute; left: 0; top: 100%; z-index: 10;
  min-width: 16rem; background: #fff;
  border: 1px solid var(--linie);
  display: none;
}
.menue li:hover > ul, .menue li:focus-within > ul { display: block; }
.menue li ul a { padding: 12px 17.5px; font-weight: 400; }

/* ⚠️ Geräte OHNE Zeiger (Tablets) können ein :hover-Untermenü nicht öffnen:
   der erste Tipp folgt dem Verweis. Auf dem Telefon fällt das nicht auf, weil
   das Menü dort ohnehin ausgeklappt ist — ab 768 px waren die vier Unterseiten
   auf einem Tablet aber nur über die Adresszeile erreichbar.
   Dort klappt das Untermenü deshalb gar nicht erst zu. */
@media (hover: none) {
  .menue li ul { position: static; display: block; border: 0; min-width: 0; }
  .menue li ul a { padding-left: 30px; font-size: 13px; }
}

/* Ab 768 px ist der Umschalter überflüssig — das Menü steht offen.
   ⚠️ Diese Regeln müssen NACH `.menue__schalter { display: block }` stehen,
   sonst gewinnt bei gleicher Spezifität die frühere und der Umschalter
   erscheint auch am Schreibtisch. */
@media (min-width: 768px) {
  .menue__schalter { display: none; }
  .menue__liste { display: flex; flex-wrap: wrap; }
}

/* Bis 768 px steht alles untereinander — kein Aufklappen, kein JavaScript. */
@media (max-width: 767px) {
  .menue li ul { position: static; display: block; border: 0; min-width: 0; }
  .menue li ul a { padding-left: 35px; }
  .menue a { padding-block: 8px; }
}

/* =========================================================================
   Beitragsbild über der Seite
   ========================================================================= */
.beitragsbild {
  background: var(--bild-bg);
  display: flex; justify-content: center;
}
/* ⚠️ NICHT `width: 100%`. Im Original behaelt das Bild seine eigene Groesse
   und liegt mittig auf einem randbreiten Band. Gestreckt waere die Seite bei
   2560 px um 943 px hoeher — gemessen, bevor es auffiel. */
.beitragsbild img { display: block; width: auto; max-width: 100%; }

/* =========================================================================
   Inhalt — zwei Spalten ab 768 px (gemessen: 36 % / 58 %, 6 % Zwischenraum)
   ========================================================================= */
.inhalt { padding-block: 37.5px 22.5px; }
@media (min-width: 768px) { .inhalt { padding-block: 96px 72px; } }

.seite__kopf { margin-bottom: 15px; }
.seite__titel {
  margin: 0;
  font-size: 14px; line-height: 19.6px; font-weight: 800;
  color: var(--dunkel); text-transform: uppercase; letter-spacing: 2px;
}

.seite__text > *:first-child { margin-top: 0; }
.seite__text > *:last-child { margin-bottom: 0; }
.seite__text p { margin: 0 0 24px; font-size: 16px; line-height: 24px; }
.seite__text h2 { margin: 40px 0 20px; font-size: 20px; line-height: 27px; font-weight: 800; }
.seite__text h3 { margin: 32px 0 16px; font-size: 17px; line-height: 24px; font-weight: 800; }
.seite__text ul, .seite__text ol { margin: 0 0 24px; padding-left: 22px; }
.seite__text li { margin-bottom: 6px; }
.seite__text img { display: block; margin: 24px 0; }
/* Fremde Einbettung mitwachsend halten — das Original liefert sie mit fester
   Breite von 640 px aus und laeuft damit auf jedem Telefon ueber den Rand. */
.einbettung { position: relative; width: 100%; margin: 24px 0; aspect-ratio: 4 / 3; }
.einbettung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.seite__text a { color: var(--dunkel); }
.seite__text strong { font-weight: 700; }

@media (min-width: 768px) {
  .inhalt .wrap { display: flex; flex-wrap: wrap; }
  /* ⚠️ `min-width: 0` ist nicht kosmetisch. Flex-Elemente haben von Haus aus
     `min-width: auto` — ein 640 px breites iframe im Text zieht die Spalte
     dann auf 742 statt 524 px auf, obwohl `flex: 0 0 58%` dasteht. */
  .seite__kopf { flex: 0 0 36%; margin-bottom: 0; min-width: 0; }
  .seite__text { flex: 0 0 58%; margin-left: 6%; min-width: 0; }

  /* Beiträge und Blog folgen einem ANDEREN Raster als die Seiten: dort steht
     alles in der linken 58-%-Spalte, der Platz rechts bleibt frei
     beziehungsweise trägt die Seitenleiste. Gemessen: Titel und Text beide
     bei x=268 mit 524 px Breite (1440-px-Fenster). */
  .wrap--beitrag .seite__kopf,
  .wrap--blog .seite__kopf { flex: 0 0 100%; margin-bottom: 24px; }
  .wrap--beitrag .seite__text,
  .wrap--blog .seite__text { flex: 0 0 58%; margin-left: 0; }
  .wrap--blog .seitenleiste { flex: 0 0 36%; margin-left: 6%; }
}

.seitenleiste { margin-top: 48px; }
.seitenleiste section { margin-bottom: 42px; }
.seitenleiste h2 {
  margin: 0 0 22px;
  font-size: 11px; line-height: 15.4px; font-weight: 800;
  color: var(--dunkel); text-transform: uppercase; letter-spacing: 2px;
}
.seitenleiste p { margin: 0 0 21px; font-size: 14px; line-height: 22.4px; }
.seitenleiste p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .seitenleiste { margin-top: 0; } }

/* Auf der Startseite steht der Text im selben Raster. */
.startseite .seite__text p:first-child { font-size: 20px; line-height: 30px; }
@media (max-width: 767px) {
  .startseite .seite__text p:first-child { font-size: 20px; line-height: 33.2px; }
}

/* =========================================================================
   Parallax-Panel der Startseite
   ========================================================================= */
.panel {
  min-height: 293px;
  background-image: url('bilder/farbfaecher_1024.webp');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  /* ⚠️ Gemessenes Verhalten des Originals: das Bild steht still, während die
     Seite darüber scrollt. `fixed` bemisst es am FENSTER, nicht an diesem
     Kasten. Wer den Effekt loswerden will (iOS Safari behandelt ihn unsauber):
     diese eine Zeile entfernen. */
  background-attachment: fixed;
}
@media (min-width: 768px) { .panel { min-height: 100vh; } }

/* =========================================================================
   Bildergalerie im Inhalt
   Gemessen auf der Startseite: zwei Spalten zu 258 px mit 8 px Abstand
   (258 + 8 + 258 = 524 = Breite der Textspalte). Die Bildunterschrift liegt
   unten im Bild auf einem dunklen Verlauf.
   ========================================================================= */
.seite__text figure:has(figure) {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  margin: 24px 0;
}
.seite__text figure figure { position: relative; margin: 0; }
.seite__text figure figure img { display: block; width: 100%; margin: 0; }
/* ⚠️ NUR in der Galerie absolut. Eine Bildunterschrift ohne positionierten
   Vorfahren legt sich sonst quer ueber die ganze Seite — genau das ist beim
   ersten Anlauf passiert. */
.seite__text figure figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6));
  color: #fff; font-size: 12px; line-height: 18px;
}
/* Einzelne Bilder mit Unterschrift laufen im normalen Textfluss. */
.seite__text > figure, .seite__text p > figure { margin: 24px 0; }
.seite__text > figure > figcaption {
  margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--grau);
}
/* Auch auf dem Telefon zweispaltig — das Original stapelt hier nicht. */

/* =========================================================================
   Beiträge
   ========================================================================= */
.beitrag__datum {
  margin: 0 0 2.75px;
  font-size: 11px; line-height: 16.5px; font-weight: 800;
  color: var(--grau); text-transform: uppercase; letter-spacing: 2px;
}
.beitrag__titel {
  margin: 0 0 6.5px;
  font-size: 26px; line-height: 36.4px; font-weight: 300; color: var(--text);
}
.beitrag__titel a { color: inherit; text-decoration: none; }
.beitrag__titel a:hover { text-decoration: underline; }

/* Liste im Blog */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li + li { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--linie); }
.liste img { display: block; margin-bottom: 24px; }
.weiter { display: inline-block; font-size: 14px; font-weight: 800; letter-spacing: 1px;
          text-transform: uppercase; color: var(--dunkel); }

/* Blättern zwischen Beiträgen */
.beitragswechsel { margin: 48px 0 0; display: flex; flex-wrap: wrap; gap: 24px; }
.beitragswechsel a { font-size: 16px; line-height: 24px; font-weight: 800; color: var(--dunkel);
                     text-decoration: none; }
.beitragswechsel a:hover { text-decoration: underline; }
.beitragswechsel span { display: block; font-size: 11px; letter-spacing: 2px;
                        text-transform: uppercase; color: var(--grau); font-weight: 800; }

/* =========================================================================
   Übersicht (ersetzt die Suche)
   ========================================================================= */
.uebersicht h2 { margin: 32px 0 12px; font-size: 14px; line-height: 19.6px; font-weight: 800;
                 text-transform: uppercase; letter-spacing: 2px; color: var(--dunkel); }
.uebersicht ul { list-style: none; margin: 0; padding: 0; }
.uebersicht li { margin-bottom: 10px; }
.uebersicht .datum { color: var(--grau); font-size: 11px; letter-spacing: 2px;
                     text-transform: uppercase; font-weight: 800; margin-left: 8px; }

/* =========================================================================
   Fußzeile
   ========================================================================= */
.fuss {
  margin-top: 42px;
  border-top: 1px solid var(--linie);
  font-size: 14px; line-height: 22.4px;
}
.fuss .wrap { padding-block: 28px 21px; }
@media (min-width: 768px) { .fuss .wrap { padding-inline: 42px; } }

.fuss__spalten { display: flex; flex-wrap: wrap; gap: 0 6%; }
.fuss__spalte { flex: 1 1 100%; margin-bottom: 45px; }
@media (min-width: 768px) { .fuss__spalte { flex: 0 0 47%; margin-bottom: 42px; } }

.fuss h2 {
  margin: 0 0 22px;
  font-size: 11px; line-height: 15.4px; font-weight: 800;
  color: var(--dunkel); text-transform: uppercase; letter-spacing: 2px;
}
.fuss p { margin: 0 0 21px; }
.fuss p:last-child { margin-bottom: 0; }
.fuss strong { font-weight: 700; }

.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.fuss__symbole { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fuss__symbole a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: var(--grau); color: #fff; text-decoration: none;
}
.fuss__symbole a:hover { background: var(--dunkel); }
.fuss__symbole svg { width: 20px; height: 20px; fill: currentColor; }
.fuss__hinweis { margin: 0; }
.fuss__hinweis a { color: var(--dunkel); }

/* Zustimmungs-Kasten vor einer fremden Einbettung.
   Der Kasten steht dort, wo sonst der iframe waere, und behaelt dessen
   Seitenverhaeltnis — so springt beim Laden nichts. */
/* Verweis auf den Korsch-Katalog.
   Bis 20.08.2026 stand hier ein eingebettetes Fenster, danach kurz eine
   Zustimmung davor. Beides ist raus — es ist jetzt ein gewoehnlicher Verweis,
   und die Seite kommt wieder ganz ohne JavaScript aus. */
.einbettung--verweis {
    aspect-ratio: auto;
    padding: 20px 22px;
    background: #f4f2ee;
    border: 1px solid #d8d3ca;
    border-left: 4px solid #8a7f6d;
    border-radius: 4px;
}

.einbettung__titel {
    font-weight: 700;
    margin: 0 0 8px;
}

.einbettung--verweis p {
    margin: 0 0 10px;
    line-height: 1.55;
}

.einbettung__aktion {
    margin: 14px 0 10px !important;
}

/* Als Schaltflaeche gestaltet, aber ein echter Verweis — Tippziel ueber 24 px. */
.einbettung__aktion a {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #8a7f6d;
    border-radius: 4px;
    background: #fff;
    text-decoration: none;
    font-weight: 700;
}

.einbettung__aktion a:hover,
.einbettung__aktion a:focus-visible {
    background: #efe9de;
    text-decoration: underline;
}

.einbettung__weg {
    margin: 0 !important;
    font-size: 14px;
    color: #55504a;
}