/* Der User Guide — Seitenleiste, Inhaltsspalte und Bausteine.

   Lag bis 2026-08-25 als <style>-Block in pages/guide.html. Ausgelagert,
   damit die gebackenen Guide-Seiten dieselbe Datei laden statt jede ihre
   eigene Kopie zu tragen. css/cards.css bringt die Bildkarten mit.
*/

/* ══════════════════════════════════════════════════════════════════════
   Guide styles. Every class is namespaced g-* and scoped under .guide:
   the block model calls things .card, .grid, .pill and .panel, all four
   of which already mean something else in css/style.css.

   Colours come from the site's own tokens — no new palette. Where the
   block model wanted a gold frame it gets the site's --border; where it
   wanted gold ink on cream it gets --olive on --olive-light, which is the
   same relationship at the site's contrast.
   ══════════════════════════════════════════════════════════════════════ */
/* An der Wurzel, nicht an .guide: die Karte laeuft seit js/site-map.js auf
   jeder Seite, und dort gibt es kein .guide-Raster. Standen sie weiter dort,
   fielen auf allen anderen Seiten Schatten, Linienfarbe und Grauton der
   Karte ersatzlos aus — unsichtbar genug, um lange nicht aufzufallen. */
:root {
  --g-rail: #B9C99B;
  --g-faint: #8C8C80;
  --g-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  --g-shadow-hover: 0 10px 22px rgba(0, 0, 0, 0.10);
}

.guide {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* Die Karte laeuft seit js/site-map.js auch ausserhalb des Guides — auf jeder
   Seite der Website, wo es kein .guide-Raster gibt. Was sie zum Zeichnen
   braucht, darf deshalb nicht daran haengen. */
.guide a, .g-map a { color: inherit; text-decoration: none; }
.guide, .g-map { overflow-wrap: anywhere; }

.guide svg.g-ic, .g-map svg.g-ic {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ── The map ──────────────────────────────────────────────────────── */
.g-map {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 14px 20px;
}

.g-map-h {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--olive);
  margin: 0 0 2px;
  padding: 0 8px;
}

.g-map-sub {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 14px;
  padding: 0 8px;
}

.g-map nav { display: flex; flex-direction: column; gap: 1px; }

.g-group {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--g-faint);
  margin: 16px 0 6px;
  padding: 0 8px;
}

.g-map a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--olive-dark);
  font-weight: 600;
}

.g-map a .g-ic { font-size: 15px; color: var(--olive); opacity: 0.75; }
.g-map a:hover { background: rgba(85, 107, 47, 0.10); }
.g-map a[aria-current="page"] { background: var(--olive); color: white; }
.g-map a[aria-current="page"] .g-ic { color: var(--gold); opacity: 1; }
/* Der Abschnitt der aktuellen Seite, der gerade im Bild steht. Leiser als die
   Seite selbst darueber: es ist eine Stelle in ihr, keine zweite Seite. */
.g-map a[aria-current="location"] { background: rgba(85, 107, 47, 0.13); }
.g-map a[aria-current="location"] .g-ic { opacity: 1; }
.g-map a.sub { margin-left: 14px; font-size: 13px; }
.g-map a.sub2 { margin-left: 30px; font-size: 12.5px; }
.g-map a.sub3 { margin-left: 46px; font-size: 12px; }
.g-map a.sub4 { margin-left: 60px; font-size: 12px; }
.g-map a.sub5 { margin-left: 74px; font-size: 11.5px; }
/* Sechs Ebenen gibt es nur an einer Stelle: der Baum der Feedback-Seite
   haengt in der Karte unter "Share Feedback" und damit eine Stufe tiefer
   als derselbe Baum unter dem Guide. */
.g-map a.sub6 { margin-left: 88px; font-size: 11.5px; }

/* The disclosure arrow lives inside the <a> so the row keeps its flex
   layout; its click handler stops the navigation the anchor would do. */
.g-tw {
  flex: 0 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin: 0 -2px 0 -4px;
  border-radius: 4px;
  transform: rotate(-90deg);
  transition: transform 0.16s ease, background 0.12s ease;
}
.g-tw.open { transform: rotate(0deg); }
.g-tw.empty { visibility: hidden; }
.g-tw:hover { background: rgba(85, 107, 47, 0.22); }
.g-tw .g-twi { width: 11px; height: 11px; opacity: 0.65; }
.g-map a[aria-current="page"] .g-twi { color: var(--gold); opacity: 1; }
.g-tw:focus-visible { outline: 2px solid var(--olive); outline-offset: 1px; }

/* ── Content column ───────────────────────────────────────────────── */
.g-col { min-width: 0; }

.g-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  min-height: 30px;
}

.g-crumbs {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--g-faint);
  flex-wrap: wrap;
  min-width: 0;
}

.g-crumbs a { font-weight: 650; color: var(--olive); }
.g-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.g-crumbs .sep { opacity: 0.5; }
.g-crumbs .now { font-weight: 750; color: var(--olive-dark); }

.g-menu { display: none; }

.g-body {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--g-shadow);
  padding: 30px 30px 34px;
}

/* ══ Blocks — mirroring explainer_blocks.dart ══════════════════════ */
.g-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin: 0 0 10px;
}

.g-h1 {
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--olive-dark);
  margin: 0 0 12px;
  text-wrap: balance;
}

.g-h1 .brand { color: var(--olive); }

.g-lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 63ch;
}

.g-stack { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }

/* Panel = ExplainerPanel */
.g-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 18px 16px 16px;
}

.g-pill {
  display: inline-block;
  background: var(--olive);
  color: white;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Verweis aus der Einleitung auf einen Block weiter unten. */
.g-jump {
  color: var(--olive);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--olive) 40%, transparent);
  cursor: pointer;
}
.g-jump:hover { border-bottom-color: var(--olive); }

/* Nach dem Sprung kurz aufleuchten, damit klar ist, wo man gelandet ist. */
@keyframes g-flash {
  from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--olive) 45%, transparent); }
  to   { box-shadow: 0 0 0 3px transparent; }
}
.g-flash { animation: g-flash 1.4s ease-out 1; }
@media (prefers-reduced-motion: reduce) { .g-flash { animation: none; } }

.g-panel-sub { font-size: 13px; color: var(--muted); margin: 10px 2px 0; line-height: 1.5; }
.g-panel-body { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }

/* Rail = ExplainerStep */
.g-rail { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
.g-rail-gutter { display: flex; flex-direction: column; align-items: center; width: 32px; }
.g-rail-line { width: 2px; flex: 1; background: var(--g-rail); min-height: 8px; }
.g-rail-line.blank { background: transparent; }

.g-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--olive);
  color: white;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 800;
  flex: none;
}

.g-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: white;
  padding: 12px 13px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: var(--g-shadow);
}

.g-card.tint { background: var(--olive-light); border-color: var(--g-rail); }

.g-disc {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--olive-light);
  color: var(--olive);
  display: grid;
  place-items: center;
  font-size: 18px;
  flex: none;
  border: 1px solid var(--border);
}

.g-card.tint .g-disc { background: white; }
.g-card-txt { min-width: 0; flex: 1; }

.g-card-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--olive-dark);
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.g-chip {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--g-rail);
  border-radius: 7px;
  padding: 2px 6px;
  color: var(--gold-dark);
}

.g-card-cap { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 4px; }

/* One arrow glyph in the sprite, pointed wherever it is used: down means
   "further down the flow" on the map, right means "go to that page". */
.g-chev { color: var(--olive); font-size: 17px; align-self: center; flex: none; }
.g-chev .g-ic { transform: rotate(-90deg); }

a.g-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
a.g-card:hover {
  border-color: var(--olive);
  transform: translateY(-2px);
  box-shadow: var(--g-shadow-hover);
}

/* Split node + section label */
.g-split {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}

.g-split-gutter { display: flex; flex-direction: column; align-items: center; width: 32px; }
.g-split-stub { width: 2px; height: 8px; background: var(--g-rail); }

.g-split-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--olive-light);
  border: 1.5px solid var(--g-rail);
}

.g-split-label { font-size: 12.5px; font-weight: 800; color: var(--olive); }

/* Fork = zwei parallele Straenge in einem Panel. auto-fit statt Medienabfrage:
   die Spalten fallen untereinander, sobald der Panelrumpf zu schmal wird —
   auch dann, wenn die Seitenleiste ihn schmal macht und nicht das Fenster. */
.g-fork { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 16px; }
.g-fork-arm { display: flex; flex-direction: column; gap: 10px; }
.g-fork-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-top: 9px;
  border-top: 2px solid var(--g-rail);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--olive);
}
.g-fork-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--olive-light);
  border: 1.5px solid var(--g-rail);
  flex: none;
}
.g-fork-body { display: flex; flex-direction: column; gap: 10px; }

.g-sect { display: flex; align-items: center; gap: 11px; margin: 6px 0 0; }

.g-sect .dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--olive-light);
  border: 1.5px solid var(--g-rail);
  display: grid;
  place-items: center;
  color: var(--olive);
  font-size: 14px;
  flex: none;
}

.g-sect span { font-size: 12.5px; font-weight: 800; color: var(--olive); letter-spacing: 0.02em; }

/* Screenshot mit Bildunterschrift — kein Gegenstueck in
   explainer_blocks.dart, wie schon `opts`. Zwei Formen aus derselben Auszeichnung:
   gestapelt als Vorgabe, zweispaltig sobald der umgebende g-stack .shots-side
   traegt. Das Hochformat wird gedeckelt, damit ein Telefonbild die Spalte nicht
   auffrisst; Querformat darf die Breite nehmen, die es braucht. */
.g-shot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 16px;
  margin: 0;
}

.g-shot-media { display: flex; justify-content: center; }

.g-shot img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--g-rail);
}

.g-shot.quer img { max-width: 420px; border-radius: 10px; }

.g-shot figcaption { margin-top: 14px; }
.g-shot-title { font-size: 14.5px; font-weight: 800; color: var(--olive-dark); line-height: 1.3; }
.g-shot-body  { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 5px; }

/* Hell und dunkel nebeneinander: zwei Aufnahmen desselben Schirms in einem
   Block, jede mit ihrem Etikett darueber. Die Bilder werden schmaler als das
   einzelne, damit das Paar in derselben Spalte bleibt; auf schmalen Schirmen
   teilen sie sich die Breite weiter, statt untereinander zu rutschen — der
   Vergleich ist der Zweck, und der geht beim Stapeln verloren. */
.g-shot-media.paar { gap: 16px; align-items: flex-start; }

.g-shot-halb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 1 200px;
}

.g-shot-halb img { max-width: 200px; }

.g-shot-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Im zweispaltigen Satz steht das Paar in der Bildspalte — die ist fuer ein
   Telefonbild gemacht, zwei passen nur nebeneinander, wenn sie schrumpfen. */
.shots-side .g-shot.paar { grid-template-columns: 260px minmax(0, 1fr); }
.shots-side .g-shot.paar .g-shot-halb { flex: 0 1 122px; }
.shots-side .g-shot.paar .g-shot-halb img { max-width: 122px; }

/* Zweispaltig: Bild links, Text rechts — die Form der Modus-Seiten. */
.shots-side .g-shot {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  column-gap: 20px;
}

.shots-side .g-shot.quer { grid-template-columns: 300px minmax(0, 1fr); }
.shots-side .g-shot figcaption { margin-top: 0; }

/* Auf schmalen Schirmen fallen beide Formen zusammen: der Text kommt zuerst,
   das Bild darunter — lesen vor schauen, wie auf der Website. */
@media (max-width: 620px) {
  .shots-side .g-shot { display: block; }
  .shots-side .g-shot figcaption { margin-top: 14px; }
}

/* Feature box = ExplainerFeatureBox */
.g-fbox {
  background: var(--olive-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 15px 14px;
}

.g-fbox-head { display: flex; gap: 11px; align-items: flex-start; }
.g-fbox-head .g-disc { background: white; }
.g-fbox-title { font-size: 14.5px; font-weight: 800; color: var(--olive-dark); line-height: 1.3; }
.g-fbox-body { font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 4px; }

.g-fbox-lines {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--g-rail);
}

.g-fline {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.g-fline .g-ic { color: var(--olive); font-size: 15px; margin-top: 2px; }
.g-fline b { font-weight: 800; color: var(--olive-dark); }

/* Note = ExplainerNote */
.g-note {
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--olive);
  border-radius: 12px;
  padding: 13px 15px;
}

.g-note-h {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--olive);
  display: flex;
  align-items: center;
  gap: 7px;
}

.g-note-b { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-top: 7px; }
.g-note-b b { color: var(--olive-dark); font-weight: 750; }

/* Node grid — the clickable "where to next" */
.g-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 11px; }
/* Eine Karte je Zeile. Erzwungen statt dem auto-fit ueberlassen: bei vier
   Karten setzt das Raster drei nebeneinander und laesst die vierte allein
   in der zweiten Zeile stehen. */
.g-grid.g-grid-eins { grid-template-columns: 1fr; }

.g-hero { margin-bottom: 22px; }

/* Kopf einer Seite: Text links, Wiedererkennungsbild rechts. */
.g-kopf { display: flex; gap: 24px; align-items: flex-start; }
.g-kopf-txt { flex: 1; min-width: 0; }

.g-marke {
  flex: none;
  width: 168px;
  display: block;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--g-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.g-marke:hover {
  border-color: var(--olive);
  transform: translateY(-2px);
  box-shadow: var(--g-shadow-hover);
}

.g-marke img { width: 100%; height: auto; display: block; }

/* Der Titel liegt als tq-card-Text auf dem Bild — dieselbe Mechanik wie
   auf den grossen Karten, nur mit festen Groessen statt cqw: bei 168px
   (mobil 96px) waere der mitskalierende Titel 13 bzw. 8px. Der Verlauf
   legt den Grund nach, den der gebrannte Scrim in dieser Groesse nicht
   mehr traegt. Die Subline bleibt weg — sie waere hier unlesbar, und die
   Seite sagt gleich darunter ohnehin, worum es geht. */
.g-marke.tq-card { --tq-t: 15px; }

.g-marke .tq-card-text {
  padding: 9px;
  background: linear-gradient(180deg,
      rgba(20, 22, 10, 0) 0%,
      rgba(20, 22, 10, 0.34) 42%,
      rgba(20, 22, 10, 0.86) 100%);
}

.g-marke .tq-card-body { padding-left: 8px; border-left-width: 2px; }

.g-marke .tq-t {
  letter-spacing: -0.005em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Karten mit Familien-Etikett: das Etikett steht ueber der Karte, die
   Zelle ist das Rasterkind. */
.tq-cell { display: flex; flex-direction: column; gap: 7px; }

.tq-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

@media (max-width: 620px) {
  .g-kopf { gap: 14px; }
  .g-marke { width: 96px; }
  .g-marke.tq-card { --tq-t: 11px; }
  .g-marke .tq-card-text { padding: 6px; }
  .g-marke .tq-card-body { padding-left: 6px; }
}

.g-next-h {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g-faint);
  margin: 34px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.g-next-h::after { content: ""; height: 1px; flex: 1; background: var(--border); }

/* ══ The principle map (home) ═════════════════════════════════════ */
/* Zwei Reihen, dann Spalte fuer Spalte gefuellt — auf dem Handy faellt
   es auf eine Spalte zusammen und die Lesereihenfolge bleibt dieselbe. */
.g-map3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  /* Die Luecke ist zugleich die Laenge der Verbindungslinie — beides aus
     einer Variablen, damit Linie und Abstand nie auseinanderlaufen. */
  --g-luecke: 30px;
  gap: var(--g-luecke);
}

.g-step { position: relative; }

/* Verbinder. Eigenes Element statt eines Pseudo-Elements an der Karte:
   .tq-card hat overflow:hidden und wuerde alles abschneiden, was aus ihr
   herausragt. Das Element selbst zeichnet die Linie, seine beiden
   Pseudo-Elemente den Rest — drei Flaechen, mehr braucht es nicht.

   Die Spitzen sind gefuellte Dreiecke aus Rahmenkanten und sitzen so,
   dass ihre Spitze genau die Kante der naechsten Karte beruehrt. */

/* ── nach unten, innerhalb einer Spalte ── */
.g-ab .g-verb {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -1px;
  width: 2px;
  height: calc(var(--g-luecke) - 7px);
  background: var(--g-rail);
}

.g-ab .g-verb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--olive);
}

/* ── in die naechste Spalte: rechts raus, hoch, wieder rein ──
   Der Kasten sitzt mit seiner Unterkante auf halber Hoehe der unteren
   Karte und ist genau eine Kartenhoehe plus eine Luecke hoch — seine
   Oberkante liegt damit auf halber Hoehe der oberen Karte nebenan.
   Unterkante und rechte Kante zeichnen den Weg. */
.g-rechts .g-verb {
  position: absolute;
  left: 100%;
  bottom: 50%;
  width: calc(var(--g-luecke) / 2);
  height: calc(100% + var(--g-luecke));
  border-bottom: 2px solid var(--g-rail);
  border-right: 2px solid var(--g-rail);
}

.g-rechts .g-verb::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  margin-top: -1px;
  width: calc(var(--g-luecke) / 2 - 7px);
  height: 2px;
  background: var(--g-rail);
}

.g-rechts .g-verb::after {
  content: "";
  position: absolute;
  left: calc(100% + var(--g-luecke) / 2 - 7px);
  top: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--olive);
}

@media (max-width: 760px) {
  /* minmax(0, 1fr), nicht 1fr: ein blankes 1fr bedeutet minmax(auto, 1fr),
     und die automatische Mindestbreite richtet sich nach dem Min-Content
     des Elements. Beim <img> faellt width:100% dabei auf die intrinsische
     Breite von 1600px zurueck — die Spalte wurde dadurch breiter als der
     Bildschirm und die Karte lief rechts aus dem Bild. */
  .g-map3 { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }

  /* Einspaltig gibt es keine naechste Spalte — aus dem Umweg wird
     eine gerade Linie nach unten, und die Kette liest sich durch. */
  .g-rechts .g-verb {
    left: 50%;
    top: 100%;
    bottom: auto;
    margin-left: -1px;
    width: 2px;
    height: calc(var(--g-luecke) - 7px);
    border: 0;
    background: var(--g-rail);
  }

  .g-rechts .g-verb::before { content: none; }

  .g-rechts .g-verb::after {
    left: 50%;
    top: 100%;
    margin: 0 0 0 -5px;
    border: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--olive);
  }

}

/* ── Weiter im selben Zweig ──────────────────────────────
   Der Zweig noch einmal unter dem Inhalt — hoch zur Elternseite, daneben die
   Geschwister. Bewusst keine eigene Formensprache: die Karten sind dieselben
   .g-card wie oben im Raster, damit am Fuss der Seite nichts Neues auftaucht,
   sondern das Bekannte wiederkehrt. Die Trennlinie darueber sagt, dass der
   Inhalt hier endet und nur noch der Weg weitergeht. */
.g-zweig {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--g-rail);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.g-zweig-auf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--olive-light);
  box-shadow: var(--g-shadow);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.g-zweig-auf:hover { border-color: var(--olive); box-shadow: var(--g-shadow-hover); }
.g-zweig-auf .g-disc { background: white; }
.g-zweig-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.g-zweig-k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--g-faint);
}

.g-zweig-t { font-size: 15px; font-weight: 750; color: var(--olive-dark); margin-top: 2px; }
.g-zweig-auf:hover .g-zweig-t { text-decoration: underline; text-underline-offset: 3px; }

/* Derselbe Pfeil, eine Vierteldrehung anders herum: hier geht es zurueck. */
.g-zweig-auf .g-chev.auf { margin-right: -2px; opacity: 0.75; }
.g-zweig-auf .g-chev.auf .g-ic { transform: rotate(90deg); }
.g-zweig-auf:hover .g-chev.auf { opacity: 1; }

/* Die Seite, auf der man gerade steht: dieselbe Karte, nur stumm. Gestrichelt
   statt durchgezogen, damit sie auch ohne Farbe als „nicht anklickbar“ lesbar
   bleibt — der Graugrad allein traegt das nicht. */
.g-card.jetzt {
  background: var(--olive-light);
  border-style: dashed;
  border-color: var(--g-rail);
  box-shadow: none;
}

.g-card.jetzt .g-disc { background: white; color: var(--g-faint); }
.g-card.jetzt .g-card-label,
.g-card.jetzt .g-card-cap { color: var(--g-faint); }
.g-card.jetzt .g-chip { color: var(--g-faint); border-color: var(--g-rail); }

/* ── Rueckmeldung zu dieser Seite ─────────────────────────────────────
   Bewusst leiser als der Download-Aufruf darunter: das ist ein Angebot,
   keine Aufforderung. Derselbe Kasten wie eine g-card, damit er sich in den
   Seitenfuss einfuegt, statt mit dem Banner um Aufmerksamkeit zu ringen. */
.g-fb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 13px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--olive-dark);
  text-decoration: none;
  transition: background 0.12s ease;
}

.g-fb:hover { background: var(--panel-inset); }
.g-fb:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.g-fb-txt { display: flex; flex-direction: column; min-width: 0; }
.g-fb-t { font-size: 15px; font-weight: 700; }
.g-fb-s { font-size: 13px; color: var(--muted); margin-top: 1px; }
.g-fb .g-chev { margin-left: auto; color: var(--olive); flex: none; }
.g-fb:hover .g-fb-t { text-decoration: underline; text-underline-offset: 3px; }

/* Stehen beide untereinander, braucht der zweite keinen vollen Abstand mehr. */
.g-fb + .g-cta { margin-top: 12px; }

/* ── Closing CTA ──────────────────────────────────────────────────── */
.g-cta {
  background:
    linear-gradient(rgba(58, 62, 22, 0.65), rgba(58, 62, 22, 0.70)),
    url("../assets/brand/tournaq-banner-1871.webp");
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.g-cta .m {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: block;
  flex: none;
}

.g-cta .t { font-size: 20px; font-weight: 700; color: var(--gold); letter-spacing: -0.01em; }
.g-cta .s { font-size: 13px; color: rgba(255, 255, 255, 0.72); margin-top: 2px; }
.g-cta .g-chev { margin-left: auto; color: var(--gold); }
.g-cta:hover .t { text-decoration: underline; text-underline-offset: 3px; }

/* ══ Settings table ═══════════════════════════════════════════════
   A setup page in the app is a grid of fields, so the guide shows it as
   a table: one row per field, with what the app itself says about it
   underneath. Three columns while there is room; below 620px the row
   stacks and the .g-o-k labels take over from the header row. */
.g-opts {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--g-shadow);
}

.g-opts-head {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--olive);
  background: var(--olive-light);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}

.g-opts-cols,
.g-opt {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.45fr) minmax(0, 0.8fr);
  gap: 2px 14px;
  padding: 12px 14px;
}

.g-opts-cols {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--g-faint);
  padding-bottom: 4px;
}

.g-opt { border-top: 1px solid var(--border); }

.g-o-name { font-size: 14px; font-weight: 750; color: var(--olive-dark); }
.g-o-what { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 3px; }
.g-o-val,
.g-o-def { font-size: 13px; line-height: 1.5; color: var(--text); }
.g-o-def { font-variant-numeric: tabular-nums; }

.g-o-when,
.g-o-help {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.55;
  margin-top: 8px;
}

.g-o-when { color: var(--olive-dark); }
.g-o-help { color: var(--muted); font-style: italic; }
.g-o-when svg,
.g-o-help svg { flex: none; margin-top: 3px; color: var(--g-faint); }

/* A cell may point at another page. The guide strips link styling globally,
   which would leave these indistinguishable from the text beside them. */
.g-opt a {
  color: var(--olive);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.g-opt a:hover { color: var(--olive-dark); }

/* The column name, carried on the cell for the stacked layout. */
.g-o-k { display: none; }

/* ══ Responsive ═══════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .g-opts-cols { display: none; }
  .g-opt { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .g-o-k {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--g-faint);
  }

  .g-forkline, .g-mergeline { width: 2px; border: 0; background: var(--g-rail); border-radius: 0; }
  .g-branches { grid-template-columns: 1fr; width: 100%; gap: 0; }
  .g-branch + .g-branch { margin-top: 22px; }
}

/* The map turns into a drawer well before the columns would crowd: at
   900px the 262px rail costs the content column more than it gives. */
@media (max-width: 900px) {
  .guide { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .g-map {
    position: fixed;
    inset: 0 auto 0 0;
    width: 288px;
    max-height: none;
    z-index: 60;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    padding: 20px 14px 40px;
    transform: translateX(-101%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
  }

  .g-map.open { transform: none; }

  .g-menu {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border);
    background: white;
    border-radius: 10px;
    padding: 7px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--olive-dark);
    cursor: pointer;
  }

  .g-menu .g-ic { font-size: 15px; color: var(--olive); }
  .g-scrim { position: fixed; inset: 0; background: rgba(26, 26, 26, 0.42); z-index: 59; }
  .g-body { padding: 24px 20px 28px; }
}

@media (max-width: 520px) {
  .g-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .g-map { transition: none; }
  a.g-card, a.g-node { transition: none; }
  a.g-card:hover, a.g-node:hover { transform: none; }
}