/* ══════════════════════════════════════════════════════════════════════════
   POSTD · PLAKAT — Tokens. Einzige Quelle der Wahrheit für Editor und Website.
   Basis: Creative Direction 1A, Tiefenfassung v2 (30.07.2026).
   Nicht getokent: Post-Rendering auf dem Canvas (drawFull) + IG-Mockup (.pv-*).
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Vier Farbrollen, keine fünfte (§04) ── */
  --paper:#FFFFFF;              /* Grund            60 % */
  --loud:#FF4A00;               /* Fläche, Kachel   30 % */
  --ink:#111110;                /* Schrift, Zeichen  8 %  · 19,3:1 auf paper */
  --bone:#EDECE8;               /* Panels            2 % */

  /* ── Akzentskala ──
     Regel für die ganze Skala: Schrift auf einer Akzentfläche ist IMMER --ink.
     Weiß auf Orange erreicht rechnerisch nie 4,5:1 — der rote Vollkanal allein
     bringt schon zuviel Leuchtdichte mit. Ein Abdunkeln auf #D93F00 hielte zwar
     Weiß bei 4,51, würde aber die dunkle Variante auf 4,19 drücken und die
     Kachelflächen der Startseite verändern. Dunkle Schrift auf unverändertem
     #FF4A00 ist der einzige Weg, der Marke und Norm zugleich hält (5,61:1).
     Folge davon: Zustände werden nach oben HELLER, nicht dunkler. Sonst sinkt
     der Kontrast beim Anfassen statt zu steigen. */
  --acc-100:#FFF1EB;
  --acc-200:#FFD9C9;
  --acc-300:#FFB294;            /* Aktiv · --ink darauf 10,8:1 */
  --acc-400:#FF7A4A;            /* Hover · --ink darauf 7,3:1 */
  --acc-500:#FF4A00;            /* = --loud, Basis · --ink darauf 5,6:1 */
  --acc-600:#E03F00;            /* nur Fläche, --ink darauf nur 4,4:1 */
  --acc-700:#C43A00;            /* nur Fläche, für Text zu dunkel */
  --acc-800:#B83600;            /* Akzent-TEXT · 5,9:1 auf paper, 5,0:1 auf bone */

  /* Fokusring. --loud hielt gegen --bone nur 2,85:1 und verfehlte die 3:1 für
     nicht-textliche Kontraste. Dieser Ton ist mit bloßem Auge nicht von --loud
     zu unterscheiden, hält aber überall: bone 3,2 · paper 3,8 · ink 5,0. */
  --focus-col:#F04500;

  /* ── Tinte abgestuft ── */
  --ink-2:#57514B;              /* gedämpfter Text */
  --ink-3:#6E6862;              /* Mono-Label */
  --hair:#E4E1DD;               /* Haarlinie */
  --edge:#C4BEB7;               /* Bone-Kante, gestrichelte Ränder */

  /* ── Signale: eine Fehlerfarbe im ganzen System ── */
  --danger:var(--acc-800);         /* Text, deshalb die Textstufe */
  --danger-bg:var(--acc-100);
  --ok:#2E6B4F;

  /* ── Schrift (§05): ein Display-Grad + ein Mono-Label pro Fläche ── */
  --font-display:'Archivo', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* ── Radien: „rund bedient, eckig gezeigt" (§01) ── */
  --r-control:999px;            /* alles Anfassbare */
  --r-content:0px;              /* alles Inhaltliche */
  --r-panel:20px;               /* nur Panels */

  /* ── Kanten statt Schatten. Tiefe entsteht durch Linie. ── */
  --b-block:3px;                /* Blockkante */
  --b-inner:2px;                /* Innenkante */
  --b-hair:1px;                 /* Haarlinie */

  /* ── Senkrechter Takt, Grundmaß 8. Kein Wert außerhalb dieser Stufen. ── */
  --sp-1:8px;  --sp-2:12px; --sp-3:20px; --sp-4:24px;
  --sp-5:32px; --sp-6:40px; --sp-7:64px; --sp-8:96px; --sp-9:160px;

  /* ── Raster (§02) ── */
  --stage-max:1440px;
  --edge-pad:64px;              /* Rand, per Haltepunkt überschrieben */
  --gutter:24px;                /* Steg */
  --cols:12;
  --tile:calc(100vw / 12);      /* Kachelzelle, quadratisch, randlos */
  --beat:160px;                 /* Abschnittstakt */
  --measure:66ch;               /* max. Textbreite */

  /* ── Bewegungstafel (§10) — geschlossen, gilt für jeden Übergang ── */
  --t-tap:120ms linear;                              /* Druckquittung */
  --t-state:180ms cubic-bezier(.2,.9,.1,1);          /* Zustandswechsel */
  --t-morph:380ms cubic-bezier(.65,0,.35,1);         /* Morph / Ortswechsel */
  --t-enter:520ms cubic-bezier(.16,1,.3,1);          /* Einblenden beim Scrollen */

  /* Website-Charakter (D17): kräftiges Ease-in/out. Gilt NUR im Marketing —
     der Editor bleibt bei den schnellen Werten oben, weil Trägheit im
     Werkzeug ein Fehler ist. */
  --e-heavy:cubic-bezier(.83,0,.17,1);
  --t-web-morph:520ms var(--e-heavy);
  --t-web-enter:760ms var(--e-heavy);
  --t-web-sheet:640ms var(--e-heavy);

  /* ── Editor-Maße (§11) ── */
  --h-head:56px;
  --w-rail:290px;               /* feste Leiste, klappt nie ein */
  --w-strip:120px;              /* Slide-Schiene, rechts senkrecht */
  --elembar-gap:40px;           /* Element-Leiste über dem Element */
  --touch:44px;

  /* ── Fokus: nie Browser-Standard, nie weggelassen ── */
  --focus-w:2px;
  --focus-offset:3px;
}

/* ── Haltepunkte (§02): Rand, Steg, Kachel, Takt ── */
@media (max-width:1439px){ :root{ --edge-pad:40px; --gutter:20px; } }
@media (max-width:1023px){ :root{ --edge-pad:32px; --gutter:16px; --cols:8;  --tile:calc(100vw / 8); --beat:128px; } }
@media (max-width:767px){  :root{ --edge-pad:20px; --gutter:12px; --cols:4;  --tile:calc(100vw / 6); --beat:96px;  } }
@media (max-width:479px){  :root{ --tile:calc(100vw / 4); } }

/* ══════════════════════════════════════════════════════════════════════════
   Dark Mode — NUR im Editor (D3). Die Website bleibt immer Plakat/Weiß,
   deshalb bewusst KEIN prefers-color-scheme. --loud bleibt unverändert und
   trägt weiter ausschließlich Auswahl und Primärhandlung.
   ══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"]{
  --paper:#111110;
  --bone:#1E1D1B;
  --ink:#F4F2EE;
  --ink-2:#B7B1A9;
  --ink-3:#8A837A;
  --hair:#2C2A27;
  --edge:#3A3733;
  --acc-700:#FF7A4A;            /* Text-Orange auf dunklem Grund aufgehellt */
  --acc-800:#FF7A4A;            /* auf dunkel wird aufgehellt statt abgedunkelt:
                                   7,3:1 auf --paper, 6,5:1 auf --bone */
  --focus-col:#FF7A4A;          /* Fokusring auf dunklem Grund */
  --danger:#FF7A4A;
  --danger-bg:#3A2420;
}

/* ══════════════════════════════════════════════════════════════════════════
   Grundsatz
   ══════════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:15px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* Alles linksbündig — Ausnahmen nur Hero-Mission und Belegband (§01). */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-0.032em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }
/* height:auto gehoert zwingend dazu, sobald Bilder width- und height-Attribute
   tragen (seit T16, gegen Layoutspruenge). Die Attribute wirken als Stilvorgabe
   des Browsers. Setzt CSS nur die Breite, bleibt die Attributhoehe stehen —
   damit sind beide Achsen belegt und ein aspect-ratio im Regelwerk wird
   wirkungslos. Genau so wurden die Beweisbilder auf der Startseite 243 x 900
   statt 243 x 304 gross und verloren 66 Prozent ihrer Breite. */
img{ display:block; max-width:100%; height:auto; }

a{
  /* T13 · lag auf --acc-700 und damit auf --bone bei 4,49:1. */
  color:var(--acc-800);
  text-decoration:none;
  border-bottom:var(--b-hair) solid var(--acc-300);
  transition:color var(--t-state), border-color var(--t-state);
}
a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

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

:focus{ outline:none; }
:focus-visible{
  outline:var(--focus-w) solid var(--focus-col);
  outline-offset:var(--focus-offset);
}

/* T19 · Nur für Screenreader. Auf Konto, Projekte und der geteilten Vorschau
   trägt die Gestaltung die Aussage über Wortmarke plus Kleinlabel — semantisch
   fehlte dort aber jede h1, und damit Screenreadern die Hauptaussage der Seite.
   clip-path statt display:none, weil Verstecktes sonst auch vorgelesen wird. */
.vh{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Mono ist ein sichtbares Label-System, nicht nur für Ziffern. */
.mono{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ── Reduzierte Bewegung: ein Schalter für alles ────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}