/* Design-Tokens der Landingpage (Kopie von design/design-tokens.css, ohne Kopfkommentar). */
@font-face{font-family:"Inter";src:url("inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Block A: Kern-Tokens (identisch mit server/static/tokens.css) */
:root{
  /* Tinte & Text */
  --ink:#151581; --ink-2:#5f5f96; --ink-3:#a1a1cd; --text:#292824; --ash:#949392;
  /* Flaechen */
  --canvas:#f6f6fa; --card:#fff; --bone:#f6f5f4; --fog:#d6d6d6; --hair:#e4e4ee;
  /* Aktion & Akzente */
  --pink:#ff83da; --pink-top:#ff95e0; --pink-soft:#ffc5ee; --pink-wash:#f7e1f7; --ice:#d2f4ff; --lilac:#9f73e6;
  --green:#00a56a; --green-soft:#d8f5e8; --rose:#d93f5a; --rose-soft:#fde4e9; --amber-soft:#fdf0c9; --amber:#c98a00;
  /* Text auf farbigen Flaechen */
  --on-ink:#fff;          /* Schrift auf Indigo-Flaeche (Toast, aktiver Chip) */
  --on-pink:#151581;      /* Schrift auf der Pink-Aktion: immer Indigo, nie Weiss (2:1) */
  --on-status:#fff;       /* Schrift auf Ampel-Punkt, Rose-, Gruen-Flaeche */
  --ok-fg:#075c3d; --bad-fg:#8a1d33; --warn-fg:#6b4500; --disabled-fg:#6b6b73; --placeholder:#8a8a99;
  /* Ampel: Flaeche / Schrift / Punkt — alle Paare >= 4.5:1, Symbol zusaetzlich (✓ ! ✗) */
  --amp-ok-bg:#e7f5ec;  --amp-ok-fg:#14532d;  --amp-ok-dot:#15803d;
  --amp-warn-bg:#fff5d6;--amp-warn-fg:#5c3d00;--amp-warn-dot:#a16207;
  --amp-bad-bg:#fde8eb; --amp-bad-fg:#8a1424; --amp-bad-dot:#b91c1c;
  /* Linien, Scrims, Ringe */
  --line-bad:rgba(217,63,90,.45); --ring-ok:rgba(0,165,106,.35); --ring-ok-2:rgba(0,165,106,.45);
  --scrim:rgba(21,21,129,.28); --zebra:rgba(255,255,255,.55);
  --scroll:#d9d9ea; --scroll-hover:#c3c3dc;
  --logo-bg:#151581; --logo-fg:#ff83da; --logo-glow:rgba(21,21,129,.25);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23151581' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  /* Tiefe */
  --sh-1:0 1px 2px rgba(37,36,41,.08),0 3px 8px rgba(36,36,41,.05);
  --sh-2:0 1px 2px rgba(37,36,41,.09),0 6px 16px rgba(36,36,41,.07),0 18px 40px rgba(36,36,41,.06),inset 0 1px 0 rgba(255,255,255,.9);
  --sh-3:0 2px 4px rgba(37,36,41,.08),0 12px 28px rgba(36,36,41,.10),0 34px 70px rgba(36,36,41,.10),inset 0 1px 0 rgba(255,255,255,.95);
  --sh-in:inset 0 2px 5px rgba(36,36,41,.09),inset 0 0 0 1px rgba(36,36,41,.04);
  --sh-cta:0 1px 0 rgba(255,255,255,.55) inset,0 -3px 0 rgba(21,21,129,.14) inset,0 10px 24px rgba(255,131,218,.50),0 2px 4px rgba(21,21,129,.18);
  --sh-cta-hover:0 1px 0 rgba(255,255,255,.55) inset,0 -3px 0 rgba(21,21,129,.14) inset,0 16px 32px rgba(255,131,218,.55),0 3px 6px rgba(21,21,129,.18);
  --sh-cta-active:0 1px 0 rgba(255,255,255,.4) inset,0 -1px 0 rgba(21,21,129,.14) inset,0 3px 8px rgba(255,131,218,.4);
  --sh-voice:0 1px 0 rgba(255,255,255,.6) inset,0 6px 14px rgba(159,115,230,.35),0 2px 4px rgba(21,21,129,.12);
  --sh-toast:0 12px 36px rgba(21,21,129,.35);
  --lift:inset 0 1px 0 rgba(255,255,255,.85);
  /* Form */
  --r-tag:12px; --r-card:24px; --r-tile:20px; --r-field:14px; --r-sec:36px;
  --voice:linear-gradient(270deg,rgba(102,127,255,.85) 19.6%,rgba(206,162,255,.85) 50%,rgba(255,133,177,.85) 86%);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* Aliase fuer Inline-Styles im JS von panel.html */
  --muted:var(--ink-2); --danger:var(--rose); --warn:#8a5a00; --ok:var(--green);
  color-scheme:light;
}
/* Dunkel = Indigo-Nacht wie im Dashboard (.dark in globals.css) */
/* Tabellenbild (PNG/Kopie): bewusst immer hell, auch im Dark Mode nicht ueberschrieben */
:root{--img-bg:#ffffff; --img-ink:#151581; --img-text:#292824; --img-head:#f1f0f7;
  --img-line:#d9d9e6; --img-line-2:#e9e9f1; --img-zebra:#fafafd}
:root.dark{
  --ink:#c9c9f5; --ink-2:#a0a0d0; --ink-3:#6f6fa6; --text:#e9e9f1; --ash:#8e8eaa;
  --canvas:#0c0c1d; --card:#151528; --bone:#1b1b3a; --fog:#33334f; --hair:#26264a;
  --pink-wash:#3a2646; --ice:#16384a; --lilac:#b393f0;
  --green:#22c38a; --green-soft:#103a2c; --rose:#e8667d; --rose-soft:#3d1a25; --amber-soft:#3a2e10; --amber:#e0a526;
  --on-ink:#12123a; --on-status:#fff;
  --ok-fg:#a7f3d0; --bad-fg:#fecdd3; --warn-fg:#fde68a; --disabled-fg:#9a9ab8; --placeholder:#8f8fb5;
  --amp-ok-bg:#103a2c;  --amp-ok-fg:#a7f3d0;  --amp-ok-dot:#15803d;
  --amp-warn-bg:#3a2e10;--amp-warn-fg:#fde68a;--amp-warn-dot:#a16207;
  --amp-bad-bg:#3d1a25; --amp-bad-fg:#fecdd3; --amp-bad-dot:#b91c1c;
  --line-bad:rgba(232,102,125,.55); --ring-ok:rgba(34,195,138,.4); --ring-ok-2:rgba(34,195,138,.5);
  --scrim:rgba(0,0,0,.55); --zebra:rgba(255,255,255,.025);
  --scroll:#2e2e52; --scroll-hover:#3d3d68;
  --logo-bg:#2a2a8f; --logo-glow:rgba(0,0,0,.4);
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23c9c9f5' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  --sh-1:0 1px 2px rgba(0,0,0,.35),0 3px 8px rgba(0,0,0,.25);
  --sh-2:0 1px 2px rgba(0,0,0,.4),0 8px 22px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);
  --sh-3:0 2px 4px rgba(0,0,0,.45),0 16px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  --sh-in:inset 0 2px 5px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.04);
  --sh-toast:0 12px 36px rgba(0,0,0,.5);
  --lift:inset 0 1px 0 rgba(255,255,255,.06);
  --warn:#f5c26b;
  color-scheme:dark;
}


/* ---------- Block B: Ergaenzungen Portal / Landingpage */
:root{
  /* Typo-Skala (mobil -> desktop per clamp). Display immer 800-900, eng. */
  --fs-hero:clamp(36px,8.2vw,72px);   /* Landing-Hero, nie > 96px */
  --fs-h1:clamp(30px,4.6vw,52px);     /* Seitentitel (wie Panel) */
  --fs-h2:clamp(26px,4vw,40px);       /* Sektionstitel Landing */
  --fs-h3:clamp(18px,2vw,20px);       /* Karten-Titel */
  --fs-lead:clamp(17px,1.6vw,19px);   /* Einleitungssatz */
  --fs-body:15px; --fs-read:17px; --fs-small:13px; --fs-label:11px;
  --lh-display:.98; --lh-tight:1.15; --lh-body:1.5; --lh-read:1.75;
  --ls-display:-.035em; --ls-h:-.02em; --ls-body:-.006em; --ls-label:.09em;
  --fw-display:900; --fw-h:800; --fw-strong:650; --fw-body:400;
  --measure:68ch; --measure-lead:52ch;
  /* Abstaende: 4-px-Raster */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px;
  --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;
  --section-y:clamp(56px,9vw,112px);   /* Landing: vertikaler Sektionsabstand */
  --gutter:max(20px,env(safe-area-inset-left));
  --card-pad:clamp(20px,3vw,28px);
  /* Layout */
  --w-max:1240px; --w-text:720px; --w-narrow:560px;
  --bp-sm:640px; --bp-md:900px; --bp-lg:1000px;   /* nur Doku: CSS-Variablen gehen nicht in @media */
  /* Radien (keine anderen Werte!) */
  --r-pill:999px;
  /* Bewegung */
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-1:.15s; --dur-2:.25s; --dur-3:.5s;
  /* Touch */
  --tap:44px; --field-fs:16px;          /* 16px verhindert iOS-Zoom */
  /* Z-Ebenen */
  --z-nav:30; --z-pop:40; --z-modal:50; --z-toast:60;
}

/* Basis-Rezepte, die Portal und Landing teilen (optional, nur Klassen mit Praefix .ds-) */
.ds-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:14px 26px;border:0;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--pink-top),var(--pink));color:var(--on-pink);font:800 16px/1 var(--font);letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  box-shadow:var(--sh-cta);transition:transform var(--dur-1) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.ds-cta:hover{transform:translateY(-1px);box-shadow:var(--sh-cta-hover)}
.ds-cta:active{transform:translateY(1px);box-shadow:var(--sh-cta-active)}
.ds-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:12px 22px;border-radius:var(--r-pill);
  background:var(--card);color:var(--ink);font:700 15px/1 var(--font);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--ink),var(--sh-1);cursor:pointer}
.ds-card{background:var(--card);border-radius:var(--r-card);box-shadow:var(--sh-2);padding:var(--card-pad)}
.ds-tile{background:var(--bone);border-radius:var(--r-tile);box-shadow:var(--sh-1)}
.ds-eyebrow{font:700 var(--fs-label)/1 var(--font);text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-2)}
.ds-display{font-weight:var(--fw-display);letter-spacing:var(--ls-display);line-height:var(--lh-display);color:var(--ink);text-wrap:balance}
.ds-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-tag);font:700 12px/1.3 var(--font);background:var(--bone);color:var(--ink);box-shadow:var(--lift)}
.ds-tag.ok{background:var(--green-soft);color:var(--ok-fg)} .ds-tag.ice{background:var(--ice)} .ds-tag.wash{background:var(--pink-wash)}
@media (prefers-reduced-motion:reduce){.ds-cta,.ds-ghost{transition:none}}