/* ==========================================================================
   Baufirma Frank Hollbauer — Stylesheet
   Gestaltungsrichtung: Lageplan. Farben aus dem eigenen Material des Betriebs
   (Granit, Beton, Klinker-Ocker). Schriften selbst gehostet, keine externe
   Abhängigkeit. Ein einziger gestalteter Bewegungsmoment: der Lageplan.
   ========================================================================== */

/* --- Schriften ----------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('schrift/archivo.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('schrift/hanken-grotesk.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('schrift/dm-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('schrift/dm-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* --- Marken-Merkmale ----------------------------------------------------- */
:root {
  /* Farben: Granit, Beton, Klinker */
  --beton:       #E7E6E0;
  --beton-tief:  #D8D7D0;
  --kalk:        #F7F6F2;
  --granit:      #22272A;
  --granit-mit:  #545B5F;
  --ocker:       #C08A12;
  --ocker-tief:  #7A4E10;
  --linie:       #B9B8B1;

  /* Schrift */
  --schrift-display: 'Archivo', system-ui, sans-serif;
  --schrift-text:    'Hanken Grotesk', system-ui, sans-serif;
  --schrift-mass:    'DM Mono', ui-monospace, monospace;

  /* Maße */
  --rand:   clamp(20px, 5vw, 56px);
  --breite: 1180px;
  --luft:   clamp(56px, 8vw, 112px);

  /* 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(--ocker-tief);
}

/* --- Grundlagen ---------------------------------------------------------- */
*, *::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: var(--beton);
  color: var(--granit);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--ocker-tief);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Auf dunklem Grund trägt das tiefe Ocker nicht (2,1:1) — dort das helle. */
.sec--dunkel :focus-visible,
.fuss :focus-visible { outline-color: var(--ocker); }

[id] { scroll-margin-top: 84px; }

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

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

/* --- Typografie ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-stretch: 105%;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 8.2vw, 5.25rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: .95;
  letter-spacing: -0.028em;
}

h2 { font-size: clamp(1.7rem, 4.2vw, 2.6rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.3rem); font-stretch: 100%; letter-spacing: -0.005em; }

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 (Naturstein-Kleinpflaster,
   Landschaftsbau) 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, h4, .bar__marke, .fuss__marke, .grossruf, .daten dd,
.mass, .legende__name { hyphens: manual; -webkit-hyphens: manual; }
:is(h1, h2, h3, h4, p, li, dd) { overflow-wrap: break-word; }

.prosa { max-width: 66ch; }

.vorspann {
  font-size: clamp(1.1rem, 2.1vw, 1.35rem);
  line-height: 1.5;
  color: var(--granit);
  max-width: 46ch;
}

.leise { color: var(--granit-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     Maßschrift 500 · .8125rem · +.07em · VERSAL · Akzent
     2 Datenwert  Maßschrift 500 · Akzent · Ziffern auf gleicher Breite
     3 Betonung   Textschrift 600 · Akzent  (im Fließtext, kein Schriftwechsel)
     4 Kennzahl   Display · groß · Granit   (die Größe trägt, nicht die Farbe)
   ========================================================================== */
/* 1 Rubrik — Maßangabe/technische Beschriftung: hat eine Aufgabe, ist kein
   Kostüm. Zahlen, Positionsschlüssel, Telefonnummern. */
.mass, .daten dt, .fuss__titel {
  font-family: var(--schrift-mass);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  hyphens: manual;
}
.mass { color: var(--hebung); }

/* 2 Datenwert */
.schritt__nr, .arbeit b, .daten dd b, .karte__hinweis p b {
  font-family: var(--schrift-mass); font-weight: 500; color: var(--hebung);
  font-variant-numeric: tabular-nums; letter-spacing: 0; }

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

/* --- Aufbau -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sec { padding-block: var(--luft); }
.sec--schmal { padding-block: clamp(40px, 5.5vw, 72px); }
.sec--dunkel { background: var(--granit); color: var(--beton); }
.sec--kalk   { background: var(--kalk); }

/* Beide dunklen Flächen brauchen die Aufhellung — die Fußzeile ist keine
   .sec--dunkel, sonst steht dort Grau auf Granit (2,2:1). Dieselbe Fehlerklasse
   gilt für die Hervorhebung: sie kippt hier auf den hellen Ocker. */
.sec--dunkel .leise,
.fuss .leise { color: #9AA2A6; }
.sec--dunkel, .fuss { --hebung: var(--ocker); }
/* Helle Kästen im dunklen Abschnitt behalten den dunklen Akzent */
.sec--dunkel :is(.karte__hinweis, .arbeit) { --hebung: var(--ocker-tief); }

.strich {
  border: 0;
  border-top: 1px solid var(--linie);
  margin: 0;
}
.sec--dunkel .strich { border-top-color: #3A4145; }

/* --- Kopfzeile ----------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--beton) 97%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linie);
}

.bar__reihe {
  display: flex; align-items: center; gap: 16px;
  min-height: 62px;
}

.bar__marke {
  display: flex; align-items: baseline; gap: 9px;
  text-decoration: none; margin-right: auto; padding: 9px 0;
  font-family: var(--schrift-display);
  font-weight: 800; font-stretch: 112%;
  font-size: 1.0625rem; letter-spacing: -0.01em;
  white-space: nowrap;
}
.bar__marke span {
  font-family: var(--schrift-mass); font-weight: 400;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--granit-mit);
}

.bar__menue { display: none; gap: 26px; }
.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(--ocker); }
.bar__menue a[aria-current='page'] { border-bottom-color: var(--granit); font-weight: 600; }

.bar__tel {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; white-space: nowrap;
  font-family: var(--schrift-mass); font-size: .875rem; font-weight: 500;
  background: var(--granit); color: var(--beton);
  padding: 10px 16px; border-radius: 2px;
  min-height: 44px;
}
.bar__tel:hover { background: var(--ocker-tief); }
/* Auf schmalen Geräten nur „Anrufen" — die volle Nummer würde den
   Hamburger aus der Zeile drängen (der Überlauf wäre durch overflow-x
   unsichtbar, aber das Menü unerreichbar). */
.bar__tel-nr { display: none; }

.bar__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--granit-mit); border-radius: 2px;
  color: inherit; cursor: pointer;
}
.bar__knopf svg { width: 20px; height: 20px; }

.bar__klapp {
  display: none;
  padding-bottom: 18px;
  border-top: 1px solid var(--linie);
  padding-top: 14px;
}
.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; } }

/* Erst ab 1020px passen Menü UND volle Rufnummer nebeneinander in die Zeile. */
@media (min-width: 1020px) {
  .bar__menue { display: flex; }
  .bar__knopf { display: none; }
  .bar__klapp { display: none !important; }
  .bar__tel-wort { display: none; }
  .bar__tel-nr { display: inline; }
}

/* --- Hof: Held, Lageplan und Legende in EINEM Abschnitt -------------------
   Auf dem Desktop bleibt der Plan stehen, während die Legende daran
   vorbeiläuft. Getrennte Abschnitte hätten bedeutet, dass man die
   Hervorhebung im Plan beim Lesen der Legende nie zu sehen bekommt. */
.hof { padding-block: clamp(36px, 5vw, 72px) clamp(56px, 8vw, 112px); }
.hof__raster { display: grid; gap: clamp(32px, 5vw, 48px); }
.hof__legende { margin-top: clamp(40px, 6vw, 72px); }
.hof__legende h2 { margin-bottom: .4em; }

/* Schmale Geräte: kein Raster, sondern ein Block — nur so hat der Plan einen
   Container, der höher ist als er selbst, und kann haften bleiben. Als
   Rasterzelle in einer einspaltigen Anordnung wäre sticky wirkungslos. */
@media (max-width: 979px) {
  .hof__raster { display: block; }
  .hof__kopf { margin-bottom: clamp(30px, 5vw, 44px); }
  .hof__plan {
    position: sticky; top: 62px; z-index: 5;
    background: var(--beton);
    padding-bottom: 10px;
    margin-bottom: clamp(26px, 4vw, 40px);
  }
}

@media (min-width: 980px) {
  .hof__raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    column-gap: clamp(40px, 4vw, 64px);
  }
  .hof__kopf    { grid-column: 1; grid-row: 1; }
  .hof__legende { grid-column: 1; grid-row: 2; margin-top: clamp(56px, 7vw, 104px); }
  .hof__plan    { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 88px; }
}

.held__schlagwort {
  font-family: var(--schrift-mass); font-size: .8125rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ocker-tief);
  margin: 0 0 20px;
}

.hof__kopf h1 { margin-bottom: .42em; }

.held__aktion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 13px 24px;
  border: 1px solid var(--granit); border-radius: 2px;
  background: var(--granit); color: var(--beton);
  text-decoration: none; font-weight: 600; font-size: 1rem;
  max-width: 100%;
  transition: background .16s, color .16s, border-color .16s;
}
.knopf:hover { background: var(--ocker-tief); border-color: var(--ocker-tief); }

.knopf--klar { background: transparent; color: var(--granit); border-color: var(--granit); }
.knopf--klar:hover { background: var(--granit); color: var(--beton); }

.sec--dunkel .knopf { background: var(--beton); color: var(--granit); border-color: var(--beton); }
.sec--dunkel .knopf:hover { background: var(--ocker); border-color: var(--ocker); color: var(--granit); }
.sec--dunkel .knopf--klar { background: transparent; color: var(--beton); border-color: #767D81; }
.sec--dunkel .knopf--klar:hover { background: var(--beton); color: var(--granit); border-color: var(--beton); }

/* --- Lageplan (Signatur) ------------------------------------------------- */
.plan { position: relative; }

.plan__flaeche {
  width: 100%; height: auto; display: block;
  overflow: visible;
}

.plan__fussnote {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 12px;
  font-family: var(--schrift-mass); font-size: .6875rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--granit-mit);
}

/* Zeichnungselemente */
.pl-grenze  { fill: none; stroke: var(--granit-mit); stroke-width: 1.6; stroke-dasharray: 22 5 3 5; }
.pl-strasse { fill: var(--beton-tief); stroke: none; }
.pl-mittel  { fill: none; stroke: #ffffff; stroke-width: 2; stroke-dasharray: 16 14; }
.pl-kante   { fill: none; stroke: var(--linie); stroke-width: 1.2; }
.pl-schrift {
  font-family: var(--schrift-mass); font-size: 12px; font-weight: 400;
  letter-spacing: .08em; fill: var(--granit-mit); text-transform: uppercase;
}

.pl-flaeche { stroke: var(--granit); stroke-width: 1.5; transition: fill .18s; }
.pl-linie   { fill: none; stroke: var(--granit); stroke-width: 1.5; }
.pl-dick    { fill: none; stroke: var(--granit); stroke-width: 4.5; stroke-linejoin: round; }
.pl-duenn   { fill: none; stroke: var(--granit); stroke-width: 1.1; }
.pl-gestrichelt { fill: none; stroke: var(--granit); stroke-width: 1.5; stroke-dasharray: 7 5; }

/* Heckensymbol: überlappende Kreise, wie in einer Bepflanzungszeichnung */
.pl-hecke { fill: #ffffff; stroke: var(--granit); stroke-width: 1.1; }
.zone.ist-an .pl-hecke { fill: var(--ocker); stroke: var(--ocker-tief); }

/* Positionsschlüssel — wie die Positionsnummer auf einer Bauzeichnung */
.pl-schluessel circle { fill: var(--granit); transition: fill .18s; }
.pl-schluessel text {
  font-family: var(--schrift-mass); font-size: 14px; font-weight: 500;
  fill: var(--beton); text-anchor: middle; dominant-baseline: central;
  transition: fill .18s;
}

/* Zonen: Zeigen + Hervorheben */
.zone { cursor: pointer; }
.zone .pl-flaeche { fill: #ffffff; }

.zone.ist-an .pl-flaeche { fill: var(--ocker); }
.zone.ist-an .pl-linie,
.zone.ist-an .pl-dick,
.zone.ist-an .pl-duenn,
.zone.ist-an .pl-gestrichelt,
.zone.ist-an .pl-flaeche { stroke: var(--ocker-tief); }
.zone.ist-an .pl-schluessel circle { fill: var(--ocker-tief); }

/* Musterflächen bleiben sichtbar, wenn die Zone leuchtet */
.zone.ist-an .pl-muster { opacity: .34; }
.pl-muster { transition: opacity .18s; }

/* --- Legende = Leistungen ------------------------------------------------ */
.legende { display: grid; gap: 0; margin: 0; padding: 0; }

.legende__zeile {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 16px;
  align-items: start;
  width: 100%;
  padding: 18px 8px 18px 0;
  border: 0;
  border-top: 1px solid var(--linie);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.legende__zeile:last-child { border-bottom: 1px solid var(--linie); }
/* Hervorhebung als Abtönung des Untergrunds — funktioniert auf jeder Fläche,
   egal ob Beton oder Kalk darunter liegt. */
.legende__zeile:hover,
.legende__zeile.ist-an { background: color-mix(in srgb, var(--granit) 7%, transparent); }

.legende__key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--granit); color: var(--beton);
  font-family: var(--schrift-mass); font-size: .8125rem; font-weight: 500;
  margin-top: 2px;
}
.legende__zeile.ist-an .legende__key { background: var(--ocker-tief); }

.legende__name {
  font-family: var(--schrift-display); font-weight: 700; font-stretch: 104%;
  font-size: 1.0625rem; letter-spacing: -0.005em;
}
.legende__satz { grid-column: 2; color: var(--granit-mit); font-size: .9375rem; line-height: 1.5; }

.legende__ausserdem {
  margin-top: 26px; font-size: .9375rem; color: var(--granit-mit); max-width: 62ch;
}

/* Einspaltig: die Legende steht neben dem Plan, nicht unter ihm. */

/* --- Arbeiten ------------------------------------------------------------ */
.arbeiten {
  display: grid; gap: 22px;
  grid-template-columns: 1fr;
  margin: 0; padding: 0; list-style: none;
}
.arbeit { min-width: 0; margin: 0; }
/* Die Fotos des Betriebs haben sehr unterschiedliche Seitenverhältnisse
   (1:1 bis 1,6:1). Ein fester Rahmen mit object-fit hält das Raster ruhig. */
.arbeit__rahmen {
  aspect-ratio: 4 / 3;
  background: var(--beton-tief);
  border-radius: 2px;
  overflow: hidden;
}
.arbeit img { width: 100%; height: 100%; object-fit: cover; }
.arbeit figcaption {
  margin-top: 10px;
  font-size: .875rem; line-height: 1.45; color: var(--granit-mit);
}
.arbeit b { display: block; }

@media (min-width: 620px) { .arbeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .arbeiten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

/* --- Ablauf (echte Reihenfolge, darum nummeriert) ------------------------ */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: schritt; }

.schritt {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px;
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid #3A4145;
}
.schritt:last-child { border-bottom: 1px solid #3A4145; }
.schritt__nr { font-size: .875rem; }
.schritt h3 { margin: 0; }
.schritt p { grid-column: 2; margin: 6px 0 0; color: #9AA2A6; font-size: .9375rem; max-width: 54ch; }

/* --- Zweispalter: beide Spalten 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 (bis 26px Versatz). 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, 52px); align-items: start; }
.paar > * > :first-child { margin-block-start: 0; }
.paar > :is(.ablauf, .daten),
.paar > * > :is(.ablauf, .daten):first-child { margin-block-start: 0; }
.paar > :is(.ablauf, .daten) > :first-child,
.paar > * > :is(.ablauf, .daten):first-child > :first-child {
  padding-top: 0; border-top: 0; }
@media (min-width: 900px) { .paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 900px) { .paar--schmal { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* --- Kontaktdaten -------------------------------------------------------- */
.daten { margin: 0; display: grid; gap: 0; }
.daten__zeile {
  display: grid; grid-template-columns: minmax(96px, 130px) minmax(0, 1fr);
  gap: 4px 18px; padding: 14px 0;
  border-top: 1px solid var(--linie);
  align-items: baseline;
}
.daten__zeile:last-child { border-bottom: 1px solid var(--linie); }
.daten dt { color: var(--granit-mit); }
.daten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.daten dd a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.sec--dunkel .daten__zeile { border-top-color: #3A4145; }
.sec--dunkel .daten__zeile:last-child { border-bottom-color: #3A4145; }
.sec--dunkel .daten dt { color: #9AA2A6; }

.grossruf {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none;
  font-family: var(--schrift-display); font-weight: 800; font-stretch: 108%;
  font-size: clamp(1.5rem, 5vw, 2.4rem); letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.grossruf:hover { color: var(--ocker); }
/* Alle Textlinks bekommen genug Höhe zum Antippen (mind. 24px nach WCAG 2.5.8,
   hier großzügiger). Senkrechtes Polster an inline-Elementen vergrößert die
   Trefferfläche, ohne den Zeilenfluss zu verschieben. */
.grossruf { padding: 7px 0; }
.daten dd a { padding: 4px 0; }

/* --- Karte: lädt erst auf Klick (keine Verbindung zu Google vorher) ------ */
.karte {
  border: 1px solid var(--granit-mit); border-radius: 2px; overflow: hidden;
  background: var(--beton-tief);
  aspect-ratio: 4 / 3;
  display: grid;
}
.karte iframe { width: 100%; height: 100%; border: 0; display: block; }

.karte__hinweis {
  align-self: center;
  padding: clamp(20px, 4vw, 34px);
  text-align: left;
}
.karte__hinweis p { margin: 0 0 12px; max-width: 40ch; font-size: .9375rem; }
.karte__hinweis p:last-child { margin-bottom: 0; }

/* --- Fußzeile ------------------------------------------------------------ */
.fuss { background: var(--granit); color: var(--beton); padding-block: clamp(44px, 6vw, 72px) 28px; }
.fuss a { color: var(--beton); }

.fuss__raster { display: grid; gap: 32px; }
@media (min-width: 780px) { .fuss__raster { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }

.fuss__titel { color: #9AA2A6; margin: 0 0 14px; }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; 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__logo { width: 132px; height: auto; margin-bottom: 16px; background: var(--beton); padding: 8px; border-radius: 2px; }

.fuss__unten {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid #3A4145;
  font-size: .8125rem; color: #9AA2A6;
}
.fuss__unten a { color: #9AA2A6; display: inline-block; padding: 6px 0; }

/* --- Bewegung: Ausgangszustand ------------------------------------------
   Nur der Plan bekommt seinen Startzustand aus dem CSS — er steht über der
   Falz, dort wäre ein Aufblitzen am sichtbarsten. Die Fotos weiter unten
   versteckt GSAP selbst.

   WICHTIG: `html.js` wird am Ende des Intros wieder ENTFERNT und GSAP räumt
   seine Inline-Stile ab. Grund: Der HTML-Editor speichert die Seite, indem er
   das lebende DOM serialisiert (`documentElement.outerHTML`). Bliebe hier
   etwas stehen, wäre es dauerhaft eingebacken und die Zeichnung liefe nach
   dem ersten Speichern nie wieder. Ohne JS ist ohnehin alles sichtbar. */
.js .plan__zeichnung .pl-flaeche,
.js .plan__zeichnung .pl-muster,
.js .plan__zeichnung .pl-schluessel,
.js .plan__zeichnung .pl-schrift,
.js .plan__zeichnung .pl-hecke { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .plan__zeichnung .pl-flaeche,
  .js .plan__zeichnung .pl-muster,
  .js .plan__zeichnung .pl-schluessel,
  .js .plan__zeichnung .pl-schrift,
  .js .plan__zeichnung .pl-hecke { opacity: 1; }
  .pl-muster { opacity: .34; }
}