/* ==========================================================================
   Tischlerei Roch, Stolpen OT Langenwolmsdorf — Stylesheet
   Richtung: Kernholz und Schlagschnur. Der Grund ist geöltes dunkles Holz,
   die helle Fläche das Splintholz. Als einziger Akzent ein Moosgrün — der
   Ton, den gewachsenes Holz im Freien annimmt. Er sitzt ruhig neben dem
   Kernholz und vermeidet den warmen Ocker, in den jede zweite
   Handwerkerseite läuft. (Bis 28.07.2026 stand hier das Blau der
   Schlagschnur; der Wechsel auf Grün/Braun war eine Vorgabe.)
   Display: Fraunces (weicher, leicht eigenwilliger Serif — 130 Jahre Handwerk,
   keine Systemschrift). Fließtext: Public Sans. Maße: Martian Mono.
   ========================================================================== */

@font-face { font-family: 'Fraunces'; src: url('schrift/fraunces-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('schrift/fraunces-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('schrift/public-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('schrift/public-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('schrift/public-sans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('schrift/martian-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('schrift/martian-mono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --kern:       #241A14;   /* Grund: geöltes Kernholz */
  --kern-hell:  #2F231B;   /* Grundton ALLER dunklen Flaechen (28.07.2026:
                              vereinheitlicht auf den Ton der Fusszeile;
                              vorher lief der Koerper auf dem dunkleren
                              --kern und die Fusszeile setzte sich ab) */
  --splint:     #EDE7DC;   /* helle Flächen / Schrift auf dunkel */
  --splint-mit: #B0A597;   /* Sekundär auf dunkel — 6,9:1 */
  --tinte:      #1C1410;
  --tinte-mit:  #5C5147;   /* Sekundär auf hell — 6,1:1 */
  /* Akzent: Moosgruen statt des urspruenglichen Schlagschnur-Blaus
     (28.07.2026). Der Farbton (95 Grad) hat einen leichten Gelbstich und
     sitzt damit ruhig neben dem geoelten Kernholz; ein reines Gruen wirkte
     daneben grasig. Die Saettigung ist bewusst zurueckgenommen.
     Beide Werte tragen exakt denselben Kontrast wie das Blau zuvor —
     die Lesbarkeit aendert sich durch den Wechsel nicht. */
  --schnur:     #85A86B;   /* Moosgruen auf dunkel — 6,3:1 */
  --schnur-tief:#3F5431;   /* Moosgruen auf hell  — 6,8:1 */
  --linie:      #3E2E24;
  --linie-hell: #D4CCBF;

  /* Holzoptik der braunen Flaechen (28.07.2026).
     Die Maserung entsteht aus feTurbulence, in y stark gestreckt — daraus
     werden lange Fasern statt Rauschen. Entsaettigt und auf schwache Deckung
     gebracht, damit der Grundton unveraendert durchkommt und der Text nicht
     leidet: gemessen aendert sich der Kontrast um weniger als 0,2 Stufen.
     Dazu angedeutete Brettfugen alle 218 px.
     Inline als Daten-URI — keine externe Datei, kein zusaetzlicher Abruf. */
  --holz-fasern: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520'><filter id='h'><feTurbulence type='fractalNoise' baseFrequency='0.25 0.004' numOctaves='5' seed='9' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='0.26' intercept='-0.14'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23h)'/></svg>");
  --holz-fugen: repeating-linear-gradient(90deg,
      transparent 0 218px, rgba(0,0,0,.20) 218px 219px,
      rgba(255,255,255,.030) 219px 221px, transparent 221px 240px);
  --holz: var(--holz-fugen), var(--holz-fasern);

  --display: 'Fraunces', Georgia, serif;
  --text:    'Public Sans', system-ui, sans-serif;
  --mono:    'Martian Mono', ui-monospace, monospace;

  --rand:   clamp(20px, 5vw, 56px);
  --breite: 1180px;
  --luft:   clamp(56px, 8vw, 108px);

  /* Eine einzige Hervorhebungsfarbe. Sie kippt mit dem Untergrund, nicht mit
     dem Baustein — dadurch liegen alle betonten Worte, Zahlen und Etiketten
     auf derselben Ebene statt jede Sektion ihre eigene Mischung zu fahren. */
  --hebung: var(--schnur);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background-color: var(--kern-hell); background-image: var(--holz);
  color: var(--splint);
  font-family: var(--text); font-size: 1.0625rem; line-height: 1.66; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--schnur); outline-offset: 3px; }
.hell :focus-visible { outline-color: var(--schnur-tief); }
[id] { scroll-margin-top: 86px; }

.springlink { position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--schnur); color: var(--kern); padding: 10px 18px;
  text-decoration: none; font-family: var(--mono); font-size: .75rem; transition: top .16s; }
.springlink:focus { top: 12px; }

/* --- Typografie ----------------------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.04;
  letter-spacing: -.015em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.1rem, 2.1vw, 1.35rem); font-weight: 700; }
p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; }

/* Umbrüche. Überschriften auf gleich lange Zeilen ziehen, Absätze ohne
   einzelnes Schlusswort setzen. Deutsche Komposita (Holzbearbeitungsmaschine,
   Ladeneinrichtung) trennen — sonst sprengen sie auf 320px die Zeile; die
   Trennung greift nur, weil <html lang="de"> gesetzt ist. Überschriften, Marke
   und Kennzahlen bleiben ungetrennt, dort wäre ein Trennstrich ein Fehler. */
p, li, dd, figcaption { text-wrap: pretty; }
p, li, dd, figcaption, .prosa, .vorspann { hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 9 4 4; }
h1, h2, h3, .bar__marke, .fuss__marke, .grossruf, .zahl b, .daten dd,
.mass, .held__kicker, .ringe__jahr { hyphens: manual; -webkit-hyphens: manual; }
:is(h1, h2, h3, p, li, dd) { overflow-wrap: break-word; }

.prosa { max-width: 64ch; }
.vorspann { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.55; max-width: 52ch; }
.leise { color: var(--splint-mit); }
.hell .leise, .fuss .leise { color: var(--tinte-mit); }
.fuss .leise { color: var(--splint-mit); }

/* ==========================================================================
   Hervorhebung — eine Ebene
   Vier Stufen, mehr gibt es nicht. Jede Stufe hat genau eine Ausprägung;
   welcher Baustein sie trägt, ändert nichts an Farbe, Schnitt oder Schrift.
     1 Rubrik     Mono 500 · .75rem · +.08em · VERSAL · Akzent
     2 Datenwert  Mono 500 · Akzent · Ziffern auf gleicher Breite
     3 Betonung   Textschrift 600 · Akzent  (im Fließtext, kein Schriftwechsel)
     4 Kennzahl   Display · groß · Splint/Tinte (die Größe trägt, nicht die Farbe)
   ========================================================================== */
.hell { --hebung: var(--schnur-tief); }
/* Helle Kästen liegen im dunklen Abschnitt und erben sonst den hellen Akzent */
.karte__hinweis, .hell .karten li { --hebung: var(--schnur-tief); }

/* 1 Rubrik */
.mass, .held__kicker, .fuss__titel, .daten dt {
  font-family: var(--mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; hyphens: manual; }
.mass, .held__kicker { color: var(--hebung); }

/* 2 Datenwert */
.ringe__jahr, .schritte .nr, .daten dd b, .karte__hinweis p b, .ringe__stand b {
  font-family: var(--mono); font-weight: 500; color: var(--hebung);
  font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* 3 Betonung im Fließtext */
.prosa b, .vorspann b, .karten p b, .ringe__satz b, .hinweis b {
  font-weight: 600; color: var(--hebung); }

/* --- Aufbau ---------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.band { padding-block: var(--luft); }
.band--schmal { padding-block: clamp(40px, 5.5vw, 72px); }
.hell { background: var(--splint); color: var(--tinte); }

/* --- Kopfzeile ------------------------------------------------------------- */
.bar { position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--kern-hell) 96%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); }
.bar__reihe { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.bar__marke { display: flex; align-items: baseline; gap: 8px; margin-right: auto;
  text-decoration: none; white-space: nowrap; padding: 9px 0;
  font-family: var(--display); font-weight: 900; font-size: 1.18rem; letter-spacing: -.015em; }
.bar__marke b { color: var(--schnur); font-weight: 900; }
.bar__marke span { font-family: var(--mono); font-weight: 400; font-size: .625rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--splint-mit); }
.bar__menue { display: none; gap: 20px; }
.bar__menue a { text-decoration: none; font-size: .9375rem; padding: 4px 0;
  border-bottom: 2px solid transparent; }
.bar__menue a:hover { border-bottom-color: var(--schnur); }
.bar__tel { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  text-decoration: none; font-family: var(--mono); font-size: .8125rem; font-weight: 500;
  background: var(--schnur); color: var(--kern); padding: 10px 16px; min-height: 44px;
  border-radius: 3px; }
.bar__tel:hover { background: var(--splint); }
.bar__tel-nr { display: none; }
.bar__knopf { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; cursor: pointer; border-radius: 3px;
  background: transparent; border: 1px solid var(--splint-mit); color: inherit; }
.bar__knopf svg { width: 20px; height: 20px; }
.bar__klapp { display: none; border-top: 1px solid var(--linie); padding: 14px 0 18px; }
.bar__klapp.ist-offen { display: block; }
.bar__klapp a { display: block; padding: 12px 0; text-decoration: none;
  border-bottom: 1px solid var(--linie); font-size: 1.0625rem; }
.bar__klapp a:last-child { border-bottom: 0; }
@media (max-width: 479px) { .bar__marke span { display: none; } .bar__reihe { gap: 8px; } }
/* Sehr schmale Geräte: Rufknopf nur als Icon — sonst drängt er den Hamburger
   aus der Zeile. Der Überlauf wäre durch overflow-x unsichtbar, das Menü aber
   unerreichbar. */
@media (max-width: 429px) {
  .bar__tel { padding: 10px 12px; }
  .bar__tel-wort { display: none; }
  .bar__marke { font-size: 1.02rem; }
}
@media (min-width: 1060px) {
  .bar__menue { display: flex; }
  .bar__knopf { display: none; }
  .bar__klapp { display: none !important; }
  .bar__tel-wort { display: none; }
  .bar__tel-nr { display: inline; }
}

/* --- Held ------------------------------------------------------------------ */
.held { padding-block: clamp(44px, 7vw, 88px) clamp(32px, 4vw, 56px); }
.held__kicker { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 20px; }
.held h1 { margin-bottom: .35em; max-width: 15ch; }
.held__aktion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 24px; max-width: 100%; border-radius: 3px;
  background: var(--schnur); color: var(--kern); border: 1px solid var(--schnur);
  text-decoration: none; font-weight: 600; font-size: 1rem;
  transition: background .16s, color .16s, border-color .16s; }
.knopf:hover { background: var(--splint); border-color: var(--splint); }
.knopf--klar { background: transparent; color: var(--splint); border-color: #5A483C; }
.knopf--klar:hover { background: var(--splint); color: var(--kern); border-color: var(--splint); }
.hell .knopf { background: var(--tinte); color: var(--splint); border-color: var(--tinte); }
.hell .knopf:hover { background: var(--schnur-tief); border-color: var(--schnur-tief); }
.hell .knopf--klar { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.hell .knopf--klar:hover { background: var(--tinte); color: var(--splint); }

.zahlen { display: flex; flex-wrap: wrap; gap: 10px 44px; margin-top: clamp(32px, 5vw, 52px);
  padding-top: 20px; border-top: 2px solid var(--schnur); }
.zahl { min-width: 132px; }
.zahl b { display: block; font-family: var(--display); font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; letter-spacing: -.02em; }
.zahl span { font-size: .8125rem; color: var(--splint-mit); }

/* --- Signatur: die Jahresringe --------------------------------------------
   Der Betrieb ist 1896 gegründet — er hat, wie der Stamm, für jedes Jahr
   einen Ring. Jede Jahreszahl der Firmengeschichte sitzt auf ihrem Ring; die
   Schlagschnur zeigt darauf. Die Zeitleiste IST die Grafik, nicht Beiwerk. */
.ringe { display: grid; gap: clamp(24px, 4vw, 44px); align-items: start; }
@media (min-width: 940px) { .ringe { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.ringe__stamm { position: sticky; top: 78px; }
.ringe__bild { width: 100%; height: auto; display: block; }
/* Auf schmalen Geräten muss der Stamm stehen bleiben, während die Jahre
   darunter durchlaufen — sonst wählt man eine Jahreszahl und sieht den Ring
   nicht. Ein sticky Rasterkind kann in einer einspaltigen Grid-Zeile nicht
   kleben (die Zeile ist nur so hoch wie es selbst), darum hier Blockfluss. */
@media (max-width: 939px) {
  .ringe { display: block; }
  .ringe__stamm { top: 62px; z-index: 5; background: var(--kern-hell);
    padding-block: 6px 10px; margin-bottom: 18px;
    border-bottom: 1px solid var(--linie); }
  .ringe__bild { width: auto; max-height: 40vh; margin-inline: auto; }
  .ringe__stand { margin-top: 8px; text-align: center; }
  /* Der Trennstrich des klebenden Stamms und die obere Linie der ersten
     Jahreszeile lägen sonst als Doppellinie übereinander. */
  .ringe__liste > li:first-child .ringe__zeile { border-top: 0; }
}
.jr-ring    { fill: none; stroke: #4A3728; stroke-width: 2.5; }
.jr-ring.ist-an { stroke: var(--schnur); stroke-width: 5; }
.jr-mark    { fill: #3A2A1F; }
.jr-schnur  { stroke: var(--schnur); stroke-width: 2; stroke-dasharray: 7 6; opacity: .8; }
.jr-punkt   { fill: var(--schnur); }
.jr-text    { font-family: 'Martian Mono', monospace; font-size: 15px; font-weight: 500;
              fill: var(--schnur); }
.jr-riss    { fill: none; stroke: #3A2A1F; stroke-width: 1.5; }

.ringe__stand { margin-top: 14px; font-size: .9375rem; color: var(--splint-mit); }

.ringe__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ringe__zeile { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 16px;
  padding: 14px 0; border-top: 1px solid var(--linie); align-items: baseline;
  width: 100%; text-align: left; background: transparent; border-inline: 0; border-bottom: 0;
  color: inherit; font: inherit; cursor: pointer; }
.ringe__zeile:last-child { border-bottom: 1px solid var(--linie); }
/* Hervorhebung muss sich vom Grund abheben — der ist jetzt selbst --kern-hell. */
.ringe__zeile:hover { background: #3A2C22; }
.ringe__zeile.ist-an { background: #3A2C22; }
.ringe__zeile.ist-an .ringe__jahr { color: var(--splint); }
.ringe__satz { margin: 0; font-size: .9375rem; color: var(--splint-mit); max-width: 56ch; }
.ringe__zeile.ist-an .ringe__satz { color: var(--splint); }

/* --- Leistungen ------------------------------------------------------------- */
.karten { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 680px)  { .karten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .karten--drei { grid-template-columns: repeat(3, 1fr); } }
.karten li { border: 1px solid var(--linie); border-radius: 4px;
  background-color: #3A2C22; background-image: var(--holz);
  padding: 20px; min-width: 0; }
.hell .karten li { border-color: var(--linie-hell); background: #FFFFFF; }
.karten .mass { display: block; margin-bottom: 8px; }
.karten h3 { margin-bottom: .4em; }
.karten p { font-size: .9375rem; color: var(--splint-mit); margin: 0; }
.hell .karten p { color: var(--tinte-mit); }

.liste { display: grid; gap: 2px; margin: 26px 0 0; padding: 0; list-style: none; }
.liste li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 4px 20px; padding: 16px 0; border-top: 1px solid var(--linie-hell); align-items: baseline; }
.liste li:last-child { border-bottom: 1px solid var(--linie-hell); }
.liste h3 { margin: 0; font-size: 1.08rem; }
.liste p { margin: 0; font-size: .9375rem; color: var(--tinte-mit); max-width: 60ch; }

/* --- Ablauf ------------------------------------------------------------------ */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.schritte li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 14px;
  padding: 18px 0; border-top: 1px solid var(--linie); align-items: baseline; }
.schritte li:last-child { border-bottom: 1px solid var(--linie); }
.hell .schritte li { border-color: var(--linie-hell); }
.schritte h3 { margin: 0; }
.schritte p { grid-column: 2; margin: 5px 0 0; font-size: .9375rem;
  color: var(--splint-mit); max-width: 58ch; }
.hell .schritte p { color: var(--tinte-mit); }

.hinweis { border: 2px solid var(--schnur); border-radius: 4px; padding: 20px 22px;
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center;
  justify-content: space-between; }
.hinweis p { margin: 0; max-width: 54ch; }

/* --- Daten --------------------------------------------------------------------- */
.daten { margin: 0; }
.daten > div { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
  gap: 4px 18px; padding: 13px 0; border-top: 1px solid var(--linie); align-items: baseline; }
.daten > div:last-child { border-bottom: 1px solid var(--linie); }
.daten dt { color: var(--splint-mit); }
.daten dd { margin: 0; overflow-wrap: anywhere; }
.daten dd a { display: inline-block; padding: 4px 0; }
.hell .daten > div { border-color: var(--linie-hell); }
.hell .daten dt { color: var(--tinte-mit); }

.grossruf { display: inline-block; text-decoration: none; padding: 7px 0;
  font-family: var(--display); font-weight: 900; letter-spacing: -.025em;
  font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.06; overflow-wrap: anywhere; }
.grossruf:hover { color: var(--schnur); }
.hell .grossruf:hover { color: var(--schnur-tief); }

/* --- Zwei Spalten: beide beginnen auf einer Höhe ---------------------------
   align-items:start setzt nur die Kästen bündig. Die erste Textzeile rutschte
   trotzdem ab, weil rechts eine Liste steht, deren erste Zeile ein eigenes
   Polster und eine Trennlinie mitbringt. Beides fällt für das erste Element
   einer Spalte weg — dann startet rechter Text auf der Grundlinie der Rubrik
   links. */
.paar { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .paar { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.paar > * > :first-child { margin-block-start: 0; }
.paar > :is(.schritte, .liste, .daten, .ringe__liste),
.paar > * > :is(.schritte, .liste, .daten, .ringe__liste):first-child { margin-block-start: 0; }
.paar > :is(.schritte, .liste, .daten, .ringe__liste) > :first-child,
.paar > * > :is(.schritte, .liste, .daten, .ringe__liste):first-child > :first-child {
  padding-top: 0; border-top: 0; }

/* --- Karte ---------------------------------------------------------------------- */
.karte { border: 1px solid var(--linie-hell); border-radius: 4px; background: #FFF;
  aspect-ratio: 4/3; display: grid; overflow: hidden; }
.karte iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Der Kasten ist weiß, der Abschnitt ringsum dunkel — ohne eigene Textfarbe
   erbt er die helle Schrift und wird unlesbar. */
.karte__hinweis { align-self: center; padding: clamp(20px, 4vw, 32px); color: var(--tinte); }
.karte__hinweis .leise { color: var(--tinte-mit); }
.karte__hinweis p { margin: 0 0 12px; max-width: 42ch; font-size: .9375rem; }
.karte__hinweis p:last-child { margin-bottom: 0; }
/* Der Route-Link im Kartenkasten ist Fließtext — ohne eigenes Polster ist er
   nur 17px hoch und damit unter der Antippgröße (WCAG 2.5.8: 24px). */
.karte__hinweis a { display: inline-block; padding: 5px 0; }

/* --- Referenzen ------------------------------------------------------------- */
@media (min-width: 700px)  { .karten--vier { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .karten--vier { grid-template-columns: repeat(4, 1fr); } }
.ref__raster li { padding: 0; overflow: hidden; }
.ref__bild { margin: 0; position: relative; aspect-ratio: 4 / 3; background: #241A14; }
/* height:auto ist Pflicht — sonst gewinnt das height-Attribut gegen
   aspect-ratio und das Bild wird verzerrt. */
.ref__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ref__marke {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinte);
  background: rgba(237,231,220,.82); padding: 3px 7px; border-radius: 2px;
}
.ref__raster .mass { display: block; margin: 16px 20px 6px; }
.ref__raster h3 { margin: 0 20px .4em; }
.ref__raster p  { margin: 0 20px 20px; }

/* --- Fußzeile ---------------------------------------------------------------------- */
.fuss { background-color: var(--kern-hell); background-image: var(--holz);
  color: var(--splint); border-top: 1px solid var(--linie);
  padding-block: clamp(40px, 6vw, 68px) 26px; }
.fuss__raster { display: grid; gap: 30px; }
@media (min-width: 780px) { .fuss__raster { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; } }
.fuss__marke { font-family: var(--display); font-weight: 900; font-size: 1.35rem;
  letter-spacing: -.015em; margin: 0 0 10px; }
.fuss__marke b { color: var(--schnur); }
.fuss__titel { color: var(--splint-mit); margin: 0 0 12px; }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .9375rem; }
.fuss__liste a { text-decoration: none; display: inline-block; padding: 6px 0; }
.fuss__liste a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fuss__unten { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 36px; padding-top: 20px;
  border-top: 1px solid var(--linie); font-size: .8125rem; color: var(--splint-mit); }
.fuss__unten a { color: var(--splint-mit); display: inline-block; padding: 6px 0; }

/* Startzustände setzt NUR JS (Editor-Sicherheit) */