/* --- 01-tokens.css --- */
/* ==========================================================================
   Gestaltungswerte (aus design/gestaltungssystem/tokens.json)
   Nur helles Erscheinungsbild, kein Dunkelmodus.
   ========================================================================== */

:root {
  /* Markenfarben: nur für Flächen, Linien und Symbole, nie für Text auf Weiß */
  --logo-green: #65a688;
  --logo-mint: #8fbfa9;

  /* Aktionen: Knopfflächen, Fokusrahmen, Symbole */
  --action: #3a7d5f;
  --action-hover: #2f6a50;
  --action-active: #24553f;

  /* Grüne Schrift (Links, Kategoriezeilen, Kontaktdaten, Filter).
     Dunkler als --action, damit sie auch auf tint
     mindestens 4,5 : 1 erreicht (geprüft in tests/kontrast.test.mjs). */
  --action-text: #2f6a50;
  --action-text-hover: #24553f;

  /* Flächen */
  --surface: #ffffff;
  --surface-soft: #f2f7f4;
  --tint: #dfece5;
  --tint-hover: #cfe3d8;
  --tint-active: #c2dbcd;

  /* Text */
  --ink: #1e2b25;
  --ink-muted: #55655d;
  --ink-inverse: #ffffff;

  /* Linien */
  --line: #d5e2db;
  --line-strong: #7a9488;

  --error: #b3261e;
  --star: #f4b400;

  /* Schrift */
  --font-sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-hand: "Caveat", cursive;

  /* Raster */
  --content-max: 1200px;
  --gutter: 2rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
}

@media (max-width: 600px) {
  :root {
    --gutter: 1rem;
  }
}

/* --- 02-base.css --- */
/* ==========================================================================
   Schriften (selbst gehostet) und Grundregeln
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/caveat-600-latin.woff2") format("woff2");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Fokussierte Elemente und Sprungziele nicht unter festem Header oder der
   Leiste am Handy verstecken (Header 107 px, eingeklappt 85 px, Handy 73 px) */
html {
  scroll-padding-top: 8.25rem;
  /* Beim Antippen zeigen die Bedienelemente ihren eigenen Klick-State
     (:active); das graue Aufblitzen des Browsers käme doppelt dazu */
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1100px) {
  html {
    scroll-padding-top: 6.25rem;
  }
}

@media (max-width: 800px) {
  html {
    scroll-padding-top: 5.5rem;
    scroll-padding-bottom: 5.5rem;
  }
}

/* Sprunglink zum Inhalt: erscheint erst bei Tastaturfokus */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1.125rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  font-weight: 700;
}

.skip-link:focus {
  top: 16px;
}

/* Ziel des Sprunglinks; <main> selbst ist nicht bedienbar */
main:focus {
  outline: none;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  /* Sicherheitsnetz: ein Wort, das gar nicht in die Zeile passt, bricht um,
     statt über den Rand zu ragen (Platzhalter, lange Adressen). Lange Wörter
     in Überschriften bekommen im Text eine feste Trennstelle (&shy;),
     z. B. Handwerks&shy;betriebe; automatische Silbentrennung trennt an
     falschen Stellen und auch dort, wo es nicht nötig ist. */
  overflow-wrap: break-word;
}

/* Die festen Trennstellen gelten nur am Handy; breiter passt das Wort in
   eine Zeile und soll nicht getrennt werden */
@media (min-width: 601px) {
  h1,
  h2,
  h3,
  h4 {
    -webkit-hyphens: none;
    hyphens: none;
  }
}

/* Wörter mit Bindestrich in Überschriften (3D-Druck) setzt der Build in
   .nobr (tools/bindestrich.mjs): Sie wandern als Ganzes in die nächste Zeile
   und brechen nur am Bindestrich, wenn sie allein nicht in die Zeile passen.
   Die Unterstreichung eines Links reicht nicht in ein inline-block hinein,
   deshalb übernimmt die Klammer sie selbst. */
.nobr {
  display: inline-block;
  text-decoration: inherit;
}

a {
  color: var(--action-text);
}

a:hover {
  color: var(--action-text-hover);
}

/* <picture> aus dem Build soll das Layout nicht verändern */
picture {
  display: contents;
}

/* width/height im HTML geben nur das Seitenverhältnis vor; die Größe kommt aus dem CSS */
img {
  height: auto;
}

/* sonst zählen die <source>-Elemente in Flex-Layouts als Lücke mit */
picture > source {
  display: none;
}

/* hidden gilt auch für Elemente mit eigenem display-Wert */
[hidden] {
  display: none !important;
}

input,
textarea,
select,
button {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

details summary {
  list-style: none;
  cursor: pointer;
}

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

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* --- 03-layout.css --- */
/* ==========================================================================
   Layout: Abschnitte, Inhaltsbreite und Anordnungs-Bausteine
   ========================================================================== */

/* --- Abschnitte ----------------------------------------------------------
   .section     Seitenrand links/rechts und Standardabstand oben/unten
   .section--*  abweichende Abstände oder Hintergrund
   .section-y   am Handy einheitlich 64 px oben und unten               */

.section {
  padding: 6rem var(--gutter);
}

.section--soft {
  background: var(--surface-soft);
}

.section--tint {
  background: var(--tint);
}

.section--hero {
  padding-top: 4.5rem;
  padding-bottom: 6rem;
}

.section--intro {
  padding-top: 2rem;
  padding-bottom: 5.5rem;
}

.section--intro-short {
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

.section--intro-tight {
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}

.section--flush-top {
  padding-top: 0;
}

.section--flush-top-short {
  padding-top: 0;
  padding-bottom: 4.5rem;
}

.section--flush-bottom {
  padding-top: 4.5rem;
  padding-bottom: 0;
}

@media (max-width: 600px) {
  .section-y {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* Großer Bildschirm (volle Menüzeile): Abschnitte rücken enger zusammen,
   damit mehr als der Einstieg auf den ersten Bildschirm passt. Alle
   Abwandlungen stehen hier noch einmal, sonst überschriebe .section sie. */
@media (min-width: 1101px) {
  .section {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }

  .section--hero {
    padding-top: 3.5rem;
    padding-bottom: 4.5rem;
  }

  .section--intro {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }

  .section--intro-short {
    padding-top: 2rem;
    padding-bottom: 2.75rem;
  }

  .section--intro-tight {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }

  .section--flush-top {
    padding-top: 0;
  }

  .section--flush-top-short {
    padding-top: 0;
    padding-bottom: 3.5rem;
  }

  .section--flush-bottom {
    padding-top: 3.5rem;
    padding-bottom: 0;
  }
}

/* --- Inhaltsbreite ------------------------------------------------------- */

.container {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

.container--narrow {
  max-width: 880px;
}

/* --- Anordnung ----------------------------------------------------------- */

/* Untereinander */
.stack {
  display: flex;
  flex-direction: column;
}

/* Nebeneinander mit Umbruch */
.cluster {
  display: flex;
  flex-wrap: wrap;
}

/* Text und Bild nebeneinander, mittig ausgerichtet */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3.5rem;
}

/* Raster mit automatischer Spaltenzahl; Mindestbreite über Modifikator.
   min(…, 100%): ist der Platz schmaler als die Mindestbreite, füllt die Spalte
   ihn aus, statt seitlich überzustehen. */
.grid {
  --grid-min: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
  gap: 1.5rem;
}

.grid--210 { --grid-min: 210px; }
.grid--240 { --grid-min: 240px; }
.grid--260 { --grid-min: 260px; }
.grid--280 { --grid-min: 280px; }
.grid--300 { --grid-min: 300px; }
.grid--320 { --grid-min: 320px; }
.grid--340 { --grid-min: 340px; }

/* Spalten in .cluster/.split: wachsen mit, Zahl = Grundbreite in px */
[class*="col-"] {
  min-width: 0;
}

.col-320 { flex: 1 1 320px; }
.col-340 { flex: 1 1 340px; }
.col-360 { flex: 1 1 360px; }
.col-380 { flex: 1 1 380px; }
.col-400 { flex: 1 1 400px; }
.col-420 { flex: 1 1 420px; }
.col-440 { flex: 1 1 440px; }
.col-460 { flex: 1 1 460px; }
.col-480 { flex: 1 1 480px; }
.col-500 { flex: 1 1 500px; }
.col-520 { flex: 1 1 520px; }

.span-all {
  grid-column: 1 / -1;
}

.scroll-x {
  overflow-x: auto;
}

/* --- Hintergründe --------------------------------------------------------
   .layers  Wabenmuster, nur im Ablauf und im Anfrage-Block, am Handy aus */

.layers {
  position: relative;
  overflow: hidden;
}

.layers::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../img/wabenmuster.svg");
  background-size: 42px auto;
  -webkit-mask-image: radial-gradient(ellipse 55% 85% at 88% 50%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 55% 85% at 88% 50%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
}

.layers--soft::before {
  opacity: .6;
  -webkit-mask-image: linear-gradient(to right, transparent 35%, #000 100%);
  mask-image: linear-gradient(to right, transparent 35%, #000 100%);
}

.layers--cta::before {
  opacity: .7;
  -webkit-mask-image: linear-gradient(to right, transparent 45%, #000 100%);
  mask-image: linear-gradient(to right, transparent 45%, #000 100%);
}

.layers > * {
  position: relative;
}

/* .bg-raster  feines Millimeterraster wie auf einer Zeichnung (Einstieg, Ablauf);
   --ruled zieht oben und unten eine Linie */
.bg-raster {
  background-color: #fbfdfc;
  background-image:
    linear-gradient(#e6efea 1px, transparent 1px),
    linear-gradient(90deg, #e6efea 1px, transparent 1px);
  background-size: 24px 24px;
}

.bg-raster--ruled {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 760px) {
  .layers::before {
    display: none;
  }
}

/* --- 04-typography.css --- */
/* ==========================================================================
   Schrift: Überschriften, Fließtext, technische Angaben, Textlinks
   ========================================================================== */

/* --- Kategoriezeile über Überschriften ----------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action-text);
}

/* Drei Balken als Schichtsymbol vor der Kategoriezeile */
.eyebrow--bars::before {
  content: "";
  flex: none;
  width: 18px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'%3E%3Cg fill='%238fbfa9'%3E%3Crect x='1' width='3' height='14' rx='1.5'/%3E%3Crect x='7.5' y='3' width='3' height='11' rx='1.5'/%3E%3Crect x='14' width='3' height='14' rx='1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
}

/* --- Überschriften ------------------------------------------------------- */

.page-title {
  margin: 0;
  font-size: 3rem;
  line-height: 3.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.page-title--sm {
  font-size: 2.75rem;
  line-height: 3.125rem;
}

@media (max-width: 600px) {
  .page-title {
    font-size: 2.125rem;
    line-height: 2.5rem;
  }

  .page-title--compact {
    font-size: 2rem;
    line-height: 2.375rem;
  }
}

.section-title {
  margin: 0;
  font-size: 2rem;
  line-height: 2.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.title-lg {
  margin: 0;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}

.title-md {
  margin: 0;
  font-size: 1.625rem;
  line-height: 2rem;
  font-weight: 700;
}

.title-sm {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.625rem;
  font-weight: 700;
}

.title-xs {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 700;
}

.teaser-title {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.6875rem;
  font-weight: 700;
}

.aside-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 700;
}

/* Kartenüberschriften mit kleinem Abstand nach oben */
.card-title-lg,
.card-title-md,
.card-title,
.card-title-sm {
  margin: 0.25rem 0 0;
  font-weight: 700;
}

.card-title-lg { font-size: 1.5rem; line-height: 1.875rem; }
.card-title-md { font-size: 1.375rem; line-height: 1.75rem; }
.card-title    { font-size: 1.25rem; line-height: 1.625rem; }
.card-title-sm { font-size: 1.125rem; line-height: 1.5rem; }

.mono-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 600;
}

/* --- Fließtext ----------------------------------------------------------- */

/* Einleitungssatz unter der Hauptüberschrift */
.lead {
  margin: 0;
  max-width: 600px;
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.lead--narrow { max-width: 560px; }
.lead--wide   { max-width: 720px; }
.lead--full   { max-width: none; }

/* Großer Bildschirm (volle Menüzeile): Überschriften und Einleitung etwas
   kleiner, damit die Seite nicht wie aus zu kurzer Entfernung wirkt.
   Fließtext und alles bis 1100 px bleiben unverändert. */
@media (min-width: 1101px) {
  .page-title {
    font-size: 2.5rem;
    line-height: 2.875rem;
  }

  .page-title--sm {
    font-size: 2.375rem;
    line-height: 2.75rem;
  }

  .section-title {
    font-size: 1.75rem;
    line-height: 2.125rem;
  }

  .title-lg {
    font-size: 1.625rem;
    line-height: 2rem;
  }

  .title-md {
    font-size: 1.5rem;
    line-height: 1.875rem;
  }

  .lead {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.text-lg {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.875rem;
}

.text-body {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6875rem;
}

.text-body-muted {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6875rem;
  color: var(--ink-muted);
}

.text-muted {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--ink-muted);
}

.text-small {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: var(--ink-muted);
}

.text-xs {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink-muted);
}

.list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.list--muted {
  color: var(--ink-muted);
}

/* --- Technische Angaben (Maße, Material, Stückzahl) ---------------------- */

.mono {
  font-family: var(--font-mono);
}

.spec {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.spec-small {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: var(--ink-muted);
}

/* --- Textlinks: immer grün und unterstrichen ----------------------------- */

.tlink {
  color: var(--action-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--logo-mint);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.tlink:hover {
  color: var(--action-text-hover);
  text-decoration-color: var(--action-text-hover);
}

/* Beim Drücken: Fläche hinter dem Link. Der Schatten verbreitert sie, ohne
   das Layout zu verschieben; clone wiederholt sie auf jeder Zeile. Gilt für
   alles, was wie ein Textlink aussieht. */
.tlink:active,
.linkbtn:active,
.filters button:active,
.card-media:has(.card__media-link:active) .tlink,
.header-contact__item:active .header-contact__value {
  color: var(--action-text-hover);
  text-decoration-color: var(--action-text-hover);
  background: var(--tint-hover);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 4px var(--tint-hover);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.tlink--strong {
  font-weight: 700;
}

/* Übernimmt die Schriftstärke des umgebenden Textes */
.tlink--inherit {
  font-weight: inherit;
}

/* Link mit Pfeilsymbol */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
}

/* --- 05-components.css --- */
/* ==========================================================================
   Bausteine, die auf mehreren Seiten vorkommen
   ========================================================================== */

/* --- Knöpfe --------------------------------------------------------------
   Alle Größen haben einen 2px-Rahmen, damit gefüllte und umrandete Knöpfe
   gleich hoch sind.                                                        */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--action);
  color: var(--ink-inverse);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s;
}

.btn:hover {
  background: var(--action-hover);
  color: var(--ink-inverse);
}

.btn--lg { padding: 1rem 1.625rem; }
.btn--md { padding: 0.75rem 1.25rem; }
.btn--sm { padding: 0.625rem 1.25rem; font-size: 1rem; line-height: 1.375rem; }

.btn--block {
  min-height: 48px;
  padding: 0 1rem;
  font-size: 1rem;
}

.btn--outline {
  background: var(--surface);
  border-color: var(--action);
  color: var(--action);
}

.btn--outline:hover {
  background: var(--surface-soft);
  color: var(--action);
}

/* Beim Drücken: eine Stufe kräftiger als beim Darüberfahren und leicht
   eingedrückt, ohne Übergang, damit auch ein kurzer Tipp sichtbar ist */
.btn:active {
  background: var(--action-active);
  transform: scale(.97);
  transition: none;
}

.btn--outline:active {
  background: var(--tint);
}

/* Knopfreihe unter einem Text */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

/* --- Brotkrumen ---------------------------------------------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink-muted);
}

/* --- Abschnittskopf ------------------------------------------------------ */

.section-head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 720px;
}

/* Kopf links, Link rechts daneben */
.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

/* --- Karten --------------------------------------------------------------
   Karten sind nie als Ganzes klickbar; das Ziel steht als Link darin.     */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.card--soft {
  background: var(--surface-soft);
}

.card--lg {
  padding: 1.75rem;
}

/* Karte mit Bild oben */
.card-media {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Das Foto führt zum selben Ziel wie der Link in der Karte. Es ist kein
   eigener Tab-Halt; beim Darüberfahren zeigt der Link in der Karte, wohin es geht. */
.card__media-link {
  display: block;
}

.card-media:has(.card__media-link:hover) .tlink {
  color: var(--action-text-hover);
  text-decoration-color: var(--action-text-hover);
}

.card__img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--tint);
}

.card__placeholder {
  aspect-ratio: 4 / 3;
  background: var(--tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.card__body {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Foto auf heller Fläche mit Innenabstand, damit alle Bilder gleich ruhig wirken */
.card-media--framed .card__media-link {
  padding: 1rem;
  background: var(--surface-soft);
}

.card-media--framed .card__img {
  border-radius: var(--radius-md);
}

/* Karte hebt sich beim Darüberfahren leicht an; klickbar bleibt nur der Link darin */
.card--lift {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card--lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(30, 43, 37, .10);
  border-color: var(--logo-green);
}

@media (prefers-reduced-motion: reduce) {
  .card--lift {
    transition: none;
  }

  .card--lift:hover {
    transform: none;
  }
}

/* Technische Angabe am unteren Kartenrand */
.card__spec {
  margin: auto 0 0;
  padding-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: var(--ink-muted);
}

/* --- Flächen ohne Link (Vergleiche, Hinweise) ---------------------------- */

.panel {
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.panel--soft {
  background: var(--surface-soft);
}

.panel--outline {
  border: 1px solid var(--line);
}

.panel--white {
  background: var(--surface);
}

.box {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* --- Symbole ------------------------------------------------------------- */

.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--tint);
  color: var(--action);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-tile--sm {
  flex: none;
  width: 44px;
  height: 44px;
}

.icon-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.stars {
  display: inline-flex;
  gap: 0.125rem;
}

/* Offizielles Google-G vor jeder Google-Bewertung, nie umfärben */
.g-logo {
  flex-shrink: 0;
  display: block;
}

/* Google-Bewertung: Sterne, Wert und Link in einer Zeile */
.rating {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: var(--ink-muted);
}

.rating__value {
  color: var(--ink);
  font-weight: 700;
}

/* etwas Luft zwischen Note und „bei Google“ */
.rating__value,
.rating__num {
  margin-right: 0.25rem;
}

.rating--lg {
  font-size: 1.0625rem;
  line-height: 1.625rem;
}

/* --- Bilder und Foto-Platzhalter ----------------------------------------- */

.media-img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  width: 100%;
  object-fit: cover;
  display: block;
  background: var(--tint);
}

/* Platzhalter für Fotos, die Jonas noch liefert */
.placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--tint);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.placeholder--wide     { aspect-ratio: 16 / 9; }
.placeholder--16-10    { aspect-ratio: 16 / 10; }
.placeholder--panorama { aspect-ratio: 16 / 7; }
.placeholder--portrait { aspect-ratio: 4 / 5; }

/* --- Nummerierte Schritte ------------------------------------------------ */

.steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.step__num {
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.0625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.num-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.num-list__item {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
}

.num-list__text {
  padding-top: 0.125rem;
  font-size: 1.0625rem;
  line-height: 1.6875rem;
}

.num-badge {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Ablauf: große Ziffern, gestrichelte Linie bis zum nächsten Schritt -- */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.5rem;
}

.timeline__step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.timeline__num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 2.75rem;
  line-height: 1;
  font-weight: 600;
  color: var(--action-text);
}

.timeline__num::after {
  content: "";
  flex: 1;
  border-top: 2px dashed var(--logo-mint);
}

.timeline__step:last-child .timeline__num::after {
  flex: none;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--action);
}

.timeline__tag {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 600;
  vertical-align: middle;
}

/* --- Häufige Fragen ------------------------------------------------------ */

.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.375rem 0;
  font-size: 1.1875rem;
  line-height: 1.625rem;
  font-weight: 700;
}

/* Beim Drücken: Fläche über die Zeile, seitlich etwas über den Text hinaus */
.faq__question:active {
  background: var(--tint);
  box-shadow: -12px 0 var(--tint), 12px 0 var(--tint);
}

.faq__plus {
  transition: transform .15s;
}

.faq__item[open] .faq__plus {
  transform: rotate(45deg);
}

.faq__answer {
  margin: 0 0 1.375rem;
  font-size: 1.0625rem;
  line-height: 1.6875rem;
  color: var(--ink-muted);
}

/* --- Anfrage-Block am Seitenende ----------------------------------------- */

.cta-box {
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--tint);
  border-radius: var(--radius-lg);
  padding: 3.5rem 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
}

.cta-box__text {
  flex: 1 1 460px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cta-box__lead {
  margin: 0;
  max-width: 560px;
  font-size: 1.0625rem;
  line-height: 1.6875rem;
  color: var(--ink-muted);
}

.cta-box__actions {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

/* Eigene Fläche in Boxfarbe, damit das Wabenmuster nicht hinter Telefon und
   WhatsApp läuft; der negative Rand hält den Text bündig mit dem Knopf */
.cta-box__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin: -0.375rem -0.75rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--tint);
  font-size: 0.9375rem;
}

/* --- Vergleichstabelle --------------------------------------------------- */

.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.5rem;
}

.cmp--wide {
  min-width: 860px;
}

.cmp th,
.cmp td {
  text-align: left;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.cmp thead th {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--ink-muted);
  border-bottom: 2px solid var(--line-strong);
}

.cmp tbody th {
  font-weight: 700;
}

/* Erste Spalte als feste Zeilenbeschriftung */
.cmp--rowhead tbody th {
  width: 30%;
}

/* --- Längere Texte (Ratgeber, Projektberichte) --------------------------- */

.prose p {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  line-height: 1.875rem;
}

.prose ul,
.prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.875rem;
}

.prose li {
  margin-bottom: 0.375rem;
}

.prose h2 {
  margin: 2.75rem 0 0.875rem;
  font-size: 1.625rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  scroll-margin-top: 9.375rem;
}

/* --- Weiterführende Links, Fußnoten -------------------------------------- */

.link-row {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.6875rem;
}

.footnote {
  max-width: var(--content-max);
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-muted);
}

@media (max-width: 600px) {
  .cmp th,
  .cmp td {
    padding: 0.75rem 0.5rem;
    font-size: 0.9375rem;
  }

  .prose p,
  .prose ul,
  .prose ol {
    font-size: 1.0625rem;
    line-height: 1.75rem;
  }
}

/* --- 06-header.css --- */
/* ==========================================================================
   Header: Logo, Kontaktdaten oben rechts, Menüzeile darunter

   Verbindliche Stufen:
   <= 1240 px  E-Mail ausblenden
   <= 1100 px  Menüzeile wird zum Knopf „Menü“
   <= 1000 px  WhatsApp ausblenden
   <=  800 px  nur rundes Telefon-Symbol und Menü-Knopf; Header weicht beim
               Runterscrollen aus (Klasse .is-hidden aus site-header.js)
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  transition: transform .3s ease;
}

.site-header__bar {
  max-width: var(--content-max);
  height: 84px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.site-header__cta {
  flex: none;
  font-size: 1rem;
}

/* --- Logo und Name: beide Zeilen exakt gleich breit ---------------------- */

.brand {
  flex: none;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand:active {
  opacity: .7;
}

.brand__logo {
  display: block;
  width: auto;
  height: 56px;
}

.brand__text {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1875rem;
}

.brand__name {
  font-size: 1.3125rem;
  line-height: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand__claim {
  margin-right: -0.107em;
  font-size: 0.71875rem;
  line-height: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.107em;
  text-transform: uppercase;
  color: var(--action);
}

/* --- Kontaktdaten -------------------------------------------------------- */

.header-contact {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.header-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--ink);
  text-decoration: none;
}

.header-contact__icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--action);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s;
}

.header-contact__text {
  display: flex;
  flex-direction: column;
}

.header-contact__label {
  font-size: 0.78125rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.header-contact__value {
  font-size: 1.0625rem;
  line-height: 1.375rem;
  font-weight: 700;
  color: var(--action-text);
  text-decoration: underline;
  text-decoration-color: var(--logo-mint);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.header-contact__value--mono {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.header-contact__item:hover .header-contact__value {
  color: var(--action-text-hover);
  text-decoration-color: var(--action-text-hover);
}

.header-contact__item:hover .header-contact__icon {
  background: var(--tint-hover);
}

.header-contact__item:active .header-contact__icon {
  background: var(--tint-active);
  transition: none;
}

/* --- Menü-Knopf (erst ab 1100 px abwärts sichtbar) ----------------------- */

.menu-button {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.menu-button:active {
  background: var(--tint);
}

/* Bei offenem Menü zeigt der Knopf das X zum Schließen */
.menu-button__close,
.menu-button[aria-expanded="true"] .menu-button__open {
  display: none;
}

.menu-button[aria-expanded="true"] .menu-button__close {
  display: block;
}

/* --- Menüzeile: eigenes helles Band, damit sie neben den Kontaktdaten
       als zweite Ebene wahrgenommen wird -------------------------------- */

.site-header__nav {
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.main-nav {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  gap: 2.5rem;
}

.main-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
}

.main-nav a:hover,
.main-nav a.is-active {
  color: var(--action-text);
}

/* Linie unter dem Menüpunkt: voll beim aktiven, blass beim Darüberfahren,
   damit die aktuelle Seite eindeutig markiert bleibt */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--action);
  opacity: 0;
  transition: opacity 150ms ease;
}

.main-nav a:hover::after {
  opacity: 0.35;
}

.main-nav a.is-active::after {
  opacity: 1;
}

/* Beim Drücken: Linie sofort in voller Stärke; is-pressed (nav-press.js)
   hält das bis zur neuen Seite, sonst blendet sie dazwischen zurück */
.main-nav a:active,
.main-nav a.is-pressed {
  color: var(--action-text-hover);
}

.main-nav a:active::after,
.main-nav a.is-pressed::after {
  opacity: 1;
  transition: none;
}

/* --- Großer Bildschirm: flacherer Header (107 statt 142 px) --------------
   Kontaktzeile kompakter, Menüzeile ohne eigenes Band: sie liegt weiß unter
   der Kontaktzeile, getrennt nur durch den Abstand. Das aufgeklappte Menü
   unter 1100 px behält sein Band. */

@media (min-width: 1101px) {
  .site-header__bar {
    height: 60px;
    gap: 1.5rem;
  }

  .brand__logo {
    height: 42px;
  }

  .header-contact {
    gap: 1.5rem;
  }

  .header-contact__item {
    gap: 0.5rem;
  }

  .header-contact__icon {
    width: 32px;
    height: 32px;
  }

  .header-contact__icon svg {
    width: 17px;
    height: 17px;
  }

  .header-contact__label {
    font-size: 0.6875rem;
    line-height: 0.875rem;
  }

  .header-contact__value {
    font-size: 0.9375rem;
    line-height: 1.25rem;
    text-underline-offset: 3px;
  }

  .site-header__nav {
    border-top: 0;
    background: var(--surface);
  }

  .main-nav a {
    height: 46px;
  }
}

/* --- Kleinere Fenster ---------------------------------------------------- */

@media (max-width: 1240px) {
  .header-contact__item--mail {
    display: none;
  }
}

@media (max-width: 1100px) {
  .menu-button {
    display: inline-flex;
  }

  /* Menü klappt unter dem Header auf */
  .site-header__nav {
    display: none;
  }

  .site-header.is-menu-open .site-header__nav {
    display: block;
  }

  .main-nav {
    flex-direction: column;
    gap: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .main-nav a {
    height: 48px;
    font-size: 1.0625rem;
  }

  .main-nav a + a {
    border-top: 1px solid var(--line);
  }

  .main-nav a::after {
    display: none;
  }

  /* Aktueller Menüpunkt: Fläche über die ganze Breite und Balken am
     linken Rand, damit er nicht nur an der Schriftfarbe erkennbar ist */
  .main-nav a.is-active,
  .main-nav a:active,
  .main-nav a.is-pressed {
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    background: var(--tint);
  }

  /* Beim Drücken: dunklere Fläche über die ganze Breite */
  .main-nav a:active,
  .main-nav a.is-pressed {
    background: var(--tint-hover);
  }

  .main-nav a.is-active,
  .main-nav a.is-active + a {
    border-top-color: transparent;
  }

  .main-nav a.is-active::after {
    display: block;
    opacity: 1;
    top: 0;
    right: auto;
    bottom: 0;
    width: 4px;
    height: auto;
    border-radius: 0 4px 4px 0;
  }
}

@media (max-width: 1000px) {
  .header-contact__item--whatsapp {
    display: none;
  }
}

@media (max-width: 800px) {
  .site-header__bar {
    height: 72px;
    gap: 0.75rem;
  }

  .site-header__cta {
    display: none;
  }

  /* Nur noch das runde Symbol; der Text bleibt für Screenreader und
     Sprachsteuerung der Name des Links */
  .header-contact__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .header-contact__icon {
    width: 46px;
    height: 46px;
  }

  .site-header.is-hidden {
    transform: translateY(-100%);
  }
}

/* Schmale Handys: alles passt ohne waagerechtes Scrollen in 320 px */
@media (max-width: 400px) {
  .site-header__bar,
  .brand {
    gap: 0.5rem;
  }

  .brand__logo {
    height: 44px;
  }

  /* Beide Zeilen verkleinern sich im selben Verhältnis und bleiben gleich breit */
  .brand__name {
    font-size: 1.125rem;
    line-height: 1.3125rem;
  }

  .brand__claim {
    font-size: 0.61625rem;
    line-height: 0.75rem;
  }

  .header-contact__icon {
    width: 44px;
    height: 44px;
  }

  .menu-button {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
  }
}

@media (max-width: 350px) {
  /* Nur noch das Symbol; das aria-label nennt das Menü */
  .menu-button__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .menu-button {
    min-width: 44px;
    justify-content: center;
    padding: 0.5rem;
  }
}

/* --- 07-footer.css --- */
/* ==========================================================================
   Footer und feste Leiste am Handy
   ========================================================================== */

.site-footer {
  padding: 3.5rem var(--gutter) 2rem;
  background: var(--surface-soft);
  border-top: 1px solid var(--line);
}

.site-footer__columns {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.site-footer__column--muted {
  color: var(--ink-muted);
}

.site-footer__title {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.site-footer__bottom {
  max-width: var(--content-max);
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* --- Handy: „Anrufen“ und „Anfrage senden“ fest am unteren Rand ---------- */

.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

@media (max-width: 800px) {
  .mobile-bar {
    display: grid;
  }

  body {
    padding-bottom: 4.5rem;
  }
}

/* Sehr schmale Handys: Beschriftung bleibt einzeilig */
@media (max-width: 350px) {
  .mobile-bar .btn {
    padding: 0 0.5rem;
    font-size: 0.9375rem;
  }
}

/* --- 08-form.css --- */
/* ==========================================================================
   Formularelemente
   ========================================================================== */

.form-label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.label-optional {
  font-weight: 500;
  color: var(--ink-muted);
}

.hint {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink-muted);
}

.field {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
}

.field::placeholder {
  color: var(--ink-muted);
}

.field--textarea {
  resize: vertical;
}

.field[aria-invalid="true"] {
  border-color: var(--error);
}

/* Fehlertext unter einem Feld; leer, solange alles stimmt (der Platz bleibt wie im Entwurf) */
.field-error {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--error);
}

/* Meldungen, die ohne Inhalt keinen Platz einnehmen sollen */
.field-error--collapsible:empty {
  display: none;
}

/* --- Radio Buttons ------------------------------------------------------- */

.choice input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--action);
}

.choice:has(input:focus-visible) {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

.choice-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.9375rem;
  cursor: pointer;
}

/* --- Knopf, der wie ein Textlink aussieht -------------------------------- */

.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--action-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--logo-mint);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.linkbtn:hover {
  color: var(--action-text-hover);
  text-decoration-color: var(--action-text-hover);
}

.linkbtn--lg {
  font-size: 1rem;
}

/* --- pages/about.css --- */
/* ==========================================================================
   Über mich (/ueber-mich/)
   ========================================================================== */

.portrait {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 460px;
}

.signature {
  margin: 0;
  font-family: var(--font-hand);
  font-size: 2.125rem;
  line-height: 2.375rem;
  font-weight: 600;
  color: var(--action);
}

.partners {
  flex: 2 1 560px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.partner__logo {
  height: 56px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.partner__link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  align-self: flex-start;
}

.about-stat {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.about-stat__value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
}

.about-stat__label {
  font-size: 1.0625rem;
  color: var(--ink-muted);
}

/* --- pages/article.css --- */
/* ==========================================================================
   Ratgeber-Artikel (/ratgeber/{slug}/)
   ========================================================================== */

.article-head {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.article-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink-muted);
}

.article-layout {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 3.5rem;
}

.article-body {
  flex: 2 1 600px;
  min-width: 0;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.article-aside {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.toc {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.aside-cta {
  background: var(--tint);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* --- pages/guide.css --- */
/* ==========================================================================
   Ratgeber-Übersicht (/ratgeber/)
   ========================================================================== */

.featured {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem;
  background: var(--surface-soft);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

/* --- pages/home.css --- */
/* ==========================================================================
   Startseite (/)
   ========================================================================== */

.hero__title {
  margin: 0;
  font-size: 3.5rem;
  line-height: 3.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 640px;
}

.hero__signature {
  margin: 2.5rem 0 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 560px;
}

.hero__portrait {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: var(--radius-pill);
  border: 2px solid var(--logo-mint);
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.hero__quote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.625rem;
  font-weight: 500;
  color: var(--ink);
}

.hero__name {
  font-family: var(--font-hand);
  font-size: 1.75rem;
  line-height: 2rem;
  font-weight: 600;
  color: var(--action);
}

.hero__media {
  flex: 1 1 480px;
  min-width: 0;
  position: relative;
  padding-bottom: 2.5rem;
}

.hero__photo.hero__img {
  display: block;
  width: 100%;
  padding: 0;
  object-fit: cover;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 24px 48px rgba(30, 43, 37, .14);
}

/* Google-Bewertung als Karte unten links am Foto */
.hero__rating {
  position: absolute;
  left: -24px;
  bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.875rem 1.125rem;
  box-shadow: 0 10px 24px rgba(30, 43, 37, .12);
}

.hero__photo {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--tint);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  line-height: 1.375rem;
  text-align: center;
  padding: 2rem;
}

.hero__video {
  display: block;
  width: 100%;
  padding: 0;
  object-fit: cover;
}

/* Pause sitzt unten mittig im Video, als flache Milchglas-Kachel mit
   halbtransparentem dunklem Grund. Der Abstand nach unten hält sie über der
   Bewertungskarte, die auf schmalen Bildschirmen bis zur Mitte reicht und gut
   30px ins Video ragt. Pause erscheint nur, solange die Maus über dem Video
   ist oder der Button den Fokus hat; Geräte ohne Maus haben kein Hover, dort
   bleibt Pause sichtbar. Play steht rund in der Mitte und immer da, damit
   erkennbar bleibt, dass das Standbild ein Video ist. */
.hero__video-wrap {
  position: relative;
}

.hero__video-toggle {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  background: rgba(30, 43, 37, .38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease;
}

.hero__video-icon {
  width: 20px;
  height: 20px;
}

/* Play: runder, weißer Knopf in der Mitte */
.hero__video-wrap.is-paused .hero__video-toggle {
  bottom: auto;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(30, 43, 37, .18);
}

.hero__video-wrap.is-paused .hero__video-icon {
  width: 26px;
  height: 26px;
}

@media (hover: hover) {
  .hero__video-wrap:not(.is-paused) .hero__video-toggle:hover {
    background: rgba(30, 43, 37, .55);
  }

  .hero__video-wrap.is-paused .hero__video-toggle:hover {
    background: var(--surface);
  }

  .hero__video-wrap:not(.is-paused):not(:hover) .hero__video-toggle:not(:focus-visible) {
    opacity: 0;
  }
}

.hero__video-icon--play,
.hero__video-wrap.is-paused .hero__video-icon--pause {
  display: none;
}

.hero__video-wrap.is-paused .hero__video-icon--play {
  display: block;
}

.hero__photo-small {
  position: absolute;
  right: 24px;
  bottom: 0;
  width: 30%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  border: 4px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: var(--ink-muted);
}

/* Vorteilsleiste: weiße Karte, die 1,5rem über die Kante in den Einstieg ragt.
   Der Abschnitt beginnt ohne Abstand; die Leiste wird mit top verschoben, nicht
   mit einem negativen Margin: Ein Margin würde durch den Abschnitt fallen und den
   ganzen Abschnitt mitziehen. Zur Überschrift darunter bleiben sichtbar 4rem
   (1,5rem Verschiebung plus 2,5rem Margin). */
.section--usp {
  padding-top: 0;
}

.usp {
  position: relative;
  top: -1.5rem;
  max-width: var(--content-max);
  margin: 0 auto 2.5rem;
  padding: 1.75rem 2rem;
  list-style: none;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(30, 43, 37, .08);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1.5rem;
}

.usp__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.usp__body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.usp__title {
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.home-facts {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 1.0625rem;
  line-height: 1.6875rem;
  color: var(--ink-muted);
}

.ba-wrap {
  flex: 1.4 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ba {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--tint);
}

.ba__after {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem;
  background: var(--tint);
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.ba__before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--ba-pos, 50%);
  overflow: hidden;
  background: var(--surface-soft);
  border-right: 3px solid var(--action);
}

.ba__before-inner {
  position: absolute;
  inset: 0;
  width: 100vw;
  max-width: 760px;
  display: flex;
  align-items: center;
  padding: 2rem;
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.ba__handle {
  position: absolute;
  top: 50%;
  left: var(--ba-pos, 50%);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--ink-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Der Regler ist unsichtbar; sein Fokus zeigt sich deshalb am ganzen Bild */
.ba:has(.ba-range:focus-visible) {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

/* Unsichtbarer Schieberegler über dem ganzen Bild (before-after.js) */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.ba__labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.quote {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.quote__text {
  margin: 0;
  font-size: 1.1875rem;
  line-height: 1.8125rem;
  font-weight: 500;
}

.quote__author {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.intro-media {
  position: relative;
  max-width: 460px;
  padding: 0 0 3rem 0;
}

.intro-media__photo {
  aspect-ratio: 4 / 5;
  width: 82%;
  border-radius: var(--radius-lg);
  background: var(--tint);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 0.9375rem;
  text-align: center;
  padding: 1.5rem;
}

.intro-media__photo-small {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
  border: 4px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: 0.8125rem;
  line-height: 1.125rem;
  color: var(--ink-muted);
}

.intro-text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6875rem;
  color: var(--ink-muted);
  max-width: 620px;
}

@media (max-width: 760px) {
  .hero__photo-small {
    display: none;
  }

  .hero__rating {
    left: 12px;
  }
}

@media (max-width: 600px) {
  .usp {
    padding: 1.25rem;
  }
}

@media (min-width: 1101px) {
  .hero__title {
    font-size: 2.875rem;
    line-height: 3.125rem;
  }
}

@media (max-width: 600px) {
  .hero__title {
    font-size: 2.375rem;
    line-height: 2.625rem;
  }
}


/* --- pages/industries.css --- */
/* ==========================================================================
   Branchen (/branchen/)
   ========================================================================== */

.inline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 3rem;
}

.industry-name {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* --- pages/inquiry.css --- */
/* ==========================================================================
   Anfrage (/anfrage/)
   ========================================================================== */

.inquiry {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2.5rem;
}

.inquiry__main {
  flex: 2 1 620px;
  min-width: 0;
}

.form-box {
  background: var(--surface-soft);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.625rem;
}

.choice-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 52px;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 2px solid var(--line);
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Gewählte Karte grün umrandet, ohne JavaScript */
.choice-card:has(input:checked) {
  border-color: var(--action);
}

.form-legend {
  margin-bottom: 0.25rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 700;
}

.form-legend--spaced {
  margin-bottom: 1.25rem;
}

.upload {
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  text-align: center;
}

/* Während Dateien darübergezogen werden */
.upload.is-dragover {
  border-color: var(--action);
  background: var(--surface-soft);
}

.upload__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--tint);
  color: var(--action);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.upload__title {
  font-size: 1rem;
  font-weight: 600;
}

.filebtn:has(input:focus-visible) {
  outline: 3px solid var(--action);
  outline-offset: 2px;
}

.file-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--action);
}

.file-list__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.file-list__size {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem 1.5rem;
}

.divider {
  height: 1px;
  background: var(--line);
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.5rem;
}

.inquiry__submit {
  margin-top: 1rem;
}

.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.form-footer__note {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink-muted);
  max-width: 440px;
  padding-top: 1rem;
}

/* --- Fehlerübersicht und Bestätigung ------------------------------------- */

.form-errors {
  padding: 1rem 1.25rem;
  border: 2px solid var(--error);
  border-radius: var(--radius-md);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-errors__title {
  font-size: 1rem;
  color: var(--error);
}

.inquiry-sent {
  padding: 3rem 2.5rem;
  border-radius: var(--radius-lg);
  background: var(--tint);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.inquiry-sent__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--ink-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.inquiry-sent__text {
  margin: 0;
  max-width: 560px;
  font-size: 1.0625rem;
  line-height: 1.6875rem;
  color: var(--ink-muted);
}

/* --- Seitenleiste -------------------------------------------------------- */

.inquiry__aside {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1rem;
  align-self: flex-start;
}

.aside-box {
  background: var(--surface-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.next-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.next-steps__item {
  display: flex;
  gap: 0.75rem;
}

.next-steps__num {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--ink-inverse);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.next-steps__text {
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 0.25rem;
}

.contact-block__phone {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
}

.contact-block__note {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--ink-muted);
}

@media (max-width: 600px) {
  .form-box {
    padding: 1.5rem 1rem;
  }
}

/* --- pages/legal.css --- */
/* ==========================================================================
   Impressum und Rechtliches
   ========================================================================== */

.legal {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.legal__note {
  background: var(--surface-soft);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  color: var(--ink-muted);
}

/* --- pages/materials.css --- */
/* ==========================================================================
   Materialien (/materialien/)
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0.5rem 1rem;
}

.cmp__sub {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* --- pages/prices.css --- */
/* ==========================================================================
   Preise und Ablauf (/preise-ablauf/)
   ========================================================================== */

.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* --- pages/project.css --- */
/* ==========================================================================
   Projektseite (/projekte/{slug}/)
   ========================================================================== */

.facts {
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.facts__label {
  font-size: 0.8125rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.facts__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

/* --- pages/projects.css --- */
/* ==========================================================================
   Projekte mit Filter (/projekte/)
   ========================================================================== */

/* Filter als Textlinks mit grüner Unterstreichung, wie das Menü */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  border-bottom: 1px solid var(--line);
}

.filters button {
  position: relative;
  padding: 0.875rem 0;
  border: 0;
  background: none;
  color: var(--action-text);
  font-size: 0.96875rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--logo-mint);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  cursor: pointer;
}

.filters button:hover {
  color: var(--action-text-hover);
  text-decoration-color: var(--action-text-hover);
}

.filters button.is-active {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.filters button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--action);
}

.filters__count {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
}

@media (max-width: 600px) {
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 1.375rem;
    scrollbar-width: none;
  }

  .filters button {
    flex: none;
    white-space: nowrap;
  }
}

/* --- pages/vehicle.css --- */
/* ==========================================================================
   Fahrzeug und Wohnmobil: Sicherheitshinweis
   ========================================================================== */

.notice {
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  background: var(--surface);
  border: 2px solid var(--action);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
}

.notice__icon {
  flex: none;
  color: var(--action);
}

.notice__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* --- 90-utilities.css --- */
/* ==========================================================================
   Hilfsklassen für Einzelfälle. Stehen am Ende, damit sie Bausteine
   gezielt überschreiben können (z. B. .card mit .gap-8).
   ========================================================================== */

.gap-2  { gap: 0.125rem; }
.gap-4  { gap: 0.25rem; }
.gap-6  { gap: 0.375rem; }
.gap-8  { gap: 0.5rem; }
.gap-10 { gap: 0.625rem; }
.gap-12 { gap: 0.75rem; }
.gap-14 { gap: 0.875rem; }
.gap-16 { gap: 1rem; }
.gap-20 { gap: 1.25rem; }
.gap-24 { gap: 1.5rem; }
.gap-32 { gap: 2rem; }
.gap-40 { gap: 2.5rem; }
.gap-48 { gap: 3rem; }

.m-0  { margin: 0; }
.mt-4 { margin-top: 0.25rem; }
.mt-8 { margin-top: 0.5rem; }

.no-shrink  { flex: none; }
.self-start { align-self: flex-start; }
.nowrap     { white-space: nowrap; }

.muted    { color: var(--ink-muted); }
.text-ink { color: var(--ink); }

/* Nur für Screenreader sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}