/* ==========================================================================
   components.css — wiederverwendbare Bausteine
   Reihenfolge: Signature -> Buttons -> Header -> Footer -> Karten ->
   Medien -> Accordion -> Prozess -> Zitate -> Formular -> CTA
   ========================================================================== */

/* ==========================================================================
   1. SIGNATURE: "Leitungsfuehrung"
   Monolinie mit runden Enden, feste Eckenradien, Knoten als Abzweigdose.
   Abgeleitet aus der gleichmaessigen Strichstaerke und den runden Kappen
   der Wortmarke.
   ========================================================================== */

/* Trennlinie mit Knoten — ersetzt <hr> in gestalteten Bereichen */
.wire-rule {
  position: relative;
  height: var(--wire-w);
  border: 0;
  border-radius: var(--r-pill);
  background-color: var(--c-line);
  margin-block: var(--sp-6);
}

.wire-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--sp-8);
  width: var(--wire-node);
  height: var(--wire-node);
  transform: translateY(-50%);
  border: var(--wire-w) solid var(--c-accent);
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
}

.wire-rule--invert { background-color: var(--c-line-invert); }
.wire-rule--invert::after { background-color: var(--c-surface-invert); }

/* SVG-Leitung: gemeinsame Strichvorgaben fuer alle gezeichneten Pfade */
.wire-path {
  fill: none;
  stroke: var(--c-accent);
  stroke-width: var(--wire-w);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.wire-path--idle { stroke: var(--c-line); }
.wire-path--invert-idle { stroke: var(--c-line-invert); }

.wire-node {
  fill: var(--c-surface);
  stroke: var(--c-accent);
  stroke-width: var(--wire-w);
  vector-effect: non-scaling-stroke;
}

/* Zeichen-Animation: der Pfad laeuft einmal durch, wenn er in den
   Viewport kommt (Klasse wird per IntersectionObserver gesetzt). */
.js .wire-draw {
  stroke-dasharray: var(--wire-len, 1200);
  stroke-dashoffset: var(--wire-len, 1200);
}

.js .wire-draw.is-revealed {
  transition: stroke-dashoffset var(--t-draw) var(--ease-soft);
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js .wire-draw { stroke-dashoffset: 0; }
}

/* ==========================================================================
   2. BUTTONS
   Pill-Form = runde Strichenden des Logos.
   Primaerfarbe: orange Flaeche mit Ink-Schrift (8.08:1) — die Kombination
   aus dem Logo selbst (Blitz auf Sonne).
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 2.75rem;              /* 44px Touch-Ziel */
  padding: var(--sp-3) var(--sp-5);
  border: var(--bw-line) solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease),
    color var(--t-micro) var(--ease),
    box-shadow var(--t-micro) var(--ease),
    transform var(--t-micro) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn .icon { flex: none; }

/* Pfeil wandert beim Hover — signalisiert Richtung, keine Deko */
.btn__arrow { transition: transform var(--t-micro) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(0.25rem); }

.btn--primary {
  background-color: var(--c-accent);
  color: var(--c-on-accent);
}

.btn--primary:hover {
  background-color: var(--c-accent-hover);
  color: var(--c-on-accent);
  box-shadow: var(--sh-lift);
  transform: translateY(-1px);
}

.btn--secondary {
  border-color: var(--c-line-strong);
  color: var(--c-text);
}

.btn--secondary:hover {
  border-color: var(--c-text);
  background-color: var(--c-n-100);
  color: var(--c-text);
}

/* Auf dunklem Grund */
.on-invert .btn--secondary,
.section--invert .btn--secondary,
.site-footer .btn--secondary {
  border-color: var(--c-line-invert);
  color: var(--c-text-invert);
}

.on-invert .btn--secondary:hover,
.section--invert .btn--secondary:hover,
.site-footer .btn--secondary:hover {
  border-color: var(--c-text-invert);
  background-color: var(--c-light-a06);
  color: var(--c-text-invert);
}

/* Auf oranger Flaeche kehrt sich der Primaerbutton um: Ink-Flaeche,
   weisse Schrift (16.5:1). Form und Beschriftung bleiben identisch. */
.on-accent .btn--primary {
  background-color: var(--c-brand-ink);
  color: var(--c-text-invert);
}

.on-accent .btn--primary:hover {
  background-color: var(--c-ink-deep);
  color: var(--c-text-invert);
}

.on-accent .btn--secondary {
  border-color: var(--c-ink-a35);
  color: var(--c-brand-ink);
}

.on-accent .btn--secondary:hover {
  border-color: var(--c-brand-ink);
  background-color: var(--c-ink-a06);
}

.btn--lg {
  min-height: 3.25rem;
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-md);
}

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* Textlink mit Pfeil — tertiaere Aktion */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--c-accent-ink);
  text-decoration: none;
}

.link-arrow::after {
  content: "";
  width: 1rem;
  height: var(--wire-w);
  border-radius: var(--r-pill);
  background-color: currentColor;
  transition: width var(--t-micro) var(--ease);
}

.link-arrow:hover::after { width: 1.75rem; }

/* ==========================================================================
   3. HEADER
   ========================================================================== */
/* Kein Trennstrich und keine eigene Flaeche: am Seitenanfang geht der
   Header nahtlos in den Inhalt ueber. Erst wenn Inhalt darunter durch-
   laeuft, legt er sich sichtbar darueber. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: transparent;
  transition:
    background-color var(--t-micro) var(--ease),
    box-shadow var(--t-micro) var(--ease);
}

.site-header.is-scrolled {
  background-color: var(--c-surface);
  box-shadow: var(--sh-header);
}

/* Bei offenem Mobilmenue braucht der Header eine Flaeche, sonst schwebt
   das weisse Panel unter einem durchsichtigen Streifen. */
.site-header:has(.nav-toggle[aria-expanded="true"]) {
  background-color: var(--c-surface);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  border-radius: var(--r-sm);
}

.site-logo img {
  width: auto;
  height: 2.5rem;   /* 40px */
  transition: height var(--t-micro) var(--ease);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* Telefon als sekundaere Aktion — im Handwerk der zweitwichtigste Weg */
.header-phone {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover { background-color: var(--c-n-100); color: var(--c-text); }
.header-phone .icon { color: var(--c-accent-ink); }

/* Menue-Schalter: drei Monolinien mit runden Enden = Logo-Strichsprache */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.6875rem;
  border-radius: var(--r-pill);
  cursor: pointer;
}

.nav-toggle:hover { background-color: var(--c-n-100); }

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: var(--wire-w);
  border-radius: var(--r-pill);
  background-color: var(--c-text);
  transition: transform var(--t-micro) var(--ease), opacity var(--t-micro) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Navigation — mobil als Panel unter dem Header */
.site-nav {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background-color: var(--c-surface);
  border-bottom: var(--bw-hair) solid var(--c-line);
  box-shadow: var(--sh-pop);
}

.site-nav[hidden] { display: none; }

.site-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--sp-3) var(--gutter) var(--sp-5);
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: block;
  padding: var(--sp-3) 0;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  text-decoration: none;
}

.site-nav__link:hover { color: var(--c-accent-ink); }

/* Aktiver Menuepunkt: Leitungsstueck vor dem Label */
.site-nav__link[aria-current="page"] { color: var(--c-accent-ink); }

.site-nav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(var(--sp-5) * -1);
  top: 50%;
  width: var(--sp-4);
  height: var(--wire-w);
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background-color: var(--c-accent);
}

.site-nav__cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0 var(--gutter) var(--sp-5);
}

@media (min-width: 64rem) {
  .site-logo img { height: 3.75rem; }  /* 60px */
  .nav-toggle { display: none; }
  .header-phone { display: inline-flex; }

  .site-nav {
    position: static;
    display: block !important;   /* JS-Toggle darf Desktop nicht ausblenden */
    border: 0;
    box-shadow: none;
    background: none;
    margin-inline-start: auto;
  }

  .site-nav[hidden] { display: block; }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-5);
    padding: 0;
  }

  .site-nav__link {
    padding: var(--sp-2) 0;
    font-size: var(--fs-sm);
  }

  /* Unterstreichung als Leitungsstueck, waechst beim Hover auf */
  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: var(--wire-w);
    border-radius: var(--r-pill);
    background-color: var(--c-accent);
    transition: width var(--t-micro) var(--ease);
  }

  .site-nav__link:hover::after { width: 100%; }

  .site-nav__link[aria-current="page"]::before { content: none; }
  .site-nav__link[aria-current="page"]::after { width: 100%; }

  .site-nav__cta { display: none; }
}

/* Sehr schmale Geraete: Zusatzwort im Header-CTA weglassen.
   Das aria-label am Button traegt weiterhin die vollstaendige Aktion. */
@media (max-width: 25.999rem) {
  .btn__label-extra { display: none; }
  .site-header__actions { gap: var(--sp-1); }
}

/* ==========================================================================
   4. KARTEN
   Hairline statt Schatten. Beim Hover laeuft die Leitung an der Oberkante
   auf volle Breite — "es fliesst Strom".
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background-color: var(--c-surface);
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-card);
  transition:
    border-color var(--t-micro) var(--ease),
    box-shadow var(--t-move) var(--ease),
    transform var(--t-move) var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  top: calc(var(--wire-w) * -0.5);
  left: var(--sp-6);
  width: var(--sp-7);
  height: var(--wire-w);
  border-radius: var(--r-pill);
  background-color: var(--c-line-strong);
  transition:
    width var(--t-move) var(--ease),
    background-color var(--t-micro) var(--ease);
}

.card--interactive:hover,
.card--interactive:has(a:focus-visible) {
  border-color: var(--c-line-strong);
  box-shadow: var(--sh-lift);
  transform: translateY(-2px);
}

.card--interactive:hover::before,
.card--interactive:has(a:focus-visible)::before {
  width: calc(100% - var(--sp-6) * 2);
  background-color: var(--c-accent);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-pill);
  background-color: var(--c-accent-wash);
  color: var(--c-accent-ink);
}

.card__title { font-size: var(--fs-xl); }

/* Der Kartentitel ist der Link — er soll aber wie eine Ueberschrift
   aussehen, nicht wie ein Fliesstextlink. Die Farbe wechselt erst beim
   Hover, zusammen mit der Leitung an der Oberkante. */
.card__title a {
  color: inherit;
  text-decoration: none;
}

.card--interactive:hover .card__title a,
.card--interactive:has(a:focus-visible) .card__title a { color: var(--c-accent-ink); }

.card__text {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  max-width: none;
}

.card__foot { margin-top: auto; padding-top: var(--sp-2); }

/* Ganze Karte klickbar, ohne den Link zu verschachteln */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-card);
}

.card--flat {
  background-color: var(--c-surface-alt);
  border-color: transparent;
}

.card--flat::before { content: none; }

/* Aufzaehlung innerhalb einer Karte */
.check-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.check-list li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  color: var(--c-text-muted);
}

.check-list .icon { color: var(--c-accent-ink); margin-top: 0.2em; }

.section--invert .check-list li { color: var(--c-text-invert-mute); }
.section--invert .check-list .icon { color: var(--c-accent); }

/* ==========================================================================
   5. MEDIEN-PLATZHALTER
   Bewusst als Platzhalter erkennbar (Schraffur + Bildbeschreibung),
   aber im Systemstil. Seitenverhaeltnis fix -> kein Layout-Shift.
   ========================================================================== */
.media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ar-card);
  padding: var(--sp-5);
  overflow: hidden;
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-card);
  background-color: var(--c-n-100);
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 9px,
    var(--c-n-200) 9px,
    var(--c-n-200) 10px
  );
}

.media--hero      { aspect-ratio: var(--ar-hero); }
.media--wide      { aspect-ratio: var(--ar-wide); }
.media--portrait  { aspect-ratio: var(--ar-portrait); }
.media--square    { aspect-ratio: var(--ar-square); }

.media__note {
  max-width: 26ch;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  background-color: var(--c-surface);
  color: var(--c-n-500);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  text-align: center;
}

.media__note b {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

/* Echtes Bild ersetzt spaeter .media__note — Klasse bleibt bestehen */
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   6. ACCORDION (FAQ)
   Button + Region, aria-expanded gesteuert. Hoehe animiert ueber
   grid-template-rows, damit kein max-height-Raten noetig ist.
   ========================================================================== */
.accordion { border-top: var(--bw-hair) solid var(--c-line); }

.accordion__item { border-bottom: var(--bw-hair) solid var(--c-line); }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
  padding: var(--sp-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--c-text);
  cursor: pointer;
  transition: color var(--t-micro) var(--ease);
}

.accordion__trigger:hover { color: var(--c-accent-ink); }

/* Plus/Minus aus zwei Monolinien mit runden Enden */
.accordion__icon {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--wire-w);
  margin-top: calc(var(--wire-w) * -0.5);
  border-radius: var(--r-pill);
  background-color: var(--c-accent-ink);
  transition: transform var(--t-move) var(--ease);
}

.accordion__icon::after { transform: rotate(90deg); }

.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(0deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-move) var(--ease);
}

.accordion__panel > div { overflow: hidden; }

.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }

.accordion__body {
  padding-bottom: var(--sp-5);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.accordion__body > * + * { margin-top: var(--sp-3); }

/* ==========================================================================
   7. PROZESS
   Die Nummerierung traegt hier echte Information: die Schritte laufen
   in dieser Reihenfolge ab. Die Leitung verbindet sie sichtbar.
   ========================================================================== */
.process {
  position: relative;
  display: grid;
  gap: var(--sp-7);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* Mobil: senkrechte Leitung links durch alle Knoten */
.process::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: calc(1.5rem - var(--wire-w) / 2);
  width: var(--wire-w);
  border-radius: var(--r-pill);
  background-color: var(--c-accent);
}

.process__item {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--sp-5);
  align-items: start;
  counter-increment: step;
}

.process__node {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: var(--wire-w) solid var(--c-accent);
  border-radius: var(--r-pill);
  background-color: var(--c-surface);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-text);
}

.process__node::before { content: counter(step, decimal-leading-zero); }

.process__title { font-size: var(--fs-lg); margin-bottom: var(--sp-3); }

.process__text {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.section--alt .process__node { background-color: var(--c-surface-alt); }

@media (min-width: 56rem) {
  .process {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
  }

  /* Desktop: waagrechte Leitung auf Knotenhoehe, exakt von Knotenmitte 1
     bis Knotenmitte 4. Bei vier Spalten mit drei Luecken liegt die erste
     Knotenmitte bei (100% - 3 Luecken) / 8. */
  .process::before {
    top: calc(1.5rem - var(--wire-w) / 2);
    bottom: auto;
    left: calc((100% - 3 * var(--sp-6)) / 8);
    right: calc((100% - 3 * var(--sp-6)) / 8);
    width: auto;
    height: var(--wire-w);
  }

  .process__item {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    justify-items: center;
    text-align: center;
  }

  .process__text { max-width: 30ch; }
}

/* ==========================================================================
   8. ZITATE / TESTIMONIALS
   ========================================================================== */
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  height: 100%;
  padding: var(--sp-6);
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-card);
  background-color: var(--c-surface);
}

.quote__text {
  flex: 1;
  max-width: none;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

.quote__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: var(--bw-hair) solid var(--c-line);
}

.quote__avatar {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  overflow: hidden;
}

.quote__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

.quote__meta {
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

/* ==========================================================================
   9. KENNZAHLEN / TRUST-LEISTE
   ========================================================================== */
.trustbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--sp-5) var(--sp-6);
  padding-block: var(--sp-6);
  border-block: var(--bw-hair) solid var(--c-line);
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--ls-display);
}

.stat__value span { color: var(--c-accent-ink); }

.stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
}

.section--invert .stat__value span { color: var(--c-accent); }
.section--invert .stat__label { color: var(--c-text-invert-mute); }
.section--invert .trustbar { border-color: var(--c-line-invert); }

/* ==========================================================================
   10. TAGS
   ========================================================================== */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border: var(--bw-hair) solid var(--c-line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-muted);
  white-space: nowrap;
}

.tag--accent {
  border-color: transparent;
  background-color: var(--c-accent-wash);
  color: var(--c-accent-ink);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   11. FORMULAR
   ========================================================================== */
.form {
  display: grid;
  gap: var(--sp-5);
}

.form__grid {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 40rem) {
  .form__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field {
  display: grid;
  gap: var(--sp-2);
}

.field__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--c-text);
}

.field__label .req { color: var(--c-accent-ink); }

.field__hint {
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: var(--bw-hair) solid var(--c-line-strong);
  border-radius: var(--r-input);
  background-color: var(--c-surface);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  transition:
    border-color var(--t-micro) var(--ease),
    box-shadow var(--t-micro) var(--ease),
    background-color var(--t-micro) var(--ease);
}

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

.field select {
  appearance: none;
  padding-right: var(--sp-8);
  /* Pfeil als Monolinie, inline kodiert damit kein Extra-Request entsteht */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235C5658' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 1.125rem;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--c-n-400); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-accent-ink);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: var(--bw-line) solid var(--c-focus);
  outline-offset: 2px;
}

.field [aria-invalid="true"] {
  border-color: var(--c-danger);
  background-color: var(--c-danger-wash);
}

.field__error {
  display: none;
  align-items: start;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--c-danger);
}

/* Warnzeichen als Bild statt als Textzeichen: JS schreibt nur den
   Meldungstext, das Symbol bleibt unberuehrt. */
.field__error::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.1em;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21 20H3zM12 10v4M12 17.2v.1'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21 20H3zM12 10v4M12 17.2v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Fehlermeldung erscheint nur, wenn das Feld auch wirklich ungueltig ist */
.field:has([aria-invalid="true"]) .field__error { display: flex; }

/* Checkbox-Zeile (Einwilligung) */
.field--check {
  grid-template-columns: 1.25rem 1fr;
  align-items: start;
  gap: var(--sp-3);
}

.field--check input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15em;
  padding: 0;
  accent-color: var(--c-accent-ink);
}

.field--check .field__label {
  font-weight: var(--fw-regular);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
}

.field--check .field__error { grid-column: 1 / -1; }

/* Honeypot: fuer Menschen und Screenreader unsichtbar, fuer Bots verlockend */
.form__trap {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  display: flex;
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: var(--bw-hair) solid var(--c-success);
  border-radius: var(--r-card);
  background-color: var(--c-success-wash);
  font-size: var(--fs-sm);
}

.form__status .icon { flex: none; color: var(--c-success); margin-top: 0.15em; }

.form__status--error {
  border-color: var(--c-danger);
  background-color: var(--c-danger-wash);
}

.form__status--error .icon { color: var(--c-danger); }

.form__status[hidden] { display: none; }

.form__note {
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

/* ==========================================================================
   12. CTA-BAND
   Orange Vollflaeche mit Ink-Schrift — die einzige laute Flaeche pro Seite.
   Genau die Farbkombination des Logos.
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--c-surface-accent);
  color: var(--c-brand-ink);
  padding-block: var(--sp-section);
}

.cta-band h2 { color: var(--c-brand-ink); }

.cta-band__inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 56rem) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-8);
  }

  .cta-band .btn-row { justify-content: flex-end; }
}

.cta-band__text {
  max-width: 46ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  color: var(--c-ink-a78);
}

/* Angeschnittener Bogen — zitiert den offenen Kreis um die Wortmarke.
   Einmal pro Seite, gross, sonst nichts. */
.cta-band__arc {
  position: absolute;
  top: 50%;
  right: -6rem;
  width: 34rem;
  height: 34rem;
  transform: translateY(-50%);
  border: var(--bw-line) solid var(--c-ink-a16);
  border-radius: var(--r-pill);
  border-right-color: transparent;
  border-top-color: transparent;
  pointer-events: none;
}

@media (max-width: 55.999rem) {
  .cta-band__arc { right: -14rem; opacity: 0.7; }
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer {
  background-color: var(--c-surface-invert);
  color: var(--c-text-invert-mute);
  font-size: var(--fs-sm);
}

.site-footer__main {
  display: grid;
  gap: var(--sp-7);
  padding-block: var(--sp-8);
}

@media (min-width: 48rem) {
  .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .site-footer__main {
    grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr));
    gap: var(--sp-8);
  }
}

.site-footer__brand img {
  width: auto;
  height: 2.25rem;
  margin-bottom: var(--sp-4);
}

.site-footer__claim {
  max-width: 34ch;
  color: var(--c-text-invert-mute);
  font-size: var(--fs-sm);
}

/* Kleines Versalien-Label ueber einer Gruppe. .label-head auf hellem,
   .footer-head auf dunklem Grund — sonst steht weisse Schrift auf Weiss. */
.label-head,
.footer-head {
  margin-bottom: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-text);
}

.footer-head { color: var(--c-text-invert); }

.footer-list {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Gilt fuer alle Links im dunklen Footer, auch fuer die Rechtslinks in
   der Fusszeile — Akzent-Braun auf Ink traegt nur 3:1 und faellt durch. */
.site-footer a:not(.btn) {
  color: var(--c-text-invert-mute);
  text-decoration: none;
}

.site-footer a:not(.btn):hover { color: var(--c-accent); }

.site-footer address {
  display: grid;
  gap: var(--sp-3);
}

.footer-contact-row {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--sp-3);
  align-items: start;
}

.footer-contact-row .icon { color: var(--c-accent); margin-top: 0.15em; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-5);
  border-top: var(--bw-hair) solid var(--c-line-invert);
  font-size: var(--fs-2xs);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ==========================================================================
   14. ICONS
   Inline-SVG, Strichstaerke 2px mit runden Enden — dieselbe Strichsprache
   wie Logo und Leitungsfuehrung. Keine Icon-Font, keine Emoji.
   ========================================================================== */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 1.5rem; height: 1.5rem; }

/* ==========================================================================
   15. EINWILLIGUNGSDIALOG
   Standardmaessig nicht sichtbar — das Modul in js/consent.js ist inaktiv,
   solange die Seite keine fremden Ressourcen laedt. Die Stile stehen bereit,
   damit beim Aktivieren nichts nachgebaut werden muss.
   ========================================================================== */
.consent {
  position: fixed;
  z-index: var(--z-overlay);
  inset: auto var(--sp-4) var(--sp-4);
  max-width: 34rem;
  padding: var(--sp-6);
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-card);
  background-color: var(--c-surface);
  box-shadow: var(--sh-pop);
}

.consent__title { font-size: var(--fs-lg); }

.consent__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.consent__options {
  display: grid;
  gap: var(--sp-3);
  margin-block: var(--sp-5);
}

.consent__option {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  border: var(--bw-hair) solid var(--c-line);
  border-radius: var(--r-input);
  cursor: pointer;
}

.consent__option:hover { border-color: var(--c-line-strong); }

.consent__option input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1em;
  accent-color: var(--c-accent-ink);
}

.consent__option-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}

.consent__option-text {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.consent__actions .btn { flex: 1 1 auto; }

.consent__legal {
  margin-top: var(--sp-4);
  font-size: var(--fs-2xs);
}

@media (max-width: 30rem) {
  .consent { inset: auto 0 0; max-width: none; border-radius: var(--r-card) var(--r-card) 0 0; }
}

/* Auf schmalen Displays wird ein 16:9-Platzhalter so flach, dass die
   Bildbeschreibung nicht mehr hineinpasst. Dort ein hoeheres Verhaeltnis. */
@media (max-width: 40rem) {
  .media--wide,
  .map-embed { aspect-ratio: var(--ar-card); }
}