/* ===================================================================
   Klassenschwung – Startseite (index.html), Rechtliches und 404
   Baut auf den Tokens, Buttons und der Schrift aus style.css auf.
   Abstaende folgen einem 8px-Raster (.5rem-Schritte).
   =================================================================== */

/* --container und --gutter stehen in style.css. */

/* ---------------- Farben ----------------
   Die Grundtoene ("Lichtung") stehen in style.css und gelten auch fuer die
   App. Hier nur die Waldtoene fuer die Baeume. */

:root {
  --tree-a:      #39644d;
  --tree-b:      #4f7a61;
  --tree-c:      #2f5541;
  --tree-d:      #87b99e;
  --tree-e:      #a9cbb7;
  --trunk:       #8b8a83;
  --trunk-light: #b9b5a9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Baeume eine Stufe heller, sonst verschwinden sie im Grund */
    --tree-a:      #4f7a61;
    --tree-b:      #6a9a7e;
    --tree-c:      #3d6a52;
    --trunk:       #77766f;
    --trunk-light: #9a968b;
  }
}

/* Sichtbar klebender Teil der Kopfzeile (Sprungziele landen darunter) */
:root { --header-h: 80px; --sticky-h: var(--header-h); }
@media (max-width: 879px) { :root { --header-h: 60px; --sticky-h: 64px; } }

html { scroll-padding-top: calc(var(--sticky-h) + 16px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 100;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t);
}
.skip-link:focus { top: 16px; }

/* ---------------- Header ---------------- */
/* Hinweiszeile, darunter Logo | Segment-Schalter | Anmelden. Die Kopfzeile
   klebt so, dass die Hinweiszeile wegrollt; auf dem Handy rollt auch die
   Logo-Zeile weg und nur der Segment-Schalter bleibt stehen. */

.site-header {
  position: sticky;
  top: calc(-1 * var(--hint-h));
  z-index: 20;
  background: var(--bg-glass);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  height: var(--header-h);
}
.site-header .brand { justify-self: start; }

/* Anmelden als Pille mit feinem Rand */
.site-header__login {
  justify-self: end;
  min-height: 44px;
  padding: 0 18px;
}

@media (max-width: 879px) {
  .site-header { top: calc(-1 * (var(--hint-h) + var(--header-h))); }
  .site-header__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: var(--header-h) auto;
    gap: 0 12px;
    height: auto;
    padding-bottom: 12px;
  }
  .site-header__login { grid-area: 1 / 2; }
  /* Ganze Breite, auf dem Tablet nicht breiter als noetig */
  .site-nav {
    grid-area: 2 / 1 / 3 / -1;
    justify-self: center;
    width: 100%;
    max-width: 560px;
  }
  .site-nav a { flex: 1 1 auto; padding: 0 8px; font-size: .875rem; }
  .site-header__login { padding: 0 16px; font-size: .9375rem; }
}

.site-footer nav a {
  color: var(--text-muted);
  font-size: 1rem;
  text-decoration: none;
  transition: color var(--t);
}
.site-footer nav a:hover,
.site-footer nav a[aria-current="page"] { color: var(--text); }

/* ---------------- Buttons ---------------- */

/* Grosse Knoepfe als Pillen, flach ohne Schatten */
.btn--xl {
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
}
.btn--soft,
.btn--paper { border-color: transparent; font-weight: 500; }
.btn--soft { background: var(--soft); }
.btn--soft:hover:not(:disabled) { background: var(--line); }
.btn--paper { background: var(--surface); }
.btn--paper:hover:not(:disabled) { background: var(--bg); }

.lead {
  max-width: 44ch;
  color: var(--text-muted);
  font-size: 1.125rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------------- 1. Hero ---------------- */

.hero { padding-top: 64px; text-align: center; }
@media (min-width: 960px) { .hero { padding-top: 88px; } }

.hero h1 {
  max-width: 16ch;
  margin: 0 auto 24px;
  font-size: clamp(2.625rem, 1.6rem + 4.2vw, 5rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero .lead { margin: 0 auto; font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem); }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 36px 0 56px;
}

/* Wald: ab Tablet ganz zu sehen; auf schmalen Bildschirmen wird seitlich
   beschnitten statt verkleinert, damit die Baeume gross genug bleiben. */
.woods {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 260;
  min-height: 120px;
}
.woods__a { fill: var(--tree-a); }
.woods__b { fill: var(--tree-b); }
.woods__c { fill: var(--tree-c); }
.woods__d { fill: var(--tree-d); }
.woods__e { fill: var(--tree-e); }
.woods__trunk { fill: var(--trunk); }
.woods__trunk-light { fill: var(--trunk-light); }
.woods__ground { fill: none; stroke: var(--line); }

/* Die Baeume wachsen beim Laden nacheinander aus dem Boden */
@media (prefers-reduced-motion: no-preference) {
  .woods__tree {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: grow 700ms var(--ease) both;
    animation-delay: calc(150ms + var(--i, 0) * 60ms);
  }
}
@keyframes grow {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- 2. Werkzeuge ---------------- */

.tools {
  padding: 72px 0;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
@media (min-width: 960px) { .tools { padding: 104px 0; } }

.tools__title,
.principles__title,
.cta__text h2 { letter-spacing: -.025em; text-wrap: balance; }

.tools__title {
  max-width: 22ch;
  margin: 0 0 40px;
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.875rem);
  font-weight: 400;
  line-height: 1.12;
}
@media (min-width: 960px) { .tools__title { margin-bottom: 56px; } }

.tools__grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .tools__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }

.tool {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px;
  border-radius: 28px;
  background: var(--bg);
}
@media (min-width: 640px) { .tool { padding: 40px; } }
.tool h3 {
  margin: 0 0 12px;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.tool p { max-width: 44ch; color: var(--text-muted); text-wrap: pretty; }
.tool .tool__kicker { margin-bottom: 8px; color: var(--accent); font-size: .9375rem; font-weight: 600; }

/* Board: nachgebaute "Sortierte Ansicht" in den Kachelfarben */
.tool__board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  font-weight: 500;
}
@media (min-width: 480px) { .tool__board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tool__board li {
  overflow: hidden;
  padding: 14px 10px;
  border-radius: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool__board [data-s="links"]  { background: var(--col-links-bg); }
.tool__board [data-s="mitte"]  { background: var(--col-mitte-bg); }
.tool__board [data-s="rechts"] { background: var(--col-rechts-bg); }

/* Fokus-Wald: dunkle Karte in beiden Modi */
.tool--forest { background: var(--forest); color: var(--forest-text); }
.tool--forest p { color: var(--forest-muted); }
.tool--forest .tool__kicker { color: var(--forest-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool--forest { box-shadow: inset 0 0 0 1px var(--border); }
}
.tool__focus { display: grid; gap: 10px; margin-top: auto; font-size: .9375rem; }
.tool--forest .tool__focus-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: none;
  color: var(--forest-text);
  font-variant-numeric: tabular-nums;
}
.tool__focus-bar { height: 6px; border-radius: 3px; background: var(--forest-track); }
.tool__focus-bar i { display: block; width: 16%; height: 100%; border-radius: inherit; background: var(--forest-accent); }
.tool--forest .tool__focus-status { margin-top: 6px; color: var(--forest-accent); }

/* ---------------- 3. Grundsaetze ---------------- */

.principles { padding: 80px 0; }
@media (min-width: 960px) { .principles { padding: 112px 0; } }

.principles__title {
  max-width: 20ch;
  margin: 0 0 48px;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.625rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.03em;
}
@media (min-width: 960px) { .principles__title { margin-bottom: 64px; } }

.principles__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 40px;
  margin: 0;
}
.principles__list div { padding: 24px 0; border-top: 1px solid var(--line); }
.principles__list dt { margin-bottom: 6px; font-weight: 600; }
.principles__list dd { margin: 0; color: var(--text-muted); }

/* ---------------- 4. Abschluss ---------------- */

.cta { padding-bottom: 80px; }
@media (min-width: 960px) { .cta { padding-bottom: 104px; } }

.cta__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px 56px;
  padding: 32px 24px;
  border-radius: 32px;
  background: var(--soft);
}
@media (min-width: 960px) { .cta__panel { padding: 64px; } }
.cta__tree { flex: none; width: 96px; height: 132px; }
.cta__text { flex: 1 1 22rem; min-width: 0; }
.cta__text h2 {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem);
  font-weight: 400;
  line-height: 1.12;
}
.cta__text p { max-width: 48ch; color: var(--text-muted); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------- Footer ---------------- */

.site-footer { padding: 0 0 48px; }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer__copy { color: var(--text-muted); font-size: .875rem; }
@media (max-width: 719px) {
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ---------------- Rechtliche Seiten ---------------- */

.legal { max-width: calc(70ch + 2 * var(--gutter)); padding-top: 48px; padding-bottom: 96px; }
.legal h1 {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 12px;
}
.legal h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.015em; margin: 48px 0 16px; }
.legal h3 { font-size: 1.0625rem; font-weight: 600; margin: 24px 0 8px; }
.legal p, .legal li, .legal address { line-height: 1.6; }
.legal p + p, .legal p + ul, .legal ul + p, .legal ol + p { margin-top: 16px; }
.legal ul, .legal ol { margin: 8px 0 0; padding-left: 24px; }
.legal li + li { margin-top: 8px; }
.legal address { font-style: normal; margin: 16px 0; }
.legal h2 + address { margin-top: 0; }
.legal__box p { margin-top: 8px; }
.legal a { text-underline-offset: 2px; transition: color var(--t); }
.legal a:hover { color: var(--accent-hover); }
.legal__meta { color: var(--text-muted); font-size: .9375rem; }
.legal__box {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}
.legal__box ul { margin-top: 8px; }
.legal__toc { columns: 2 16rem; column-gap: 32px; }
.legal__toc li { break-inside: avoid; }

/* ---------------- 404 ---------------- */

.notfound { padding-top: 96px; padding-bottom: 128px; }
.notfound__code { margin-bottom: 16px; color: var(--accent); font-size: .9375rem; font-weight: 600; }
.notfound h1 {
  max-width: 16ch;
  margin-bottom: 16px;
  font-size: clamp(2.625rem, 1.6rem + 4.2vw, 4.5rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------------- Scroll-Animation ---------------- */
/* Nur mit JS (Klasse .js am <html>), sonst bleibt alles sichtbar. */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}