@import url("https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@50..150,300..900&family=Literata:ital,opsz,wght@0,7..72,400..700;1,7..72,400..500&display=swap");

/* ==========================================================================
   Förde & Tuch — „Der Schnürboden“
   Stylesheet der gesamten Website. Aufbau:
   1 Tokens  2 Reset  3 Typografie  4 Hilfsklassen  5 Kopf & Navigation
   6 Abschnitte & Naht  7 Startseite  8 Unterseiten-Komponenten
   9 Formular  10 Rechtstext  11 Fuss  12 Styleguide  13 Bewegung  14 Breakpoints
   ========================================================================== */

/* 1 — Tokens ------------------------------------------------------------- */
:root {
  /* Palette */
  --tuch: #F2F3EF;          /* Dacron-Weiss, Grundfläche */
  --nordseelicht: #D5DEDA;  /* Schnürboden, Flächen */
  --teer: #1E2426;          /* Text, Kontur */
  --garn: #505B58;          /* Sekundärtext, Maßlinien */
  --persenning: #2F4A43;    /* dunkle Fläche */
  --windfaden: #A8311C;     /* Riss, Naht, Handlung */

  --segel-hell: #FAFBF8;    /* Segelfläche in der Zeichnung (Tuch aufgehellt) */
  --windfaden-dunkel: #8A2714;
  --kreide: rgba(30, 36, 38, 0.075);

  /* Schrift */
  --f-display: "Anybody", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-text: "Literata", Georgia, "Times New Roman", serif;

  /* Skala — Breite ist Hierarchie */
  --t-riss: clamp(2.4rem, 1.2rem + 6vw, 6.2rem);
  --t-bahn: clamp(1.9rem, 1.2rem + 2.8vw, 3.4rem);
  --t-liek: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --t-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --t-text: 1.0625rem;
  --t-klein: 0.9375rem;

  /* Raum */
  --rand: clamp(1rem, 4vw, 3rem);
  --bahn-abstand: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --luft-1: 0.5rem;
  --luft-2: 1rem;
  --luft-3: 1.5rem;
  --luft-4: 2.5rem;
  --luft-5: 4rem;
  --spalte-text: 64ch;

  /* Linien */
  --liek: 2px solid var(--teer);
  --naht-hoehe: 10px;
  --naht-garn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpolyline points='0,8 6,2 12,8 18,2 24,8' fill='none' stroke='%23505B58' stroke-width='1.4'/%3E%3C/svg%3E");
  --naht-licht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Cpolyline points='0,8 6,2 12,8 18,2 24,8' fill='none' stroke='%23D5DEDA' stroke-width='1.4'/%3E%3C/svg%3E");

  --dauer: 150ms;
}

/* 2 — Reset -------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--tuch);
  color: var(--teer);
  font-family: var(--f-text);
  font-size: var(--t-text);
  line-height: 1.7;
  font-optical-sizing: auto;
  overflow-x: hidden;
}

img, svg, iframe { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul[class], ol[class] { list-style: none; padding: 0; }
table { border-collapse: collapse; }

/* 3 — Typografie --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: inherit;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-riss);
  font-stretch: 58%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--t-bahn);
  font-stretch: 72%;
  font-weight: 750;
  line-height: 1;
}

h3 {
  font-size: var(--t-liek);
  font-stretch: 100%;
  font-weight: 650;
  line-height: 1.15;
}

h4 {
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.3;
}

p, li, dd { max-width: var(--spalte-text); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  max-width: 58ch;
}

.klein {
  font-family: var(--f-display);
  font-size: var(--t-klein);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--garn);
}

strong { font-weight: 650; }

a {
  color: var(--windfaden);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dauer) ease, text-decoration-thickness var(--dauer) ease;
}

a:hover { color: var(--windfaden-dunkel); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--windfaden);
  outline-offset: 3px;
}

::selection { background: var(--nordseelicht); color: var(--teer); }

/* 4 — Hilfsklassen ------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--rand);
  top: -4rem;
  z-index: 50;
  padding: 0.75rem 1.1rem;
  background: var(--teer);
  color: var(--tuch);
  font-family: var(--f-display);
  font-weight: 650;
  text-decoration: none;
}

.skip-link:focus { top: 0.75rem; color: var(--tuch); }

.stapel > * + * { margin-top: var(--luft-2); }
.stapel > h2 + *,
.stapel > h3 + * { margin-top: var(--luft-3); }
.stapel > * + h3 { margin-top: var(--luft-4); }

/* Knöpfe — die primäre Variante trägt eine innere Stichnaht */
.aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--luft-2);
  margin-top: var(--luft-4);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.4rem;
  background: var(--windfaden);
  color: #FFFFFF;
  border: 2px solid var(--windfaden);
  outline: 1px dashed rgba(255, 255, 255, 0.6);
  outline-offset: -7px;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-stretch: 90%;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer) ease, border-color var(--dauer) ease, color var(--dauer) ease;
}

.knopf:hover {
  background: var(--windfaden-dunkel);
  border-color: var(--windfaden-dunkel);
  color: #FFFFFF;
}

.knopf:focus-visible { outline: 3px solid var(--teer); outline-offset: 3px; }

.knopf svg { width: 1.15rem; height: 1.15rem; flex: none; }

.knopf--leise {
  background: transparent;
  color: var(--teer);
  border-color: var(--teer);
  outline-color: transparent;
}

.knopf--leise:hover { background: var(--teer); border-color: var(--teer); color: var(--tuch); }

.knopf--hell {
  background: var(--tuch);
  color: var(--persenning);
  border-color: var(--tuch);
  outline-color: rgba(47, 74, 67, 0.45);
}

.knopf--hell:hover { background: var(--nordseelicht); border-color: var(--nordseelicht); color: var(--teer); }
.knopf--hell:focus-visible { outline: 3px solid var(--nordseelicht); }

.knopf[disabled],
.knopf[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* 5 — Kopf & Navigation -------------------------------------------------- */
.kopf {
  position: relative;
  z-index: 20;
  background: var(--tuch);
  border-bottom: var(--liek);
}

.kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--luft-2) var(--luft-3);
  padding-block: 0.85rem;
}

.kopf__marke {
  display: grid;
  flex: 1 1 0;
  min-width: 0;
  margin-right: auto;
  color: var(--teer);
  text-decoration: none;
}

.kopf__marke:hover { color: var(--teer); }

.kopf__name {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem);
  font-stretch: 56%;
  font-weight: 850;
  line-height: 0.95;
}

.kopf__zusatz {
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--garn);
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: 2px solid var(--teer);
  font-family: var(--f-display);
  font-weight: 650;
}

.nav-toggle svg { width: 1.4rem; height: 1.4rem; }
.nav-toggle[aria-expanded="true"] { background: var(--teer); color: var(--tuch); }

.nav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--luft-3);
}

.nav__liste a {
  display: inline-block;
  padding-block: 0.6rem;
  color: var(--teer);
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-stretch: 92%;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.nav__liste a:hover { border-bottom-color: var(--garn); color: var(--teer); }
.nav__liste a[aria-current="page"] { border-bottom-color: var(--windfaden); }

.nav__telefon { display: none; }

.kopf__ruf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.9rem;
  background: var(--teer);
  color: var(--tuch);
  font-family: var(--f-display);
  font-stretch: 88%;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.kopf__ruf:hover { background: var(--windfaden); color: #FFFFFF; }
.kopf__ruf svg { width: 1rem; height: 1rem; }

/* 6 — Abschnitte & Naht (Abstände zwischen Abschnitten NUR hier) --------- */
main > section {
  position: relative;
  padding-block: var(--bahn-abstand);
}

main > section + section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--naht-hoehe);
  background-image: var(--naht-garn);
  background-repeat: repeat-x;
  background-position: left center;
  pointer-events: none;
}

main > section.flaeche-persenning::before,
main > section.flaeche-persenning + section::before { background-image: none; }

.flaeche-licht { background: var(--nordseelicht); }

.flaeche-persenning {
  background: var(--persenning);
  color: var(--tuch);
}

.flaeche-persenning a:not([class]) { color: var(--tuch); }
.flaeche-persenning a:not([class]):hover { color: var(--nordseelicht); }
.flaeche-persenning .klein { color: var(--nordseelicht); }
.flaeche-persenning :focus-visible { outline-color: var(--nordseelicht); }

.abschnitt-kopf { max-width: 44rem; margin-bottom: var(--luft-4); }
.abschnitt-kopf > * + * { margin-top: var(--luft-3); }

/* Zweispalter (split) */
.zweispalter {
  display: grid;
  gap: var(--luft-4);
}

/* 7 — Startseite --------------------------------------------------------- */

/* Riss (Hero) — Schnürboden mit Kreideraster */
.riss {
  --bahn-abstand: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
  background-color: var(--nordseelicht);
  background-image:
    linear-gradient(to right, var(--kreide) 1px, transparent 1px),
    linear-gradient(to bottom, var(--kreide) 1px, transparent 1px);
  background-size: 64px 64px;
  overflow: hidden;
}

.riss__raster {
  display: grid;
  gap: var(--luft-4);
  align-items: center;
}

.riss__text {
  position: relative;
  padding-left: var(--luft-3);
  border-left: 3px solid var(--teer);
}

.riss__text .lead { margin-top: var(--luft-3); }

.riss__zeichnung { margin: 0; }
.riss__zeichnung svg { width: 100%; height: auto; }

.riss__segel { fill: var(--segel-hell); stroke: var(--teer); stroke-width: 2.5; stroke-linejoin: round; }
.riss__bahnnaht { stroke: var(--garn); stroke-width: 1; fill: none; }
.riss__liektau { stroke: var(--teer); stroke-width: 1; fill: none; stroke-dasharray: 2 4; }
.riss__mass { stroke: var(--garn); stroke-width: 1.2; fill: none; }
.riss__riss { stroke: var(--windfaden); stroke-width: 2.4; fill: none; stroke-linejoin: bevel; }
.riss__naht { stroke: var(--windfaden); stroke-width: 1.6; fill: none; stroke-linejoin: round; }
.riss__kausch { fill: var(--nordseelicht); stroke: var(--teer); stroke-width: 2.5; }
.riss__kausch-loch { fill: var(--teer); }

.riss__beschriftung {
  fill: var(--garn);
  font-family: var(--f-display);
  font-size: 15px;
  font-stretch: 90%;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.riss__beschriftung--ecke { fill: var(--teer); font-weight: 700; }

/* Woche — sieben Stiche */
.woche__raster {
  display: grid;
  gap: var(--luft-4);
  align-items: center;
}

.woche__stiche {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
  max-width: 34rem;
  padding-block: var(--luft-3);
  border-block: var(--liek);
}

.stich {
  position: relative;
  aspect-ratio: 1;
}

.stich::before,
.stich::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  width: 3px;
  height: 84%;
  background: var(--windfaden);
  transform: translateX(-50%) rotate(38deg);
}

.stich::after { transform: translateX(-50%) rotate(-38deg); }

.woche__legende {
  display: flex;
  justify-content: space-between;
  gap: var(--luft-2);
  max-width: 34rem;
  margin-top: var(--luft-1);
}

.woche__legende span:last-child { text-align: right; }

/* Bahnen — Leistungen als Segelbahnen, oben schmal */
.bahnen {
  display: grid;
  gap: 4px;
}

.bahn {
  --i: 0;
  max-width: none;
  width: calc(100% - var(--i) * 6%);
  padding: var(--luft-3) calc(var(--luft-3) + 2.5rem) var(--luft-3) var(--luft-3);
  background: var(--nordseelicht);
  border-left: 3px solid var(--teer);
  clip-path: polygon(0 0, calc(100% - 2.25rem) 0, 100% 100%, 0 100%);
}

.bahn h3 { margin-bottom: var(--luft-1); }
.bahn p { max-width: 56ch; }
.bahn a { font-family: var(--f-display); font-weight: 650; }

/* Weg — Orte auf einer Leine */
.weg {
  display: grid;
  gap: var(--luft-4);
  counter-reset: none;
}

.weg__ort {
  position: relative;
  padding-left: var(--luft-4);
}

.weg__ort::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.1rem;
  height: 1.1rem;
  border: 3px solid var(--teer);
  border-radius: 50%;
  background: var(--tuch);
  z-index: 1;
}

.weg__ort::after {
  content: "";
  position: absolute;
  left: calc(0.55rem - 1px);
  top: 1.45rem;
  bottom: calc(var(--luft-4) * -1 - 0.35rem);
  width: 2px;
  background: var(--teer);
}

.weg__ort:last-child::after { display: none; }
.weg__ort h3 { margin-bottom: var(--luft-1); }

/* Checkliste mit Kreuzstich, Liste mit schrägem Stich */
.pruefliste,
.stichliste { display: grid; gap: 0.7rem; }

.pruefliste li,
.stichliste li {
  position: relative;
  padding-left: 2rem;
}

.pruefliste li::before,
.pruefliste li::after {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.45em;
  width: 2px;
  height: 0.95em;
  background: currentColor;
  transform: rotate(40deg);
}

.pruefliste li::after { transform: rotate(-40deg); }

.stichliste li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.8em;
  width: 1rem;
  height: 2px;
  background: var(--windfaden);
  transform: rotate(-24deg);
}

.flaeche-persenning .stichliste li::before { background: var(--nordseelicht); }

.winter__liste {
  padding: var(--luft-3);
  border: 1px solid rgba(213, 222, 218, 0.5);
}

.winter__liste h3 { margin-bottom: var(--luft-2); }

/* Revier */
.revier {
  display: grid;
  gap: var(--luft-4);
}

.revier__gebiet { padding-top: var(--luft-2); border-top: var(--liek); }

.revier__name {
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  font-stretch: 130%;
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: var(--luft-2);
}

/* Kontaktfakten */
.fakten {
  display: grid;
  gap: var(--luft-3);
}

.fakt dt {
  font-family: var(--f-display);
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--garn);
}

.fakt dd {
  margin: 0.15rem 0 0;
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-stretch: 85%;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.fakt dd a { color: var(--teer); text-decoration-color: var(--windfaden); }
.fakt dd a:hover { color: var(--windfaden); }

/* 8 — Unterseiten-Komponenten ------------------------------------------- */
.seitenkopf {
  --bahn-abstand: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  background-color: var(--nordseelicht);
  background-image:
    linear-gradient(to right, var(--kreide) 1px, transparent 1px),
    linear-gradient(to bottom, var(--kreide) 1px, transparent 1px);
  background-size: 64px 64px;
}

.seitenkopf .wrap > * + * { margin-top: var(--luft-3); }
.seitenkopf h1 { max-width: 14ch; }

.seitenkopf.flaeche-persenning { background-color: var(--persenning); background-image: none; }

/* Fliesstext */
.text { max-width: 44rem; }
.text > * + * { margin-top: var(--luft-2); }
.text > * + h2 { margin-top: var(--luft-5); }
.text > * + h3 { margin-top: var(--luft-4); }
.text > h2 + *,
.text > h3 + * { margin-top: var(--luft-2); }
.text ul:not([class]),
.text ol:not([class]) { padding-left: 1.3rem; }
.text ul:not([class]) li::marker { color: var(--windfaden); }
.text li + li { margin-top: 0.35rem; }

/* Kacheln */
.kacheln {
  display: grid;
  gap: var(--luft-3);
}

.kachel {
  padding: var(--luft-3) 0 0;
  border-top: 3px solid var(--teer);
}

.kachel > * + * { margin-top: var(--luft-1); }
.kachel--flaeche { padding: var(--luft-3); background: var(--nordseelicht); }

/* Tabelle */
.tabelle-rahmen {
  width: 100%;
  overflow-x: auto;
  border-top: var(--liek);
  border-bottom: var(--liek);
}

.tabelle {
  width: 100%;
  min-width: 34rem;
  font-size: var(--t-klein);
  line-height: 1.5;
}

.tabelle caption {
  padding: var(--luft-2) 0;
  text-align: left;
  font-family: var(--f-display);
  font-weight: 650;
}

.tabelle th,
.tabelle td {
  padding: 0.75rem 1rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(30, 36, 38, 0.2);
}

.tabelle thead th {
  font-family: var(--f-display);
  font-weight: 700;
  border-bottom: var(--liek);
}

.tabelle tbody th { font-family: var(--f-display); font-weight: 650; }
.tabelle tr:last-child > * { border-bottom: 0; }

/* FAQ */
.fragen { border-top: var(--liek); max-width: 50rem; }

.frage { border-bottom: 1px solid rgba(30, 36, 38, 0.3); }

.frage summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--luft-2);
  min-height: 3.5rem;
  padding-block: var(--luft-2);
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1.25;
  list-style: none;
  cursor: pointer;
}

.frage summary::-webkit-details-marker { display: none; }

.frage summary::after {
  content: "";
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-25%);
  transition: transform var(--dauer) ease;
}

.frage[open] summary::after { transform: rotate(-135deg); }

.frage__antwort {
  padding: 0 0 var(--luft-3) var(--luft-2);
  margin-left: 0.2rem;
  border-left: 2px dashed var(--windfaden);
}

.frage__antwort > * + * { margin-top: var(--luft-1); }

/* Hinweis */
.hinweis {
  max-width: 44rem;
  padding: var(--luft-2) var(--luft-3);
  background: var(--nordseelicht);
  border-left: 3px solid var(--teer);
}

.hinweis > * + * { margin-top: var(--luft-1); }
.hinweis--riss { background: var(--tuch); border: 2px solid var(--windfaden); outline: 1px dashed var(--windfaden); outline-offset: -7px; padding: var(--luft-3); }

/* CTA */
.aufruf {
  display: grid;
  gap: var(--luft-3);
  align-items: end;
}

.aufruf h2 { max-width: 16ch; }
.aufruf .aktionen { margin-top: 0; }

/* Karte (iframe) */
.karte {
  position: relative;
  aspect-ratio: 4 / 3;
  border: var(--liek);
  background: var(--nordseelicht);
}

.karte iframe { width: 100%; height: 100%; border: 0; }

/* 9 — Formular ----------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--luft-3);
  max-width: 40rem;
}

.form__field { display: grid; gap: 0.4rem; }

.form__field label,
.form__legende {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
}

.form__hilfe { font-size: var(--t-klein); color: var(--garn); line-height: 1.45; }

.form__input {
  width: 100%;
  min-height: 3.1rem;
  padding: 0.7rem 0.85rem;
  background: #FFFFFF;
  border: 2px solid var(--teer);
  border-radius: 0;
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.4;
  transition: border-color var(--dauer) ease, box-shadow var(--dauer) ease;
}

textarea.form__input { min-height: 9rem; resize: vertical; }

select.form__input {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpolyline points='1,1 7,7 13,1' fill='none' stroke='%231E2426' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}

.form__input::placeholder { color: var(--garn); opacity: 1; }
.form__input:hover { border-color: var(--garn); }

.form__input:focus-visible {
  outline: 3px solid var(--windfaden);
  outline-offset: 2px;
  border-color: var(--teer);
}

.form__input[aria-invalid="true"] {
  border-color: var(--windfaden);
  box-shadow: inset 4px 0 0 var(--windfaden);
}

.form__error {
  min-height: 0;
  font-family: var(--f-display);
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--windfaden);
}

.form__error:empty { display: none; }

.form__check {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.75rem;
  align-items: start;
}

.form__check input {
  width: 1.4rem;
  height: 1.4rem;
  margin-top: 0.2rem;
  accent-color: var(--windfaden);
}

.form__check label { font-family: var(--f-text); font-weight: 400; font-size: var(--t-klein); }

.form__status {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.4;
}

.form__status:empty { display: none; }

.form__status[data-state] {
  padding: var(--luft-2) var(--luft-3);
  border-left: 4px solid var(--garn);
  background: var(--nordseelicht);
}

.form__status[data-state="pending"] { border-left-style: dashed; }
.form__status[data-state="success"] { border-left-color: var(--persenning); background: #DCE6DF; color: var(--persenning); }
.form__status[data-state="error"] { border-left-color: var(--windfaden); background: #F5E3DF; color: var(--windfaden-dunkel); }

/* 10 — Rechtstext -------------------------------------------------------- */
.rechtstext { max-width: 46rem; }
.rechtstext > * + * { margin-top: var(--luft-2); }
.rechtstext > * + h2 { margin-top: var(--luft-5); }
.rechtstext > * + h3 { margin-top: var(--luft-4); }
.rechtstext h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
.rechtstext address { font-style: normal; }
.rechtstext ul { padding-left: 1.3rem; }

.luecke {
  display: inline;
  padding: 0.05rem 0.4rem;
  background: #F5E3DF;
  border: 1px dashed var(--windfaden);
  color: var(--windfaden-dunkel);
  font-family: var(--f-display);
  font-weight: 600;
}

/* 11 — Fuss -------------------------------------------------------------- */
.fuss {
  padding-block: var(--luft-5) var(--luft-4);
  background: var(--persenning);
  color: var(--tuch);
  border-top: var(--naht-hoehe) solid var(--persenning);
  background-image: var(--naht-licht);
  background-repeat: repeat-x;
  background-position: left 1.25rem;
}

.fuss__raster {
  display: grid;
  gap: var(--luft-4);
}

.fuss__name {
  font-family: var(--f-display);
  font-size: 1.9rem;
  font-stretch: 56%;
  font-weight: 850;
  line-height: 1;
}

.fuss address { font-style: normal; margin-top: var(--luft-2); }
.fuss a { color: var(--tuch); }
.fuss a:hover { color: var(--nordseelicht); }
.fuss :focus-visible { outline-color: var(--nordseelicht); }

.fuss__links { display: grid; gap: 0.35rem; }

.fuss__links a {
  display: inline-block;
  padding-block: 0.3rem;
  font-family: var(--f-display);
  font-weight: 600;
}

.fuss__unten {
  max-width: none;
  margin-top: var(--luft-4);
  padding-top: var(--luft-2);
  border-top: 1px solid rgba(213, 222, 218, 0.35);
  font-size: var(--t-klein);
  color: var(--nordseelicht);
}

/* 12 — Styleguide -------------------------------------------------------- */
.muster {
  display: grid;
  gap: var(--luft-2);
}

.muster__feld {
  display: grid;
  grid-template-rows: 6rem auto;
  border: var(--liek);
}

.muster__farbe { background: var(--farbe); border-bottom: var(--liek); }
.muster__info { padding: var(--luft-1) 0.75rem 0.75rem; font-size: var(--t-klein); line-height: 1.45; }
.muster__info strong { display: block; font-family: var(--f-display); }

.skala { display: grid; gap: var(--luft-3); }
.skala__stufe { padding-bottom: var(--luft-2); border-bottom: 1px solid rgba(30, 36, 38, 0.25); }
.skala__stufe .klein { margin-bottom: var(--luft-1); }

.skala__riss { font-family: var(--f-display); font-size: var(--t-riss); font-stretch: 58%; font-weight: 800; line-height: 0.92; }
.skala__bahn { font-family: var(--f-display); font-size: var(--t-bahn); font-stretch: 72%; font-weight: 750; line-height: 1; }
.skala__liek { font-family: var(--f-display); font-size: var(--t-liek); font-weight: 650; line-height: 1.15; }

.vorfuehrung { display: grid; gap: var(--luft-4); }
.vorfuehrung > * + * { padding-top: var(--luft-4); border-top: 1px solid rgba(30, 36, 38, 0.25); }

/* 13 — Bewegung ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .riss__naht {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: naehen 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s forwards;
  }

  @keyframes naehen {
    to { stroke-dashoffset: 0; }
  }

  .reveal { opacity: 0; transition: opacity 400ms ease; }
  .reveal.is-visible { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 14 — Breakpoints ------------------------------------------------------- */

/* bis 859 px: Menü-Knopf, Navigation klappt */
@media (max-width: 859.98px) {
  .nav-toggle { display: inline-flex; }

  #site-nav {
    display: none;
    flex-basis: 100%;
    order: 3;
  }

  #site-nav[data-open="true"] {
    display: block;
    border-top: var(--liek);
    padding-top: var(--luft-1);
  }

  .nav__liste { display: grid; gap: 0; }

  .nav__liste li + li { border-top: 1px solid rgba(30, 36, 38, 0.2); }

  .nav__liste a {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    font-size: 1.35rem;
    font-stretch: 70%;
    font-weight: 750;
    border-bottom: 0;
  }

  .nav__liste a[aria-current="page"] { color: var(--windfaden); }
  .nav__telefon { display: block; }
  .kopf__ruf { order: 2; }
}

/* bis 559 px: Telefon */
@media (max-width: 559.98px) {
  .kopf__ruf { display: none; }
  .kopf__zusatz { font-size: 0.75rem; }

  .riss__text { padding-left: var(--luft-2); }
  .aktionen .knopf { width: 100%; justify-content: flex-start; }

  .bahn {
    width: calc(100% - var(--i) * 4%);
    padding-right: calc(var(--luft-2) + 1.75rem);
    padding-left: var(--luft-2);
    clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 100%, 0 100%);
  }

  .riss__beschriftung { font-size: 23px; }
}

/* ab 560 px */
@media (min-width: 560px) {
  .muster { grid-template-columns: repeat(2, 1fr); }
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .revier { grid-template-columns: repeat(2, 1fr); }
  .fakten { grid-template-columns: repeat(2, 1fr); }
}

/* ab 860 px: 12-Spalten-Raster */
@media (min-width: 860px) {
  .riss__raster { grid-template-columns: repeat(12, 1fr); gap: var(--luft-3); }
  .riss__text { grid-column: 1 / 7; }
  .riss__text h1 { max-width: 12ch; }
  .riss__zeichnung { grid-column: 7 / 13; }

  .zweispalter { grid-template-columns: repeat(12, 1fr); gap: var(--luft-4) var(--luft-3); }
  .zweispalter > :first-child { grid-column: 1 / 8; }
  .zweispalter > :last-child { grid-column: 8 / 13; }
  .zweispalter--breit-rechts > :first-child { grid-column: 1 / 6; }
  .zweispalter--breit-rechts > :last-child { grid-column: 6 / 13; }

  .woche__raster { grid-template-columns: 7fr 5fr; gap: var(--luft-5); align-items: end; }

  .weg { grid-template-columns: repeat(4, 1fr); gap: var(--luft-3); }
  .weg__ort { padding-left: 0; padding-top: var(--luft-4); }
  .weg__ort::before { top: 0; }
  .weg__ort::after {
    left: 1.1rem;
    right: calc(var(--luft-3) * -1);
    top: calc(0.55rem - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
  }

  .muster { grid-template-columns: repeat(3, 1fr); }
  .kacheln { grid-template-columns: repeat(3, 1fr); }
  .fakten { grid-template-columns: repeat(3, 1fr); }
  .aufruf { grid-template-columns: 7fr 5fr; }
  .aufruf .aktionen { justify-content: flex-start; }
  .fuss__raster { grid-template-columns: 5fr 4fr 3fr; }
}

/* ab 1180 px: Zeichnung läuft über den Container hinaus */
@media (min-width: 1180px) {
  .riss__zeichnung { grid-column: 7 / 13; margin-right: -6rem; margin-block: -1.5rem; }
  .riss__text h1 { max-width: 13ch; }
  .muster { grid-template-columns: repeat(6, 1fr); }
  .bahn { width: calc(100% - var(--i) * 9%); }
}

/* === leistungen: kacheln zu zweit === */
@media (min-width: 860px) {
  .kacheln--zwei { grid-template-columns: repeat(2, 1fr); gap: var(--luft-4); }
}

/* === leistungen: satz unter den kacheln === */
.kacheln-satz {
  max-width: none;
  margin-top: var(--luft-4);
  padding-top: var(--luft-2);
  border-top: 1px solid rgba(30, 36, 38, 0.25);
}

/* === leistungen: nebenblock im zweispalter === */
.nebenblock {
  padding-top: var(--luft-2);
  border-top: var(--liek);
}

.nebenblock h3 { margin-bottom: var(--luft-2); }

/* === impressum: seitenkopf klein === */
.seitenkopf--klein { --bahn-abstand: clamp(2rem, 1.25rem + 3vw, 3.5rem); }

/* === kontakt: formular und fakten als ein paar === */
main > .kontakt-paar {
  position: relative;
  padding-block: var(--bahn-abstand);
}

main > section + .kontakt-paar::before,
main > .kontakt-paar + section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--naht-hoehe);
  background-image: var(--naht-garn);
  background-repeat: repeat-x;
  background-position: left center;
  pointer-events: none;
}

.kontakt-paar .fakten { margin-top: var(--luft-3); }

@media (min-width: 860px) {
  .kontakt-paar .fakten { grid-template-columns: 1fr; }
}

/* === kontakt: karte mit vorhang === */
.karte__vorhang {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: var(--luft-1);
  padding: var(--luft-3);
  background-color: var(--nordseelicht);
  background-image:
    linear-gradient(to right, var(--kreide) 1px, transparent 1px),
    linear-gradient(to bottom, var(--kreide) 1px, transparent 1px);
  background-size: 32px 32px;
  overflow: hidden;
}

.karte__ort {
  font-family: var(--f-display);
  font-size: var(--t-liek);
  font-stretch: 85%;
  font-weight: 700;
  line-height: 1.15;
}

.knopf[hidden] { display: none; }

/* === kontakt: abstand im paar === */
.kontakt-paar section > * + * { margin-top: var(--luft-4); }