/* =========================================================================
   Layout

   Die Seite ist keine Abfolge von Kartenrastern mehr, sondern eine Strecke:
   heller Kopf, dann die Fahrt, dann ein Asphaltband, das die Strasse in die
   Seite hinein verlaengert, danach Inhalt in Zeilen statt in Kacheln.

   Dadurch gibt es zwischen Buehne und Inhalt keine sichtbare Kante mehr:
   oben laeuft der Himmel in den Textbereich, unten laeuft der Asphalt weiter.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Kopfbereich über der Szene
   ------------------------------------------------------------------------- */

.lede {
  padding-top: calc(var(--header-height) + clamp(2rem, 6vw, 4rem));
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(180deg, var(--gray-0) 0%, #eef3f7 40%, #cadbe6 78%, var(--sky) 100%);
}

.lede__grid {
  display: grid;
  gap: var(--space-6);
  align-items: end;
}

@media (min-width: 60rem) {
  .lede__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-12);
  }
}

.lede__title {
  font-size: var(--display-lg);
  line-height: 1.02;
  letter-spacing: -0.032em;
  max-width: 14ch;
  text-wrap: balance;
}

/* Der Titel ist bewusst zweifarbig: die Aussage steht im ersten Teil,
   der zweite Teil traegt die Marke. */
.lede__title em {
  font-style: normal;
  color: var(--brand-600);
}

.lede__text {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  color: var(--fg-muted);
  max-width: 44ch;
}

.lede__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* Der Aufmacher kommt ohne Schaltflaechen aus: der Weg zur Anmeldung steht
   als Satz da, die Handlung fuehrt das Band unter der Szene. */
.lede__note {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--border-default);
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--fg-muted);
  max-width: 42ch;
}

.lede__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-subtle);
}

/* -------------------------------------------------------------------------
   Asphaltband: setzt die Strasse der Szene fort und traegt die Kennzahlen
   ------------------------------------------------------------------------- */

.asphalt {
  position: relative;
  background: #232829;
  color: var(--gray-0);
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
}

/* durchgezogene Randlinie, wie am Fahrbahnrand */
.asphalt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: rgb(240 244 245 / 0.28);
}

/* Das Band ist der kurze Weg zum Kontakt: drei gleichwertige Wege
   nebeneinander. Vorher stand die Handynummer als grosser Block links und
   die uebrigen klein daneben - zwei Behandlungen fuer dieselbe Art Angabe.
   Bewusst nur Kontaktwege, Adresse und Zeiten stehen im Kontaktteil. */
.asphalt__ways {
  display: grid;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Spalten so breit wie ihr Inhalt, nicht zu gleichen Teilen: Bei gleichen
   Teilen bricht die E-Mail-Adresse um, weil sie deutlich laenger ist als
   die Nachbarn. Erst ab 62rem, darunter reicht die Breite fuer drei
   Spalten nebeneinander nicht aus. */
@media (min-width: 62rem) {
  .asphalt__ways {
    grid-template-columns: repeat(3, max-content);
    justify-content: space-between;
    gap: var(--space-8);
  }
}

/* Symbol in der Randspalte, darunter laeuft die Beschreibung durch */
.asphalt__ways li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: 0.3rem;
  align-items: start;
  font-size: var(--text-base);
}

.asphalt__ways .icon {
  width: 1.35rem;
  height: 1.35rem;
  color: var(--brand-400);
  grid-row: span 2;
  margin-top: 0.2rem;
}

/* Gleiche Schrift und gleiche Ziffern in allen drei Eintraegen.

   Unterstrich als text-decoration und nicht als border-bottom: Sollte eine
   Angabe doch einmal umbrechen, folgt die Linie dem Text, statt als Strich
   ueber die ganze zweite Zeile zu laufen. */
.asphalt__ways a {
  color: var(--gray-0);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.28);
  text-underline-offset: 0.22em;
  justify-self: start;
  overflow-wrap: anywhere;
}

.asphalt__ways a:hover,
.asphalt__ways a:focus-visible { text-decoration-color: var(--brand-400); }

.asphalt__ways span {
  color: rgb(255 255 255 / 0.6);
  line-height: var(--leading-base);
}


/* -------------------------------------------------------------------------
   Zeilenliste statt Kartenraster
   ------------------------------------------------------------------------- */

/* Keine Linie ueber dem ersten Eintrag - Trennlinien gehoeren
   zwischen die Zeilen, nicht davor. */
.rows { border-top: 0; }

.row {
  display: grid;
  gap: var(--space-2) var(--space-6);
  padding-block: clamp(1rem, 2vw, 1.35rem);
  border-bottom: var(--border-width) solid var(--border-subtle);
  align-items: baseline;
}

@media (min-width: 48rem) {
  .row {
    grid-template-columns: 5.6rem minmax(0, 11rem) minmax(0, 1fr) 4.5rem;
    gap: var(--space-6);
    align-items: start;
  }
  .row__age { text-align: right; }
}

/* leichte Hervorhebung beim Ueberfahren, damit die Zeile als Einheit lesbar bleibt */
.row {
  margin-inline: calc(var(--space-3) * -1);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sign);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.row:hover { background: var(--bg-muted); }

.row__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 4.6rem;
  height: 2.4rem;
  padding-inline: var(--space-2);
  background: var(--bg-surface);
  border: 2px solid var(--fg-default);
  border-radius: var(--radius-sign);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

/* Fahrzeugsymbol zur Klasse, aus der Symbolbibliothek */
.row__pic {
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
}

.row--lead .row__key {
  background: var(--bg-brand);
  border-color: var(--bg-brand);
  color: var(--fg-on-brand);
}

.row__name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.row__text {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-muted);
  max-width: 58ch;
}

.row__age {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   Strecke: der Ablauf als durchgehende Linie
   ------------------------------------------------------------------------- */

.track {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-left: 3.25rem;
}

/* Die Linie endet an der letzten Station, nicht darunter im Leeren. */
.track::before {
  content: "";
  position: absolute;
  left: 1.0625rem;
  top: 1rem;
  bottom: 4.5rem;
  width: 3px;
  background: repeating-linear-gradient(
    180deg,
    var(--border-default) 0 12px,
    transparent 12px 26px
  );
}

.track__stop { position: relative; }

.track__stop::before {
  counter-increment: stop;
  content: counter(stop);
  position: absolute;
  left: -3.25rem;
  top: -0.15rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--bg-brand);
  color: var(--fg-on-brand);
  border: 3px solid var(--bg-page);
  border-radius: var(--radius-sign);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.track { counter-reset: stop; }

.track__stop h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.track__stop p {
  font-size: var(--text-sm);
  line-height: var(--leading-base);
  color: var(--fg-muted);
  max-width: 62ch;
}

/* -------------------------------------------------------------------------
   Redaktionelles Zweispaltenlayout
   ------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.split__aside h2 {
  font-size: var(--display-md);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.split__aside p {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  max-width: 34ch;
}

/* Personen mit Platz fuer echte Fotos statt als Textzeile */
.people {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 46rem) {
  .people { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}

.person__photo {
  aspect-ratio: 3 / 4;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  background: var(--bg-muted);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--gray-400);
  overflow: hidden;
}

.person__photo img { width: 100%; height: 100%; object-fit: cover; }

.person__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.person__role {
  margin-top: 2px;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-700);
}

.person p {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-muted);
}

/* -------------------------------------------------------------------------
   Kontaktzeilen
   ------------------------------------------------------------------------- */

.facts { border-top: var(--border-width) solid var(--border-subtle); }

.fact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.fact__label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.fact__value {
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  color: var(--fg-default);
  text-decoration: none;
}

a.fact__value:hover { color: var(--fg-brand); }

/* -------------------------------------------------------------------------
   Preisliste

   Aufgebaut wie die uebliche Gliederung einer Fahrschulpreisliste:
   Grundbetrag, Fahrstunden, Sonderfahrten, Vorstellungsentgelte.
   Die Betraege sind Platzhalter und muessen vom Kunden kommen.
   ------------------------------------------------------------------------- */

.price-group + .price-group { margin-top: var(--space-10); }

.price-group__head {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-default);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-default);
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--border-subtle);
}

.price__label { font-size: var(--text-sm); }
.price__label small { display: block; color: var(--fg-subtle); font-size: var(--text-xs); }

.price__value {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Noch nicht befuellte Betraege sichtbar als Luecke, nicht als Zahl */
.price__value[data-todo] {
  color: var(--fg-subtle);
  font-weight: var(--weight-medium);
  border-bottom: 2px dotted var(--border-default);
  padding-bottom: 1px;
}

/* -------------------------------------------------------------------------
   Abwechslung im Seitenaufbau

   Nicht jede Sektion folgt dem gleichen Schema. Die Klassen stehen als Liste
   neben einem schmalen Anker, der Ablauf laeuft waagerecht ueber die volle
   Breite, das Team steht unter einer mittigen Ueberschrift, die Anmeldung
   als nummerierte Reihe. Dadurch bekommt das Scrollen einen Rhythmus.
   ------------------------------------------------------------------------- */

/* Kopf, der ueber die volle Breite sitzt statt in der Randspalte */
.lead-head {
  max-width: 46rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.lead-head--center { margin-inline: auto; text-align: center; }

.lead-head h2 {
  font-size: var(--display-md);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.lead-head p {
  margin-top: var(--space-4);
  font-size: var(--text-base);
  color: var(--fg-muted);
  max-width: 56ch;
}

.lead-head--center p { margin-inline: auto; }

/* Ablauf waagerecht: vier Etappen nebeneinander an einer Linie */
.route {
  display: grid;
  gap: var(--space-6);
  counter-reset: leg;
}

@media (min-width: 52rem) {
  .route {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    position: relative;
  }

  /* Fahrbahnmarkierung zwischen den Etappen. Sie hängt an der einzelnen
     Etappe und reicht bis zur Mitte der nächsten, nicht über die ganze Reihe.
     Sonst liefe hinter dem letzten Schritt noch ein Strich weiter, obwohl da
     nichts mehr kommt. */
  .leg::after {
    content: "";
    position: absolute;
    top: 1.05rem;
    left: 1.075rem;                              /* Mitte der Marke */
    width: calc(100% + var(--space-5));          /* Spaltenbreite plus Abstand */
    height: 3px;
    background: repeating-linear-gradient(
      90deg, var(--border-default) 0 14px, transparent 14px 30px
    );
  }

  .leg:last-child::after { content: none; }
}

.leg { position: relative; counter-increment: leg; }

.leg::before {
  content: counter(leg);
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  margin-bottom: var(--space-4);
  background: var(--bg-brand);
  color: var(--fg-on-brand);
  border: 3px solid var(--bg-page);
  border-radius: var(--radius-sign);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

.leg h3 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.leg p {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-muted);
}

/* Was zur Anmeldung mitzubringen ist.

   Diese Sektion steht bewusst als einzige auf getoentem Grund und ohne jede
   Trennlinie. Der Rest der Seite arbeitet mit Zeilen und Haarlinien - waere
   das hier auch so, saehe der Abschnitt aus wie die Klassenliste weiter oben.

   Und ohne Nummerierung: Die vier Unterlagen haben keine Reihenfolge, man
   bringt sie zusammen mit. Eine Zaehlung wuerde einen Ablauf behaupten, den
   es nicht gibt. */
.section--paper {
  background: var(--bg-brand-subtle);
  border-block: var(--border-width) solid var(--border-subtle);
}

.bring-grid { display: grid; gap: var(--space-8); }

@media (min-width: 56rem) {
  .bring-grid {
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: start;
  }
}

.bring-intro h2 { margin-bottom: var(--space-4); }

.bring-intro p {
  color: var(--fg-muted);
  max-width: 34ch;
}

.bring-intro__hint {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.bring {
  display: grid;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

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

/* Symbol in der Randspalte, Text daneben. Keine Kachel, kein Rahmen. */
.bring__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: start;
}

.bring__pic {
  width: 1.85rem;
  height: 1.85rem;
  grid-row: span 2;
  color: var(--brand-700);
  margin-top: 0.1rem;
}

.bring__item b {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.bring__item span {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-muted);
}

/* Preise: Kopf oben, Tabelle darunter ueber die ganze Breite */
.price-cols { display: grid; gap: var(--space-8); }

@media (min-width: 56rem) {
  .price-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
}

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

.contact { display: grid; gap: var(--space-10); }

@media (min-width: 60rem) {
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--space-12);
    align-items: start;
  }
}

.contact__intro {
  margin-top: var(--space-3);
  color: var(--fg-muted);
  max-width: 44ch;
}

/* Kontaktwege: Symbol in der Randspalte, Angabe gross, Erklaerung klein.
   Vorher standen Adresse, Nummern und Zeiten als sieben gleiche Zeilen
   untereinander - dabei sind das zwei ganz verschiedene Arten von Angabe. */
.ways {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

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

.ways li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: var(--space-3);
  row-gap: 0.1rem;
  align-items: start;
}

.ways__pic {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--brand-700);
  grid-row: span 2;
  margin-top: 0.15rem;
  flex: none;
}

.ways b {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.ways b a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-default);
  text-underline-offset: 0.2em;
}

.ways b a:hover,
.ways b a:focus-visible { text-decoration-color: var(--brand-700); }

.ways span {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-muted);
}

.hours {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--border-subtle);
}

.hours__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
}

.hours dl { display: grid; gap: var(--space-3); margin: 0; }

.hours dl > div {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
}

.hours dt { font-size: var(--text-sm); color: var(--fg-muted); }

.hours dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Karte auf Klick */
.mapcard {
  display: grid;
  min-height: 22rem;
  background: var(--bg-brand-subtle);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.mapcard__intro {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-8);
}

.mapcard__pin { width: 2rem; height: 2rem; color: var(--brand-700); }

.mapcard__intro b {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.mapcard__intro p {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--fg-muted);
}

.mapcard__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--fg-default);
}

.mapcard__link .icon { width: 1rem; height: 1rem; }

.mapcard iframe { width: 100%; height: 100%; min-height: 22rem; border: 0; display: block; }