/* Entwurf 1, sportlich. Farbwelt aus dem Logo: Rot, Schwarz, Weiss. */
:root {
  /* Rot aus dem Logo. Fuer Knoepfe bewusst etwas dunkler als fuer Flaechen:
     Weiss auf gesaettigtem Rot wirkt unschaerfer, als die Kontrastzahl vermuten laesst. */
  --rot: oklch(0.55 0.22 27);
  --rot-knopf: oklch(0.48 0.20 27);
  --rot-knopf-hell: oklch(0.55 0.22 27);
  --rot-hell: oklch(0.62 0.23 27);
  --rot-dunkel: oklch(0.46 0.19 27);
  --schwarz: oklch(0.16 0.005 250);
  --schwarz-weich: oklch(0.22 0.008 250);
  --schwarz-karte: oklch(0.26 0.008 250);
  --linie: oklch(0.34 0.01 250);
  --weiss: oklch(0.99 0 0);
  --grau: oklch(0.72 0.008 250);
  --grau-dunkel: oklch(0.55 0.01 250);
  --radius: 4px;
  --breite: 78rem;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tempo: 220ms;
  --kurve: cubic-bezier(0.2, 0.6, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--weiss);
  background: var(--schwarz);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; }

.demo-banner {
  background: repeating-linear-gradient(45deg, oklch(0.75 0.16 85), oklch(0.75 0.16 85) 12px, oklch(0.70 0.16 85) 12px, oklch(0.70 0.16 85) 24px);
  color: oklch(0.2 0.02 85);
  font-size: 0.8125rem; font-weight: 700; text-align: center;
  padding: 0.5rem 1rem;
}

.huelle { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 48rem) { .huelle { padding-inline: 2rem; } }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: oklch(0.16 0.005 250 / 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf-inhalt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
/* Das Logo hat schwarze Schrift auf weissem Grund. Auf der dunklen Seite steht es deshalb
   auf einer hellen Flaeche, aehnlich dem Firmenschild vor dem Haus. */
.marke { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.marke-logo {
  height: 2.75rem; width: auto; display: block;
  background: var(--weiss); padding: 0.3rem 0.5rem; border-radius: var(--radius);
  transition: transform var(--tempo) var(--kurve);
}
.marke:hover .marke-logo { transform: scale(1.03); }
@media (min-width: 48rem) { .marke-logo { height: 3.1rem; } }

.nav { display: none; gap: 0.35rem; align-items: center; }
@media (min-width: 56rem) { .nav { display: flex; } }
/* :not(.knopf) ist wichtig. Sonst gewinnt diese Regel gegen .knopf (hoehere Spezifitaet)
   und der Anmelde-Knopf in der Navigation bekaeme graue statt weisser Schrift. */
.nav a:not(.knopf):not(.kopf-insta) {
  text-decoration: none; font-weight: 600; font-size: 0.9375rem;
  padding: 0.5rem 0.85rem; border-radius: var(--radius); color: var(--grau);
  transition: color var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}
.nav a:not(.knopf):not(.kopf-insta):hover, .nav a:not(.knopf):not(.kopf-insta):focus-visible { color: var(--weiss); background: var(--schwarz-karte); }
.nav a[aria-current="page"] { color: var(--weiss); }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 2px; background: var(--rot); margin-top: 3px;
}

/* Menue fuer schmale Schirme */
.menue-knopf {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--weiss); cursor: pointer;
}
@media (min-width: 56rem) { .menue-knopf { display: none; } }
.menue-knopf span, .menue-knopf span::before, .menue-knopf span::after {
  content: ""; display: block; width: 1.1rem; height: 2px; background: currentColor;
  transition: transform var(--tempo) var(--kurve), opacity var(--tempo) var(--kurve);
}
.menue-knopf span::before { transform: translateY(-6px); }
.menue-knopf span::after { transform: translateY(4px); }
.menue-knopf[aria-expanded="true"] span { background: transparent; }
.menue-knopf[aria-expanded="true"] span::before { transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] span::after { transform: translateY(-2px) rotate(-45deg); }

.menue {
  display: none; flex-direction: column; gap: 0.25rem;
  padding: 0.75rem 0 1.25rem; border-top: 1px solid var(--linie);
}
.menue[data-offen="true"] { display: flex; }
@media (min-width: 56rem) { .menue { display: none !important; } }
.menue a:not(.knopf) { text-decoration: none; font-weight: 600; padding: 0.75rem 0.5rem; border-radius: var(--radius); }
.menue a:not(.knopf):hover { background: var(--schwarz-karte); }
/* Am Handy steht im Kopf sonst nur das Menue. Telefon und Instagram gehoeren aber dorthin,
   weil die Zielgruppe fast nur mobil unterwegs ist. */
.menue-kontakt { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--linie); }
.menue-kontakt a { display: flex; align-items: center; gap: 0.6rem; color: var(--grau); font-weight: 600; font-size: 0.9375rem; }
.menue-kontakt svg { width: 1.15rem; height: 1.15rem; color: var(--rot-hell); flex-shrink: 0; }

/* ---------- Knoepfe. Der Pfeil faehrt beim Zeigen aus. ---------- */
.knopf {
  --knopf-bg: var(--rot-knopf);
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 1.6rem; border-radius: var(--radius);
  background: var(--knopf-bg); color: var(--weiss);
  font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.005em;
  text-decoration: none; border: none; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
.knopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--rot-knopf-hell);
  transform: translateX(-101%);
  transition: transform 320ms var(--kurve);
}
.knopf:hover::before, .knopf:focus-visible::before { transform: translateX(0); }
.knopf:hover, .knopf:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 24px oklch(0.55 0.22 27 / 0.35); }
.knopf svg { width: 1.1em; height: 1.1em; transition: transform 320ms var(--kurve); }
.knopf:hover svg, .knopf:focus-visible svg { transform: translateX(4px); }
.knopf--rand { --knopf-bg: transparent; border: 1px solid var(--linie); }
.knopf--rand::before { background: var(--schwarz-karte); }
.knopf--rand:hover { box-shadow: none; }

/* Knopf, der beim Zeigen seinen Text ausfaehrt (Instagram, Telefon) */
.ausfahr {
  display: inline-flex; align-items: center; gap: 0; overflow: hidden;
  background: var(--schwarz-karte); border: 1px solid var(--linie);
  border-radius: 999px; padding: 0.65rem; color: var(--weiss);
  text-decoration: none; font-weight: 600;
  transition: gap var(--tempo) var(--kurve), background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}
.ausfahr svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.ausfahr span {
  max-width: 0; opacity: 0; white-space: nowrap;
  transition: max-width 360ms var(--kurve), opacity 240ms var(--kurve);
}
.ausfahr:hover, .ausfahr:focus-visible { gap: 0.55rem; background: var(--rot); border-color: var(--rot); }
.ausfahr:hover span, .ausfahr:focus-visible span { max-width: 14rem; opacity: 1; }

/* ---------- Titelbereich ---------- */
.held { position: relative; min-height: 82svh; display: grid; align-items: end; overflow: hidden; }
.held-bild { position: absolute; inset: 0; }
/* Am Handy laeuft das Hochformat mit dem Firmenschild, ab Tablet das breite Flottenbild
   (siehe bildZwei im Helfer). Beide brauchen einen eigenen Bildausschnitt: Beim Schild sitzt
   das Motiv mittig, bei der Flotte im unteren Bilddrittel. */
.held-bild picture, .held-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (min-width: 48rem) {
  .held-bild img { object-position: center 74%; }
}
.held-bild img { animation: langsam-zoom 24s var(--kurve) forwards; }
@keyframes langsam-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
/* Abdunkelung nur so stark wie noetig, sonst verschwindet das Foto.
   Am Handy steht der Text ueber die volle Breite, deshalb reicht ein Verlauf von unten.
   Ab Tablet steht der Text links, dort kommt ein seitlicher Verlauf dazu, damit die
   Ueberschrift auch auf hellen Bildstellen lesbar bleibt. */
.held::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    oklch(0.16 0.005 250 / 0.30) 0%,
    oklch(0.16 0.005 250 / 0.16) 32%,
    oklch(0.16 0.005 250 / 0.78) 74%,
    oklch(0.16 0.005 250 / 0.95) 100%);
}
@media (min-width: 48rem) {
  .held::after {
    background:
      linear-gradient(180deg, oklch(0.16 0.005 250 / 0.28) 0%, oklch(0.16 0.005 250 / 0.14) 35%, oklch(0.16 0.005 250 / 0.72) 78%, oklch(0.16 0.005 250 / 0.93) 100%),
      linear-gradient(96deg, oklch(0.16 0.005 250 / 0.72) 0%, oklch(0.16 0.005 250 / 0.34) 45%, oklch(0.16 0.005 250 / 0) 75%);
  }
}
.held-inhalt { position: relative; z-index: 2; padding-block: 4rem 3.5rem; }
.held-marke {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--rot); color: var(--weiss);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4rem 0.85rem; border-radius: var(--radius); margin-bottom: 1.25rem;
}
/* Textschatten statt noch mehr Abdunkelung. So bleibt das Foto sichtbar und die Schrift
   trotzdem lesbar, auch wenn eine helle Bildstelle dahinter liegt. */
/* Untergrenze bewusst bei 2rem: bei 2,25rem brauchte die Überschrift am Handy vier Zeilen
   mit nur 15 Zeichen, das wirkt unruhig. Ab Tablet wächst sie wieder auf volle Größe. */
.held h1 {
  font-size: clamp(2rem, 7vw, 4.5rem);
  line-height: 1.02; letter-spacing: -0.035em; font-weight: 800;
  margin: 0 0 1rem; max-width: 18ch; text-wrap: balance;
  text-shadow: 0 2px 18px oklch(0.16 0.005 250 / 0.85), 0 1px 3px oklch(0.16 0.005 250 / 0.65);
}
.held p {
  font-size: clamp(1.0625rem, 2.2vw, 1.375rem); color: oklch(0.92 0.005 250);
  max-width: 52ch; margin: 0 0 2rem;
  text-shadow: 0 1px 12px oklch(0.16 0.005 250 / 0.9), 0 1px 2px oklch(0.16 0.005 250 / 0.7);
}
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---------- Abschnitte ---------- */
.block { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.block--hell { background: var(--weiss); color: var(--schwarz); }
.block--weich { background: var(--schwarz-weich); }
.block-kopf { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.block-marke {
  display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rot); margin-bottom: 0.75rem;
}
.block h1, .block h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em;
  font-weight: 800; margin: 0 0 1rem; text-wrap: balance;
}
.block-kopf p { font-size: 1.0625rem; color: var(--grau); margin: 0; }
.block--hell .block-kopf p { color: var(--grau-dunkel); }

/* ---------- Vorteile ---------- */
.vorteile { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .vorteile { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .vorteile { grid-template-columns: repeat(4, 1fr); } }
.vorteil {
  background: var(--schwarz-karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.5rem;
  transition: transform var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve);
}
.vorteil:hover { transform: translateY(-4px); border-color: var(--rot); }
.vorteil-icon {
  width: 2.75rem; height: 2.75rem; border-radius: var(--radius);
  background: oklch(0.55 0.22 27 / 0.16); color: var(--rot-hell);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.vorteil-icon svg { width: 1.4rem; height: 1.4rem; }
.vorteil h3 { font-size: 1.125rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.vorteil p { margin: 0; color: var(--grau); font-size: 0.9375rem; }

/* ---------- Zwei Spalten ---------- */
.zwei { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 56rem) { .zwei { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.zwei-bild picture, .zwei-bild img { border-radius: var(--radius); width: 100%; }
.zwei h2 { margin-top: 0; }
.zwei p { color: var(--grau); }
.block--hell .zwei p { color: var(--grau-dunkel); }

/* ---------- Klassen ---------- */
.gruppen { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .gruppen { grid-template-columns: repeat(2, 1fr); } }
.gruppe {
  background: var(--schwarz-karte); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
}
.gruppe-bild { aspect-ratio: 16 / 9; overflow: hidden; background: var(--schwarz-weich); }
.gruppe-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--kurve); }
.gruppe:hover .gruppe-bild img { transform: scale(1.04); }
.gruppe-inhalt { padding: 1.5rem; flex: 1; }
.gruppe h3 { font-size: 1.375rem; margin: 0 0 1rem; letter-spacing: -0.02em; }
.klasse { padding-block: 0.9rem; border-top: 1px solid var(--linie); }
.klasse:first-of-type { border-top: none; padding-top: 0; }
.klasse-kopf { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.25rem; }
.klasse-kuerzel {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em;
  background: var(--rot); color: var(--weiss); padding: 0.15rem 0.45rem; border-radius: 3px;
  flex-shrink: 0;
}
.klasse h4 { font-size: 1rem; margin: 0; }
.klasse p { margin: 0; font-size: 0.9375rem; color: var(--grau); }

/* ---------- Team ---------- */
.team { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .team { grid-template-columns: repeat(5, 1fr); } }
.person { text-align: left; }
.person-bild {
  aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  background: var(--schwarz-karte); margin-bottom: 0.85rem; position: relative;
}
.person-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--kurve); }
.person:hover .person-bild img { transform: scale(1.05); }
.person-platzhalter {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--grau-dunkel); font-size: 2.5rem; font-weight: 800;
  background: var(--schwarz-karte);
}
.person h3 { font-size: 1rem; margin: 0 0 0.15rem; }
.person p { margin: 0; font-size: 0.875rem; color: var(--grau); }
.person .klassen { color: var(--rot-hell); font-weight: 700; font-size: 0.8125rem; margin-top: 0.25rem; }

/* ---------- Standorte ---------- */
.orte { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .orte { grid-template-columns: repeat(3, 1fr); } }
.ort {
  background: var(--schwarz-karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.5rem;
  transition: border-color var(--tempo) var(--kurve);
}
.ort:hover { border-color: var(--rot); }
.ort--ruht { opacity: 0.85; }
.ort-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.ort h3 { font-size: 1.25rem; margin: 0; letter-spacing: -0.01em; }
.ort-schild {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 3px; white-space: nowrap;
}
.ort-schild--haupt { background: var(--rot); color: var(--weiss); }
.ort-schild--ruht { background: var(--linie); color: var(--grau); }
.ort-zeile { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.6rem; font-size: 0.9375rem; color: var(--grau); }
.ort-zeile svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: 0.15rem; color: var(--rot-hell); }
.ort-hinweis {
  background: oklch(0.55 0.22 27 / 0.12); border-radius: var(--radius);
  padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--weiss); margin-top: 0.75rem;
}
/* Adresse fuehrt zu Google Maps. Nur ein Link, keine eingebettete Karte, damit ohne
   Zustimmung nichts zu Google geladen wird. */
.ort-karte { text-decoration: none; border-radius: var(--radius); margin-inline: -0.4rem; padding: 0.4rem; }
.ort-karte:hover, .ort-karte:focus-visible { background: oklch(0.55 0.22 27 / 0.1); }
.ort-karte:hover span, .ort-karte:focus-visible span { color: var(--weiss); }
.ort-karte-hinweis {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem;
  font-size: 0.8125rem; font-weight: 700; color: var(--rot-hell);
}
.ort-karte-hinweis svg { width: 0.9rem; height: 0.9rem; transition: transform var(--tempo) var(--kurve); }
.ort-karte:hover .ort-karte-hinweis svg { transform: translateX(3px); }

/* ---------- Fahrzeuge ---------- */
.flotte { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .flotte { grid-template-columns: repeat(4, 1fr); } }
.fahrzeug { border-radius: var(--radius); overflow: hidden; background: var(--schwarz-karte); border: 1px solid var(--linie); }
.fahrzeug-bild { aspect-ratio: 4 / 3; overflow: hidden; }
.fahrzeug-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--kurve); }
.fahrzeug:hover .fahrzeug-bild img { transform: scale(1.05); }
.fahrzeug-text { padding: 0.9rem 1rem; }
.fahrzeug h3 { font-size: 0.9375rem; margin: 0; }
.fahrzeug p { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--grau); }

/* ---------- Ablauf ---------- */
.schritte { display: grid; gap: 1.25rem; counter-reset: schritt; }
@media (min-width: 52rem) { .schritte { grid-template-columns: repeat(4, 1fr); } }
.schritt { position: relative; padding-top: 3.25rem; }
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  background: var(--rot); color: var(--weiss); font-weight: 800; font-size: 1.05rem;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.schritt h3 { font-size: 1.0625rem; margin: 0 0 0.4rem; }
.schritt p { margin: 0; font-size: 0.9375rem; color: var(--grau); }
.block--hell .schritt p { color: var(--grau-dunkel); }

/* ---------- Formular ---------- */
.formular { display: grid; gap: 1.25rem; max-width: 42rem; }
.feld { display: grid; gap: 0.4rem; }
.feld label { font-weight: 600; font-size: 0.9375rem; }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem; padding: 0.8rem 0.9rem;
  background: var(--schwarz-karte); color: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--radius);
  transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--rot);
  box-shadow: 0 0 0 3px oklch(0.55 0.22 27 / 0.25);
}
.feld-reihe { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .feld-reihe { grid-template-columns: 1fr 1fr; } }
.zustimmung { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.9375rem; color: var(--grau); }
.zustimmung input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--rot); }
.hinweis-kasten {
  background: var(--schwarz-karte); border: 1px solid var(--linie);
  border-left: 3px solid var(--rot);
  border-radius: var(--radius); padding: 1rem 1.15rem; font-size: 0.9375rem; color: var(--grau);
}
.honig { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ---------- Bestätigung nach dem Absenden ---------- */
.dank {
  background: var(--schwarz-karte); border: 1px solid var(--rot);
  border-radius: var(--radius); padding: 2rem 1.75rem; max-width: 42rem; text-align: center;
}
.dank-zeichen {
  width: 3.25rem; height: 3.25rem; margin: 0 auto 1.15rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--rot-knopf); color: var(--weiss); font-size: 1.6rem; font-weight: 700;
}
.dank h3 { font-size: 1.375rem; margin: 0 0 0.6rem; letter-spacing: -0.02em; }
.dank p { margin: 0 0 0.9rem; color: var(--grau); }
.dank-demo {
  font-size: 0.875rem; background: var(--schwarz-weich); border-radius: var(--radius);
  padding: 0.85rem 1rem; margin-bottom: 1.25rem !important;
}

/* ---------- Rechtstexte ---------- */
.recht-liste { display: grid; gap: 0; border-top: 1px solid var(--linie); }
.recht-zeile { display: grid; gap: 0.15rem; padding: 0.9rem 0; border-bottom: 1px solid var(--linie); }
@media (min-width: 40rem) { .recht-zeile { grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: baseline; } }
.recht-zeile b { font-size: 0.9375rem; }
.recht-zeile span { color: var(--grau); font-size: 0.9375rem; }

/* ---------- Unterseiten je Klassengruppe ---------- */
.brotkrumen { display: flex; flex-wrap: wrap; gap: 0.45rem; font-size: 0.875rem; color: var(--grau-dunkel); }
.brotkrumen a { color: var(--grau); text-decoration: none; }
.brotkrumen a:hover { color: var(--weiss); }

.stufen { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .stufen { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } }
.stufe { background: var(--schwarz-karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.35rem; }
.stufe b { display: block; color: var(--rot-hell); font-size: 1.0625rem; margin-bottom: 0.4rem; }
.stufe p { margin: 0; color: var(--grau); font-size: 0.9375rem; }

.klassen-karten { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .klassen-karten { grid-template-columns: repeat(2, 1fr); } }
.klasse-karte {
  background: var(--schwarz-karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.35rem; transition: border-color var(--tempo) var(--kurve);
}
.klasse-karte:hover { border-color: var(--rot); }
.klasse-karte .klasse-kopf { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.klasse-karte h3 { font-size: 1.0625rem; margin: 0; }
.klasse-karte p { margin: 0; color: var(--grau); font-size: 0.9375rem; }

/* Einfaches Flex-Layout statt verschachteltem Raster. Die frühere Fassung quetschte den
   Beschreibungstext am Handy auf unter 100 px Breite, dadurch stand er in zehn abgehackten
   Zeilen. Jetzt bekommt der Text die volle Kartenbreite, der Pfeil sitzt am Ende. */
.weiter { display: grid; gap: 0.75rem; }
@media (min-width: 48rem) { .weiter { grid-template-columns: repeat(2, 1fr); } }
.weiter-karte {
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--schwarz-karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.25rem 1.35rem; text-decoration: none;
  transition: border-color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}
.weiter-karte:hover { border-color: var(--rot); transform: translateY(-2px); }
.weiter-karte b { font-size: 1.0625rem; }
.weiter-karte span { color: var(--grau); font-size: 0.9375rem; }
.weiter-karte i {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem;
  font-style: normal; font-weight: 700; font-size: 0.9063rem; color: var(--rot-hell);
}
.weiter-karte i svg { width: 1.05rem; height: 1.05rem; transition: transform var(--tempo) var(--kurve); }
.weiter-karte:hover i svg { transform: translateX(4px); }

/* Verweis am Fuß einer Gruppenkarte auf die zugehörige Unterseite */
.gruppe-mehr {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--linie);
  width: 100%; color: var(--rot-hell); font-weight: 700; font-size: 0.9688rem; text-decoration: none;
}
.gruppe-mehr svg { width: 1.1rem; height: 1.1rem; transition: transform var(--tempo) var(--kurve); }
.gruppe:hover .gruppe-mehr svg, .gruppe-mehr:hover svg { transform: translateX(4px); }

/* ---------- Kontaktseite ---------- */
.kontakt-wege { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .kontakt-wege { grid-template-columns: repeat(4, 1fr); } }
.kontakt-weg {
  display: grid; justify-items: center; text-align: center; gap: 0.25rem;
  background: var(--schwarz-karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 1.5rem 1rem; text-decoration: none;
  transition: border-color var(--tempo) var(--kurve), transform var(--tempo) var(--kurve);
}
.kontakt-weg:hover { border-color: var(--rot); transform: translateY(-3px); }
.kontakt-weg svg { width: 1.6rem; height: 1.6rem; color: var(--rot-hell); margin-bottom: 0.5rem; }
.kontakt-weg b { font-size: 0.9375rem; }
.kontakt-weg span { color: var(--grau); font-size: 0.875rem; word-break: break-word; }

/* ---------- Fester Anrufbalken am Handy ----------
   Erscheint erst nach dem Titelbereich, damit er nicht sofort im Weg steht.
   Fahrschulen werden ueberwiegend angerufen, deshalb gehoert das immer griffbereit. */
.ruf {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 0.6rem; padding: 0.7rem 1rem;
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: oklch(0.16 0.005 250 / 0.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--linie);
  transform: translateY(110%); transition: transform 320ms var(--kurve);
}
.ruf[data-zeigen="true"] { transform: translateY(0); }
@media (min-width: 56rem) { .ruf { display: none; } }
.ruf a { flex: 1; justify-content: center; padding-block: 0.8rem; }
.ruf .knopf--rand { flex: 0 0 auto; padding-inline: 1.1rem; }
body { padding-bottom: 0; }
@media (max-width: 55.99rem) { body { padding-bottom: 4.5rem; } }

/* ---------- Zahlenleiste und Einstiegshinweis ---------- */
.zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
@media (min-width: 48rem) { .zahlen { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
.zahl { text-align: center; }
.zahl b { display: block; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 800; line-height: 1; color: var(--rot-hell); letter-spacing: -0.03em; }
.zahl-einheit { display: block; font-size: 0.9375rem; font-weight: 700; margin-top: 0.35rem; }
.zahl-text { display: block; font-size: 0.8125rem; color: var(--grau); margin-top: 0.15rem; }

.einstieg {
  display: flex; gap: 1rem; align-items: flex-start;
  background: oklch(0.55 0.22 27 / 0.1); border: 1px solid oklch(0.55 0.22 27 / 0.3);
  border-radius: var(--radius); padding: 1.15rem 1.35rem; max-width: 46rem; margin-top: 2rem;
}
.einstieg svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; color: var(--rot-hell); margin-top: 0.15rem; }
.einstieg strong { display: block; margin-bottom: 0.2rem; }
.einstieg p { margin: 0; color: var(--grau); font-size: 0.9375rem; }

/* ---------- Instagram ---------- */
.kopf-insta {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius); color: var(--grau); margin-inline: 0.35rem 0.6rem;
  transition: color var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}
.kopf-insta svg { width: 1.35rem; height: 1.35rem; }
.kopf-insta:hover, .kopf-insta:focus-visible { color: var(--weiss); background: var(--schwarz-karte); }

.insta {
  display: grid; gap: 1.5rem; align-items: center; text-align: center;
  background: var(--schwarz-karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 48rem) { .insta { grid-template-columns: auto 1fr auto; text-align: left; gap: 2rem; } }
.insta-zeichen {
  width: 3.5rem; height: 3.5rem; border-radius: 14px; margin-inline: auto;
  display: grid; place-items: center; color: var(--weiss);
  background: linear-gradient(135deg, oklch(0.62 0.19 45), oklch(0.55 0.24 350), oklch(0.5 0.2 290));
}
.insta-zeichen svg { width: 1.85rem; height: 1.85rem; }
.insta h2 { font-size: clamp(1.25rem, 3vw, 1.625rem); margin: 0 0 0.35rem; letter-spacing: -0.02em; }
.insta p { margin: 0; color: var(--grau); font-size: 0.9688rem; }
.insta-name { color: var(--rot-hell); font-weight: 700; }

/* ---------- Haeufige Fragen ---------- */
.fragen { display: grid; gap: 0.6rem; max-width: 52rem; }
.frage {
  background: var(--schwarz-karte); border: 1px solid var(--linie);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color var(--tempo) var(--kurve);
}
.frage[open] { border-color: var(--rot); }
.frage summary {
  padding: 1.1rem 1.25rem; cursor: pointer; font-weight: 700; font-size: 1rem;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; width: 0.65rem; height: 0.65rem; flex-shrink: 0;
  border-right: 2px solid var(--rot); border-bottom: 2px solid var(--rot);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--tempo) var(--kurve);
}
.frage[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.frage summary:hover { background: oklch(0.55 0.22 27 / 0.08); }
.frage p { margin: 0; padding: 0 1.25rem 1.25rem; color: var(--grau); font-size: 0.9375rem; }

/* ---------- Bildstreifen mit Aufruf ---------- */
.streifen { position: relative; min-height: 26rem; display: grid; align-items: center; overflow: hidden; }
.streifen-bild { position: absolute; inset: 0; }
.streifen-bild picture, .streifen-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.streifen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, oklch(0.16 0.005 250 / 0.82), oklch(0.16 0.005 250 / 0.68));
}
.streifen-inhalt { position: relative; z-index: 2; text-align: center; padding-block: 4rem; }
.streifen-text {
  font-size: clamp(1.375rem, 3.5vw, 2rem); font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 1.5rem; text-wrap: balance;
}

/* ---------- Fusszeile ---------- */
.fuss { background: oklch(0.12 0.005 250); border-top: 1px solid var(--linie); padding-block: 3rem 2rem; }
.fuss-gitter { display: grid; gap: 2rem; margin-bottom: 2.5rem; }
@media (min-width: 52rem) { .fuss-gitter { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h3 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grau-dunkel); margin: 0 0 1rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.fuss a { color: var(--grau); text-decoration: none; transition: color var(--tempo) var(--kurve); }
.fuss a:hover { color: var(--weiss); }
.fuss-kontakt { display: flex; gap: 0.6rem; align-items: center; color: var(--grau); font-size: 0.9375rem; }
.fuss-kontakt svg { width: 1.05rem; height: 1.05rem; color: var(--rot-hell); flex-shrink: 0; }
.fuss-unten {
  border-top: 1px solid var(--linie); padding-top: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.875rem; color: var(--grau-dunkel);
}

/* ---------- Bewegung beim Scrollen ---------- */
[data-zeig] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--kurve), transform 600ms var(--kurve); }
[data-zeig].sichtbar { opacity: 1; transform: none; }

@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; }
  [data-zeig] { opacity: 1; transform: none; }
  .held-bild img { animation: none; }
}

:focus-visible { outline: 2px solid var(--rot-hell); outline-offset: 3px; }