/* ==========================================================================
   Okivo Web — gemeinsames Stylesheet für Website und Portal (okivo.app)
   Quelle: Claude-Design-Projekt „Okivo", web/okivo.css. Ergänzungen der
   Anwendung stehen am Ende unter „Ergänzungen".
   Standard: Night (dunkel). Hell: <html data-theme="light">.
   Schrift: System-Schrift. Sobald Mont lizenziert ist: mont.css einbinden
   und <html class="font-mont"> setzen — sonst ändert sich nichts.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* Schrift */
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-system);
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs: 12px;
  --text-sm: 13.5px;
  --text-base: 15.5px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: clamp(28px, 3.6vw, 40px);
  --text-4xl: clamp(34px, 5.4vw, 58px);
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;
  --tracking-display: -0.028em;
  --tracking-tight: -0.015em;
  --tracking-eyebrow: 0.12em;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 80px;
  --space-11: 112px;
  --gutter: 28px;
  --width-page: 1140px;
  --width-text: 720px;
  --width-narrow: 460px;
  --tap-min: 44px;

  /* Radien */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-card: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Bewegung */
  --ease: cubic-bezier(.2,.6,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* Markenpalette (fest) */
  --petrol-50:#effcf9; --petrol-100:#d5f7f0; --petrol-200:#a9efe3; --petrol-300:#6fe0cf;
  --petrol-400:#2dd4bf; --petrol-500:#14b8a6; --petrol-600:#0d9488; --petrol-700:#0f766e;
  --petrol-800:#115e59; --petrol-900:#134e4a; --petrol-950:#062f2b;
  --night:#0b0e11;

  /* ── Night: semantische Farben ───────────────────────────── */
  --bg: #0b0e11;
  --bg-sunken: #0f1317;
  --surface: #14181d;
  --surface-raised: #1b2027;
  --surface-hover: #1d232a;
  --border: #252b33;
  --border-strong: #353c46;
  --input-bg: #0f1317;
  --input-border: #48505c;

  --text-strong: #ffffff;
  --text: #c9ced6;
  --text-muted: #9aa1ac;
  --link: var(--petrol-400);
  --link-hover: var(--petrol-300);

  --brand: var(--petrol-400);
  --brand-hover: var(--petrol-300);
  --brand-on: var(--petrol-950);
  --brand-text: var(--petrol-300);
  --brand-subtle: rgba(45,212,191,.10);
  --brand-border: rgba(45,212,191,.32);

  --success: #4ade80;  --success-subtle: rgba(74,222,128,.09);  --success-border: rgba(74,222,128,.32);
  --warning: #fbbf24;  --warning-subtle: rgba(251,191,36,.09);  --warning-border: rgba(251,191,36,.34);
  --danger:  #f87171;  --danger-subtle:  rgba(248,113,113,.09); --danger-border:  rgba(248,113,113,.36);
  --danger-solid: #f87171; --danger-on: #2a0a0d; --danger-solid-hover: #fca5a5;
  --info: var(--brand); --info-subtle: var(--brand-subtle); --info-border: var(--brand-border);

  --track: #252b33;
  --header-bg: rgba(11,14,17,.8);
  --scrim: rgba(5,7,9,.72);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 18px rgba(0,0,0,.35);
  --shadow-lg: 0 18px 44px rgba(0,0,0,.45);
  --focus: var(--petrol-300);
  --ring-glow: rgba(45,212,191,.10);
}

[data-theme="light"]{
  color-scheme: light;
  --bg: #ffffff;
  --bg-sunken: #f5f7f8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-hover: #f2f4f6;
  --border: #e1e4e8;
  --border-strong: #cbd0d7;
  --input-bg: #ffffff;
  --input-border: #8a929e;

  --text-strong: #0d0f12;
  --text: #343943;
  --text-muted: #5b626d;
  --link: var(--petrol-700);
  --link-hover: var(--petrol-900);

  --brand: var(--petrol-700);
  --brand-hover: var(--petrol-800);
  --brand-on: #ffffff;
  --brand-text: var(--petrol-700);
  --brand-subtle: var(--petrol-50);
  --brand-border: var(--petrol-200);

  --success: #15803d;  --success-subtle: #ecf8f0;  --success-border: #b7e6c7;
  --warning: #92400e;  --warning-subtle: #fdf5e7;  --warning-border: #f1d49a;
  --danger:  #b3121e;  --danger-subtle:  #fdedef;  --danger-border:  #f3bfc5;
  --danger-solid: #c1121f; --danger-on: #ffffff; --danger-solid-hover: #9f0f1a;

  --track: #e5e8ec;
  --header-bg: rgba(255,255,255,.84);
  --scrim: rgba(11,14,17,.5);
  --shadow-sm: 0 1px 2px rgba(19,22,25,.06);
  --shadow-md: 0 4px 12px rgba(19,22,25,.09), 0 1px 3px rgba(19,22,25,.05);
  --shadow-lg: 0 16px 36px rgba(19,22,25,.13), 0 3px 8px rgba(19,22,25,.06);
  --focus: var(--petrol-700);
  --ring-glow: rgba(15,118,110,.07);
}

.font-mont{ --font-sans: "Mont", var(--font-system); --tracking-display: -0.035em; }

/* ── Grundlagen ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
[hidden]{display:none !important}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;color:var(--text-strong);font-weight:800;letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);text-wrap:balance}
h1{font-size:var(--text-4xl);line-height:1.05;letter-spacing:var(--tracking-display)}
h2{font-size:var(--text-3xl);line-height:1.12;letter-spacing:var(--tracking-display)}
h3{font-size:var(--text-lg)}
h4{font-size:var(--text-md)}
p{margin:0;text-wrap:pretty}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{color:var(--link-hover)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
::selection{background:var(--brand);color:var(--brand-on)}
code,kbd,.mono{font-family:var(--font-mono);font-size:.92em}
:not(pre)>code{padding:1px 6px;border-radius:var(--radius-xs);background:var(--surface-raised);border:1px solid var(--border);color:var(--text-strong);word-break:break-word}
hr{border:0;border-top:1px solid var(--border);margin:var(--space-7) 0}
svg.lucide{width:18px;height:18px;stroke-width:2;flex:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:var(--radius-md);background:var(--brand);color:var(--brand-on);font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ── Layout ─────────────────────────────────────────────────── */
.wrap{width:100%;max-width:calc(var(--width-page) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.wrap-text{max-width:calc(var(--width-text) + var(--gutter)*2)}
.wrap-narrow{max-width:calc(var(--width-narrow) + var(--gutter)*2)}
.section{padding:var(--space-10) 0}
.section-sunken{background:var(--bg-sunken);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-head{display:flex;flex-direction:column;gap:var(--space-3);max-width:640px;margin-bottom:var(--space-8)}
.section-head.center{margin-inline:auto;text-align:center;align-items:center}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.stack-sm{display:flex;flex-direction:column;gap:var(--space-2)}
.stack-lg{display:flex;flex-direction:column;gap:var(--space-7)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.eyebrow{font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--brand-text)}
.lead{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--text);max-width:58ch}
.muted{color:var(--text-muted)}
.small{font-size:var(--text-sm)}
.strong{color:var(--text-strong);font-weight:700}
.num{font-variant-numeric:tabular-nums}

/* ── Kopf (Website) ─────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:40;background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.header-in{display:flex;align-items:center;gap:var(--space-6);min-height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--text-strong);text-decoration:none;font-weight:900;font-size:21px;letter-spacing:var(--tracking-display);flex:none}
.logo:hover{color:var(--text-strong)}
.logo img{width:30px;height:30px;border-radius:22.3%}
.logo small{font-size:var(--text-sm);font-weight:600;letter-spacing:0;color:var(--text-muted);padding-left:10px;border-left:1px solid var(--border-strong)}
.nav{display:flex;gap:var(--space-1);margin-left:var(--space-3)}
.nav a{padding:8px 12px;border-radius:var(--radius-md);color:var(--text);text-decoration:none;font-size:var(--text-sm);font-weight:600}
.nav a:hover{color:var(--text-strong);background:var(--surface-hover)}
.nav a[aria-current="page"]{color:var(--text-strong);background:var(--surface-raised)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-2)}
.menu{display:none;position:static}
.menu summary{list-style:none;display:flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius-md);border:1px solid var(--border-strong);color:var(--text-strong);cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu .i-close{display:none}
.menu[open] .i-open{display:none}
.menu[open] .i-close{display:block}
.menu-panel{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--border);padding:var(--space-3) var(--gutter) var(--space-6);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.menu-panel a:not(.btn){display:flex;align-items:center;min-height:48px;color:var(--text-strong);text-decoration:none;font-weight:600;border-bottom:1px solid var(--border)}
.menu-panel .btn{margin-top:var(--space-4)}

/* ── Fuß ───────────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--border);background:var(--bg)}
.footer-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-7);padding-block:var(--space-7)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5)}
.footer-links a{color:var(--text);font-size:var(--text-sm);font-weight:600;text-decoration:none}
.footer-links a:hover{color:var(--link-hover);text-decoration:underline}
.publisher{display:inline-flex;align-items:center;gap:10px;font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);text-decoration:none}
.publisher img{width:22px;height:22px;border-radius:5px}
.copyright{font-size:var(--text-sm);color:var(--text-muted);width:100%}

/* ── Knöpfe ─────────────────────────────────────────────────── */
.btn{--h:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--h);padding:0 20px;border-radius:var(--radius-lg);border:1px solid transparent;font-family:inherit;font-size:var(--text-base);font-weight:700;letter-spacing:var(--tracking-tight);line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn svg.lucide{width:17px;height:17px}
.btn-primary{background:var(--brand);color:var(--brand-on)}
.btn-primary:hover{background:var(--brand-hover);color:var(--brand-on)}
.btn-secondary{background:transparent;border-color:var(--border-strong);color:var(--text-strong)}
.btn-secondary:hover{background:var(--surface-hover);color:var(--text-strong);border-color:var(--input-border)}
.btn-text{background:transparent;color:var(--text-strong);padding:0 12px}
.btn-text:hover{background:var(--surface-hover);color:var(--text-strong)}
.btn-link{--h:auto;padding:0;background:none;border:0;color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.btn-link:hover{color:var(--link-hover)}
.btn-danger{background:transparent;border-color:var(--danger-border);color:var(--danger)}
.btn-danger:hover{background:var(--danger-subtle);color:var(--danger);border-color:var(--danger)}
.btn-danger-solid{background:var(--danger-solid);color:var(--danger-on)}
.btn-danger-solid:hover{background:var(--danger-solid-hover);color:var(--danger-on)}
.btn-sm{--h:38px;padding:0 14px;font-size:var(--text-sm);border-radius:var(--radius-md)}
.btn-lg{--h:54px;padding:0 26px;font-size:var(--text-md)}
.btn-block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}

/* ── Formulare ──────────────────────────────────────────────── */
.form{display:flex;flex-direction:column;gap:var(--space-5)}
.field{display:flex;flex-direction:column;gap:7px}
.label{font-size:var(--text-sm);font-weight:700;color:var(--text-strong)}
.label .opt{font-weight:500;color:var(--text-muted)}
.input,.select{width:100%;min-height:48px;padding:11px 14px;border-radius:var(--radius-md);background:var(--input-bg);border:1px solid var(--input-border);color:var(--text-strong);font-family:inherit;font-size:16px;line-height:1.4;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.input::placeholder{color:var(--text-muted);opacity:.8}
.input:hover,.select:hover{border-color:var(--text-muted)}
.input:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-border)}
.input[readonly]{background:var(--bg-sunken);border-style:dashed;color:var(--text)}
.select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1ac' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.select option{background:var(--surface);color:var(--text-strong)}
.hint{font-size:var(--text-sm);color:var(--text-muted)}
.error-text{display:flex;align-items:flex-start;gap:6px;font-size:var(--text-sm);font-weight:600;color:var(--danger)}
.error-text svg.lucide{width:15px;height:15px;margin-top:2px}
.input[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--danger);border-width:2px;padding:10px 13px}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--danger-border)}
.input-row{display:flex;gap:var(--space-2)}
.input-row .input{flex:1;min-width:0}

.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--text)}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box{flex:none;width:22px;height:22px;margin-top:0;border-radius:var(--radius-xs);border:1.5px solid var(--input-border);background:var(--input-bg);display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.check .box::after{content:"";width:6px;height:11px;border:solid var(--brand-on);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.check input:checked+.box{background:var(--brand);border-color:var(--brand)}
.check input:checked+.box::after{opacity:1}
.check input:focus-visible+.box{outline:2px solid var(--focus);outline-offset:2px}
.check.is-invalid .box{border-color:var(--danger);border-width:2px}

/* ── Karten ─────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-6)}
.card-lg{padding:var(--space-7)}
.card-flush{padding:0;overflow:hidden}
.card-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-5)}
.card-head h2,.card-head h3{font-size:var(--text-lg);letter-spacing:var(--tracking-tight);line-height:1.3}
.card-head p{margin-top:4px;color:var(--text-muted);font-size:var(--text-sm);max-width:62ch}
.card-foot{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;border-top:1px solid var(--border);margin:var(--space-6) calc(var(--space-6)*-1) calc(var(--space-6)*-1);padding:var(--space-4) var(--space-6);background:var(--bg-sunken);border-radius:0 0 var(--radius-card) var(--radius-card)}
.icon-tile{width:42px;height:42px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;background:var(--brand-subtle);color:var(--brand-text);border:1px solid var(--brand-border);flex:none}
.icon-tile svg.lucide{width:20px;height:20px}

/* ── Meldungen (info · erfolg · warnung · fehler) ───────────── */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-lg);border:1px solid var(--info-border);background:var(--info-subtle);color:var(--text)}
.alert>svg.lucide{width:20px;height:20px;margin-top:1px;color:var(--info)}
.alert-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.alert-title{font-weight:800;color:var(--text-strong)}
.alert-body p{font-size:var(--text-sm);line-height:var(--leading-normal)}
.alert-success{border-color:var(--success-border);background:var(--success-subtle)}
.alert-success>svg.lucide{color:var(--success)}
.alert-warning{border-color:var(--warning-border);background:var(--warning-subtle)}
.alert-warning>svg.lucide{color:var(--warning)}
.alert-danger{border-color:var(--danger-border);background:var(--danger-subtle)}
.alert-danger>svg.lucide{color:var(--danger)}
.alerts{display:flex;flex-direction:column;gap:var(--space-3)}

/* ── Abzeichen ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--text);font-size:var(--text-xs);font-weight:800;letter-spacing:.02em;white-space:nowrap;line-height:1}
.badge svg.lucide{width:13px;height:13px}
.badge-brand{background:var(--brand-subtle);border-color:var(--brand-border);color:var(--brand-text)}
.badge-success{background:var(--success-subtle);border-color:var(--success-border);color:var(--success)}
.badge-warning{background:var(--warning-subtle);border-color:var(--warning-border);color:var(--warning)}
.badge-danger{background:var(--danger-subtle);border-color:var(--danger-border);color:var(--danger)}
.badge-solid{background:var(--brand);border-color:var(--brand);color:var(--brand-on)}

/* ── Tabelle (mit mobiler Form unter 680 px) ─────────────────── */
.table-wrap{border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table th{text-align:left;font-size:var(--text-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:12px 18px;background:var(--bg-sunken);border-bottom:1px solid var(--border)}
.table td{padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.table tr:last-child td{border-bottom:0}
.table .t-num{text-align:right;font-variant-numeric:tabular-nums}
.table .t-strong{color:var(--text-strong);font-weight:700;font-size:var(--text-base)}
.table .t-actions{text-align:right;white-space:nowrap}
.table .t-actions .row{justify-content:flex-end;flex-wrap:nowrap}

/* ── Auslastungsbalken ──────────────────────────────────────── */
.meter{display:flex;flex-direction:column;gap:10px}
.meter-figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px}
.meter-value{font-size:var(--text-2xl);font-weight:800;letter-spacing:var(--tracking-display);color:var(--text-strong);font-variant-numeric:tabular-nums;line-height:1}
.meter-of{color:var(--text-muted);font-size:var(--text-sm);font-weight:600}
.meter-track{height:10px;border-radius:var(--radius-pill);background:var(--track);overflow:hidden}
.meter-fill{height:100%;width:var(--pct,0%);min-width:4px;border-radius:inherit;background:var(--brand);transition:width var(--dur-base) var(--ease)}
.meter-warn .meter-fill{background:var(--warning)}
.meter-full .meter-fill{background:var(--danger)}
.meter-note{display:flex;gap:7px;align-items:flex-start;font-size:var(--text-sm);color:var(--text-muted)}
.meter-note svg.lucide{width:16px;height:16px;margin-top:2px}
.meter-warn .meter-note{color:var(--warning);font-weight:600}
.meter-full .meter-note{color:var(--danger);font-weight:600}

/* ── Tarifkarte ─────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-5);align-items:stretch}
.plan{display:flex;flex-direction:column;gap:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-6);position:relative}
.plan-current{border:2px solid var(--brand);padding:calc(var(--space-6) - 1px)}
.plan-featured{border-color:var(--brand-border);background:linear-gradient(var(--brand-subtle),var(--brand-subtle)),var(--surface)}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:24px}
.plan-name{font-size:var(--text-lg);font-weight:800;color:var(--text-strong);letter-spacing:var(--tracking-tight)}
.plan-price{font-size:var(--text-2xl);font-weight:800;letter-spacing:var(--tracking-display);color:var(--text-strong);line-height:1.1}
.plan-price small{display:block;margin-top:4px;font-size:var(--text-sm);font-weight:500;letter-spacing:0;color:var(--text-muted)}
.plan-limits{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.plan-limits div{background:var(--bg-sunken);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.plan-limits b{color:var(--text-strong);font-size:var(--text-md);font-variant-numeric:tabular-nums}
.plan-limits span{font-size:var(--text-xs);color:var(--text-muted);font-weight:600}
.plan .btn{margin-top:auto}
.features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:var(--text-sm)}
.features li{display:flex;gap:10px;align-items:flex-start}
.features svg.lucide{width:17px;height:17px;margin-top:1px;color:var(--brand-text)}
.features .no{color:var(--text-muted)}
.features .no svg.lucide{color:var(--text-muted)}

/* ── Wert zum Kopieren ──────────────────────────────────────── */
.copy{display:flex;flex-direction:column;gap:7px}
.copy-box{display:flex;align-items:stretch;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--input-bg);overflow:hidden}
.copy-value{flex:1;min-width:0;padding:12px 14px;font-family:var(--font-mono);font-size:14px;line-height:1.5;color:var(--text-strong);word-break:break-all;user-select:all}
.copy-btn{flex:none;display:inline-flex;align-items:center;gap:7px;padding:0 14px;min-height:46px;border:0;border-left:1px solid var(--border-strong);background:var(--surface-raised);color:var(--text-strong);font-family:inherit;font-size:var(--text-sm);font-weight:700;cursor:pointer}
.copy-btn:hover{background:var(--surface-hover)}
.copy-btn svg.lucide{width:16px;height:16px}
.copy-btn.is-copied{color:var(--success)}

/* ── Code-Block ─────────────────────────────────────────────── */
.code{border:1px solid var(--border);border-radius:var(--radius-lg);background:#080a0d;overflow:hidden}
[data-theme="light"] .code{background:#0f1317;border-color:#0f1317}
.code-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:6px 6px 6px 14px;border-bottom:1px solid #1f242b;font-size:var(--text-xs);font-weight:700;color:#9aa1ac;letter-spacing:.04em}
.code-head .copy-btn{min-height:32px;border:0;border-radius:var(--radius-sm);background:transparent;color:#d6dbe1;padding:0 10px}
.code-head .copy-btn:hover{background:#1b2027}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;font-family:var(--font-mono);font-size:13.5px;line-height:1.7;color:#e6e9ed;tab-size:2}
.code .c{color:#7d8591}
.code .k{color:var(--petrol-300)}
.code .s{color:#fcd38d}

/* ── Schritte ───────────────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);counter-reset:step}
.step{position:relative;display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);counter-increment:step}
.step-num{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--brand);color:var(--brand-on);font-weight:800;font-size:var(--text-sm)}
.step h3{font-size:var(--text-md)}
.step p{font-size:var(--text-sm);color:var(--text-muted)}

/* Checkliste (Erste Schritte) */
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.checklist li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--border)}
.checklist li:first-child{border-top:0;padding-top:0}
.checklist .mark{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--input-border);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:800;color:var(--text-muted)}
.checklist .done .mark{background:var(--brand);border-color:var(--brand);color:var(--brand-on)}
.checklist .done .mark svg.lucide{width:15px;height:15px;stroke-width:3}
.checklist .now .mark{border-color:var(--brand);color:var(--brand-text);border-width:2px}
.checklist .ci-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.checklist .ci-title{font-weight:700;color:var(--text-strong)}
.checklist .done .ci-title{color:var(--text-muted);text-decoration:line-through;text-decoration-color:var(--border-strong)}
.checklist .ci-body p{font-size:var(--text-sm);color:var(--text-muted)}

/* ── Häufige Fragen ─────────────────────────────────────────── */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:20px 2px;cursor:pointer;font-weight:700;font-size:var(--text-md);color:var(--text-strong)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border:solid var(--text-muted);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-3px,-3px);transition:transform var(--dur-base) var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq .answer{padding:0 2px 22px;color:var(--text);max-width:68ch}

/* ── Dialog (Rückfrage) ─────────────────────────────────────── */
.dialog{width:min(480px,calc(100vw - 32px));padding:0;border:1px solid var(--border-strong);border-radius:var(--radius-xl);background:var(--surface);color:var(--text);box-shadow:var(--shadow-lg)}
.dialog::backdrop{background:var(--scrim);backdrop-filter:blur(2px)}
.dialog-body{padding:var(--space-7) var(--space-7) var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.dialog-body h2{font-size:var(--text-xl);letter-spacing:var(--tracking-tight)}
.dialog-actions{display:flex;flex-wrap:wrap-reverse;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-7) var(--space-6)}

/* ── Langtext (Doku, Rechtstexte) ───────────────────────────── */
.prose{max-width:var(--width-text);color:var(--text);font-size:var(--text-md);line-height:var(--leading-relaxed)}
.prose>*+*{margin-top:var(--space-4)}
.prose h2{font-size:var(--text-2xl);margin-top:var(--space-9);scroll-margin-top:96px}
.prose h3{font-size:var(--text-lg);margin-top:var(--space-7);scroll-margin-top:96px}
.prose h2+*,.prose h3+*{margin-top:var(--space-3)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:6px}
.prose .alert,.prose .code{font-size:var(--text-base)}
.prose .alert p{font-size:var(--text-base)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}
.prose th{color:var(--text-strong)}
.docs{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--space-9);align-items:start;padding-block:var(--space-9) var(--space-10)}
.toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;font-size:var(--text-sm)}
.toc-title{font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);padding:0 12px 10px}
.toc a{display:block;padding:7px 12px;border-radius:var(--radius-sm);border-left:2px solid transparent;color:var(--text);text-decoration:none;font-weight:600}
.toc a:hover{background:var(--surface-hover);color:var(--text-strong)}
.toc a[aria-current="true"]{border-left-color:var(--brand);color:var(--text-strong);background:var(--surface-raised);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.toc .sub{padding-left:26px;font-weight:500}
.toc-mobile{display:none}
.pstep{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--space-4);margin-top:var(--space-7) !important}
.pstep-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--brand);color:var(--brand-text);font-weight:800;font-size:var(--text-base)}
.pstep-body>*+*{margin-top:var(--space-3)}
.pstep-body h3{margin-top:5px;font-size:var(--text-lg)}

/* ── Portal ─────────────────────────────────────────────────── */
.portal-bar{border-bottom:1px solid var(--border);background:var(--bg)}
.portal-bar .header-in{min-height:64px}
.portal-user{margin-left:auto;display:flex;align-items:center;gap:var(--space-3);min-width:0}
.portal-email{font-size:var(--text-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.portal-nav{display:flex;gap:var(--space-1);overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--border)}
.portal-nav a{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 14px;color:var(--text);text-decoration:none;font-size:var(--text-sm);font-weight:700;border-bottom:2px solid transparent;white-space:nowrap}
.portal-nav a:hover{color:var(--text-strong)}
.portal-nav a[aria-current="page"]{color:var(--text-strong);border-bottom-color:var(--brand)}
.portal-main{padding-block:var(--space-8) var(--space-10)}
.portal-title{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-6)}
.portal-title h1{font-size:var(--text-3xl)}
.dash{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-5)}
.dash>.span-2{grid-column:1/-1}
.auth{min-height:calc(100vh - 64px);display:flex;flex-direction:column;align-items:center;padding:var(--space-9) var(--gutter) var(--space-8)}
.auth-card{width:100%;max-width:var(--width-narrow);display:flex;flex-direction:column;gap:var(--space-6)}
.auth-card h1{font-size:var(--text-2xl);letter-spacing:var(--tracking-display)}
.auth-foot{margin-top:auto;padding-top:var(--space-9);font-size:var(--text-sm);color:var(--text-muted);display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);justify-content:center}
.auth-foot a{color:var(--text-muted)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-8) var(--space-5);border:1.5px dashed var(--border-strong);border-radius:var(--radius-card);background:var(--bg-sunken)}
.empty p{max-width:46ch;color:var(--text-muted);font-size:var(--text-sm)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;font-size:var(--text-sm)}
.kv dt{color:var(--text-muted)}
.kv dd{margin:0;color:var(--text-strong);font-weight:600}
.danger-zone{border-color:var(--danger-border)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success)}

/* ── Website: Einstieg ──────────────────────────────────────── */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.hero-rings{position:absolute;inset:0;pointer-events:none}
.hero-rings span{position:absolute;left:72%;top:50%;border-radius:50%;border:1px solid var(--brand-border);opacity:.45;transform:translate(-50%,-50%)}
.hero-rings span:nth-child(1){width:520px;height:520px;opacity:.7}
.hero-rings span:nth-child(2){width:860px;height:860px}
.hero-rings span:nth-child(3){width:1240px;height:1240px;opacity:.25}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-9);align-items:center;padding-block:var(--space-10) var(--space-10)}
.hero-copy{display:flex;flex-direction:column;gap:var(--space-5)}
.hero-copy h1{max-width:15ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);list-style:none;margin:var(--space-2) 0 0;padding:0;font-size:var(--text-sm);color:var(--text-muted)}
.hero-meta li{display:flex;align-items:center;gap:7px}
.hero-meta svg.lucide{width:16px;height:16px;color:var(--brand-text)}
.hero-visual{position:relative;display:flex;justify-content:center;padding-bottom:var(--space-5)}
.device{position:relative;display:inline-block}

/* Geräte-Darstellung: bleibt in beiden Farbmodi dunkel */
.phone{position:relative;width:300px;height:612px;flex:none;border-radius:44px;background:#0b0e11;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 7px #1a1e24,0 0 0 8px rgba(255,255,255,.1);overflow:hidden;color:#c9ced6;font-size:13px;line-height:1.4}
.phone-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:16px;background:#000}
.phone-status{position:absolute;top:15px;left:28px;right:26px;display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:#fff}
.phone-screen{position:absolute;inset:0;padding:60px 18px 26px;display:flex;flex-direction:column;gap:13px}
.phone-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#6fe0cf}
.phone-title{font-size:23px;font-weight:800;letter-spacing:-.025em;line-height:1.1;color:#fff;margin-top:3px}
.phone-ring{flex:none;width:46px;height:46px;border-radius:50%;background:conic-gradient(#2dd4bf 0 78%,#252b33 78% 100%);display:flex;align-items:center;justify-content:center}
.phone-ring span{width:38px;height:38px;border-radius:50%;background:#0b0e11;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:700;color:#fff}
.phone-card{background:#14181d;border:1px solid #252b33;border-radius:14px;padding:11px 13px;display:flex;flex-direction:column;gap:7px}
.phone-row{display:flex;justify-content:space-between;gap:10px}
.phone-row span:first-child{color:#9aa1ac}
.phone-row span:last-child{color:#fff;font-weight:600;text-align:right}
.phone-q{font-weight:700;color:#fff;font-size:13.5px}
.phone-q small{display:block;font-weight:500;color:#9aa1ac;font-size:11.5px;margin-top:1px}
.phone-tiles{display:flex;gap:10px}
.phone-tiles span{flex:1;height:60px;border-radius:14px;border:1px solid #353c46;background:#14181d;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:25px;font-weight:700;color:#fff;letter-spacing:.06em}
.phone-tiles span.is-pick{border:2px solid #2dd4bf;background:rgba(45,212,191,.12)}
.phone-deny{margin-top:auto;height:44px;border-radius:12px;border:1px solid rgba(248,113,113,.4);display:flex;align-items:center;justify-content:center;font-weight:700;color:#f87171;font-size:13.5px}
.browser-card{position:absolute;left:-90px;bottom:56px;width:236px;border-radius:14px;background:#ffffff;color:#343943;box-shadow:0 24px 50px rgba(0,0,0,.4);overflow:hidden;font-size:12.5px}
.browser-card .bc-bar{display:flex;align-items:center;gap:5px;padding:8px 10px;background:#eef0f2;border-bottom:1px solid #e1e4e8}
.browser-card .bc-bar i{width:7px;height:7px;border-radius:50%;background:#cbd0d7;display:block}
.browser-card .bc-bar b{margin-left:6px;font-size:10.5px;font-weight:600;color:#6b737f;font-family:var(--font-mono)}
.browser-card .bc-body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:6px}
.browser-card .bc-title{font-weight:800;color:#0d0f12;font-size:13.5px}
.browser-card .bc-num{font-family:var(--font-mono);font-size:40px;font-weight:700;letter-spacing:.08em;color:#0f766e;line-height:1.1}

/* Datenfluss */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5) var(--space-5)}
.flow-node{display:flex;flex-direction:column;gap:var(--space-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--space-5)}
.flow-node.is-okivo{border-color:var(--brand-border)}
.flow-node h3{font-size:var(--text-md)}
.flow-where{font-size:var(--text-xs);font-weight:800;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.flow-node ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--text-sm)}
.flow-node li{display:flex;gap:8px;align-items:flex-start}
.flow-node li svg.lucide{width:15px;height:15px;margin-top:3px;color:var(--brand-text)}
.flow-node li.no svg.lucide{color:var(--text-muted)}
.flow-paths{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--space-3)}
.flow-path{position:relative;min-height:58px;display:flex;align-items:center;justify-content:center}
.flow-path::before{content:"";position:absolute;top:50%;left:var(--from);right:var(--to);border-top:2px dashed var(--border-strong)}
.flow-path::after{content:"";position:absolute;top:50%;right:var(--to);width:9px;height:9px;border:solid var(--border-strong);border-width:2px 2px 0 0;transform:translate(1px,-50%) rotate(45deg);margin-top:0}
.flow-path.p1{grid-column:1/3;--from:25%;--to:25%}
.flow-path.p2{grid-column:2/4;--from:25%;--to:25%}
.flow-path.p3{grid-column:1/4;--from:16.66%;--to:16.66%}
.flow-path.p3::before{border-top:2px solid var(--brand)}
.flow-path.p3::after{border-color:var(--brand)}
.flow-path.p3 .flow-start{position:absolute;top:50%;left:var(--from);width:9px;height:9px;border:solid var(--brand);border-width:0 0 2px 2px;transform:translate(-1px,-50%) rotate(45deg)}
.flow-label{position:relative;display:flex;align-items:center;gap:9px;max-width:80%;padding:6px 12px;border-radius:var(--radius-md);background:var(--bg-sunken);font-size:var(--text-sm);color:var(--text)}
.section:not(.section-sunken) .flow-label{background:var(--bg)}
.flow-n{flex:none;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-raised);border:1px solid var(--border-strong);color:var(--text-strong);font-size:var(--text-xs);font-weight:800}
.p3 .flow-n{background:var(--brand);border-color:var(--brand);color:var(--brand-on)}
.flow-route{display:none}
.claims{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-7)}
.claims li{display:flex;gap:var(--space-4);align-items:flex-start}
.claims h3{font-size:var(--text-md);margin-bottom:4px}
.claims p{font-size:var(--text-sm);color:var(--text-muted)}
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5);margin-top:var(--space-7)}
.fact{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-5);border-radius:var(--radius-card);border:1px solid var(--border);background:var(--bg-sunken)}
.fact svg.lucide{width:20px;height:20px;color:var(--brand-text);margin-top:1px}
.fact b{display:block;color:var(--text-strong);margin-bottom:3px}
.fact p{font-size:var(--text-sm);color:var(--text-muted)}
.feature{display:flex;flex-direction:column;gap:var(--space-3)}
.feature-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}
.feature h3{font-size:var(--text-md)}
.feature p{font-size:var(--text-sm);color:var(--text-muted)}
.cta{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);padding:var(--space-9) var(--space-6);border-radius:var(--radius-xl);border:1px solid var(--brand-border);background:var(--brand-subtle)}
.cta h2{max-width:20ch}
.newsletter{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--space-6);align-items:start;margin-top:var(--space-8);padding-top:var(--space-7);border-top:1px solid var(--border)}
.newsletter h3{font-size:var(--text-md)}
.compare .t-yes,.compare .t-no{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.compare .t-yes{color:var(--text-strong)}
.compare .t-yes svg.lucide{color:var(--brand-text)}
.compare .t-no{color:var(--text-muted);font-weight:500}
.compare th:not(:first-child),.compare td:not(:first-child){text-align:center}
.compare td:first-child{color:var(--text-strong);font-weight:600}
.notfound{min-height:calc(100vh - 69px - 110px);display:flex;align-items:center}
.notfound-code{font-family:var(--font-mono);font-size:clamp(72px,14vw,140px);font-weight:700;line-height:1;letter-spacing:.04em;color:var(--brand-text)}

/* ── Responsiv ──────────────────────────────────────────────── */
@media (max-width:980px){
  .nav,.header-actions .btn-text{display:none}
  .menu{display:block}
  .header-actions{margin-left:auto}
  .grid-3,.steps{grid-template-columns:minmax(0,1fr)}
  .docs{grid-template-columns:minmax(0,1fr);gap:var(--space-6);padding-top:var(--space-6)}
  .toc{display:none}
  .toc-mobile{display:block;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
  .toc-mobile summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 16px;font-weight:700;color:var(--text-strong);cursor:pointer}
  .toc-mobile summary::-webkit-details-marker{display:none}
  .toc-mobile nav{display:flex;flex-direction:column;padding:0 8px 10px}
  .toc-mobile a{padding:9px 10px;color:var(--text);text-decoration:none;font-weight:600;font-size:var(--text-sm)}
  .dash{grid-template-columns:minmax(0,1fr)}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding-block:var(--space-9)}
  .hero-rings span{left:50%;top:78%}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow-paths{grid-template-columns:minmax(0,1fr);row-gap:var(--space-2)}
  .flow-path{grid-column:auto !important;justify-content:flex-start;min-height:0}
  .flow-path::before,.flow-path::after,.flow-path .flow-start{display:none}
  .flow-label{max-width:none;width:100%;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-lg)}
  .p3 .flow-label{border-color:var(--brand-border)}
  .flow-route{display:block;font-size:var(--text-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:2px}
  .facts3{grid-template-columns:minmax(0,1fr)}
  .newsletter{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  :root{--gutter:18px}
  .section{padding:var(--space-9) 0}
  .section-head{margin-bottom:var(--space-7)}
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .card{padding:var(--space-5)}
  .card-lg{padding:var(--space-5)}
  .card-foot{margin:var(--space-5) calc(var(--space-5)*-1) calc(var(--space-5)*-1);padding:var(--space-4) var(--space-5)}
  .plan,.step{padding:var(--space-5)}
  .plan-current{padding:calc(var(--space-5) - 1px)}
  .portal-main{padding-top:var(--space-6)}
  .portal-email{display:none}
  .auth{padding-top:var(--space-7)}
  .dialog-body{padding:var(--space-6) var(--space-5) var(--space-4)}
  .dialog-actions{padding:var(--space-3) var(--space-5) var(--space-5)}
  .dialog-actions .btn{flex:1 1 100%}
  .footer-in{flex-direction:column;align-items:flex-start}
  /* Tabelle wird zur Kartenliste */
  .table-wrap{border:0;background:transparent;border-radius:0;overflow:visible}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border:1px solid var(--border);border-radius:var(--radius-card);background:var(--surface);padding:6px 16px;margin-bottom:var(--space-3)}
  .table td{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:10px 0;border-bottom:1px solid var(--border);text-align:right}
  .table td::before{content:attr(data-label);flex:none;text-align:left;font-size:var(--text-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
  .table td.t-strong{padding-top:12px}
  .table td.t-strong::before{display:none}
  .table td.t-actions{border-bottom:0;padding:12px 0 10px}
  .table td.t-actions::before{display:none}
  .table td.t-actions .row{width:100%;flex-wrap:wrap}
  .table td.t-actions .row>*{flex:1 1 140px}
  .table td.t-actions .btn{width:100%}
}
@media (max-width:720px){
  .claims{grid-template-columns:minmax(0,1fr)}
  .phone{width:270px;height:560px;border-radius:40px}
  .phone-screen{padding:56px 15px 22px;gap:11px}
  .browser-card{left:-28px;bottom:34px;width:200px}
  .browser-card .bc-num{font-size:34px}
  .hero-visual{padding-left:28px}
  .cta{padding:var(--space-8) var(--space-5)}
}
@media (max-width:420px){
  .input-row{flex-direction:column}
  .header-actions .btn-sm{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

/* ── Ergänzungen (nicht im Entwurf) ─────────────────────────── */
/* Formulare, die nur einen Knopf enthalten (jede Aktion im Portal ist ein Formular). */
form.inline-form{display:contents}
/* Karte, die Aufmerksamkeit verlangt (z. B. zweiter Faktor fehlt). */
.card-attention{border-color:var(--warning-border)}
/* Umschalter monatlich / jährlich: zwei Verweise, die die Seite mit dem anderen Intervall laden. */
.segmented{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:var(--bg-sunken)}
.segmented a{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border-radius:var(--radius-pill);color:var(--text);font-size:var(--text-sm);font-weight:700;text-decoration:none;white-space:nowrap}
.segmented a:hover{color:var(--text-strong);background:var(--surface-hover)}
.segmented a[aria-current="true"]{background:var(--brand);color:var(--brand-on)}
.segmented a[aria-current="true"] .badge{background:transparent;border-color:currentColor;color:inherit}
.plan-price .plan-unit{font-size:var(--text-md);font-weight:600;letter-spacing:0;color:var(--text-muted)}
.plan-save{color:var(--brand-text);font-weight:700}