/* =========================================================
   The Life Compass
   Tinte auf Papier. Monochrom, geometrisch, ruhig.

   Aufbau dieser Datei:
   01 Tokens
   02 Basis
   03 Header & Navigation
   04 Buttons & Links
   05 Hero
   06 Pfad (Spine)
   07 Split-Sektionen
   08 Standard-Sektionen
   09 Blog-Liste
   10 Artikel
   11 Formular
   12 Footer
   13 Reveals & Reduced Motion
   14 Hintergrund
   ========================================================= */

/* Caveat steht ausschliesslich fuer die Beispiel-Eintragungen in der
   Arbeitsmappe. Sie stellt Handschrift dar, ist also Inhalt der
   Abbildung und keine Schrift der Oberflaeche. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=Caveat:wght@500;600&family=Poppins:wght@400;600;700&display=swap');

/* ---------------------------------------------------------
   01 Tokens
   --------------------------------------------------------- */
:root {
  /* Farbe: nur Papier, Tinte und Grautoene. */
  --paper: #f4f1ea;
  --paper-2: #ece7db;
  --ink: #1a1a1a;
  --muted: #6f6a5e;
  --line: #d8d2c4;
  --accent: #b7b1a2;

  /* Typo-Skala */
  --fs-display: clamp(2.6rem, 6vw, 4.5rem);
  --fs-h1-sub: clamp(2rem, 4.5vw, 3rem);
  --fs-h2: clamp(1.7rem, 3.6vw, 2.4rem);
  --fs-h3: 1.15rem;
  --fs-lead: 1.15rem;
  --fs-eyebrow: 0.72rem;

  /* Abstaende: 8px-System */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 96px;
  --s7: 128px;

  --maxw: 1040px;
  --measure: 62ch;

  --header-h: 68px;

  /* Runde Ecken. Zwei Werte reichen: der kleine fuer alles,
     was man anfasst, der grosse fuer Flaechen. */
  --radius: 10px;
  --radius-lg: 16px;
}

/* ---------------------------------------------------------
   02 Basis
   --------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 112.5%;            /* ~18px Basis */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s3));
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .brand {
  font-family: "Space Grotesk", "Inter", sans-serif;
  letter-spacing: -0.02em;
  font-weight: 700;
  /* Verteilt die Zeilen gleichmaessig, statt ein einzelnes
     Wort allein in die letzte Zeile fallen zu lassen. */
  text-wrap: balance;
}

/* Inhalt liegt ueber der Hintergrund-Ebene (Block 14).
   Ohne diese Stapelung wuerden die Flaechen den Text
   ueberdecken. */
main, .site-footer { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
em { font-style: italic; }
strong { font-weight: 600; }
::selection { background: var(--ink); color: var(--paper); }
img { max-width: 100%; display: block; filter: grayscale(1); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.eyebrow {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--s3);
  padding-right: var(--s3);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s2) var(--s3);
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------
   03 Header & Navigation
   --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 241, 234, 0.85);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--s3);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.brand {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s4);
  list-style: none;
}
.nav-links a {
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.01em;
  padding: var(--s1) 0;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 8px;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

@media (max-width: 780px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--s2) var(--s3) var(--s3);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .nav-links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--line); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a { display: block; padding: var(--s2) 0; font-size: 1rem; }
}

/* ---------------------------------------------------------
   04 Buttons & Links
   --------------------------------------------------------- */
.btn {
  display: inline-block;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  background: none;
  padding: 0.7rem 1.5rem;
  font-family: "Inter", sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }

.btn-secondary { border-color: var(--line); color: var(--muted); }
.btn-secondary:hover { background: none; border-color: var(--ink); color: var(--ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Beide Buttons exakt gleich breit.
   grid-auto-columns: 1fr gibt jeder Spalte dieselbe Breite,
   und die richtet sich nach dem laengeren der beiden Texte. */
.btn-row-even {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.btn-row-even .btn { text-align: center; }

@media (max-width: 560px) {
  .btn-row-even {
    display: grid;
    grid-auto-flow: row;
    width: 100%;
  }
}

/* ---------------------------------------------------------
   05 Hero
   --------------------------------------------------------- */
/* Ein Gedanke, mittig, sonst nichts.
   Die Zentrierung laeuft ueber margin-inline: auto,
   nicht ueber text-align allein, damit die Blockbreiten
   sauber begrenzt bleiben. */
.hero {
  min-height: 82vh;
  display: flex;
  align-items: center;
  padding: var(--s6) 0 var(--s5);
}

.hero-inner {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--s3);
  text-align: center;
}

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero-sub {
  font-size: var(--fs-lead);
  margin: var(--s3) auto 0;
  max-width: 30ch;
}

.hero-lead {
  color: var(--muted);
  margin: var(--s2) auto 0;
  max-width: 46ch;
}
.hero-lead strong { color: var(--ink); }

.print-note {
  margin: var(--s4) auto 0;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 42ch;
}

.stats-inline {
  margin-top: var(--s2);
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

@media (max-width: 860px) {
  .hero { min-height: 0; padding: var(--s5) 0 var(--s6); }
}

/* ---------------------------------------------------------
   06 Pfad (Spine)
   --------------------------------------------------------- */
.path {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s6) var(--s3);
  border-top: 1px solid var(--line);
}

.path-head { margin-bottom: var(--s5); }
.path-head h2 { font-size: var(--fs-h2); line-height: 1.1; }

/* Keine Grafik mehr. Die Ziffer ist die Grafik.
   Sie steht gross und hell links, der Text daneben. */
.path-steps { list-style: none; text-align: left; }

.path-step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: var(--s4);
  align-items: start;
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
}
.path-step:first-child { border-top: 0; }
.path-step:last-child { padding-bottom: 0; }

.step-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--accent);
  transition: color .6s ease;
}
.path-step.is-visible .step-num { color: var(--ink); }

.path-step h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin: 0 0 var(--s1);
}
.path-step p {
  color: var(--muted);
  max-width: var(--measure);
}

@media (max-width: 640px) {
  .path-step {
    grid-template-columns: 1fr;
    row-gap: var(--s2);
    padding: var(--s4) 0;
  }
  .step-num { font-size: 1.6rem; }
}

/* ---------------------------------------------------------
   07 Split-Sektionen
   --------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  align-items: center;
}
.split.reverse .split-media { order: 2; }
.split-media svg { width: 100%; max-width: 340px; margin: 0 auto; display: block; }
.split h2 { font-size: var(--fs-h2); line-height: 1.1; margin-bottom: var(--s2); }
.split h3 {
  font-size: var(--fs-h3);
  margin: var(--s4) 0 var(--s1);
}
.split p {
  color: var(--muted);
  max-width: var(--measure);
  margin-bottom: var(--s2);
}
.split p strong { color: var(--ink); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: var(--s4); }
  .split.reverse .split-media { order: 0; }
  .split-media svg { max-width: 240px; }
}

/* ---------------------------------------------------------
   08 Standard-Sektionen
   --------------------------------------------------------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s6) var(--s3);
  border-top: 1px solid var(--line);
}
.section h2 { font-size: var(--fs-h2); line-height: 1.1; margin-bottom: var(--s2); }
.section h3 { font-size: var(--fs-h3); margin: var(--s4) 0 var(--s1); }
.section p {
  color: var(--muted);
  max-width: var(--measure);
  margin-bottom: var(--s2);
}
.section p strong { color: var(--ink); }

/* Zentrierte Sektion: Ueberschrift und Einleitung mittig,
   der Inhalt darunter bleibt links gesetzt und damit lesbar. */
.centered { text-align: center; }
.centered h2,
.centered .section-lead { margin-left: auto; margin-right: auto; }
.centered .section-lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-width: 52ch;
  margin-top: var(--s2);
}
.centered .btn-row { justify-content: center; }

/* Fliesstext einer zentrierten Sektion bleibt zentriert,
   solange die Zeilen kurz sind. Dafuer die schmale Variante. */
.narrow p { max-width: 58ch; margin-left: auto; margin-right: auto; }

/* Formularfelder werden nie zentriert, das liest sich sonst schief. */
.centered .signup { text-align: left; }

.section.flush-bottom { padding-bottom: 0; }

.section-alt {
  /* Bewusst nicht deckend: die Felder aus Block 14 sollen
     schwach durchschimmern, sonst waeren ganze Abschnitte
     der Seite wieder tot. */
  background: rgba(236, 231, 219, 0.72);
  border-top: 1px solid var(--line);
  padding: var(--s6) 0;
}
.section-alt .wrap > h2 { font-size: var(--fs-h2); line-height: 1.1; margin-bottom: var(--s2); }
.section-alt .wrap > p { color: var(--muted); max-width: var(--measure); margin-bottom: var(--s2); }

/* ---------------------------------------------------------
   09 Blog-Liste
   --------------------------------------------------------- */
.subpage-main { padding-top: var(--s6); }

.page-head {
  max-width: var(--maxw);
  margin: 0 auto var(--s5);
  padding: 0 var(--s3);
}
.page-head h1 {
  font-size: var(--fs-h1-sub);
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.page-head .lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  margin-top: var(--s3);
  max-width: 52ch;
}

.post-index {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--s3) var(--s7);
}

/* Karussell: die Karten wandern langsam nach links.
   Ohne JavaScript bleibt eine waagerecht scrollbare Reihe
   stehen, der Inhalt ist also nie unerreichbar. */
.marquee {
  margin: var(--s5) 0 var(--s6);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.marquee::-webkit-scrollbar { display: none; }

.marquee-track {
  display: flex;
  width: max-content;
  padding: var(--s1) var(--s3);
}
.marquee-set {
  display: flex;
  gap: var(--s3);
  padding-right: var(--s3);   /* gleicher Abstand am Uebergang der beiden Runden */
  list-style: none;
  margin: 0;
}

/* Erst mit JavaScript wird daraus eine laufende Schleife.
   Die zweite Runde haengt das Skript an, deshalb ist
   translateX(-50%) genau eine Runde weit. */
.js .marquee { overflow: hidden; }
.js .marquee-track { animation: marquee 90s linear infinite; }
.js .marquee:hover .marquee-track,
.js .marquee:focus-within .marquee-track { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Weiche Kanten links und rechts, damit die Karten
   nicht hart abgeschnitten wirken. */
.js .marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.card {
  flex: 0 0 300px;
  background: rgba(244, 241, 234, 0.66);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s3);
  transition: border-color .25s ease;
}
.card:hover { border-color: var(--ink); }
.card a { display: block; height: 100%; }
.card time {
  display: block;
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: var(--s2);
}
.card h3 {
  font-size: 1rem;
  line-height: 1.35;
  margin-bottom: var(--s1);
}
.card p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Der Button braucht Luft nach unten, sonst stoesst er
   an die Kante der naechsten Sektion. */
.marquee-more {
  display: flex;
  justify-content: center;
  padding-bottom: var(--s6);
}

@media (max-width: 560px) {
  .card { flex-basis: 260px; }
  .js .marquee-track { animation-duration: 70s; }
}

.post-list { list-style: none; border-top: 1px solid var(--line); }
.section .post-list { margin-top: var(--s4); }
.post-item { border-bottom: 1px solid var(--line); }

.post-link {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--s3);
  padding: var(--s4) 0;
  transition: opacity .2s ease;
}
.post-link:hover { opacity: 0.62; }

.post-date {
  font-size: 0.8rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  padding-top: 0.3rem;
  white-space: nowrap;
}
.post-link h2,
.post-link h3 {
  font-size: var(--fs-h3);
  line-height: 1.35;
  margin-bottom: var(--s1);
}
.post-link p {
  color: var(--muted);
  font-size: 0.95rem;
  max-width: var(--measure);
}

@media (max-width: 680px) {
  .post-link { grid-template-columns: 1fr; gap: var(--s1); }
  .post-date { padding-top: 0; }
}


/* ---------------------------------------------------------
   10 Artikel
   --------------------------------------------------------- */
.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--s3) var(--s7);
}

/* Punktraster hinter dem Artikel: blendet beim Lesen sanft ein
   und gegen Ende wieder aus. Deckkraft steuert script.js. */
.dot-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-image: radial-gradient(circle, var(--accent) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  /* an den Rändern auslaufen, damit es nirgends hart abbricht */
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at center, #000 35%, transparent 100%);
}

.article-back {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: var(--s4);
}
.article-back a { border-bottom: 1px solid var(--line); }
.article-back a:hover { border-bottom-color: var(--ink); color: var(--ink); }
.article-back-bottom { margin: var(--s5) 0 0; }

.article-head { margin-bottom: var(--s5); }
.article-head h1 {
  font-size: var(--fs-h1-sub);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.article-lead {
  font-size: var(--fs-lead);
  color: var(--muted);
  margin-top: var(--s3);
}

.article-body > * + * { margin-top: var(--s3); }
.article-body p { line-height: 1.75; }
.article-body h2 {
  font-size: 1.35rem;
  line-height: 1.25;
  margin-top: var(--s5);
}
.article-body ul,
.article-body ol {
  padding-left: 1.15rem;
  color: var(--ink);
}
.article-body li { margin-bottom: var(--s2); line-height: 1.7; }
.article-body a {
  border-bottom: 1px solid var(--accent);
}
.article-body a:hover { border-bottom-color: var(--ink); }

.article-body blockquote {
  border-left: 2px solid var(--ink);
  padding-left: var(--s3);
  margin: var(--s5) 0;
}
.article-body blockquote p {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.article-sources {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.article-sources h2 {
  font-size: var(--fs-eyebrow);
  font-family: "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
}
.article-sources ol { padding-left: 1.15rem; }
.article-sources li {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: var(--s2);
}
.article-sources a { border-bottom: 1px solid var(--line); }
.article-sources a:hover { color: var(--ink); border-bottom-color: var(--ink); }

.article-cta {
  margin-top: var(--s6);
  padding: var(--s4);
  background: rgba(236, 231, 219, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.article-cta p {
  color: var(--muted);
  margin-bottom: var(--s3);
  max-width: var(--measure);
}

/* ---------------------------------------------------------
   11 Formular
   --------------------------------------------------------- */
.cta { max-width: 620px; margin-left: auto; margin-right: auto; }
.cta-sub {
  font-size: var(--fs-lead);
  color: var(--muted);
  margin: 0 auto var(--s5);
  max-width: 42ch;
}

.signup { display: grid; gap: var(--s3); }
.signup .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

/* Feldbeschriftungen bewusst in normaler Schreibweise.
   Versalien mit Sperrung sind der Sektions-Marke (.eyebrow)
   vorbehalten. In einem Formular wirken sie gedraengt und
   lesen sich schlechter.
   Die Klasse .field ist noetig, weil eine Regel auf
   `.signup label span` auch die Auswahl und die Einwilligung
   erwischen wuerde: sie waere spezifischer als deren
   eigene Regeln und wuerde sie ueberstimmen. */
.signup .field { display: grid; gap: var(--s1); }
.signup .field > span {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

.signup input[type="text"],
.signup input[type="email"] {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(244, 241, 234, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  transition: border-color .2s ease, background .2s ease;
}
.signup input[type="text"]:hover,
.signup input[type="email"]:hover { border-color: var(--accent); }
.signup input[type="text"]:focus,
.signup input[type="email"]:focus {
  outline: none;
  border-color: var(--ink);
  background: rgba(244, 241, 234, 0.9);
}

.signup .btn { justify-self: start; margin-top: var(--s1); }

/* Bot-Falle: fuer Menschen unsichtbar, aber nicht display:none,
   sonst fuellen manche Bots sie gar nicht erst aus. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Auswahl der Fassung: zwei Felder untereinander,
   das gewaehlte bekommt einen schwarzen Rahmen. */
.choice { border: 0; }
.choice legend {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: var(--s2);
  padding: 0;
}
.choice-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2);
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(244, 241, 234, 0.5);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.choice-option + .choice-option { margin-top: var(--s1); }
.choice-option:hover { border-color: var(--accent); }
.choice-option:has(input:checked) {
  border-color: var(--ink);
  background: rgba(244, 241, 234, 0.9);
}
.choice-option input {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  accent-color: var(--ink);
}
.choice-option > span {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
}
.choice-option strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s2);
  align-items: start;
}
.consent input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--ink);
  border: 0;
}
.consent > span {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
}

.form-note {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: var(--measure);
}

@media (max-width: 560px) {
  .signup .row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   12 Footer
   --------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--s4) var(--s3);
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
.site-footer p { font-size: 0.8rem; color: var(--muted); }

/* ---------------------------------------------------------
   13 Reveals & Reduced Motion
   --------------------------------------------------------- */
/* Wichtig: nur wenn JavaScript laeuft, wird ausgeblendet.
   Sonst waere der Inhalt bei einem JS-Fehler unsichtbar. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .step-num { transition: none; }
  /* Karussell steht still und wird stattdessen scrollbar. */
  .js .marquee-track { animation: none; }
  .js .marquee { overflow-x: auto; }
  /* Die Felder bleiben sichtbar, sie wandern nur nicht mehr. */
  .ambient span { animation: none; }
}

/* ---------------------------------------------------------
   14 Hintergrund

   Vier grosse, sehr weiche Flaechen in Papiertoenen. Sie
   liegen fest hinter allem und wandern extrem langsam.

   Zwei Entscheidungen aus Ruecksicht auf die Leistung:

   1. Kein `filter: blur()`. Ein radialer Verlauf, der nach
      aussen in Transparenz laeuft, ist bereits vollkommen
      weich. Blur wuerde gleich aussehen, aber bei jedem
      Bild neu gerechnet werden.
   2. Bewegt wird ausschliesslich `transform`. Das erledigt
      die Grafikkarte, ohne dass das Layout neu berechnet
      wird. `top` oder `left` zu animieren waere ruckelig.

   Die Koernung darueber ist ein einmal erzeugtes SVG-
   Rauschen, kein laufender Filter. Sie gibt der Flaeche den
   milchigen Charakter, ohne etwas zu kosten.
   --------------------------------------------------------- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Arbeitsmappe: Blick ins Heft
   Die Seiten bilden das PDF nach: weisses Papier, geometrische
   Rundschrift (Poppins steht dem Original am naechsten),
   dunkles Marineblau, Spine mit Ring, dieselben Tabellen und
   dieselbe Matrix. Eintragungen in Caveat stellen Handschrift
   dar. Beides gilt nur innerhalb des Hefts, nie in der
   Oberflaeche der Website.
   --------------------------------------------------------- */
.showcase-wrap { padding: var(--s5) var(--s3) var(--s6); }

.showcase {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: clamp(var(--s3), 4vw, var(--s5));
  align-items: center;
  padding: clamp(var(--s3), 3vw, var(--s4));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}

/* Zahlenkasten: drei Felder, feine Trenner */
.stat-box {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
}
.stat-box div { padding: var(--s2); border-top: 1px solid var(--line); }
.stat-box div:first-child { border-top: none; }
.stat-box span {
  display: block;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2px;
}
.stat-box strong {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em;
}

/* Das Heft */
.showcase-media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(26, 26, 26, .35);
}
.wb-scroll {
  height: 32rem;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  overscroll-behavior: contain;
  background: #fff;
}
.wb-scroll:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.wb-page {
  position: relative;
  scroll-snap-align: start;
  padding: var(--s3) var(--s4) var(--s5);
  border-bottom: 1px solid #e9e9e9;
  background: #fff;
  font-family: "Poppins", "Century Gothic", "Inter", sans-serif;
  color: #2b3446;
}


.wb-h1 {
  font-family: "Poppins", "Century Gothic", sans-serif;
  font-size: 2rem; font-weight: 700; letter-spacing: -0.02em;
  color: #2b3446; line-height: 1.05; margin-bottom: var(--s3);
}
.wb-h2 {
  font-family: "Poppins", "Century Gothic", sans-serif;
  font-size: 1.05rem; font-weight: 700; color: #2b3446;
  margin-bottom: var(--s2); line-height: 1.25;
}
.wb-h2-top { margin-top: 0; }

.wb-body {
  font-size: .72rem; line-height: 1.85; color: #3d4657;
  text-align: justify; hyphens: auto;
  margin-bottom: var(--s2);
}
.wb-strong { font-weight: 700; color: #2b3446; }
.wb-src { font-size: .6rem; font-style: italic; color: #6b7280; margin-bottom: var(--s3); }



/* Tabelle der Lebensbereiche */
.wb-areas { width: 100%; border-collapse: collapse; font-size: .62rem; }
.wb-areas th, .wb-areas td { border: 1px solid #2b3446; padding: .3rem .4rem; vertical-align: middle; }
.wb-areas thead th { border: none; font-weight: 700; font-size: .6rem; padding-bottom: .3rem; }
.wb-areas tbody th { font-weight: 700; width: 26%; }
.wb-areas .ex { color: #8b93a1; }
.wb-areas tbody tr.grp th { border-top-width: 1px; }


/* Das Bewertungsraster */
/* Feste Spaltenbreiten: sonst rechnet der Browser Kopf- und
   Koerperzeilen unterschiedlich und die Ziffernleiste sitzt
   neben den Kaestchen statt darueber. */
.wb-grid { width: 100%; border-collapse: collapse; font-size: .56rem; table-layout: fixed; }
.wb-grid thead th {
  font-weight: 700; text-align: center; font-size: .55rem;
  color: #2b3446; padding-bottom: .2rem; line-height: 1.25;
}
.wb-grid tbody th {
  font-weight: 700; text-align: left;
  border: 1px solid #2b3446; padding: .25rem .3rem;
}
.wb-grid tbody td:first-of-type {
  border: 1px solid #2b3446; padding: .25rem .3rem; font-weight: 600;
  /* Einzeilig halten: bricht ein Name um, waere genau diese Zeile
     hoeher als alle anderen. */
  white-space: nowrap;
  font-size: .52rem;
}
/* Alle Zeilen exakt gleich hoch */
.wb-grid tbody tr { height: 27px; }
.wb-grid td { padding: .18rem .2rem; text-align: center; }

/* Sieben Kaestchen; das Kreuz sitzt auf dem gewaehlten Wert */
.scale, .ruler {
  position: relative; display: inline-block;
  width: 84px; height: 13px;
  background: repeating-linear-gradient(to right, #eceef1 0 11px, transparent 11px 12px);
}
.ruler {
  background: none;
  display: inline-grid;
  grid-template-columns: repeat(7, 12px);
  height: auto;
}
.ruler s {
  text-decoration: none;
  width: 11px;
  text-align: center;
  font-size: .5rem;
  font-style: italic;
  color: #b8bdc6;
}
.scale::after {
  content: '\2715';
  font-family: "Caveat", cursive; font-weight: 600;
  position: absolute; top: -8px;
  left: calc((var(--x) - 1) * 12px);
  width: 11px; text-align: center;
  font-size: 1.05rem; color: #1c2b4a;
}

/* Handschrift: nur fuer Eintragungen */
.hand { font-family: "Caveat", "Segoe Script", cursive; color: #1c2b4a; font-weight: 600; }
.wb-hand-note { margin-top: var(--s3); font-size: 1.05rem; line-height: 1.4; }

/* Lebens-Matrix */
.wb-matrix { position: relative; padding-left: 1.5rem; margin-top: var(--s3); }
.wb-matrix svg { width: 100%; height: auto; display: block; overflow: visible; }
.wb-matrix .q {
  font-family: "Poppins", sans-serif; font-size: 46px; font-weight: 700;
  fill: #c9c9c9; text-anchor: middle;
}
/* Eintragungen: mit der Hand gezeichnet, nicht gesetzt */
.wb-matrix .hk {
  fill: #1c2b4a;
  fill-opacity: .07;
  stroke: #1c2b4a;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.wb-matrix .hlbl {
  font-family: "Caveat", cursive;
  font-size: 15px; font-weight: 600;
  fill: #1c2b4a; text-anchor: middle;
}
.wb-matrix .ax { font-family: "Poppins", sans-serif; font-size: 8px; fill: #6b7280; }
.ax-y, .ax-x {
  font-family: "Poppins", sans-serif;
  font-size: .58rem; font-weight: 700; color: #2b3446;
}
.ax-y {
  position: absolute; left: -.2rem; top: 42%;
  transform: rotate(-90deg) translateX(-50%);
  transform-origin: left center; white-space: nowrap;
}
.ax-x { display: block; text-align: center; margin-top: .2rem; }

@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3); }
  .stat-box { grid-template-columns: repeat(3, 1fr); }
  .stat-box div { border-top: none; border-left: 1px solid var(--line); }
  .stat-box div:first-child { border-left: none; }
  .wb-scroll { height: 26rem; }
  .wb-page { padding: var(--s3); }
  .wb-h1 { font-size: 1.5rem; }
  .scale { width: 63px; }
  .ruler { grid-template-columns: repeat(7, 9px); }
  .ruler s { width: 8px; font-size: .44rem; }
  .scale { background: repeating-linear-gradient(to right, #eceef1 0 8px, transparent 8px 9px); }
  .scale::after { left: calc((var(--x) - 1) * 9px); width: 8px; font-size: .9rem; }
}

/* ---------------------------------------------------------
   Haeufige Fragen
   Aufklappbar ueber <details>. Der Browser bringt Tastatur
   und Screenreader mit, wir geben nur die Form dazu.
   --------------------------------------------------------- */
.faq { margin-top: var(--s4); border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--muted); }
.faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* Zeichen statt Pfeil: Plus wird beim Aufklappen zum Minus. */
.faq-item summary::after {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: .35rem;
  background:
    linear-gradient(var(--ink), var(--ink)) center/100% 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center/1.5px 100% no-repeat;
  transition: transform .25s ease;
}
.faq-item[open] summary::after {
  background: linear-gradient(var(--ink), var(--ink)) center/100% 1.5px no-repeat;
  transform: rotate(180deg);
}

.faq-answer { padding: 0 0 var(--s3); max-width: 58ch; }
.faq-answer p { color: var(--muted); margin: 0; }

/* ---------------------------------------------------------
   Abschluss in Tinte
   Der einzige dunkle Block der Seite.
   --------------------------------------------------------- */
.cta-dark {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s7) var(--s3);
  border-radius: var(--radius-lg);
  /* dieselbe Formel wie .rules span: die Kanten fluchten mit den
     Rasterlinien, statt sie zu überlaufen */
  width: min(var(--maxw), calc(100% - var(--s3) * 2));
  margin: var(--s6) auto var(--s5);
}
.cta-dark .eyebrow { color: var(--accent); }
.cta-dark h2 { color: var(--paper); }
.cta-dark .cta-sub { color: #cfc9bb; }

/* Auf Tinte kehren sich die Buttons um. */
.btn-invert {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.btn-invert:hover { background: transparent; color: var(--paper); }

.btn-ghost {
  background: transparent;
  border-color: #4a4a4a;
  color: #cfc9bb;
}
.btn-ghost:hover { border-color: var(--paper); color: var(--paper); }

.cta-dark .btn:focus-visible { outline-color: var(--paper); }

/* ---------------------------------------------------------
   Download-Fenster
   Natives dialog: Fokusfalle, Escape und Hintergrund-Sperre
   kommen vom Browser. Ohne JavaScript wird daraus ein
   normaler Abschnitt, damit das Formular erreichbar bleibt.
   --------------------------------------------------------- */
.sheet {
  border: none;
  padding: 0;
  margin: auto; /* zentriert das Fenster im Sichtfeld */
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  width: min(560px, calc(100vw - var(--s4)));
  max-height: calc(100vh - var(--s5));
  overflow: auto;
  box-shadow: 0 24px 60px rgba(26, 26, 26, .22);
}
.sheet::backdrop {
  background: rgba(26, 26, 26, .55);
  backdrop-filter: blur(3px);
}
.sheet-inner { padding: var(--s5) var(--s4) var(--s4); position: relative; }
.sheet-title { font-size: 1.5rem; margin-bottom: var(--s3); }

.sheet-close {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.sheet-close:hover { color: var(--ink); border-color: var(--line); }

/* Ohne JavaScript: kein Fenster, sondern ein ruhiger Abschnitt. */
html:not(.js) .sheet {
  display: block;
  width: min(560px, calc(100% - var(--s4)));
  margin: 0 auto var(--s6);
  box-shadow: none;
  border: 1px solid var(--line);
}
html:not(.js) .sheet-close { display: none; }

@media (max-width: 780px) {
  .cta-dark { padding: var(--s5) var(--s3); margin: var(--s5) auto var(--s4); }
  .sheet-inner { padding: var(--s4) var(--s3) var(--s3); }
}

/* ---------------------------------------------------------
   Rasterlinien
   Zwei feine Senkrechte markieren die Kanten der Inhalts-
   spalte und geben der Seite Struktur, so wie die Hilfslinien
   auf einem Layoutbogen. Sie liegen fest hinter allem und
   scrollen nicht mit, deshalb wirken sie wie in das Papier
   gedruckt. Erzeugt wird die Ebene von script.js.
   --------------------------------------------------------- */
.rules {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  justify-content: center;
}
.rules span {
  display: block;
  width: min(var(--maxw), calc(100% - var(--s3) * 2));
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  opacity: .6;
}

@media (max-width: 780px) {
  /* Auf schmalen Geraeten liegen die Linien zu dicht am Text. */
  .rules { display: none; }
}

.ambient span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.ambient span:nth-child(1) {
  width: 78vw; height: 78vw;
  top: -22vh; left: -16vw;
  background: radial-gradient(circle at 50% 50%,
              rgba(183, 177, 162, 0.3), rgba(183, 177, 162, 0) 68%);
  animation: feldA 74s ease-in-out infinite alternate;
}
.ambient span:nth-child(2) {
  width: 66vw; height: 66vw;
  top: 24vh; right: -20vw;
  background: radial-gradient(circle at 50% 50%,
              rgba(216, 210, 196, 0.38), rgba(216, 210, 196, 0) 70%);
  animation: feldB 92s ease-in-out infinite alternate;
}
.ambient span:nth-child(3) {
  width: 58vw; height: 58vw;
  bottom: -18vh; left: 12vw;
  background: radial-gradient(circle at 50% 50%,
              rgba(111, 106, 94, 0.07), rgba(111, 106, 94, 0) 66%);
  animation: feldC 83s ease-in-out infinite alternate;
}
.ambient span:nth-child(4) {
  width: 44vw; height: 44vw;
  top: 52vh; left: 34vw;
  background: radial-gradient(circle at 50% 50%,
              rgba(183, 177, 162, 0.2), rgba(183, 177, 162, 0) 64%);
  animation: feldD 67s ease-in-out infinite alternate;
}

/* Kleine Wege, lange Dauer. Man soll die Bewegung nicht
   sehen, sondern hoechstens bemerken, dass sich etwas
   veraendert hat. */
@keyframes feldA { to { transform: translate3d(7vw, 5vh, 0) scale(1.12); } }
@keyframes feldB { to { transform: translate3d(-6vw, -7vh, 0) scale(1.08); } }
@keyframes feldC { to { transform: translate3d(9vw, -5vh, 0) scale(1.14); } }
@keyframes feldD { to { transform: translate3d(-8vw, 6vh, 0) scale(0.92); } }

/* Koernung wie hinter Milchglas. Einmal gerendert,
   danach nur noch eine Textur. */
.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");
}

/* Auf schmalen Schirmen reichen zwei Flaechen. Weniger zu
   zeichnen, und mehr wuerde man ohnehin nicht sehen. */
@media (max-width: 640px) {
  .ambient span:nth-child(3),
  .ambient span:nth-child(4) { display: none; }
}