/* 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;
}

/* — 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; }
.split-copy .note { font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic; }
.f-copy { font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, 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: 15.5px;
  line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 78%, 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: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, 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 */
@media (max-width: 420px) { .signup { flex-wrap: wrap; } .signup .btn { width: 100%; } }

/* 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: 15.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) 78%, 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: 15.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; }
}
@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; }
}