@charset "UTF-8";
/* =============================================================================
   fangvorrichtung.info
   Tortechnik Zimmermann – Fangvorrichtungen für Geräteraumtore

   Farbwerte aus den Geschäftsdokumenten des Betriebs gemessen
   (Produktinformation, Aufmaßblatt, Prüfungsnachweis). Siehe DESIGNPLAN.md.
   ========================================================================== */

/* ---------- Schrift ------------------------------------------------------ */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;          /* Variable Font, Achse wght */
  font-display: swap;
  src: url("/assets/fonts/sourcesans3-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Token -------------------------------------------------------- */

:root {
  /* Blau */
  --blau-primaer: #0087C1;   /* Marke, große Überschriften        4,0:1 */
  --blau-mittel:  #0A6491;   /* Links, H3                         6,5:1 */
  --blau-dunkel:  #10456D;   /* H4, Zahlen, kräftige Flächen     10,0:1 */
  --blau-nacht:   #0C1F3A;   /* Footer, dunkle Flächen           17,0:1 */
  --blau-hell:    #EEF3FA;   /* Hinweisboxen */
  --blau-flaeche: #F1F5F9;   /* Sektionsflächen */

  /* Akzent – niemals flächig */
  --orange-akzent: #EF7A1F;
  --orange-dunkel: #A85410;  /* wenn Text                         5,3:1 */

  /* Neutral */
  --grau-text:  #2B2B2B;     /*                                  14,2:1 */
  --grau-muted: #4E5A68;     /*                                   7,0:1 */
  --grau-linie: #D7E1EE;
  --weiss:      #FFFFFF;

  /* Schriftgrade */
  --fs-14: 0.875rem;
  --fs-17: 1.0625rem;
  --fs-19: 1.1875rem;
  --fs-21: 1.3125rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-34: 2.125rem;
  --fs-40: 2.5rem;
  --fs-52: 3.25rem;

  /* Abstände */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Maße */
  --breite-inhalt: 1140px;
  --breite-text: 68ch;
  --kopf-hoehe: 60px;
}

@media (min-width: 768px) {
  :root { --kopf-hoehe: 76px; }
}

/* ---------- Grundlagen --------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--weiss);
  color: var(--grau-text);
  font-family: "Source Sans 3", "Segoe UI", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-17);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
  body { font-size: var(--fs-19); }
}

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

h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-34);
  color: var(--blau-dunkel);
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--fs-30);
  color: var(--blau-primaer);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--fs-21);
  color: var(--blau-mittel);
}

h4 {
  font-size: var(--fs-19);
  color: var(--blau-dunkel);
}

@media (min-width: 768px) {
  h1 { font-size: var(--fs-52); }
  h2 { font-size: var(--fs-40); }
  h3 { font-size: var(--fs-24); }
}

p, ul, ol, dl, table { margin: 0 0 var(--sp-4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a {
  color: var(--blau-mittel);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--blau-dunkel); }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--blau-mittel);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--blau-hell); color: var(--blau-nacht); }

/* ---------- Hilfsklassen ------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

@media (min-width: 768px) {
  .wrap { padding-inline: var(--sp-6); }
}

.textspalte { max-width: var(--breite-text); }

.sektion { padding-block: var(--sp-8); }

/* Jedes Sprungziel muss unter dem klebenden Kopf hervorkommen, nicht nur die
   Sektionen: #inhalt ist das Ziel des Skip-Links, .hero das Ziel des Logos und
   #formularmeldung die Stelle, die das Skript nach einem Fehler anspringt. */
.sektion,
.hero,
#inhalt,
#formularmeldung {
  scroll-margin-top: calc(var(--kopf-hoehe) + var(--sp-2));
}

@media (min-width: 768px) {
  .sektion { padding-block: var(--sp-9); }
}

.sektion--flaeche { background: var(--blau-flaeche); }
.sektion--linie   { border-top: 1px solid var(--grau-linie); }

/* Das einzige Versal-Kleinlabel der Seite – über dem Rechtsabschnitt. */
.kleinlabel {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--grau-muted);
  margin: 0 0 var(--sp-3);
}

.vorspann {
  font-size: var(--fs-21);
  line-height: 1.55;
  color: var(--grau-muted);
  max-width: var(--breite-text);
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 100;
  background: var(--blau-nacht);
  color: var(--weiss);
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: var(--sp-2); color: var(--weiss); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid transparent;
  border-radius: 3px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--primaer {
  background: var(--blau-dunkel);
  border-color: var(--blau-dunkel);
  color: var(--weiss);
}
.btn--primaer:hover { background: var(--blau-nacht); border-color: var(--blau-nacht); color: var(--weiss); }

.btn--sekundaer {
  background: transparent;
  border-color: var(--grau-linie);
  color: var(--blau-mittel);
}
.btn--sekundaer:hover { border-color: var(--blau-mittel); color: var(--blau-dunkel); }

/* ---------- Kopf und Navigation ------------------------------------------ */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-linie);
}

/* Ohne JavaScript steht die vollstaendige Navigationsliste im Kopf. Klebend
   waere er dann 144 px hoch (gemessen bei 375 px) und verdeckte dauerhaft ein
   Fuenftel des Bildschirms. Unterhalb der Desktop-Breite scrollt er deshalb mit. */
@media (max-width: 1079px) {
  html:not(.js) .kopf { position: static; }
}

.kopf__innen {
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  min-height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .kopf__innen { padding-inline: var(--sp-6); }
}

.marke {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: auto;
  color: var(--blau-dunkel);
  text-decoration: none;
  padding-block: var(--sp-2);
}

.marke__zeichen {
  flex: none;
  width: 33px;
  height: 23px;
  color: var(--blau-primaer);
}
.marke__zeichen svg { display: block; width: 100%; height: 100%; }

.marke__text { display: flex; flex-direction: column; line-height: 1.15; }

.marke__name {
  font-weight: 700;
  font-size: var(--fs-17);
  letter-spacing: -0.01em;
}

.marke__zusatz {
  font-size: var(--fs-14);
  font-weight: 400;
  color: var(--grau-muted);
  display: none;
}

@media (min-width: 560px) {
  .marke__zusatz { display: block; }
}

/* Ohne JavaScript ist die Navigation immer sichtbar, der Schalter entfällt. */
.navschalter { display: none; }

.hauptnav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  align-items: center;
}

.hauptnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-1);
  color: var(--grau-text);
  font-size: var(--fs-17);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.hauptnav a:hover { color: var(--blau-mittel); border-bottom-color: var(--grau-linie); }

.hauptnav a[aria-current="true"] {
  color: var(--blau-dunkel);
  font-weight: 600;
  border-bottom-color: var(--blau-primaer);
}

.hauptnav__cta a {
  padding-inline: var(--sp-4);
  background: var(--blau-dunkel);
  color: var(--weiss);
  border-radius: 3px;
  font-weight: 600;
  border-bottom: 2px solid var(--blau-dunkel);
}
.hauptnav__cta a:hover { background: var(--blau-nacht); border-bottom-color: var(--blau-nacht); color: var(--weiss); }

/* Die Farbe muss hier erneut gesetzt werden: .hauptnav a[aria-current] ist
   spezifischer als .hauptnav__cta a und färbte den Text sonst blau auf Blau. */
.hauptnav__cta a[aria-current="true"] {
  color: var(--weiss);
  background: var(--blau-nacht);
  border-bottom-color: var(--blau-nacht);
}

/* Mit JavaScript: unter 1080px eingeklappte Navigation mit Schalter.
   Gemessen mit geladener Schrift: Marke (284) + Abstand (16) + Navigation (650)
   + Innenabstand (64) brauchen 1014 px Layoutbreite, mit Scrollbalken rund
   1030 px Fensterbreite. Bei 900 px umbrach der klebende Kopf deshalb in zwei
   Zeilen und wuchs von 76 auf 113 px. Die Grenze liegt mit Reserve bei 1080 px.
   Gegenstueck: window.innerWidth >= 1080 in assets/js/main.js. */
@media (max-width: 1079px) {
  .js .navschalter {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    min-width: 44px;
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
    border: 1px solid var(--grau-linie);
    border-radius: 3px;
    color: var(--blau-dunkel);
    font: inherit;
    font-size: var(--fs-17);
    font-weight: 600;
    cursor: pointer;
  }

  .navschalter__balken {
    position: relative;
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
  }
  .navschalter__balken::before,
  .navschalter__balken::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
  }
  .navschalter__balken::before { top: -6px; }
  .navschalter__balken::after  { top: 6px; }

  .js .navschalter[aria-expanded="true"] .navschalter__balken { background: transparent; }
  .js .navschalter[aria-expanded="true"] .navschalter__balken::before { top: 0; transform: rotate(45deg); }
  .js .navschalter[aria-expanded="true"] .navschalter__balken::after  { top: 0; transform: rotate(-45deg); }

  .js .hauptnav {
    display: none;
    flex-basis: 100%;
    border-top: 1px solid var(--grau-linie);
    padding-block: var(--sp-3);
  }
  .js .hauptnav.ist-offen { display: block; }

  .js .hauptnav__liste { flex-direction: column; align-items: stretch; gap: 0; }

  /* display:flex statt inline-flex, sonst enden die Trennlinien an der
     Textbreite statt an der Zeilenbreite. */
  .js .hauptnav a {
    display: flex;
    min-height: 48px;
    padding-inline: var(--sp-2);
    border-bottom: 1px solid var(--grau-linie);
  }
  .js .hauptnav li:last-child a { border-bottom: none; }
  .js .hauptnav__cta a { margin-top: var(--sp-3); justify-content: center; }
}

/* Auf schmalen Geräten müssen Marke und Menüschalter in eine Zeile passen,
   sonst wird der klebende Kopf doppelt so hoch. Diese Regeln stehen bewusst
   nach dem Navigationsblock: gleiche Spezifität, also gewinnt die spätere
   Angabe. Weiter oben notiert wäre die Schalter-Innenabstand-Regel wirkungslos. */
@media (max-width: 479px) {
  .kopf__innen { padding-inline: var(--sp-4); gap: var(--sp-3); }
  .marke { gap: var(--sp-2); }
  .marke__zeichen { width: 28px; height: 19px; }
  .marke__name { font-size: var(--fs-14); }
  .js .navschalter { padding-inline: var(--sp-2); }

  /* Der Schalter wird zum reinen Symbol. Die Beschriftung bleibt für
     Screenreader erhalten, sie wird nur visuell ausgeblendet. */
  .js .navschalter__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Hero --------------------------------------------------------- */

.hero { padding-block: var(--sp-7) var(--sp-6); }

@media (min-width: 768px) {
  .hero { padding-block: var(--sp-8); }
}

.hero__raster { display: grid; gap: var(--sp-6); align-items: center; }

@media (min-width: 900px) {
  .hero__raster { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
}

.hero__titel { margin-bottom: var(--sp-5); }

.hero__subline {
  font-size: var(--fs-21);
  line-height: 1.55;
  color: var(--grau-muted);
  margin-bottom: var(--sp-6);
  max-width: 46ch;
}

.hero__aktionen { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

@media (max-width: 479px) {
  .hero__aktionen .btn { width: 100%; }
}

.hero__bild {
  margin: 0;
  border: 1px solid var(--grau-linie);
  background: var(--blau-flaeche);
}
.hero__bild img { width: 100%; }

/* ---------- Vertrauenszeile ---------------------------------------------- */

.fakten { background: var(--blau-flaeche); border-block: 1px solid var(--grau-linie); }

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

@media (min-width: 640px) { .fakten__liste { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .fakten__liste { grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); } }

.fakten__liste li {
  font-size: var(--fs-17);
  font-weight: 600;
  color: var(--blau-dunkel);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--blau-primaer);
  line-height: 1.35;
}

/* ---------- Zeitachse ---------------------------------------------------- */

.zeitachse {
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 860px) {
  .zeitachse { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}

.zeitachse__station {
  border-top: 3px solid var(--grau-linie);
  padding-top: var(--sp-4);
}

@media (max-width: 859px) {
  .zeitachse__station {
    border-top: none;
    border-left: 3px solid var(--grau-linie);
    padding-top: 0;
    padding-left: var(--sp-4);
  }
}

.zeitachse__station--wende { border-color: var(--orange-akzent); }

.zeitachse__jahr {
  font-size: var(--fs-30);
  font-weight: 700;
  color: var(--blau-dunkel);
  line-height: 1.1;
  margin: 0 0 var(--sp-1);
  letter-spacing: -0.02em;
}

.zeitachse__norm {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--grau-muted);
  margin: 0 0 var(--sp-3);
}

.zeitachse__station--wende .zeitachse__norm { color: var(--orange-dunkel); }

.zeitachse__text { font-size: var(--fs-17); margin: 0; }

/* ---------- Hinweisbox --------------------------------------------------- */

.hinweis {
  background: var(--blau-hell);
  border-left: 4px solid var(--orange-akzent);
  padding: var(--sp-5);
  max-width: var(--breite-text);
}

.hinweis--ruhig { border-left-color: var(--blau-primaer); }

.hinweis p { font-size: var(--fs-17); margin-bottom: var(--sp-3); }
.hinweis p:last-child { margin-bottom: 0; }

.hinweis__titel {
  font-size: var(--fs-17);
  font-weight: 700;
  color: var(--blau-dunkel);
  margin: 0 0 var(--sp-2);
}

.rechtshinweis {
  margin-top: var(--sp-6);
  max-width: var(--breite-text);
  font-size: var(--fs-14);
  color: var(--grau-muted);
  border-top: 1px solid var(--grau-linie);
  padding-top: var(--sp-4);
}

/* ---------- Merkmale ----------------------------------------------------- */

.merkmale {
  list-style: none;
  margin: var(--sp-7) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--grau-linie);
}

.merkmale li {
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--grau-linie);
}

@media (min-width: 640px) {
  .merkmale { grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--grau-linie); }
  .merkmale li { border-bottom: none; padding: var(--sp-5); border-left: 1px solid var(--grau-linie); }
  .merkmale li:nth-child(-n+2) { border-bottom: 1px solid var(--grau-linie); }
  .merkmale li:nth-child(odd) { border-left: none; padding-left: 0; }
}

@media (min-width: 1000px) {
  .merkmale { grid-template-columns: repeat(4, 1fr); }
  .merkmale li:nth-child(-n+2) { border-bottom: none; }
  .merkmale li:nth-child(odd) { border-left: 1px solid var(--grau-linie); padding-left: var(--sp-5); }
  .merkmale li:first-child { border-left: none; padding-left: 0; }
}

.merkmale__nr {
  display: block;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--blau-mittel);   /* kleiner Text: 4,5:1 nötig, --blau-primaer reicht nicht */
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-2);
}

.merkmale h3 { font-size: var(--fs-19); margin-bottom: var(--sp-2); color: var(--blau-dunkel); }
.merkmale p { font-size: var(--fs-17); margin: 0; color: var(--grau-muted); }

/* ---------- Zwei Spalten mit Bild ---------------------------------------- */

.medien { display: grid; gap: var(--sp-6); align-items: start; }

@media (min-width: 900px) {
  .medien { grid-template-columns: 1.15fr 1fr; gap: var(--sp-7); }
  .medien--bildlinks { grid-template-columns: 1fr 1.15fr; }
  .medien--bildlinks > :first-child { order: 2; }
}

.medien__bild { margin: 0; border: 1px solid var(--grau-linie); }
.medien__bild img { width: 100%; }

.medien__bu {
  font-size: var(--fs-14);
  color: var(--grau-muted);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--grau-linie);
  background: var(--blau-flaeche);
}

/* ---------- Funktionsweise: Aufnahmen der montierten Anlage -------------- */

.technikbilder {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}

@media (min-width: 720px) {
  .technikbilder {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
    max-width: 820px;
  }
}

.technikbild {
  margin: 0;
  border: 1px solid var(--grau-linie);
  background: var(--blau-flaeche);
}

.technikbild img { width: 100%; }

.technikbild figcaption {
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--grau-muted);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--grau-linie);
}

/* ---------- Funktionsweise: Zustandswechsel ------------------------------ */

.zustand { margin-top: var(--sp-7); }

/* Ohne JavaScript stehen beide Zustände untereinander, der Schalter entfällt. */
.zustand__schalter { display: none; }

.js .zustand__schalter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--grau-linie);
}

.zustand__knopf {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: var(--sp-3) var(--sp-4);
  min-height: 48px;
  font: inherit;
  font-size: var(--fs-17);
  font-weight: 600;
  color: var(--grau-muted);
  cursor: pointer;
}

.zustand__knopf:hover { color: var(--blau-dunkel); }

.zustand__knopf[aria-selected="true"] {
  color: var(--blau-dunkel);
  border-bottom-color: var(--blau-primaer);
}

.zustand__knopf[aria-selected="true"][data-zustand="ausloesung"] {
  color: var(--orange-dunkel);
  border-bottom-color: var(--orange-akzent);
}

.zustand__tafel + .zustand__tafel { margin-top: var(--sp-7); }

.js .zustand__tafel + .zustand__tafel { margin-top: 0; }
.js .zustand__tafel > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

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

@media (min-width: 860px) {
  .zustand__inhalt { grid-template-columns: 1.3fr 1fr; gap: var(--sp-6); align-items: start; }
}

.zustand__liste { margin: 0; padding-left: var(--sp-5); }
.zustand__liste li { margin-bottom: var(--sp-3); }
.zustand__liste li::marker { color: var(--blau-primaer); }

.zustand__tafel[data-zustand="ausloesung"] .zustand__liste li::marker { color: var(--orange-akzent); }

/* ---------- Auf einen Blick ---------------------------------------------- */

.blickliste {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--grau-linie);
}

@media (min-width: 800px) {
  .blickliste { grid-template-columns: 1fr 1fr; column-gap: var(--sp-7); }
}

.blickliste li {
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--grau-linie);
  font-size: var(--fs-17);
  position: relative;
}

.blickliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 8px;
  height: 2px;
  background: var(--blau-primaer);
}

/* ---------- Ablauf ------------------------------------------------------- */

.ablauf {
  list-style: none;
  counter-reset: schritt;
  margin: var(--sp-6) 0 var(--sp-6);
  padding: 0;
  border-top: 1px solid var(--grau-linie);
  max-width: 860px;
}

.ablauf li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--grau-linie);
}

@media (min-width: 768px) {
  .ablauf li { grid-template-columns: 3.5rem 1fr; gap: var(--sp-5); }
}

.ablauf li::before {
  content: counter(schritt, decimal-leading-zero);
  font-size: var(--fs-24);
  font-weight: 700;
  color: var(--blau-primaer);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.ablauf h3 { font-size: var(--fs-19); margin-bottom: var(--sp-2); color: var(--blau-dunkel); }
.ablauf p { font-size: var(--fs-17); margin: 0; }
.ablauf p + p { margin-top: var(--sp-3); }

/* ---------- Betrieb ------------------------------------------------------ */

.firmenverweis {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--blau-hell);
  border-left: 4px solid var(--blau-primaer);
}

.firmenverweis p { font-size: var(--fs-17); margin-bottom: var(--sp-3); }
.firmenverweis p:last-child { margin-bottom: 0; }

.firmenverweis a { font-weight: 600; }

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

.fragen { margin-top: var(--sp-6); max-width: 860px; border-top: 1px solid var(--grau-linie); }

.frage { border-bottom: 1px solid var(--grau-linie); }

.frage > summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  min-height: 48px;
  cursor: pointer;
  font-size: var(--fs-19);
  font-weight: 600;
  color: var(--blau-dunkel);
  list-style: none;
}

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

.frage > summary::after {
  content: "";
  flex: none;
  margin-left: auto;
  margin-top: 0.55em;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--blau-primaer);
  border-bottom: 2px solid var(--blau-primaer);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.frage[open] > summary::after { transform: rotate(-135deg); margin-top: 0.85em; }

.frage > summary:hover { color: var(--blau-mittel); }

.frage__antwort { padding: 0 0 var(--sp-5); max-width: var(--breite-text); }
.frage__antwort p { font-size: var(--fs-17); }

/* ---------- Kontakt ------------------------------------------------------ */

.kontakt__raster { display: grid; gap: var(--sp-7); align-items: start; }

@media (min-width: 900px) {
  .kontakt__raster { grid-template-columns: 1.3fr 1fr; gap: var(--sp-8); }
}

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

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

.feld > label {
  font-size: var(--fs-17);
  font-weight: 600;
  color: var(--blau-dunkel);
  line-height: 1.35;
}

.feld__optional { font-weight: 400; color: var(--grau-muted); }

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="tel"],
.feld input[type="number"],
.feld textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3);
  border: 1px solid var(--grau-muted);
  border-radius: 3px;
  background: var(--weiss);
  font: inherit;
  font-size: var(--fs-17);
  color: var(--grau-text);
}

.feld textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }

.feld input:focus-visible,
.feld textarea:focus-visible { border-color: var(--blau-mittel); }

.feld--fehlerhaft input,
.feld--fehlerhaft textarea { border-color: var(--orange-dunkel); border-width: 2px; }

.feld__fehler {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--orange-dunkel);
}

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

@media (min-width: 560px) {
  .feld--paare { grid-template-columns: 1fr 1fr; }
}

.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
}

.zustimmung input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--blau-dunkel);
  flex: none;
}

.zustimmung label { font-size: var(--fs-17); font-weight: 400; line-height: 1.5; }

.zustimmung--fehlerhaft label { color: var(--orange-dunkel); }

/* Honeypot: für Menschen unsichtbar, für Bots erreichbar. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__hinweis { font-size: var(--fs-14); color: var(--grau-muted); margin: 0; }

.meldung {
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-left: 4px solid var(--blau-primaer);
  background: var(--blau-hell);
  max-width: var(--breite-text);
}

.meldung--fehler { border-left-color: var(--orange-akzent); }

.meldung__titel { font-weight: 700; color: var(--blau-dunkel); margin: 0 0 var(--sp-2); }
.meldung p:last-child { margin-bottom: 0; }
.meldung ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: var(--fs-17); }

.kontaktdaten {
  border-top: 3px solid var(--blau-primaer);
  padding-top: var(--sp-5);
}

.kontaktdaten__firma {
  font-weight: 700;
  font-size: var(--fs-21);
  color: var(--blau-dunkel);
  margin: 0 0 var(--sp-4);
}

.kontaktdaten dl { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-5); }
.kontaktdaten dt { font-size: var(--fs-17); color: var(--grau-muted); }
.kontaktdaten dd { font-size: var(--fs-17); margin: 0; }
.kontaktdaten address { font-style: normal; font-size: var(--fs-17); }

/* ---------- Fuß ---------------------------------------------------------- */

.fuss {
  background: var(--blau-nacht);
  color: #E3E9F1;
  padding-block: var(--sp-7) var(--sp-5);
  margin-top: var(--sp-8);
}

.fuss__innen {
  max-width: var(--breite-inhalt);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 640px) { .fuss__innen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fuss__innen { grid-template-columns: repeat(4, 1fr); padding-inline: var(--sp-6); } }

.fuss a { color: var(--weiss); text-decoration-color: rgba(255, 255, 255, 0.5); }
.fuss a:hover { color: var(--weiss); text-decoration-color: currentColor; }
.fuss :focus-visible { outline-color: var(--weiss); }

.fuss__firma { font-weight: 700; font-size: var(--fs-17); margin: 0 0 var(--sp-2); color: var(--weiss); }
.fuss__adresse { font-style: normal; font-size: var(--fs-17); }

.fuss__ueberschrift {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9AA7B6;
  margin: 0 0 var(--sp-3);
}

.fuss__liste { list-style: none; margin: 0; padding: 0; font-size: var(--fs-17); }
.fuss__liste li { margin-bottom: var(--sp-2); }
.fuss__text { font-size: var(--fs-17); margin: 0; }

.fuss__schluss {
  max-width: var(--breite-inhalt);
  margin: var(--sp-6) auto 0;
  padding: var(--sp-4) var(--sp-5) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  justify-content: space-between;
  font-size: var(--fs-14);
  color: #9AA7B6;
}

@media (min-width: 1000px) { .fuss__schluss { padding-inline: var(--sp-6); } }

.fuss__schluss p { margin: 0; }

/* ---------- Rechtsseiten und 404 ----------------------------------------- */

.prosa { max-width: var(--breite-text); padding-block: var(--sp-7) var(--sp-8); }
.prosa h2 { font-size: var(--fs-24); color: var(--blau-dunkel); margin-top: var(--sp-7); }
.prosa h2:first-of-type { margin-top: var(--sp-6); }
.prosa h3 { font-size: var(--fs-19); margin-top: var(--sp-5); }
.prosa p, .prosa li { font-size: var(--fs-17); }
.prosa ul, .prosa ol { padding-left: var(--sp-5); }
.prosa li { margin-bottom: var(--sp-2); }

.prosa__daten {
  border-left: 3px solid var(--blau-primaer);
  padding-left: var(--sp-4);
  font-style: normal;
  font-size: var(--fs-17);
  margin-bottom: var(--sp-5);
}

.platzhalter {
  background: #FDF1E4;
  border-left: 4px solid var(--orange-akzent);
  padding: var(--sp-4);
  font-size: var(--fs-17);
  margin-bottom: var(--sp-4);
}

.platzhalter strong { color: var(--orange-dunkel); }

.fehlerseite { padding-block: var(--sp-8) var(--sp-9); max-width: var(--breite-text); }
.fehlerseite__code {
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--grau-muted);
  margin: 0 0 var(--sp-3);
}

/* ---------- Bewegungsreduktion ------------------------------------------- */

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

/* ---------- Druck -------------------------------------------------------- */

@media print {
  .kopf, .navschalter, .hauptnav, .skip-link, .zustand__schalter, .formular { display: none; }
  .fuss { background: none; color: var(--grau-text); }
  .fuss a { color: var(--grau-text); }
  .frage__antwort { display: block !important; }
  body { font-size: 11pt; }
}

/* ---------- Kleine Hilfsabstände ----------------------------------------- */

.abstand-oben { margin-top: var(--sp-7); }