/* Farbsystem „Papier & Glut“ – die EINZIGE Stelle mit Farbwerten.
   Jede Farbe gibt es als Hex (--x) und als RGB-Tripel (--x-rgb) für Deckkraft: rgb(var(--x-rgb) / 0.7).
   Tailwind nutzt dieselben Tokens (tools/tailwind/tailwind.config.js). Wird auf allen Seiten vor dem
   seiteneigenen <style> geladen. */
:root {
  /* Flächen */
  --paper: #F7F3ED;        --paper-rgb: 247 243 237;       /* Seitenhintergrund */
  --card: #FFFDF9;         --card-rgb: 255 253 249;        /* Karten, erhöhte Blöcke; Text auf --ink */
  --sand: #EFE7DC;         --sand-rgb: 239 231 220;        /* abwechselnde Sektionen */
  --apricot: #FBE3D0;      --apricot-rgb: 251 227 208;     /* Tönung, höchstens eine Fläche pro Seite */
  /* Text */
  --ink: #1F1B16;          --ink-rgb: 31 27 22;            /* Haupttext, Füllung Primär-Button */
  --ink-soft: #6B635A;     --ink-soft-rgb: 107 99 90;      /* Nebentext (≥ 4,7:1 auf allen Flächen) */
  /* Linien – nie für Text */
  --line: #D9D0C4;         --line-rgb: 217 208 196;        /* Trenner, dekorative Rahmen */
  --line-strong: #8A8176;  --line-strong-rgb: 138 129 118; /* Formularfelder, UI-Grenzen (≥ 3:1) */
  /* Akzent: GENAU EIN Orange (Block 4g, Entscheidung Jakob – keine Kontraststufen). Für Text, Links, Icons,
     Punkte, Badges, Button-Füllungen, Rahmen, Hover-Umrisse, Tab-Anzeige, Fokusring und Markierung.
     Text auf oranger Fläche immer in --ink (4,8:1), nie in --card. */
  --accent: #E8590C;       --accent-rgb: 232 89 12;

  /* Abgeleitet (keine eigenen Farben): weiche Schatten aus --ink */
  --shadow-sm: 0 1px 2px rgb(var(--ink-rgb) / 0.06), 0 2px 8px rgb(var(--ink-rgb) / 0.05);
  --shadow-md: 0 2px 4px rgb(var(--ink-rgb) / 0.05), 0 12px 32px rgb(var(--ink-rgb) / 0.08);
  --shadow-lg: 0 4px 8px rgb(var(--ink-rgb) / 0.05), 0 24px 56px rgb(var(--ink-rgb) / 0.12);
  /* schwebende Navigationspille: etwas kräftiger als Karten, damit sie sich vom hellen Grund abhebt */
  --shadow-float: 0 2px 6px rgb(var(--ink-rgb) / 0.06), 0 14px 40px rgb(var(--ink-rgb) / 0.14);

  /* Hover-Umriss nicht klickbarer Karten (Block 4b): der eigene 1px-Rahmen wird orange */
  --ring-outer: var(--accent);
  /* Hover von Buttons: anheben + dezenter oranger Schein darunter (ersetzt die 2px-Ringe) */
  --glow: 0 10px 18px -10px rgb(var(--accent-rgb) / 0.55), 0 3px 8px -4px rgb(var(--accent-rgb) / 0.25);
  --lift: -2px;
  /* Ruhige Bewegung (Block 6d): Werte des Tab-Umschalters im Kontaktbereich, gemeinsam für Tabs und FAQ */
  --motion-slow: .8s;
  --ease-smooth: cubic-bezier(.16,1,.3,1);

  /* Höhe der fixierten Leiste (Sprungziele landen darunter) */
  --nav-h: 73px;
}

::selection { background: var(--accent); color: var(--ink); }

html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); }

/* Fokusring für JEDES bedienbare Element: 2px --accent, 2px Abstand, nur bei Tastatur-Fokus */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Logo (Block 5): Cursor in Tinte, drei Punkte in Orange. Schriftzug „Clikrate“ (Syne, Tinte) mit orangem i-Punkt:
   Das echte i bleibt stehen, nur der Teil oberhalb der Lücke zwischen Punkt (ab 0,60em über der Grundlinie) und
   Stamm (bis 0,50em) wird orange. Die Grenze liegt bei 0,376em ab Oberkante der Textbox (Syne: 0,925em über der
   Grundlinie) – gemessen, gilt für jede Größe. Form, Lage und Laufweite bleiben exakt das Original; Text bleibt „Clikrate“. */
.logo-cursor { fill: var(--ink); }
.logo-dot { fill: var(--accent); }
.logo-i {
  background: linear-gradient(var(--accent) 0 .3763em, var(--ink) .3763em);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}