/* Grundgestaltung PromptSteuer Kontiero im Leitsystem von fiege.ai:
   Linien statt Schatten, Public Sans + IBM Plex Mono, Blau für Aktionen, Gelb nur für Marke, Position und Fokus.
   Standard ist hell; dunkel nur, wenn der Schalter es setzt (data-theme auf <html>). */
@font-face{font-family:"Public Sans";src:url(/schrift/public-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/schrift/public-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Public Sans";src:url(/schrift/public-sans-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/schrift/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/schrift/plex-mono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root {
  /* fiege.ai */
  --bg: #FFFFFF; --surface: #F4F5F7; --ink: #101317; --ink-2: #3C434C; --muted: #646B75;
  --line: #DCE0E6; --line-stark: #101317; --blau: #0F4C9A; --blau-ink: #FFFFFF; --gelb: #FFD500;
  --sans: "Public Sans", system-ui, -apple-system, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* Ampel (gedämpft, nie das Markengelb) */
  --gruen: #1D7A46; --ampel-gelb: #B26A00; --rot: #B42318;
  /* Namen, die Oberfläche, Hilfe und Rundgang verwenden */
  --grund: var(--bg); --flaeche: var(--bg); --text: var(--ink); --leise: var(--muted); --linie: var(--line);
  --akzent: var(--blau); --akzent-text: var(--blau-ink); --gelb-ampel: var(--ampel-gelb);
  --schleier: rgba(16, 19, 23, .62); --schatten: none; --rund: 3px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0E1115; --surface: #161A20; --ink: #E9ECF0; --ink-2: #C2C8D0; --muted: #949BA5;
  --line: #272D36; --line-stark: #4A525D; --blau: #74A6EA; --blau-ink: #0E1115;
  --gruen: #5CC28A; --ampel-gelb: #E2B04A; --rot: #F08B80; --schleier: rgba(0, 0, 0, .7);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.55; font-synthesis: none; }
a { color: var(--blau); text-underline-offset: .18em; text-decoration-thickness: .06em; }
::selection { background: var(--gelb); color: #101317; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; border-radius: 2px; }
button, select, input, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }

/* Knöpfe: Blau = Aktion, leise = Umrandung */
.knopf { background: var(--blau); color: var(--blau-ink); border: 1px solid var(--blau); border-radius: var(--rund); padding: .5em 1.05em; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.knopf:hover { filter: brightness(1.08); }
.knopf.leise { background: transparent; color: var(--ink); border-color: var(--line); font-weight: 400; }
.knopf.leise:hover { border-color: var(--line-stark); filter: none; }
.knopf.dunkel { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.schalter { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; background: none; border: 1px solid var(--line); color: var(--muted); padding: .3rem .6rem; cursor: pointer; border-radius: 2px; }
.schalter:hover { border-color: var(--line-stark); color: var(--ink); }

/* Marke mit gelbem Quadrat */
.marke { font-weight: 700; letter-spacing: -.02em; color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; white-space: nowrap; }
.marke::after { content: ""; width: .45rem; height: .45rem; background: var(--gelb); margin-left: .45rem; align-self: center; }
.kennung { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---- Einführungs-Overlay ---- */
.rg-schleier { position: fixed; inset: 0; background: var(--schleier); z-index: 1000; }
.rg-licht { position: fixed; z-index: 1001; border-radius: 3px; box-shadow: 0 0 0 9999px var(--schleier); pointer-events: none; transition: all .25s ease; outline: 3px solid var(--gelb); }
.rg-blase { position: fixed; z-index: 1002; background: var(--bg); color: var(--ink); border: 2px solid var(--line-stark); border-radius: 3px; padding: 18px 20px 14px; width: min(380px, calc(100vw - 32px)); transition: top .25s ease, left .25s ease; }
.rg-blase p { margin: 0 0 14px; }
.rg-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rg-fuss .rg-zaehler { color: var(--muted); font-family: var(--mono); font-size: .76rem; margin-right: auto; }
.rg-punkte { display: flex; gap: 5px; margin-bottom: 12px; }
.rg-punkte span { width: 14px; height: 3px; background: var(--line); }
.rg-punkte span.an { background: var(--gelb); }
@media (prefers-reduced-motion: reduce) { .rg-licht, .rg-blase { transition: none; } }