/* ============================================================================
   Bau — was das Theme über den abgenommenen Entwurf hinaus braucht.
   Der Entwurf (grund.css) war eine einzelne Landingpage. Hier kommt dazu, was
   erst entsteht, wenn aus einer Seite fünfzig werden: Kopfzeilen, Textspalten,
   Fußzeilen-Spalten, Zustände.
   Keine neuen Farben — nur die Token aus :root.
   ========================================================================= */

/* Sprungmarke für die Tastatur — unsichtbar bis sie den Fokus bekommt */
.zum-inhalt{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blau); color:#fff; padding:.8rem 1.2rem;
  border-radius:0 0 var(--r-s) 0; font-weight:600;
}
.zum-inhalt:focus{ left:0 }

/* Textspalte. Die Inhaltsbreite .bahn ist in grund.css geregelt
   (max-width + padding-inline) — hier wird sie nicht noch einmal gesetzt;
   zwei Breitenregeln für dieselbe Klasse waren am 03.10.2026 der Grund für
   eine 1528 px breite Zeile in einem 1500 px breiten Fenster. */
/* .blatt heisst im Entwurf ZWEIERLEI: das weisse Blatt der ganzen Seite
   (<main class="blatt">) und die Textspalte in den Vorlagen. 68ch gilt nur fuer
   die Textspalte — auf das Seitenblatt angewandt presste die Regel die ganze
   Webseite auf 693,6 px zusammen (gemessen 03.10.2026 bei 1905 px Fenster:
   Inhalt links, 1195 px leer rechts). */
.blatt:not(main){ max-width:68ch }
main.blatt{ max-width:none }
.blatt p{ line-height:1.75; margin:0 0 1.15em }
.blatt h2{ margin:2.4em 0 .5em; line-height:1.15 }
.blatt h3{ margin:1.9em 0 .4em }
.blatt ul,.blatt ol{ line-height:1.75; padding-left:1.3em; margin:0 0 1.3em }
.blatt li{ margin:.3em 0 }
.blatt a{ color:var(--blau-hell); text-underline-offset:.22em }
.blatt img{ max-width:100%; height:auto; border-radius:var(--r-m) }

/* Kopfzeile einer Unterseite — ruhig, hell, mit Luft */
.kopfzeile{
  padding:clamp(5rem,11vw,9.5rem) 0 clamp(2rem,4vw,3.4rem);
  background:
    radial-gradient(70% 120% at 15% -10%, var(--blau-zart) 0%, transparent 62%),
    radial-gradient(60% 110% at 92% 0%, var(--gold-zart) 0%, transparent 58%),
    var(--grund);
}
.kopfzeile h1{
  font-size:clamp(2.3rem,5.4vw,4.6rem); line-height:1.02;
  letter-spacing:-.022em; margin:0;
}
.kopfzeile .leitsatz{
  margin:1.1rem 0 0; max-width:52ch;
  font-size:clamp(1.05rem,1.7vw,1.4rem); line-height:1.5; color:var(--text-leise);
}
.krume{ font-size:.86rem; color:var(--text-leise); margin:0 0 1.1rem; display:flex; gap:.5rem; flex-wrap:wrap }
.krume a{ color:inherit }

/* Abschnittsabstand */
.feld-luft{ padding-block:clamp(3rem,7vw,6.5rem) }

/* Fußzeile: Spalten */
.fuss-raster{ display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(140px,1fr)) }
.fuss-spalte{ display:flex; flex-direction:column; gap:.55rem }
.fuss-spalte h3{ font-size:.82rem; text-transform:uppercase; letter-spacing:.13em;
  color:var(--gold-tief); margin:0 0 .5rem }
.fuss-spalte a{ color:var(--text); text-decoration:none; font-size:.97rem }
.fuss-spalte a:hover{ color:var(--blau-hell) }
.fuss-ende{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding-block:1.4rem; border-top:1px solid var(--linie);
  font-size:.86rem; color:var(--text-leise); margin-top:clamp(2rem,4vw,3.4rem) }
.fuss-ende nav{ display:flex; gap:1.2rem; flex-wrap:wrap }
.fuss-ende a{ color:inherit }
@media (max-width:860px){ .fuss-raster{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .fuss-raster{ grid-template-columns:1fr } }

/* Wortmarke auch groß (Fußzeile) */
.wortmarke.gross{ font-size:1.5rem }

/* Einblenden beim Scrollen — wirkung.js setzt .auf */
.einblenden{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--weich), transform .7s var(--weich) }
.einblenden.auf{ opacity:1; transform:none }
.einblenden:nth-child(2){ transition-delay:.07s }
.einblenden:nth-child(3){ transition-delay:.14s }
.einblenden:nth-child(4){ transition-delay:.21s }
.einblenden:nth-child(5){ transition-delay:.28s }

@media (prefers-reduced-motion:reduce){
  .einblenden{ opacity:1; transform:none; transition:none }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important }
}

/* Das Signet: einmal je Seite, klein und dezent */
.signet{ width:54px; height:54px; color:var(--gold); opacity:.55; margin-top:1.4rem }

/* ============================================================================
   Netz gegen Querscrollen.
   Gemessen am 03.10.2026 auf der Filialseite: Dokumentbreite 3223 px bei einem
   Fenster von 1500 px — ein Bild ohne Begrenzung (2560 px) und ein Rasterkind
   ohne min-width:0 (4133 px). Beides sind Fehler, die auf dem Rechner kaum
   auffallen und auf dem Telefon die Seite unlesbar machen. Diese Regeln fangen
   sie ab, egal welche Vorlage sie verursacht.
   ========================================================================= */
*, *::before, *::after{ box-sizing:border-box }
/* NUR auf html, nicht auf body. overflow-x:clip auf dem body macht ihn zum
   eigenen Scrollbehälter: er bekommt einen eigenen Rollbalken, wird dadurch
   15 px schmaler als das Fenster und schiebt die ganze Seite nach links.
   Gemessen 03.10.2026: jede .bahn stand 21 px zu weit links. */
html{ overflow-x:clip; max-width:100% }
/* grund.css setzt am body overflow-x:hidden (Zeile 47, aus dem Entwurf als
   einzelne Seite). Damit wird der body zum Scrollbehälter, bekommt einen
   eigenen 15-px-Rollbalken und schiebt die ganze Seite nach links. Auf html
   ist das Abschneiden richtig aufgehoben, am body gehört es weg. */
body{ overflow-x:visible; max-width:100% }
img, svg, video, iframe, canvas, table{ max-width:100% }
img, video{ height:auto }
/* Deckel gegen Überbreite, ohne die zentrierende Höchstbreite aus grund.css
   auszuhebeln: min() behält beides. */
.bahn{ max-width:min(var(--breite), 100%) }
/* Rasterkinder dürfen nicht über ihren Platz hinauswachsen. Ohne min-width:0
   nimmt ein Kind in grid/flex die Breite seines längsten Inhalts an. */
.kacheln > *, .fuss-raster > *, [class*="-raster"] > *, [class*="-reihe"] > *{ min-width:0 }
pre, code{ overflow-x:auto; max-width:100% }

/* ============================================================================
   grund.css stammt aus einer einzelnen Landingpage: dort liegt über .blatt ein
   Vorhang (opacity .55, blur 7px), der erst weicht, wenn body.offen gesetzt ist
   — und das setzen nur eroeffnung.js und buehne.js, die es ausschließlich auf
   der Startseite gibt. Jede Unterseite zeigte ihren Text deshalb verwaschen.
   Befund aus dem Vorlagenbau, 03.10.2026.
   ========================================================================= */
body:not(.home) .blatt{ opacity:1; filter:none; transform:none }

/* ============================================================================
   Fusszeile, erste Spalte.
   NICHT .fuss-marke benutzen: das ist im Entwurf eine dekorative, hohle
   Riesenzeile (font-size: clamp(3rem,14vw,10.5rem), color:transparent).
   Als Container missbraucht erbte der Absatz darunter 168 px Schriftgroesse
   und lief ueber den Text darueber — gemessen 03.10.2026 bei 1813 px.
   ========================================================================= */
.fuss-ueber{ display:flex; flex-direction:column; gap:.7rem; align-items:flex-start }
.fuss-ueber .wortmarke{ font-size:1.35rem; font-weight:800; color:var(--blau);
  letter-spacing:-.02em; text-decoration:none }
.fuss-ueber p{ margin:0; font-size:.95rem; line-height:1.6; color:var(--text-leise); max-width:34ch }
.fuss-ueber .signet{ margin-top:.5rem }

/* ============================================================================
   Das Seitenblatt.
   Jede Unterseite liegt auf einer eigenen Kachel: alle vier Ecken rund, Schatten
   rundum, Abstand zur festen Kopfleiste. Christopher, 03.10.2026: „Ich möchte,
   dass das eine eigene Kachel ist … auch oben, hat Abstand zum Main Menu."
   Gemessen: Kopfleiste fest bei top 22 px, Höhe 64 px — Unterkante also 86 px.
   ========================================================================= */
.blattrahmen{
  padding:clamp(102px,11vh,136px) clamp(10px,1.1vw,18px) clamp(10px,1.1vw,18px);
  background:var(--creme-2);
}
.seitenblatt{
  background:var(--grund);
  border-radius:clamp(18px,2.2vw,30px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 18px 60px rgba(19,55,109,.09);
  overflow:hidden;
}
/* Die erste Flaeche im Blatt braucht oben keinen eigenen Riesenabstand mehr. */
.seitenblatt > * > :first-child,
.seitenblatt > :first-child{ margin-top:0 }
.seitenblatt .kopfzeile:first-child,
.seitenblatt > article > :first-child.kopfzeile{ padding-top:clamp(2.4rem,5vw,4rem) }

/* Die WordPress-Adminleiste ist 32 px hoch (gemessen 03.10.2026, angemeldet).
   Ohne diese Zeile schiebt sie die feste Kopfleiste optisch an den Rand —
   genau das, was er als „klebt sehr nah oben dran" gesehen hat. */
body.admin-bar .kopf{ top:calc(22px + 32px) }
@media screen and (max-width:782px){
  body.admin-bar .kopf{ top:calc(14px + 46px) }
}