@import url("../schriften/schriften.css");

/* ═══════════════════════════════════════════════════════════════
   Wessels Tischlerei GmbH — gemeinsames Stylesheet aller Seiten
   Eine Schrift, hoher Kontrast, geordnetes Raster.
   Reines CSS, keine Abhängigkeiten, kein Build-Schritt.

   Farben, Schriftgrößen und Abstände stehen gesammelt im Block
   :root. Dort geändert, gilt es auf allen Seiten.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:        #ffffff;
  --surface:   #f1f3f1;
  --ink:       #15201c;
  --muted:     #41504a;
  --accent:    #2e5248;
  --accent-ink:#ffffff;
  --eiche:     #b5793c;
  --feld:      #15201c;
  --feld-ink:  #f1f3f2;
  --feld-muted:#9aa49d;
  --warnung:   #ffe9a8;
  --warnung-ink:#4a3b00;

  --text: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --small: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
  --body:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --lead:  clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  --head:  clamp(1.75rem, 1.1rem + 2.6vw, 3.25rem);
  --titel: clamp(2.25rem, 1.2rem + 4.6vw, 5rem);

  --rand:  clamp(1.25rem, 4vw, 3.5rem);
  --luft:  clamp(3.5rem, 8vh, 6rem);
  --spalt: clamp(1rem, 2vw, 2rem);
  --fokus: var(--accent);
}

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

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--text); font-size: var(--body); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
/* Der picture-Wrapper erzeugt keine eigene Box, damit alle Regeln,
   die das Bild als direktes Kind erwarten, weiter greifen. */
picture { display: contents; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.08; }
p, ul, ol, dl { margin: 0; }
p, li, dd, dt, h1, h2, h3, figcaption { overflow-wrap: break-word; }

/* ── Fokusrahmen ───────────────────────────────────────────────────
   Der Rahmen liegt wegen des Abstands auf der Fläche *um* das
   Element herum. Er muss sich also von dieser Fläche abheben, nicht
   vom Element selbst. Dunkelgrün auf dunklem Grund wäre unsichtbar,
   deshalb schaltet --fokus auf jeder dunklen Fläche auf Hell um.
   Über Fotos ist die Farbe unbekannt: dort kommt ein zweiter Ring
   in der Gegenfarbe dazu, sodass immer einer der beiden sichtbar ist. */
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.feld, .band, footer, .daumenleiste { --fokus: #f4f6f4; }
.hero__inhalt :focus-visible, .kachel :focus-visible {
  outline-color: #fff; box-shadow: 0 0 0 5px rgba(10, 18, 15, .92); } /* taste-skill-ignore: Gegenring des Fokusanzeigers über Fotos */
::selection { background: var(--accent); color: var(--accent-ink); }

/* Fest statt absolut: sonst erscheint der Sprunglink am Anfang des
   Dokuments statt am oberen Bildrand, wenn schon gescrollt wurde. */
.springmarke { position: fixed; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: .75rem 1.25rem; }
.springmarke:focus { left: 0; }
/* main ist von sich aus nicht fokussierbar. Ohne tabindex springt in
   manchen Browsern nur die Ansicht, der Fokus bleibt auf dem Link. */
main[tabindex="-1"]:focus { outline: none; }

.gitter { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--spalt); padding-inline: var(--rand); }
.bahn { padding-inline: var(--rand); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: .8rem 1.6rem;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--text); font-size: var(--body); font-weight: 600;
  text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.knopf:hover { background: #3c6a5b; }
.knopf:active { transform: translateY(1px); }
.knopf--hell { background: var(--bg); color: var(--ink); }
.knopf--hell:hover { background: #e8e6e0; }

.platzhalter { background: var(--warnung); color: var(--warnung-ink); padding: 0 .3em; font-weight: 600; }

/* ── Kopfzeile ─────────────────────────────────────────────────── */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem var(--rand); background: var(--bg); position: sticky; top: 0; z-index: 50; }
.kopf__marke { display: flex; align-items: center; gap: .6rem; font-weight: 600; text-decoration: none; font-size: var(--body); }
.kopf__marke img { width: 30px; height: 30px; flex: none; }
.kopf__rechts { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.5rem); }
.kopf nav ul { list-style: none; display: flex; gap: clamp(.75rem, 1.6vw, 1.5rem); margin: 0; padding: 0; }
.kopf nav a { text-decoration: none; font-size: var(--small); color: var(--muted); }
.kopf nav a:hover { color: var(--ink); }
.kopf nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.menuknopf { display: none; }

/* ── Hero: ein großes Bild ─────────────────────────────────────── */
.hero { position: relative; }
.hero img { width: 100%; height: min(78svh, 680px); object-fit: cover; }
.hero__inhalt { position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--schleier) var(--rand) clamp(2rem, 5vh, 3.5rem);
  --schleier: 22vh;
  background: linear-gradient(rgba(10,18,15,0) 0, /* taste-skill-ignore: neutraler Schleier unter Text auf Foto */
                              rgba(10,18,15,.70) var(--schleier),
                              rgba(10,18,15,.93) 100%);
  color: #fff; }
.hero h1 { font-size: var(--titel); max-width: 18ch; color: #fff; }
.hero__satz { margin-top: 1rem; font-size: var(--lead); max-width: 52ch; color: #e8ebe9; }
.hero__tat { margin-top: clamp(1.25rem, 3vh, 2rem); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.hero__tat span { font-size: var(--small); color: #dbe0dd; }

/* ── Nummer am Anfang der Kontaktseite ─────────────────────────── */
.sofort { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: clamp(1.25rem, 3vh, 2rem); }
.sofort__nummer { display: inline-block; min-height: 48px; font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; letter-spacing: -.03em; text-decoration: none; color: var(--accent); }
.sofort__nummer:hover { color: var(--ink); }
.sofort__dazu { font-size: var(--body); color: var(--muted); }

/* ── Kopf der Unterseiten ──────────────────────────────────────── */
.seitenkopf { padding: clamp(2rem, 5vh, 3.5rem) var(--rand) 0; }
.seitenkopf__gitter { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--spalt); }
.seitenkopf h1 { grid-column: 1 / span 7; font-size: var(--head); }
.seitenkopf p { grid-column: 1 / span 6; margin-top: 1rem; font-size: var(--lead); color: var(--muted); }
.seitenkopf figure { grid-column: 1 / -1; margin: clamp(1.5rem, 3vh, 2.5rem) 0 0; }
.seitenkopf figure img { width: 100%; aspect-ratio: 21/9; object-fit: cover; }

section { padding-block: var(--luft); }
.abschnitt-titel { font-size: var(--head); }
.abschnitt-titel--luft { margin-bottom: clamp(1.5rem, 3vh, 2.5rem); }
.vorsatz { font-size: var(--lead); color: var(--muted); max-width: 54ch; margin-top: 1rem; }

/* ── Leistungen: vier große Bildkacheln ────────────────────────── */
.kacheln { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--spalt); margin-top: clamp(1.5rem, 3vh, 2.5rem); }
.kachel { position: relative; display: block; text-decoration: none; color: #fff; overflow: hidden; }
.kachel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.kachel:hover img, .kachel:has(.kachel__link:focus-visible) img { transform: scale(1.04); }

/* ── Kachel als Ganzes anklickbar ──────────────────────────────────
   Der Link sitzt in der Überschrift, damit er einen kurzen, klaren
   Namen hat und die Gliederung erhalten bleibt. Die Fläche darüber
   macht die ganze Kachel anklickbar, ohne einen zweiten Link
   anzulegen. Sie reicht nach oben über die Kachel hinaus und wird
   von deren overflow auf die Kachel zurückgeschnitten. */
.kachel__link { text-decoration: none; }
.kachel__link::after { content: ""; position: absolute; inset: -100vh 0 0 0; }

/* Angeklickt wird die ganze Kachel, also gehört der Fokusrahmen auch
   um die ganze Kachel. Wo :has() fehlt, bleibt der Rahmen um die
   Überschrift stehen — sichtbar ist er dann immer noch. */
@supports selector(:has(*)) {
  .kachel:has(.kachel__link:focus-visible) {
    outline: 2px solid #fff; outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(10, 18, 15, .92); } /* taste-skill-ignore: Gegenring des Fokusanzeigers über Fotos */
  .kachel .kachel__link:focus-visible { outline: none; box-shadow: none; } /* taste-skill-ignore: nimmt den inneren Ring weg, setzt keinen */
}
.kachel__text { position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--schleier) clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
  --schleier: clamp(5rem, 13vw, 9rem);
  background: linear-gradient(rgba(10,18,15,0) 0, /* taste-skill-ignore: neutraler Schleier unter Text auf Foto */
                              rgba(10,18,15,.70) var(--schleier),
                              rgba(10,18,15,.93) 100%); }
.kachel h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); color: #fff; }
.kachel p { margin-top: .4rem; font-size: var(--body); color: #e1e5e2; max-width: 38ch; }

/* ── Beispiele mit Preisen ─────────────────────────────────────── */
.beispiele__bild { margin: clamp(1.5rem, 3vh, 2.5rem) 0 0; }
.beispiele__bild img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.beispiele { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spalt); margin-top: clamp(1.5rem, 3vh, 2.5rem); }
.beispiel .beispiel__preis { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.beispiel h3 { font-size: var(--body); margin-top: .5rem; }
.beispiel p { font-size: var(--body); color: var(--muted); margin-top: .35rem; }

/* ── Geordnete Reihen ──────────────────────────────────────────── */
.achse, .achse--breit { grid-column: 1 / -1; }
.reihe { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.reihe + .reihe { margin-top: clamp(2.5rem, 5vh, 4rem); }
.reihe:nth-of-type(even) .reihe__bild { order: -1; }
.reihe__text h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); margin-bottom: .6rem; }
.reihe__text p { font-size: var(--body); color: var(--muted); max-width: 46ch; }
.reihe__text p + p { margin-top: .75rem; }
.reihe__bild img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* ── Ablauf: vier gleiche Blöcke ───────────────────────────────── */
.schritte { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spalt); margin-top: clamp(1.5rem, 3vh, 2.5rem); }
.schritt img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.schritt h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); margin-top: 1rem; }
.schritt p { margin-top: .5rem; font-size: var(--body); color: var(--muted); }
.schritte.schritte--drei { grid-template-columns: repeat(3, 1fr); }

/* ── Zahlenreihen ──────────────────────────────────────────────── */
.zahlen { grid-column: 1 / span 7; }
.zahlen dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1rem var(--spalt); margin-top: clamp(1.5rem, 3vh, 2.25rem); }
.zahlen dt { text-align: right; font-size: clamp(1.5rem, 2.2vw, 2.125rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.02em; }
.zahlen dd { margin: 0; font-size: var(--body); color: var(--muted); max-width: 46ch; }
.zahlen__bild { grid-column: 9 / span 4; align-self: center; }
.zahlen__bild img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ── Dunkles Vollfeld ──────────────────────────────────────────── */
.feld { background: var(--feld); color: var(--feld-ink); }
.feld .abschnitt-titel, .feld h3, .feld .zahlen dt { color: var(--feld-ink); }
.feld .vorsatz, .feld p, .feld dd { color: var(--feld-muted); }
.feld strong { color: var(--feld-ink); font-weight: 600; }
.feld--zwei { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.feld--zwei figure { margin: 0; }
.feld--zwei img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ── Einsatzgebiet ─────────────────────────────────────────────── */
.gebiet { grid-column: 1 / span 6; }
.gebiet .gebiet__orte { font-size: clamp(1.375rem, 2.4vw, 2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--accent); margin-top: clamp(.75rem, 1.5vh, 1.25rem); }
.gebiet p { margin-top: 1rem; font-size: var(--body); color: var(--muted); max-width: 46ch; }
.gebiet__bild { grid-column: 8 / span 5; align-self: center; }
.gebiet__bild img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }

/* ── Aufzählung ────────────────────────────────────────────────── */
.liste { list-style: none; padding: 0; margin-top: 1.25rem; }
.liste li { font-size: var(--body); color: var(--muted); padding-block: .3rem; }
.liste li strong { color: var(--ink); font-weight: 600; }
.feld .liste li strong { color: var(--feld-ink); }

/* ── Kontaktband ───────────────────────────────────────────────── */
.band { background: var(--feld); color: var(--feld-ink); padding: clamp(3rem, 7vh, 5rem) var(--rand);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.band__titel { font-size: var(--head); }
.band p { color: var(--feld-muted); max-width: 46ch; margin-top: 1rem; }
.band .band__tat { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: clamp(1.25rem, 3vh, 2rem); }
.band__bild { margin: 0; }
.band__bild img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ── Karte: Platzhalter, bis der Besucher sie lädt ─────────────── */
.karte { margin-top: clamp(1.5rem, 3vh, 2.5rem); }
.karte__platz {
  display: grid; justify-items: start; align-content: center; gap: 1rem;
  background: var(--surface); min-height: 15rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.karte__titel { font-size: var(--lead); font-weight: 600; color: var(--ink); }
.karte__platz p { max-width: 52ch; color: var(--muted); font-size: var(--body); }
.karte__hinweis { font-size: var(--small); }
.karte__rahmen { aspect-ratio: 16/9; background: var(--surface); }
.karte__rahmen iframe { display: block; width: 100%; height: 100%; border: 0; } /* taste-skill-ignore: eingebettete Karte */
.karte__adresse {
  display: flex; flex-wrap: wrap; gap: 1.25rem 3rem;
  margin-top: clamp(1.25rem, 3vh, 2rem); font-size: var(--body);
}
.karte__adresse p { color: var(--muted); }
.karte__adresse strong { color: var(--ink); font-weight: 600; }
.karte__adresse a { color: var(--accent); font-weight: 600; }

/* ── Formular ──────────────────────────────────────────────────── */
.formular { grid-column: 1 / span 7; min-width: 0; }
.formular__reihe { scroll-margin-top: 90px; }
.formular__reihe { display: grid; gap: 1.25rem; margin-top: clamp(1.5rem, 3vh, 2.25rem); }
.formular label { display: block; font-size: var(--body); font-weight: 600; margin-bottom: .4rem; }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"],
.formular select, .formular textarea {
  width: 100%; min-height: 50px; padding: .7rem .9rem;
  font-family: var(--text); font-size: var(--body); color: var(--ink);
  background: var(--bg); border: 1px solid #b6bdb8; border-radius: 3px; /* taste-skill-ignore: Formularfelder dürfen Linien haben */
}
.formular textarea { min-height: 170px; resize: vertical; }
.formular input:focus-visible, .formular select:focus-visible, .formular textarea:focus-visible { border-color: var(--accent); }

/* ── Auswahlfeld: eigener Pfeil statt des Systempfeils ──────────
   Der Pfeil ist ein kleines SVG im Hintergrund. Beim Fokus wechselt
   er auf die Akzentfarbe, damit die Rückmeldung sichtbar ist. */
.formular select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3.25rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8 14.5 1.5' fill='none' stroke='%2315201c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 16px 10px;
  transition: border-color .15s ease, background-color .15s ease;
}
.formular select:hover { border-color: #8e9790; }
.formular select:focus-visible {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5 8 8 14.5 1.5' fill='none' stroke='%232e5248' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.formular .pflicht { color: var(--muted); font-weight: 400; font-size: var(--small); }
.zustimmung { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.zustimmung input { width: 22px; height: 22px; margin-top: .2rem; accent-color: var(--accent); }
.zustimmung label { font-weight: 400; font-size: var(--small); color: var(--muted); margin: 0; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: verstecktes Honigtopf-Feld */
.meldung { padding: 1rem 1.25rem; margin-top: 1.5rem; font-size: var(--body); }
.meldung--gut { background: #dcebe3; color: #15402e; }
.meldung--schlecht { background: #f6dfd9; color: #5c2317; }
.formular__seite { grid-column: 9 / span 4; align-self: stretch; min-width: 0; background: var(--surface); padding: clamp(1.5rem, 3vw, 2rem); }
.formular__seite h2 { font-size: clamp(1.25rem, 2vw, 1.625rem); }
.formular__seite dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .4rem 1rem; margin-top: 1.25rem; font-size: var(--body); }
.formular__seite dt { color: var(--muted); }
.formular__seite dd { margin: 0; }
.formular__seite .vorsatz { font-size: var(--body); }

/* ── Fließtext ─────────────────────────────────────────────────── */
.fliess { grid-column: 2 / span 10; }
.fliess h2 { font-size: clamp(1.25rem, 2vw, 1.625rem); margin-top: clamp(2rem, 4vh, 3rem); }
.fliess h2:first-of-type { margin-top: clamp(1rem, 2vh, 1.5rem); }
.fliess h3 { font-size: var(--body); font-weight: 600; margin-top: 1.5rem; }
.fliess p, .fliess ul { margin-top: .85rem; font-size: var(--body); color: var(--muted); max-width: 72ch; }
.fliess ul { padding-left: 1.2rem; }
.fliess li { margin-top: .35rem; }
.fliess a { color: var(--accent); }

/* ── Links im Fließtext ────────────────────────────────────────────
   Ein Link darf nicht allein an der Farbe erkennbar sein. Steht er
   mitten im Satz, bekommt er deshalb eine Unterstreichung. Links, die
   als Knopf, Kachel, Navigation oder Liste schon durch ihre Form
   erkennbar sind, bleiben ohne. */
main p a, main dd a, main td a, .fliess a, .zustimmung label a {
  text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
main p a.knopf, main dd a.knopf, main p a.sofort__nummer { text-decoration: none; }

/* ── Fußzeile ──────────────────────────────────────────────────── */
footer { background: var(--feld); color: var(--feld-ink); padding: clamp(2.5rem, 6vh, 4.5rem) var(--rand) 2.5rem; }
.fuss__ruf { font-size: clamp(1.75rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.fuss__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; margin-top: clamp(2rem, 5vh, 3rem); }
.fuss__spalten h2 { font-size: var(--small); font-weight: 600; color: var(--feld-ink); margin-bottom: .75rem; }
.fuss__spalten ul { list-style: none; padding: 0; }
.fuss__spalten li { margin-top: .4rem; }
.fuss__spalten a { color: var(--feld-muted); text-decoration: none; font-size: var(--body); }
.fuss__spalten a:hover { color: var(--feld-ink); text-decoration: underline; }
.fuss__spalten p { color: var(--feld-muted); font-size: var(--body); }
.fuss__schluss { margin-top: clamp(2rem, 5vh, 3rem); color: var(--feld-muted); font-size: var(--small); }
.fuss__schluss a { color: var(--feld-ink); }

.daumenleiste { display: none; }

/* ── Handy und kleine Tablets ──────────────────────────────────── */
@media (max-width: 47.999rem) {
  .kopf { flex-wrap: wrap; gap: .5rem; padding-inline: 1rem; }
  .kopf__marke { font-size: var(--small); gap: .45rem; }
  .kopf__marke img { width: 26px; height: 26px; }
  .kopf__rechts { gap: .5rem; }
  .kopf__rechts .knopf { min-height: 44px; padding: .5rem .9rem; font-size: var(--small); }
  .menuknopf { padding: .5rem .75rem; }
  .kopf nav { order: 3; width: 100%; }
  .kopf nav ul { display: none; flex-direction: column; gap: 0; padding-top: .5rem; }
  .kopf nav[data-offen="ja"] ul { display: flex; }
  .kein-js .kopf nav ul { display: flex; }
  .kopf nav a { display: block; padding: .85rem 0; font-size: var(--body); }
  .menuknopf { display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px; padding: .5rem .9rem;
    background: none; border: 1px solid #b6bdb8; /* taste-skill-ignore: Umriss des Menüknopfes */
    font-family: var(--text); font-size: var(--small); color: var(--ink); cursor: pointer; }

  .hero img { height: 62svh; }
  .hero__inhalt { padding-top: 30vh; }

  .seitenkopf h1, .seitenkopf p { grid-column: 1 / -1; }
  .seitenkopf figure img { aspect-ratio: 4/3; }

  .kacheln { grid-template-columns: 1fr; }
  .reihe { grid-template-columns: 1fr; gap: 1.25rem; }
  .reihe:nth-of-type(even) .reihe__bild { order: 0; }
  .schritte, .beispiele, .schritte.schritte--drei { grid-template-columns: 1fr 1fr; }

  .zahlen, .gebiet { grid-column: 1 / -1; }
  .zahlen dl { grid-template-columns: 88px minmax(0, 1fr); }
  .zahlen__bild, .gebiet__bild { grid-column: 1 / -1; margin-top: 2rem; }

  .formular, .formular__seite, .fliess { grid-column: 1 / -1; }
  .formular { order: 2; }
  .formular__seite { order: 1; margin: 0 0 2.5rem; }

  .band, .feld--zwei { grid-template-columns: 1fr; }
  .band__bild { margin-top: 1.5rem; }

  body { padding-bottom: 84px; }
  .daumenleiste { display: grid; grid-template-columns: 1fr 1fr; position: fixed; inset: auto 0 0 0;
    z-index: 60; background: var(--feld); transition: transform .25s ease; }
  html { scroll-padding-bottom: 5.5rem; }
  .daumenleiste[hidden] { display: none; }
  .daumenleiste.weg { transform: translateY(100%); }
  .daumenleiste a { display: flex; align-items: center; justify-content: center; min-height: 60px;
    font-size: var(--body); font-weight: 600; text-decoration: none; color: var(--feld-ink); }
  .daumenleiste a:first-child { background: var(--accent); color: var(--accent-ink); }
}

/* ── Daumenflächen auf dem Handy: jeder Link mindestens 44 px ──── */
@media (max-width: 47.999rem) {
  /* Eigenständige Links bekommen eine echte Fläche */
  .fuss__spalten a, .fuss__schluss a {
    display: inline-block; min-height: 44px; padding-block: .7rem;
  }
  .fuss__spalten li { margin-top: 0; }
  .kopf__marke { min-height: 44px; }

  /* Links mitten im Satz: senkrechte Polsterung vergrößert die
     Trefferfläche, ohne den Zeilenabstand zu verändern. */
  .kachel p a, .zahlen dd a, .reihe__text p a, .fliess p a, .fliess li a, .zustimmung a {
    padding-block: .95rem;
  }

  /* Ankreuzfeld und seine Zeile */
  .zustimmung { min-height: 44px; }
  .zustimmung input { width: 28px; height: 28px; }
  .zustimmung label { padding-block: .6rem; }
}

@media (max-width: 30rem) {
  .schritte, .beispiele, .schritte.schritte--drei { grid-template-columns: 1fr; }
}

/* ── Bewegung ──────────────────────────────────────────────────── */
.auftritt { opacity: 0; transform: translateY(18px); }
.sichtbar .auftritt { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.sichtbar .auftritt:nth-child(2) { transition-delay: .06s; }
.sichtbar .auftritt:nth-child(3) { transition-delay: .12s; }
.sichtbar .auftritt:nth-child(4) { transition-delay: .18s; }
.sichtbar .auftritt:nth-child(5) { transition-delay: .24s; }
.hero__inhalt > * { animation: aufsteigen .7s cubic-bezier(.22,.61,.36,1) backwards; }
.hero__inhalt > *:nth-child(2) { animation-delay: .1s; }
.hero__inhalt > *:nth-child(3) { animation-delay: .2s; }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(20px); } }

@media (prefers-reduced-motion: reduce) {
  .auftritt, .sichtbar .auftritt { opacity: 1; transform: none; transition: none; }
  .hero__inhalt > * { animation: none; }
  .daumenleiste { transition: none; }
  .kachel img, .kachel:hover img { transition: none; transform: none; }
}
.kein-js .auftritt { opacity: 1; transform: none; }