/* ==========================================================================
   wege-web.css — die Anleitungen in der Gestaltungssprache von
   www.trainexus.de. NUR fuer die Web-Ansicht der Ausgabe „wege"
   (Base.astro laedt die Datei unter `NUR_WEGE && !print`, zuletzt).

   Warum es diese Datei gibt
   -------------------------
   Seit dem 30.09.2026 tragen die Anleitungen Kopf und Fuss der Website. Damit
   fiel auf, dass alles dazwischen aus einer anderen Welt kommt: andere
   Akzentfarbe, andere Schriftgroessen, andere Raender, andere Flaechen — „nicht
   mehr aus einem Guss" (Pauls Befund 30.09.2026). Diese Datei legt die
   Oberflaeche der Website ueber dasselbe Markup.

   Was NICHT angefasst wird
   ------------------------
   · tokens.css. Das ist die verteilte CI-Quelle aus trainexus_ci/ und wird im
     Zielprojekt nicht bearbeitet.
   · theme.css und print.css. Sie gelten weiter fuer den Druck und fuer die
     anderen Ausgaben (die ZHL-Anleitungen unter /anleitungen/).
   · Das PDF. Dort bleibt es beim Hausdesign mit der orangen Gattungsfarbe —
     ein gedrucktes Dokument ist kein Bildschirm, und die CI-Regeln zu Farbe und
     Druckbarkeit gelten genau dort. Deshalb haengt ALLES hier an `body.web`.

   Der grosse Hebel ist `--doc-farbe`
   ----------------------------------
   theme.css faedelt die Gattungsfarbe durch das ganze Dokument: Kopffeld,
   Ueberschriftenbalken, Tabellenkopf, Zaehlerkreise, Karten. Ein Umhaengen
   dieser einen Variablen faerbt alles auf einmal um — deshalb steht sie unten
   als Erstes, und der Rest sind Flaechen, Schriftgroessen und Abstaende.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Grundwerte der Website
   Dieselben Zahlen wie in trainexus_webseite_v2/assets/site.css. Sie stehen
   auf `body.web` und nicht auf `:root`, damit Kopf und Fuss ihre eigenen
   behalten (www-chrome.css setzt sie dort auf .topbar/.mobile-nav/.footer).
   -------------------------------------------------------------------------- */
body.web {
  --w-accent:      #6366f1;   /* Indigo, die Hauptfarbe der Website        */
  --w-accent-tief: #4f46e5;   /* gedeckter, fuer Text auf Weiss            */
  --w-bg:          #f0f4f1;
  --w-text:        #1a1a2e;
  --w-text-dim:    #5c5c72;
  --w-text-faint:  #8888a0;
  --w-card:        #ffffff;
  --w-border:      rgba(0, 0, 0, .07);
  --w-schatten:    0 2px 12px rgba(0, 0, 0, .06);
  --w-schatten-hoch: 0 10px 28px rgba(0, 0, 0, .10);
  --w-radius:      14px;
  --w-ease:        cubic-bezier(.25, .8, .25, 1);

  background: var(--w-bg);
  color: var(--w-text);
}

/* Der weiche Farbschleier der Website. Auf der Website liegt er in einem
   eigenen `<div class="mesh">`; hier genuegt der Hintergrund des Body, weil
   darueber keine ganzflaechigen Elemente liegen. `fixed` haelt ihn beim
   Scrollen ruhig, genau wie dort. */
body.web {
  background-image:
    radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, .07) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(59, 130, 246, .10) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(236, 72, 153, .08) 0%, transparent 50%);
  background-attachment: fixed;
}

/* Die Gattungsfarbe wird auf Indigo umgehaengt. `body.web .doc` ist noetig,
   weil `.gattung-anleitung` sie direkt auf dem Artikel setzt und damit naeher
   am Element steht als eine Regel auf dem Body. */
body.web .doc,
body.web .doc.gattung-anleitung,
body.web .doc.gattung-datenschutz,
body.web .doc.gattung-vertrag {
  --doc-farbe: var(--w-accent);
  --doc-farbe-tief: var(--w-accent-tief);
}

/* --------------------------------------------------------------------------
   2. Seitenbreite
   Die Website arbeitet mit breiten Abschnitten, das Dokument mit einer
   Lesespalte. 960 px ist der Kompromiss: die Kopfkarte, die Screenshots (820)
   und die Textspalte (76 Zeichen) liegen damit nah beieinander statt in drei
   verschiedenen Breiten, und auf der Startseite bleiben drei Kacheln
   nebeneinander.
   -------------------------------------------------------------------------- */
body.web .page { max-width: 960px; padding: 1.6rem 28px 4rem; }

/* --------------------------------------------------------------------------
   3. Das Dokument ist keine Karte mehr
   Bisher lag alles auf einem weissen Blatt mit Rahmen — eine Papier-Metapher.
   Die Website setzt stattdessen Text direkt auf den Hintergrund und hebt
   einzelne Dinge als Karten heraus. Genau das macht den Unterschied zwischen
   „Dokument im Web" und „Webseite" aus.
   -------------------------------------------------------------------------- */
body.web .doc {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* --- Kopf: weisse Karte statt Vollton-Farbfeld --------------------------- */
/* Das orange Farbfeld war im Web der auffaelligste Fremdkoerper. Die Website
   fuehrt ihre Abschnitte mit einer kleinen farbigen Zeile („1 · Datenschutz &
   Rechtssicherheit") und einer sehr fetten Ueberschrift ein; dasselbe Muster
   traegt hier den Dokumentkopf. */
body.web .doc-header,
body.web .doc-header-kompakt {
  background: var(--w-card);
  color: var(--w-text);
  border: 1px solid var(--w-border);
  border-radius: 16px;
  box-shadow: var(--w-schatten);
  padding: 2.2rem 2.2rem 1.9rem;
}
body.web .kat {
  font-size: 13px;
  font-weight: 700;
  color: var(--w-accent-tief);
  margin-bottom: .6rem;
}
body.web .doc-header h1,
body.web .doc-header-kompakt h1 {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--w-text);
  margin: 0 0 .6rem;
  max-width: 22ch;
}
body.web .doc-header .tx-ziel {
  font-size: 18px;
  font-weight: 700;
  color: var(--w-text);
  margin: .2rem 0 .6rem;
}
body.web .lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--w-text-dim);
  max-width: 68ch;
}
body.web .stand {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--w-border);
  font-size: 13px;
  color: var(--w-text-faint);
}

/* --------------------------------------------------------------------------
   4. Fliesstext
   -------------------------------------------------------------------------- */
/* Kein seitlicher Einzug mehr: das weisse Blatt ist weg, der Text sitzt direkt
   auf dem Hintergrund. Die Prozessleiste folgt in Abschnitt 6. */
body.web .prose { padding: 1.6rem 0 0; }

body.web .prose h2 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--w-text);
  margin: 2.4rem 0 1rem;
  padding-left: .85rem;
  border-left: 3px solid var(--w-accent);
}
body.web .prose > h2:first-child { margin-top: 1rem; }
body.web .prose h3 {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--w-text);
  margin: 1.8rem 0 .5rem;
}
body.web .prose p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--w-text);
  margin: 0 0 1rem;
  max-width: 76ch;
}
body.web .prose li { max-width: 76ch; }
body.web .prose strong { color: var(--w-text); font-weight: 700; }
body.web .prose a {
  color: var(--w-accent-tief);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(99, 102, 241, .35);
}
body.web .prose a:hover { border-bottom-color: var(--w-accent); }

/* Bilder wie die Karten der Website: weiche Ecke, feiner Rahmen, leiser
   Schatten. Vorher standen sie mit hartem Rahmen auf grauer Flaeche. */
body.web .prose img,
body.web .tx-bewegtbild video,
body.web .tx-bewegtbild img {
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  box-shadow: var(--w-schatten);
  background: var(--w-card);
  margin: .6rem 0 1.4rem;
}
body.web .tx-bewegtbild figcaption {
  font-size: 13.5px;
  color: var(--w-text-faint);
}

/* Zaehlerkreise der nummerierten Listen */
body.web .prose ol li::before {
  background: var(--w-accent);
  font-size: 12.5px;
}
body.web .prose ul { padding-left: 1.25rem; }
body.web .prose ul li,
body.web .prose ol li { line-height: 1.65; }
body.web .prose ul li::marker { color: var(--w-text-faint); }

/* Tabellen: keine Rahmen, nur Haarlinien — wie die Listen auf der Website. */
body.web .prose table {
  font-size: 15px;
  margin: .8rem 0 1.6rem;
}
body.web .prose th,
body.web .prose td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--w-border);
}
body.web .prose thead th {
  color: var(--w-accent-tief);
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--w-accent);
}
body.web .prose tbody tr:last-child td { border-bottom: 0; }

/* Hinweiskasten = Karte der Website mit farbiger Kante. Der warme Gelbton
   vorher stammte aus dem Dokumentdesign und hatte auf der Website keine
   Entsprechung. */
body.web .prose blockquote {
  margin: 1.4rem 0;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--w-border);
  border-left: 3px solid var(--w-accent);
  /* Links eckig: eine 3 px breite Kante an einer runden Ecke laeuft im Browser
     als Keil aus und sieht nach Fehler aus. Rechts bleibt die Rundung. */
  border-radius: 0 var(--w-radius) var(--w-radius) 0;
  background: var(--w-card);
  box-shadow: var(--w-schatten);
  font-size: 15.5px;
  color: var(--w-text);
}
body.web .prose blockquote p { max-width: none; }
body.web .prose code {
  background: rgba(99, 102, 241, .08);
  color: var(--w-accent-tief);
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   5. Seitenaktionen (Rueckweg, Druckansicht)
   Die Pillenform der Website statt der eigenen.
   -------------------------------------------------------------------------- */
body.web .tx-seitenaktionen { margin-bottom: 1.4rem; }
body.web .tx-zurueck,
body.web .tx-pdf {
  padding: .5rem 1rem;
  border: 1px solid var(--w-border);
  border-radius: 999px;
  background: var(--w-card);
  box-shadow: var(--w-schatten);
  color: var(--w-text-dim);
  font-size: 14px;
  font-weight: 600;
  transition: transform .25s var(--w-ease), box-shadow .25s, color .25s;
}
body.web .tx-zurueck:hover,
body.web .tx-pdf:hover {
  color: var(--w-accent-tief);
  box-shadow: var(--w-schatten-hoch);
  transform: translateY(-1px);
  background: var(--w-card);
  border-color: var(--w-border);
}

/* --------------------------------------------------------------------------
   6. Prozessleiste
   -------------------------------------------------------------------------- */
/* Der Einzug von 2rem stammte aus der Zeit, als der Text auf einem weissen
   Blatt mit Innenabstand lag (Pauls Befund 28.09.2026). Das Blatt ist weg,
   also faellt auch der Einzug weg — sonst stuende die Leiste jetzt zwei
   Zentimeter weiter RECHTS als der Text. */
body.web .tx-prozess { padding: 0; margin: 1.8rem 0 2.4rem; }
body.web .tx-prozess a {
  padding: .45rem .9rem .45rem .5rem;
  border: 1px solid var(--w-border);
  background: var(--w-card);
  box-shadow: var(--w-schatten);
  color: var(--w-text-dim);
  font-size: 14px;
  font-weight: 600;
  transition: transform .25s var(--w-ease), box-shadow .25s, color .25s;
}
body.web .tx-prozess a:hover {
  color: var(--w-accent-tief);
  border-color: var(--w-border);
  box-shadow: var(--w-schatten-hoch);
  transform: translateY(-1px);
}
body.web .tx-prozess-nr {
  background: var(--w-accent);
  font-size: 12.5px;
  width: 1.45rem;
  height: 1.45rem;
}

/* --------------------------------------------------------------------------
   7. Startseite: Zielwahl und Themenlisten
   Beide werden zu Karten im Stil der Website, samt dem leichten Anheben beim
   Darueberfahren.
   -------------------------------------------------------------------------- */
body.web .tx-zielwahl { gap: 1.15rem; margin-bottom: 3rem; }
body.web .tx-ziel-karte,
body.web .tx-themenliste > a {
  border: 1px solid var(--w-border);
  border-left: 1px solid var(--w-border);
  border-radius: var(--w-radius);
  background: var(--w-card);
  box-shadow: var(--w-schatten);
  padding: 1.4rem 1.5rem;
  transition: transform .3s var(--w-ease), box-shadow .3s, border-color .3s;
}
body.web .tx-ziel-karte:hover,
body.web .tx-themenliste > a:hover {
  transform: translateY(-3px);
  box-shadow: var(--w-schatten-hoch);
  border-color: rgba(99, 102, 241, .35);
}
body.web .tx-ziel-karte .rolle {
  font-size: 12.5px;
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--w-accent-tief);
}
body.web .tx-ziel-karte .ziel {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--w-text);
  line-height: 1.25;
}
body.web .tx-ziel-karte .was,
body.web .tx-themenliste .u {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--w-text-dim);
}
body.web .tx-themenliste .t {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--w-text);
}
body.web .tx-abschnitt { margin-top: 2.8rem; }
body.web .tx-abschnitt h2 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--w-text);
  border-left: 3px solid var(--w-accent);
  padding-left: .85rem;
  margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   8. Platzhalter fuer fehlende Bewegtbilder
   -------------------------------------------------------------------------- */
body.web .tx-bewegtbild-platz {
  border-radius: var(--w-radius);
  border-color: rgba(99, 102, 241, .35);
  background: rgba(99, 102, 241, .04);
  color: var(--w-text-dim);
}

/* --------------------------------------------------------------------------
   9. Schmale Geraete
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  body.web .page { padding: 1.2rem 16px 3rem; }
  body.web .doc-header,
  body.web .doc-header-kompakt { padding: 1.5rem 1.3rem 1.3rem; border-radius: 14px; }
  body.web .prose h2 { font-size: 23px; margin-top: 2rem; }
  body.web .prose h3 { font-size: 18px; }
  body.web .tx-abschnitt h2 { font-size: 23px; }
}