/* Die einzelnen Abschnitte der Seite. */

/* =======================================================================
   Startseite in Richtung A

   Solmaz hat die 1:1-Uebernahme des sichtbaren Erscheinungsbildes
   beauftragt. Die Werte unten sind an referenz/original-desktop.png und
   referenz/abschnitt-*.png gemessen, nicht entworfen.
   ======================================================================= */

/* --- Hero: Foto formatfuellend, dunkler Schleier, Text links ----------
   Die Schichtung laeuft ueber positive z-index in einem eigenen
   Stapelkontext. Mit negativen Werten hinter dem Inhalt brauchte der
   Browser zum Rastern dieses Abschnitts unverhaeltnismaessig lange - die
   Bildaufnahme lief damit in die Zeitsperre. */
/* 975px hoch, am Original gemessen. Der frueher gesetzte 860px-Deckel lag
   115px darunter und schnitt den Hero sichtbar kuerzer. */
.hero {
  position: relative;
  min-height: min(94vh, 975px);
  display: grid;
  align-items: center;
  overflow: hidden;
}
.hero__bild { position: absolute; inset: 0; z-index: 0; }
.hero__bild picture { display: block; width: 100%; height: 100%; }
.hero__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Im Original sitzt die Person rechts im Bild; beim Beschneiden auf
     schmale Fenster darf sie nicht herausfallen. */
  object-position: 72% center;
}
/* Zwei Verlaeufe: links dunkler fuer die Schrift, rechts offener fuers Foto.
   Feste rgba-Werte statt color-mix() - mit color-mix() in vier
   Verlaufsstopps dauerte das Rastern so lange, dass die Aufnahme abbrach.
   Die Werte sind dieselben, --farbe-schleier liefert das RGB-Tripel. */
.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(var(--farbe-schleier), 0.95) 0%,
    rgba(var(--farbe-schleier), 0.90) 42%,
    rgba(var(--farbe-schleier), 0.44) 78%,
    rgba(var(--farbe-schleier), 0.28) 100%);
}
.hero__innen {
  position: relative;
  z-index: 2;
  padding-block: calc(var(--kopf-hoehe) + var(--ab-5)) var(--ab-6);
}
/* Derselbe Kopf auf den Unterseiten, nur flacher.

   Die Startseite darf einen bildschirmfuellenden Einstieg haben, eine
   Unterseite nicht: dort will der Besucher den Inhalt sehen, nicht erst
   scrollen muessen. Gestaltung, Schleier und Schriftfarben bleiben
   unveraendert - es aendert sich ausschliesslich die Hoehe. */
.hero--seite { min-height: min(58vh, 560px); }
.hero--seite .hero__innen {
  padding-block: calc(var(--kopf-hoehe) + var(--ab-4)) var(--ab-4);
}
/* Der Schleier der Startseite ist auf ein Foto mit EINER Person rechts
   gerechnet. Das Teamfoto zeigt eine Gruppe ueber die ganze Breite, und mit
   0,44/0,28 auf der rechten Haelfte verschwinden die hinteren Gesichter.
   Links, wo die Schrift steht, bleiben die Werte unangetastet - der dort
   gemessene Kontrast aendert sich dadurch nicht. */
.hero--seite .hero__schleier {
  background: linear-gradient(100deg,
    rgba(var(--farbe-schleier), 0.95) 0%,
    rgba(var(--farbe-schleier), 0.88) 40%,
    rgba(var(--farbe-schleier), 0.30) 72%,
    rgba(var(--farbe-schleier), 0.12) 100%);
}
.hero--seite .hero__bild img { object-position: 50% 28%; }
/* Portraetfoto einer Lehrkraft: das Gesicht sitzt im oberen Drittel, und der
   Text steht links davor. Der Ausschnitt haelt den Kopf im Bild, der
   Schleier laesst die rechte Seite frei. */
.hero--portraet .hero__bild img { object-position: 72% 18%; }
.hero--portraet .hero__schleier {
  background: linear-gradient(100deg,
    rgba(var(--farbe-schleier), 0.95) 0%,
    rgba(var(--farbe-schleier), 0.90) 44%,
    rgba(var(--farbe-schleier), 0.38) 74%,
    rgba(var(--farbe-schleier), 0.18) 100%);
}
/* Die Knopfreihe im Kopf. Auf der Startseite steht dort ein einzelner Knopf,
   hier zwei nebeneinander - sie muessen umbrechen duerfen, sonst schieben
   sie sich am Telefon uebereinander. */
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: var(--ab-2); }
/* .knopf--rand ist fuer hellen Grund gebaut (dunkle Schrift, dunkle Linie).
   Im Kopf steht er auf dem abgedunkelten Foto und war dort dunkel auf
   dunkel. Auf dieser Flaeche traegt er helle Schrift und helle Linie. */
.hero .knopf--rand {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.hero .knopf--rand:hover {
  border-color: #fff;
  color: #fff;
}
/* Die Ruecksprungmarke steht auf dem dunklen Foto, nicht auf hellem Grund. */
.marke--hell { color: var(--farbe-koralle); }
/* Kopf ohne Foto (Fehlerseite, Rechtstexte): dieselbe dunkle Flaeche, die
   der Schleier sonst ueber dem Bild erzeugt - hier als Farbe. Der Wert ist
   der linke, deckende Stopp des Verlaufs, damit beide gleich aussehen. */
.hero--schlicht { min-height: min(42vh, 380px); }
.hero--schlicht .hero__innen { padding-block: calc(var(--kopf-hoehe) + var(--ab-4)) var(--ab-4); }
.hero--schlicht { background: rgb(var(--farbe-schleier)); }
/* Am Telefon laeuft der Schleier von oben nach unten statt von links nach
   rechts.

   Der Verlauf der Startseite geht auf 100 Grad - bei 1440px liegt die
   Schrift links im dunklen Teil und das Foto rechts im offenen. Bei 390px
   Breite gibt es kein "rechts" mehr: dieselbe Regel deckt die ganze Flaeche
   ab, und auf einem Lehrkraft-Profil war von der Person nichts mehr zu
   sehen. Senkrecht bleibt oben genug Deckung fuer die Schrift und unten das
   Gesicht sichtbar. */
@media (max-width: 48rem) {
  .hero--seite .hero__schleier,
  .hero--portraet .hero__schleier {
    background: linear-gradient(180deg,
      rgba(var(--farbe-schleier), 0.92) 0%,
      rgba(var(--farbe-schleier), 0.86) 46%,
      rgba(var(--farbe-schleier), 0.55) 78%,
      rgba(var(--farbe-schleier), 0.30) 100%);
  }
  .hero--portraet .hero__bild img { object-position: 50% 12%; }
}
/* Ein Platzhalter statt eines Fotos darf nicht als Vollbild hinter dem Text
   liegen - er ist nur ein Buchstabe. Dann traegt der Kopf die Flaechenfarbe. */
.hero__bild .person__platzhalter {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 12rem;
}
/* 48rem, nicht 40: im Original laeuft die Ueberschrift als
   "Erlebe individuelle Online / Nachhilfe statt / Massenunterricht". Bei
   40rem bricht sie eine Zeile frueher um und das Bild der Startseite
   stimmt nicht mehr. */
.hero__text {
  max-width: 48rem;
  display: grid;
  gap: var(--ab-3);
  justify-items: start;
}
.hero h1 { color: var(--farbe-koralle); }
/* Wie im Original: ein Wort der Ueberschrift ist unterstrichen. Es darf
   dabei nie umbrechen - sonst laeuft der Strich ueber zwei Zeilen. */
.hero h1 .strich {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  white-space: nowrap;
}
.hero__unter {
  font-size: var(--gr-lead);
  color: var(--farbe-koralle);
  max-width: 32rem;
}
.hero__bewertung { display: grid; gap: var(--ab-1); justify-items: start; }
.hero__bewertung-zeile {
  font-family: var(--schrift-titel);
  font-size: var(--gr-klein);
  font-weight: var(--fett-krftg);
  color: var(--farbe-koralle);
}
/* Die weisse Karte mit dem Google-Zeichen, wie im Original neben den
   Sternen. Sie fuehrt zum Eintrag - geladen wird von Google nichts. */
.bewertungskarte {
  display: inline-flex;
  align-items: center;
  gap: var(--ab-2);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-klein);
  background: var(--farbe-karte);
  color: var(--farbe-text);
  text-decoration: none;
  box-shadow: var(--schatten-auf-bild);
}
.bewertungskarte:hover { color: var(--farbe-text); }
.bewertungskarte svg { width: 22px; height: 22px; flex: none; }
.bewertungskarte b {
  font-family: var(--schrift-titel);
  font-size: var(--gr-klein);
}
.bewertungskarte span span {
  display: block;
  font-size: 0.8125rem;
  color: var(--farbe-text-leise);
}

/* --- Einleitung mit Video rechts -------------------------------------- */
.einleitung { display: grid; gap: var(--ab-5); align-items: center; }
/* 1,45:1, am Original gemessen: Textspalte 704px, Video 486px. Entwurf A
   stand auf 1,05:1 und machte die Textspalte 100px zu schmal. */
@media (min-width: 62rem) {
  .einleitung { grid-template-columns: 1.45fr 1fr; }
}
.einleitung__text { display: grid; gap: var(--ab-3); }
.einleitung__text p { color: var(--farbe-text-leise); }
.einleitung__ruf {
  display: grid;
  justify-content: center;
  margin-block-start: var(--ab-5);
}

/* --- Faecher-Kacheln --------------------------------------------------
   Neun Kacheln in drei Spalten waren das Erkennungszeichen der alten
   Startseite. Es sind jetzt acht: Solmaz hat acht Faecher bestaetigt und
   einzeln aufgezaehlt, die neunte hiess "Nebenfaecher" und sagte Faecher
   zu, die niemand genannt hat.

   Feste Spaltenzahl statt auto-fit: mit automatischer Spaltenzahl brachen
   die Kacheln als 4+4 um und die Reihe verlor ihr Raster. */
.kacheln {
  display: grid;
  gap: var(--ab-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 52rem) {
  .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 395x198 und Radius rund 47px, am Original gemessen. Die Beschriftung
   fuellt dort etwa 78 Prozent der Kachelbreite; Entwurf A kam mit 34px auf
   55 Prozent und die Kacheln wirkten leer.

   ENTSCHIEDEN (Mustafa, 04.08.2026): die Titelschrift bleibt. Die schwere,
   gerundete Schrift des Originals existiert dort gar nicht als Webfont -
   die alten Kacheln sind fertig gerenderte Grafiken des Baukastens, die
   Seite selbst laedt nur Plus Jakarta Sans und Instrument Sans (per
   Netzwerk-Mitschnitt am gerenderten Original geprueft). Es gibt also
   nichts zu lizenzieren; echte Textkacheln in der verfuegbaren Titelschrift
   schlagen eingebackene Bilder ohnehin (skalierbar, uebersetzbar, lesbar
   fuer Screenreader). */
.kachel {
  display: grid;
  place-items: center;
  min-height: 198px;
  padding: var(--ab-3);
  border-radius: var(--radius-kachel);
  font-family: var(--schrift-titel);
  font-weight: var(--fett-stark);
  /* Untere Grenze klein genug, dass "Franzoesisch" auf einem 375px-Schirm
     in der Kachel bleibt - sonst schiebt das Wort die ganze Seite um 6px
     zur Seite. Wortumbruch als zweite Sicherung. */
  font-size: clamp(1.25rem, 3.4vw, 3rem);
  letter-spacing: var(--sperr-eng);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  hyphens: auto;
  transition: transform var(--dauer) var(--kurve),
              box-shadow var(--dauer) var(--kurve);
}
.kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); }

/* Die Flaechenfarben sind aus den Original-PNGs gemessen. Die SCHRIFTfarbe
   je Kachel ist gerechnet, nicht uebernommen: fuenf der Kacheln trugen im
   Original weisse Schrift auf hellem Grund, Deutsch kam damit auf 1,33:1.
   Das ist die eine Abweichung, die nicht verhandelbar ist. */
.kachel--mathe     { background: #0699B4; color: #FFFFFF; }
.kachel--deutsch   { background: #FFDE5A; color: #2F2B29; }
.kachel--englisch  { background: #FF5858; color: #FFFFFF; }
.kachel--franz     { background: #CB6CE6; color: #FFFFFF; }
.kachel--spanisch  { background: #01BF64; color: #2F2B29; }
.kachel--tuerkisch { background: #FEBD5A; color: #2F2B29; }
.kachel--chemie    { background: #0EC2E0; color: #2F2B29; }
.kachel--physik    { background: #555555; color: #FFFFFF; }

/* --- "Was wir lernen werden" ------------------------------------------
   Im Original DREI zentrierte Spalten in zwei Reihen: Zeichen, Titel,
   zentrierter Fliesstext - kein Kartenrahmen, keine Nummern. Entwurf A
   machte daraus vier umrandete Karten mit 01 bis 06, weil das Raster bei
   1250px Inhaltsbreite auf vier Spalten umbrach. */
.lernpunkte {
  display: grid;
  gap: var(--ab-6) var(--ab-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .lernpunkte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lernpunkt {
  display: grid;
  gap: var(--ab-2);
  align-content: start;
  justify-items: center;
  text-align: center;
}
.lernpunkt h3 { font-size: var(--gr-mittel); }
.lernpunkt p { color: var(--farbe-text-leise); }
.lernpunkt__zeichen {
  display: block;
  color: var(--farbe-koralle);
}
.lernpunkt__zeichen svg { width: 44px; height: 44px; }
/* Ohne Zeichen (die drei Punkte unter "Zeit, zu handeln") stehen die
   Spalten enger beieinander. */
.lernpunkte--drei { gap: var(--ab-4) var(--ab-5); }

/* Ein Aufruf, mittig unter einem Abschnitt. */
.ruf-mitte { display: grid; justify-content: center; margin-block-start: var(--ab-5); }

/* --- Kennzahlen-Band --------------------------------------------------
   Die 250 steht NICHT mehr als grosse Kennzahl darin: Solmaz will sie
   "dezent dargestellt, ohne besondere Hervorhebung", und eine grosse Zahl
   in einem eigenen Band IST die Hervorhebung. Sie steht als ruhige Zeile
   darunter. */
.zahlen__fussnote {
  margin-block-start: var(--ab-4);
  text-align: center;
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}
/* Auf den Profilseiten steht der Block bis auf Weiteres im Dunklen. */
.block--tief .zahlen__fussnote { color: var(--farbe-text-hell-leise); }

/* --- Hervorhebung von Abschnittstiteln --------------------------------
   Das Original kennt zwei Formen, und beide sind nachgemessen:

   (1) ein DUENNER dunkler Strich unter dem Wort, darunter ein
       korallfarbener Schwung, der nur einen Teil der Breite laeuft
       (referenz/abschnitt-05.png, "Einzelunterricht");
   (2) ein blassrosa MARKERBALKEN hinter dem Text
       (referenz/abschnitt-08.png, "So gelangst du zu deiner ...").

   Entwurf A hatte beides durch denselben durchgehenden 4px-Strich in
   Orange ersetzt. */
.strich-titel {
  position: relative;
  display: inline-block;
  padding-block-end: 0.16em;
  border-bottom: 2px solid var(--farbe-text);
}
.strich-titel::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 22%;
  bottom: -0.14em;
  height: 5px;
  border-radius: var(--radius-voll);
  background: var(--farbe-koralle);
}

/* Der Markerbalken sitzt am <span> INNERHALB der Ueberschrift, damit er bei
   mehrzeiligen Titeln jede Zeile einzeln hinterlegt statt einen Kasten um
   den ganzen Block zu ziehen. */
.marker-titel span {
  background: var(--farbe-marker);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.06em 0.28em;
}
/* Einzelne Textstellen in Markenfarbe. Auf Creme traegt nur der tiefe Ton. */
.betont { color: var(--farbe-marke-tief); font-weight: var(--fett-halb); }

/* --- Google-Bewertungen ----------------------------------------------
   Ersatz fuer das eingebettete Fremdfenster: gleiche Aussage, aber ohne
   Aufruf an fremde Server - und damit ohne Zustimmungsbanner. */
.google {
  display: grid;
  justify-items: center;
  gap: var(--ab-2);
  padding: var(--ab-5);
  border-radius: var(--radius);
  background: var(--farbe-karte);
  box-shadow: var(--schatten-ruhe);
  text-align: center;
}
.google .sterne svg { width: 26px; height: 26px; }
.google__wert { font-size: var(--gr-lead); color: var(--farbe-text-leise); }
.google__wert b {
  font-family: var(--schrift-titel);
  font-size: var(--gr-gross);
  color: var(--farbe-text);
}
.google__wege {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-2);
  justify-content: center;
}

/* --- Faecher ---------------------------------------------------------
   Die alte Seite hatte je Fach ein PNG mit eingebranntem Wort in einer
   eigenen Farbe. Sechs Farben neben dem Marken-Orange sahen nach Baukasten
   aus und liessen sich weder uebersetzen noch skalieren. Hier steht das
   Fach als Schrift, die Farbe kommt einmal von der Marke.               */
.fach {
  display: flex;
  align-items: center;
  gap: var(--ab-2);
  padding: var(--ab-2) var(--ab-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius-voll);
  background: var(--farbe-karte);
  font-family: var(--schrift-titel);
  font-weight: var(--fett-krftg);
  transition: border-color var(--dauer-kurz) var(--kurve),
              transform var(--dauer-kurz) var(--kurve);
}
.fach:hover {
  border-color: var(--farbe-marke-rand);
  transform: translateY(-2px);
}
.fach__punkt {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-voll);
  background: var(--farbe-marke);
  flex: none;
}

.faecher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ab-2);
}

/* Die acht Faecher als Raster statt als Flusszeile: frei umgebrochen
   standen zuletzt sechs oben und zwei allein darunter. */
.faecher--raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ab-2);
}
@media (min-width: 40rem) {
  .faecher--raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.faecher--raster .fach { justify-content: center; }

/* --- Leistungskarten -------------------------------------------------- */
.leistung {
  display: grid;
  gap: var(--ab-2);
  align-content: start;
}
.leistung p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}

/* --- Team ------------------------------------------------------------- */
/* align-content: start und das feste Seitenverhaeltnis am Rahmen (nicht am
   Bild) sind beide noetig: sonst dehnt das Raster die Karten mit weniger
   Text - und genau die Karten ohne "Zum Profil"-Zeile bekamen ein hoeheres
   Bild als ihre Nachbarn. */
.person {
  display: grid;
  gap: var(--ab-2);
  align-content: start;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
/* Im Original ist der Portraetrahmen fast quadratisch (283x310 gemessen),
   nicht hochkant 3:4. */
.person__bild {
  position: relative;
  aspect-ratio: 9 / 10;
  border-radius: var(--radius-klein);
  overflow: hidden;
  background: var(--farbe-ruhig);
}
/* Zwischen Rahmen und <img> steht ein <picture>. Ohne eigene Hoehe faellt
   die Prozentangabe am Bild auf "auto" zurueck - dann steht das Foto oben
   im Rahmen und darunter bleibt ein farbiger Streifen. Genau daran hing
   der auffaelligste Fehler in Entwurf A. */
.person__bild picture {
  display: block;
  width: 100%;
  height: 100%;
}
.person__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  transition: transform var(--dauer-lang) var(--kurve);
}
.person:hover .person__bild img { transform: scale(1.04); }

/* Karten ohne Foto sollen nicht wie ein Ladefehler wirken. */
.person__platzhalter {
  display: grid;
  place-items: center;
  height: 100%;
  background: var(--farbe-marke-hauch);
  color: var(--farbe-marke-tief);
  font-family: var(--schrift-titel);
  font-size: var(--gr-riesig);
  font-weight: var(--fett-stark);
}
.person__text { display: grid; gap: 2px; }
.person__name {
  font-family: var(--schrift-titel);
  font-size: var(--gr-mittel);
  font-weight: var(--fett-krftg);
}
.person__faecher {
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}
.person__mehr {
  font-size: var(--gr-klein);
  font-weight: var(--fett-halb);
  color: var(--farbe-marke-tief);
}

/* --- Zahlenband ------------------------------------------------------
   Auf der Startseite liegt der Abschnitt im Original auf Creme und die
   Zahlen stehen dunkel darauf. Der dunkle Streifen mit orangen Zahlen war
   eine Erfindung des Neubaus. Auf den Profilseiten steht der Block bis auf
   Weiteres weiter im Dunklen - dort greift die zweite Regel. */
.zahl { text-align: center; }
.zahl__wert {
  display: block;
  font-family: var(--schrift-titel);
  font-size: var(--gr-gross);
  font-weight: var(--fett-stark);
  color: var(--farbe-text);
  line-height: 1.1;
}
.zahl__was {
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}
.block--tief .zahl__wert { color: var(--farbe-marke); }
.block--tief .zahl__was { color: var(--farbe-text-hell-leise); }

/* --- Preise ----------------------------------------------------------- */
.preis {
  display: grid;
  gap: var(--ab-2);
  align-content: start;
  position: relative;
}
.preis--betont {
  border-color: var(--farbe-marke);
  box-shadow: var(--schatten-ruhe);
}
.preis__hinweis {
  position: absolute;
  top: calc(-1 * var(--ab-1) - 6px);
  left: var(--ab-3);
  padding: 2px var(--ab-2);
  border-radius: var(--radius-voll);
  background: var(--farbe-marke);
  color: var(--farbe-auf-marke);
  font-family: var(--schrift-titel);
  font-size: var(--gr-klein);
  font-weight: var(--fett-krftg);
}
/* Im Original stehen Dauer und Betrag UNTEREINANDER, nicht nebeneinander,
   und der Betrag ist gruen - nicht in der Markenfarbe. Dass er im Neubau
   klein und grau blieb, lag an einer pauschalen Regel `.karte p`, die
   `.preis__wert` ueber die Spezifitaet schlug. Solche Nachfahren-Regeln
   stehen deshalb nirgends mehr im Projekt. */
.preis__kopf {
  display: grid;
  gap: var(--ab-1);
}
.preis__dauer {
  font-family: var(--schrift-titel);
  font-size: var(--gr-mittel);
  font-weight: var(--fett-krftg);
}
.preis__wert {
  font-family: var(--schrift-titel);
  font-size: clamp(1.75rem, 2.4vw, 2.125rem);
  font-weight: var(--fett-stark);
  color: var(--farbe-gruen);
  line-height: 1.1;
}
.preis__je {
  display: block;
  font-family: var(--schrift-text);
  font-size: var(--gr-klein);
  font-style: italic;
  font-weight: var(--fett-normal);
  color: var(--farbe-text-leise);
}
.preis hr {
  height: 1px;
  border: 0;
  background: var(--farbe-linie);
  margin-block: var(--ab-1);
}

/* Die Leistungsliste zeigt im Original ALLE Punkte der Reihe: die
   enthaltenen mit korallfarbenem Haken, die nicht enthaltenen blassgrau
   mit Kreuz. Ohne die grauen Zeilen sehen die drei Pakete gleich aus. */
.preis__liste { display: grid; gap: var(--ab-2); }
.preis__liste li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--ab-2);
  align-items: start;
  font-size: var(--gr-klein);
  line-height: 1.5;
}
.preis__zeichen { display: block; color: var(--farbe-koralle); }
.preis__zeichen svg { width: 20px; height: 20px; margin-block-start: 2px; }
/* Blasser, aber lesbar. Im Original steht hier 159,159,170 auf der Karte,
   also 2,2:1 - die Aussage haengt dort allein am Kreuz. */
.preis__ohne { color: var(--farbe-text-leise); }
.preis__ohne .preis__zeichen { color: var(--farbe-text-leise); }
.preis__text {
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}

/* --- Vergleich -------------------------------------------------------- */
.vergleich {
  display: grid;
  gap: var(--ab-3);
}
@media (min-width: 48rem) {
  .vergleich { grid-template-columns: 1fr 1fr; }
}
.vergleich__seite { display: grid; gap: var(--ab-2); align-content: start; padding: var(--ab-5); }
/* Im Original sehen BEIDE Karten gleich aus - weiss, gleicher Schatten,
   kein gestrichelter Rahmen und keine graue Ueberschrift. Der Unterschied
   steckt allein in den Zeichen davor. */
.vergleich__titel {
  font-family: var(--schrift-titel);
  font-size: var(--gr-gross);
  font-weight: var(--fett-krftg);
}

/* Die Zeichen sind im Original gefuellte Kreise: rotes Minus links, gruener
   Haken rechts - keine duennen Striche. */
.zeichen {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-voll);
  color: var(--farbe-karte);
  flex: none;
}
.zeichen svg { width: 14px; height: 14px; }
.zeichen--ja   { background: var(--farbe-gruen); }
.zeichen--nein { background: var(--farbe-nein); }
.zeichenliste { display: grid; gap: var(--ab-2); }
.zeichenliste li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--ab-2);
  align-items: start;
  line-height: 1.5;
}
.zeichenliste li > span:last-child { padding-block-start: 1px; }

/* --- Ablauf als Zeitleiste --------------------------------------------
   Im Original eine senkrechte Linie in der Mitte, orangefarbene
   Nummernfelder darauf und die Schritte abwechselnd links und rechts.
   Entwurf A hatte daraus drei gleiche Karten nebeneinander gemacht.

   Die Zahl im Feld steht dunkel, nicht weiss: Weiss auf dem gemessenen
   #FF7800 kommt auf 2,9:1 - dieselbe Rechnung wie beim Knopf. */
.zeitleiste {
  display: grid;
  gap: var(--ab-6);
  position: relative;
}
.zeitleiste__punkt { display: grid; gap: var(--ab-2); }
.zeitleiste__nr {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-knopf);
  background: var(--farbe-plakette);
  color: var(--farbe-auf-marke);
  font-family: var(--schrift-titel);
  font-size: var(--gr-mittel);
  font-weight: var(--fett-stark);
}
.zeitleiste__inhalt { display: grid; gap: var(--ab-2); align-content: start; }
.zeitleiste__inhalt h3 { font-size: var(--gr-mittel); }
.zeitleiste__inhalt p { color: var(--farbe-text-leise); }
.zeitleiste__bild {
  border-radius: var(--radius-klein);
  overflow: hidden;
  margin-block-end: var(--ab-1);
}
.zeitleiste__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

@media (min-width: 62rem) {
  /* Zwei Spalten mit einer breiten Spalte dazwischen; die Linie laeuft in
     der Mitte dieser Luecke, die Nummernfelder sitzen darauf.

     Bewusst NICHT ueber `display: contents` an den Eintraegen geloest:
     dann verteilt das Raster Nummer und Inhalt eines Schritts auf
     verschiedene Zeilen, und die Leiste geht auseinander. Jeder Eintrag
     bleibt EIN Rasterfeld, das Nummernfeld haengt absolut daran. */
  /* EINE Spalte, und jeder Eintrag nimmt die halbe Breite - abwechselnd
     rechts und links ausgerichtet. Mit zwei echten Rasterspalten setzt die
     Platzierung zwei aufeinanderfolgende Schritte in DIESELBE Zeile (die
     Suche laeuft nur vorwaerts), und die Leiste sackt zusammen. */
  .zeitleiste {
    --zeit-spalt: 6rem;
    grid-template-columns: minmax(0, 1fr);
  }
  .zeitleiste__punkt { width: calc(50% - var(--zeit-spalt) / 2); }
  .zeitleiste__punkt:nth-child(odd) { margin-inline-start: auto; }
  .zeitleiste::before {
    content: "";
    position: absolute;
    top: 23px;
    bottom: 23px;
    left: 50%;
    width: 1px;
    transform: translateX(-0.5px);
    background: var(--farbe-zeitlinie);
  }
  .zeitleiste__punkt { position: relative; }
  .zeitleiste__nr { position: absolute; top: 0; }
  .zeitleiste__punkt:nth-child(odd) .zeitleiste__nr {
    left: calc(-1 * (var(--zeit-spalt) / 2 + 23px));
  }
  .zeitleiste__punkt:nth-child(even) .zeitleiste__nr {
    right: calc(-1 * (var(--zeit-spalt) / 2 + 23px));
  }
}

/* --- Probestunden-Band ------------------------------------------------
   Grosse Kachel mit dunkler Flaeche, weisser Ueberschrift und einer Zeile
   aus drei Stichworten. Im Original liegt darunter ein abgedunkeltes Foto;
   es ist nicht im Projekt und nicht lizenziert. */
.probeband {
  display: grid;
  justify-items: center;
  gap: var(--ab-3);
  padding: var(--ab-6) var(--ab-5);
  border-radius: var(--radius-gross);
  background: var(--farbe-tief);
  color: var(--farbe-text-hell);
  text-align: center;
  box-shadow: var(--schatten-hoch);
}
.probeband h2 { color: var(--farbe-text-hell); max-width: 22ch; }
.probeband p { max-width: 46rem; color: var(--farbe-text-hell-leise); }
.probeband__punkte {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ab-2) var(--ab-4);
  font-size: var(--gr-klein);
}
.probeband__punkte li { display: flex; align-items: center; gap: var(--ab-1); }
.probeband__punkte svg { width: 18px; height: 18px; flex: none; }

/* --- Mitschriften-Reihe -----------------------------------------------
   Sechs Bilder frei nebeneinander auf Weiss: kein Rahmen, keine
   Bildunterschrift, keine Scrollbahn. */
.mitschriften {
  display: grid;
  gap: var(--ab-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (min-width: 48rem) {
  .mitschriften { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .mitschriften { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- Ablauf (Karten, noch auf den uebrigen Seiten) --------------------- */
.schritt {
  display: grid;
  gap: var(--ab-2);
  align-content: start;
}
.schritt__nr {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-voll);
  background: var(--farbe-marke);
  color: var(--farbe-auf-marke);
  font-family: var(--schrift-titel);
  font-size: var(--gr-mittel);
  font-weight: var(--fett-stark);
}
.schritt p {
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}

/* --- Mitschriften ----------------------------------------------------- */
.blaettern {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 18rem);
  gap: var(--ab-2);
  overflow-x: auto;
  padding-block-end: var(--ab-2);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.blaettern > * { scroll-snap-align: start; }

/* Im Original stehen die Mitschriften frei nebeneinander: kein Rahmen,
   keine Beschriftung, kein Kasten - nur die Bilder auf Weiss. */
.notiz {
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: none;
  padding: 0;
  text-align: start;
}
.notiz img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.notiz__text {
  padding: var(--ab-2);
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}

/* Grossansicht */
.lupe {
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  max-width: min(92vw, 60rem);
  max-height: 92vh;
}
.lupe::backdrop { background: var(--farbe-auflage); }
.lupe img {
  width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--farbe-karte);
}
.lupe__bild-text {
  margin-block-start: var(--ab-1);
  color: var(--farbe-text-hell);
  font-size: var(--gr-klein);
  text-align: center;
}
.lupe__zu {
  position: absolute;
  top: var(--ab-1);
  right: var(--ab-1);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-voll);
  background: var(--farbe-karte);
  color: var(--farbe-text);
}

/* --- Erfahrungsberichte ----------------------------------------------- */
.stimme {
  display: grid;
  gap: var(--ab-2);
  align-content: start;
  margin: 0;
}
.stimme__titel {
  font-size: var(--gr-text);
  font-weight: var(--fett-krftg);
}
.stimme__text {
  margin: 0;
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}
.stimme__wer {
  font-family: var(--schrift-titel);
  font-size: var(--gr-klein);
  font-weight: var(--fett-krftg);
}

/* --- Video ------------------------------------------------------------
   Bis zum Klick liegt hier nur ein Bild vom eigenen Server. Erst danach
   wird der Rahmen von YouTube eingehaengt. */
.video {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--farbe-tief);
  /* Im Original quadratisch (486x487 gemessen), nicht 16:9 und nicht 4:3. */
  aspect-ratio: 1 / 1;
}
.video__start {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
}
.video__start img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Weiss mit orangem Dreieck: das Vorschaubild traegt selbst eine grosse
   orange Schrift - ein oranger Knopf darauf verschwindet. */
.video__knopf {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-voll);
  background: var(--farbe-karte);
  color: var(--farbe-marke);
  box-shadow: var(--schatten-auf-bild);
  transition: transform var(--dauer) var(--kurve);
}
.video__start:hover .video__knopf { transform: scale(1.08); }
.video__knopf svg { width: 32px; height: 32px; margin-inline-start: 3px; }
.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Fragen ----------------------------------------------------------
   Im Original sechs weisse Karten mit weichem Schatten, rund 880px breit
   und zentriert, mit einem Winkel rechts. Der Neubau hatte randlose Zeilen
   ueber die volle Breite mit einem orangen Plus. */
.fragen {
  display: grid;
  gap: var(--ab-2);
  max-width: 880px;
  margin-inline: auto;
}
.frage {
  border: 0;
  border-radius: var(--radius-klein);
  background: var(--farbe-karte);
  box-shadow: var(--schatten-ruhe);
}
.frage summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ab-2);
  padding: var(--ab-3);
  cursor: pointer;
  list-style: none;
  font-family: var(--schrift-titel);
  font-size: var(--gr-mittel);
  font-weight: var(--fett-halb);
}
.frage summary::-webkit-details-marker { display: none; }
.frage__zeichen {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform var(--dauer) var(--kurve);
  color: var(--farbe-text-leise);
}
.frage[open] .frage__zeichen { transform: rotate(180deg); }
.frage__antwort {
  padding: 0 var(--ab-3) var(--ab-3);
  max-width: var(--breite-text);
  color: var(--farbe-text-leise);
}

/* --- Kontakt ---------------------------------------------------------- */
.kontakt {
  display: grid;
  gap: var(--ab-4);
}
@media (min-width: 56rem) {
  .kontakt { grid-template-columns: 1fr 1fr; align-items: start; }
}
.kontakt__weg {
  display: flex;
  align-items: center;
  gap: var(--ab-2);
  padding: var(--ab-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-karte);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dauer-kurz) var(--kurve),
              transform var(--dauer-kurz) var(--kurve);
}
.kontakt__weg:hover {
  border-color: var(--farbe-marke-rand);
  color: inherit;
  transform: translateY(-2px);
}
.kontakt__wie {
  font-family: var(--schrift-titel);
  font-weight: var(--fett-krftg);
}
.kontakt__was {
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}

/* --- Anfrageformular --------------------------------------------------
   Im Original eine orange Saeule mit weisser Schrift (2,9:1). Die Flaeche
   bleibt, die Schrift wird die dunkle Tinte -- `--farbe-auf-marke`, 4,83:1,
   dieselbe Regel wie auf jeder anderen Markenflaeche dieser Seite. */
.anfrage {
  display: grid;
  gap: var(--ab-3);
  align-content: start;
  padding: var(--ab-4);
  border-radius: var(--radius-gross);
  background: var(--farbe-marke);
  color: var(--farbe-auf-marke);
}
.anfrage__titel {
  font-size: var(--gr-mittel);
  line-height: var(--zeile-titel);
}
.anfrage__vor {
  font-size: var(--gr-klein);
  line-height: var(--zeile-text);
  margin-block-start: calc(var(--ab-3) * -1 + var(--ab-1));
}
.anfrage__felder {
  display: grid;
  gap: var(--ab-2);
}
@media (min-width: 34rem) {
  .anfrage__felder { grid-template-columns: 1fr 1fr; }
}
.feld--voll { grid-column: 1 / -1; }
/* Kein `opacity` und kein hellerer Ton: auf dem Orange bleiben von den
   4,83:1 der Tinte bei 75 % nur noch rund 3:1 uebrig, und das ist bei 14px
   ein Kontrastfehler. Die Abstufung traegt hier das Schriftgewicht. */
.feld__zusatz { font-weight: var(--fett-normal); }
/* Der Rahmen der Felder liegt auf Orange -- die helle Standardlinie waere
   dort unsichtbar. */
.anfrage .feld input,
.anfrage .feld textarea {
  border-color: transparent;
  color: var(--farbe-text);
  width: 100%;
}
.anfrage .feld input:focus,
.anfrage .feld textarea:focus {
  border-color: var(--farbe-auf-marke);
  outline: 2px solid var(--farbe-auf-marke);
  outline-offset: 2px;
}
/* Ein Feld, das der Browser als fehlerhaft kennt, ABER erst nachdem der
   Mensch etwas eingegeben hat -- `:user-invalid` statt `:invalid`, sonst
   steht das leere Formular beim Laden schon rot da. */
.anfrage .feld input:user-invalid,
.anfrage .feld textarea:user-invalid {
  border-color: var(--farbe-nein);
  outline: 2px solid var(--farbe-nein);
  outline-offset: 2px;
}
.zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ab-2);
  align-items: start;
  font-size: var(--gr-klein);
  line-height: 1.5;
}
.zustimmung input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--farbe-auf-marke);
}
.zustimmung a { color: var(--farbe-auf-marke); }
/* Der Knopf traegt sonst den Marken-Verlauf -- auf der Markenflaeche selbst
   verschwaeme er darin. Im Original war es an dieser Stelle eine helle
   Leiste mit dunkler Schrift, und genau die traegt hier auch den Kontrast. */
.anfrage .knopf--haupt {
  justify-self: start;
  background: var(--farbe-karte);
  color: var(--farbe-text);
}
.anfrage .knopf--haupt:hover { background: var(--farbe-ruhig); }
.anfrage__meldung:empty { display: none; }
.anfrage__meldung {
  padding: var(--ab-2);
  border-radius: var(--radius-klein);
  background: var(--farbe-karte);
  color: var(--farbe-text);
  font-size: var(--gr-klein);
}

/* Das Koederfeld. `display:none` waere fuer manche Massenversender ein
   erkennbares Muster; ausserhalb des Bildschirms zu parken ist unauffaelliger
   und fuer Vorlesegeraete durch `aria-hidden` am Elternteil trotzdem weg. */
.honig {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Nutzen-Zeilen neben dem Formular --------------------------------- */
.nutzen {
  display: grid;
  gap: var(--ab-3);
}
.nutzen li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--ab-2);
  align-items: start;
}
.nutzen__wie {
  display: block;
  font-family: var(--schrift-titel);
  font-weight: var(--fett-krftg);
}
.nutzen__was {
  display: block;
  font-size: var(--gr-klein);
  color: var(--farbe-text-leise);
}

/* --- Abschlussband ---------------------------------------------------- */
.band {
  padding: var(--ab-5);
  border-radius: var(--radius);
  background: var(--farbe-marke);
  color: var(--farbe-auf-marke);
  text-align: center;
}
.band h2 { color: var(--farbe-auf-marke); }
.band p {
  max-width: 40rem;
  margin-inline: auto;
  margin-block: var(--ab-2) var(--ab-3);
}