/* components.css — wiederverwendbare Bausteine.
 * Keine Hex-Werte: ausschließlich Tokens aus tokens.css. */

/* ============ Kopf & Fuß ============ */
.site-header{background:var(--surface); border-bottom:1px solid var(--line)}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); min-height:64px; flex-wrap:wrap;
}
.site-nav{display:flex; gap:var(--space-4); font-size:.92rem}
.site-nav a{color:var(--ink-soft); text-decoration:none; font-weight:600}
.site-nav a:hover{color:var(--forest)}
.site-nav a[aria-current="page"]{color:var(--forest); text-decoration:underline; text-underline-offset:.35em}

.site-footer{
  background:var(--surface); border-top:1px solid var(--line);
  padding-block:var(--space-8); margin-top:var(--space-24);
}
.site-footer p{margin:0; font-size:.85rem; color:var(--ink-soft); max-width:none}

/* ============ Marke ============ */
.wordmark{
  font-family:var(--font-display); font-weight:400; color:var(--forest-soft);
  letter-spacing:-.005em; line-height:1; white-space:nowrap;
}
.wordmark b{font-weight:700; color:var(--forest)}
.wordmark--lg{font-size:1.85rem}
.wordmark--sm{font-size:1.05rem}
.lockup{display:inline-flex; align-items:center; gap:var(--space-3); text-decoration:none}

/* Bildmarken-Teile: Hauptform = currentColor, Funke = Türkis,
   „knock" = ausgesparte Linien in der Hintergrundfarbe. */
.spark{fill:var(--teal)}
.spark-stroke{stroke:var(--teal); fill:none}
.knock{stroke:var(--surface); fill:none}
.knock-fill{fill:var(--surface)}

/* Bleisatz-Letter: weißer Körper, farbige Letter (die „benetzte" Druckfläche) */
.sort-body{fill:var(--surface); stroke:var(--line); stroke-width:1.3}
.sort-top {fill:var(--mist);    stroke:var(--line); stroke-width:1.3; stroke-linejoin:round}
.sort-side{fill:var(--paper);   stroke:var(--line); stroke-width:1.3; stroke-linejoin:round}
.sort-letter{fill:url(#rib)}
.sort-nick{fill:none; stroke:var(--line); stroke-width:1.3; stroke-linecap:round}
/* auf dunklem Grund bleibt der Klotz weiß, die Kanten dürfen dunkler ranseln */
.logo-card__stage--dark .sort-top{fill:#e9efec}
.logo-card__stage--dark .sort-side{fill:#dfe7e2}

/* Emblem-Vergleich & Varianten (nur CD-Vorschau) */
.emblem-duo{display:grid; gap:var(--space-8); grid-template-columns:1fr 1fr; align-items:center; text-align:center; margin-top:var(--space-8)}
@media (max-width:40rem){ .emblem-duo{grid-template-columns:1fr} }
.emblem-duo figure{margin:0}
.emblem-duo figcaption{margin-top:var(--space-3); font-size:.85rem; color:var(--ink-soft)}
.emblem-duo figcaption b{color:var(--forest)}

.varo{display:flex; gap:var(--space-6); flex-wrap:wrap; align-items:flex-end; margin-top:var(--space-6)}
.varo figure{margin:0; text-align:center}
.varo figcaption{margin-top:var(--space-2); font-size:.72rem; font-family:var(--font-mono); color:var(--ink-soft)}
.varo .on-dark{background:var(--forest-deep); border-radius:var(--radius-md); padding:var(--space-3)}

/* Der „Wink": die Type dreht sich beim Überfahren zur echten (gespiegelten) Letter */
.wink{transition:transform .55s cubic-bezier(.6,0,.2,1)}
@media (prefers-reduced-motion:reduce){ .wink{transition:none} }

/* Initiale im Text (Drop-Cap aus der Bleiletter) */
.dropcap{overflow:hidden}
.dropcap > svg{float:left; margin:.15em .55em .1em 0; shape-outside:margin-box}
.dropcap:hover .wink{transform:scaleX(-1)}

/* ===== Die sich erhebende Bleiletter (Signatur-Animation) =====
   Ruhezustand: flach. Getriggert (Hover) oder von selbst hebt sich der
   Körper kurz ins Räumliche. prefers-reduced-motion schaltet es ab. */
.risesort .rs-depth,
.risesort .rs-shadow{opacity:0; transition:opacity .45s ease}
.risesort .rs-face{transition:transform .45s cubic-bezier(.5,0,.2,1); transform-box:fill-box}
.risesort:hover .rs-depth{opacity:1}
.risesort:hover .rs-shadow{opacity:.16}
.risesort:hover .rs-face{transform:translateY(-2.2px)}

@keyframes rs-depth {0%,60%,100%{opacity:0} 70%,88%{opacity:1}}
@keyframes rs-shadow{0%,60%,100%{opacity:0} 70%,88%{opacity:.16}}
@keyframes rs-face  {0%,60%,100%{transform:translateY(0)} 70%,88%{transform:translateY(-2.2px)}}
.risesort--auto .rs-depth {animation:rs-depth 8s ease-in-out infinite}
.risesort--auto .rs-shadow{animation:rs-shadow 8s ease-in-out infinite}
.risesort--auto .rs-face  {animation:rs-face 8s ease-in-out infinite; transform-box:fill-box}

@media (prefers-reduced-motion:reduce){
  .risesort .rs-face{transition:none}
  .risesort--auto .rs-depth,
  .risesort--auto .rs-shadow,
  .risesort--auto .rs-face{animation:none}
}

/* Wortmarken-Varianten-Zeile */
.locks{display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-6)}
.lockrow{display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap;
  padding:var(--space-4) var(--space-6); border:1px solid var(--line);
  border-radius:var(--radius-lg); background:var(--surface)}
.lockrow--dark{background:var(--forest-deep); border-color:transparent}
.lockrow__tag{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); min-width:12ch}
.lockrow--dark .lockrow__tag{color:var(--on-dark-soft)}
.wm{font-family:'Century Schoolbook',Georgia,serif; font-size:1.7rem; line-height:1; white-space:nowrap}
.wm .grau{color:var(--ink-soft); font-weight:400}
.wm .gruen{color:var(--forest-soft); font-weight:400}
.wm .voll{color:var(--forest); font-weight:700}
.wm .hell{color:var(--on-dark); font-weight:700}
.wm .hellsoft{color:var(--on-dark-soft); font-weight:400}

/* ===== Letterpress-Prägung (Deboss) — die Schrift sitzt IM Papier =====
   Simulation über Minischattierungen: heller Saum unten (die Papierkante
   fängt Licht) + ein Hauch Schatten oben (die Mulde). Rein dekorativ;
   die Textfarben bleiben unverändert (Kontrast/AA unberührt). */
.press-1{ text-shadow:0 1px 0 rgba(255,255,255,.85); }
.press-2{ text-shadow:0 -.5px .5px rgba(18,49,42,.22), 0 1px .5px rgba(255,255,255,.95); }
.press-3{ text-shadow:0 -.5px .6px rgba(18,49,42,.30), 0 1px 1px rgba(255,255,255,1); }

.paper-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-8) var(--space-6); text-align:center;
}
.paper-card--warm{ background:var(--sand); }
/* feines Papierkorn (inline, kein externes Asset) — macht die Prägung glaubhafter */
.paper-grain{ position:relative; overflow:hidden; }
.paper-grain::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.paper-card > *{ position:relative; }

/* Buchcover-Mockup (nur CD-Vorschau) */
.coverwrap{display:flex; gap:var(--space-12); flex-wrap:wrap; align-items:flex-start; margin-top:var(--space-8)}
.cover{
  width:300px; aspect-ratio:1 / 1.45; border-radius:3px 7px 7px 3px; position:relative; overflow:hidden;
  box-shadow:0 2px 4px rgba(18,49,42,.10), 0 26px 52px rgba(18,49,42,.22);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:var(--space-12) var(--space-8);
}
.cover::before{content:""; position:absolute; left:0; top:0; bottom:0; width:16px;
  background:linear-gradient(90deg, rgba(0,0,0,.20), rgba(0,0,0,0))}      /* Buchrücken-Andeutung */
.cover--light{background:var(--sand); color:var(--forest)}
.cover--dark{background:var(--forest-deep); color:var(--on-dark)}
.cover__eyebrow{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; opacity:.7; margin:0}
.cover__logo{margin:var(--space-8) 0}
.cover__wm{font-family:'Century Schoolbook',Georgia,serif; font-size:1.9rem; line-height:1; margin:0}
.cover--light .cover__wm .n{color:var(--forest); font-weight:700}
.cover--light .cover__wm .g{color:var(--ink-soft); font-weight:400}
.cover--dark .cover__wm .n{color:var(--on-dark); font-weight:700}
.cover--dark .cover__wm .g{color:var(--on-dark-soft); font-weight:400}
.cover__rule{width:46px; height:3px; background:var(--dawn); border-radius:2px; margin:var(--space-5) 0}
.cover__imprint{margin-top:auto; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; opacity:.65}

/* Verlauf IN der Schrift (nur wo die Letter fett genug ist) */
.ink-grad{
  background:linear-gradient(115deg,var(--forest-deep),var(--teal));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* Schriftmuster-Karte (nur CD-Vorschau) */

/* Schriftmuster-Karte (nur CD-Vorschau) */
.specimen-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-6)}
.specimen-card__name{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; margin:0 0 var(--space-3)}
.specimen-card__display{color:var(--forest); font-size:clamp(1.6rem,1.1rem + 1.8vw,2.3rem); line-height:1.2; margin:0 0 var(--space-2); font-weight:400}
.specimen-card__body{font-size:.95rem; color:var(--ink); margin-bottom:var(--space-4)}
.specimen-card__swap{font-size:.8rem; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:var(--space-3); margin:0}
.specimen-card__swap b{color:var(--teal-deep); font-family:var(--font-mono); font-size:.78rem}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:var(--tap-target); padding:.7rem 1.3rem;
  border-radius:var(--radius-md); border:1px solid transparent;
  font:inherit; font-weight:600; text-decoration:none; cursor:pointer;
}
/* Zurückhaltend im Ruhezustand, entschieden erst bei Berührung: getönte Fläche
   mit grüner Schrift, das satte Grün kommt beim Hovern. So drängt sich auf einer
   Seite, die gerade nicht zum Handeln auffordern will, nichts nach vorn. */
.btn--primary{background:var(--mist); color:var(--forest); border-color:var(--forest-soft)}
.btn--primary:hover{background:var(--forest); color:var(--on-dark); border-color:var(--forest)}
/* Warum der Rand ein echtes Grün trägt und nicht --line: Die getönte Fläche steht
   nur 1,05:1 zur Seite, --line nur 1,14:1. WCAG 1.4.11 verlangt 3:1 für den Umriss
   eines Bedienelements — sonst liest sich der Knopf nicht mehr als Knopf, sondern
   als getöntes Rechteck. --forest-soft ist das hellste Markengrün, das das schafft
   (4,91:1) und bleibt trotzdem leise. */
.btn--spark{background:var(--teal); color:var(--on-teal)}
.btn--spark:hover{background:var(--teal-deep); color:var(--on-teal)}
.btn--ghost{background:transparent; color:var(--forest); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--forest-soft); color:var(--forest-deep)}

/* ============ Flächen ============ */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--space-6);
  box-shadow:var(--shadow-card);
}
.tint{background:var(--mist); border-radius:var(--radius-lg); padding:var(--space-6)}

.band{background:var(--forest-deep); color:var(--on-dark); border-radius:var(--radius-lg); padding:var(--space-12) var(--space-8)}
.band h1,.band h2,.band h3{color:var(--on-dark)}
.band p{color:var(--on-dark-soft)}
.band .eyebrow{color:var(--teal)}          /* 4,6:1 auf Dunkelgrün — AA erfüllt */
.band .wordmark{color:var(--on-dark-soft)}
.band .wordmark b{color:var(--on-dark)}

/* ============ CD-Vorschau: Farbfelder ============ */
.swatches{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:var(--space-4)}
.swatch{border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; background:var(--surface)}
.swatch__chip{height:74px}
.swatch__meta{padding:var(--space-3); font-size:.78rem; line-height:1.5}
.swatch__name{font-weight:700; color:var(--ink); font-family:var(--font-mono); font-size:.76rem}
.swatch__hex{font-family:var(--font-mono); color:var(--ink-soft)}
.swatch__use{color:var(--ink-soft); display:block; margin-top:var(--space-1)}

.badge{
  display:inline-block; font-size:.68rem; font-weight:700;
  padding:.18em .55em; border-radius:999px; letter-spacing:.03em;
}
.badge--pass{background:var(--teal-mist); color:var(--teal-deep)}
.badge--warn{background:var(--warn-bg); color:var(--warn-ink)}

/* ============ CD-Vorschau: Logo-Karten ============ */
.logo-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:var(--space-6)}
.logo-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  display:flex; flex-direction:column;
}
.logo-card__stage{
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-8) var(--space-6); min-height:132px;
  color:var(--forest); background:var(--surface);
}
.logo-card__stage--dark{background:var(--forest-deep); color:var(--on-dark)}
.logo-card__stage--dark .knock{stroke:var(--forest-deep)}
.logo-card__stage--dark .knock-fill{fill:var(--forest-deep)}

.logo-card__sizes{
  display:flex; align-items:center; gap:var(--space-6);
  padding:var(--space-4) var(--space-6);
  border-block:1px solid var(--line); background:var(--paper); color:var(--forest);
}
.logo-card__sizes .knock{stroke:var(--paper)}
.logo-card__sizes .knock-fill{fill:var(--paper)}
.size-note{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft)}
.size-item{display:flex; align-items:center; gap:var(--space-2)}

.logo-card__body{padding:var(--space-6)}
.logo-card__body h3{margin-bottom:var(--space-1)}
.logo-card__body p{font-size:.88rem; margin-bottom:var(--space-3)}
.tag{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--teal-deep); margin-bottom:var(--space-2);
}
.contra{font-size:.82rem; color:var(--ink-soft); margin:0}
.contra b{color:var(--forest)}

/* ============ CD-Vorschau: Typografie-Proben ============ */
.specimen{
  border-left:3px solid var(--teal);
  padding-left:var(--space-4);
  margin-bottom:var(--space-8);
}
.specimen p:last-child{margin-bottom:0}
.specimen__label{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-soft); margin-bottom:var(--space-2)}

.duo{display:grid; gap:var(--space-6)}
@media (min-width:44rem){ .duo{grid-template-columns:1fr 1fr} }

.note{
  border-left:3px solid var(--teal); background:var(--teal-mist);
  padding:var(--space-4) var(--space-6); border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.note p{margin:0; font-size:.9rem; color:var(--forest)}

/* ============================================================
   SEITE — Navi · Hero · Kacheln · Platzhalter · Bewegung
   Grundsatz: sachlich, viel Luft, Bewegung nur punktuell.
   ============================================================ */

/* ---- Navi: ruhig, dünn, wird beim Scrollen leicht abgesetzt ---- */
.nav{
  position:sticky; top:0; z-index:50;
  /* ZWEI ZUSTÄNDE seit 03.08.2026 (Frank): Über dem Hero trägt die Leiste dessen
     Ton mit, danach wechselt sie ins Weiß der Seite. Ohne das ergäbe eine weiße
     Leiste über einem getönten Band zwei gestapelte Balken — das liest sich als
     Versehen, nicht als Gliederung.
     Der Ton läuft über die eigene Eigenschaft --ton, weil ihn AUCH die Menüklappe
     auf schmalen Schirmen braucht: Eigenschaften vererben sich, eine zweite Regel
     für die Klappe erübrigt sich damit. Umgeschaltet wird von .is-nach-hero,
     gesetzt in assets/js/main.js. */
  --ton:var(--hero-grund);
  background:color-mix(in srgb, var(--ton) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  /* Die Haarlinie steht seit 31.07.2026 VON ANFANG AN (Frank). Vorher erschien
     sie erst beim Scrollen. Das ging, solange die Leiste einen eigenen Ton
     hatte — der begrenzte das Band. Seit sie dasselbe Weiss traegt wie die
     Seite, hat sie im Ruhezustand sonst gar keine Kante und schwebt ohne
     Begrenzung. Die Linie leistet dasselbe wie der warme Ton, nur sachlicher:
     sie begrenzt das Band, ohne es einzufaerben. */
  border-bottom:1px solid var(--line);
  transition:background-color .3s ease;
}
/* Hinter dem Hero: Ton wechselt ins Weiß der Seite, und die Leiste wird zugleich
   etwas dichter. Das Dichterwerden ist kein Signal — das leistet die Haarlinie —,
   sondern sorgt dafür, dass der Kopf lesbar bleibt, wenn eines der Fotos darunter
   durchwandert: Bei 88 % scheinen 12 % davon durch den Weichzeichner, bei 94 %
   nur noch 6 %.
   Die frühere Klasse .is-scrolled (Schwelle 8 px) ist damit entfallen. Sie hätte
   zwischen 8 px und dem Hero-Ende nichts mehr zu tun gehabt — zwei Zustände, von
   denen einer nichts bewirkt, sind schlechter als einer. */
.nav.is-nach-hero{
  --ton:var(--nav-grund);
  background:color-mix(in srgb, var(--ton) 94%, transparent);
}
.nav__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-6); min-height:88px; flex-wrap:wrap;
  transition:min-height .32s cubic-bezier(.2,.7,.2,1);
}
.nav__brand{display:inline-flex; align-items:center; text-decoration:none}
.nav__brand img{height:38px; width:auto; display:block; transition:height .32s cubic-bezier(.2,.7,.2,1)}

/* Beim Scrollen tritt der Kopf zurück und ordnet sich dem Inhalt unter. */
.nav.is-kompakt .nav__inner{min-height:64px}
.nav.is-kompakt .nav__brand img{height:30px}

/* Anmelden: nur ein Zeichen, kein Wort. Volle Touchfläche, damit es auf dem
   Telefon triffbar bleibt, obwohl das Symbol nur 20 px misst.
   ACHTUNG dieselbe Spezifitätsfalle wie beim Knopf: '.nav__links a' schlägt
   '.nav__login' — die Regeln müssen deshalb verschränkt geschrieben werden.

   ⚠ DERZEIT UNGENUTZT. Das Symbol und login.php sind am 04.08.2026 entfernt
   worden (Begründung in docs/INTERNER-BEREICH.md). Diese Regeln bleiben stehen,
   weil der interne Bereich geplant ist und nicht verworfen — anders als etwa
   .is-scrolled oder die Reservestrahlen, die verschwunden sind, WEIL sie
   überholt waren. Hier wartet etwas, dort war etwas erledigt.
   Wer den Login wieder einbaut, findet die Gestaltung also vor. */
.nav__links a.nav__login{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--tap-target); height:var(--tap-target); padding:0;
  border-radius:var(--radius-md); color:var(--ink-soft);
  transition:color .2s ease, background-color .2s ease;
}
.nav__links a.nav__login:hover{color:var(--forest); background:var(--mist)}
.nav__links a.nav__login::after{content:none}   /* keine Goldlinie unter einem Symbol */
/* Auf schmalen Schirmen bricht die Navi ohnehin um. Dort kostet die grössere
   Marke nur Höhe in einer klebenden Leiste — also bleibt sie klein, und das
   Jubiläum tritt ganz zurück. */
/* Menüknopf: liegt still, bis beide Bedingungen erfüllt sind — schmaler Schirm
   UND laufendes JavaScript. */
.nav__menue{display:none}

@media (max-width:47.99rem){
  .nav__inner{min-height:68px}
  .nav__brand img{height:30px}

  .js .nav__menue{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:var(--tap-target); height:var(--tap-target); padding:0 11px;
    margin-inline-start:auto;                       /* schiebt ihn nach rechts */
    border:0; background:none; cursor:pointer; border-radius:var(--radius-md);
    transition:background-color .2s ease;
  }
  .js .nav__menue:hover{background:var(--mist)}
  .nav__balken{
    display:block; width:100%; height:1.5px; border-radius:2px;
    background:var(--ink-soft);
    transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .16s ease, background-color .2s ease;
  }
  .js .nav__menue:hover .nav__balken{background:var(--forest)}
  /* Offen: aus den drei Strichen wird ein Kreuz. */
  .js .nav__menue[aria-expanded="true"] .nav__balken:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .js .nav__menue[aria-expanded="true"] .nav__balken:nth-child(2){opacity:0}
  .js .nav__menue[aria-expanded="true"] .nav__balken:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  /* Aus der Linkzeile wird eine Klappe unter der Leiste. display:none statt
     nur unsichtbar — sonst bliebe sie im Tabulator-Weg erreichbar. */
  .js .nav__links{
    position:absolute; left:0; right:0; top:100%;
    display:none; flex-direction:column; align-items:stretch; gap:0;
    padding-block:var(--space-2);
    /* --ton erbt von .nav und wechselt dort mit .is-nach-hero — die Klappe geht
       also von selbst mit, ohne eigene Regel. */
    background:var(--ton); border-bottom:1px solid var(--line);
    box-shadow:0 14px 30px rgba(18,49,42,.10);
  }
  .js .nav__links[data-offen]{display:flex}
  .js .nav__links a{padding:var(--space-4) var(--space-6); font-size:1.02rem}
  .js .nav__links a + a{border-top:1px solid var(--line)}
  .js .nav__links a::after{content:none}                    /* keine Goldlinie in der Klappe */
  .js .nav__links a[aria-current="page"]{color:var(--forest); font-weight:600}

  /* „Anmelden“ bekommt hier sein Wort zurück. */
  .js .nav__links a.nav__login{
    width:auto; height:auto; justify-content:flex-start; gap:var(--space-3);
    padding:var(--space-4) var(--space-6);
  }
  .js .nav__links .nav__login-wort{
    position:static; width:auto; height:auto; overflow:visible;
    clip:auto; clip-path:none; white-space:normal;
  }
}
.nav__links{display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap}
.nav__links a{
  font-family:var(--font-sans); font-size:.92rem; font-weight:500;
  color:var(--ink-soft); text-decoration:none; padding:.25em 0; position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--dawn); transition:right .35s cubic-bezier(.2,.7,.2,1);
}
.nav__links a:hover{color:var(--forest)}
.nav__links a:hover::after{right:0}
.nav__links a[aria-current="page"]{color:var(--forest)}
.nav__links a[aria-current="page"]::after{right:0}
/* Die dunkle Kontakt-Schaltfläche ist aus der Leiste ausgebaut (26.07.2026):
   Solange das Geschäft ruht, soll der Kopf nicht zum Handeln drängen. Kontakt
   steht jetzt im Fuß. Sollte sie zurückkehren, muss sie als '.nav__links a.nav__cta'
   geschrieben werden — '.nav__cta' allein verliert gegen '.nav__links a'. */

/* Sprungziele nicht unter die klebende Navi rutschen lassen.
   Die Leiste ist NICHT konstant hoch: 89px in Ruhe, 65px kompakt, und unterhalb
   von 48rem bricht sie um und misst 95px. Der Versatz muss den GRÖSSTEN Fall
   überstehen, sonst verschwindet der Anfang des Ziels darunter. Deshalb eine
   Marke statt einer festen Zahl — und main[id], weil der Skip-Link auf <main>
   zeigt und dort vorher gar kein Versatz galt. */
:root{ --nav-hoehe:89px }                                   /* gemessen: 88px min-height + 1px Linie */
/* Schmal hängt die Höhe daran, ob JavaScript läuft — beides gemessen:
     ohne JS: zweizeilig, alle Links sichtbar          → 99px
     mit JS:  einzeilig, Links liegen in der Klappe    → 69px
   Die Marke sitzt bei .js auf demselben Element wie :root (dem <html>), gewinnt
   aber durch die höhere Spezifität. Ein Sprungziel darf Luft über sich haben,
   verschwinden darf es nicht — deshalb im Zweifel der größere Wert. */
@media (max-width:47.99rem){
  :root{ --nav-hoehe:99px }
  .js{ --nav-hoehe:69px }
}
section[id], main[id]{ scroll-margin-top:calc(var(--nav-hoehe) + var(--space-4)) }

/* ---- Schmale Zeile unter der Navi (Jubiläum, leise) ---- */
.jubelzeile{border-bottom:1px solid var(--line)}
.jubelzeile__inner{
  display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap;
  padding-block:var(--space-3);
  font-family:var(--font-sans); font-size:.78rem; letter-spacing:.03em; color:var(--ink-soft);
}
.jubelzeile b{color:var(--forest); font-weight:700; letter-spacing:.06em}

/* ---- Schmales Band für das Logo-Paar ---- */
.zeichenband{border-top:1px solid var(--line); padding-block:var(--space-12)}
.zeichenband .logopaar{margin-top:var(--space-6)}
.zeichenband p{margin:0; color:var(--ink-soft); font-size:.95rem}

/* ---- Hero ---- */
/* Das Band über die ganze Breite (03.08.2026). Die Sektion ist ohnehin
   fensterbreit — nur der .container darin begrenzt den INHALT. Es fließt also
   kein Inhalt über die Mitte hinaus; das war Franks Bedingung vom 29.07. */
.hero{position:relative; overflow:hidden; padding-block:var(--space-24) var(--space-16);
      background:var(--hero-grund)}
/* Auf schmalen Schirmen deutlich enger (03.08.2026). Die 96 px oben sind für den
   zweispaltigen Hero gewählt, wo links und rechts Luft steht; einspaltig folgen
   sie unmittelbar auf eine 69 px hohe Navileiste und ergeben zusammen ein leeres
   Band von 165 px, bevor irgendetwas beginnt.
   Der Anlass war ein handfester: Franks Tafelfoto wurde auf dem Telefon unten um
   57 px abgeschnitten, man musste erst scrollen, um es ganz zu sehen. Gespart
   werden hier 56 px oben, 16 unten und 16 in der Rasterlücke — zusammen genug,
   dass das Bild vollständig ins erste Bild passt. */
@media (max-width:55.99rem){
  .hero{padding-block:var(--space-8) var(--space-12)}
  .hero__inner{gap:var(--space-6)}
}

/* Für flache Fenster (Telefon im Querformat) gibt es einen eigenen Block —
   er steht am ENDE dieser Datei und muss dort stehen bleiben. Begründung dort. */

/* ---- Der Sonnenaufgang aus dem Logo, statisch im Fuß ----
   Ersetzt seit 30.07.2026 den früheren beliebigen Lichtschimmer. Der war hübsch,
   bedeutete aber nichts; jetzt steht dort dieselbe Marke, die im Kopf klebt.
   Geometrie kommt aus sonne() in partials/ui.php — gleiche Rechnung wie
   sunrise() in marks.php.

   AM 03.08.2026 GRUNDLEGEND VEREINFACHT (Frank: „statisch in den footer …
   ohne scrolleffekte … am boden von allem").

   Weggefallen ist damit die gesamte Mechanik der Vorgängerfassung: das fest
   verankerte Element an der Fensterunterkante, das Aufsteigen beim Scrollen
   (--sonne aus main.js), die Drehung der Kegel, die Gruppe .sonne__aufgang, die
   Ausnahme für reduzierte Bewegung und die Regel, die allen Inhalt über die
   Sonne heben musste. Sechs Bauteile für einen Effekt.

   Was ihn erledigt hat, waren zwei Beobachtungen: Auf dem Telefon lag die Sonne
   beim ersten Blick vollständig hinter dem Hero, und seit der Fuß deckend
   dunkelgrün ist, verschwand sie ausgerechnet dort, wo sie am höchsten stand.
   Beide Probleme entstanden nur, WEIL sie über die ganze Seite wanderte.
   Am Seitenende festgesetzt hat sie keinen Konkurrenten mehr — und das Ende der
   Seite ist der ehrlichere Horizont als die Fensterkante, weil es sich nicht
   mit dem Scrollen verschiebt.

   GRÖSSE: clamp(190px, 34vw, 333px) — drei Bereiche in einem Wert.
     Untergrenze 190 px greift bis rund 560 px Breite, also auf Telefonen. Sie
       ist am 03.08.2026 dazugekommen (Frank: „am handy ist die sonne nur etwas
       klein geraten"). Auf 390 px wuchs sie damit von 133 auf 190 px, also um
       43 %.
     34 vw greift dazwischen, auf Tabletts, und lässt sie mitwachsen.
     Obergrenze 333 px ab rund 980 px: Auf breiten Schirmen soll sie ein Detail
       am Fuß bleiben, keine Fläche.

   Bewusst OHNE @media gelöst. Ein Umbruchpunkt hätte an seiner Grenze einen
   Sprung erzeugt — diesseits 133 px, jenseits 190. clamp() blendet die drei
   Bereiche stufenlos ineinander, es gibt keine Breite, bei der die Sonne
   springt.
   Der vw-Anteil muss dabei bleiben: Eine reine Pixelzahl bliese sie auf dem
   Telefon auf einen Großteil der Bildschirmbreite auf. Wer die Größe ändert,
   sehe sie liegend UND stehend an — beim Querformat fiel zu groß zuerst auf. */
.fusssonne{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:clamp(190px,34vw,333px);
  z-index:0; pointer-events:none; line-height:0;
}
.fusssonne .sonne{display:block; width:100%; height:auto}

/* Hier stand bis zum 03.08.2026 „main, .foot{position:relative; z-index:1}".
   Der Grund war die fest verankerte Sonne: Ein positioniertes Element mit
   z-index 0 zeichnet über statischem Inhalt, der Text wäre also hinter der Sonne
   verschwunden. Seit sie im Fuß sitzt und nichts mehr überlagert, ist der Zwang
   für <main> entfallen.
   Der Fuß braucht position:relative weiterhin — aber aus dem umgekehrten Grund:
   Er ist jetzt der Bezugsrahmen für die absolut gesetzte .fusssonne. Ohne ihn
   klebte sie am Fenster statt am Fußende. overflow:hidden schneidet ab, was
   unterhalb der Bildkante liegt (der Konvergenzpunkt der Kegel und der Rest des
   Sonnenkörpers) — sonst wüchse die Seite unten aus dem Rahmen. */
.foot{position:relative; overflow:hidden}
/* Der Fußinhalt liegt über der Sonne, nicht darunter. */
.foot > .container{position:relative; z-index:1}

/* ---- Das gemeinsame Raster ----
   Hero und alle Abschnitte teilen sich seit dem 30.07.2026 EIN Spaltenmaß, damit
   alle Bilder bei derselben x-Position beginnen. Vorher hatte jede Sektion ihr
   eigenes Verhältnis (1,15/0,85 · 1/1 · 1,18/0,82) mit 48 bzw. 40px Lücke;
   gemessen streuten die linken Bildkanten über fast 100px — 664, 580, 677 — und
   ausgerechnet Hero und Tafelbild, die man gleichzeitig sieht, lagen am weitesten
   auseinander. Siehe docs/OFFEN-BILDRASTER.md.

   Das Maß war zunächst 5fr Text · 64px · 6fr Bild (= 480/64/576 bei 1120px).
   Am 31.07.2026 auf GLEICHE SPALTEN umgestellt: 1fr · Lücke · 1fr bei 1280px
   Seitenbreite, also 576/128/576. Grund und Rechnung stehen bei --raster-spalt
   in tokens.css — kurz: Nur bei gleichen Spalten liegt die Lücke mittig, und nur
   dann hat die Bildkante denselben Abstand zur gedachten Mittellinie wie das
   Ende der längsten Textzeile.

   Die Bilder werden dabei NICHT kleiner: 576px vorher, 576px nachher. Die
   zusätzliche Seitenbreite geht vollständig in die Mitte.
   Die Textspalte gewinnt mit: 480 → 576px, das sind statt 52 rund 62 Zeichen je
   Zeile. (Der frühere Kommentar sprach hier von „rund 60 Zeichen" bei 480px —
   nachgemessen waren es 52. Das Ziel des Hauses steht in --measure: 66.) */
.hero__inner{position:relative; z-index:1; display:grid; gap:var(--space-12); align-items:center}
@media (min-width:56rem){
  .hero__inner{grid-template-columns:1fr 1fr; column-gap:var(--raster-spalt)}
}
/* text-wrap:balance verteilt die Zeilen gleichmässig, statt jede bis zum Anschlag
   zu füllen und den Rest auf die letzte zu kippen. Seit die Dame rechts neben der
   Überschrift fliesst, bricht diese früher — ohne Ausgleich blieb „auf." allein
   auf der dritten Zeile stehen. Browser ohne Unterstützung brechen wie bisher;
   es geht nichts verloren. */
/* Schriftgrad am 03.08.2026 zurückgenommen (Frank): oben 3,4 → 3,0rem,
   unten 2,1 → 1,9rem. Der Hero trägt jetzt keine Behauptung mehr, sondern einen
   freundlichen Satz — der braucht nicht dieselbe Lautstärke. Auf dem Telefon
   spart es zusätzlich Höhe, und dort zählt jede Zeile. */
.hero h1{
  font-size:clamp(1.9rem,1.1rem + 3.1vw,3rem); letter-spacing:-.018em;
  margin-bottom:var(--space-5); text-wrap:balance;
}
/* Die Deckelung lag bis zum 31.07.2026 bei 52ch. Das war exakt die Breite der
   damaligen 480px-Spalte, also wirkungslos. Seit die Spalte 576px (62 Zeichen)
   misst, bremste der alte Wert die Einleitung künstlich aus: Sie endete 96px vor
   der Spaltenkante und zog damit die optische Textkante nach links — genau die
   Unwucht gegen die Mittellinie, die weg sollte. Jetzt gilt das Hausmaß; da es
   über der Spaltenbreite liegt, bestimmt praktisch die Spalte, und der Wert
   wächst nicht wieder aus dem Tritt, wenn sich das Raster ändert. */
/* ALLE Hero-Absätze tragen dieselbe Farbe UND denselben Grad (03.08.2026, beides
   hat Frank am Bild gesehen).

   Vorher standen dort zwei Unterschiede nebeneinander, die beide aus derselben
   alten Idee stammten: Die Einleitung war --ink-soft und 19,5 px, der Absatz
   darunter erbte --ink und 18 px. Gedacht war das für einen Hero, in dem die
   Lede eine BEHAUPTUNG einleitete und der Rest sie belegte — dort trägt eine
   Abstufung Bedeutung. Seit an dieser Stelle die Schachfiguren stehen, sind es
   zwei gleichrangige Absätze einer Erzählung, und die Abstufung bedeutet nichts
   mehr.

   Beim Grad kam hinzu: 19,5 gegen 18 px sind 8 Prozent. Zu wenig, um als Absicht
   gelesen zu werden — eine bewusste Einleitung liegt üblicherweise ein Viertel
   über dem Fließtext —, aber genug, um als Unsauberkeit aufzufallen. Ein halber
   Unterschied ist schlechter als gar keiner.

   Der Nachfahrenselektor greift beide Absätze; die Bildunterschrift daneben ist
   ein figcaption und bleibt unberührt. */
.hero__inner p{font-size:clamp(1.05rem,1rem + .35vw,1.22rem); max-width:var(--measure)}

/* Nur noch für die geparkten Entwürfe (entwurf-start.php, stand-2026-07-26.php).
   Die Startseite braucht die Klasse seit dem 03.08.2026 nicht mehr — dort regelt
   die Regel darüber beide Absätze gemeinsam. Nicht löschen, ohne vorher in jenen
   beiden Dateien nachzusehen. */
.hero__lede{font-size:clamp(1.05rem,1rem + .35vw,1.22rem); color:var(--ink-soft); max-width:var(--measure)}
/* Belegzeile: kleiner als die Lede, damit sie als Fußnote zur Behauptung liest
   und nicht als zweiter Anlauf. Die Goldlinie links markiert sie als Beleg —
   dasselbe Zeichen wie in der Punkteliste weiter unten. */
.hero__beleg{
  position:relative; margin-top:var(--space-8); padding-left:var(--space-5);
  max-width:46ch; font-size:.94rem; color:var(--ink-soft);
}
.hero__beleg::before{
  content:""; position:absolute; left:0; top:.62em;
  width:10px; height:2px; border-radius:2px; background:var(--dawn);
}
.hero__beleg b{color:var(--forest); font-weight:600}
.hero__actions{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-8)}
.hero__mark{justify-self:center}

/* Echtes Foto im Hero statt Marke: Querformat, weicher Rahmen, leicht angehoben. */
.hero__foto{margin:0; justify-self:center; max-width:100%}

/* Einmaliger Auftritt beim Laden — kein Dauerlauf.
   ACHTUNG, die alte Begründung stimmt nicht mehr: Sie lautete, die Abschnitte
   darunter blendeten beim Scrollen ein und nur der Hero stünde sofort hart da.
   Dieses Einblenden ist am 30.07.2026 ausgebaut worden; hier ist es geblieben.
   Es trägt sich aber weiter selbst — ein einziger Auftritt beim Laden, danach
   Ruhe, ist etwas anderes als Bewegung, die beim Scrollen immer wieder anspringt.
   Nur mit JavaScript (.js), sonst bliebe das Bild ohne Skript unsichtbar. */
.js .hero__foto{opacity:0; transform:translateY(14px) scale(1.012); animation:heroBild .9s cubic-bezier(.2,.7,.2,1) .12s forwards}
@keyframes heroBild{ to{ opacity:1; transform:none } }
.hero__foto img{
  display:block; width:min(560px,92vw); height:auto;
  border-radius:var(--bild-radius);
  box-shadow:var(--bild-schatten);
}
/* Kein eigener Deckel mehr: Das Hero-Bild füllt seine Rasterspalte aus, sonst
   bräche die gemeinsame linke Bildkante sofort wieder. Die Breite begrenzt jetzt
   allein der Container (1120px → Spalte 576px). */
@media (min-width:56rem){ .hero__foto img{width:100%; max-width:none} }
/* Quadratische Motive dürfen nicht so breit werden wie Querformate — sonst
   wächst der Hero in die Höhe und schiebt alles darunter aus dem Bild. */
.hero__foto--quadrat img{width:min(400px,80vw)}
@media (min-width:56rem){ .hero__foto--quadrat img{max-width:25rem} }

/* Breitere Fassung für die Vergleichsseite. */
@media (min-width:56rem){ .hero__foto--breit img{max-width:41rem} }

/* Markierung zwischen den Proben — nur auf _probe-hero.php sichtbar. */
.probe__marke{
  max-width:var(--container); margin:0 auto; padding:var(--space-3) var(--space-6);
  display:flex; align-items:center; gap:var(--space-4);
  border-top:2px solid var(--dawn); background:var(--sand);
  font-family:var(--font-sans); font-size:.86rem; color:var(--ink-soft);
}
.probe__buchstabe{
  flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--forest); color:var(--on-dark); font-weight:700; text-transform:uppercase;
}
.probe__marke b{color:var(--forest)}

/* Freigestelltes Motiv: kein Rahmen, keine Ecken, kein Kastenschatten — das
   Motiv bringt seinen eigenen Rand mit. Der Schlagschatten folgt der Silhouette
   statt dem Rechteck, sonst schwebt ein unsichtbarer Kasten mit. */
.hero__foto--frei img{
  border-radius:0; box-shadow:none;
  filter:drop-shadow(0 16px 26px rgba(18,49,42,.18));
  width:min(560px,94vw);
}
@media (min-width:56rem){ .hero__foto--frei img{width:100%; max-width:33rem} }

/* Randlose Bildbahn: am 29.07.2026 versucht und wieder ausgebaut. Sie war das
   einzige Element der Seite, das den Bildschirmrand berührt — ein Bruch im
   sonst durchgehend zentrierten Raster. Randlos trägt nur, wenn der Text IM
   Bild steht, und das verlangt Abdunkelung und Kontrastprüfung über einem
   ungleichmäßig hellen Motiv. Zu viel Aufwand, um die Ruhe zu zerstören. */
.hero__mark svg{width:min(300px,72vw); height:auto; filter:drop-shadow(0 14px 30px rgba(18,49,42,.16))}

/* Hero-Animation: die Sonne geht auf, die Strahlen kommen nach. Einmalig. */
.hero__mark .sun{ animation:sunUp 1.25s cubic-bezier(.2,.7,.2,1) .15s both }
.hero__mark .rays path{ opacity:0; animation:rayIn .9s ease forwards }
.hero__mark .rays path:nth-child(1){animation-delay:.55s}
.hero__mark .rays path:nth-child(2){animation-delay:.75s}
.hero__mark .rays path:nth-child(3){animation-delay:.95s}
.hero__mark .rays path:nth-child(4){animation-delay:1.1s}
.hero__mark .rays path:nth-child(5){animation-delay:1.1s}
.hero__mark .rays path:nth-child(6){animation-delay:.95s}
.hero__mark .rays path:nth-child(7){animation-delay:.75s}
.hero__mark .rays path:nth-child(8){animation-delay:.55s}
@keyframes sunUp{ from{transform:translateY(5px)} to{transform:translateY(0)} }
@keyframes rayIn{ to{opacity:1} }

/* ---- Abschnitts-Kopf ---- */
/* ---- Sektionsmarke ----
   Kurzer Goldstrich über jeder Abschnittsüberschrift. Er ersetzt das Signal,
   das mit den entfallenen Kleinüberschriften verlorenging: „hier beginnt etwas
   Neues“ — ohne ein weiteres Wort. Dasselbe Zeichen wie in .plist und
   .hero__beleg, deshalb liest es sich als Teil derselben Sprache.
   Bewusst KEINE durchgehende Trennlinie: die würde das zentrierte Raster
   zerschneiden. Nur in <main>, sonst bekäme auch der Fuß Goldstriche. */
main .section h2::before{
  content:""; display:block;
  width:44px; height:2px; border-radius:2px;
  background:var(--dawn);
  margin-bottom:var(--space-5);
}

.sec-head{max-width:60ch; margin-bottom:var(--space-10)}
.sec-head h2{margin-bottom:var(--space-3)}
.sec-head p{color:var(--ink-soft); margin:0}

/* ---- Kachelraster ---- */
.tiles{display:grid; gap:var(--space-5); grid-template-columns:1fr}
@media (min-width:40rem){ .tiles{grid-template-columns:1fr 1fr} }
@media (min-width:60rem){ .tiles--3{grid-template-columns:repeat(3,1fr)} }
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-8) var(--space-6); display:flex; flex-direction:column; gap:var(--space-3);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-card); border-color:color-mix(in srgb, var(--forest-soft) 35%, var(--line))}
.tile__icon{color:var(--teal-deep); width:30px; height:30px}
.tile h3{margin:0; font-family:var(--font-display); font-size:1.24rem; font-weight:600; color:var(--forest); letter-spacing:-.005em}
.tile p{margin:0; font-size:.96rem; color:var(--ink-soft); max-width:none}

/* ---- Grundsatz-Streifen (kompakt, mit Goldakzent) ---- */
.facts{display:grid; gap:var(--space-6); grid-template-columns:1fr; margin-top:var(--space-10)}
@media (min-width:48rem){ .facts{grid-template-columns:repeat(3,1fr)} }
.fact{border-top:2px solid var(--dawn); padding-top:var(--space-4)}
.fact h4{margin:0 0 var(--space-2); font-family:var(--font-sans); font-size:.95rem; font-weight:700; color:var(--forest)}
.fact p{margin:0; font-size:.9rem; color:var(--ink-soft)}

/* ---- Foto-Platzhalter (wird später 1:1 durch ein Bild ersetzt) ---- */
.ph{
  /* Gleicher Radius wie das echte Foto, damit das Layout beim Austausch nicht
     springt — der Platzhalter soll die endgültige Form vorwegnehmen. Der
     Schatten fehlt bewusst: Ein gestrichelter Kasten, der schwebt, sähe aus
     wie ein Fehler. */
  position:relative; display:block; width:100%; border-radius:var(--bild-radius); overflow:hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mist) 70%, var(--sand)) 0%, var(--sand) 100%);
  border:1px dashed color-mix(in srgb, var(--forest-soft) 40%, var(--line));
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.ph__body{padding:var(--space-6); color:var(--forest-soft); max-width:34ch}
.ph__body svg{width:26px; height:26px; margin-bottom:var(--space-2); opacity:.7}
.ph__label{display:block; font-family:var(--font-sans); font-size:.9rem; font-weight:600; color:var(--forest)}
.ph__file{display:block; font-family:var(--font-mono); font-size:.7rem; margin-top:var(--space-2); color:var(--ink-soft)}

/* ---- Bilder aus ph() ----
   Dieselbe Behandlung wie das Hero-Bild. Bis zum 31.07.2026 hatten sie nur den
   Radius und keinen Schatten — dieselbe Sorte Foto, zwei Erscheinungen. Beides
   hängt jetzt an --bild-radius/--bild-schatten in tokens.css. */
.ph-img{
  width:100%; height:auto; display:block;
  border-radius:var(--bild-radius);
  box-shadow:var(--bild-schatten);
}

/* ---- Logo-Paar (Jubiläum: alt → neu) ---- */
.logopaar{
  display:flex; align-items:center; justify-content:center; gap:var(--space-8);
  flex-wrap:wrap; margin-top:var(--space-10);
}
.logopaar figure{margin:0; text-align:center}
.logopaar img, .logopaar svg{display:block; margin-inline:auto}
.logopaar__alt img{width:min(260px,60vw); height:auto; opacity:.72; filter:grayscale(.15)}
.logopaar figcaption{
  margin-top:var(--space-3); font-family:var(--font-sans); font-size:.72rem; font-weight:700;
  letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--ink-soft);
}
.logopaar__pfeil{color:var(--dawn); flex:0 0 auto}
@media (max-width:36rem){ .logopaar__pfeil{transform:rotate(90deg)} }

/* ---- Kachel mit quadratischem Bild oben ---- */
.tile--bild{padding:0; overflow:hidden}
.tile__bild{aspect-ratio:1/1; overflow:hidden; background:var(--mist)}
/* In der Kachel sitzt das Bild bündig in einem Rahmen, der selbst schon Kante
   und Ecken mitbringt — dort wären Radius und Schatten doppelt gemoppelt. */
.tile__bild .ph-img{height:100%; object-fit:cover; border-radius:0; box-shadow:none}
.tile__bild .ph{height:100%; border-radius:0; border:0}
.tile__text{padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3)}

/* ---- Einzelne Spielfiguren als Beiwerk im Textfeld ----
   Zwei echte Bauern aus der Produktzeichnung, nur im Farbton gedreht (Türkis
   178°, Pink 336° — beides an den echten Fotos gemessen). Sie brechen die
   Rechteckigkeit der Textspalte auf.

   Im Fluss gesetzt, nicht absolut positioniert: So können sie nirgends aus dem
   Raster fallen und brauchen keine Sonderregel für schmale Schirme.

   Der Schlagschatten folgt der Silhouette, nicht einem Rechteck — dadurch liegen
   sie auf der Seite, statt flach aufgeklebt zu wirken. Die leichte Drehung tut
   das Übrige: etwas Hingelegtes steht nie ganz gerade. */
.figur{
  display:block; height:auto; pointer-events:none; user-select:none;
  filter:drop-shadow(0 9px 12px rgba(18,49,42,.20));
}
/* NEU GEFASST AM 03.08.2026 (Frank), als die Figuren mit in den Hero wanderten.
   Vorher hiessen sie --oben und --unten und standen als eigene Blöcke; nur auf
   schmalen Schirmen wurde der Bauer umflossen. Jetzt werden BEIDE umflossen, auf
   jeder Breite — die Sonderregel für schmale Schirme ist damit entfallen.

   WARUM UMFLUSS STATT BLOCK: Ein Block belegt eine eigene Zeile samt Abständen,
   ein Umfluss teilt sich die Zeile mit dem Text. Auf dem Telefon entscheidet
   genau diese Höhe darüber, ob das Tafelfoto darunter noch ganz ins Bild passt
   oder mittendrin abgeschnitten erscheint. Das war Franks Anlass.

   Es löst zugleich eine ältere Zwickmühle: Stand der Bauer als Block unter dem
   Absatz, bestimmte die Länge der LETZTEN ZEILE, wie weit er vom Text entfernt
   WIRKT — bei 390 px reichte sie bis 99 % der Spalte, bei 640 px blieb dort nur
   ein Wort übrig und darüber klaffte eine leere Ecke. Kein fester Randwert kann
   beides bedienen. Umflossen legt der Browser die Figur an jeder Breite an den
   Text und reserviert dabei Platz — überdecken kann sie nichts. */

/* DIE DAME steht im Quelltext VOR der Überschrift und fliesst nach rechts.
   Dadurch bricht die Überschrift früher und die Figur sitzt IN der Kopfzeile
   statt darüber. Links oben stand sie zuvor genau unter dem Logo der Navileiste
   — zwei Zeichen übereinander, die nichts miteinander zu tun haben.
   Von 98 auf 78 px zurückgenommen (Frank: soll zum Bauern passen). Sie bleibt
   grösser als er; im Schachsatz ist sie das auch. */
.figur--dame{
  width:64px; float:right;
  /* Der Umfluss reserviert Platz für das UNGEDREHTE Kästchen. Um 7° gekippt ragt
     die Figur seitlich rund 4 px darüber hinaus — der schmale rechte Rand fängt
     das ab, sonst stünde sie über der Spaltenkante. */
  margin:.35rem 6px var(--space-4) var(--space-6);
  /* Kippt nach RECHTS (03.08.2026, vorher -7°). Sie fliesst nach rechts und
     lehnt sich damit vom Text WEG statt hinein. Zusammen mit dem nach links
     kippenden Bauern öffnet sich die Textspalte nach beiden Seiten. */
  transform:rotate(7deg);
}

/* DER BAUER fliesst nach LINKS und steht deshalb am ANFANG seines Absatzes (ein
   Umfluss wirkt nur auf das, was ihm folgt). Links, weil rechts das Tafelfoto
   beginnt: Dort stünde er dicht neben den rund dreissig kleinen Figuren auf dem
   Brett, zöge die Aufmerksamkeit auf sich und entwertete das Foto. Aus demselben
   Grund bleibt er deutlich kleiner als die Dame — je näher am Bild, desto
   kleiner. */
.figur--bauer{
  width:42px; float:left;
  /* Kippt nach LINKS (03.08.2026, vorher +8°) — er fliesst nach links und lehnt
     sich damit vom Text weg, spiegelbildlich zur Dame. */
  transform:rotate(-8deg);
  /* Der negative Fussrand ist Absicht (Frank 03.08.2026): Der Absatz umschliesst
     seine Figur (flow-root, siehe unten) und rechnet dabei deren Randkasten mit.
     Ein negativer Wert verkürzt genau diesen Kasten — die Figur schaut also um
     eben diesen Betrag unten aus dem Text heraus, und zwar KONTROLLIERT: Der
     Absatz weiss weiterhin, wie hoch er ist, und der Abstand zum nächsten Block
     bleibt gerechnet statt geschenkt. Ohne flow-root wäre der Ueberstand
     unbestimmt — so ist er eine Zahl. */
  margin:.35rem var(--space-6) -22px 6px;
}

/* Der Absatz muss seine Figur umschliessen — sonst wäre der Ueberstand oben
   nicht steuerbar, und der Abstand zum nächsten Block wäre geschenkt statt
   berechnet. Gemessen ragte der Bauer früher unkontrolliert 78 px heraus und
   stiess nur zufällig nicht ans Foto.
   Über :has statt über eine eigene Klasse, damit die Regel mitwandert, wenn die
   Figur einmal in einen anderen Absatz gesetzt wird. */
p:has(> .figur--bauer){ display:flow-root }

@media (prefers-reduced-motion:reduce){ .figur{transform:none} }

/* ---- Textseiten ohne Bildspalte ----
   Angelegt am 04.08.2026 für familienbetrieb.php, impressum.php und die noch
   folgende Datenschutzseite. Die Startseite lebt vom Zweispalter Text/Bild;
   reine Textseiten brauchen davon nichts.

   Bewusst WENIG: Zeilenbreite und Absatzabstände stehen längst in base.css
   (p und ul tragen dort schon max-width:var(--measure)). Ergänzt wird nur, was
   dort fehlt — der Ausgleich der Überschriftzeilen und die Luft zwischen den
   Blöcken einer langen Textseite. */
.seitenkopf h1{text-wrap:balance}
.fliess h2{margin-top:var(--space-12)}
.fliess > h2:first-child{margin-top:0}

/* Leisere Abschnittsüberschrift (04.08.2026, für „Übrigens" auf ueber-uns.php).
   Kleiner als die grossen Überschriften, aber sonst dieselbe Sprache: Hausschrift,
   Grün, Goldstrich.

   ERSTE FASSUNG WAR FALSCH, und das ist lehrreich: Ich hatte sie in der
   Fliessschrift, grau, ohne Strich gesetzt — mit der Begründung, „Übrigens" sei
   ein Bindewort und kein Titel. Der Kommentar behauptete gleichzeitig, es sei
   „der dritte GLEICHRANGIGE Teil". Beides zusammen ging nicht auf: Was gleichen
   Rang hat, darf nicht untergeordnet aussehen. Frank hat es am Bild gesehen —
   es wirkte wie eine Feldbeschriftung, nicht wie ein Abschnitt.

   Der Goldstrich ist der Rhythmus dieser Seite. Ihn für einen von drei Teilen
   wegzulassen, macht diesen Teil zum Anhängsel. Er kommt deshalb zurück, in
   voller Breite — ein Rhythmus, der bei jedem Vorkommen anders aussieht, ist
   keiner.

   Bleibt der Grad: rund drei Viertel der grossen Überschriften. Deutlich
   kleiner, weil ein einzelnes kurzes Wort keine 30 px braucht — aber erkennbar
   dieselbe Art von Sache.

   ⚠ Spezifität: „.fliess h2.h2--leiser" muss die Regeln oben schlagen, die
   Klasse PLUS Typ sind — eine reine Klasse würde überfahren. Dieselbe Falle wie
   beim Fussgruss und beim Navi-Knopf. */
.fliess h2.h2--leiser{
  font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  margin-top:var(--space-12);
}

/* Angabenliste für Impressum und Datenschutz. Eine Definitionsliste, kein
   Tabellen- und kein Absatzgebastel: „Registergericht — Amtsgericht Jena" ist
   genau ein Begriff mit einer Erläuterung, und Vorleseprogramme geben das Paar
   dann auch als Paar wieder. */
.angaben{max-width:var(--measure); margin:0 0 var(--space-8)}
.angaben dt{
  font-family:var(--font-sans); font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:var(--eyebrow-tracking);
  color:var(--ink-soft); margin-top:var(--space-5);
}
.angaben dt:first-child{margin-top:0}
.angaben dd{margin:var(--space-1) 0 0}

/* ---- Gekipptes Fragezeichen ----
   Angelegt am 03.08.2026 (Frank): „bitte französisch, das fragezeichen ein wenig
   absetzen. man könnte auch das fragezeichen ein wenig gestalten, zb kippen?“

   Der Abstand kommt aus dem Rand, NICHT aus einem Leerzeichen im Text. Ein echtes
   Leerzeichen wäre eine Umbruchstelle — am Zeilenende stünde das Fragezeichen dann
   allein auf der nächsten Zeile. Ein geschütztes Schmalleerzeichen ginge auch,
   wäre aber ein unsichtbares Sonderzeichen im Quelltext, das beim nächsten
   Textumbau spurlos verschwindet. Ein Element sieht man.

   Das Kippen braucht inline-block: Auf rein zeilenweise gesetzten Elementen wirkt
   transform nicht. Der Drehpunkt liegt dicht über der Grundlinie (50 % / 80 %),
   damit das Zeichen sich neigt statt vom Text wegzuwandern.

   Zehn Grad sind bewusst deutlich: Bei zwei oder drei Grad läse man es als
   Schriftfehler, nicht als Absicht. Und die Neigung geht nach links, ins Wort
   hinein — wie ein schräg gelegter Kopf. Der Rand fängt das wieder auf. */
.fragezeichen{
  display:inline-block;
  /* Größer als die Überschrift selbst (Frank 03.08.2026). Es SOLL herausragen —
     das Zeichen trägt hier die eigentliche Aussage des Abschnitts: Wir behaupten
     nichts, wir fragen.
     line-height:1 ist dabei nicht Kosmetik, sondern nötig: Ohne das zöge das
     größere Zeichen die ganze Zeile auseinander, und die Überschrift stünde
     lockerer als alle anderen auf der Seite.
     Der Rand wandert von .18 auf .1em, weil er sich auf die EIGENE Schriftgröße
     bezieht und sonst mitgewachsen wäre — das Zeichen soll abgesetzt stehen,
     nicht davonschweben. */
  font-size:1.3em;
  line-height:1;
  margin-left:.1em;
  transform:rotate(-10deg);
  transform-origin:50% 80%;
}

/* ---- Merksatz — der nachdenkliche Nachsatz eines Abschnitts ----
   Angelegt am 03.08.2026 (Frank): „vielleicht kursiv und in einer anderen
   Schriftart". Zweck ist nicht Schmuck, sondern eine Tonlage: Der Satz soll als
   Nachgedanke lesen, nicht als weitere Tatsache in der Reihe.

   Er wechselt dafür in die HAUSSCHRIFT — also in die Schrift der Überschriften,
   nicht in die des Fließtextes. Damit gehört er hörbar zur Stimme des Hauses und
   nicht zur Aufzählung darüber. Kursiv in 400: Der Schnitt liegt als echte Datei
   vor (sourceserif-400i.woff2), es wird also nichts vom Browser schräg gestellt —
   eine geneigte Serifenschrift aus dem Rechner sieht man sofort.

   Etwas größer als der Fließtext, aber leichter im Gewicht. Farbe --forest wie
   die Überschriften: Er soll sich klar absetzen, und zwar sichtbar ABSICHTLICH —
   im Unterschied zu den beiden Grautönen, die vorher versehentlich im Hero
   nebeneinanderstanden.

   Kein Anführungszeichen, keine Rahmenlinie: Es ist kein Zitat und kein Kasten,
   nur eine andere Stimme. Das trägt die Schrift allein. */
.merksatz{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.12rem,1.02rem + .4vw,1.32rem);
  line-height:1.5;
  color:var(--forest);
  max-width:var(--measure);
  margin-top:var(--space-6);
}

/* ---- Punkteliste mit Goldmarke (wiederverwendbares Muster) ---- */
.plist{list-style:none; padding:0; margin:var(--space-6) 0 0; max-width:var(--measure)}
.plist li{position:relative; padding-left:var(--space-6); margin-bottom:var(--space-5)}
.plist li::before{
  content:""; position:absolute; left:0; top:.55em; width:10px; height:2px;
  background:var(--dawn); border-radius:2px;
}
.plist b{display:block; font-family:var(--font-sans); font-size:.95rem; color:var(--forest); margin-bottom:.15em}
.plist span{font-size:.95rem; color:var(--ink-soft)}

/* ---- Splitzeile Bild ↔ Text ---- */
.split{display:grid; gap:var(--space-10); align-items:center}
/* .split__media ist ein <figure>. Browser geben dem von Haus aus 40px Rand
   links und rechts — auf 360px Breite frisst das ein Viertel des Bildes. */
.split__media{margin:0}
.split__media figcaption{color:var(--ink-soft)}
/* Seit 30.07.2026 OHNE Seitenwechsel. Das abwechselnde Zickzack („mal Bild
   links, mal rechts“) brachte wenig ein: Auf schmalen Schirmen ist es unsichtbar,
   weil alles einspaltig wird, und auf breiten lässt es das Auge hin und her
   springen. Jetzt steht der Text immer links, das Bild immer rechts — dieselbe
   Ordnung wie im Hero. Abwechslung kommt aus dem Bildformat, nicht aus der Seite.

   Der Text steht dafür im MARKUP vor dem Bild — dann stimmt die Reihenfolge auf
   beiden Bildschirmgrößen ohne CSS-Kunstgriff. Vorher lag das Bild zuerst, und
   einspaltig trafen dadurch das Hero-Bild und das Bild des ersten Abschnitts
   unmittelbar aufeinander (am 30.07.2026 nachgemessen: Lücke 0 px). Jetzt
   beginnt jeder Block mit Goldstrich und Überschrift — das ist die Abgrenzung. */
/* Dasselbe Raster wie im Hero — gleiche Spalten, dieselbe Lücke — und derselbe
   Umbruchpunkt (56rem statt vorher 52rem), damit nicht zwischendurch der Hero
   einspaltig steht, während die Abschnitte schon zweispaltig sind.
   Beide Regeln hängen bewusst an denselben Werten: Das Auseinanderdriften zweier
   getrennt gepflegter Raster war genau der Fehler, den das gemeinsame Maß am
   30.07.2026 beheben sollte. */
@media (min-width:56rem){
  .split{grid-template-columns:1fr 1fr; column-gap:var(--raster-spalt)}

  /* Hochformatige Motive bekommen DIESELBE Spalte, füllen sie aber nicht aus.
     Sonst würde der Adventskalender auf 576px Breite und damit rund 750px Höhe
     aufgeblasen. Links an der Rasterkante ausgerichtet bleibt die gemeinsame
     Achse durchgehend — ein schmaleres Hochformat liest sich als Absicht,
     nicht als Ausreißer.

     ZENTRIEREN WURDE AM 04.08.2026 GEPRÜFT UND VERWORFEN. Gemessen bei 1280px
     Inhaltsbreite: Alle drei Bilder haben ihre linke Kante bei 704. Zentriert
     rückte das Hochformat um 73px ein und läge dann an KEINER Linie mehr —
     73px rechts der gemeinsamen Achse und 73px links der rechten Kante der
     beiden Bilder darüber. Dahinter das allgemeine Gesetz: Das Auge nimmt
     Kanten wahr, keine Mitten. Eine gemeinsame Mitte zwischen verschieden
     breiten Objekten ist eine rechnerische Größe, keine sichtbare.

     GEPARKTE IDEE (Frank, 04.08.2026), falls die Leere rechts irgendwann doch
     stört: das Hochformat auf eine leicht getönte Fläche in den MASSEN DER
     BILDER DARÜBER setzen (also volle 576px). Das ist die eigentlich richtige
     Lösung für „Objekt kleiner als sein Platz" — die Fläche stellt beide Kanten
     wieder her, und der leere Raum wird von einem Loch zur Umgebung; das Bild
     wirkt gerahmt statt zu kurz geraten.
     Bewusst NICHT umgesetzt: Frank wollte es vorerst so lassen. Wer es angeht,
     denke an den Farbton — --mist oder --sand, nicht --hero-grund, sonst
     verwechselt man die Fläche mit dem Kopfband. */
  .split--hoch .split__media{max-width:430px; justify-self:start}
}

/* ---- Schlussband (dunkel, mit Lichthauch) ---- */
.endband{position:relative; overflow:hidden; background:var(--forest-deep); color:var(--on-dark); border-radius:var(--radius-lg); padding:var(--space-16) var(--space-8)}
.endband::before{
  content:""; position:absolute; left:50%; top:100%; width:min(900px,120%); aspect-ratio:2/1; transform:translate(-50%,-58%);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--dawn) 30%, transparent), transparent 70%);
  pointer-events:none;
}
.endband > *{position:relative}
.endband h2{color:var(--on-dark)}
.endband p{color:var(--on-dark-soft)}
.endband .eyebrow{color:var(--dawn)}
.btn--dawn{background:var(--dawn); color:var(--forest-deep)}
.btn--dawn:hover{background:color-mix(in srgb, var(--dawn) 84%, #000); color:var(--forest-deep)}
.btn--onDark{background:transparent; color:var(--on-dark); border-color:color-mix(in srgb, var(--on-dark) 45%, transparent)}
.btn--onDark:hover{background:color-mix(in srgb, var(--on-dark) 12%, transparent); color:var(--on-dark)}

/* ---- Anmeldung (interner Bereich) ---- */
.anmeldung{max-width:26rem; margin-inline:auto}
.anmeldung h1{font-size:clamp(1.7rem,1.4rem + 1.4vw,2.2rem); margin-bottom:var(--space-3)}
.anmeldung__lede{color:var(--ink-soft); margin-bottom:var(--space-8)}
.anmeldung__form{display:flex; flex-direction:column; gap:var(--space-5)}
.feld{display:flex; flex-direction:column; gap:var(--space-2)}
.feld label{font-family:var(--font-sans); font-size:.88rem; font-weight:600; color:var(--forest)}
.feld input{
  font:inherit; font-family:var(--font-sans); font-size:1rem;
  min-height:var(--tap-target); padding:.6rem .8rem;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-md);
}
.feld input:focus-visible{border-color:var(--forest-soft); outline:2px solid var(--forest-soft); outline-offset:1px}
/* Gesperrt, weil noch keine Anmeldelogik dahintersteht — sichtbar gesperrt,
   nicht heimlich wirkungslos. */
.feld input:disabled, .anmeldung__form .btn:disabled{
  background:var(--mist); color:var(--ink-soft); cursor:not-allowed;
}
.anmeldung__form .btn:disabled:hover{background:var(--mist); color:var(--ink-soft); border-color:var(--line)}

/* ---- Kontaktformular (04.08.2026) ----
   Baut auf .feld auf, das für die Anmeldeseite schon existierte. Ergänzt wird
   nur, was dort fehlte: das Textfeld, die Fehlerzeile und der Honigtopf. */
.kform{display:flex; flex-direction:column; gap:var(--space-6); max-width:var(--measure)}
.feld textarea{
  font:inherit; font-family:var(--font-sans); font-size:1rem; line-height:1.55;
  padding:.6rem .8rem; resize:vertical;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius-md);
}
.feld textarea:focus-visible{border-color:var(--forest-soft); outline:2px solid var(--forest-soft); outline-offset:1px}
/* Fehlerhafte Felder tragen einen roten Rahmen ZUSÄTZLICH zur Textmeldung —
   Farbe allein darf nie die einzige Auskunft sein (WCAG 1.4.1). */
.feld [aria-invalid="true"]{border-color:var(--signal-red-deep)}
.feld__fehler{margin:0; font-size:.85rem; color:var(--signal-red-deep); max-width:none}
.kform__hinweis{margin:0; max-width:none}

/* Offene Stelle im Text markieren — auf der Datenschutzseite fehlt eine Angabe,
   die nur der Hoster liefern kann. Sichtbar, damit sie nicht vergessen wird,
   aber ohne Alarmfarbe: Es ist eine Lücke, kein Fehler.
   ⚠ Muss vor dem Livegang verschwinden. Steht in docs/VOR-LIVEGANG.md. */
.hinweis-inline{
  border-left:3px solid var(--dawn); padding-left:var(--space-4);
  color:var(--ink-soft); font-size:.92rem;
}

/* DER HONIGTOPF. Nicht display:none — manche Skripte prüfen genau darauf und
   überspringen dann versteckte Felder. Stattdessen aus dem Sichtfeld geschoben:
   für das Skript ein normales Feld, für den Menschen unsichtbar.
   Zugänglichkeit steckt im HTML (aria-hidden, tabindex="-1"), nicht hier —
   sonst könnte man die Falle für Tastaturnutzer scharf machen, ohne es zu
   merken. */
.kform__topf{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; white-space:nowrap;
}

/* ---- Hinweiskästen (Erfolg, Warnung) ---- */
.hinweis{
  max-width:var(--measure); margin:0 0 var(--space-8);
  padding:var(--space-5) var(--space-6);
  border-radius:var(--bild-radius); border:1px solid var(--line);
}
.hinweis p{margin:0; max-width:none}
.hinweis h2{margin:0 0 var(--space-2); font-size:1.35rem}
.hinweis + form{margin-top:0}
.hinweis--gut{background:var(--green-mist); border-color:color-mix(in srgb, var(--signal-green-deep) 30%, transparent)}
/* „Warnung" statt „Fehler": Der häufigste Fall ist nicht Schuld des Besuchers,
   sondern ein gescheiterter Versand. Rot wäre ein Vorwurf. */
.hinweis--warnung{background:var(--warn-bg); border-color:color-mix(in srgb, var(--warn-ink) 30%, transparent)}
.hinweis--warnung p{color:var(--warn-ink)}

/* Der Absatz, der die nächste Handlung trägt — bisher nur der Weg zurück zur
   Startseite nach dem Absenden (19.08.2026).
   ⚠ Die Auswahl lautet „.hinweis p.hinweis__tat" und nicht bloß „.hinweis__tat".
   Zwei Zeilen höher steht „.hinweis p{margin:0}", und das ist Klasse PLUS Typ.
   Eine nackte Klasse verlöre dagegen, der Abstand käme nicht an. Dieselbe Falle
   hat in diesem Projekt schon viermal zugeschlagen (.foot p, .nav__links a,
   .fliess h2) — deshalb hier ausdrücklich vermerkt. */
.hinweis p.hinweis__tat{margin-top:var(--space-5)}

/* ---- Fuß: dunkelgrüner Sockel ----
   Umgefärbt am 03.08.2026 (Frank), zunächst zum Anschauen. Vorher war der Fuß
   weiß mit einer Haarlinie oben.

   Der Farbwechsel ALLEIN genügt nicht — alle Textfarben mussten mit, sonst stünde
   Dunkelgrau auf Dunkelgrün. Betroffen waren fünf Stellen: p, h2, a, a:hover und
   die Fußleiste. Der Verweis-Hoverzustand war der heikelste: Er stand auf
   --forest, also grün auf grün — praktisch unsichtbar.

   Die obere Haarlinie ist entfallen. Auf dunklem Grund wäre der helle Strich eine
   leuchtende Kante gewesen; die Grenze zieht jetzt der Farbwechsel selbst, und
   der ist deutlicher als jede Linie. Der Abstand von oben bleibt, er liegt als
   Rand AUSSERHALB der Fläche — die weiße Seite läuft also aus, dann beginnt der
   Sockel.

   ⚠ DIE SONNE: Der Fuß war bis heute ohne Hintergrund, die fest verankerte Sonne
   schien also durch ihn hindurch. Mit einer deckenden Fläche ist das vorbei —
   ausgerechnet am Seitenende, wo sie am höchsten steht. Will man sie behalten,
   muss sie VOR den Fuß (z-index), nicht dahinter. Gold auf Tiefgrün ist das
   Farbpaar des Logos; das wäre eher ein Gewinn als ein Zugeständnis. */
.foot{
  background:var(--forest-deep); color:var(--on-dark);
  margin-top:var(--space-24); padding-block:var(--space-12) var(--space-8);
}
.foot__grid{display:grid; gap:var(--space-8); grid-template-columns:1fr}
@media (min-width:48rem){ .foot__grid{grid-template-columns:1.4fr 1fr 1fr} }
.foot__brand img{height:28px; width:auto; margin-bottom:var(--space-4)}
.foot p{margin:0 0 var(--space-2); font-size:.88rem; color:var(--on-dark-soft); max-width:34ch}
/* h2 statt h5: Der Fuß begann bei h5, dadurch sprang die Gliederung auf login.php
   von h1 direkt auf h5. Optisch bleibt es die kleine Rubrikzeile.
   Die Rubrikzeilen tragen jetzt das Gold des Sonnenaufgangs — auf Dunkel ist das
   der Akzent des Hauses, so wie --forest es auf Hell war. */
.foot h2{margin:0 0 var(--space-3); font-family:var(--font-sans); font-size:.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:var(--eyebrow-tracking); color:var(--dawn)}
/* ---- Der plattdeutsche Gruß im Fuß (04.08.2026) ----
   „Kiik moll ann" ist kein Kalauer, sondern Herkunft: Die Familie ist
   norddeutsch, Gera ist der Arbeitsort. Der Satz ist also das Augenzwinkern
   AUS einer Heimat heraus, nicht über eine fremde — das ist der Unterschied
   zwischen Marke und Masche, und er entscheidet auch über die Gestaltung.

   Er trägt das Gold des Sonnenaufgangs: auf dem dunklen Sockel die Farbe, die
   den Blick holt, und die Verbindung zum Zeichen des Hauses.

   GRÖSSE am 04.08.2026 zurückgenommen, von 1,55 auf 1,15rem Höchstwert (Frank:
   „weniger penetrant … es soll nur den wirklich interessierten leser
   begegnen"). Das ist eine Haltung, keine Zahl: Ein Gruß, der sich aufdrängt,
   ist keiner mehr. Jetzt liegt er nur noch wenig über dem Fließtext des Fußes
   (14 px) — nah genug, um ruhig zu wirken, weit genug, um aufzufallen, wenn man
   hinsieht.

   SCHRIFT: die kursive Hausschrift, und das ist seit dem 04.08.2026 die
   ENDGÜLTIGE Lösung, kein Notbehelf. Frank hatte zuerst Schreibschrift
   gewünscht; die hätte eine zusätzliche Schriftdatei gebraucht, und dagegen
   steht die Entscheidung „nur die bislang gehosteten Schriftarten, nichts
   Neues". Der Grund ist gut: Jede weitere Datei kostet Ladezeit, und der
   Verzicht auf Fremdquellen ist eines der Versprechen dieser Seite.
   Also NICHT als offene Baustelle lesen — hier ist nichts nachzuholen.

   letter-spacing leicht geöffnet: Kursive Serifenschrift läuft eng, und der
   Satz soll gelassen wirken, nicht gedrängt.

   ⚠ SPEZIFITÄT: „.foot p.platt“, nicht „.platt“. Die Regel .foot p weiter unten
   ist Klasse PLUS Typ (0,1,1) und schlägt eine reine Klasse (0,1,0) — eine
   einfache .platt-Regel wird komplett überfahren, ohne dass etwas kaputtgeht:
   Der Satz erscheint einfach in Grau und 14 px, als hätte man nichts geschrieben.
   Genau das ist am 04.08.2026 passiert und nur aufgefallen, weil nachgemessen
   wurde. Dieselbe Falle gab es schon beim Navi-Knopf und beim Anmelde-Symbol —
   es ist das dritte Mal in diesem Projekt. */
.foot p.platt{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1rem,.95rem + .3vw,1.15rem);
  line-height:1.3;
  letter-spacing:.01em;
  color:var(--dawn);
  margin:var(--space-5) 0 0;
}
/* Der Nachsatz bleibt bewusst leise und in der Fließschrift: Erst der Zuruf,
   dann die Tatsache. Zwei Stimmen, nicht eine doppelt.
   Auch hier .foot p.… — sonst überschriebe .foot p den Randwert. */
.foot p.platt__nach{margin:var(--space-1) 0 0}

.foot ul{list-style:none; padding:0; margin:0}
.foot li{margin-bottom:var(--space-2)}
.foot a{font-size:.88rem; color:var(--on-dark); text-decoration:none}
.foot a:hover{color:var(--dawn); text-decoration:underline; text-underline-offset:.2em}
.foot__base{margin-top:var(--space-10); padding-top:var(--space-5);
  border-top:1px solid color-mix(in srgb, var(--on-dark) 20%, transparent);
  display:flex; gap:var(--space-4); justify-content:space-between; flex-wrap:wrap;
  font-size:.8rem; color:var(--on-dark-soft)}

/* ============================================================
   CHRONIK / ZEITSTRAHL
   Mobil: Linie links, Jahr über dem Titel.
   Ab 56rem: Jahr in einer eigenen Spalte links der Linie.
   ============================================================ */
.chronik{position:relative; margin-top:var(--space-16)}
.chronik::before{                      /* die durchgehende Linie */
  content:""; position:absolute; left:6px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(var(--line) 0%, var(--line) 88%, transparent 100%);
}
.knoten{position:relative; padding-left:34px; margin-bottom:var(--space-16)}
.knoten:last-child{margin-bottom:0}
.knoten::before{                        /* der Punkt auf der Linie */
  content:""; position:absolute; left:0; top:6px; width:14px; height:14px;
  border-radius:50%; background:var(--dawn);
  border:3px solid var(--page); box-sizing:border-box;
}
.knoten--bruch::before{background:var(--page); border-color:var(--forest-soft)}   /* hohl = Einschnitt */
.knoten--heute::before{background:var(--teal); box-shadow:0 0 0 5px color-mix(in srgb, var(--teal) 18%, transparent)}

.knoten__zeit{
  font-family:var(--font-sans); font-size:.78rem; font-weight:700;
  letter-spacing:var(--eyebrow-tracking); text-transform:uppercase;
  color:var(--teal-deep); margin:0 0 var(--space-2);
}
.knoten h3{
  font-family:var(--font-display); font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);
  font-weight:600; color:var(--forest); margin:0 0 var(--space-3); letter-spacing:-.008em;
}
.knoten p{margin:0 0 var(--space-3); color:var(--ink-soft)}
.knoten p:last-child{margin-bottom:0}
.knoten__quelle{font-size:.8rem; color:var(--ink-soft); margin-top:var(--space-3)}
.knoten__quelle::before{content:"Quelle: "; font-weight:600; color:var(--forest)}

/* Glanzpunkte heben sich als ruhige Karte ab */
.knoten--glanz .knoten__inhalt{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-card);
}
.knoten--heute .knoten__inhalt{
  background:var(--mist); border-radius:var(--radius-lg); padding:var(--space-6);
}

/* Bild im Knoten: schmal halten, damit Hochformate nicht die Seite sprengen */
.knoten__bild{margin:var(--space-5) 0 0; max-width:420px}
.knoten__bild figcaption{
  font-size:.8rem; color:var(--ink-soft); margin-top:var(--space-3); line-height:1.5;
}
.knoten__bild figcaption a{color:var(--teal-deep)}

@media (min-width:56rem){
  .chronik::before{left:186px}
  .knoten{padding-left:214px; min-height:2.2rem}
  .knoten::before{left:180px}
  .knoten__zeit{
    position:absolute; left:0; top:.15rem; width:160px;
    text-align:right; margin:0;
  }
}

/* ---- Einblenden beim Scrollen: am 30.07.2026 AUSGEBAUT ----
   Sieben Abschnitte blendeten beim Erreichen ein, 0,8 s, 16 px Versatz. Raus,
   aus vier Gründen:
     · Es verzögerte genau das, wofür der Nutzer gescrollt hat.
     · Es erzeugte eine eigene Fehlerklasse — ohne JavaScript war die halbe
       Seite unsichtbar; dafür brauchte es die .js-Marke und ein Sicherheitsnetz.
     · Weil prefers-reduced-motion es abschalten muss, durfte nie Information
       daran hängen: reine Zutat.
     · Die Seite hat bereits EINE Bewegung, und die bedeutet etwas — die Sonne
       steigt beim Scrollen. Sieben nichtssagende Überblendungen daneben
       verwässern sie. Eine Seite, eine Bewegung.
   Der Beobachter in assets/js/main.js ist mit ausgebaut. */

/* ============================================================================
   FLACHE FENSTER: Telefon im Querformat (05.08.2026)
   Frank: „wenn man das handy quer hält, wirkt alles wuchtig."

   ⚠ DIESER BLOCK MUSS AM ENDE DER DATEI STEHEN. Media Queries erhöhen die
   Spezifität NICHT — bei gleicher Spezifität entscheidet allein die Reihenfolge
   im Quelltext. Stand er weiter oben (erster Versuch am 05.08.2026), verloren
   „.hero h1" und „.hero__inner p" gegen ihre eigenen Grundregeln weiter unten
   und wirkten überhaupt nicht.
   Schlimmer noch, und deshalb steht die Warnung hier: Beim Foto griff nur EIN
   Teil. „max-height" hatte keinen Gegenspieler und wirkte, „width:auto" verlor
   gegen „width:min(560px,92vw)". Die Breite blieb also bei 560 px, die Höhe
   wurde auf 197 gequetscht — das Bild war nachgemessen um 89 % GESTAUCHT.
   Eine halb greifende Regel ist gefährlicher als eine, die gar nicht greift:
   Letztere fällt auf, erstere sieht nur ein bisschen falsch aus.

   DIE URSACHE DES EIGENTLICHEN PROBLEMS ist grundsätzlich und kein einzelner
   Wert: Jede fließende Größe in diesem Projekt hängt an der BREITE — clamp(…vw),
   min(…vw), 92vw. Im Querformat ist die Breite großzügig und die Höhe knapp.
   Alles wächst also genau dann, wenn am wenigsten Platz ist.
   Gemessen bei 880 × 340: Das Hero-Foto war 560 × 373 px, also 110 % der
   Fensterhöhe — es passte allein nicht aufs Bild. Die Überschrift stand auf
   44,9 px, der ganze Hero war 835 px hoch.

   DIE ABHILFE HÄNGT DESHALB AN DER HÖHE. Ein Umbruchpunkt auf max-width hätte
   hier nichts gefunden: 880 px sind für eine Breitenregel ein großer Schirm.
   Hochformatgeräte sind nicht betroffen — ein Telefon im Hochformat ist 800 px
   und mehr hoch und fällt nicht unter 30rem.
   ============================================================================ */
@media (max-height:30rem){
  /* Kopf so flach wie im Kompaktzustand, unabhängig von der Fensterbreite —
     89 px wären auf 340 px Höhe ein Viertel des Bildschirms. */
  .nav__inner{min-height:56px}
  .nav__brand img{height:26px}

  .hero{padding-block:var(--space-4) var(--space-6)}
  .hero__inner{gap:var(--space-5)}

  /* Überschriften: der vw-Anteil ist hier das Problem, deshalb ein enger
     Deckel. Aus 44,9 px werden rund 30. */
  .hero h1{font-size:clamp(1.5rem,1.1rem + 1.2vw,1.9rem)}
  main .section h2{font-size:clamp(1.3rem,1rem + 1vw,1.6rem)}
  main .section h2::before{margin-bottom:var(--space-3)}

  /* Fließtext eine Stufe zurück: Auf einem so flachen Schirm zählt, wie viele
     Zeilen ins Bild passen, mehr als der Schriftgrad. 17 px bleiben bequem. */
  .hero__inner p{font-size:1.06rem}

  /* DER LESETEXT GEHÖRT MIT DAZU, und es ist dieselbe Ursache wie oben:
     base.css schaltet bei min-width:48rem von 17 auf 18 px. Ein quer gehaltenes
     Telefon ist 880 px breit und überschreitet diese Schwelle — dasselbe Gerät
     zeigte den Lesetext hochkant also KLEINER als querkant, wo weniger Platz
     ist. Hier zurück auf 17 px: gleiches Gerät, gleiche Lesegröße, egal wie man
     es hält. Nebenbei stimmt damit auch die Rangfolge wieder, denn der
     Hero-Vorspann daneben steht auf 16,96 px.
     Wirkt nur, weil components.css NACH base.css geladen wird (partials/head.php).
     Sichtbar wird es vor allem auf den Textseiten — Über uns, Datenschutz,
     Impressum —, wo der Fließtext den Schirm füllt. */
  body{font-size:17px}

  /* BILDER AN DER HÖHE BEGRENZEN statt an der Breite — der Kern des Ganzen.
     width:auto ist dabei nicht Beiwerk, sondern Bedingung: Ohne es bleibt die
     Breitenvorgabe stehen und max-height staucht das Bild (siehe Warnung oben).
     height:auto sichert das Seitenverhältnis zusätzlich ab. */
  .hero__foto img{width:auto; height:auto; max-width:100%; max-height:58vh}
  .ph-img{width:auto; height:auto; max-width:100%; max-height:58vh}
  .split--hoch .split__media{max-width:none}

  /* Abschnitte brauchen weniger Luft, wenn ohnehin gescrollt werden muss. */
  .section{padding-block:var(--space-10)}
  .section--tight{padding-block:var(--space-8)}
}

@media (prefers-reduced-motion:reduce){
  .hero__mark .sun, .hero__mark .rays path{animation:none; opacity:1; transform:none}
  .tile:hover{transform:none}
  .nav, .nav__inner, .nav__brand img, .nav__menue, .nav__balken{transition:none}
  .js .hero__foto{opacity:1; transform:none; animation:none}
  /* Die Ausnahme für die Sonne ist am 03.08.2026 entfallen: Sie steht seit dem
     statisch im Fuß und bewegt sich in keinem Zustand mehr. Eine Regel, die
     Bewegung abschaltet, die es nicht gibt, führt nur in die Irre. */
}