/* Aufbau der Vorseite (index.html). Gegenstueck zu vorseite-design.css:
 * dort stehen Farben, Schriften, Radien und die fertigen Bauteile (.btn,
 * .input, .nav), hier steht, wie die Seite daraus zusammengesetzt ist.
 *
 * Aus dem Design-Export uebernommen, mit drei Aenderungen:
 *  - Die Regeln fuer Screenshot-Streifen und das Bild neben dem
 *    Regionstext sind raus. Im Entwurf waren sie vorbereitet, aber nie
 *    mit Bildern gefuellt (Entscheid 04.08.2026: so lassen wie exportiert).
 *  - Das eingeblendete Grundlinienraster (Pruefhilfe des Entwurfs) ist raus.
 *  - Dazugekommen sind .sr-only und die Regeln fuer das Zugangscode-Feld,
 *    das es im Entwurf nur als Link gab.
 *
 * DER RHYTHMUS: alles sitzt auf 28px (--leading), Halbschritt 14px.
 * Zeilenhoehen und Abstaende sind Vielfache davon.
 */

:root {
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  --measure: 58ch;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; text-wrap: pretty; overflow-x: clip; } /* der Deko-Kreis im
   Kopfbereich ragt bewusst ueber den Seitenrand hinaus - clip (nicht hidden:
   das erzeugt keinen neuen Scroll-Bereich) verhindert, dass er die Seite
   verbreitert */
/* hidden muss hidden bleiben. Die Browser-Grundregel dafuer ist schwaecher
   als jede Klasse mit display - .signup { display: flex } hat das Formular
   nach dem Eintragen sichtbar gelassen, obwohl das Skript es ausgeblendet
   hatte. Betrifft alles, was hier ein- und ausgeklappt wird: die Anmeldung,
   das Zugangscode-Feld und die beiden Rueckmeldungen. */
[hidden] { display: none !important; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
/* Die Leiste nimmt den Seitenrand selbst, damit ihr Inhalt auf derselben
   Achse sitzt wie der Rest - nur Innenabstand, das Aussehen bleibt. */
.nav { padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge))); }
.nav a { white-space: nowrap; }
@media (max-width: 480px) {
  /* Auf dem Telefon bleiben Name und die eine Aktion, die Abschnitts-Links
     gehen. Zwei Ausnahmen sind noetig, beide schon teuer bezahlt:
     - :not(.btn), weil der Knopf in der Leiste hier ein Link ist und kein
       <button> wie im Entwurf - ohne die Ausnahme verloere die Vorseite auf
       dem Telefon ihre einzige Aktion.
     - :not(.nav-brand), weil der Name auf den Rechtsseiten ein Link nach
       Hause ist. Ohne die Ausnahme war die Leiste dort auf dem Telefon
       vollstaendig leer - ein 26px hoher Streifen aus nichts. */
  .nav a:not(.btn):not(.nav-brand) { display: none; }
}

/* Nur fuer Screenreader: das Label am Zugangscode-Feld. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink, seit 16.08.2026. Zwilling der Regel in styles.css, die diese
   Seiten nicht laden. Hier ist wenig zu ueberspringen, aber info.html sagt
   zu, dass er auf JEDER Seite liegt, und eine Zusage mit fuenf Ausnahmen ist
   keine. Sichtbar allein bei Fokus; versteckt ueber die Position und nicht
   ueber display:none, weil das ihn aus der Fokusreihenfolge naehme. */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--color-bg, #f5ead8);
  color: var(--color-ink, #201e1d);
  border: 2px solid var(--color-accent, #c67139);
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.sprunglink:focus {
  left: 0;
}
main[tabindex="-1"]:focus {
  outline: none;
}

/* — Ueberschrift ueber einem Abschnitt (Figtree, Terrakotta in der tiefen
   Stufe: die traegt auf dem Creme 5,7:1, die helle nur 3,0:1 und waere fuer
   kleine Schrift zu blass) — */
.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--color-accent-700);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — Kopfbereich (ein weicher Salbei-Kreis steigt oben rechts ueber den
   Rand hinaus) — */
.hero { position: relative; padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.hero::before { content: ""; position: absolute; right: -180px; top: -220px;
  width: 420px; height: 420px; border-radius: 50%;
  background: var(--color-accent-2-200); pointer-events: none;
  z-index: -1; /* der Kreis malt HINTER allem: ohne das laege er in der
     Malreihenfolge vor der Leiste und wuerde die Links zudecken */ }
/* Der seitliche Ueberhang lohnt nur, wo die Seite den ganzen Kreis fasst.
   Unter etwa 1420px wuerde der Rand ihn zu einer geraden Kante schneiden -
   darunter sitzt er buendig, dafuer ganz. */
@media (max-width: 1420px) { .hero::before { right: 0; } }

.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(40px, 5.8vw, 76px);
  line-height: clamp(43px, 6.26vw, 82px);
  letter-spacing: 0; margin: 0;
  margin-left: -0.028em; /* optischer Randausgleich: Caprasimo-Versalien
     wirken sonst eingerueckt */
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; } /* jeder Satz eine Zeile */
.hero .sub { font-size: 17px; line-height: var(--leading); max-width: var(--measure);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  text-box: trim-both cap alphabetic; }
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* — Das Beet: vier verschieden grosse Kreise, versetzt und einander
   ueberlappend wie geworfen, nicht in Reihe gesaet. Der groesste steigt
   oben in die Luft des Kopfbereichs hinein - in die Luft, nie in den Text.
   Im Kreis steht der Inhalt mittig: eine Rundung hat keine linke Achse,
   der optische Randausgleich von oben gilt hier also nicht. — */
.bed { position: relative; padding: calc(1.5 * var(--leading)) 0 calc(2.5 * var(--leading));
  min-height: calc(17 * var(--leading)); }
.seed { position: absolute; border-radius: 50%; aspect-ratio: 1;
  display: grid; place-content: center; text-align: center;
  padding: var(--leading); box-sizing: border-box; }
.seed-a { width: 240px; left: 64px; top: calc(2.5 * var(--leading));
  background: var(--color-accent-100); }
.seed-b { width: 190px; left: 208px; top: calc(9 * var(--leading));
  background: var(--color-accent-200); } /* ueberlappt seed-a an der Ecke;
     steht spaeter im Beet und liegt deshalb oben */
.seed-c { width: 310px; right: 96px; top: calc(-3.5 * var(--leading));
  background: var(--color-accent-2-300); } /* der grosse steigt nach oben
     ueber den Abschnitt hinaus */
.seed-d { width: 175px; right: 321px; top: calc(4.5 * var(--leading));
  background: var(--color-accent-2-100); } /* ueberlappt seed-c von unten
     links - die beiden Paare werfen in verschiedene Richtungen, und dieser
     Kreis schlaegt die Bruecke durch die Mitte */
.seed .stat-num { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.4vw, 32px); line-height: calc(1.5 * var(--leading));
  margin: 0; text-box: trim-both cap alphabetic; }
.seed-c .stat-num { font-size: clamp(28px, 2.8vw, 38px); }
.seed-b .stat-num, .seed-d .stat-num { font-size: clamp(21px, 2.1vw, 25px); }
.seed-a .stat-num, .seed-b .stat-num { color: var(--color-accent-700); } /* auf den
     Terrakotta-Toenen gemessen: 6,2:1 auf dem hellen, 5,5:1 auf dem naechsten */
.seed-d .stat-num { color: var(--color-accent-2-700); } /* auf Salbei hell: 6,0:1 */
.seed-c .stat-num { color: var(--color-accent-2-800); } /* der kraeftigere
     Salbei-Ton braucht die tiefere Stufe: 6,7:1 statt 4,4:1 */
.seed .stat-label { font-size: 13px; line-height: var(--half); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); /* auf allen
     vier Kreisfarben nachgemessen: 5,1:1 bis 5,9:1 */
  margin: var(--half) 0 0; max-width: 17ch;
  text-wrap: balance; /* gleichmaessiger Umbruch in der Rundung */ }

/* — Die Punkte weiter unten: ein gezeichneter Terrakotta-Kreis haengt links
   an jeder Ueberschrift. Keine Linien, keine Kaesten - Luft trennt. — */
.features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.feature { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.25 * var(--leading)) 0; }
.f-title { position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading);
  margin: 0; text-box: trim-both cap alphabetic; }
.f-title::before { content: ""; position: absolute; left: -36px; top: calc(0.5cap - 9px);
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-accent); }
@media (max-width: 1280px) { .f-title::before { display: none; } } /* schmaler
   Rand: der Punkt haette keinen Platz mehr */

/* — Regionstext — */
.split { display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.split-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading));
  margin: 0; text-box: trim-both cap alphabetic; }
/* 07.08.2026: Fliesstext von 15,5 auf 16,5 px, Deckkraft von 78 auf 86 % -
   auf dem Telefon war beides zusammen zu zart. Die Zeilenhoehe bleibt bei
   28px, der Text sitzt also weiter im Raster. Gilt fuer den Regionstext,
   die drei Punkte, die Datenschutz-Liste und die Texte im Anmeldekasten;
   die Rechtsseiten (.legal) bleiben bei 15,5. */
.split-copy .note { font-size: 16.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 86%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic; }
.f-copy { font-size: 16.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 86%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic; }

/* — Datenschutz-Liste — */
.privacy { padding: 0 0 calc(3 * var(--leading)); }
.privacy-list { list-style: none; margin: var(--leading) 0 0; padding: 0;
  display: grid; gap: var(--half); max-width: var(--measure); }
.privacy-list li { position: relative; padding-left: 28px; font-size: 16.5px;
  line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 86%, transparent); }
.privacy-list li::before { content: ""; position: absolute; left: 0; top: calc(0.5cap + 4px);
  width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent-2); }

/* — Der Abschluss: ein salbeigetoenter Kasten, stark gerundet — */
.close { padding: 0 0 calc(2 * var(--leading)); }
.patch { background: var(--color-accent-2-100);
  border-radius: calc(2 * var(--radius-lg));
  padding: calc(2 * var(--leading)) clamp(24px, 4vw, 64px); }
.patch h3 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading); margin: 0; text-box: trim-both cap alphabetic; }
.patch .sub { font-size: 16.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 86%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: var(--measure); text-box: trim-both cap alphabetic; }
.signup { display: flex; gap: var(--space-3); align-items: stretch; max-width: 480px;
  margin-top: var(--leading); }
.signup .input { flex: 1; min-width: 0; }
.signup .input, .signup .btn { min-height: 36px; } /* eine gemeinsame Mindesthoehe,
  damit Feld und Knopf als eine Zeile lesen */
/* Unter 16px zoomt iOS-Safari beim Antippen eines Eingabefelds in die Seite
   hinein und bleibt so - ausgerechnet am wichtigsten Element der Seite. Die
   14px des Design-Systems gelten weiter fuer alles andere; die 16px gelten
   auch fuer das Zugangscode-Feld weiter unten. */
.signup .input, .vorseite-input { font-size: 16px; }
@media (max-width: 420px) { .signup { flex-wrap: wrap; } .signup .btn { width: 100%; } }

/* Die Bot-Bremse im Anmeldeformular (Begruendung im Markup). Sie liegt aus
   dem Fluss heraus, damit sie die Flex-Zeile aus Feld und Knopf nicht
   auseinanderzieht - und weit genug weg, dass sie niemand sieht. Bewusst
   KEIN display:none: Ein Teil der Crawler laesst genau solche Felder aus. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Der Notausgang: Hat ein Passwortmanager das Feld doch gefuellt, macht
   warteliste.js es sichtbar, damit sich der Eintrag loeschen laesst. */
.falle.aufgedeckt {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  flex-basis: 100%;
  font-size: 13px;
  line-height: var(--leading);
}
.falle.aufgedeckt input { display: block; margin-top: 4px; }

/* Rueckmeldung nach dem Eintragen (Erfolg wie Fehler). role="status" bzw.
   role="alert" stehen im Markup - hier geht es nur ums Aussehen. */
.signup-hinweis { font-size: 16.5px; line-height: var(--leading);
  margin: var(--half) 0 0; max-width: var(--measure); }
.signup-hinweis[data-art="fehler"] { color: var(--color-accent-800); }
.signup-hinweis[data-art="erfolg"] { color: var(--color-accent-2-800); }

/* — Zugangscode: im Entwurf nur ein Link, hier das echte Feld. Es liegt
   eingeklappt unter der Anmeldung, weil die Einladung die Hauptsache ist
   und der Code nur die wenigen betrifft, die schon einen haben. — */
.zugang-zeile { font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 86%, transparent);
  margin: var(--half) 0 0; }
.zugang-schalter {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--color-accent-700); text-decoration: underline;
  text-underline-offset: 3px;
}
.zugang-schalter:hover { color: var(--color-accent-900); }
.vorseite-form { display: flex; gap: var(--space-3); align-items: stretch;
  max-width: 480px; margin-top: var(--half); }
.vorseite-input { flex: 1; min-width: 0; }
.vorseite-input, .vorseite-button { min-height: 36px; }
@media (max-width: 420px) { .vorseite-form { flex-wrap: wrap; } .vorseite-button { width: 100%; } }
.vorseite-fehler { font-size: 16.5px; line-height: var(--leading);
  color: var(--color-accent-800); margin: var(--half) 0 0; max-width: var(--measure); }

/* Kurzes Kopfschuetteln bei falschem Code - uebernommen aus landing.css,
   damit die Rueckmeldung dieselbe bleibt wie auf der alten Vorseite. */
.vorseite-form.wackelt { animation: vorseite-wackeln 0.4s ease; }
@keyframes vorseite-wackeln {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px); }
  50%      { transform: translateX(6px); }
  75%      { transform: translateX(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .vorseite-form.wackelt { animation: none; }
}

/* — Rechtsseiten (impressum.html, datenschutz-vorseite.html) —
   Dieselbe Schrift, dieselben Farben, derselbe 28er-Rhythmus wie die
   Vorseite, nur ohne deren Schmuck: keine Kreise, keine grossen Flaechen.
   Ein Gesetzestext soll ruhig sein und sich lesen lassen, deshalb eine
   schmale Spalte statt der vollen Seitenbreite. */
.legal { padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading));
  max-width: 68ch; }
.legal-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(32px, 4vw, 46px); line-height: calc(2 * var(--leading));
  margin: 0; margin-left: -0.028em; /* optischer Randausgleich wie im Kopf der Vorseite */
  text-box: trim-both cap alphabetic; }
.legal h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: var(--leading);
  margin: calc(2 * var(--leading)) 0 0; text-box: trim-both cap alphabetic; }
.legal p, .legal li { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; }
.legal a { color: var(--color-accent-700); }
.legal a:hover { color: var(--color-accent-900); }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; background: var(--color-accent-100);
  padding: 0.1em 0.35em; border-radius: var(--radius-sm); }
.legal strong { font-weight: 600; }
/* Die Zurueck-Zeile bekommt Luft nach oben, damit sie nicht wie der naechste
   Absatz aussieht. */
.legal-back { display: inline-block; margin-top: calc(2 * var(--leading));
  font-size: 15.5px; line-height: var(--leading); }
/* In der Leiste der Rechtsseiten ist der Name ein Link nach Hause. Ohne diese
   Zeile zoege ihn die .nav-a-Regel des Design-Systems auf 14px herunter. */
.nav a.nav-brand { font-size: 18px; }

footer { padding: calc(2 * var(--leading)) 0; font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); }
footer a { color: var(--color-accent-700); }
footer a:hover { color: var(--color-accent-900); }
.foot-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* — Umbruch auf schmalen Fenstern — */
@media (max-width: 1080px) {
  /* Das geworfene Beet braucht etwa 960px Buehne. Darunter wird es zu einem
     versetzten Zweier-Raster: keine Ueberlappungen mehr (weiche Formen
     brauchen dann Luft), der Wurf bleibt durch den Versatz erhalten. */
  .bed { min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--leading) var(--half); justify-items: center;
    padding-bottom: calc(3.5 * var(--leading)); }
  .seed { position: static; width: min(clamp(160px, 44vw, 240px), 100%); }
  .seed-c { width: min(clamp(180px, 50vw, 280px), 100%); }
  .seed-b, .seed-d { transform: translateY(var(--leading)); }
}
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2.5 * var(--leading)); }
  .hero::before { width: 280px; height: 280px; top: -160px; }
}
/* Rechtsseiten auf dem Telefon: derselbe Rhythmus, eine Stufe enger.
   Der 28er-Takt stammt vom breiten Bildschirm - auf 412px Breite standen
   zwischen zwei Abschnitten 56px Nichts, und ueber der Ueberschrift noch
   einmal 56px unter der ohnehin fast leeren Leiste (auf dem Telefon bleibt
   dort nur der Name stehen). Bei einer Spalte, die die ganze Breite fuellt,
   liest sich das nicht mehr luftig, sondern zerrissen.
   Alle Werte bleiben Vielfache des Halbschritts (14px), der Text sitzt also
   weiter im Raster - es ist ein halber Schritt weniger, keine neue Ordnung.
   Ab 720px, weil die Spalte (68ch) etwa dort aufhoert, schmaler als das
   Fenster zu sein. */
@media (max-width: 720px) {
  .legal { padding: var(--leading) 0 calc(2 * var(--leading)); }
  .legal h2 { margin-top: calc(1.5 * var(--leading)); }
  .legal-back { margin-top: calc(1.5 * var(--leading)); }
}
@media (max-width: 600px) {
  /* Die drei festen Zeilen der grossen Ueberschrift stammen vom breiten
     Bildschirm. Unter etwa 600px passt ihr Inhalt nicht mehr in die Spalte,
     die Bloecke brechen ein zweites Mal, und einzelne Woerter bleiben als
     eigene Zeile haengen. Ab hier bricht der Browser selbst; balance
     verteilt die Woerter gleichmaessig auf die Zeilen. */
  .display .line { display: inline; }
  .display { text-wrap: balance; }
}
@media (max-width: 389px) {
  /* Unter 390px reicht die Breite fuer zwei Spalten nicht mehr: die Kreise
     schrumpfen schneller als die Schrift darin. Ab hier eine Spalte, die
     Kreise wechselseitig versetzt wie Trittsteine. */
  .bed { grid-template-columns: 1fr; gap: var(--leading); }
  .seed { width: clamp(160px, 56vw, 220px); }
  .seed-c { width: clamp(180px, 62vw, 240px); }
  .seed-a, .seed-c { justify-self: start; }
  .seed-b, .seed-d { transform: none; justify-self: end; }
}