/*
 * BePartOfGreat — Website in der Gestaltungsrichtung „Fläche".
 *
 * Dieselben Regeln wie in der App (src/ui/theme.ts): flache Farbfelder, harte Kanten,
 * keine Verläufe, keine weichen Schatten, eckige Ecken. Tiefe entsteht dadurch, dass
 * Farbflächen aneinanderstoßen, nicht durch Schichten.
 *
 * Ocker gehört den Punkten. Sonst nirgends.
 */

:root {
  --navy: #16283F;
  --marine: #1F3A5F;
  --cream: #F1EBDD;
  --ocher: #C89B3C;
  --terra: #B4472F;
  --green: #2E6650;
  --green-text: #8FBFA5;

  --ground-a: #DEE6DC;
  --ground-b: #EFE4CB;
  --ground-c: #F0DED3;
  --ground-d: #E8E1E6;

  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(4.5rem, 11vh, 9rem);
  --hair-dark: rgba(22, 40, 63, 0.14);
  --hair-light: rgba(241, 235, 221, 0.16);
}

@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-300.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/fonts/jost-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

/* Ohne das schlaegt jedes display: flex das hidden-Attribut. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.6vw + 0.95rem, 1.1875rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--terra); color: var(--cream); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--terra);
  color: var(--cream);
  padding: 0.75rem 1rem;
  z-index: 20;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 3px;
}
.dark :focus-visible { outline-color: var(--ocher); }

/* ---------------------------------------------------------------- Bausteine */

.wrap {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--section-y); }

.dark { background: var(--navy); color: var(--cream); }
.light { background: var(--cream); color: var(--navy); }
.ground { background: var(--ground-a); color: var(--navy); }

.caps {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.faint { color: rgba(241, 235, 221, 0.6); }
.muted { color: rgba(22, 40, 63, 0.55); }

/* Handgesetzte Umbrueche in Ueberschriften: am Desktop gewollt, schmal im Weg —
   dort erzeugen sie Zeilen mit zwei Woertern. display: none nimmt dem <br> die
   Wirkung, der Text bricht dann von selbst. */
@media (max-width: 46rem) {
  br.wide { display: none; }
}

h1 {
  margin: 0 0 1.75rem;
  font-weight: 300;
  font-size: clamp(2.9rem, 7.4vw, 5.75rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.h2 {
  margin: 0 0 1.5rem;
  font-weight: 300;
  font-size: clamp(1.9rem, 3.9vw, 3.15rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
}

.h3 {
  margin: 0 0 0.75rem;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lead { max-width: 34em; margin: 0 0 1.15rem; }
.lead-wide { max-width: 46em; }
.lead strong { font-weight: 500; }

.note {
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 1.75rem 0 0;
  color: rgba(22, 40, 63, 0.6);
}
.dark .note { color: rgba(241, 235, 221, 0.6); }
.note a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.btn {
  display: inline-block;
  padding: 0.95rem 1.6rem 0.85rem;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color 120ms linear, color 120ms linear;
}
.btn-action { background: var(--terra); color: var(--cream); }
.btn-action:hover { background: #9c3b26; }
.btn-ghost { border-color: currentColor; }
.dark .btn-ghost:hover { background: var(--cream); color: var(--navy); }
.light .btn-ghost:hover, .ground .btn-ghost:hover { background: var(--navy); color: var(--cream); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* ------------------------------------------------------------------- Kopf */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--gutter);
  background: var(--navy);
  color: var(--cream);
  border-bottom: 1px solid var(--hair-light);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.brand-mark { width: 1.35rem; height: 1.35rem; color: var(--cream); flex: none; }

.bar nav { display: flex; gap: 1.4rem; }
.bar nav a {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 2px solid transparent;
  color: rgba(241, 235, 221, 0.75);
}
.bar nav a:hover { color: var(--cream); border-bottom-color: var(--terra); }

@media (max-width: 44rem) {
  .bar nav { gap: 1rem; }
  .bar nav a:nth-child(4), .bar nav a:nth-child(5) { display: none; }
}
@media (max-width: 30rem) {
  .bar nav a:nth-child(3) { display: none; }
}

/* ------------------------------------------------------------------- Hero */

.hero { padding-block: clamp(3.5rem, 9vh, 7rem) var(--section-y); }

/* Einspaltig stossen die Kacheln direkt an den naechsten Abschnitt. Dann addieren
   sich zwei Abschnittsabstaende zu einem Loch von fast 200 px — hier reicht die
   Haelfte. */
@media (max-width: 56rem) {
  .hero { padding-bottom: clamp(1.5rem, 4vh, 3rem); }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.hero-copy .lead { color: rgba(241, 235, 221, 0.86); }

.hero-art {
  width: min(100%, 31rem);
  margin-left: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--hair-light);
  border: 1px solid var(--hair-light);
}

/* Die Kacheln stehen in einer Gitterzeile und werden auf gleiche Hoehe gezogen. Ohne
   das Folgende bleibt bei der niedrigeren Kachel unten ein Streifen Grundfarbe stehen,
   sobald daneben ein Etikett zweizeilig wird. Die Tafel klebt jetzt am unteren Rand,
   die Luft entsteht ueber ihr — wie bei den Kacheln in der App. */
.tile { background: var(--tile, var(--cream)); display: flex; flex-direction: column; }
.tile > svg { width: 100%; height: auto; }
.tile-foot, .strip figcaption { margin-top: auto; }

.tile-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem 0.7rem;
  background: var(--navy);
  color: var(--cream);
}
.tile-foot span {
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241, 235, 221, 0.7);
}
.tile-foot b {
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ocher);
}
.tile-open > svg { opacity: 0.22; }

@media (max-width: 56rem) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { max-width: 30rem; }
}

/* --------------------------------------------------------------- Schritte */

.steps {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--hair-dark);
  border-top: 1px solid var(--hair-dark);
  border-bottom: 1px solid var(--hair-dark);
}
.steps > li {
  background: var(--cream);
  padding: 1.75rem clamp(1.25rem, 2vw, 2rem) 2rem;
}
.steps h3 {
  margin: 0.9rem 0 0.6rem;
  font-weight: 400;
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.steps p { margin: 0; font-size: 1rem; color: rgba(22, 40, 63, 0.82); }

.step-no {
  display: block;
  font-weight: 300;
  font-size: 3.25rem;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--terra);
}

/* --------------------------------------------------------------- Rechner */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--hair-light);
  border: 1px solid var(--hair-light);
}
.calc-controls { background: var(--marine); padding: clamp(1.5rem, 3vw, 2.25rem); }
.calc-out {
  background: var(--navy);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
}

.calc fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; }
.calc legend { padding: 0; }
.calc legend.caps { margin-bottom: 0.75rem; }

.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.scale button {
  appearance: none;
  border: 2px solid rgba(241, 235, 221, 0.35);
  background: transparent;
  color: var(--cream);
  font-family: inherit;
  font-weight: 300;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  min-height: 2.9rem;
  cursor: pointer;
  transition: background-color 100ms linear, border-color 100ms linear;
}
.scale button:hover { border-color: var(--cream); }
.scale button[aria-checked='true'] {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--navy);
  font-weight: 400;
}

.scale-ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.55rem 0 0;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: rgba(241, 235, 221, 0.5);
}
.scale-ends span:last-child { text-align: right; }

.noscript-note {
  margin: 0;
  font-size: 1rem;
  color: rgba(241, 235, 221, 0.8);
}

.scale-hint {
  margin: 0.7rem 0 0;
  font-size: 0.9375rem;
  color: rgba(241, 235, 221, 0.7);
  min-height: 2.9em;
}

.toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1rem;
  cursor: pointer;
  color: rgba(241, 235, 221, 0.9);
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .box {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border: 2px solid rgba(241, 235, 221, 0.5);
}
.toggle input:checked + .box { background: var(--terra); border-color: var(--terra); }
.toggle input:focus-visible + .box { outline: 3px solid var(--ocher); outline-offset: 3px; }
.toggle b { font-weight: 500; color: var(--cream); }

.score {
  display: block;
  font-weight: 300;
  font-size: clamp(5rem, 13vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.055em;
  color: var(--ocher);
  font-variant-numeric: tabular-nums;
}
.points-label { color: var(--ocher); letter-spacing: 0.24em; margin: 0.25rem 0 1.75rem; }

.breakdown { margin: 0; display: grid; gap: 1px; background: var(--hair-light); }
.breakdown > div {
  background: var(--navy);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
}
.breakdown dt {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(241, 235, 221, 0.65);
}
.breakdown dd {
  margin: 0;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.bonus-row dd { color: var(--green-text); }
.calc-note { margin-top: auto; padding-top: 1.5rem; }

.bonus {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.bonus li {
  border-top: 2px solid var(--terra);
  padding-top: 0.9rem;
  font-size: 1rem;
  color: rgba(241, 235, 221, 0.82);
}
.bonus b { display: block; font-weight: 500; color: var(--cream); margin-bottom: 0.2rem; }

@media (max-width: 52rem) {
  .calc { grid-template-columns: 1fr; }
  .calc-out { flex-direction: column; }
}

/* --------------------------------------------------- Benachrichtigung */

.notify-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.notify-grid .lead { color: rgba(22, 40, 63, 0.85); }

.notif {
  background: var(--navy);
  color: var(--cream);
  padding: 1.25rem 1.4rem 1.5rem;
  border-left: 6px solid var(--terra);
}
.notif-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hair-light);
}
.notif-head .caps { margin: 0; color: rgba(241, 235, 221, 0.75); }
.notif-mark { width: 1.05rem; height: 1.05rem; color: var(--cream); flex: none; }
.notif-time {
  margin-left: auto;
  font-size: 0.8125rem;
  color: rgba(241, 235, 221, 0.5);
}
.notif-title {
  margin: 1rem 0 0.35rem;
  font-size: 1.375rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.notif-body { margin: 0; font-size: 1rem; color: rgba(241, 235, 221, 0.78); }

@media (max-width: 52rem) {
  .notify-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ Werke */

.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
  background: var(--hair-dark);
  border: 1px solid var(--hair-dark);
}
.strip figure { margin: 0; background: var(--tile); }
.strip figcaption {
  padding: 0.6rem 0.75rem 0.7rem;
  background: var(--navy);
  color: rgba(241, 235, 221, 0.8);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
@media (max-width: 46rem) { .strip { grid-template-columns: repeat(2, 1fr); } }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.two-col p { margin: 0; color: rgba(22, 40, 63, 0.82); }

/* -------------------------------------------------------------- Mitmachen */

.join {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--hair-light);
  border: 1px solid var(--hair-light);
}
.join article {
  background: var(--navy);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tag-terra, .tag-green {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.7rem 0.3rem;
  letter-spacing: 0.18em;
}
.tag-terra { background: var(--terra); color: var(--cream); }
.tag-green { background: var(--green); color: var(--cream); }

.ticks { list-style: none; margin: 0 0 2rem; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.85rem;
  font-size: 1rem;
  color: rgba(241, 235, 221, 0.82);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--green-text);
}
.join .btn { margin-top: auto; }

/* ------------------------------------------------------------------ Stand */

.status {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.status-list { list-style: none; margin: 0; padding: 0; }
.status-list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2.1rem;
  border-bottom: 1px solid var(--hair-dark);
  font-size: 1rem;
}
.status-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 0.85rem;
  height: 0.85rem;
}
.status-list .done::before { background: var(--green); }
.status-list .open::before { background: transparent; border: 2px solid var(--terra); }
.status-list .open { color: rgba(22, 40, 63, 0.7); }

.phases { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.phases li { padding-bottom: 1.5rem; }
.phases .caps { color: var(--terra); margin-bottom: 0.4rem; }
.phases p { margin: 0; font-size: 1rem; color: rgba(22, 40, 63, 0.82); }
.phases b { font-weight: 500; color: var(--navy); }

@media (max-width: 52rem) {
  .status { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------- Fuß */

footer { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--hair-light); }
.foot { display: grid; gap: 2rem; }
@media (min-width: 52rem) {
  .foot { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .foot .copy { grid-column: 1 / -1; }
  .foot nav { justify-content: flex-end; }
}
.foot .note { margin-top: 0.85rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot nav a {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.2rem;
}
.foot nav a:hover { border-bottom-color: var(--terra); }
.copy { max-width: 42em; }

/* --------------------------------------------------------- Rechtstexte */

.doc { padding-block: clamp(3rem, 7vw, 5.5rem); }
.doc .wrap { max-width: 46rem; }
.doc h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  margin-bottom: 1rem;
}
.doc p.doc-status {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  background: var(--navy);
  color: var(--cream);
  border-left: 6px solid var(--terra);
  font-size: 1rem;
}
/* Die Abschnitte der Rechtstexte sind <section> — ohne das erben sie die grossen
   Abstaende der Seitenabschnitte und reissen den Text auseinander. */
.doc section { padding-block: 0; }

.doc h2 {
  margin: 2.25rem 0 0.9rem;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.25;
  padding-top: 1rem;
  border-top: 1px solid var(--hair-dark);
}
.doc p { margin: 0 0 1rem; color: rgba(22, 40, 63, 0.85); }
.doc .todo {
  padding: 0.8rem 1rem;
  border: 2px dashed var(--terra);
  color: var(--navy);
  font-size: 1rem;
}
.doc .todo b {
  display: block;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 0.3rem;
}
.doc-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hair-dark); }
.doc-nav a {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.doc-nav a:hover { border-bottom-color: var(--terra); }

/* ------------------------------------------------------------ Auftauchen */

@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .reveal { opacity: 0; transform: translateY(14px); }
  .reveal-ready .reveal-in {
    opacity: 1;
    transform: none;
    transition: opacity 480ms ease-out, transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@media print {
  .bar, .hero-art, .calc, footer nav { display: none; }
  body { background: #fff; color: #000; }
}