/* ===========================================================
   DAS WERK - Startseite AdenAI, Entwurf E2 (Aurora)
   Der lesbare Teil unten: Baender, Karten, Preise, Fragen, Ehrlichkeit,
   Schluss.

   **Am 2026-08-29 geschnitten** (Fahrplan 568). Die Datei stand auf 399 von
   400 Zeilen, und der Weg unter die Grenze war vorher, die eigene Begruendung
   zu kuerzen. **Die Begruendung ist wertvoller als die Zeilenzahl**, also ist
   entlang der Themen geschnitten worden: die Fusszeile steht seitdem in
   `startseite-fuss.css`, das Beiwerk (Entschluesselung, Hilfsklassen fuer
   Screenreader, die ex-Inline-Regeln, der Sprachumschalter) in
   `startseite-kleinteile.css`. Kein Kommentar ist dabei kuerzer geworden.

   **Die Reihenfolge in landing.html ist die Kaskade**, sieben <link>-Zeilen:
   grund, schwelle, flug, doku, fuss, kleinteile, faelle. Wer sie aendert,
   aendert das Ergebnis. Nachgemessen beim Schneiden: der Regelstrom der drei
   Teile hintereinander ist Zeichen fuer Zeichen derselbe wie der der alten
   Einzeldatei.

   **Hier stand bis zum 2026-08-29** *"Teil von stil-*.css, zusammengesetzt von
   bauen.py in fester Reihenfolge"*. Das galt fuer den Entwurf E2, nicht fuer
   das Produkt: es gibt keine `stil-*.css`, und `agent/ablauf/bauen.py` baut
   Kundenprojekte, nicht diese Seite. Die Dateien werden nicht zusammengesetzt,
   sondern einzeln per <link> geladen. Derselbe Satz stand wortgleich noch in
   den vier anderen `startseite-*.css` und ist dort am selben Tag berichtigt
   (Fahrplan 603): grund, schwelle, flug, faelle.
   =========================================================== */

/* ---------- Der lesbare Teil -------------------------------------------- */

/* `#doku` ist der Container des lesbaren Teils. **Seine Breite steht im
   Markup**, nicht hier: `max-w-content mx-auto px-4 sm:px-6` in
   landing.html, dieselben vier Klassen wie in base_public.html und
   doku/base_doku.html. Die Zahl dahinter ist `--max-width` aus
   tailwind-input.css, und sie wird auf dieser Seite nirgends abgetippt.
   Warum, im Ganzen in startseite-grund.css, Abschnitt "Die Achse der Seite".

   Hier stand bis zum 2026-08-28 `padding: 0 var(--rand)` - ein zweiter,
   eigener Rand neben dem des Produkts. Er faellt weg, weil `px-4 sm:px-6` ihn
   ersetzt. Bliebe er stehen, gewaenne er ohnehin (ID schlaegt Klasse) und die
   Achse laege um bis zu 48 Pixel daneben. */
#doku {
  position: relative;
  z-index: 10;
}
html.st-flug #doku { margin-top: 0; }

/* Ein Band fuellt den Container aus - die Breite haelt `#doku` darueber, an
   genau einer Stelle. Hier stand bis zum 2026-08-28 `max-width: 1120px` fest
   eingetragen: 300 Pixel schmaler als der Container jeder anderen Seite des
   Produkts, und man konnte es nicht sehen, ohne beide Seiten nebeneinander zu
   messen.

   `margin: 0 auto` bleibt - nicht fuer `.band` selbst, sondern weil es
   `.band--schmal` darunter zentriert. */
.band { margin: 0 auto; padding: clamp(80px, 12vh, 150px) 0; }
/* **780 Pixel sind eine Lesebreite, keine Layoutbreite**, und deshalb die
   eine Zahl, die hier richtig steht: Fliesstext ueber die volle
   Containerbreite waere unlesbar. Dasselbe gilt fuer die Werte in `em` weiter
   unten (18em, 40em, 46em, 14em) - das sind Zeilenlaengen. Sie haengen nicht
   an `--max-width` und sollen es nicht. */
.band--schmal { max-width: 780px; }

/* 12 statt 11 Pixel, Sperrsatz 0.28 statt 0.34em: der Entwurf E2 meldete neun
   Textstellen unter 12 Pixeln als offenen Befund bei 320 Pixeln. Das engere
   Sperrmass haelt die Zeile dabei genau so lang wie vorher. Der Kontrast war
   dort schon in Ordnung (12,8:1) - die Groesse war es nicht. */
.marke-klein {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--leit);
  margin: 0 0 22px;
}

h2.gross {
  font-size: clamp(28px, 4.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 300;
  margin: 0 0 24px;
  max-width: 18em;
}
.vorspann {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--dimm);
  max-width: 40em;
  margin: 0 0 56px;
}

.raster3 {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}

.karte {
  background: var(--panel);
  border: 1px solid var(--linie-kalt);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.karte h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.karte p { margin: 0; color: var(--dimm); font-size: 16px; }
.karte .ziffer {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  color: var(--leit);
  display: block;
  margin-bottom: 18px;
}

/* Preise */
.preis-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}
.schalter {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--linie-kalt);
  border-radius: 999px;
  background: rgba(8,10,12,0.6);
}
.schalter button {
  font: inherit;
  font-size: 14px;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dimm);
  cursor: pointer;
}
.schalter button[aria-pressed="true"] { background: var(--leit); color: var(--auf-leit); font-weight: 600; }

.tarife { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.tarif {
  background: var(--panel);
  border: 1px solid var(--linie-kalt);
  border-radius: 18px;
  padding: 34px 30px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
}
.tarif--betont { border-color: var(--linie); background: rgba(6, 20, 19, 0.76); }
.tarif .name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--leit);
  margin: 0 0 20px;
}
.tarif .zahl-gross {
  font-size: 46px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tarif .takt { font-size: 15px; color: var(--dimm); margin-left: 6px; }
.tarif .neben { font-size: 14px; color: var(--dimm-leise); margin: 12px 0 0; min-height: 1.4em; }
.tarif .wofuer { font-size: 16px; color: var(--dimm); margin: 22px 0 28px; flex: 1; }
/* Hier stand `.tarif .knopf { justify-content: center; }`. `.btn` zentriert
   seinen Inhalt von sich aus, seit dem 2026-09-02 traegt der Tarifknopf
   `.btn`, und damit ist die Zeile eine Wiederholung geworden. */
.abzeichen {
  align-self: flex-start;
  font-family: var(--mono);
  /* 12 statt 11 Pixel (im Entwurf E2 waren es 10), Sperrsatz 0.15em. Der
     letzte Text der Seite unter 12 Pixeln - im Browser gemessen, nicht
     geschaetzt. */
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--auf-leit);
  background: var(--leit);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.zusatz {
  margin-top: 26px;
  font-size: 15px;
  color: var(--dimm);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.zusatz b { color: var(--weiss); font-weight: 500; }

/* Hier stand im Entwurf E2 der Kasten "OFFEN" mit dem Satz, die Grenzen je
   Tarif seien noch nicht festgelegt. Das stimmte fuer den Entwurf und nicht
   fuer das Produkt: Credits, Projekte, Seiten und Plaetze stehen in
   plans.py. An seiner Stelle steht der Weg dorthin - Adrians Entscheidung
   vom 2026-08-28, Begruendung in startseite/_preise.html. */
.grenzen {
  margin-top: 26px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  padding: 20px 24px;
  background: rgba(34, 232, 208, 0.05);
  font-size: 15px;
  color: var(--dimm);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}
.grenzen a {
  color: var(--leit);
  font-weight: 500;
  /* 24 Pixel Trefferhoehe, wie ueberall sonst im Produkt (WCAG 2.5.8). */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.grenzen a:hover { color: var(--leit-hell); }

/* Fragen */
.frage {
  border-bottom: 1px solid var(--linie-kalt);
}
.frage summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 44px 24px 0;
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 400;
  position: relative;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 11px; height: 11px;
  margin-top: -7px;
  border-right: 1.5px solid var(--leit);
  border-bottom: 1.5px solid var(--leit);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.frage[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.frage p { margin: 0 0 26px; color: var(--dimm); max-width: 46em; }

/* Ehrlichkeit */
.ehrlich {
  border: 1px solid var(--linie);
  border-radius: 20px;
  padding: clamp(32px, 5vw, 56px);
  background: linear-gradient(160deg, rgba(5, 26, 24, 0.70), rgba(8, 10, 12, 0.74));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ehrlich h2 { margin-top: 0; }

/* Schluss */
.schluss { text-align: center; }
.schluss h2 {
  font-size: clamp(32px, 6vw, 68px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 auto 28px;
  max-width: 14em;
}
.schluss .knopfreihe { justify-content: center; display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Anflug der Doku-Baender -------------------------------------
   Bewusst KEINE Startvorgabe im CSS: waere hier opacity 0 gesetzt und der
   Aufbau bliebe stehen, waere der halbe Inhalt fuer immer weg. Das Verstecken
   uebernimmt GSAP, und nur fuer Baender, die ohnehin unterhalb des Bildes
   liegen. Ohne JavaScript steht alles da.

   Dieser Absatz stand bis zum 2026-08-29 weiter unten in derselben Datei,
   zwischen `.zeichen` und `.nur-sr`. Beim Schnitt ist er hierher gezogen, zu
   den Baendern, ueber die er redet - `baender.js` verweist auf ihn. Ein
   Kommentar hat keine Kaskade; sein Umzug aendert nichts am Aussehen. */

/* Weiter geht es in `startseite-fuss.css` (die Fusszeile) und
   `startseite-kleinteile.css` (das Beiwerk). landing.html laedt beide direkt
   nach dieser Datei - die Reihenfolge ist die Kaskade. */