/* Gestaltung – gemeinsame Grundlage für Mikes Werkzeuge (Revenge: Ausguck, Logbuch, Enterhaken, Pilzlupe).
   Einzige Quelle für Farben, Schrift, Abstände, Ecken und Schatten. Die Apps lesen nur diese Variablen (--g-…).

   Fassung 2 (31.10.2026, Mike: „tob dich aus, wir sind nicht an Semrush gebunden … leicht abgerundete Ecken sind ok, es
   soll halt stimmig aussehen … schöne Menüs, schöne CtAs … modern, übersichtlich“):
   - Schrift Inter, mitgeliefert (schrift.css), statt der Systemschrift – auf PC und Pixel gleich.
   - Tinte statt Grau-Violett: Handlungsknöpfe in fast schwarzer Tinte (schwarze Segel), ein Meerblau als einzige
     Akzentfarbe für Links, Auswahl und Fokus, Status in Grün/Rot/Bernstein. Jede App hat dazu ein eigenes Erkennungs-
     zeichen in ihrer Farbe (Ausguck Meer, Logbuch Messing, Enterhaken Koralle) – nur im Zeichen, nie für Bedeutung.
   - Leicht gerundete Ecken (6/10/12 px), feine Linien, weiche Schatten nur für Schwebendes (Menüs, Fenster).
   - Hell und Dunkel aus einer Zeile je Farbe (light-dark()); der Farbmodus kommt aus color-scheme. Eine Fläche, die
     immer dunkel sein soll, setzt nur color-scheme: dark – alle Farben darin folgen.
   Kontraste nach WCAG 2 nachgerechnet (31.10.2026): Text ≥ 4,5:1, Linien und Zeichen ≥ 3:1, in beiden Themen, auf allen
   Flächen (Karte, Seitengrund, Seitenleiste, Hover, Auswahl). Pflege: Gestaltung\GESTALTUNG.md */

/* --- Farbmodus: Auto folgt dem System, „Hell“/„Dunkel“ aus dem Wechsler setzen data-theme (thema-frueh.js) --------- */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {
  /* Flächen */
  --g-hintergrund: light-dark(oklch(0.982 0.003 255), oklch(0.17 0.008 262));       /* Seitengrund */
  --g-seitenleiste: light-dark(oklch(0.968 0.004 255), oklch(0.155 0.008 262));
  --g-flaeche: light-dark(oklch(1 0 0), oklch(0.205 0.009 262));                    /* Karten, Tabellen, Felder */
  --g-flaeche-hover: light-dark(oklch(0.962 0.005 255), oklch(0.245 0.01 262));
  --g-flaeche-2: light-dark(oklch(0.945 0.006 255), oklch(0.26 0.011 262));         /* Schienen, gedrückte Knöpfe */
  --g-auswahl: light-dark(oklch(0.948 0.03 252), oklch(0.29 0.06 258));             /* gewählter Punkt, Markierung */
  --g-erhaben: light-dark(oklch(1 0 0), oklch(0.27 0.01 262));                      /* gewählter Punkt auf Schiene */
  /* Text */
  --g-text: light-dark(oklch(0.205 0.015 262), oklch(0.955 0.004 262));
  --g-text-2: light-dark(oklch(0.47 0.016 260), oklch(0.74 0.012 262));             /* ≥ 5,9:1 auf allen Flächen */
  --g-text-3: light-dark(oklch(0.6 0.012 260), oklch(0.6 0.012 262));               /* Platzhalter, Zeichen: ≥ 3:1 */
  --g-text-umgekehrt: light-dark(oklch(1 0 0), oklch(0.17 0.008 262));
  /* Linien */
  --g-rand: light-dark(oklch(0.25 0.02 262 / 0.14), oklch(1 0 0 / 0.12));
  --g-rand-leise: light-dark(oklch(0.25 0.02 262 / 0.08), oklch(1 0 0 / 0.07));
  --g-rand-feld: light-dark(oklch(0.62 0.012 260), oklch(0.56 0.012 262));          /* Rahmen von Eingabefeldern, ≥ 3:1 */
  /* Akzent (Meerblau) und Bedienung (Tinte) */
  --g-akzent: light-dark(oklch(0.52 0.17 258), oklch(0.74 0.12 252));               /* ≥ 4,8:1 als Text */
  --g-akzent-flaeche: light-dark(oklch(0.948 0.03 252), oklch(0.29 0.06 258));
  --g-akzent-voll: light-dark(oklch(0.52 0.17 258), oklch(0.56 0.15 255));          /* Fläche mit weißer Schrift, ≥ 4,6:1 */
  --g-knopf: light-dark(oklch(0.22 0.018 262), oklch(0.95 0.005 262));              /* Haupthandlung */
  --g-knopf-hover: light-dark(oklch(0.32 0.022 262), oklch(0.87 0.007 262));
  --g-fokus: 0 0 0 3px light-dark(oklch(0.52 0.17 258 / 0.25), oklch(0.74 0.12 252 / 0.35));
  /* Status: immer mit Zeichen und Wort, nie nur Farbe */
  --g-gut: light-dark(oklch(0.5 0.12 158), oklch(0.77 0.14 158));
  --g-schlecht: light-dark(oklch(0.54 0.19 27), oklch(0.72 0.16 25));
  --g-warnung: light-dark(oklch(0.53 0.13 62), oklch(0.8 0.13 75));
  --g-gut-flaeche: light-dark(oklch(0.962 0.035 158), oklch(0.27 0.045 158));
  --g-schlecht-flaeche: light-dark(oklch(0.962 0.022 20), oklch(0.27 0.05 25));
  --g-warnung-flaeche: light-dark(oklch(0.972 0.04 85), oklch(0.28 0.045 75));
  /* Diagramme */
  --g-serie-1: light-dark(oklch(0.52 0.17 258), oklch(0.74 0.12 252));
  --g-serie-2: light-dark(oklch(0.63 0.16 48), oklch(0.76 0.15 55));                 /* Google-Updates, ≥ 3:1 als Linie */
  --g-gitter: light-dark(oklch(0.25 0.02 262 / 0.07), oklch(1 0 0 / 0.07));
  --g-achse: light-dark(oklch(0.25 0.02 262 / 0.18), oklch(1 0 0 / 0.16));
  /* Erkennungszeichen der Apps (nur im Zeichen: Fläche getönt, Zeichen in der Farbe, ≥ 3:1) */
  --g-app-revenge: light-dark(oklch(0.25 0.02 262), oklch(0.9 0.01 262));
  --g-app-revenge-flaeche: light-dark(oklch(0.93 0.008 262), oklch(0.3 0.012 262));
  --g-app-ausguck: light-dark(oklch(0.5 0.11 222), oklch(0.8 0.1 215));
  --g-app-ausguck-flaeche: light-dark(oklch(0.94 0.035 215), oklch(0.31 0.06 222));
  --g-app-logbuch: light-dark(oklch(0.52 0.11 70), oklch(0.84 0.12 80));
  --g-app-logbuch-flaeche: light-dark(oklch(0.95 0.05 85), oklch(0.32 0.06 70));
  --g-app-enterhaken: light-dark(oklch(0.54 0.16 25), oklch(0.8 0.11 25));
  --g-app-enterhaken-flaeche: light-dark(oklch(0.95 0.03 25), oklch(0.32 0.07 25));
  /* Pilzlupe: Moos (01.11.2026; Zeichen 5,1–5,8:1 hell, 7,7–11,5:1 dunkel auf allen Flächen und der eigenen Tönung) */
  --g-app-pilzlupe: light-dark(oklch(0.5 0.11 125), oklch(0.82 0.12 125));
  --g-app-pilzlupe-flaeche: light-dark(oklch(0.95 0.035 125), oklch(0.31 0.05 125));
  /* Schatten: Karten liegen flach (Linie + Hauch), Schwebendes wirft echten Schatten */
  --g-schatten-farbe: light-dark(oklch(0.25 0.03 262 / 0.07), oklch(0 0 0 / 0.35));
  --g-schatten-klein: 0 1px 2px light-dark(oklch(0.25 0.03 262 / 0.07), oklch(0 0 0 / 0.3));
  --g-schatten-karte: 0 1px 2px light-dark(oklch(0.25 0.03 262 / 0.05), oklch(0 0 0 / 0.25)), 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 0.02));
  --g-schatten-fenster: 0 16px 40px -12px light-dark(oklch(0.25 0.04 262 / 0.22), oklch(0 0 0 / 0.6)),
                        0 4px 12px -4px light-dark(oklch(0.25 0.04 262 / 0.1), oklch(0 0 0 / 0.4));
  --g-schatten-knopf: inset 0 1px 0 light-dark(oklch(1 0 0 / 0.12), oklch(1 0 0 / 0.5)), 0 1px 2px light-dark(oklch(0.2 0.03 262 / 0.25), oklch(0 0 0 / 0.4));
  /* Form: leicht gerundet (Mike, 31.10.2026: „leichte abgerundete Ecken sind ok, es soll halt stimmig aussehen“);
     vorher 3/2/2 px (28.10.) und 8/6/4 px wie Semrush (25.10.) */
  --g-ecke: 10px;             /* Karten, Flächen */
  --g-ecke-bedien: 6px;       /* Knöpfe, Felder, Menüpunkte */
  --g-ecke-klein: 4px;        /* Kleinteile, Marken */
  --g-ecke-gross: 14px;       /* Fenster, Menüs, große Kacheln */
  --g-1: 4px; --g-2: 8px; --g-3: 12px; --g-4: 16px; --g-5: 20px; --g-6: 24px; --g-8: 32px; --g-10: 40px; --g-12: 48px;
  /* Schrift: Inter mitgeliefert (schrift.css); fehlt sie, die Systemschrift */
  --g-schrift: "Revenge Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --g-fs-1: 12px; --g-lh-1: 16px;
  --g-fs-2: 14px; --g-lh-2: 20px;   /* Fließtext */
  --g-fs-3: 16px; --g-lh-3: 24px;
  --g-fs-4: 20px; --g-lh-4: 28px;
  --g-fs-5: 24px; --g-lh-5: 32px;
  --g-fs-6: 32px; --g-lh-6: 40px;
  --g-fs-7: 40px; --g-lh-7: 48px;
  --g-dauer: .16s;            /* Übergänge */
}

/* --- Grundformen ------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* Platz für die Bildlaufleiste immer freihalten: sonst rückt die Seite seitlich, sobald eine Ansicht länger als das
   Fenster ist (Mike, 27.10.: „links und rechts springt es bei unterschiedlichen Tabs“) */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; scrollbar-color: var(--g-rand) transparent; }
body { margin: 0; background: var(--g-hintergrund); color: var(--g-text); font: 400 var(--g-fs-2)/var(--g-lh-2) var(--g-schrift);
  font-feature-settings: "cv05", "cv08";   /* l mit Fuß, I mit Serifen: Il1 auseinanderhalten */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Gleich breite Ziffern nur, wo Zahlen untereinander stehen: Inter macht damit auch den Bindestrich breit
   („Design - Runde“, gemessen 9,1 statt 6,4 px; Gestaltung 31.10.2026). Für eigene Zahlenspalten: Klasse .g-tnum */
.g-zahl, .g-tnum, kbd, time, input[type="date"], input[type="time"], input[type="number"] { font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--g-fs-5); line-height: var(--g-lh-5); letter-spacing: -0.02em; }
h2 { font-size: var(--g-fs-3); line-height: var(--g-lh-3); }
h3 { font-size: var(--g-fs-2); line-height: var(--g-lh-2); }
p { text-wrap: pretty; }
a { color: var(--g-akzent); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklch, currentColor 40%, transparent); transition: text-decoration-color var(--g-dauer); }
a:hover { text-decoration-color: currentColor; }
button, input, select, textarea { font: inherit; color: inherit; }
input::placeholder, textarea::placeholder { color: var(--g-text-3); opacity: 1; }
kbd { font: 500 11px/1 var(--g-schrift); padding: 3px 5px; border-radius: var(--g-ecke-klein); border: 1px solid var(--g-rand);
  border-bottom-width: 2px; background: var(--g-flaeche); color: var(--g-text-2); }
/* Fokusrahmen als outline: kein box-shadow einer Karte oder eines Knopfs kann ihn mehr überdecken (Test 28.10.2026) */
:focus-visible { outline: 2px solid var(--g-akzent); outline-offset: 2px; }
::selection { background: color-mix(in oklch, var(--g-akzent) 22%, transparent); }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--g-rand); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--g-text-3); }
::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* --- Rahmen: Seitenleiste links, Inhalt rechts ------------------------------------------------- */
.g-rahmen { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.g-seitenleiste { background: var(--g-seitenleiste); border-right: 1px solid var(--g-rand-leise); padding: var(--g-3) var(--g-3) var(--g-4);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent;
  display: flex; flex-direction: column; gap: var(--g-1); }
.g-seitenleiste:hover { scrollbar-color: var(--g-rand) transparent; }
.g-marke { display: flex; align-items: center; gap: var(--g-2); padding: var(--g-1) var(--g-1) var(--g-3); font-size: var(--g-fs-3); font-weight: 700; letter-spacing: -0.01em; }
/* Logo „Beneath Black Sails“ (Segelboot) inline: auf hellem Grund gefüllt, auf dunklem nur die Umrisse (Mike, 25.10.2026).
   Umrisse seit 28.10.2026 als Linien gleicher Dicke (Mike), Mast als eigene Linie. Dateien: Gestaltung\beneath-black-sails*.svg */
.g-logo { width: 30px; height: 24px; flex: none; color: var(--g-text); }
.g-logo .bbs-voll path { fill: currentColor; }
.g-logo .bbs-umriss { display: none; }
.g-logo .bbs-umriss path { fill: none; stroke: currentColor; stroke-width: 56; stroke-linejoin: round; stroke-linecap: round; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .g-logo .bbs-voll { display: none; }
  :root:where(:not([data-theme="light"])) .g-logo .bbs-umriss { display: inline; }
}
:root[data-theme="dark"] .g-logo .bbs-voll { display: none; }
:root[data-theme="dark"] .g-logo .bbs-umriss { display: inline; }
.g-marke-zeichen { width: 24px; height: 24px; border-radius: var(--g-ecke-bedien); background: var(--g-knopf); color: var(--g-text-umgekehrt);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; }

/* Navigation: Punkte mit Zeichen, gewählter Punkt hebt sich als helle Fläche mit Akzentzeichen ab */
.g-seitenleiste > nav { display: flex; flex-direction: column; gap: 1px; }
.g-navgruppe { display: flex; align-items: center; gap: var(--g-2); font-size: 11px; line-height: var(--g-lh-1); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--g-text-2); padding: var(--g-4) var(--g-2) 6px; }
.g-navpunkt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; border: 0; background: none; text-align: left; cursor: pointer;
  padding: 6px var(--g-2) 6px 10px; border-radius: var(--g-ecke-bedien); color: var(--g-text-2); font-size: var(--g-fs-2); line-height: var(--g-lh-2);
  font-weight: 500; text-decoration: none; position: relative; transition: background var(--g-dauer), color var(--g-dauer); }
.g-navpunkt > svg, .g-navpunkt .g-zeichen { width: 16px; height: 16px; flex: none; color: var(--g-text-3); transition: color var(--g-dauer); }
.g-navpunkt:hover { background: var(--g-flaeche-hover); color: var(--g-text); }
.g-navpunkt:hover > svg, .g-navpunkt:hover .g-zeichen { color: var(--g-text-2); }
.g-navpunkt[aria-current="page"] { background: var(--g-erhaben); color: var(--g-text); font-weight: 600;
  box-shadow: var(--g-schatten-klein), 0 0 0 1px var(--g-rand-leise); }
.g-navpunkt[aria-current="page"] > svg, .g-navpunkt[aria-current="page"] .g-zeichen { color: var(--g-akzent); }
.g-navpunkt .g-zahl, .g-zahl { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 600; line-height: 1; color: var(--g-text-2); background: var(--g-flaeche-2); }
.g-zahl.schlecht, .g-navpunkt .g-zahl.schlecht { color: var(--g-schlecht); background: var(--g-schlecht-flaeche); }
.g-inhalt { min-width: 0; padding: var(--g-6) var(--g-8) var(--g-10); }
.g-kopf { display: flex; flex-wrap: wrap; gap: var(--g-3) var(--g-6); align-items: flex-end; justify-content: space-between; margin-bottom: var(--g-6); }
.g-unterzeile { color: var(--g-text-2); margin: var(--g-1) 0 0; }
@media (max-width: 1100px) { .g-rahmen { grid-template-columns: 216px minmax(0, 1fr); } .g-inhalt { padding: var(--g-5) var(--g-5) var(--g-8); } }
@media (max-width: 760px) {
  .g-rahmen { grid-template-columns: minmax(0, 1fr); }
  .g-seitenleiste { position: sticky; top: 0; z-index: 20; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0;
    border-bottom: 1px solid var(--g-rand-leise); padding: var(--g-2) var(--g-3); background: color-mix(in oklch, var(--g-seitenleiste) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
  .g-seitenleiste > nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; width: 100%; gap: 2px; }
  .g-navgruppe { display: none; }
  .g-navpunkt { width: auto; white-space: nowrap; min-height: 36px; }
  .g-marke { padding: var(--g-1) var(--g-1); width: 100%; }
  .g-inhalt { padding: var(--g-4); }
}

/* --- Bausteine ---------------------------------------------------------------------------------- */
.g-karte { background: var(--g-flaeche); border: 1px solid var(--g-rand-leise); border-radius: var(--g-ecke); box-shadow: var(--g-schatten-karte); padding: var(--g-4); }

/* Knöpfe. Handlungsknöpfe in Großbuchstaben (Mike, 28.10.2026), mit Inter jetzt 12 px halbfett und etwas Laufweite.
   Haupthandlung in Tinte mit feinem Glanz oben; .zweit = Nebenhandlung (helle Fläche mit Rand), .leise = nur Schrift,
   .akzent = die eine wichtigste Handlung einer Ansicht in Meerblau, .gefahr = Löschen u. ä. */
.g-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--g-2); height: 34px; padding: 0 14px; white-space: nowrap;
  border-radius: var(--g-ecke-bedien); border: 1px solid transparent; background: var(--g-knopf); color: var(--g-text-umgekehrt); font-weight: 600; cursor: pointer;
  text-transform: uppercase; letter-spacing: .05em; font-size: var(--g-fs-1); line-height: 1; text-decoration: none; box-shadow: var(--g-schatten-knopf);
  transition: background var(--g-dauer), border-color var(--g-dauer), box-shadow var(--g-dauer), transform .08s; }
.g-knopf:hover { background: var(--g-knopf-hover); }
.g-knopf:active { transform: translateY(1px); }
.g-knopf:disabled, .g-knopf[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.g-knopf > svg { width: 16px; height: 16px; flex: none; margin-left: -2px; }
.g-knopf.zweit { background: var(--g-flaeche); color: var(--g-text); border-color: var(--g-rand); box-shadow: var(--g-schatten-klein); }
.g-knopf.zweit:hover { background: var(--g-flaeche-hover); border-color: color-mix(in oklch, var(--g-rand-feld) 60%, transparent); }
.g-knopf.leise { background: transparent; color: var(--g-text-2); box-shadow: none; }
.g-knopf.leise:hover { background: var(--g-flaeche-hover); color: var(--g-text); }
.g-knopf.akzent { background: var(--g-akzent-voll); color: oklch(1 0 0); }
.g-knopf.akzent:hover { background: color-mix(in oklch, var(--g-akzent-voll) 88%, black); }
.g-knopf.gefahr { background: var(--g-flaeche); color: var(--g-schlecht); border-color: color-mix(in oklch, var(--g-schlecht) 40%, transparent); box-shadow: var(--g-schatten-klein); }
.g-knopf.gefahr:hover { background: var(--g-schlecht-flaeche); }
.g-knopf.gross { height: 40px; padding: 0 var(--g-5); }
.g-knopf.klein { height: 28px; padding: 0 10px; font-size: 11px; }

.g-feld { height: 34px; padding: 0 10px; border: 1px solid var(--g-rand-feld); border-radius: var(--g-ecke-bedien); background: var(--g-flaeche); color: var(--g-text);
  transition: border-color var(--g-dauer), box-shadow var(--g-dauer); }
.g-feld:hover { border-color: var(--g-text-2); }
.g-feld:focus, .g-feld:focus-visible { outline: none; border-color: var(--g-akzent); box-shadow: var(--g-fokus); }
select.g-feld { padding-right: 30px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 11px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }

/* Umschalter: graue Schiene, gewählter Teil als erhabene helle Fläche */
.g-segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: calc(var(--g-ecke-bedien) + 3px); background: var(--g-flaeche-2);
  box-shadow: inset 0 0 0 1px var(--g-rand-leise); }
.g-segment button { border: 0; background: none; height: 28px; padding: 0 var(--g-3); border-radius: var(--g-ecke-bedien); color: var(--g-text-2); cursor: pointer;
  font-weight: 500; white-space: nowrap; transition: background var(--g-dauer), color var(--g-dauer); }
.g-segment button:hover { color: var(--g-text); }
.g-segment button[aria-pressed="true"] { background: var(--g-erhaben); color: var(--g-text); font-weight: 600; box-shadow: var(--g-schatten-klein), 0 0 0 1px var(--g-rand-leise); }
.g-gut { color: var(--g-gut); } .g-schlecht { color: var(--g-schlecht); } .g-warnung { color: var(--g-warnung); }

/* Marke (Pille) für Status und Zähler: .g-pille.gut / .schlecht / .warnung / .akzent */
.g-pille { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--g-fs-1); font-weight: 600;
  line-height: 1; white-space: nowrap; color: var(--g-text-2); background: var(--g-flaeche-2); }
.g-pille.gut { color: var(--g-gut); background: var(--g-gut-flaeche); }
.g-pille.schlecht { color: var(--g-schlecht); background: var(--g-schlecht-flaeche); }
.g-pille.warnung { color: var(--g-warnung); background: var(--g-warnung-flaeche); }
.g-pille.akzent { color: var(--g-akzent); background: var(--g-akzent-flaeche); }

/* Erkennungszeichen einer App: getönte Fläche, Zeichen in der App-Farbe (Wechsler, Startseite, Seitenleiste) */
.g-app-zeichen { --farbe: var(--g-app-revenge); --flaeche: var(--g-app-revenge-flaeche); width: 32px; height: 32px; flex: none; display: inline-grid; place-items: center;
  border-radius: var(--g-ecke-bedien); background: var(--flaeche); color: var(--farbe); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--farbe) 18%, transparent); }
.g-app-zeichen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g-app-zeichen[data-app="ausguck"] { --farbe: var(--g-app-ausguck); --flaeche: var(--g-app-ausguck-flaeche); }
.g-app-zeichen[data-app="logbuch"] { --farbe: var(--g-app-logbuch); --flaeche: var(--g-app-logbuch-flaeche); }
.g-app-zeichen[data-app="enterhaken"] { --farbe: var(--g-app-enterhaken); --flaeche: var(--g-app-enterhaken-flaeche); }
.g-app-zeichen[data-app="pilzlupe"] { --farbe: var(--g-app-pilzlupe); --flaeche: var(--g-app-pilzlupe-flaeche); }
.g-app-zeichen.gross { width: 44px; height: 44px; border-radius: var(--g-ecke); }
.g-app-zeichen.gross svg { width: 22px; height: 22px; }

/* Name der App (Revenge-Wechsler, leiste.js): Höhe von Anfang an reservieren, sonst rutscht beim Laden alles um 16 px (30.10.2026) */
[data-revenge-marke] { display: inline-flex; align-items: center; min-height: 40px; margin-top: 0; margin-bottom: 0; }

/* --- Ablauf in Schritten: oben die Schritte (✓ erledigt, jetzt, offen), je Schritt eine Frage, unten Zurück / Weiter.
   Vorbild Material-Eingang im Ausguck (Mike, 31.10.2026: „ein Prozess wie ein Checkout, man kann vor und zurück“) ------ */
.g-schritte { display: flex; gap: var(--g-1); list-style: none; margin: 0; padding: 0; }
.g-schritte li { flex: 1 1 0; min-width: 0; }
.g-schritte button { width: 100%; display: flex; align-items: center; gap: var(--g-2); padding: 10px var(--g-2); border: 0; border-bottom: 2px solid var(--g-rand-leise);
  background: none; color: var(--g-text-2); text-align: left; cursor: pointer; white-space: nowrap; border-radius: var(--g-ecke-bedien) var(--g-ecke-bedien) 0 0;
  transition: background var(--g-dauer), border-color var(--g-dauer); }
.g-schritte button:disabled { cursor: default; }
.g-schritte button:not(:disabled):hover { background: var(--g-flaeche-hover); }
.g-schritte .nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--g-flaeche-2); font-size: var(--g-fs-1); font-weight: 600; flex: none; }
.g-schritte .name { overflow: hidden; text-overflow: ellipsis; }
.g-schritte .aktiv button { border-color: var(--g-akzent); color: var(--g-text); font-weight: 600; }
.g-schritte .aktiv .nr { background: var(--g-akzent-voll); color: oklch(1 0 0); }
.g-schritte .fertig button { border-color: var(--g-gut); color: var(--g-text); }
.g-schritte .fertig .nr { background: var(--g-gut-flaeche); color: var(--g-gut); }
.g-schritt-frage { margin: 0 0 var(--g-3); font-size: var(--g-fs-3); line-height: var(--g-lh-3); font-weight: 600; }
.g-schritt-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--g-3); border-top: 1px solid var(--g-rand-leise); padding-top: var(--g-3); }
.g-schritt-fuss > :only-child { margin-left: auto; }