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

   Herkunft: helles Thema nach Semrush „Intergalactic“ (MIT-Lizenz), Werte aus @semcore/theme 2.4.0, lib/light.css,
   gelesen 25.10.2026 (unpkg.com). Abweichungen davon sind markiert. Das dunkle Thema ist abgeleitet (Semrush liefert in
   2.4.0 kein eigenes), Kontraste nach WCAG 2 nachgerechnet: Text ≥ 4,5:1, Linien und Zeichen ≥ 3:1, in beiden Themen.
   Muster der Oberfläche (Seitenleiste links, helle Flächen auf leicht grauem Grund, eine Akzentfarbe, 14 px Text)
   nach Semrush, Sistrix, Asana und ClickUp. Pflege: Gestaltung\GESTALTUNG.md */

:root {
  color-scheme: light;
  /* Flächen */
  --g-hintergrund: oklch(0.98 0.004 232);          /* Semrush bg-secondary-neutral: Seitengrund */
  --g-flaeche: oklch(1 0 0);                       /* bg-primary-neutral: Karten, Tabellen */
  --g-flaeche-hover: oklch(0.97 0.005 232.2);      /* bg-primary-neutral-hover */
  --g-flaeche-2: oklch(0.955 0.006 240);           /* abgeleitet: Leisten, gedrückte Knöpfe */
  --g-seitenleiste: oklch(0.975 0.004 240);        /* abgeleitet */
  --g-auswahl: oklch(0.959 0.021 267.8);           /* bg-secondary-info: gewählter Navigationspunkt */
  /* Text */
  --g-text: oklch(0.23 0.009 245);                 /* text-primary, 16,9:1 auf Weiß */
  --g-text-2: oklch(0.182 0.045 244.8 / 0.593);    /* text-secondary, 4,8:1 */
  --g-text-umgekehrt: oklch(1 0 0);
  /* Linien */
  --g-rand: oklch(0.277 0.066 242.6 / 0.18);       /* border-primary */
  --g-rand-leise: oklch(0.324 0.077 242.1 / 0.079);/* border-secondary */
  --g-rand-feld: oklch(0.55 0.02 245);             /* abgeleitet: Rahmen von Eingabefeldern, ≥ 3:1 */
  /* Akzent und Bedienung */
  --g-akzent: oklch(0.55 0.168 278.2);             /* Semrush chart-palette-order-2, etwas dunkler für 5,1:1 als Text */
  --g-akzent-flaeche: oklch(0.959 0.021 267.8);
  --g-knopf: oklch(0.23 0.009 245);                /* control-primary-info */
  --g-knopf-hover: oklch(0.32 0.012 245);          /* control-primary-info-hover */
  --g-fokus: 0 0 0 3px oklch(0.55 0.168 278.2 / 0.45);   /* wie keyboard-focus, im Akzentton */
  /* Status: immer mit Zeichen und Wort, nie nur Farbe */
  --g-gut: oklch(0.52 0.13 170);                   /* text-success, etwas dunkler für ≥ 4,5:1 */
  --g-schlecht: oklch(0.55 0.209 26.8);            /* text-critical */
  --g-warnung: oklch(0.56 0.15 60);                /* abgeleitet, Semrush hat keinen Warnungstext */
  --g-gut-flaeche: oklch(0.96 0.057 179.7);        /* bg-secondary-success */
  --g-schlecht-flaeche: oklch(0.958 0.029 5.7);    /* bg-secondary-critical */
  --g-warnung-flaeche: oklch(0.979 0.03 88.1);     /* bg-secondary-warning */
  /* Diagramme */
  --g-serie-1: oklch(0.55 0.168 278.2);
  --g-serie-2: oklch(0.64 0.18 50.5);              /* Google-Updates, 3,6:1 als Linie */
  --g-gitter: oklch(0.324 0.077 242.1 / 0.079);
  --g-achse: oklch(0.277 0.066 242.6 / 0.18);
  /* Schatten */
  --g-schatten-karte: 0 0 1px 0 oklch(0.324 0.077 242.1 / 0.079), 0 1px 3px 0 oklch(0.324 0.077 242.1 / 0.079);   /* box-shadow-card */
  --g-schatten-fenster: 1px 1px 10px 0 oklch(0.324 0.077 242.1 / 0.12);   /* box-shadow-popper, etwas kräftiger */
  /* Form (Semrush) */
  /* Ecken fast eckig (Mike, 28.10.2026: „nicht ganz eckig, aber nah dran“); vorher 8/6/4 px wie bei Semrush */
  --g-ecke: 3px;              /* Flächen, Karten */
  --g-ecke-bedien: 2px;       /* Knöpfe, Felder */
  --g-ecke-klein: 2px;        /* Kleinteile */
  --g-1: 4px; --g-2: 8px; --g-3: 12px; --g-4: 16px; --g-5: 20px; --g-6: 24px; --g-8: 32px;
  /* Schrift: Inter, wenn installiert, sonst die Systemschrift (kein Download, Mike 25.10.2026) */
  --g-schrift: 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: 24px;
  --g-fs-5: 24px; --g-lh-5: 28px;
  --g-fs-6: 32px; --g-lh-6: 40px;
}

/* Dunkel: folgt der Systemeinstellung; abgeleitet, Kontraste nachgerechnet */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --g-hintergrund: oklch(0.17 0.008 250); --g-flaeche: oklch(0.215 0.009 250); --g-flaeche-hover: oklch(0.25 0.01 250);
    --g-flaeche-2: oklch(0.26 0.01 250); --g-seitenleiste: oklch(0.19 0.009 250); --g-auswahl: oklch(0.3 0.05 278);
    --g-text: oklch(0.95 0.005 245); --g-text-2: oklch(0.78 0.012 245); --g-text-umgekehrt: oklch(0.17 0.008 250);
    --g-rand: oklch(1 0 0 / 0.13); --g-rand-leise: oklch(1 0 0 / 0.07); --g-rand-feld: oklch(0.62 0.015 245);
    --g-akzent: oklch(0.74 0.13 278); --g-akzent-flaeche: oklch(0.3 0.05 278);
    --g-knopf: oklch(0.95 0.005 245); --g-knopf-hover: oklch(0.85 0.008 245); --g-fokus: 0 0 0 3px oklch(0.74 0.13 278 / 0.55);
    --g-gut: oklch(0.76 0.13 170); --g-schlecht: oklch(0.72 0.16 25); --g-warnung: oklch(0.8 0.14 70);
    --g-gut-flaeche: oklch(0.28 0.05 170); --g-schlecht-flaeche: oklch(0.28 0.06 25); --g-warnung-flaeche: oklch(0.29 0.05 70);
    --g-serie-1: oklch(0.74 0.13 278); --g-serie-2: oklch(0.78 0.15 55);
    --g-gitter: oklch(1 0 0 / 0.07); --g-achse: oklch(1 0 0 / 0.16);
    --g-schatten-karte: 0 0 0 1px oklch(1 0 0 / 0.06); --g-schatten-fenster: 0 8px 24px oklch(0 0 0 / 0.5);
  }
}
/* Von Hand gewählt (Knopf in der Seitenleiste): gilt unabhängig von der Systemeinstellung */
:root[data-theme="dark"] {
    color-scheme: dark;
    --g-hintergrund: oklch(0.17 0.008 250); --g-flaeche: oklch(0.215 0.009 250); --g-flaeche-hover: oklch(0.25 0.01 250);
    --g-flaeche-2: oklch(0.26 0.01 250); --g-seitenleiste: oklch(0.19 0.009 250); --g-auswahl: oklch(0.3 0.05 278);
    --g-text: oklch(0.95 0.005 245); --g-text-2: oklch(0.78 0.012 245); --g-text-umgekehrt: oklch(0.17 0.008 250);
    --g-rand: oklch(1 0 0 / 0.13); --g-rand-leise: oklch(1 0 0 / 0.07); --g-rand-feld: oklch(0.62 0.015 245);
    --g-akzent: oklch(0.74 0.13 278); --g-akzent-flaeche: oklch(0.3 0.05 278);
    --g-knopf: oklch(0.95 0.005 245); --g-knopf-hover: oklch(0.85 0.008 245); --g-fokus: 0 0 0 3px oklch(0.74 0.13 278 / 0.55);
    --g-gut: oklch(0.76 0.13 170); --g-schlecht: oklch(0.72 0.16 25); --g-warnung: oklch(0.8 0.14 70);
    --g-gut-flaeche: oklch(0.28 0.05 170); --g-schlecht-flaeche: oklch(0.28 0.06 25); --g-warnung-flaeche: oklch(0.29 0.05 70);
    --g-serie-1: oklch(0.74 0.13 278); --g-serie-2: oklch(0.78 0.15 55);
    --g-gitter: oklch(1 0 0 / 0.07); --g-achse: oklch(1 0 0 / 0.16);
    --g-schatten-karte: 0 0 0 1px oklch(1 0 0 / 0.06); --g-schatten-fenster: 0 8px 24px oklch(0 0 0 / 0.5);
}

/* --- 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-feld) 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-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--g-fs-5); line-height: var(--g-lh-5); }
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); }
a { color: var(--g-akzent); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
/* 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: var(--g-akzent-flaeche); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* --- Rahmen: Seitenleiste links, Inhalt rechts (Semrush, Asana, ClickUp) ----------------------- */
.g-rahmen { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.g-seitenleiste { background: var(--g-seitenleiste); border-right: 1px solid var(--g-rand-leise); padding: var(--g-4) var(--g-3);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--g-rand) transparent; display: flex; flex-direction: column; gap: var(--g-1); }
.g-marke { display: flex; align-items: center; gap: var(--g-2); padding: var(--g-1) var(--g-2) var(--g-4); font-size: var(--g-fs-3); font-weight: 700; }
/* 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; }
.g-seitenleiste > nav { display: flex; flex-direction: column; gap: 2px; }
.g-navgruppe { font-size: var(--g-fs-1); line-height: var(--g-lh-1); font-weight: 600; color: var(--g-text-2); padding: var(--g-4) var(--g-2) var(--g-1); }
.g-navpunkt { display: flex; align-items: center; gap: var(--g-2); width: 100%; border: 0; background: none; text-align: left; cursor: pointer;
  padding: 6px var(--g-2); border-radius: var(--g-ecke-bedien); color: var(--g-text); font-size: var(--g-fs-2); line-height: var(--g-lh-2); }
.g-navpunkt:hover { background: var(--g-flaeche-hover); }
.g-navpunkt[aria-current="page"] { background: var(--g-auswahl); font-weight: 600; }
.g-navpunkt .g-zahl { margin-left: auto; font-size: var(--g-fs-1); color: var(--g-text-2); }
.g-inhalt { min-width: 0; padding: var(--g-6) var(--g-8) var(--g-8); }
.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-5); }
.g-unterzeile { color: var(--g-text-2); margin: var(--g-1) 0 0; }
@media (max-width: 1100px) { .g-rahmen { grid-template-columns: 200px 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: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--g-rand-leise); padding: var(--g-2) var(--g-3); }
  .g-seitenleiste > nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .g-navgruppe { display: none; }
  .g-navpunkt { width: auto; white-space: nowrap; }
  .g-marke { padding: var(--g-1) var(--g-2); 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); }
.g-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--g-2); height: 32px; padding: 0 var(--g-3);
  border-radius: var(--g-ecke-bedien); border: 1px solid transparent; background: var(--g-knopf); color: var(--g-text-umgekehrt); font-weight: 600; cursor: pointer;
  /* Handlungsknöpfe in Großbuchstaben (Mike, 28.10.2026) */
  text-transform: uppercase; letter-spacing: .05em; font-size: var(--g-fs-1); }
.g-knopf:hover { background: var(--g-knopf-hover); }
.g-knopf.zweit { background: var(--g-flaeche); color: var(--g-text); border-color: var(--g-rand); }
.g-knopf.zweit:hover { background: var(--g-flaeche-hover); }
.g-feld { height: 32px; padding: 0 var(--g-2); border: 1px solid var(--g-rand-feld); border-radius: var(--g-ecke-bedien); background: var(--g-flaeche); color: var(--g-text); }
.g-segment { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--g-ecke-bedien); background: var(--g-flaeche-2); }
.g-segment button { border: 0; background: none; height: 28px; padding: 0 var(--g-3); border-radius: var(--g-ecke-klein); color: var(--g-text-2); cursor: pointer; }
.g-segment button[aria-pressed="true"] { background: var(--g-flaeche); color: var(--g-text); font-weight: 600; box-shadow: var(--g-schatten-karte); }
.g-gut { color: var(--g-gut); } .g-schlecht { color: var(--g-schlecht); } .g-warnung { color: var(--g-warnung); }