/* ==========================================================================
   Squid website: shared design system
   Source: the brand handbook, Ausgabe 6 (docs/brand/), name Squid (decision #182). Light only, no dark mode (slide 010).
   Page builders: do not edit this file. Put page-only CSS in a <style> in your page and report
   shared needs (see website/README.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts: served from this site (assets/fonts/, from docs/brand/fonts/, SIL OFL), no Google Fonts request,
   so no visitor IP address goes to a third party. Inter for work, Inter Display for large headlines
   (what Inter's optical size does at display sizes), Newsreader Italic only for moments.
   -------------------------------------------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/InterDisplay-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/InterDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/Newsreader-Italic.woff2") format("woff2"); }

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Paper (slide 010, left column) */
  --paper: #FFFFFF;            /* bg.base: Fenster, Listen */
  --bg-subtle: #FAFBFC;        /* bg.subtle: Seitenleiste */
  --bg-muted: #F3F4F7;         /* bg.muted: Felder, Hover ("Nebel", slide 009) */
  --bg-selected: #F5F6F8;      /* bg.selected: geöffnete Zeile, Handbuch-Panels */
  --bg-canvas: #EEF0F4;        /* screen slides: canvas behind app windows */
  --line: #EEF0F4;             /* Trenner */
  --line-strong: #E6E8EF;      /* table rules, outlined panels */
  --border: #E1E4EC;           /* secondary button frame, window dots */
  --border-control: #D9DCE6;   /* keycaps, switch track */
  --border-check: #C9CDDB;     /* empty checkbox */
  --hover-row: #FAFBFC;        /* mail row hover */
  --menu-hit: #F0F1F5;         /* popover hit row */

  /* Text */
  --text-1: #0A0E27;           /* Titel, ungelesen */
  --text-2: #4B5276;           /* Fließtext */
  --text-3: #9AA0BF;           /* Meta inside app mockups only (2,6:1, slide 029) */
  --text-meta: #646A8A;        /* Meta text of the website: 5,3:1 on white, 4,9:1 on #F5F6F8 (site-plan 1.3, R4 4.9) */

  /* One blue, one cyan */
  --accent: #4A5FD9;           /* Fokus, Links */
  --accent-wash: rgba(74, 95, 217, 0.15);
  --accent-soft: #E8ECFB;
  --team: #06B6D4;             /* Team-Akzent in Tinte */
  --team-text: #0E7490;
  --team-soft: #E6F7FA;

  /* Ink (slide 010, right column: surfaces for internal things and moments) */
  --ink: #0A0E27;
  --ink-deep: #070A1C;
  --ink-raised: #121633;       /* fields on ink */
  --ink-hover: #1A2151;        /* primary button hover */
  --ink-pressed: #000000;
  --ink-text-1: #FFFFFF;
  --ink-text-2: #C9CEEA;
  --ink-text-3: #8A91B8;
  --ink-text-soft: rgba(255, 255, 255, 0.7);
  --ink-text-faint: rgba(255, 255, 255, 0.55);
  --ink-muted: rgba(255, 255, 255, 0.06);
  --ink-selected: rgba(255, 255, 255, 0.09);
  --ink-line: rgba(255, 255, 255, 0.08);
  --ink-panel: rgba(255, 255, 255, 0.05);
  --ink-panel-line: rgba(255, 255, 255, 0.12);
  --ink-chip: rgba(255, 255, 255, 0.08);
  --ink-accent: #8FA0FF;
  --ink-team: #22D3EE;
  --glow-blue: radial-gradient(circle, rgba(74, 95, 217, 0.38) 0%, rgba(74, 95, 217, 0.133) 40%, transparent 70%);
  --glow-cyan: radial-gradient(circle, rgba(6, 182, 212, 0.18) 0%, rgba(6, 182, 212, 0.063) 40%, transparent 70%);

  /* Status (slide 009) */
  --done: #12A37F;             /* Erledigt */
  --later: #E8A23A;            /* Später */
  --urgent: #E5484D;           /* Dringend */
  --danger-text: #B4232A;
  --danger-line: #F3C9CB;

  /* Band mark gradient: moments only (slide 006/007) */
  --band-gradient: linear-gradient(90deg, #8FA0FF 0%, #4A5FD9 50%, #06B6D4 100%);

  /* Label colours (slide 021): dot, surface, text */
  --l-grau: #8A91B8;     --l-grau-bg: #F0F1F5;     --l-grau-text: #4B5276;
  --l-schiefer: #3B4466; --l-schiefer-bg: #E6E8EF; --l-schiefer-text: #14182B;
  --l-blau: #4A5FD9;     --l-blau-bg: #E8ECFB;     --l-blau-text: #2E3A8C;
  --l-violett: #7C5CE0;  --l-violett-bg: #F0ECFC;  --l-violett-text: #4E33A8;
  --l-pink: #D9468F;     --l-pink-bg: #FCEAF3;     --l-pink-text: #9C2462;
  --l-rot: #E5484D;      --l-rot-bg: #FDECEC;      --l-rot-text: #B4232A;
  --l-orange: #E8783A;   --l-orange-bg: #FDF0E6;   --l-orange-text: #9A4A12;
  --l-gelb: #D9A520;     --l-gelb-bg: #FBF5DE;     --l-gelb-text: #7A5A00;
  --l-oliv: #7A9A2E;     --l-oliv-bg: #F1F5E4;     --l-oliv-text: #4E6A12;
  --l-gruen: #12A37F;    --l-gruen-bg: #E3F5EF;    --l-gruen-text: #0B7458;

  /* Person colours (slide 023): avatar, note bar, "übernimmt" */
  --p-tinte: #0A0E27;
  --p-blau: #4A5FD9;
  --p-violett: #7C5CE0;
  --p-pink: #D9468F;
  --p-orange: #E8783A;
  --p-gelb: #D9A520;
  --p-gruen: #12A37F;
  --p-oliv: #7A9A2E;

  /* Type (slide 011) */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-display: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(2.75rem, 1.6rem + 5.2vw, 6.5rem);
  --fs-h1: clamp(2.375rem, 1.7rem + 3vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 2vw, 3.25rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  --fs-h4: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.4375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-meta: 0.8125rem;
  --tracking-display: -0.055em;
  --tracking-head: -0.045em;
  --tracking-title: -0.03em;

  /* Space: 4 grid (slide 012) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 3rem + 5vw, 128px);
  --gutter: 16px;
  --container: 1200px;
  --container-narrow: 760px;
  --container-wide: 1360px;
  --header-h: 64px;

  /* Radii (slide 012: eckig, wo gearbeitet wird; weich, wo man anfasst) */
  --r-0: 0;        /* rows, selection */
  --r-chip: 4px;   /* labels */
  --r-token: 5px;  /* filter tokens, small keys */
  --r-control: 6px;/* buttons, popovers, fields */
  --r-key: 7px;    /* big keycaps */
  --r-menu: 8px;   /* menus, notes on ink */
  --r-panel: 12px; /* panels, windows, iPhone buttons */
  --r-card: 16px;  /* handbook panels */
  --r-sheet: 20px; /* sheets, glass */

  /* Elevation */
  --shadow-popover: 0 0 0 1px rgba(10, 14, 39, 0.08), 0 4px 12px rgba(10, 14, 39, 0.08), 0 16px 32px -8px rgba(10, 14, 39, 0.16);
  --shadow-window: 0 0 0 1px rgba(10, 14, 39, 0.1), 0 40px 80px -40px rgba(10, 14, 39, 0.35);
  --shadow-key: inset 0 0 0 1px var(--border-control), 0 1.5px 0 var(--border-control);

  /* Motion (slide 014): animations confirm, never hold up */
  --t-fast: 120ms;
  --t-standard: 200ms;
  --t-calm: 420ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --header-h: 68px; } }

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--text-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--text-1);
  font-weight: 600;
  line-height: 1.1;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}
:where(p, ul, ol, dl, figure, blockquote, pre, table) { margin: 0; }
:where(ul, ol)[role="list"], .list-plain { list-style: none; padding: 0; }
strong, b { font-weight: 600; color: var(--text-1); }
small { font-size: var(--fs-small); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
::selection { background: var(--accent-soft); color: var(--text-1); }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(74, 95, 217, 0.35); }
a:hover { text-decoration-color: currentColor; }

/* Focus: blue ring, always visible for keyboard users (slide 016/029) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.on-ink :focus-visible, .ink :focus-visible, .section--ink :focus-visible, .hero--ink :focus-visible, .cta-band :focus-visible, .site-footer--ink :focus-visible { outline-color: var(--ink-accent); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: #FFFFFF; padding: 10px 14px; border-radius: var(--r-control);
  font-size: var(--fs-small); font-weight: 500; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.visually-hidden, .sr-only {
  position: absolute !important; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
/* Large headlines in Inter Display (Inter's display optical size) */
.display, .h1, .h2, .page-hero h1, h1.display, .cta-band h2, .plan__amount, .facts__value { font-family: var(--font-display); }
.display {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 0.95;
  color: var(--text-1);
}
.h1, .page-hero h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: var(--tracking-head); line-height: 1.02; color: var(--text-1); }
.h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking-head); line-height: 1.04; color: var(--text-1); }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-1); }
.h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--text-1); }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--text-2); max-width: 44em; text-wrap: pretty; }
.text { font-size: var(--fs-body); line-height: 1.6; color: var(--text-2); max-width: 40em; }
.small { font-size: var(--fs-small); line-height: 1.55; }
.meta { font-size: var(--fs-meta); line-height: 1.5; color: var(--text-meta); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-meta); }
.text-1 { color: var(--text-1); }
.num, .tabular { font-variant-numeric: tabular-nums; }

/* The one serif: Newsreader Italic, only for moments ("gemeinsam", "Alles erledigt.") */
.moment {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
}
:where(h1, h2, h3, .display, .h1, .h2) .moment { letter-spacing: -0.03em; font-size: 1.04em; }

/* Eyebrow: the handbook's blue chapter number plus a quiet label */
.eyebrow {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-small); font-weight: 600; color: var(--accent); line-height: 1.3;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.eyebrow__num { font-weight: 600; }
.eyebrow__label { color: var(--text-meta); font-weight: 500; }
.eyebrow--plain { color: var(--text-meta); font-weight: 500; }

/* Long-form text: help articles, legal pages, changelog entries */
.prose { color: var(--text-2); font-size: var(--fs-body); line-height: 1.7; max-width: 42em; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); letter-spacing: -0.03em; line-height: 1.15; margin-top: 2.2em; }
.prose h3 { font-size: 1.1875rem; letter-spacing: -0.015em; line-height: 1.3; margin-top: 1.8em; }
.prose h4 { font-size: 1.0625rem; margin-top: 1.5em; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--text-meta); }
.prose blockquote { border-left: 2px solid var(--ink); padding: 2px 0 2px 18px; color: var(--text-1); }
.prose code, code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em;
  background: var(--bg-muted); color: var(--text-1); padding: 0.12em 0.4em; border-radius: var(--r-chip);
  overflow-wrap: anywhere;
}
.prose pre { background: var(--bg-muted); border-radius: var(--r-control); padding: 14px 16px; overflow-x: auto; font-size: var(--fs-small); }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.prose th { color: var(--text-meta); font-weight: 500; font-size: var(--fs-meta); }
.prose dt { color: var(--text-1); font-weight: 600; margin-top: 1em; }
.prose dd { margin: 0.2em 0 0; }
.prose address { font-style: normal; }
.prose a { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }
.section--line { border-top: 1px solid var(--line); }
.section--subtle { background: var(--bg-subtle); }
.section--muted { background: var(--bg-selected); }
.section--canvas { background: var(--bg-canvas); }

.section-head { display: flex; flex-direction: column; gap: 18px; max-width: 980px; margin-bottom: clamp(32px, 2rem + 2vw, 64px); }
.section-head--center { align-items: center; text-align: center; margin-inline: auto; }
.section-head--center .lead { margin-inline: auto; }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
.stack--xs { --stack-gap: var(--s-2); }
.stack--sm { --stack-gap: var(--s-3); }
.stack--lg { --stack-gap: var(--s-6); }
.stack--xl { --stack-gap: var(--s-7); }
.stack > * { min-width: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-3)); }
.cluster--sm { --cluster-gap: var(--s-2); }
.cluster--lg { --cluster-gap: var(--s-5); }

.grid { display: grid; gap: var(--grid-gap, 20px); grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }
@media (min-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid--gap-lg { --grid-gap: clamp(24px, 1rem + 2vw, 48px); }

/* Split: text next to a visual. Stacks below 960px. */
.split { display: grid; gap: clamp(32px, 2rem + 3vw, 80px); grid-template-columns: minmax(0, 1fr); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse > :first-child { order: 2; }
  .split--top { align-items: start; }
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }

/* --------------------------------------------------------------------------
   5. Icons (slide 013: one line, round caps, no fills, 24 grid, 1.75 stroke)
   <svg class="icon" aria-hidden="true"><use href="#i-inbox"></use></svg>
   -------------------------------------------------------------------------- */
.icon {
  width: var(--icon-size, 20px); height: var(--icon-size, 20px);
  flex-shrink: 0; display: inline-block; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { --icon-size: 15px; }
.icon--md { --icon-size: 18px; }
.icon--lg { --icon-size: 24px; }
.icon--xl { --icon-size: 32px; }
.icon-tile {
  width: 44px; height: 44px; border-radius: var(--r-panel); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-muted); color: var(--text-1);
}
.icon-tile .icon { --icon-size: 22px; }
.icon-tile--ink { background: var(--ink); color: #FFFFFF; }
.icon-tile--team { background: var(--team-soft); color: var(--team-text); }
.icon-tile--accent { background: var(--accent-soft); color: var(--l-blau-text); }

/* --------------------------------------------------------------------------
   6. Brand lockup (slide 006 layout, decision #182): the band mark + the one word „Squid“ in Inter Display 600, like
   the apps' MMWordmark (mark 0,9 × the type size, gap 0,4 ×, tracking −0,045 em, never below 16 px). The mark itself
   lives only in assets/logo/ (README "Logo"), so a new mark is one file swap.
   -------------------------------------------------------------------------- */
.brand {
  font-size: 18px; display: inline-flex; align-items: center; gap: 0.4em;
  color: var(--text-1); text-decoration: none; line-height: 1; flex-shrink: 0;
  min-height: 44px;
}
.brand:hover { color: var(--text-1); }
.brand__mark { height: max(16px, 0.9em); width: auto; display: block; flex-shrink: 0; }
.brand__word { font-family: var(--font-display); font-size: 1.12em; font-weight: 600; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; color: inherit; }
.brand--lg { font-size: 32px; }
.brand--xl { font-size: 64px; }
.brand--on-ink { color: #FFFFFF; }
.brand--on-ink:hover { color: #FFFFFF; }

/* App icon (slide 008): white band on ink, band 56 % of the width, corner radius 23 %, fine light rim */
.app-icon {
  --size: 96px;
  width: var(--size); height: var(--size); border-radius: calc(var(--size) * 0.23);
  background: radial-gradient(120% 90% at 30% 0%, #1A2151 0%, #0A0E27 55%, #070A1C 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 18px 36px -18px rgba(10, 14, 39, 0.5);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.app-icon img { width: 56%; height: auto; }
.app-icon--sm { --size: 56px; }
.app-icon--lg { --size: 144px; }

/* --------------------------------------------------------------------------
   7. Buttons (slide 017: klein, eckig, Tastenkürzel vorn; primary is ink, never blue)
   -------------------------------------------------------------------------- */
.btn {
  --btn-h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 16px;
  border: 0; border-radius: var(--r-control);
  font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 500; line-height: 1.2;
  letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  background: transparent; color: var(--text-2);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn .icon { --icon-size: 16px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.btn__key { font-size: 12px; font-weight: 500; color: var(--text-meta); white-space: nowrap; font-variant-numeric: tabular-nums; }

.btn--primary { background: var(--ink); color: #FFFFFF; }
.btn--primary:hover { background: var(--ink-hover); color: #FFFFFF; }
.btn--primary:active { background: var(--ink-pressed); }
.btn--primary .btn__key { color: rgba(255, 255, 255, 0.55); }

.btn--secondary { background: var(--paper); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--border); }
.btn--secondary:hover { background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border-control); color: var(--text-1); }
.btn--secondary:active { background: var(--bg-muted); }

.btn--quiet { color: var(--text-2); padding-inline: 12px; }
.btn--quiet:hover { background: var(--bg-muted); color: var(--text-1); }

.btn--danger { color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger-line); }
.btn--danger:hover { background: var(--l-rot-bg); }

/* On ink (slide 017, "Auf Tinte"): white primary, glass secondary */
.btn--on-ink { background: #FFFFFF; color: var(--ink); }
.btn--on-ink:hover { background: #E8ECFB; color: var(--ink); }
.btn--on-ink .btn__key { color: var(--text-meta); }
.btn--glass { background: rgba(255, 255, 255, 0.1); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.btn--glass .btn__key { color: rgba(255, 255, 255, 0.55); }
.btn--quiet-ink { color: var(--ink-text-soft); }
.btn--quiet-ink:hover { background: var(--ink-muted); color: #FFFFFF; }

.btn--sm { --btn-h: 30px; padding: 0 11px; font-size: 13px; gap: 8px; }
.btn--sm .btn__key { font-size: 11px; }
.btn--lg { --btn-h: 48px; padding: 0 20px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 0; width: var(--btn-h); }
@media (max-width: 639.98px) {
  .btn { --btn-h: 44px; }
  .btn--sm { --btn-h: 36px; }
  .btn--lg { --btn-h: 50px; border-radius: var(--r-panel); font-weight: 600; } /* iPhone: 50 px, radius 12 */
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Text link with arrow ("Mehr über Team") */
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text-1); text-decoration: none; }
.link-arrow .icon { --icon-size: 16px; transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover .icon { transform: translateX(2px); }
.on-ink .link-arrow, .ink .link-arrow { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   8. Keycaps (slide 025): <kbd>E</kbd>, groups: <span class="keys"><kbd>G</kbd><kbd>I</kbd></span>
   -------------------------------------------------------------------------- */
kbd, .key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-token); background: var(--paper);
  box-shadow: var(--shadow-key);
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1; color: var(--text-1);
  font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: 0.08em;
}
.key--lg, .keys--lg kbd { min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--r-key); font-size: 19px; box-shadow: inset 0 0 0 1.5px var(--border-control), 0 2px 0 var(--border-control); }
.key--md, .keys--md kbd { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 6px; font-size: 14px; }
.keys { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block, .ink-panel, .card--ink, .plan--ink, .on-ink, .callout--team) kbd, kbd.key--ink, .toast kbd {
  background: rgba(255, 255, 255, 0.08); color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1.5px 0 rgba(255, 255, 255, 0.1);
}
kbd.is-pressed, .key.is-pressed { background: var(--ink); color: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 var(--border-control); transform: translateY(1px); }

/* Shortcut list row: label left, keys right */
.shortcut-list { display: flex; flex-direction: column; }
.shortcut { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-1); }
.shortcut__label { min-width: 0; }
.shortcut-group-title { font-size: var(--fs-meta); color: var(--text-meta); padding-bottom: 6px; }

/* --------------------------------------------------------------------------
   9. Labels, tokens, dots (slide 019, 021)
   -------------------------------------------------------------------------- */
.chip {
  --c-dot: var(--l-grau); --c-bg: var(--l-grau-bg); --c-text: var(--l-grau-text);
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 7px; border-radius: var(--r-chip);
  background: var(--c-bg); color: var(--c-text);
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; flex-shrink: 0;
}
.chip--dot::before, .chip--team::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-dot); flex-shrink: 0; }
.chip--lg { height: 26px; padding: 0 10px; font-size: 13px; border-radius: 5px; }
.chip--grau { --c-dot: var(--l-grau); --c-bg: var(--l-grau-bg); --c-text: var(--l-grau-text); }
.chip--schiefer { --c-dot: var(--l-schiefer); --c-bg: var(--l-schiefer-bg); --c-text: var(--l-schiefer-text); }
.chip--blau { --c-dot: var(--l-blau); --c-bg: var(--l-blau-bg); --c-text: var(--l-blau-text); }
.chip--violett { --c-dot: var(--l-violett); --c-bg: var(--l-violett-bg); --c-text: var(--l-violett-text); }
.chip--pink { --c-dot: var(--l-pink); --c-bg: var(--l-pink-bg); --c-text: var(--l-pink-text); }
.chip--rot { --c-dot: var(--l-rot); --c-bg: var(--l-rot-bg); --c-text: var(--l-rot-text); }
.chip--orange { --c-dot: var(--l-orange); --c-bg: var(--l-orange-bg); --c-text: var(--l-orange-text); }
.chip--gelb { --c-dot: var(--l-gelb); --c-bg: var(--l-gelb-bg); --c-text: var(--l-gelb-text); }
.chip--oliv { --c-dot: var(--l-oliv); --c-bg: var(--l-oliv-bg); --c-text: var(--l-oliv-text); }
.chip--gruen { --c-dot: var(--l-gruen); --c-bg: var(--l-gruen-bg); --c-text: var(--l-gruen-text); }
/* Team is cyan plus the word (colour never alone, slide 029). Cyan is reserved for team. */
.chip--team { --c-dot: var(--team); --c-bg: var(--team-soft); --c-text: var(--team-text); }
.chip--ink { --c-dot: var(--ink-team); --c-bg: var(--ink-chip); --c-text: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ink-panel-line); }

/* Filter tokens (search DSL): von:Jonas hat:Anhang */
.token { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--r-token); font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--ink); color: #FFFFFF; }
.token--muted { background: var(--bg-muted); color: var(--text-2); }

.dot { --c-dot: var(--text-1); display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-dot); flex-shrink: 0; }
.dot--team { --c-dot: var(--team); }
.dot--done { --c-dot: var(--done); }
.dot--later { --c-dot: var(--later); }
.dot--urgent { --c-dot: var(--urgent); }
.dot--accent { --c-dot: var(--accent); }

/* Status line: dot + word ("Läuft", "Geschlossene Testphase") */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-2); font-weight: 500; }
.status .dot { width: 8px; height: 8px; }

/* --------------------------------------------------------------------------
   10. Avatars (slide 023): <span class="avatar avatar--violett">LH</span>
   -------------------------------------------------------------------------- */
.avatar {
  --p: var(--p-tinte); --size: 32px;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: var(--p); color: #FFFFFF;
  font-size: calc(var(--size) * 0.38); font-weight: 600; line-height: 1; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative;
  font-variant-numeric: normal;
}
.avatar--xs { --size: 18px; font-size: 7px; }
.avatar--sm { --size: 24px; font-size: 9px; }
.avatar--md { --size: 28px; font-size: 11px; }
.avatar--lg { --size: 40px; font-size: 14px; }
.avatar--xl { --size: 56px; font-size: 20px; }
.avatar--tinte { --p: var(--p-tinte); }
.avatar--blau { --p: var(--p-blau); }
.avatar--violett { --p: var(--p-violett); }
.avatar--pink { --p: var(--p-pink); }
.avatar--orange { --p: var(--p-orange); }
.avatar--gelb { --p: var(--p-gelb); }
.avatar--gruen { --p: var(--p-gruen); }
.avatar--oliv { --p: var(--p-oliv); }
/* Contacts (external people) are soft, not a person colour: */
.avatar--contact { background: var(--accent-soft); color: var(--l-blau-text); }
.avatar--contact-team { background: var(--team-soft); color: var(--team-text); }
.avatar__presence { position: absolute; right: -1px; bottom: -1px; width: 28%; height: 28%; border-radius: 50%; background: var(--done); box-shadow: 0 0 0 2px var(--paper); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar + .avatar { margin-left: calc(var(--size) * -0.22); box-shadow: 0 0 0 2px var(--paper); }
.ink .avatar-stack .avatar + .avatar, .on-ink .avatar-stack .avatar + .avatar { box-shadow: 0 0 0 2px var(--ink); }

/* Person line: "Lena übernimmt seit 09:51" (straight bar in the person's colour) */
.owner-line {
  --p: var(--p-violett);
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px;
  background: var(--bg-muted); box-shadow: inset 3px 0 0 var(--p); border-radius: 0 10px 10px 0;
  font-size: var(--fs-small); color: var(--text-1);
}
.owner-line b { font-weight: 600; }
.owner-line .meta { margin-left: auto; }

/* --------------------------------------------------------------------------
   11. Ink: everything internal / team and the moments (slide 022)
   -------------------------------------------------------------------------- */
.ink, .section--ink, .hero--ink, .cta-band {
  background: var(--ink-deep); color: var(--ink-text-soft);
  position: relative; overflow: hidden; isolation: isolate;
}
.ink :where(h1, h2, h3, h4, strong, b), .section--ink :where(h1, h2, h3, h4, strong, b), .hero--ink :where(h1, h2, h3, h4, strong, b), .cta-band :where(h1, h2, h3, h4, strong, b),
.ink .display, .ink .h1, .ink .h2, .ink .h3, .section--ink .h2, .section--ink .h3, .cta-band .h2 { color: #FFFFFF; }
.ink .lead, .section--ink .lead, .hero--ink .lead, .cta-band .lead { color: var(--ink-text-soft); }
.ink .meta, .section--ink .meta, .hero--ink .meta, .cta-band .meta { color: var(--ink-text-3); }
.ink .eyebrow, .section--ink .eyebrow, .hero--ink .eyebrow, .cta-band .eyebrow { color: var(--ink-accent); }
.ink .eyebrow__label, .section--ink .eyebrow__label, .hero--ink .eyebrow__label { color: var(--ink-text-3); }
.ink a:not(.btn), .section--ink a:not(.btn), .hero--ink a:not(.btn), .cta-band a:not(.btn) { color: var(--ink-accent); text-decoration-color: rgba(143, 160, 255, 0.4); }
/* The two glows from the cover (slide 001, 022) */
.glow::before, .glow::after, .section--ink::before, .section--ink::after, .hero--ink::before, .hero--ink::after, .cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none;
}
.glow::before, .section--ink::before, .hero--ink::before, .cta-band::before {
  width: min(900px, 120vw); height: min(900px, 120vw); left: -120px; top: -160px; background: var(--glow-blue);
}
.glow::after, .section--ink::after, .hero--ink::after, .cta-band::after {
  width: min(800px, 110vw); height: min(800px, 110vw); right: -160px; bottom: -260px; background: var(--glow-cyan);
}
.ink.no-glow::before, .ink.no-glow::after { display: none; }

/* An ink block inside paper (team panel, internal note area) */
.ink-block { background: var(--ink); color: var(--ink-text-soft); border-radius: var(--r-card); padding: clamp(20px, 1rem + 1.5vw, 36px); position: relative; overflow: hidden; isolation: isolate; }
.ink-block :where(h2, h3, h4, strong, b) { color: #FFFFFF; }
/* Glass panel on ink (slide 022 panels) */
.ink-panel {
  background: var(--ink-panel); box-shadow: inset 0 0 0 1px var(--ink-panel-line);
  border-radius: var(--r-card); padding: clamp(20px, 1rem + 1.5vw, 36px); color: var(--ink-text-soft);
}
.ink-panel__title { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.5); }
.ink-field {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px;
  border-radius: var(--r-menu); background: var(--ink-raised); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #FFFFFF; font-size: var(--fs-small);
}
.ink-tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-menu); background: var(--ink-chip); border: 1px solid var(--ink-panel-line); color: #FFFFFF; font-size: var(--fs-small); }

/* Team note in the Verlauf: avatar + bubble with a straight bar in the person colour (slide 023) */
.note { --p: var(--p-violett); display: flex; gap: 12px; align-items: flex-start; }
.note__body {
  background: var(--bg-muted); box-shadow: inset 3px 0 0 var(--p); border-radius: 0 10px 10px 0;
  padding: 10px 14px; font-size: var(--fs-small); line-height: 1.5; color: var(--text-1); min-width: 0;
}
.note__who { display: block; font-size: var(--fs-meta); color: var(--text-3); margin-bottom: 2px; }
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block, .ink-panel, .card--ink, .plan--ink, .on-ink, .callout--team) .note__body, .note--ink .note__body {
  background: rgba(255, 255, 255, 0.08); box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-menu); color: #FFFFFF;
}
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block, .ink-panel, .card--ink, .plan--ink, .on-ink, .callout--team) .note__who, .note--ink .note__who { color: var(--ink-text-3); }
/* "Intern · sieht nur das Team" divider */
.intern-divider { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--text-1); }
.intern-divider::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--team); flex-shrink: 0; }
.intern-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block, .ink-panel, .card--ink, .plan--ink, .on-ink, .callout--team) .intern-divider { color: #FFFFFF; }
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block, .ink-panel, .card--ink, .plan--ink, .on-ink, .callout--team) .intern-divider::after { background: var(--ink-line); }

/* --------------------------------------------------------------------------
   12. Cards and panels (only where needed; handbook panels are flat, 16 px)
   -------------------------------------------------------------------------- */
.card { background: var(--bg-selected); border-radius: var(--r-card); padding: clamp(20px, 1rem + 1.2vw, 36px); display: flex; flex-direction: column; gap: 14px; min-width: 0; color: var(--text-2); }
.card--line { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); }
.card--ink { background: var(--ink); color: var(--ink-text-soft); }
.card--ink :where(h2, h3, h4, strong) { color: #FFFFFF; }
.card__label { font-size: var(--fs-small); color: var(--text-meta); line-height: 1.5; }
.card--ink .card__label { color: rgba(255, 255, 255, 0.5); }
.card__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); line-height: 1.2; }
.card__text { font-size: var(--fs-small); line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: 8px; }
a.card { text-decoration: none; transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
a.card:hover { background: var(--bg-muted); }
a.card--line:hover { box-shadow: inset 0 0 0 1px var(--border-control); background: var(--paper); }

/* State card (slide 028): title + one sentence */
.state { background: var(--bg-selected); border-radius: var(--r-card); padding: 24px; min-width: 0; }
.state__title { font-size: 1.125rem; font-weight: 600; color: var(--text-1); letter-spacing: -0.015em; }
.state__text { font-size: var(--fs-small); margin-top: 4px; }

/* --------------------------------------------------------------------------
   13. Feature rows and lists
   -------------------------------------------------------------------------- */
.feature { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.feature__icon { color: var(--text-1); }
.feature__icon .icon { --icon-size: 24px; }
.feature__title { font-size: 1.125rem; font-weight: 600; color: var(--text-1); letter-spacing: -0.015em; line-height: 1.3; }
.feature__text { font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); }
.feature__keys { margin-top: 2px; }
.ink .feature__title, .ink .feature__icon, .section--ink .feature__title, .section--ink .feature__icon { color: #FFFFFF; }
.ink .feature__text, .section--ink .feature__text { color: var(--ink-text-soft); }

/* Feature list: the handbook's token table look (term | description | aside), lines between */
.feature-list { display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.feature-list__row {
  display: grid; gap: 6px 32px; padding: 20px 0; border-bottom: 1px solid var(--line-strong);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 800px) {
  /* One set of columns for the whole list (subgrid), so descriptions line up even when the asides differ in width */
  .feature-list { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto; column-gap: 32px; }
  .feature-list__row { grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; }
}
.feature-list__term { font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: 10px; }
.feature-list__desc { color: var(--text-2); font-size: var(--fs-small); line-height: 1.6; }
.feature-list__aside { color: var(--text-meta); font-size: var(--fs-small); white-space: nowrap; }
.ink .feature-list, .section--ink .feature-list, .ink .feature-list__row, .section--ink .feature-list__row { border-color: var(--ink-line); }
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block, .ink-panel, .card--ink, .plan--ink, .on-ink, .callout--team) .shortcut { color: #FFFFFF; border-bottom-color: var(--ink-line); }
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block, .ink-panel, .card--ink, .plan--ink, .on-ink, .callout--team) .shortcut-group-title { color: var(--ink-text-3); }
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block, .ink-panel, .card--ink, .plan--ink, .on-ink, .callout--team) .chip--team { --c-bg: rgba(6, 182, 212, 0.14); --c-text: #FFFFFF; --c-dot: var(--ink-team); }
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block, .ink-panel, .card--ink, .plan--ink, .on-ink, .callout--team) .status { color: var(--ink-text-soft); }
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block, .ink-panel, .card--ink, .plan--ink, .on-ink, .callout--team) .avatar__presence { box-shadow: 0 0 0 2px var(--ink); }
.ink .feature-list__term, .section--ink .feature-list__term { color: #FFFFFF; }
.ink .feature-list__desc, .section--ink .feature-list__desc { color: var(--ink-text-soft); }

/* Feature row: a big split block per feature (text + visual) with the chapter number */
.feature-row { display: grid; gap: clamp(28px, 1.5rem + 3vw, 72px); grid-template-columns: minmax(0, 1fr); align-items: center; padding-block: clamp(40px, 2rem + 3vw, 88px); }
.feature-row + .feature-row { border-top: 1px solid var(--line); }
.feature-row > * { min-width: 0; }
.feature-row__copy { display: flex; flex-direction: column; gap: 16px; }
.feature-row__points { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding: 0; list-style: none; }
.feature-row__points li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); line-height: 1.55; }
.feature-row__points .icon { --icon-size: 18px; color: var(--text-1); margin-top: 2px; }
@media (min-width: 960px) {
  .feature-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .feature-row--reverse > .feature-row__copy { order: 2; }
  .feature-row--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Check list */
.checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.55; }
.checks li::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px;
  background: currentColor; color: var(--text-1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.checks--not li::before {
  color: var(--text-meta);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.ink .checks li::before, .section--ink .checks li::before { color: #FFFFFF; }

/* Numbered steps (help, onboarding) */
.steps { list-style: none; padding: 0; counter-reset: step; display: flex; flex-direction: column; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.steps > li::before {
  content: counter(step, decimal-leading-zero); grid-row: span 2;
  font-size: var(--fs-small); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 2px;
}
.steps__title { font-weight: 600; color: var(--text-1); }
.steps__text { font-size: var(--fs-small); line-height: 1.6; }

/* Stat line (only real, documented numbers) */
.facts { display: grid; gap: 1px; background: var(--line-strong); border-block: 1px solid var(--line-strong); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.facts__item { background: var(--paper); padding: 20px 20px 20px 0; }
.facts__value { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); font-weight: 600; letter-spacing: -0.04em; color: var(--text-1); line-height: 1.1; font-variant-numeric: tabular-nums; }
.facts__label { font-size: var(--fs-small); color: var(--text-2); margin-top: 4px; }

/* --------------------------------------------------------------------------
   14. Tables: comparison and pricing (slide 024 table look)
   Wrap in .table-wrap so a wide table scrolls inside itself, never the page.
   -------------------------------------------------------------------------- */
.table-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 4px; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); color: var(--text-2); min-width: 560px; }
.table--fit { min-width: 0; } /* narrow tables that fit a phone without scrolling */
.table caption { text-align: left; font-size: var(--fs-meta); color: var(--text-meta); padding-bottom: 10px; }
.table th, .table td { text-align: left; vertical-align: middle; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line-strong); }
.table thead th { font-size: var(--fs-meta); font-weight: 500; color: var(--text-meta); padding-top: 0; border-bottom-color: var(--line-strong); vertical-align: bottom; }
.table tbody th { color: var(--text-1); font-weight: 600; }
.table td.is-yes, .table td.is-no { text-align: center; }
.table th.is-col, .table td.is-col { text-align: center; }
.table .icon { --icon-size: 18px; }
.table .is-yes .icon { color: var(--text-1); }
.table .is-no .icon { color: var(--text-meta); }
.table .is-highlight { background: var(--bg-selected); }
.table thead .is-highlight { color: var(--text-1); box-shadow: inset 0 2px 0 var(--ink); }
.table tr.table__group th { padding-top: 28px; font-size: var(--fs-meta); color: var(--text-meta); font-weight: 500; }

/* Plan cards (Preise) */
.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.plan { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 1rem + 1.2vw, 36px); border-radius: var(--r-card); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); min-width: 0; }
.plan--featured { box-shadow: inset 0 0 0 1px var(--ink), 0 24px 48px -32px rgba(10, 14, 39, 0.35); }
.plan--ink { background: var(--ink); box-shadow: none; color: var(--ink-text-soft); }
.plan--ink :where(h2, h3, strong) { color: #FFFFFF; }
.plan__name { font-size: 1.125rem; font-weight: 600; color: var(--text-1); }
.plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__amount { font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); font-weight: 600; letter-spacing: -0.045em; color: var(--text-1); line-height: 1; font-variant-numeric: tabular-nums; }
.plan__unit { font-size: var(--fs-small); color: var(--text-2); }
.plan--ink .plan__amount, .plan--ink .plan__name { color: #FFFFFF; }
.plan--ink .plan__unit { color: var(--ink-text-3); }
.plan .checks { font-size: var(--fs-small); }
.plan__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------------------
   15. FAQ (details/summary)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 16px 0; font-size: 1.0625rem; font-weight: 600; color: var(--text-1); line-height: 1.4;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: ""; width: 20px; height: 20px; flex-shrink: 0; background: var(--text-meta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--t-standard) var(--ease);
}
.faq__item[open] > summary::after { transform: rotate(45deg); background: var(--text-1); }
.faq__item > summary:hover { color: var(--text-1); }
.faq__item > summary:hover::after { background: var(--text-1); }
.faq__answer { padding: 0 0 22px; max-width: 46em; color: var(--text-2); font-size: var(--fs-small); line-height: 1.7; }
.faq__answer > * + * { margin-top: 0.8em; }

/* --------------------------------------------------------------------------
   16. Callouts
   -------------------------------------------------------------------------- */
.callout {
  --bar: var(--accent);
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; border-radius: 0 var(--r-panel) var(--r-panel) 0;
  background: var(--bg-muted); box-shadow: inset 2px 0 0 var(--bar);
  font-size: var(--fs-small); line-height: 1.6; color: var(--text-2);
}
.callout > .icon { --icon-size: 18px; color: var(--bar); margin-top: 2px; }
.callout__title { display: block; font-weight: 600; color: var(--text-1); margin-bottom: 2px; }
.callout--info { --bar: var(--accent); }
.callout--draft { --bar: var(--later); background: var(--l-gelb-bg); }
.callout--draft > .icon { color: var(--l-orange-text); }
.callout--warn { --bar: var(--urgent); background: var(--l-rot-bg); }
.callout--warn > .icon { color: var(--danger-text); }
.callout--done { --bar: var(--done); background: var(--l-gruen-bg); }
.callout--done > .icon { color: var(--l-gruen-text); }
.callout--team { --bar: var(--team); background: var(--ink); color: var(--ink-text-soft); }
.callout--team .callout__title { color: #FFFFFF; }
.callout--team > .icon { color: var(--ink-team); }

/* Small banner above the header, e.g. test phase note */
.notice-bar { background: var(--ink); color: var(--ink-text-soft); font-size: var(--fs-meta); }
.notice-bar .container { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; padding-block: 6px; text-align: center; flex-wrap: wrap; }
.notice-bar a { color: #FFFFFF; }
.notice-bar .dot { background: var(--ink-team); }

/* --------------------------------------------------------------------------
   17. Breadcrumbs (help articles)
   -------------------------------------------------------------------------- */
.breadcrumbs { font-size: var(--fs-meta); color: var(--text-meta); }
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.breadcrumbs li + li::before { content: "/"; color: var(--border-check); }
.breadcrumbs a { color: var(--text-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text-1); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text-1); }

/* Help article layout: side nav + article */
.doc-layout { display: grid; gap: clamp(32px, 2rem + 2vw, 72px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .doc-layout { grid-template-columns: 240px minmax(0, 1fr); } }
.doc-nav { font-size: var(--fs-small); }
.doc-nav__title { font-size: var(--fs-meta); color: var(--text-meta); margin-bottom: 8px; }
.doc-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.doc-nav a { display: flex; align-items: center; min-height: 34px; padding: 0 12px; color: var(--text-2); text-decoration: none; border-radius: 0; }
.doc-nav a:hover { background: var(--bg-muted); color: var(--text-1); }
.doc-nav a[aria-current="page"] { background: var(--bg-selected); box-shadow: inset 2px 0 0 var(--ink); color: var(--text-1); font-weight: 600; }
@media (min-width: 1024px) { .doc-nav { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }

/* Article meta and pager */
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-meta); color: var(--text-meta); }
.pager { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: var(--s-7); }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--r-panel); box-shadow: inset 0 0 0 1px var(--line-strong); text-decoration: none; color: var(--text-1); font-weight: 600; }
.pager a:hover { box-shadow: inset 0 0 0 1px var(--border-control); background: var(--bg-subtle); }
.pager span { font-size: var(--fs-meta); font-weight: 400; color: var(--text-meta); }
.pager .pager__next { text-align: right; }

/* --------------------------------------------------------------------------
   18. Forms (demo forms show an inline note, site.js; the access form sends, see 28 and funnel.js)
   -------------------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.form-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--fs-small); font-weight: 500; color: var(--text-1); }
.field__hint { font-size: var(--fs-meta); color: var(--text-meta); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 0; border-radius: var(--r-control); background: var(--bg-muted); color: var(--text-1);
  font-size: 1rem; line-height: 1.4;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.textarea { min-height: 132px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-meta); }
.input:hover, .select:hover, .textarea:hover { background: #EEF0F4; }
.input:focus, .select:focus, .textarea:focus { outline: none; background: var(--paper); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-wash); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }
.select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646A8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); color: var(--text-2); line-height: 1.5; }
.checkbox input { appearance: none; width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--border-check); background: var(--paper); display: inline-grid; place-content: center; }
.checkbox input:checked { background: var(--ink); box-shadow: none; }
.checkbox input:checked::after { content: ""; width: 11px; height: 11px; background: #FFFFFF; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.checkbox input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-note { font-size: var(--fs-small); }
.form-note:empty { display: none; }
/* Field errors of forms that send (funnel.js, form[data-mm-form]): the message under the field, a red frame. */
.field__error { font-size: var(--fs-meta); color: var(--danger-text); }
.field.is-invalid :is(.input, .select, .textarea) { box-shadow: inset 0 0 0 1px var(--urgent); background: var(--paper); }
.field.is-invalid .field__label { color: var(--danger-text); }
.checkbox.is-invalid { flex-wrap: wrap; }
.checkbox.is-invalid > :not(input):not(.field__error) { flex: 1 1 0; min-width: 0; }
.checkbox.is-invalid input { box-shadow: inset 0 0 0 1.5px var(--urgent); }
.checkbox .field__error { flex-basis: 100%; padding-left: 28px; }
/* Honeypot: a field people never see or reach (bots fill it, the server then stores nothing). */
.form-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Selectable address / value with copy button */
.copy-field { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 4px 4px 12px; border-radius: var(--r-control); background: var(--bg-muted); color: var(--text-1); font-size: var(--fs-small); font-weight: 500; }
.copy-field__value { user-select: all; -webkit-user-select: all; overflow-wrap: anywhere; min-width: 0; }
.copy-field .btn { --btn-h: 32px; padding: 0 10px; font-size: 13px; }
.copy-field .btn[data-copied] { color: var(--l-gruen-text); }

/* --------------------------------------------------------------------------
   19. Toast and popover (slide 018, 024)
   -------------------------------------------------------------------------- */
.toast {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 38px; padding: 0 14px; border-radius: var(--r-control);
  background: var(--ink); color: #FFFFFF; font-size: 13px; line-height: 1.3;
  box-shadow: 0 12px 28px -12px rgba(10, 14, 39, 0.5);
}
.toast__action { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; color: #FFFFFF; cursor: pointer; }
.toast__key { font-size: 11px; color: rgba(255, 255, 255, 0.55); }
.toast-region { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; pointer-events: none; display: flex; justify-content: center; width: calc(100% - 32px); }
.toast-region .toast { pointer-events: auto; max-width: 100%; }

.menu { width: 240px; max-width: 100%; border-radius: var(--r-menu); background: var(--paper); box-shadow: var(--shadow-popover); padding: 4px 0; display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: var(--text-1); }
.menu__title { height: 26px; display: flex; align-items: center; padding: 0 10px; font-size: 12px; color: var(--text-3); }
.menu__item { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; }
.menu__item .btn__key, .menu__hint { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-3); }
.menu__item.is-hit { background: var(--menu-hit); }

/* --------------------------------------------------------------------------
   20. Mail rows (slide 018, 020): square rows, straight 2 px ink bar when open
   -------------------------------------------------------------------------- */
.mail-list { list-style: none; margin: 0; padding: 0; background: var(--paper); container-type: inline-size; container-name: maillist; }
.mail-list__day { display: flex; align-items: flex-end; height: 36px; padding: 0 20px 6px 38px; font-size: 12px; color: var(--text-3); }
.mail-row {
  display: grid; align-items: center; column-gap: 14px;
  grid-template-columns: 8px minmax(0, 170px) minmax(0, 1fr) auto;
  grid-template-areas: "dot from main meta";
  min-height: 46px; padding: 0 20px 0 16px;
  font-size: 14px; color: var(--text-1); position: relative;
  transition: background-color var(--t-fast) var(--ease), opacity var(--t-standard) var(--ease), transform var(--t-standard) var(--ease);
}
.mail-row:hover { background: var(--hover-row); }
.mail-row__dot { grid-area: dot; width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.mail-row.is-unread .mail-row__dot { background: var(--ink); }
.mail-row__from { grid-area: from; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row.is-unread .mail-row__from { font-weight: 600; }
.mail-row__main { grid-area: main; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.mail-row__subject { flex-shrink: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mail-row.is-unread .mail-row__subject { font-weight: 600; }
.mail-row__preview { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mail-row__meta { grid-area: meta; display: flex; align-items: center; gap: 8px; justify-self: end; }
.mail-row__time { font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mail-row__meta .icon { --icon-size: 14px; color: var(--text-3); }
.mail-row.is-open, .mail-row.is-selected { background: var(--bg-selected); box-shadow: inset 2px 0 0 var(--ink); }
.mail-row.is-marked { background: rgba(74, 95, 217, 0.06); }
.mail-row.is-leaving { opacity: 0; transform: translateX(24px); }
/* Two-line variant (D-09 / iPhone) and automatic wrap in narrow containers */
.mail-list--two-line .mail-row, .mail-row--two-line {
  grid-template-columns: 8px minmax(0, 1fr) auto;
  grid-template-areas: "dot from meta" ". main main";
  row-gap: 2px; padding-block: 12px; min-height: 64px; align-items: center;
}
@container maillist (max-width: 560px) {
  .mail-row {
    grid-template-columns: 6px minmax(0, 1fr) auto;
    grid-template-areas: "dot from meta" ". main main";
    row-gap: 3px; column-gap: 10px; padding: 11px 16px 11px 12px; min-height: 64px; font-size: 13.5px;
  }
  .mail-list__day { padding-left: 28px; }
}

/* --------------------------------------------------------------------------
   21. Mock frames: fixed-size app mockups scaled to their container
   <div class="mock" data-mock style="--mock-w:1280; --mock-h:800"><div class="mock__stage">…1280x800…</div></div>
   -------------------------------------------------------------------------- */
.mock {
  --mock-w: 1280; --mock-h: 800;
  position: relative; width: 100%; max-width: calc(var(--mock-max, 100000) * 1px);
  aspect-ratio: var(--mock-w) / var(--mock-h);
  margin-inline: auto;
}
.mock__stage {
  position: absolute; left: 0; top: 0;
  width: calc(var(--mock-w) * 1px); height: calc(var(--mock-h) * 1px);
  transform-origin: 0 0; transform: scale(var(--mock-scale, 0.25));
  font-family: var(--font-sans); color: var(--text-1); font-size: 13px; line-height: normal;
  text-align: left; pointer-events: none; user-select: none;
}
.mock__stage * { line-height: inherit; }
.mock__stage :where(h1, h2, h3, h4, p) { text-wrap: initial; hyphens: manual; }
.mock--interactive .mock__stage { pointer-events: auto; user-select: auto; }
.mock--iphone { --mock-w: 402; --mock-h: 874; --mock-max: 360; }
.mock--mac { --mock-w: 1280; --mock-h: 800; }
.mock-caption { margin-top: 14px; font-size: var(--fs-meta); color: var(--text-3); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mock-caption .screen-id { flex-shrink: 0; }
.screen-id { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 5px; background: var(--ink); color: #FFFFFF; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
/* Canvas behind a mock, like the screen slides */
.mock-canvas { background: var(--bg-canvas); border-radius: var(--r-card); padding: clamp(16px, 0.5rem + 3vw, 56px); }
.mock-canvas--ink { background: var(--ink-deep); }
.mock-pair { display: flex; gap: clamp(16px, 1rem + 2vw, 48px); justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.mock-pair > .mock { flex: 1 1 220px; }

/* Mac window (1280 x 800 in mock pixels, slide D-08) */
.mac-window {
  width: calc(var(--mock-w, 1280) * 1px); height: calc(var(--mock-h, 800) * 1px);
  border-radius: 12px; background: var(--paper); box-shadow: var(--shadow-window);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  font-family: var(--font-sans); color: var(--text-1);
}
.mac-window__bar { height: 38px; flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--bg-subtle); border-bottom: 1px solid var(--line); }
.mac-window__bar > i { width: 12px; height: 12px; border-radius: 6px; background: var(--border); }
.mac-window__title { flex: 1; text-align: center; font-size: 12px; color: var(--text-3); font-weight: 500; padding-right: 52px; }
.mac-window__body { flex: 1; min-height: 0; display: flex; position: relative; }
.mac-window--ink { background: var(--ink-deep); }
.mac-window--ink .mac-window__bar { background: var(--ink); border-bottom-color: var(--ink-line); }
.mac-window--ink .mac-window__bar > i { background: rgba(255, 255, 255, 0.14); }
.mac-window--ink .mac-window__title { color: var(--ink-text-3); }

/* iPhone frame (402 x 874 in mock pixels, slides M-xx) */
.iphone {
  width: 402px; height: 874px; border-radius: 62px; position: relative; overflow: hidden;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(10, 14, 39, 0.14), 0 0 0 7px #F5F6F8, 0 0 0 8px rgba(10, 14, 39, 0.1), 0 40px 80px -40px rgba(10, 14, 39, 0.45);
  font-family: var(--font-sans); color: var(--text-1);
}
.mock--iphone .mock__stage { padding: 0; }
.mock--iphone { padding: 0; }
.iphone__screen { position: absolute; inset: 0; overflow: hidden; }
.iphone__screen > div { width: 402px; }
.iphone::before { /* status bar time */
  content: "9:41"; position: absolute; z-index: 5; left: 50px; top: 19px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1);
}
.iphone::after { /* Dynamic Island */
  content: ""; position: absolute; z-index: 5; left: 50%; top: 11px; transform: translateX(-50%);
  width: 124px; height: 36px; border-radius: 20px; background: #000000;
}
.iphone__status { position: absolute; z-index: 5; right: 34px; top: 21px; display: flex; gap: 6px; align-items: center; }
.iphone__status i { display: block; width: 18px; height: 11px; border-radius: 3px; background: currentColor; opacity: 0.9; }
.iphone__status i:first-child { width: 17px; clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 1px; }
.iphone__status i:last-child { width: 25px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px currentColor; background: linear-gradient(90deg, currentColor 70%, transparent 70%); background-clip: content-box; padding: 2.5px; opacity: 1; }
.iphone__home { position: absolute; z-index: 5; left: 50%; bottom: 8px; transform: translateX(-50%); width: 140px; height: 5px; border-radius: 3px; background: var(--text-1); }
.iphone--ink { background: var(--ink-deep); }
.iphone--ink::before { color: #FFFFFF; }
.iphone--ink .iphone__status { color: #FFFFFF; }
.iphone--ink .iphone__home { background: #FFFFFF; }

/* Tabs inside mock UIs and the triage demo (slide 019 Navigation) */
.mail-tabs { display: flex; align-items: baseline; gap: 18px; flex-wrap: nowrap; overflow: hidden; }
.mail-tab { font-size: 15px; font-weight: 500; color: var(--text-3); display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.mail-tab.is-active { font-weight: 600; color: var(--text-1); }
.mail-tab__count { font-size: 11px; color: var(--text-3); font-weight: 500; }
.mail-tab--team::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--team); align-self: center; }

/* --------------------------------------------------------------------------
   22. Heroes
   -------------------------------------------------------------------------- */
/* Home hero: the product is the hero. Headline, then a live inbox you can triage with E / H / J / K. */
.hero { padding-top: clamp(40px, 2rem + 4vw, 112px); padding-bottom: var(--section-y); position: relative; }
.hero__grid { display: grid; gap: clamp(32px, 1.5rem + 3vw, 64px); grid-template-columns: minmax(0, 1fr); }
.hero__grid > * { min-width: 0; }
.hero__head { display: flex; flex-direction: column; gap: 22px; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
.hero__note { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--text-meta); }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 56px; row-gap: 48px; align-items: start; }
  .hero__head { grid-column: 1 / -1; max-width: 1080px; }
  .hero__copy { padding-top: 8px; }
}
.hero--ink { color: var(--ink-text-soft); }
.hero--ink .display, .hero--ink h1 { color: #FFFFFF; }
.hero--ink .hero__note { color: var(--ink-text-3); }

/* Inner page hero: chapter number, h1, lead; sits on paper with a fine rule under it */
.page-hero { padding-top: clamp(40px, 2rem + 3vw, 96px); padding-bottom: clamp(40px, 2rem + 2.5vw, 80px); border-bottom: 1px solid var(--line); }
.page-hero__inner { display: flex; flex-direction: column; gap: 18px; max-width: 980px; }
.page-hero .lead { max-width: 40em; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.page-hero--plain { border-bottom: 0; }
.page-hero--ink { border-bottom: 0; background: var(--ink-deep); }
.page-hero--ink h1 { color: #FFFFFF; }
.page-hero--ink .lead { color: var(--ink-text-soft); }
.page-hero--split .page-hero__inner { max-width: none; }
@media (min-width: 960px) {
  .page-hero--split .container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
}

/* Closing moment (ink + glows, gradient band allowed here) */
.cta-band { padding-block: clamp(64px, 3rem + 5vw, 136px); }
.cta-band__inner { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; max-width: 900px; }
.cta-band__mark { height: 40px; width: auto; }
.cta-band .h2 .moment, .cta-band h2 .moment { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   23. Triage demo (hero): a real list you can clear with the keyboard
   -------------------------------------------------------------------------- */
.triage {
  position: relative; border-radius: var(--r-panel); background: var(--paper);
  box-shadow: var(--shadow-window); overflow: hidden; display: flex; flex-direction: column;
  min-width: 0; container: triage / inline-size;
}
.triage:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.triage__bar { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px 0 38px; border-bottom: 1px solid var(--line); }
@container triage (max-width: 560px) { .triage__bar { padding-left: 28px; } .triage__hint { display: none; } }
.triage__bar .mail-tabs { flex: 1; min-width: 0; }
.triage__win { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--bg-subtle); border-bottom: 1px solid var(--line); }
.triage__win i { width: 11px; height: 11px; border-radius: 50%; background: var(--border); }
.triage__win span { flex: 1; text-align: center; font-size: 12px; color: var(--text-3); font-weight: 500; padding-right: 40px; }
.triage__list { min-height: 230px; }
.triage .mail-row { cursor: pointer; }
.triage__empty {
  min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--ink-deep); color: var(--ink-text-soft); text-align: center; padding: 32px 20px; position: relative; overflow: hidden; isolation: isolate;
}
.triage__empty::before { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; left: 50%; top: 50%; transform: translate(-50%, -55%); border-radius: 50%; background: var(--glow-blue); }
.triage__empty img { height: 40px; width: auto; }
.triage__empty .moment { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); color: #FFFFFF; line-height: 1.1; }
.triage__empty p { font-size: var(--fs-small); }
.triage__tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg-subtle); align-items: center; }
.triage__tools .btn { --btn-h: 34px; padding: 0 10px; font-size: 13px; gap: 8px; }
.triage__tools .btn .btn__key { font-size: 11px; }
.triage__hint { margin-left: auto; flex-shrink: 0; font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.triage__hint kbd { height: 20px; min-width: 20px; font-size: 11px; padding: 0 5px; }
.triage__toast { position: absolute; left: 50%; bottom: 62px; transform: translate(-50%, 8px); opacity: 0; transition: opacity var(--t-standard) var(--ease), transform var(--t-standard) var(--ease); pointer-events: none; z-index: 3; white-space: nowrap; }
.triage__toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.triage .mail-row__owner { display: none; }
.triage .mail-row.is-assigned .mail-row__owner { display: inline-flex; }
@media (max-width: 639.98px) {
  .triage__hint { display: none; }
  .triage__tools .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   24. Site header (sticky, paper, straight ink bar under the active link)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.site-header__menu { display: flex; align-items: center; gap: 24px; flex: 1; min-width: 0; }
.site-nav { flex: 1; min-width: 0; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.site-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  font-size: var(--fs-small); font-weight: 500; color: var(--text-2); text-decoration: none; border-radius: var(--r-control);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.site-nav a:hover { color: var(--text-1); background: var(--bg-muted); }
.site-nav a[aria-current="page"] { color: var(--text-1); font-weight: 600; }
.site-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nav-toggle { display: none; }
/* Below 1080 px: logo · compact „Testzugang“ · „Menü“, so a primary button is always on screen (site-plan 2.1) */
.site-header__cta { display: none; }

@media (min-width: 1080px) {
  .site-nav a[aria-current="page"]::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: calc((var(--header-h) - 40px) / -2 - 1px);
    height: 2px; background: var(--ink);
  }
  .site-nav a[aria-current="page"]:hover { background: transparent; }
}
@media (max-width: 1079.98px) {
  .site-header__bar { justify-content: flex-start; gap: 8px; }
  .site-header__bar > .brand { margin-right: auto; }
  .site-header__cta { display: inline-flex; padding: 0 14px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 44px; min-height: 44px; padding: 0 10px; margin-right: -10px;
    border: 0; background: transparent; color: var(--text-1); border-radius: var(--r-control);
    font-size: var(--fs-small); font-weight: 500;
  }
  .nav-toggle:hover { background: var(--bg-muted); }
  .nav-toggle .icon { --icon-size: 22px; }
  .nav-toggle__text { font-size: var(--fs-small); }
  .nav-toggle .nav-toggle__close { display: none; }
  .site-header[data-open] .nav-toggle .nav-toggle__open { display: none; }
  .site-header[data-open] .nav-toggle .nav-toggle__close { display: inline-block; }
  .site-header__menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(10, 14, 39, 0.25);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px max(var(--gutter), env(safe-area-inset-right, 0px)) 20px max(var(--gutter), env(safe-area-inset-left, 0px));
  }
  .site-header[data-open] .site-header__menu { display: flex; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li + li { border-top: 1px solid var(--line); }
  .site-nav a { display: flex; min-height: 52px; padding: 0 12px; font-size: 1.0625rem; border-radius: 0; }
  .site-nav a[aria-current="page"] { background: var(--bg-selected); box-shadow: inset 2px 0 0 var(--ink); }
  .site-header__actions { display: none; } /* the compact button stays in the bar */
}
.no-scroll { overflow: hidden; }

/* --------------------------------------------------------------------------
   25. Site footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--bg-subtle); border-top: 1px solid var(--line); padding-top: clamp(48px, 2rem + 3vw, 88px); padding-bottom: max(32px, env(safe-area-inset-bottom, 0px)); font-size: var(--fs-small); color: var(--text-2); }
.site-footer__grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
.site-footer__brand { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
.site-footer__nav { display: grid; gap: 36px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__nav > * { min-width: 0; }
.site-footer__claim { color: var(--text-2); line-height: 1.55; }
.site-footer__col h2 { font-size: var(--fs-meta); font-weight: 500; color: var(--text-meta); letter-spacing: 0; margin-bottom: 12px; line-height: 1.4; }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.site-footer__col a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--text-2); text-decoration: none; }
.site-footer__col a:hover { color: var(--text-1); text-decoration: underline; }
.site-footer__col a[aria-current="page"] { color: var(--text-1); font-weight: 600; }
.site-footer__col a .icon { --icon-size: 13px; color: var(--text-meta); }
.site-footer__bottom { margin-top: clamp(40px, 2rem + 2vw, 72px); padding-top: 20px; border-top: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: flex-end; font-size: var(--fs-meta); color: var(--text-meta); }
.site-footer__bottom a { color: var(--text-2); }
.site-footer__lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 46em; }
@media (min-width: 720px) { .site-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 5fr); gap: 48px; }
  .site-footer__nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   26. Shortcut overlay (? opens it, Esc closes, focus returns)
   -------------------------------------------------------------------------- */
.kbd-overlay {
  width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 720px);
  border: 0; padding: 0; border-radius: var(--r-panel);
  background: var(--ink); color: var(--ink-text-soft);
  box-shadow: 0 40px 80px -30px rgba(7, 10, 28, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.kbd-overlay::backdrop { background: rgba(7, 10, 28, 0.45); }
.kbd-overlay__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ink-line); }
.kbd-overlay__head h2 { font-size: 1.0625rem; color: #FFFFFF; letter-spacing: -0.01em; }
.kbd-overlay__body { padding: 8px 20px 20px; overflow-y: auto; max-height: calc(min(80vh, 720px) - 64px); display: grid; gap: 4px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kbd-overlay__body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kbd-overlay .shortcut { border-bottom-color: var(--ink-line); color: #FFFFFF; min-height: 42px; }
.kbd-overlay .shortcut-group-title { color: var(--ink-text-3); padding-top: 14px; }
.kbd-overlay__note { grid-column: 1 / -1; font-size: var(--fs-meta); color: var(--ink-text-3); padding-top: 12px; }
.kbd-overlay .btn--quiet-ink .icon { --icon-size: 18px; }

/* --------------------------------------------------------------------------
   27. Misc helpers
   -------------------------------------------------------------------------- */
.band-mark { height: 1em; width: auto; display: inline-block; }
.swatch { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 120px; padding: 18px; border-radius: var(--r-card); background: var(--c-bg, var(--bg-selected)); color: var(--c-text, var(--text-1)); }
.swatch__name { font-weight: 600; }
.swatch__hex { font-size: var(--fs-meta); opacity: 0.75; font-variant-numeric: tabular-nums; }
.divider-dot::before { content: "·"; margin: 0 0.4em; color: var(--text-meta); }
.nowrap { white-space: nowrap; }
.anchor-target { scroll-margin-top: calc(var(--header-h) + 24px); }

/* Reduced motion: only an 80 ms fade (slide 029) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 80ms !important; animation-iteration-count: 1 !important;
    transition-duration: 80ms !important; transition-property: opacity, background-color, color !important;
    scroll-behavior: auto !important;
  }
  .mail-row.is-leaving { transform: none; }
}

/* Print: paper only */
@media print {
  .site-header, .site-footer, .nav-toggle, .triage__tools, .toast-region { display: none !important; }
  .ink, .section--ink, .hero--ink, .cta-band { background: #FFFFFF !important; color: #0A0E27 !important; }
}

/* Pressed feedback for keyboard demos (site.js adds .is-pressed for 160 ms) */
.btn.is-pressed { background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--border-control); }
.btn--primary.is-pressed { background: var(--ink-pressed); }
.hero__demo { min-width: 0; }

/* --------------------------------------------------------------------------
   28. Conversion components (site-plan 3.1 to 3.7) and the access form (site-plan 6). Real markup: styleguide.html.
   -------------------------------------------------------------------------- */
/* 3.1 Primary CTA with risk reversal: the button(s), then the micro line (E4). */
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }
.cta--center { align-items: center; text-align: center; }
.cta__note { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); max-width: 34em; text-wrap: pretty; }
/* A short band between sections: „Passt das zu euch?“ + the CTA (Funktionen, FAQ, guides) */
.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding: clamp(20px, 1rem + 1vw, 32px); border-radius: var(--r-card); background: var(--bg-selected); }
.cta-strip__title { font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: var(--text-1); }
/* margin-left: auto keeps a CTA that wraps under the title (narrow columns like the FAQ's) at the right edge, where its
   right-aligned text belongs; without it the wrapped block starts left and its button floats mid-strip. */
@media (min-width: 840px) { .cta-strip .cta { align-items: flex-end; text-align: right; margin-left: auto; } }
/* E5: „Wir richten pro Woche zwei Teams ein …“. Hidden until assets/site.js knows the week (MM.config.nextFreeWeek). */
.capacity { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
:is(.ink, .section--ink, .hero--ink, .cta-band, .closing__intro) :is(.cta__note, .capacity) { color: var(--ink-text-soft); }

/* 3.2 Proof bar (Beweisleiste) under the hero: four facts, each a link to its proof */
.proof-bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-block: 1px solid var(--line-strong); }
.proof-bar > li { display: flex; min-width: 0; }
.proof-bar > li + li { border-top: 1px solid var(--line); }
.proof-bar a {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 0;
  font-size: var(--fs-small); font-weight: 500; line-height: 1.35; color: var(--text-1); text-decoration: none;
}
.proof-bar a:hover { color: var(--accent); }
.proof-bar .icon { --icon-size: 18px; color: var(--text-2); }
.proof-bar a:hover .icon { color: currentColor; }
@media (min-width: 720px) {
  .proof-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .proof-bar > li + li { border-top: 0; }
  .proof-bar > li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (min-width: 1080px) {
  .proof-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .proof-bar > li:nth-child(n + 3) { border-top: 0; }
  .proof-bar a { padding-right: 20px; }
  .proof-bar > li + li a { padding-left: 20px; border-left: 1px solid var(--line); }
}

/* 3.3 Trust block (Vertrauensblock): the R1 3F sentences, then the company line */
.trust { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.trust__title { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; color: var(--text-1); }
.trust__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.trust__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); }
.trust__list .icon { --icon-size: 18px; color: var(--text-1); margin-top: 2px; }
.trust__company { font-size: var(--fs-meta); line-height: 1.5; color: var(--text-meta); padding-top: 14px; border-top: 1px solid var(--line); }
.trust--panel { background: var(--bg-selected); border-radius: var(--r-card); padding: clamp(20px, 1rem + 1vw, 28px); }
:is(.ink, .section--ink, .cta-band, .closing) .trust__title { color: #FFFFFF; }
:is(.ink, .section--ink, .cta-band, .closing) .trust__list li { color: var(--ink-text-soft); }
:is(.ink, .section--ink, .cta-band, .closing) .trust__list .icon { color: #FFFFFF; }
:is(.ink, .section--ink, .cta-band, .closing) .trust__company { color: var(--ink-text-3); border-top-color: var(--ink-line); }

/* 3.4 Founder block: photo slot (E6), three sentences, signature, demo link */
.founder { display: grid; gap: 20px 32px; grid-template-columns: minmax(0, 1fr); align-items: start; max-width: 900px; }
@media (min-width: 640px) { .founder { grid-template-columns: auto minmax(0, 1fr); } }
.founder__photo {
  --size: clamp(88px, 4rem + 4vw, 128px);
  width: var(--size); height: var(--size); border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--bg-selected); display: grid; place-items: center;
}
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__photo .avatar { width: 100%; height: 100%; font-size: clamp(28px, 1.2rem + 1vw, 40px); }
.founder__body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.founder__text { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -0.01em; color: var(--text-1); max-width: 36em; text-wrap: pretty; }
.founder__sig { font-size: var(--fs-small); color: var(--text-2); }
.founder__sig b { font-weight: 600; color: var(--text-1); }

/* 3.5 Fit check (Passt Squid zu euch?): two columns with dot + word, then the Google line and links */
.fit { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 840px) { .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit__col { min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 1rem + 1.2vw, 32px); border-radius: var(--r-card); background: var(--bg-selected); }
.fit__col--no { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); }
.fit__title { display: flex; align-items: center; gap: 10px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-1); }
.fit__title .dot { width: 9px; height: 9px; }
.fit__col .checks { font-size: var(--fs-small); color: var(--text-2); }
.fit__foot { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); }
.fit__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* 3.6 Closing band: ink moment with the short form on a paper card; trust block beside the form, below it on phones */
.closing { position: relative; overflow: hidden; isolation: isolate; background: var(--ink-deep); color: var(--ink-text-soft); padding-block: clamp(64px, 3rem + 5vw, 128px); }
.closing::before, .closing::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.closing::before { width: min(900px, 120vw); height: min(900px, 120vw); left: -120px; top: -160px; background: var(--glow-blue); }
.closing::after { width: min(800px, 110vw); height: min(800px, 110vw); right: -160px; bottom: -260px; background: var(--glow-cyan); }
.closing__grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "trust"; }
.closing__grid > * { min-width: 0; }
.closing__intro { grid-area: intro; display: flex; flex-direction: column; gap: 18px; }
.closing__form { grid-area: form; }
.closing__trust { grid-area: trust; }
@media (min-width: 1024px) {
  .closing__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "intro form" "trust form"; column-gap: clamp(48px, 2rem + 3vw, 96px); row-gap: 40px; align-items: start; }
}
.closing__mark { height: 40px; width: auto; align-self: flex-start; }
.closing .h2 { color: #FFFFFF; }
.closing .lead { color: var(--ink-text-soft); }
.closing__next { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-text-2); max-width: 36em; }
.closing__intro a:not(.btn), .closing__trust a:not(.btn) { color: var(--ink-accent); text-decoration-color: rgba(143, 160, 255, 0.4); }
.closing__intro :focus-visible, .closing__trust :focus-visible { outline-color: var(--ink-accent); }

/* A paper card for a form (on paper with a fine frame, on ink as the one light surface) */
.form-card { min-width: 0; background: var(--paper); color: var(--text-2); border-radius: var(--r-sheet); padding: clamp(20px, 1rem + 1.5vw, 36px); }
.form-card--line { box-shadow: inset 0 0 0 1px var(--line-strong); }
.closing .form-card { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.form-card__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.form-card__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-1); }

/* 6 The access form (funnel.js): fields, choices, „Mehr angeben“, submit with micro line, notice, results */
.access-form { max-width: none; gap: 20px; }
.access-form [data-mm-fields] { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.access-form[aria-busy="true"] [data-mm-fields] { opacity: 0.75; }
.field__optional { font-weight: 400; color: var(--text-meta); }
.field__hint a { color: var(--accent); }
.field__hint [data-mm-when] { margin: 0; }
fieldset.field { display: block; border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin: 0 0 10px; line-height: 1.4; }
fieldset.field > .field__hint, fieldset.field > .field__error { display: block; margin-top: 8px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices--stack { flex-direction: column; align-items: stretch; }
.choice {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px;
  border-radius: var(--r-control); background: var(--bg-muted); color: var(--text-1);
  font-size: var(--fs-small); font-weight: 500; line-height: 1.35; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.choice:hover { background: var(--bg-canvas); }
.choice input {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; flex-shrink: 0; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--border-check); cursor: pointer;
}
.choice input:checked { background: var(--ink); box-shadow: inset 0 0 0 4px var(--paper), 0 0 0 1.5px var(--ink); }
.choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.choice:has(input:checked) { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.field.is-invalid .choice { background: var(--paper); box-shadow: inset 0 0 0 1px var(--urgent); }
.form-more { border-top: 1px solid var(--line); }
.form-more > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 48px;
  font-size: var(--fs-small); font-weight: 500; color: var(--text-1);
}
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary::after {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; background: var(--text-meta); transition: transform var(--t-standard) var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.form-more[open] > summary::after { transform: rotate(180deg); }
.form-more > summary:hover { color: var(--accent); }
.form-more__body { display: flex; flex-direction: column; gap: 20px; padding: 4px 0 8px; }
.form-submit { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 4px; }
.form-notice { font-size: var(--fs-meta); line-height: 1.55; color: var(--text-2); max-width: 44em; }
.form-notice a { color: var(--accent); }
@media (max-width: 639.98px) { .form-submit .btn { width: 100%; } }
.form-result:focus, .form-fallback:focus { outline: none; }
.thanks { display: flex; flex-direction: column; gap: 16px; }
.thanks__icon { background: var(--l-gruen-bg); color: var(--l-gruen-text); }
.thanks__title { font-family: var(--font-display); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: var(--text-1); }
.thanks__title:focus { outline: none; }
.thanks__text { line-height: 1.6; color: var(--text-2); max-width: 40em; }
.thanks__mail { overflow-wrap: anywhere; }
.thanks__subtitle { font-size: var(--fs-small); font-weight: 600; color: var(--text-1); margin-top: 4px; }
.thanks__small { font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); max-width: 40em; }
.form-fallback { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.form-fallback__label { font-size: var(--fs-small); font-weight: 500; color: var(--text-1); }
.form-fallback__text {
  margin: 0; padding: 14px 16px; border-radius: var(--r-control); background: var(--bg-muted); color: var(--text-1);
  font-family: var(--font-sans); font-size: var(--fs-small); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 320px; overflow: auto;
}
@media (max-width: 359.98px) { .nav-toggle__text { display: none; } } /* very small phones: logo, „Testzugang“, menu icon */

/* --------------------------------------------------------------------------
   Shared fixes collected from the page builders (final pass)
   -------------------------------------------------------------------------- */
/* Pasted app screens keep their own colours on ink sections (bold text in a mock is not white) */
.mock__stage :where(b, strong) { color: inherit; }
/* Screen badges stay visible on ink */
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block) .screen-id { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; }
/* Ticks on the ink plan card */
.plan--ink .checks li::before { color: #FFFFFF; }
/* Numbered steps inside running text keep their own spacing */
.prose .steps { padding-left: 0; }
.prose .steps > li + li { margin-top: 0; }
/* "folgt": the one way to mark something that is not available yet */
.chip--soon { --c-dot: var(--later); --c-bg: var(--l-gelb-bg); --c-text: var(--l-gelb-text); }
/* Grey dot: not yet / not part of it */
.dot--none { --c-dot: var(--border-check); }
/* A long caption wraps next to its screen badge, not below it; captions carry content, so text-2 (text-3 is too faint on the canvas) */
.mock-caption { flex-wrap: nowrap; color: var(--text-2); }
/* Touch: text links with an arrow, copy buttons, small buttons, footer and article nav links get a 44 px hit area (slide 029) */
@media (pointer: coarse) {
  .link-arrow { min-height: 44px; display: inline-flex; align-items: center; }
  .copy-field .btn { min-height: 44px; }
  .btn--sm:not(.mock__stage *) { --btn-h: 44px; }
  .site-footer__col a { min-height: 44px; }
  .site-footer__col ul { gap: 0; }
  .doc-nav a { min-height: 44px; }
}
/* Form hints usually carry essential information: text-2 */
.field__hint { color: var(--text-2); }
/* Captions on ink stay light */
:is(.ink, .section--ink, .hero--ink, .cta-band, .ink-block) .mock-caption { color: var(--ink-text-soft); }