/* Famino Website · erzeugt von website/bauen.mjs aus Design-System-Tokens + website/kit/kit.css */
:root{--famino-primary-light:#94d3c1;--famino-primary:#70afb0;--famino-primary-dark:#5a8b99;--famino-primary-strong:#517e7f;--famino-accent-light:#a8d4c8;--famino-accent:#5ea898;--famino-accent-dark:#4a9484;--famino-tab-bg-light:#c6e6de;--famino-tab-bg-dark:#1a302a;--famino-bg-light:#f5f9fc;--famino-surface-light:#ffffff;--famino-input-fill-light:#fafafa;--famino-nav-bg-light:#faf9fa;--famino-text-primary-light:rgba(28,28,30,.867);--famino-text-secondary-light:#6b7280;--famino-border-light:#e5e7eb;--famino-card-border-strong:#d1d5db;--famino-border-control-light:#8b9096;--famino-bg-dark:#111315;--famino-surface-dark:#1c1e20;--famino-card-dark-surface:#232527;--famino-input-fill-dark:#28292b;--famino-text-primary-dark:#f5f5f5;--famino-text-secondary-dark:#9ca3af;--famino-border-dark:#2d2f31;--famino-border-control-dark:#70757a;--famino-dark-pill:#1c1c1e;--famino-dark-pill-dark:#2a2d2c;--famino-nav-fg:#2d2a37;--famino-success:#10b981;--famino-warning:#ef9062;--famino-error:#fc7171;--famino-info:#3b82f6;--famino-card-white:#ffffff;--famino-card-sage:#d4e0cc;--famino-card-lavender:#ddd0ec;--famino-card-peach:#f5d8c4;--famino-card-mint:#3b766a;--famino-card-dark-sage:#2a3328;--famino-card-dark-lavender:#2a2433;--famino-card-dark-peach:#33281e;--famino-card-dark-mint:#1e2d28;--famino-domain-today:#595959;--famino-domain-calendar:#70afb0;--famino-domain-tasks:#8b7aaf;--famino-domain-timetable:#de8c99;--famino-domain-homework:#884654;--famino-domain-grades:#987b9d;--famino-domain-together:#5f9e7f;--famino-domain-meals:#a6a867;--famino-domain-recipes:#a7754d;--famino-domain-expenses:#7a96b5;--famino-domain-vacation:#b098a4;--famino-domain-academy:#808f85;--famino-domain-pong:#d4826a;--famino-domain-pong-header:#9b3a8e;--famino-domain-settings:#8a8f94;--famino-domain-family:#6e5f56;--famino-domain-anniversary:#546e7a;--famino-domain-scan:#ef9062;--famino-domain-premium:#c0994a;--famino-domain-today-dark:#2c2c2c;--famino-domain-calendar-dark:#223232;--famino-domain-tasks-dark:#2a2433;--famino-domain-timetable-dark:#432328;--famino-domain-homework-dark:#3e2329;--famino-domain-grades-dark:#2c252d;--famino-domain-together-dark:#1e2b25;--famino-domain-meals-dark:#2e2f20;--famino-domain-recipes-dark:#2c221b;--famino-domain-expenses-dark:#232a33;--famino-domain-vacation-dark:#342b30;--famino-domain-academy-dark:#262927;--famino-domain-pong-dark:#33231e;--famino-domain-pong-header-dark:#2a1628;--famino-domain-settings-dark:#2c2e30;--famino-domain-family-dark:#7e6e63;--famino-domain-anniversary-dark:#1a1f22;--famino-domain-scan-dark:#4c2716;--famino-domain-premium-dark:#332b1a;--famino-domain-today-ink:#595959;--famino-domain-calendar-ink:#43797a;--famino-domain-tasks-ink:#7a67a4;--famino-domain-timetable-ink:#c6394e;--famino-domain-homework-ink:#884654;--famino-domain-grades-ink:#846689;--famino-domain-together-ink:#4a7b63;--famino-domain-meals-ink:#727442;--famino-domain-recipes-ink:#936744;--famino-domain-expenses-ink:#547396;--famino-domain-vacation-ink:#876878;--famino-domain-academy-ink:#67746b;--famino-domain-pong-ink:#b75235;--famino-domain-pong-header-ink:#9b3a8e;--famino-domain-settings-ink:#6c7176;--famino-domain-family-ink:#6e5f56;--famino-domain-anniversary-ink:#546e7a;--famino-domain-scan-ink:#c04c14;--famino-domain-premium-ink:#8a6c30;--famino-domain-today-ink-dark:#909090;--famino-domain-calendar-ink-dark:#70afb0;--famino-domain-tasks-ink-dark:#9889b8;--famino-domain-timetable-ink-dark:#de8c99;--famino-domain-homework-ink-dark:#c8939e;--famino-domain-grades-ink-dark:#a388a7;--famino-domain-together-ink-dark:#5f9e7f;--famino-domain-meals-ink-dark:#a6a867;--famino-domain-recipes-ink-dark:#b68660;--famino-domain-expenses-ink-dark:#7a96b5;--famino-domain-vacation-ink-dark:#b098a4;--famino-domain-academy-ink-dark:#85948a;--famino-domain-pong-ink-dark:#d4826a;--famino-domain-pong-header-ink-dark:#ca70be;--famino-domain-settings-ink-dark:#8c9195;--famino-domain-family-ink-dark:#9e8d83;--famino-domain-anniversary-ink-dark:#7895a2;--famino-domain-scan-ink-dark:#ef9062;--famino-domain-premium-ink-dark:#c0994a;--famino-domain-today-on:#ffffff;--famino-domain-calendar-on:#1c1c1e;--famino-domain-tasks-on:#1c1727;--famino-domain-timetable-on:#1c1c1e;--famino-domain-homework-on:#ffffff;--famino-domain-grades-on:#1c1c1e;--famino-domain-together-on:#1c1c1e;--famino-domain-meals-on:#1c1c1e;--famino-domain-recipes-on:#1f160e;--famino-domain-expenses-on:#1c1c1e;--famino-domain-vacation-on:#1c1c1e;--famino-domain-academy-on:#1c1c1e;--famino-domain-pong-on:#1c1c1e;--famino-domain-pong-header-on:#ffffff;--famino-domain-settings-on:#1c1c1e;--famino-domain-family-on:#ffffff;--famino-domain-anniversary-on:#ffffff;--famino-domain-scan-on:#1c1c1e;--famino-domain-premium-on:#241d0d;--famino-calendar-cell:#f6f7fa;--famino-calendar-cell-muted:rgba(0,0,0,.02);--famino-calendar-today:rgba(112,175,176,.18);--famino-calendar-cell-dark:rgba(255,255,255,.06);--famino-calendar-cell-muted-dark:rgba(255,255,255,.02);--famino-calendar-today-dark:rgba(112,175,176,.26);--famino-header-inactive-light:rgba(0,0,0,.06);--famino-header-inactive-dark:rgba(255,255,255,.08);--bg-page:var(--famino-bg-light);--surface-card:var(--famino-surface-light);--surface-card-alt:var(--famino-card-dark-surface);--surface-input:var(--famino-input-fill-light);--surface-sunken:var(--famino-calendar-cell);--surface-nav:var(--famino-surface-light);--text-body:var(--famino-text-primary-light);--text-muted:var(--famino-text-secondary-light);--text-on-accent:#ffffff;--text-section-label:var(--famino-primary);--border-card:var(--famino-border-light);--border-control:var(--famino-border-control-light);--border-card-strong:var(--famino-card-border-strong);--border-focus:var(--famino-primary);--accent-primary:var(--famino-primary);--accent-primary-strong:var(--famino-primary-strong);--accent-primary-soft:var(--famino-tab-bg-light);--control-fill-strong:var(--famino-dark-pill);--control-fill-tonal:var(--famino-header-inactive-light);--control-fg-tonal:var(--famino-nav-fg);--state-success:var(--famino-success);--state-warning:var(--famino-warning);--state-error:var(--famino-error);--state-info:var(--famino-info);--state-error-ink:#e30505;--state-on-error-ink:#ffffff;--member-01:#b9135d;--member-02:#f3521e;--member-03:#e7c63d;--member-04:#0c8043;--member-05:#4051b5;--member-06:#8f24a9;--member-07:#d81a60;--member-08:#f17a19;--member-09:#bcc931;--member-10:#009688;--member-11:#7b87cb;--member-12:#795547;--member-13:#d60000;--member-14:#f09300;--member-15:#7db342;--member-16:#039be5;--member-17:#b49ddc;--member-18:#616161;--member-19:#e57373;--member-20:#f5c02b;--member-21:#34b779;--member-22:#4285f4;--member-23:#9f69ae;--member-24:#a39686;--category-01:#22a699;--category-02:#f8a5a5;--category-03:#fdb750;--category-04:#7dd3a6;--category-05:#b197fc;--category-06:#d97757;--category-07:#4c9aff;--category-08:#a0b865;--category-09:#e879a9;--category-10:#c3a67f;--sky-deep-night-top:#0b1026;--sky-deep-night-mid:#141a3a;--sky-deep-night-bot:#1f2450;--sky-pre-dawn-top:#1a1a40;--sky-pre-dawn-mid:#4a2a55;--sky-pre-dawn-bot:#8a4b5a;--sky-dawn-top:#5a6fa8;--sky-dawn-mid:#e89a78;--sky-dawn-bot:#ffc48e;--sky-morning-top:#5ba7dd;--sky-morning-mid:#9bc9ea;--sky-morning-bot:#d9eaf5;--sky-noon-top:#3d8fce;--sky-noon-mid:#7bb5dd;--sky-noon-bot:#b8d6ec;--sky-late-day-top:#4a9ad4;--sky-late-day-mid:#8bc0e3;--sky-late-day-bot:#c8deef;--sky-sunset-top:#e89a6e;--sky-sunset-mid:#f1b98a;--sky-sunset-bot:#ffd8a6;--sky-dusk-top:#3a2154;--sky-dusk-mid:#8a3d5e;--sky-dusk-bot:#e07347;--sky-early-night-top:#101638;--sky-early-night-mid:#2a1f4a;--sky-early-night-bot:#4a2a55;--sky-sun:#ffd86a;--sky-sun-glow:#ffe89a;--sky-moon:#e8e4d2;--sky-moon-glow:#cdd6ff;--sky-overcast-grey:#8c95a0;--radius-xs:4px;--radius-sm:8px;--radius-agenda:14px;--radius-card:16px;--radius-empty:20px;--radius-lg:24px;--radius-sheet:28px;--radius-pill:999px;--border-hairline:1px;--border-outlined-button:1.5px;--border-checkbox:1.5px;--border-checkbox-priority:2px;--border-focus-width:2px;--border-nav-pill:.8px;--ring-avatar:2px;--shadow-none:none;--shadow-nav:0 8px 22px rgba(0,0,0,.14),0 1px 4px rgba(0,0,0,.06);--shadow-nav-dark:0 8px 22px rgba(0,0,0,.32),0 1px 4px rgba(0,0,0,.18);--shadow-header:0 3px 10px rgba(0,0,0,.06);--shadow-sheet:0 -4px 16px rgba(0,0,0,.1);--shadow-sheet-dark:0 -4px 16px rgba(0,0,0,.3);--shadow-soft:0 3px 12px rgba(0,0,0,.04);--scrim-nav-light:linear-gradient(to bottom,rgba(245,249,252,0) 0%,rgba(245,249,252,.85) 55%,#f5f9fc 100%);--scrim-nav-dark:linear-gradient(to bottom,rgba(17,19,21,0) 0%,rgba(17,19,21,.85) 55%,#111315 100%);--scrim-backdrop:rgba(0,0,0,.35);--scrim-hero:linear-gradient(to bottom,rgba(0,0,0,.28),rgba(0,0,0,0) 45%,rgba(0,0,0,.28));--dur-avatar-fade:120ms;--dur-press:150ms;--dur-nav-slide:360ms;--dur-tab-bounce:400ms;--dur-fade-in:400ms;--dur-fan:520ms;--dur-shimmer:1000ms;--dur-pulse:1200ms;--ease-standard:cubic-bezier(.4,0,.2,1);--ease-nav:cubic-bezier(.65,0,.35,1);--bounce-peak:1.15;--bounce-dip:.92;--state-highlight-light:rgba(168,212,200,.35);--state-highlight-dark:rgba(148,211,193,.2);--state-disabled-opacity:.6;--state-coming-soon-opacity:.5;--shimmer-white:rgba(255,255,255,.1);--space-1:4px;--space-2:8px;--space-2-5:10px;--space-3:12px;--space-3-5:14px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--gutter-screen:12px;--gutter-screen-wide:24px;--pad-card:24px;--pad-card-compact:20px;--pad-button-x:32px;--pad-button-y:16px;--pad-input-x:20px;--pad-input-y:16px;--nav-bar-height:64px;--nav-disc-size:44px;--nav-outer-margin:12px;--nav-gap:8px;--nav-pill-max-width:600px;--nav-fade-zone:20px;--hit-target-min:44px}
@media (prefers-color-scheme:dark){:root{--bg-page:var(--famino-bg-dark);--surface-card:var(--famino-surface-dark);--surface-card-alt:var(--famino-card-dark-surface);--surface-input:var(--famino-input-fill-dark);--surface-sunken:var(--famino-calendar-cell-dark);--surface-nav:var(--famino-card-dark-surface);--text-body:var(--famino-text-primary-dark);--text-muted:var(--famino-text-secondary-dark);--text-section-label:var(--famino-primary-light);--border-card:var(--famino-border-dark);--border-control:var(--famino-border-control-dark);--border-card-strong:var(--famino-border-dark);--border-focus:var(--famino-primary-light);--accent-primary:var(--famino-primary-light);--accent-primary-strong:var(--famino-primary);--accent-primary-soft:var(--famino-tab-bg-dark);--control-fill-strong:var(--famino-dark-pill-dark);--control-fill-tonal:var(--famino-header-inactive-dark);--control-fg-tonal:rgba(255,255,255,.92);--surface-sunken:var(--famino-calendar-cell-dark);--state-error-ink:var(--famino-error);--state-on-error-ink:#1c1c1e}}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/w/fonts/plus-jakarta-sans-latin.153fc85b70.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/w/fonts/plus-jakarta-sans-latin-ext.38e3b8fd80.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/w/fonts/inter-latin.3100e775e8.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/w/fonts/inter-latin-ext.34b9c504ca.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Pacifico";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/w/fonts/pacifico-amino.584a60bfca.woff2) format("woff2")}
/* ═══════════════════════════════════════════════════════════════════════════
   FAMINO WEBSITE · UI-KIT
   Einzige Quelle der geteilten Bausteine (Herkunft: website/_referenz/kit.css,
   freigegeben 24.09.2026). bauen.mjs setzt davor: die Tokens des Design Systems
   (colors, palettes, radius, elevation, motion, spacing) und die @font-face-Regeln.
   Hex-Literale nur #fff/#ffffff, #1d3a40 (Glas-Ersatz), #0a0d1c (Footer).
   Schrift: Plus Jakarta Sans = Wörter, Inter = Sätze, Pacifico nur die Wortmarke.
   Bausteine: frame · base · skip · sky · glass · nav · lang · btn · burger · menu ·
   brand · stores/badge · stage · split · hero · time/part · area · story/quote ·
   tiles/tile · ph · figs · crumbs · faq · finale/card · grid-links · foot · rig ·
   sprachhinweis · dokument · dunkel · motion · responsive
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --primary:var(--famino-primary); --primary-strong:var(--famino-primary-strong); --pill:var(--famino-dark-pill);
  --ink-tag:var(--famino-dark-pill); --ink:var(--ink-tag); --ink-muted:rgba(28,28,30,.66);
  --top:var(--sky-dawn-top); --mid:var(--sky-dawn-mid); --bot:var(--sky-dawn-bot);
  --sun:var(--sky-sun); --moon:var(--sky-moon);
  --ease:var(--ease-standard);
  --font-word:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-sentence:"Inter",system-ui,sans-serif;
  --font-logo:"Pacifico",cursive;
  --col:520px; --col-wide:760px;
  /* Seitenrahmen: links und rechts derselbe Innenrand, zentriert ab --frame-max.
     --vw setzt kit.js auf clientWidth (ohne Bildlaufleiste). */
  --vw:100vw; --frame-max:1320px;
  --gutter:clamp(20px, calc(var(--vw) * .08), 160px);
  --edge:max(var(--gutter), calc((var(--vw) - var(--frame-max)) / 2));
  --bar-h:60px;
  /* Lage des Handys (Ruling H1): für ALLE Seiten gleich, am Ende von kit.css gesetzt (rig-lage.mjs).
     --eigen-unter ist der linke Überstand der eigenen Figur einer Funktionsseite (figuren.mjs). */
  --ueber:0; --unter:0; --eigen-unter:0;
  /* Glasfilm .64 statt .55 der Referenz: über weißen Kacheln ergäbe .55 für weiße Schrift nur 3,60:1
     (WCAG AA verfehlt), mit .64 sind es 4,73:1, über dem Himmel 7,59 bis 16,69:1. */
  --glass-film:rgba(20,40,46,.64);
  --r-card:var(--radius-card); --r-lg:var(--radius-lg); --r-sheet:var(--radius-sheet); --r-pill:var(--radius-pill);
  /* Flächen (Kachel, Preiskarte, Link-Kachel, FAQ im Dunkeln): hell nach 1.0-Werten, dunkel nach Token */
  --flaeche:var(--famino-surface-light); --flaeche-text:var(--ink-tag);
  --flaeche-leise:var(--famino-text-secondary-light); --flaeche-linie:var(--famino-border-light);
  --handy-grund:var(--famino-bg-light);
  /* Domänen-Tinte: Zeichen auf hellem Grund (Regel 5: der Bereich färbt) */
  --ink-calendar:var(--famino-domain-calendar-ink); --ink-tasks:var(--famino-domain-tasks-ink);
  --ink-timetable:var(--famino-domain-timetable-ink); --ink-meals:var(--famino-domain-meals-ink);
  --ink-expenses:var(--famino-domain-expenses-ink); --ink-vacation:var(--famino-domain-vacation-ink);
  --ink-together:var(--famino-domain-together-ink); --ink-today:var(--famino-domain-today-ink);
  --ink-homework:var(--famino-domain-homework-ink); --ink-grades:var(--famino-domain-grades-ink);
  --ink-recipes:var(--famino-domain-recipes-ink); --ink-pong:var(--famino-domain-pong-ink);
  /* Rig: 1u = 1 % der Handybreite */
  --u:2.6px;
}
body.night{--ink:#fff;--ink-muted:rgba(255,255,255,.72)}
/* ── base ── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* overflow-x auf allen Breiten (Referenz: nur ≤ 640 px): Boden und Schatten des Rigs ragen zwischen 641 und 1100 px sonst über den Rand */
body{margin:0;color:var(--ink);font:400 17px/1.55 var(--font-sentence);-webkit-font-smoothing:antialiased;background:var(--mid);transition:color .6s var(--ease);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-word);margin:0;font-weight:800;letter-spacing:-.03em}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:8px}
/* ── skip ── */
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:#fff;color:var(--ink-tag);font:700 14px var(--font-word);padding:10px 16px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.14);transition:top .2s var(--ease)}
.skip:focus{top:16px}
/* ── sky ── */
.sky{position:fixed;inset:0;z-index:-2;background:linear-gradient(to bottom,var(--top) 0%,var(--mid) 52%,var(--bot) 100%)}
.stars{position:fixed;inset:0;z-index:-1;opacity:0;pointer-events:none;background-image:
  radial-gradient(1.5px 1.5px at 12% 18%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 28% 42%,#fff 60%,transparent 61%),
  radial-gradient(1.6px 1.6px at 44% 12%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 61% 30%,#fff 60%,transparent 61%),
  radial-gradient(1.4px 1.4px at 73% 8%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 84% 36%,#fff 60%,transparent 61%),
  radial-gradient(1.2px 1.2px at 91% 16%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 8% 55%,#fff 60%,transparent 61%),
  radial-gradient(1.3px 1.3px at 36% 62%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 52% 50%,#fff 60%,transparent 61%),
  radial-gradient(1.2px 1.2px at 20% 78%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 68% 66%,#fff 60%,transparent 61%)}
.sun,.moon{position:fixed;z-index:-1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.sun{width:96px;height:96px;background:var(--sun);box-shadow:0 0 0 24px rgba(255,232,154,.35),0 0 80px 30px rgba(255,232,154,.55)}
.moon{width:72px;height:72px;background:var(--moon);box-shadow:0 0 0 18px rgba(205,214,255,.18),0 0 60px 20px rgba(205,214,255,.35);opacity:0}
.moon::before,.moon::after{content:"";position:absolute;border-radius:50%;background:rgba(0,0,0,.08)}
.moon::before{width:14px;height:14px;left:18px;top:16px}.moon::after{width:9px;height:9px;left:42px;top:38px}
/* ── glass (Leiste, angedockt oben/links/rechts, ohne Rundung und Rand) ── */
.glass{position:fixed;top:0;left:0;right:0;height:var(--bar-h);z-index:50;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff;
  background:var(--glass-film);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:0 10px 30px rgba(10,16,38,.18)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.menu,.sprachhinweis{background:#1d3a40}}
.glass .right{display:flex;align-items:center;gap:4px;position:relative;z-index:1}
/* ── nav ── */
.nav{display:flex;align-items:center;gap:2px}
.nav a{font:600 14px var(--font-word);padding:10px 13px;border-radius:999px;color:#fff;opacity:.94}
.nav a:hover{background:rgba(255,255,255,.14);opacity:1}
/* ── lang (Links auf das Gegenstück, keine Umleitung) ── */
.lang{display:flex;align-items:center;margin:0 10px 0 8px;padding:3px;border-radius:999px;background:rgba(255,255,255,.12)}
.lang a{color:rgba(255,255,255,.78);font:700 12.5px var(--font-word);padding:6px 10px;border-radius:999px}
.lang a[aria-current="true"]{background:#fff;color:var(--ink-tag)}
/* ── btn ── */
.btn{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;font:700 14px var(--font-word);background:var(--pill);color:#fff;position:relative;z-index:1}
.glass .btn,.menu .btn{background:#fff;color:var(--ink-tag);white-space:nowrap}
/* ── burger + menu (Glas-Panel) ── */
.burger{display:none;appearance:none;border:0;background:rgba(255,255,255,.12);color:#fff;width:42px;height:42px;border-radius:999px;cursor:pointer;place-items:center}
.burger svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.menu{position:fixed;top:calc(var(--bar-h) + 10px);right:12px;left:12px;z-index:49;display:none;flex-direction:column;gap:4px;padding:12px;border-radius:24px;color:#fff;
  background:var(--glass-film);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 16px 40px rgba(10,16,38,.3)}
.menu.open{display:flex}
.menu a{font:600 16px var(--font-word);padding:12px 14px;border-radius:14px}
.menu a:hover{background:rgba(255,255,255,.12)}
.menu .row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 6px 4px}
/* Der Download-Knopf trägt einen langen Text („Jetzt kostenlos downloaden“): einzeilig, wie in der Leiste; reicht der Platz nicht, rutscht er in eine eigene Zeile */
.menu .btn{white-space:nowrap;font:700 14px var(--font-word);padding:0 18px}
.menu .lang a{font-size:12.5px;padding:6px 10px}
/* ── brand (Wortmarke: F-Marke + „amino“ in Pacifico, immer weiß) ── */
.brand{display:inline-flex;align-items:center;height:40px;position:relative;z-index:1}
.brand .mark{height:34px;width:auto;display:block}
.brand .mark path{fill:#fff}
.brand .word{font:400 27px/1 var(--font-logo);margin-left:-6px;color:#fff;position:relative;top:1px}
/* ── stores / badge (offizielle Grafiken, schwarze Fläche exakt 48 px) ── */
.stores{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.badge{display:block;height:48px;overflow:hidden;border-radius:7px;transition:transform .15s var(--ease)}
.badge:hover{transform:translateY(-2px)}
.badge img{display:block;width:auto;max-width:none}
.badge.play img{height:63.16px;margin-top:-7.58px}
.badge.apple img{height:50.26px;margin-top:-1.13px}
/* ── stage (ein Abschnitt auf dem Himmel) ── */
.stage{min-height:100vh;display:flex;align-items:center;padding:140px var(--edge) 80px}
.stage.hero{position:relative}
.stage .col{max-width:var(--col)}
.stage .col.wide{max-width:var(--col-wide)}
.stage .col.full{max-width:var(--frame-max);width:100%}
/* ── split (Text neben Handy) ── */
.split{display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:center;width:100%}
.split .ph{margin:0 auto}
.stage.short{min-height:0;padding-top:96px;padding-bottom:96px}
.stage.full{min-height:100svh}
/* Funktionsseite: das Rig steht im Hero absolut rechts. Die Spalte lässt Platz für Handy (100 u) und Figur
   (bis 50 u, die geplanten reichen bis 42,3 u) plus 32 px, sonst laufen H1 und Lead bei 1280 px unter das Handy. */
/* Startseite ab 1101 px: die Hero-Spalte endet 24 px vor dem festen Handy (Ruling H1), sonst läuft ein langer Lead darunter */
@media (min-width:1101px){.stage.hero:not(.full) .col.wide{max-width:min(var(--col-wide), calc(var(--vw) - 2 * var(--edge) - var(--u) * (var(--ueber) + 100) - 24px))}}
/* Platz rechts für Handy und Figur: mindestens 150 u, bei weit links hängender Figur so viel, wie sie mit der festen Lage (Ruling H1) braucht */
.stage.hero.full{padding-right:calc(var(--edge) + var(--u) * max(150, var(--ueber) + 100 + var(--eigen-unter)) + 32px)}
/* ── hero ── */
.hero h1{font-size:clamp(46px,5.4vw,78px);line-height:1;max-width:12ch}
.hero .col.wide h1{max-width:20ch}
.hero .lead{font-size:20px;line-height:1.5;color:var(--ink-muted);max-width:40ch;margin:26px 0 32px}
.hero .col.wide .lead{max-width:62ch}
.hero .lead b{color:var(--ink);font-weight:600}
.fact{margin:20px 0 0;font:600 15px var(--font-word)}
.fact + .fact{margin-top:6px}
.fact span{color:var(--ink-muted);font-weight:500}
.fact .stars{color:var(--famino-domain-premium);font-weight:700;letter-spacing:2px}
.hint{margin-top:56px;display:flex;align-items:center;gap:12px;font:600 14px var(--font-word);color:var(--ink-muted)}
.hint i{width:22px;height:34px;border:2px solid currentColor;border-radius:12px;position:relative;opacity:.7}
.hint i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:currentColor;animation:wheel 1.6s var(--ease) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}100%{transform:translateY(12px);opacity:0}}
/* ── time / part / Abschnitts-Typo ── */
.stage .time{font:800 clamp(56px,6vw,84px)/1 var(--font-word);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stage .part{font:600 16px var(--font-word);color:var(--ink-muted);margin:8px 0 26px}
.stage h2{font-size:clamp(32px,3.4vw,46px);line-height:1.06}
.stage p{font-size:18px;line-height:1.55;color:var(--ink-muted);margin:16px 0 0;max-width:46ch}
.stage p b{color:var(--ink);font-weight:600}
.stage .intro{max-width:60ch}
/* ── area (Bereichs-Etikett) ── */
.area{margin-top:22px;display:inline-flex;gap:8px;font:600 13.5px var(--font-word);padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.55);color:var(--ink-tag);transition:background .6s var(--ease)}
body.night .area{background:rgba(255,255,255,.12);color:#fff}
.areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.areas .area{margin-top:0}
/* ── story / quote ── */
.story h2{font-size:clamp(30px,3.2vw,42px)}
.story p{font-size:17px}
.quote{margin:28px 0 0;padding:4px 0 4px 22px;border-left:3px solid rgba(255,255,255,.55);font:500 20px/1.45 var(--font-sentence);color:var(--ink);max-width:44ch}
body:not(.night) .quote{border-left-color:rgba(28,28,30,.35)}
.by{margin:12px 0 0;font:600 14px var(--font-word);color:var(--ink-muted)}
.facts{margin:26px 0 0;font:500 14px/1.6 var(--font-sentence);color:var(--ink-muted);max-width:48ch}
.more{display:inline-block;margin-top:22px;font:700 15px var(--font-word);color:var(--ink);border-bottom:2px solid currentColor;padding-bottom:2px}
/* ── tiles / tile (Fläche, flach) ── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px;width:100%}
.tile{background:var(--flaeche);color:var(--flaeche-text);border-radius:var(--r-lg);padding:22px;display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;box-shadow:0 20px 50px -30px rgba(10,16,38,.35)}
.tile .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--c,var(--primary-strong));background:color-mix(in srgb,var(--c,var(--primary-strong)) 18%,transparent)}
.tile .ico svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile h3{font-size:17px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
.tile p{margin:0;color:var(--flaeche-leise);font-size:14.5px;line-height:1.5;max-width:none}
/* color hier nötig: die generische .stage p b-Regel setzt sonst --ink, das im Dark Mode
   auf der dunkel werdenden Kachel (--flaeche) unlesbar wird. */
.tile p b{color:var(--flaeche-text)}
/* ── ph (Handy-Rahmen für Screenshots) ── */
.ph{width:280px;aspect-ratio:1560/3376;border-radius:38px;overflow:hidden;background:var(--handy-grund);box-shadow:0 40px 80px -25px rgba(10,16,38,.4),0 2px 8px rgba(10,16,38,.15);position:relative}
.ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(28,28,30,.1);pointer-events:none}
.ph picture{display:contents}
.ph img{width:100%;height:100%;object-fit:cover;object-position:top}
/* ── figs (drei Blätter mit Bildunterschrift) ── */
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;width:100%}
.figs figure{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.figs .ph{width:220px;border-radius:30px;margin-bottom:18px}
.figs figcaption{max-width:32ch}
.figs figcaption>b{display:block;font:700 17px var(--font-word);letter-spacing:-.01em;color:var(--ink);margin-bottom:4px}
.figs figcaption span{font-size:14.5px;color:var(--ink-muted);line-height:1.5}
/* ── crumbs ── */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font:600 13.5px var(--font-word);color:var(--ink-muted);margin:0 0 22px}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-current]{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.6}
/* ── faq ── */
.faq h2{font-size:clamp(30px,3.2vw,42px);margin-bottom:8px}
.faq details{border-top:1px solid rgba(255,255,255,.22);padding:4px 0}
.faq details:last-of-type{border-bottom:1px solid rgba(255,255,255,.22)}
body:not(.night) .faq details{border-color:rgba(28,28,30,.2)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 4px;font:700 17px var(--font-word);letter-spacing:-.01em;color:var(--ink);border-radius:8px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);flex:none;margin-right:6px;opacity:.7;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg)}
.faq summary:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.faq details p{margin:0 4px 16px;font-size:16px;max-width:52ch}
/* ── finale / card (Preis) ── */
.finale{min-height:100vh;display:flex;align-items:center;padding:140px var(--edge) 120px}
.finale .col{max-width:var(--col)}
.finale h2{font-size:clamp(36px,4vw,56px);line-height:1.04}
.finale p.l{font-size:19px;color:var(--ink-muted);margin:18px 0 32px;max-width:40ch}
.card{background:var(--flaeche);color:var(--flaeche-text);border-radius:var(--r-sheet);padding:32px;max-width:520px;box-shadow:0 30px 80px -30px rgba(0,0,0,.5)}
.card .price{font:800 34px/1.1 var(--font-word);letter-spacing:-.03em}
.card .price small{font:600 16px var(--font-word);color:var(--flaeche-leise);letter-spacing:0;margin-left:6px}
.card .sub{margin:8px 0 22px;color:var(--flaeche-leise);font-size:15px}
.card .sub b{color:var(--flaeche-text);font-weight:600}
.card .trust{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--flaeche-linie);font-size:13.5px;color:var(--flaeche-leise);line-height:1.5}
/* ── grid-links (Kacheln zu weiteren Seiten; Punkt = Domänenfläche) ── */
.grid-links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px;width:100%}
.grid-links a{display:flex;align-items:center;gap:12px;background:var(--flaeche);color:var(--flaeche-text);border-radius:var(--r-card);padding:16px 18px;font:700 15px var(--font-word);letter-spacing:-.01em;box-shadow:0 20px 50px -30px rgba(10,16,38,.35);transition:transform .15s var(--ease)}
.grid-links a:hover{transform:translateY(-2px)}
.grid-links a i{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none}
/* ── foot ── */
.foot{position:relative;z-index:2;background:#0a0d1c;color:#fff;border-top:1px solid rgba(255,255,255,.08);padding:72px var(--edge) 36px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:40px;max-width:var(--frame-max)}
.foot h3{font:700 14px var(--font-word);letter-spacing:.01em;margin:0 0 16px;color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot li a{font:400 15px var(--font-sentence);color:rgba(255,255,255,.72)}
.foot li a:hover{color:#fff}
.foot .stores{margin-top:14px}
.foot .badge{height:44px}.foot .badge.play img{height:57.9px;margin-top:-6.95px}.foot .badge.apple img{height:46.07px;margin-top:-1.04px}
.foot-bottom{max-width:var(--frame-max);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font:500 13.5px var(--font-sentence);color:rgba(255,255,255,.62)}
.foot-bottom .brand .mark{height:28px}
.foot-bottom .brand .word{font-size:22px;margin-left:-5px}
.foot-bottom .lang{background:rgba(255,255,255,.1);margin:0}
.made{display:inline-flex;align-items:center;gap:6px}
.made svg{width:14px;height:14px;fill:var(--famino-domain-timetable)}
/* ── rig (Handy mit Figuren). Positionen je Seite setzt bauen.mjs (figuren.mjs):
      Ausgangswerte der Figuren und Schatten, body[data-stage] Werte des Users und --ueber/--unter
      (Überstand des Ensembles in u, fest je Seite: Maximum über alle Etappen, Ruling H1), damit das
      Handy nie wandert und das breiteste Ensemble am Rahmen abschließt.
      --oben ist der höchste Überstand einer Figur über das Handy (u); ab 1100 px hält
      .rig.im-hero damit Abstand zur Glasleiste, statt darunter zu verschwinden. ── */
.rig{--oben:0;width:calc(var(--u) * 100);height:calc(var(--u) * 216.25);z-index:1}
.rig.fest{position:fixed;right:calc(var(--edge) + var(--u) * var(--ueber));top:max(calc(var(--bar-h) + 128px),calc(50% - 250px));transition:opacity .4s var(--ease)}
.rig.im-hero{position:absolute;right:calc(var(--edge) + var(--u) * var(--ueber));top:max(calc(var(--bar-h) + var(--u) * var(--oben) + 16px),calc(50% - var(--u) * 108.125 - 10px))}
body.foot-view .rig.fest{opacity:0;pointer-events:none}
.rig .inner{position:absolute;inset:0;transition:transform .4s var(--ease)}
.u{position:absolute}
.phone{position:absolute;inset:0;border-radius:calc(var(--u) * 13.75);overflow:hidden;background:var(--handy-grund);box-shadow:0 calc(var(--u)*14) calc(var(--u)*28) calc(var(--u)*-9) rgba(10,16,38,.4),0 2px 8px rgba(10,16,38,.15);transition:opacity .6s var(--ease);z-index:2}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(28,28,30,.1);pointer-events:none}
.phone picture{display:contents}
.phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.rig.fest .phone img{opacity:0;transition:opacity .6s var(--ease)}
.rig.fest .phone img.on{opacity:1}
body.is-finale .rig.fest .phone,body.is-finale .rig.fest .phone-shadow{opacity:0}
.floor{left:calc(var(--u)*-70);right:calc(var(--u)*-70);top:calc(var(--u)*208);height:calc(var(--u)*18);border-radius:50%;background:radial-gradient(ellipse at center,rgba(10,16,38,.22),rgba(10,16,38,0) 68%)}
.phone-shadow{left:calc(var(--u)*-6);right:calc(var(--u)*-6);top:calc(var(--u)*212.5);height:calc(var(--u)*8);border-radius:50%;background:radial-gradient(ellipse at center,rgba(10,16,38,.45),rgba(10,16,38,0) 70%);transition:opacity .6s var(--ease)}
.cs{position:absolute;z-index:2;border-radius:50%;background:radial-gradient(ellipse at center,rgba(10,16,38,.6),rgba(10,16,38,0) 68%)}
.rig.fest .cs{opacity:0;transition:opacity .5s var(--ease)}
.rig.fest .cs.on{opacity:1}
.fig{position:absolute;pointer-events:none}
.fig picture{display:contents}
.fig img{width:100%;height:auto;display:block}
.fig.behind{z-index:1}.fig.front{z-index:3}
.rig.fest .fig{opacity:0;transition:opacity .5s var(--ease)}
.rig.fest .fig.on{opacity:1}
.fig.haengt{animation:hang 4s ease-in-out infinite}
@keyframes hang{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u)*-0.8))}}
/* ── sprachhinweis (dezent, schließbar, keine Umleitung) ── */
.sprachhinweis{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:8px 8px 8px 18px;border-radius:var(--r-pill);color:#fff;
  background:var(--glass-film);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);box-shadow:0 10px 30px rgba(10,16,38,.25);font:500 14px/1.4 var(--font-sentence)}
.sprachhinweis[hidden]{display:none}
.sprachhinweis p{margin:0}
.sprachhinweis a{font:700 14px var(--font-word);padding:8px 14px;border-radius:var(--r-pill);background:#fff;color:var(--ink-tag);white-space:nowrap}
.sprachhinweis .zu{appearance:none;border:0;background:rgba(255,255,255,.14);color:#fff;width:32px;height:32px;flex:none;border-radius:50%;cursor:pointer;font:700 16px/1 var(--font-word)}
/* ── dokument (Flächenseiten: Presse, Impressum, Rechtstexte) ── */
body.flaeche{background:var(--bg-page);color:var(--text-body)}
/* Auf hellem Seitengrund käme der Film .64 für weiße Schrift auf 4,90:1, knapp über AA; hier dichter (8,75:1). */
body.flaeche .glass,body.flaeche .menu{background:rgba(20,40,46,.82)}
.dokument{box-sizing:content-box;max-width:var(--col-wide);margin:0 auto;padding:calc(var(--bar-h) + 56px) var(--edge) 96px}
.dokument h1{font-size:clamp(34px,4vw,48px);line-height:1.08;margin:0 0 12px}
.dokument h2{font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin:40px 0 12px}
.dokument h3{font-size:18px;letter-spacing:-.01em;margin:28px 0 8px}
.dokument p,.dokument li{font-size:16.5px;line-height:1.65}
.dokument a{color:var(--accent-primary-strong);text-decoration:underline;text-underline-offset:3px}
.dokument .page-header p,.dokument .unterzeile{color:var(--text-muted);margin:0 0 8px}
.dokument .container{padding:0;max-width:none}
.dokument table{border-collapse:collapse;width:100%;font-size:15px}
.dokument th,.dokument td{text-align:left;vertical-align:top}
/* color hier nötig: die generische .facts-Regel (Hero, oben) setzt sonst --ink-muted, das im
   Dark Mode dieser Fläche unlesbar wird (kein prefers-color-scheme-Gegenstück zu --ink-muted). */
.dokument dl.facts{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 20px;margin:0;max-width:none;color:var(--text-body)}
.dokument dl.facts dt{font:700 15px var(--font-word)}
.dokument dl.facts dd{margin:0}
.dokument .copy-block{background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--r-card);padding:16px 18px;margin:8px 0 20px}
.dokument .copy-btn{float:right;margin:0 0 8px 12px;appearance:none;border:1px solid var(--border-control);background:transparent;color:var(--text-body);font:700 13px var(--font-word);padding:6px 12px;border-radius:var(--r-pill);cursor:pointer}
.dokument .btn-download{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:var(--r-pill);background:var(--control-fill-strong);color:#fff;font:700 14px var(--font-word);text-decoration:none}
.dokument .logo-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.dokument .shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.dokument .shots figure{margin:0}
.dokument .shots img{width:100%;height:auto;border-radius:18px}
.dokument .shots figcaption{font:600 13.5px var(--font-word);margin-top:6px}
.dokument .press-quote{margin:24px 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent-primary)}
/* ── dunkel: der Himmel bleibt der Himmel, die Flächen werden dunkel (2.0-Tokens) ── */
@media (prefers-color-scheme:dark){
  :root{
    --flaeche:var(--famino-surface-dark); --flaeche-text:var(--famino-text-primary-dark);
    --flaeche-leise:var(--famino-text-secondary-dark); --flaeche-linie:var(--famino-border-dark);
    --handy-grund:var(--famino-bg-dark);
    --ink-calendar:var(--famino-domain-calendar-ink-dark); --ink-tasks:var(--famino-domain-tasks-ink-dark);
    --ink-timetable:var(--famino-domain-timetable-ink-dark); --ink-meals:var(--famino-domain-meals-ink-dark);
    --ink-expenses:var(--famino-domain-expenses-ink-dark); --ink-vacation:var(--famino-domain-vacation-ink-dark);
    --ink-together:var(--famino-domain-together-ink-dark); --ink-today:var(--famino-domain-today-ink-dark);
    --ink-homework:var(--famino-domain-homework-ink-dark); --ink-grades:var(--famino-domain-grades-ink-dark);
    --ink-recipes:var(--famino-domain-recipes-ink-dark); --ink-pong:var(--famino-domain-pong-ink-dark);
  }
  .tile,.grid-links a{box-shadow:0 20px 50px -30px rgba(0,0,0,.6)}
  .faq details{background:var(--flaeche);color:var(--flaeche-text);border:0!important;border-radius:var(--r-card);padding:2px 14px;margin-top:8px}
  .faq summary{color:var(--flaeche-text)}
  .faq details p{color:var(--flaeche-leise)}
}
/* ── motion ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Selektoren so spezifisch wie die mit der Transition (.rig.fest …), sonst blendet das Rig trotzdem */
  body,.area,.badge,.grid-links a,.faq summary::after,.phone,.phone-shadow,.rig.fest,.rig.fest .phone img,.rig.fest .fig,.rig.fest .cs,.rig .inner,.skip{transition:none}
  .hint i::after,.fig.haengt{animation:none}
  .rig .inner{transform:none!important}
}
/* ── responsive ── */
@media (max-width:1100px){
  :root{--u:2.4px}
  .nav,.glass .lang,.glass .btn{display:none}
  .burger{display:grid}
  .stage{flex-direction:column;align-items:flex-start;padding-top:110px}
  .tiles,.figs{grid-template-columns:1fr 1fr}
  .grid-links{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  /* Oben Platz für die Leiste und die Figuren über dem Handy (Lisa, Max bis 40,3 u), sonst ragen sie unter die Glasleiste */
  .rig.fest{position:relative;right:auto;top:auto;margin:calc(var(--bar-h) + var(--u) * 40 + 16px) 0 60px calc(var(--edge) + var(--u) * var(--unter))}
  /* Ruling H1: wie .rig.fest von links gesetzt (--unter), damit das Handy mobil auf allen Seiten gleich steht */
  .rig.im-hero{position:relative;right:auto;top:auto;margin:60px 0 40px calc(var(--u) * var(--unter))}
  .stage.hero.full{padding-right:var(--edge)}
}
@media (max-width:640px){
  :root{--u:1.8px}
  .glass{height:54px;padding:0 10px 0 16px}
  .tiles,.figs,.grid-links,.foot-grid{grid-template-columns:1fr}
  .figs .ph{width:200px}
  .foot{padding-top:56px;padding-bottom:28px}
  .dokument dl.facts{grid-template-columns:1fr}
  /* S2: fixed+left:50%+transform schrumpft die Box auf die schmalstmögliche Breite (Text ohne
     min-width gegen den nowrap-Knopf „Wechseln“) – der Text bricht fast nach jedem Wort, und als
     Overlay am unteren Rand liegt die (dadurch sehr hohe) Box über der H1, sobald die auf 390 px
     wegen des Rigs weit unten steht (Startseite). Ab hier steht er im Fluss unter der Glasleiste:
     volle Blockbreite (kein Schrumpfen mehr), schiebt den restlichen Inhalt nach unten statt ihn
     zu verdecken. flex-basis:100% auf dem Absatz stellt ihn über die Knöpfe, die in eigener
     Zeile bleiben. */
  .sprachhinweis{position:static;left:auto;right:auto;bottom:auto;transform:none;max-width:none;margin:calc(54px + 16px) 16px 16px;flex-wrap:wrap;justify-content:flex-end;padding:14px 14px 14px 18px}
  .sprachhinweis p{flex:1 1 100%}
}

/* Ruling H1: feste Lage des Handys für alle Seiten, gerechnet von website/lib/rig-lage.mjs */
:root{--ueber:41.39;--unter:43.35}