/* ==========================================================================
   Cyber-Sec.IT – Stylesheet (dunkles Farbschema)
   Aufbau: Tokens · Basis · Layout · Kopf/Fuß · Hero · Funktionen · Mockups ·
           Dashboard · Einrichtung · Über uns · FAQ · Kontakt-Dialog · Rechtstexte
   Keine externen Ressourcen (Schriften, CDNs) – siehe Datenschutzerklärung.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "SF Pro Display", "Helvetica Neue", Roboto, Arial, sans-serif;

  /* Farben – Original-Palette der bisherigen Website */
  --bg: #121318;
  --bg-2: #0d0f17;
  --card: #11141e;
  --card-2: #141722;
  --card-3: #1b1f2e;
  --line: #232839;
  --line-strong: #343b56;
  --ink: #f3f4f8;
  --text: #c9cde0;
  --muted: #9aa1b5;
  --vio: #7b3fc4;
  --ind: #6366f1;
  --grad: linear-gradient(135deg, #7b3fc4, #5b5ee8);
  --link: #a5b4fc;
  --ring: #a5b4fc;
  --danger: #f43f5e;
  --danger-text: #fb7185;
  --ok: #10b981;
  --ok-text: #6ee7b7;
  --warn: #f59e0b;
  --warn-text: #fcd34d;

  /* Diagrammfarben */
  --c-green: #10b981;
  --c-blue: #3b82f6;
  --c-amber: #f59e0b;
  --c-red: #ef4444;
  --c-ind: #818cf8;

  --fs-body: 1.0625rem;
  --fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 2.1vw, 2.85rem);

  --max: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  color-scheme: dark;

  /* Bewegung: starke Kurven statt der schwachen CSS-Standards.
     --m skaliert jede Positionsänderung; bei reduzierter Bewegung 0 (Einblenden bleibt, Verschieben entfällt). */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --m: 1;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--link); text-underline-offset: .2em; }
@media (hover: hover) and (pointer: fine) { a:hover { color: #fff; } }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--flag { stroke: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; background: #fff; color: var(--bg); border-radius: 8px; }
.skip-link:focus { top: 12px; }

/* Reduzierte Bewegung: sanfter, nicht null – Einblenden und Farbwechsel bleiben, Verschieben und Blinken entfallen */
@media (prefers-reduced-motion: reduce) {
  :root { --m: 0; }
  html { scroll-behavior: auto; }
}

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(56px, 6vw, 84px); }
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.section--glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px 420px at 8% 10%, rgb(123 63 196 / .2), transparent 70%), radial-gradient(640px 460px at 94% 60%, rgb(99 102 241 / .16), transparent 70%);
}
/* Weitere Farbverläufe: wechselnde Positionen, an Ober- und Unterkante ausgeblendet (keine harte Kante zum Nachbarabschnitt) */
.section--glow-1::before, .section--glow-2::before, .section--glow-3::before, .section--glow-4::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
}
.section--glow-1::before { background: radial-gradient(760px 520px at 10% 30%, rgb(123 63 196 / .24), transparent 70%), radial-gradient(700px 500px at 92% 78%, rgb(99 102 241 / .18), transparent 70%); }
.section--glow-2::before { background: radial-gradient(760px 520px at 92% 25%, rgb(99 102 241 / .22), transparent 70%), radial-gradient(700px 500px at 6% 80%, rgb(123 63 196 / .2), transparent 70%); }
.section--glow-3::before { background: radial-gradient(900px 480px at 50% 45%, rgb(99 102 241 / .16), transparent 70%), radial-gradient(600px 420px at 100% 15%, rgb(123 63 196 / .2), transparent 70%); }
.section--glow-4::before { background: radial-gradient(760px 520px at 18% 25%, rgb(99 102 241 / .2), transparent 70%), radial-gradient(760px 520px at 85% 85%, rgb(123 63 196 / .24), transparent 70%); }

h1, h2, h3 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 650; }
.lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height: 1.5; letter-spacing: -.011em; color: var(--muted); max-width: 58ch; }
/* Kleiner Text bekommt etwas mehr Laufweite (Tracking wächst mit sinkender Größe), große Überschriften werden enger gesetzt */
.field-error, .form-error, .contact-note, .contact-step, .mail-foot, .mail-addr, figcaption, .footer-links a { letter-spacing: .01em; }
.section-head { display: grid; gap: 18px; max-width: 760px; }
.section-head--center { justify-items: center; margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.eyebrow { margin-bottom: -6px; color: #b98af5; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.grad { background: linear-gradient(135deg, #c39bf5, #818cf8 60%, #6ee7b7); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Dezente Outline-Symbole im Hintergrund der Abschnitte */
.deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: rgb(129 140 248 / .16); }
.deco svg { position: absolute; height: auto; fill: none; stroke: currentColor; stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; }
.deco-a { left: -4%; top: 5%; width: min(300px, 42vw); transform: rotate(-14deg); }
.deco-b { left: 80%; top: 3%; width: min(340px, 42vw); transform: rotate(10deg); }
.deco-c { left: 88%; top: 44%; width: min(260px, 42vw); transform: rotate(-8deg); }
.deco-d { left: -3%; bottom: 6%; width: min(300px, 42vw); transform: rotate(12deg); }
.deco-e { left: 62%; bottom: 3%; width: min(240px, 42vw); transform: rotate(-10deg); }
/* Schlüssel (Einrichtung): im freien Bereich rechts neben der Überschrift, ohne Text oder Abschnittskante zu berühren */
.deco-key { display: none; left: calc(50% + 280px); top: 72px; width: 190px; transform: rotate(-10deg); }
@media (min-width: 1040px) { .deco .deco-key { display: block; } }

.split { display: grid; gap: 40px; align-items: center; }
.split-text { display: grid; gap: 20px; align-content: start; }
.split-text p { max-width: 56ch; }
@media (min-width: 960px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); }
  .split-text { grid-column: 1 / span 5; }
  .split-visual { grid-column: 6 / span 7; }
  .split--flip .split-text { grid-column: 8 / span 5; grid-row: 1; }
  .split--flip .split-visual { grid-column: 1 / span 7; grid-row: 1; }
}
.split + .split { margin-top: clamp(56px, 6vw, 84px); }
.split-visual figcaption { margin-top: 12px; color: var(--muted); font-size: .9rem; text-align: center; }

.checks { display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; }
.checks li::before {
  content: ""; position: absolute; left: 3px; top: .5em; width: .7em; height: .38em;
  border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border: 1.5px solid transparent; border-radius: 10px;
  font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .2s var(--ease-out), transform .16s var(--ease-out);
}
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 8px 30px -10px rgb(99 102 241 / .7); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 34px -10px rgb(99 102 241 / .9); } }
.btn--ghost { border-color: var(--line-strong); background: transparent; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { border-color: var(--ind); background: rgb(99 102 241 / .1); color: #fff; } }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(18 19 24 / .72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 700 1.15rem/1 var(--font-display); letter-spacing: -.02em; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .brand:hover { color: #fff; } }
.brand img { width: 34px; height: 34px; }
.nav-toggle { display: none; justify-self: end; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: transparent; font-weight: 600; cursor: pointer; }
.header-panel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; }
.site-nav ul { display: flex; flex-direction: column; }
.site-nav a { display: block; padding: 12px 10px; border-radius: 8px; color: var(--text); font-size: 1rem; font-weight: 500; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { background: rgb(99 102 241 / .16); box-shadow: inset 0 0 0 1px rgb(129 140 248 / .3); color: #fff; } }
.submenu { padding-left: 14px; }
.site-nav .submenu a { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .95rem; }
.menu-ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: rgb(99 102 241 / .16); color: #a5b4fc; }
.menu-ico .icon { width: 16px; height: 16px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: 10px; color: var(--ink); font-size: .9rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .lang:hover { border-color: var(--ind); background: rgb(99 102 241 / .1); color: #fff; } }

.js .nav-toggle { display: inline-flex; align-items: center; }
.js .header-panel { display: none; }
.js .site-header.is-open .header-panel { display: flex; }

@media (min-width: 1040px) {
  .header-inner { grid-template-columns: auto 1fr auto; }
  .nav-toggle, .js .nav-toggle { display: none; }
  .header-panel, .js .header-panel { display: contents; }
  .site-nav { justify-self: center; }
  .site-nav ul { flex-direction: row; gap: 2px; }
  .site-nav a { padding: 10px 12px; font-size: .95rem; }
  .header-actions { justify-self: end; }

  .has-menu { position: relative; }
  .has-menu > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; }
  .site-nav .submenu { display: none; flex-direction: column; position: absolute; top: 100%; left: 50%; z-index: 60; min-width: 240px; padding: 8px; gap: 2px; opacity: 0; transform: translateX(-50%) scale(calc(1 - .04 * var(--m))); transform-origin: top center; transition: opacity .15s var(--ease-out), transform .15s var(--ease-out), display .15s allow-discrete; border: 1px solid #2a3046; border-radius: 14px; background: rgb(17 20 30 / .98); box-shadow: 0 24px 60px -12px rgb(0 0 0 / .7); }
  .site-nav .has-menu:hover > .submenu, .site-nav .has-menu:focus-within > .submenu { display: flex; opacity: 1; transform: translateX(-50%); }
  .site-nav .submenu a { padding: 8px 14px 8px 10px; color: #dfe2f3; font-size: .95rem; white-space: nowrap; }
  @media (hover: hover) and (pointer: fine) { .site-nav .submenu a:hover { background: linear-gradient(135deg, rgb(123 63 196 / .35), rgb(99 102 241 / .3)); color: #fff; } }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: calc(100vh - 69px); min-height: calc(100svh - 69px); padding-block: clamp(48px, 7vw, 96px); text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: -160px 0 auto 0; height: 720px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0, rgb(123 63 196 / .38), transparent 60%), radial-gradient(ellipse at 80% 20%, rgb(99 102 241 / .22), transparent 55%);
}
.fx-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { display: grid; justify-items: center; gap: 28px; }
.pill { position: relative; isolation: isolate; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; max-width: 100%; padding: 7px 20px 7px 9px; overflow: hidden; border: 1px solid transparent; border-radius: 99px; background: linear-gradient(rgb(22 19 46 / .9), rgb(14 14 32 / .9)) padding-box, linear-gradient(120deg, rgb(185 138 245 / .75), rgb(99 102 241 / .35) 45%, rgb(165 180 252 / .65)) border-box; color: #c9cde0; font-size: .875rem; box-shadow: 0 14px 36px -18px rgb(123 63 196 / .95); }
.pill-seg { display: inline-flex; align-items: center; gap: 9px; }
.pill .icon { width: 22px; height: 22px; }
.pill b { color: #fff; font-weight: 650; letter-spacing: .01em; }
.pill-sep { width: 4px; height: 4px; border-radius: 50%; background: #a5b4fc; box-shadow: 0 0 10px 1px #818cf8; }
.pill::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .16) 50%, transparent 62%); transform: translateX(-130%); animation: pill-shine 5.5s ease-in-out infinite; animation-play-state: paused; }
@keyframes pill-shine { 0%, 62% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.hero.is-active .pill::after { animation-play-state: running; }
.perf-low .pill::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .pill::after { animation: none; } }
.hero h1 { max-width: 20em; font-size: var(--fs-h1); line-height: 1.06; letter-spacing: -.04em; font-weight: 700; }
.tl { display: block; min-height: 1.1em; padding-bottom: .06em; }
.caret { display: inline-block; width: .055em; height: .8em; margin-left: .07em; border-radius: 2px; background: #a5b4fc; vertical-align: -.06em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero .lead { max-width: 46ch; font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.hero-actions .btn { min-height: 52px; padding-inline: 32px; }

/* Fenster (Mockups) und Melde-Button */
.window { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 100px -40px rgb(99 102 241 / .5); }
.window-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: #0f1119; border-bottom: 1px solid var(--line); }
.window-title { font-weight: 600; font-size: .95rem; color: var(--ink); }
.report-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; background: var(--card-2); border: 2px solid var(--danger); border-radius: 8px; color: var(--ink); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.report-btn::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: url("../img/logo.png") center / cover; flex: none; }
.fake-btn { display: inline-block; padding: 9px 16px; border-radius: 6px; background: #2563eb; color: #fff; font-size: .92rem; font-weight: 600; }

/* ---------- Vorteilsleiste ---------- */
.facts-bar { border-block: 1px solid var(--line); background: var(--bg-2); }
/* Jeder Block soll höchstens zwei Zeilen Text haben: die Spalten sind so bemessen, dass auch der längste Text
   („Anbindung über Microsoft 365 & Exchange“) in zwei Zeilen passt.
   schmal: eine Spalte · mittel: der erste Block über die volle Breite, darunter 2 × 2 · ab 1200 px: eine Reihe,
   erste Spalte breiter */
.facts-bar ul { display: grid; grid-template-columns: minmax(0, 1fr); }
.facts-bar li { text-wrap: balance; display: flex; align-items: center; gap: 12px; padding: 16px 8px; font-weight: 600; font-size: .95rem; color: #e3e6f1; line-height: 1.3; }
.tile { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid rgb(129 140 248 / .25); border-radius: 11px; background: rgb(99 102 241 / .14); color: #a5b4fc; }
.tile .icon { width: 20px; height: 20px; }
.tile--flag { border: 0; border-radius: 50%; background: none; }
.tile--flag .icon { width: 40px; height: 40px; }
@media (min-width: 520px) {
  .facts-bar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-bar li:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
  .facts-bar ul { grid-template-columns: minmax(0, 1.55fr) repeat(4, minmax(0, 1fr)); }
  .facts-bar li { padding: 24px 12px; gap: 10px; }
  .facts-bar li:first-child { grid-column: auto; padding-left: 0; }
  .facts-bar li + li { border-left: 1px solid var(--line); }
}

/* ---------- Funktionen (Explorer) ---------- */
.fx { display: grid; gap: 28px; margin-top: 56px; align-items: start; }
.fx-list { display: grid; gap: 8px; }
.fx-tab { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 16px 20px; border: 1px solid transparent; border-radius: 16px; background: rgb(255 255 255 / .02); text-align: left; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .fx-tab:hover { background: rgb(255 255 255 / .05); } }
.fx-tab[aria-selected="true"] { border-color: rgb(129 140 248 / .4); background: linear-gradient(135deg, rgb(123 63 196 / .2), rgb(99 102 241 / .1)); box-shadow: 0 20px 50px -28px rgb(99 102 241 / .8); }
.fx-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: rgb(99 102 241 / .14); color: #a5b4fc; }
.fx-tab[aria-selected="true"] .fx-ico { background: var(--grad); color: #fff; }
.fx-txt { display: grid; gap: 6px; align-self: center; }
.fx-txt strong { color: #c9cde0; font: 650 1.1rem/1.3 var(--font-display); }
.fx-tab[aria-selected="true"] .fx-txt strong { color: #fff; }
.fx-desc { color: var(--muted); font-size: .98rem; }
.js .fx-tab[aria-selected="false"] .fx-desc { display: none; }
.fx-stage { min-width: 0; }
.fx-panel { display: grid; gap: 14px; align-content: center; min-height: 440px; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(500px 300px at 80% 0, rgb(99 102 241 / .22), transparent 70%), radial-gradient(400px 260px at 0 100%, rgb(123 63 196 / .2), transparent 70%), #0d0f18; box-shadow: 0 30px 80px -40px rgb(99 102 241 / .6); }
.fx-panel + .fx-panel { margin-top: 16px; }
@media (min-width: 960px) {
  .fx { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .fx-stage { position: sticky; top: 96px; }
}

/* Vorschauen innerhalb des Explorers */
.pv-card { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-2); }
.pv-from { display: flex; align-items: center; gap: 12px; }
.pv-from > div { display: grid; min-width: 0; }
.pv-from strong { color: #f3f4f8; font-size: .95rem; }
.pv-from span, .pv-note { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.pv-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: rgb(244 63 94 / .14); color: var(--danger-text); }
.pv-from .chip { margin-left: auto; }
.pv-card h4 { color: #fff; font-size: 1.05rem; line-height: 1.3; }
.pv-skel { display: grid; gap: 8px; }
.pv-skel i { display: block; height: 8px; border-radius: 4px; background: var(--line); }
.pv-skel i:nth-child(1) { width: 94%; } .pv-skel i:nth-child(2) { width: 82%; } .pv-skel i:nth-child(3) { width: 64%; }
.pv-attach { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 12px; border: 1px solid #2b3145; border-radius: 9px; background: var(--card-3); color: #e3e6f1; font-size: .85rem; }
.pv-attach em { color: var(--muted); font-style: normal; }
.pv-cta { padding: 11px; border-radius: 9px; background: var(--c-red); color: #fff; font-weight: 600; font-size: .9rem; text-align: center; }
.pv-note { text-align: center; }

.chip { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid; border-radius: 99px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip--red { color: var(--danger-text); border-color: rgb(244 63 94 / .45); background: rgb(244 63 94 / .1); }
.chip--blue { color: #a5b4fc; border-color: rgb(99 102 241 / .5); background: rgb(99 102 241 / .12); }

.pv-outlook { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card-2); }
.pv-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.pv-rows li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #1d2131; }
.pv-rows li:last-child { border-bottom: 0; }
.pv-rows i { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--line); color: var(--muted); font-style: normal; font-weight: 800; }
.pv-rows b { display: block; color: #e3e6f1; font-size: .9rem; }
.pv-rows span { color: var(--muted); font-size: .8rem; }
.pv-rows .is-bad { background: rgb(239 68 68 / .08); box-shadow: inset 3px 0 var(--c-red); }
.pv-rows .is-bad i { background: rgb(239 68 68 / .2); color: #f87171; }
.pv-toast { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgb(16 185 129 / .4); border-radius: 14px; background: rgb(16 185 129 / .1); }
.pv-toast .tick { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--ok); color: #06281d; }
.pv-toast .tick .icon { stroke-width: 3; }
.pv-toast b { display: block; color: var(--ok-text); font-size: .95rem; }
.pv-toast span { color: #a7e9d0; font-size: .85rem; }

.pv-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-left: 3px solid var(--ind); border-radius: 8px; background: var(--card-3); }
.pv-toggle strong { display: block; color: #a5b4fc; }
.pv-toggle span { color: var(--muted); font-size: .85rem; }
.switch { position: relative; width: 40px; height: 22px; flex: none; border-radius: 99px; background: var(--ok); }
.switch::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.pv-label { margin-top: 4px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.pv-seg { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #0d1019; font-size: .85rem; }
.pv-seg span { flex: 1; padding: 7px; border-radius: 7px; color: var(--muted); text-align: center; }
.pv-seg .is-on { background: var(--ind); color: #fff; font-weight: 600; }
.pv-field { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: #0d1019; color: #e3e6f1; font-size: .9rem; }
.pv-field small { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; }
.pv-field code { color: #a5b4fc; font-size: .82rem; overflow-wrap: anywhere; }
.pv-level { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; }
.pv-level b { flex: 1; height: 6px; overflow: hidden; border-radius: 4px; background: var(--line); }
.pv-level i { display: block; width: 34%; height: 100%; background: linear-gradient(90deg, var(--ok), var(--warn)); }

.pv-flow { display: grid; gap: 10px; justify-items: stretch; }
.pv-flow > .chip { justify-self: center; }
.pv-arrow { justify-self: center; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.pv-users { display: grid; gap: 8px; }
.pv-users li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); }
.pv-users li > i { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgb(99 102 241 / .2); color: #a5b4fc; font-style: normal; font-weight: 700; font-size: .8rem; }
.pv-users b { color: #fff; font-size: .9rem; }
.pv-users span { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.pv-users .is-ok { display: block; padding: 4px; border: 0; background: none; color: var(--ok-text); font-weight: 600; text-align: center; }

/* ---------- Fenster / Mockups ---------- */

.lp { padding: 0; text-align: center; }
.lp-body { padding: clamp(28px, 4vw, 48px); }
.lp-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background: #2a2116; color: var(--warn); }
.lp-icon .icon { width: 26px; height: 26px; }
.lp h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-bottom: 8px; }
.lp-body > p { max-width: 42ch; margin: 0 auto 24px; color: var(--muted); }
.lp-steps { max-width: 470px; margin: 0 auto; padding: 18px 20px; border: 1px solid #1f2436; border-radius: 10px; background: #0f1320; text-align: left; }
.lp-steps h4 { margin-bottom: 12px; font-size: 1rem; color: #fff; }
.lp-steps li { position: relative; padding-left: 20px; font-size: .94rem; color: var(--muted); }
.lp-steps li + li { margin-top: 10px; }
.lp-steps li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--ind); }
.lp-steps strong { display: block; color: #fff; }

/* Wissenscheck */
.quiz-q { display: grid; gap: 8px; margin-top: 2px; padding: 12px; border-radius: 10px; background: var(--card-3); }
.quiz-q > strong { color: #fff; }
.quiz-opts { display: grid; gap: 6px; }
.quiz-opt { display: grid; gap: 4px; width: 100%; min-height: 40px; padding: 7px 12px; border: 2px solid #4a4fc4; border-radius: 8px; background: transparent; color: #b4b7ff; font-size: .85rem; line-height: 1.4; text-align: left; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .quiz-opt:hover { background: rgb(99 102 241 / .18); } }
.quiz-opt.is-good { border-color: var(--ok); background: rgb(16 185 129 / .14); color: var(--ok-text); }
.quiz-opt.is-bad { border-color: var(--c-red); background: rgb(239 68 68 / .14); color: #fca5a5; }
.quiz-tag { font-size: .8rem; font-weight: 700; }
.quiz-tag:empty { display: none; }
.quiz-fb { min-height: 3.2em; padding: 8px 12px; border-radius: 8px; background: #232a44; color: #d3d8f5; font-size: .85rem; line-height: 1.4; }
.quiz-fb.is-good { background: rgb(16 185 129 / .14); color: var(--ok-text); }
.quiz-fb.is-bad { background: rgb(239 68 68 / .14); color: #fca5a5; }

/* ---------- Autopilot & Dashboard ---------- */
.panel { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.panel h3 { margin-bottom: 4px; color: #fff; font-size: 1rem; font-weight: 600; }
.panel-note { margin-bottom: 16px; color: var(--muted); font-size: .9rem; }
.panel h3:not(:has(+ .panel-note)) { margin-bottom: 16px; }

.autopilot-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .autopilot-grid { grid-template-columns: 1fr 1fr; } }

.stair { display: flex; align-items: flex-end; gap: 10px; height: 168px; margin-bottom: 4px; }
.stair-col { flex: 1; display: grid; gap: 6px; align-content: end; height: 100%; text-align: center; }
.stair-col strong { color: #fff; font-size: .9rem; }
.stair-col small { color: var(--muted); font-size: .8rem; }
.stair-bar { border-radius: 8px 8px 3px 3px; }
.stair-bar--1 { height: 34px; background: linear-gradient(#10b981, #0c7a58); }
.stair-bar--2 { height: 66px; background: linear-gradient(#f59e0b, #b06f06); }
.stair-bar--3 { height: 104px; background: linear-gradient(#ef4444, #a12626); }
.chain { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .85rem; color: #e3e6f1; }
.chain li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.chain li:not(:last-child)::after { content: ""; width: 7px; height: 7px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); }

.reminders li { position: relative; display: grid; gap: 2px; padding: 0 0 20px 32px; }
.reminders li:last-child { padding-bottom: 0; }
.reminders li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-blue); }
.reminders li::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: 2px; width: 2px; background: var(--line-strong); }
.reminders li:last-child::after { display: none; }
.reminders .is-remind::before { background: var(--c-amber); }
.reminders .is-done::before { background: var(--c-green); }
.reminders strong { color: #fff; font-size: .95rem; }
.reminders span { color: var(--muted); font-size: .87rem; }

.dash-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.tabs { display: none; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: #0b0d16; }
.js .tabs { display: inline-flex; }
.tab { min-height: 44px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tab:hover { color: #fff; } }
.tab[aria-selected="true"] { background: var(--grad); color: #fff; }
.dash-note { margin-top: 12px; color: var(--muted); font-size: .88rem; }

/* Plattform-Ansicht: Nachbau der Original-Oberfläche */
.ui-shell { margin-top: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #0a0d14; box-shadow: 0 30px 80px -30px rgb(99 102 241 / .4); }
.ui { container-type: inline-size; padding: 14px; background: #0a0d14; color: #e8eaf2; font-size: 12.5px; line-height: 1.4; text-align: left; }
.ui--plain { padding: 0; background: none; }
.ui-g { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-g--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ui-g + .uc { margin-top: 10px; }
.uc { min-width: 0; padding: 12px 14px; border: 1px solid #232838; border-radius: 10px; background: #141722; }
.uc--span2 { grid-column: span 2; }
.uc h4 { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #232838; color: #f3f4f8; font-size: 12.5px; font-weight: 600; }
.uc svg { display: block; width: 100%; height: auto; }
.uc svg text { fill: #8b90a5; font-family: inherit; font-size: 7.5px; }
.uc svg.hb text { font-size: 8.5px; }
.uc svg.ring { max-width: 250px; margin-inline: auto; }
.uc svg .t-sub { font-size: 8.5px; }
.uc svg .t-big { fill: #fff; font-size: 18px; font-weight: 700; }
.uc--span2 { display: flex; flex-direction: column; }
.uc--span2 .mt { flex: 1; }
.uc--span2 .mt > .w { align-items: center; }
.leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; margin-top: 6px; color: #9aa1b5; font-size: 11px; }
.leg li { display: inline-flex; align-items: center; }
.leg i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; }
.leg-note { margin-top: 6px; color: #9aa1b5; font-size: 11px; text-align: center; }
.d-safe { background: #10b981; } .d-aware { background: #3b82f6; } .d-risk { background: #d98e0b; } .d-crit { background: #ef4444; } .d-amber { background: #f59e0b; }
.act li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #1e2230; font-size: 11.5px; }
.act li:last-child { border-bottom: 0; }
.act li::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: #f59e0b; }
.act .c-blue::before { background: #3b82f6; }
.act .c-green::before { background: #10b981; }
.act b { display: block; font-weight: 600; }
.act span { color: #8b90a5; }
.act em { margin-left: auto; color: #7b8096; font-size: 10.5px; font-style: normal; white-space: nowrap; }
.mt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt > div { padding: 10px; border-radius: 8px; background: #1b1f2e; text-align: center; }
.mt small { display: block; color: #8b90a5; font-size: 9.5px; letter-spacing: .03em; text-transform: uppercase; }
.mt strong { display: block; margin: 2px 0; font-size: 20px; line-height: 1.2; }
.mt .k-ind { color: #6366f1; } .mt .k-grn { color: #10b981; }
.mt .w { grid-column: 1 / -1; display: flex; justify-content: space-around; }
.mt .w > div { padding: 0; background: none; }
.mt .w--roomy { padding: 22px 10px; }
.mt .w--roomy strong { font-size: 34px; }
.mt .w--roomy small { font-size: 11px; }
.mt .w strong { font-size: 17px; }
.mt--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 680px) {
  .ui-g { grid-template-columns: 1fr 1fr; }
  .uc--span2 { grid-column: auto; }
}
@container (max-width: 430px) {
  .ui-g, .ui-g--2 { grid-template-columns: 1fr; }
  .mt--3 { grid-template-columns: 1fr; }
}

/* ---------- Einrichtung ---------- */
.flow { display: grid; gap: 40px; margin-top: 56px; counter-reset: step; }
.flow-group { padding-top: 20px; border-top: 2px solid var(--c-ind); }
.flow-group--auto { border-top: 2px dashed var(--line-strong); }
.flow-label { margin-bottom: 24px; font-weight: 700; color: #fff; }
.step-list { display: grid; gap: 28px; }
.step { display: grid; grid-template-columns: auto 1fr; align-content: start; gap: 6px 16px; counter-increment: step; }
.step::before { content: counter(step); grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.flow-group--auto .step::before { background: transparent; color: #c9cffc; border: 2px dashed #818cf8; }
.step h3 { display: flex; align-items: center; min-height: 38px; }
.step p { grid-column: 2; color: var(--muted); font-size: 1rem; }
@media (min-width: 900px) {
  .flow { grid-template-columns: 1fr 1fr; gap: 56px; }
  .step-list { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---------- Über uns ---------- */
.about-facts { display: grid; }
.about-fact { display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.about-fact:last-child { border-bottom: 1px solid var(--line); }
.about-fact .icon { grid-row: span 2; width: 28px; height: 28px; margin-top: 2px; color: #a5b4fc; }
.about-fact .icon--flag { width: 30px; height: 30px; }
.about-fact dt { font-weight: 650; color: #fff; }
.about-fact dd { color: var(--muted); font-size: .98rem; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 12px; max-width: 860px; margin: 48px auto 0; }
.faq-item { border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / .03); transition: border-color .2s, background-color .2s; }
@media (hover: hover) and (pointer: fine) { .faq-item:hover { border-color: var(--line-strong); } }
.faq-item[open] { border-color: rgb(129 140 248 / .4); background: linear-gradient(135deg, rgb(123 63 196 / .14), rgb(99 102 241 / .07)); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 16px 22px; cursor: pointer; color: #e8eaf2; font-weight: 600; font-size: 1.08rem; line-height: 1.35; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2.5px solid #a5b4fc; border-bottom: 2.5px solid #a5b4fc; transform: rotate(45deg); transition: transform .2s var(--ease-in-out); }
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item p { max-width: 62ch; padding: 0 22px 22px; color: var(--muted); }


/* ---------- Kontakt-Karte ---------- */
.cta-section { padding-block: 40px clamp(64px, 8vw, 104px); }
.cta-card { display: grid; justify-items: center; gap: 28px; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); border: 1px solid rgb(129 140 248 / .35); border-radius: 30px; background: radial-gradient(ellipse at 50% 120%, rgb(123 63 196 / .45), transparent 65%), radial-gradient(ellipse at 90% -20%, rgb(99 102 241 / .25), transparent 60%), #0f1120; box-shadow: 0 40px 100px -50px rgb(99 102 241 / .7); text-align: center; }
.cta-card h2 { margin-bottom: 14px; max-width: 22ch; margin-inline: auto; }
.cta-card .lead { margin-inline: auto; }
.cta-card .btn { min-height: 52px; padding-inline: 32px; }

/* ---------- Fußzeile ---------- */
.site-footer { padding-block: 28px; border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer-links a { display: inline-block; padding: 8px 0; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: #fff; } }

/* ---------- Kontakt-Dialog ---------- */
.contact { width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; overflow: auto; border: 1px solid rgb(129 140 248 / .4); border-radius: 22px; background: radial-gradient(ellipse at 90% -20%, rgb(99 102 241 / .25), transparent 60%), radial-gradient(ellipse at 0 120%, rgb(123 63 196 / .3), transparent 60%), #0f1120; color: var(--text); box-shadow: 0 40px 120px -20px rgb(0 0 0 / .8); }
.contact::backdrop { background: rgb(3 4 8 / .7); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
.contact { --pad: clamp(18px, 5vw, 28px); }
.contact-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px calc(var(--pad) - 8px) 0 var(--pad); }
.contact-step { color: var(--muted); font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.contact-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .contact-close:hover { background: rgb(255 255 255 / .08); color: #fff; } }
.contact-form, .contact-done { display: grid; gap: 20px; padding: 8px var(--pad) var(--pad); }
.contact h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); line-height: 1.2; }
.contact h2:focus { outline: none; }
.contact-panel { display: grid; gap: 20px; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--card); color: #fff; font-weight: 600; font-size: 1.05rem; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, transform .16s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: var(--ind); background: rgb(99 102 241 / .12); } }
.choice[aria-pressed="true"] { border-color: #818cf8; background: linear-gradient(135deg, rgb(123 63 196 / .3), rgb(99 102 241 / .2)); }
.choice .icon { color: #a5b4fc; }
@media (min-width: 480px) {
  .choices { grid-template-columns: 1fr 1fr; }
}
/* Mitarbeiterzahl: gleich große Kacheln, oben drei, unten zwei zentriert */
.choices--sizes { display: flex; flex-wrap: wrap; justify-content: center; }
.choice--size { flex: 1 1 100%; justify-content: space-between; min-height: 56px; }
.size-num { font: 700 1.25rem/1 var(--font-display); letter-spacing: -.01em; }
.size-cap { color: var(--muted); font-size: .85rem; font-weight: 500; }
@media (min-width: 480px) {
  .choice--size { flex: 0 0 calc((100% - 20px) / 3); flex-direction: column; justify-content: center; gap: 6px; min-height: 92px; text-align: center; }
  .size-num { font-size: 1.6rem; }
}
.field { display: grid; gap: 8px; }
.field label { color: #e3e6f1; font-weight: 600; font-size: .95rem; }
.field input { width: 100%; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: #0b0d16; color: #fff; font: inherit; font-size: 1rem; }
.field input::placeholder { color: #6b7186; }
.field input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-color: transparent; }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field-error, .form-error { color: #fda4af; font-size: .92rem; }
.field-error:empty { display: none; }
.form-error { padding: 10px 12px; border: 1px solid rgb(244 63 94 / .4); border-radius: 10px; background: rgb(244 63 94 / .1); }
.form-error a { color: #fff; }
.contact-note { color: var(--muted); font-size: .85rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.contact-actions .btn--primary { margin-left: auto; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.contact-done { justify-items: start; padding-top: 12px; }
.done-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgb(16 185 129 / .18); color: var(--ok-text); }
.done-ico .icon { width: 28px; height: 28px; stroke-width: 3; }

/* ---------- Rechtstexte ---------- */
.legal { padding-block: clamp(40px, 6vw, 80px) clamp(64px, 8vw, 112px); }
.legal-inner { max-width: 760px; }
.legal-back { display: inline-block; padding: 8px 0; margin-bottom: 20px; font-weight: 600; }
.legal h1 { margin-bottom: 20px; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.legal h2 { margin: 36px 0 10px; font-size: 1.3rem; letter-spacing: -.01em; }
.legal p, .legal li { max-width: 68ch; }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 0; padding-left: 22px; list-style: disc; display: grid; gap: 6px; }
.legal ul + p { margin-top: 16px; }
.legal strong { color: #e3e6f1; }
.legal-lead { font-size: 1.15rem; color: var(--muted); }

/* ==========================================================================
   Bewegung
   Regeln: nur transform/opacity · ease-out für Ein-/Auftritte · Oberflächen unter 300 ms
   (Marketing-Einblendungen dürfen länger sein) · Hover nur mit Maus/Trackpad ·
   Press-Feedback auf allem Klickbaren · Ausblenden schneller als Einblenden.
   ========================================================================== */

/* Farbwechsel */
a { transition: color .15s ease; }
.brand, .footer-links a { transition: color .15s ease, background-color .15s ease; }
.site-nav a { transition: color .15s ease, background-color .2s ease, box-shadow .25s ease; }
.nav-toggle, .lang, .contact-close, .tab { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s var(--ease-out); }
.quiz-fb { transition: background-color .2s ease, color .2s ease; }

/* Press-Feedback: kurz und subtil */
.btn:active:not([disabled]) { transform: scale(calc(1 - .03 * var(--m))); }
.nav-toggle:active, .lang:active, .tab:active, .contact-close:active { transform: scale(calc(1 - .04 * var(--m))); }
.quiz-opt:active, .choice:active { transform: scale(calc(1 - .02 * var(--m))); }
.fx-tab:active { transform: scale(calc(1 - .01 * var(--m))); }

/* Hero: gestaffelter Auftritt (60 ms Versatz) */
.hero-inner > * { transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.hero-inner > :nth-child(2) { transition-delay: 60ms; }
.hero-inner > :nth-child(3) { transition-delay: 120ms; }
.hero-inner > :nth-child(4) { transition-delay: 180ms; }
@starting-style {
  .hero-inner > * { opacity: 0; transform: translateY(calc(16px * var(--m))); }
}

/* Einblenden beim Scrollen (nur Bereiche unterhalb des ersten Bildschirms; Klasse setzt site.js) */
.js .reveal { opacity: 0; transform: translateY(calc(18px * var(--m))); transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media print { .js .reveal { opacity: 1; transform: none; } }

/* Tab-Wechsel: neue Ansicht blendet kurz ein, statt hart zu springen */
.fx-panel, .ui-shell[role="tabpanel"], .module-panel, .fx-desc { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
@starting-style {
  .fx-panel, .ui-shell[role="tabpanel"], .module-panel { opacity: 0; transform: translateY(calc(8px * var(--m))); }
  .fx-desc { opacity: 0; transform: translateY(calc(-4px * var(--m))); }
}

/* Navigation: Untermenü wächst aus dem Auslöser (Desktop), Mobilmenü gleitet ein */
@media (min-width: 1040px) {
  @starting-style {
    .site-nav .has-menu:hover > .submenu, .site-nav .has-menu:focus-within > .submenu { opacity: 0; transform: translateX(-50%) scale(calc(1 - .04 * var(--m))); }
  }
}
@media (max-width: 1039px) {
  .js .site-header.is-open .header-panel { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
  @starting-style {
    .js .site-header.is-open .header-panel { opacity: 0; transform: translateY(calc(-6px * var(--m))); }
  }
}

/* FAQ: Antwort blendet beim Öffnen ein (Keyframes reichen hier, geöffnet wird nie mitten im Übergang zurückgeschaltet) */
@keyframes faq-in { from { opacity: 0; transform: translateY(calc(-6px * var(--m))); } }
.faq-item[open] p { animation: faq-in .22s var(--ease-out); }

/* Kontakt-Dialog: bleibt zentriert, kommt aus scale(.96) + Opacity; Schließen schneller (.15 s) als Öffnen (.22 s) */
.contact { opacity: 0; transform: scale(calc(1 - .04 * var(--m))); transition: opacity .15s var(--ease-out), transform .15s var(--ease-out), overlay .15s allow-discrete, display .15s allow-discrete; }
.contact[open] { opacity: 1; transform: none; transition-duration: .22s; }
.contact::backdrop { opacity: 0; transition: opacity .15s var(--ease-out), overlay .15s allow-discrete, display .15s allow-discrete; }
.contact[open]::backdrop { opacity: 1; transition-duration: .22s; }
@starting-style {
  .contact[open] { opacity: 0; transform: scale(calc(1 - .04 * var(--m))); }
  .contact[open]::backdrop { opacity: 0; }
}
.contact-panel[data-step="2"], .contact-done { transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
@starting-style {
  .contact-panel[data-step="2"], .contact-done { opacity: 0; transform: translateY(calc(6px * var(--m))); }
}

/* Reduzierte Bewegung, Feinheiten (steht am Dateiende, damit es die Basisregeln überstimmt) */
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .faq-item summary::after { transition-duration: 0s; }
}

/* ---------- Nach-oben-Button ---------- */
.to-top {
  position: fixed; right: clamp(20px, 3vw, 44px); bottom: clamp(24px, 4vw, 44px); z-index: 40; display: none; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 14px; background: var(--grad); color: #fff; cursor: pointer;
  box-shadow: 0 10px 28px -8px rgb(99 102 241 / .8), 0 0 0 0 rgb(129 140 248 / 0);
  opacity: 0; visibility: hidden; transform: translateY(calc(10px * var(--m)));
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s, box-shadow .25s var(--ease-out);
}
.to-top .icon { transition: transform .25s var(--ease-out); }
.js .to-top { display: grid; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Hover: Button hebt sich, Pfeil rutscht nach oben, ein heller Ring leuchtet auf */
@media (hover: hover) and (pointer: fine) {
  .to-top.is-visible:hover { transform: translateY(calc(-3px * var(--m))); box-shadow: 0 16px 34px -8px rgb(99 102 241 / .95), 0 0 0 5px rgb(129 140 248 / .28); }
  .to-top:hover .icon { transform: translateY(calc(-2px * var(--m))); }
}
.to-top:active { transform: scale(calc(1 - .04 * var(--m))); transition-duration: .1s; }
/* Damit der Button nicht auf den Fußzeilen-Links liegt */
@media (max-width: 1400px) { .footer-inner { padding-right: 88px; } }
@media print { .to-top { display: none !important; } }

/* ---------- Einrichtung: hervorgehobene Karte (gleiche Sprache wie die Kontakt-Karte) ---------- */
.setup-card {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgb(129 140 248 / .3); border-radius: clamp(22px, 3vw, 30px);
  background: radial-gradient(ellipse at 100% 0, rgb(99 102 241 / .22), transparent 55%), radial-gradient(ellipse at 0 100%, rgb(123 63 196 / .26), transparent 60%), #0f1120;
  box-shadow: 0 40px 100px -50px rgb(99 102 241 / .6);
}
/* Symbole nur dort, wo kein Text liegt: Zahnrad in der oberen rechten Ecke, Schlüssel rechts neben der Überschrift */
.setup-card .deco-a { left: auto; right: -52px; top: -52px; width: 180px; transform: rotate(-14deg); }
.setup-card .deco-key { left: 66%; top: 44px; width: 150px; }

/* ==========================================================================
   Kreative Abschnitte und Effekte
   Rhythmus von Simulation bis Autopilot: Bild links · Bühne mittig · Bild rechts · Bühne mittig.
   Alle Effekte laufen nur über transform/opacity/translate (GPU) und pausieren außerhalb des Sichtbereichs
   (Klasse .is-active setzt site.js); .perf-low schaltet sie auf schwachen Geräten ab.
   ========================================================================== */

/* Zentrierte Bühne */
.split + .stage, .stage + .split { margin-top: clamp(56px, 6vw, 84px); }
.stage { display: grid; gap: clamp(28px, 4vw, 44px); justify-items: center; }
.stage > * { min-width: 0; }
.stage-visual { width: 100%; max-width: 940px; }
.stage-visual figcaption { margin-top: 12px; color: var(--muted); font-size: .9rem; text-align: center; }
.stage .autopilot-grid { width: 100%; }
.stage .panel { padding: clamp(20px, 3vw, 28px); }

/* Lernmoment: drei Schritte nebeneinander */
.stage .lp-steps { max-width: none; padding: 20px; }
.stage .lp-steps ul { display: grid; gap: 12px; }
@media (min-width: 760px) { .stage .lp-steps ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stage .lp-steps li { padding: 16px 16px 16px 38px; border: 1px solid #1f2436; border-radius: 12px; background: #131829; }
.stage .lp-steps li + li { margin-top: 0; }
.stage .lp-steps li::before { left: 16px; top: 1.45em; }
.lp-icon { position: relative; }
.lp-icon::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--warn); border-radius: 50%; opacity: 0; animation: ring 2.6s ease-out infinite; animation-play-state: paused; }
@keyframes ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.9); opacity: 0; } }

/* Autopilot: Vorteile als Chips unter den Panels */
.checks--row { display: grid; justify-content: center; gap: 10px 12px; }
@media (min-width: 720px) { .checks--row { grid-template-columns: repeat(2, max-content); } }
.checks--row li { padding: 10px 18px 10px 42px; border: 1px solid var(--line); border-radius: 99px; background: rgb(255 255 255 / .03); font-size: .95rem; }
.checks--row li::before { left: 18px; top: 1.05em; }

/* Autopilot: Balken wachsen, Erinnerungen laufen der Reihe nach ein, Verbindungslinie zeichnet sich (Start beim Einblenden) */
.stair-bar { transform-origin: 50% 100%; transition: transform .8s var(--ease-out) .25s; }
.stair-col:nth-child(2) .stair-bar { transition-delay: .4s; }
.stair-col:nth-child(3) .stair-bar { transition-delay: .55s; }
.reveal:not(.is-in) .stair-bar { transform: scaleY(0); }
.reminders li { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reminders li::after { transform-origin: 50% 0; transition: transform .45s var(--ease-out); }
.reminders li:nth-child(1), .reminders li:nth-child(1)::after { transition-delay: .3s; }
.reminders li:nth-child(2), .reminders li:nth-child(2)::after { transition-delay: .5s; }
.reminders li:nth-child(3), .reminders li:nth-child(3)::after { transition-delay: .7s; }
.reminders li:nth-child(4) { transition-delay: .9s; }
.reveal:not(.is-in) .reminders li { opacity: 0; transform: translateX(calc(-10px * var(--m))); }
.reveal:not(.is-in) .reminders li::after { transform: scaleY(0); }
.chain li { transition: opacity .5s var(--ease-out); }
.chain li:nth-child(1) { transition-delay: .8s; }
.chain li:nth-child(2) { transition-delay: .95s; }
.chain li:nth-child(3) { transition-delay: 1.1s; }
.reveal:not(.is-in) .chain li { opacity: 0; }


.split-visual { position: relative; }

/* Dezent driftende Hintergrund-Symbole */
.deco svg { animation: drift 11s ease-in-out infinite alternate; animation-play-state: paused; }
.deco svg:nth-child(2) { animation-duration: 14s; animation-delay: -5s; }
.deco svg:nth-child(3) { animation-duration: 9s; animation-delay: -2s; }
@keyframes drift { to { translate: 0 calc(-16px * var(--m)); rotate: 4deg; } }
.is-active .deco svg, .is-active .lp-icon::after { animation-play-state: running; }


/* Nur mit Maus/Trackpad: Lichtkegel folgt dem Zeiger, Glanz über dem Haupt-Button */
.panel, .faq-item, .cta-card, .stage .lp-steps li { position: relative; }
.btn--primary { position: relative; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .panel::after, .faq-item::after, .setup-card::after, .cta-card::after, .stage .lp-steps li::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgb(129 140 248 / .16), transparent 65%);
  }
  .panel:hover::after, .faq-item:hover::after, .setup-card:hover::after, .cta-card:hover::after, .stage .lp-steps li:hover::after { opacity: 1; }
  .btn--primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease-out); }
  .btn--primary:hover::after { transform: translateX(120%); }
}

/* Lesefortschritt am unteren Rand der Kopfzeile (läuft über die Scroll-Timeline, ohne JavaScript) */
@supports (animation-timeline: scroll()) {
  .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); animation: read-progress linear both; animation-timeline: scroll(root block); pointer-events: none; }
  @keyframes read-progress { to { transform: scaleX(1); } }
}

/* Schwache Geräte / Datensparen: alle Dauer-Effekte aus (Klasse setzt site.js) */
.perf-low .site-header { backdrop-filter: none; background: rgb(18 19 24 / .96); }
.perf-low .contact::backdrop { backdrop-filter: none; }
.perf-low .deco svg, .perf-low .lp-icon::after { animation: none; }
.perf-low .fx-canvas { display: none; }
@media (prefers-reduced-motion: reduce) {
  .deco svg, .lp-icon::after { animation: none; }
  .btn--primary::after { display: none; }
}

/* ==========================================================================
   Scroll-Effekte
   1) Wandernder Hintergrund: eine feste Fläche, deren Farbe site.js mit dem Scrollfortschritt überblendet
      (nur ein einfarbiger Layer, kein Bild – deshalb billig).
   2) Scroll-Timelines (nur CSS, nur Chrome/Edge/Safari 26; anderswo bleibt alles einfach stehen):
      Hero tritt zurück, Bilder und Texte laufen mit unterschiedlicher Geschwindigkeit, Karten wachsen ein.
   ========================================================================== */
.bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--bg); transition: background-color .25s linear; }

/* Helle Bänder liegen nur noch als leichter Schleier über dem wandernden Hintergrund */
.section--alt, .facts-bar { background: rgb(255 255 255 / .025); }

/* Kopfzeile wird nach dem Start etwas dichter */
.site-header { transition: background-color .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { background: rgb(18 19 24 / .78); box-shadow: 0 12px 30px -18px rgb(0 0 0 / .8); }

/* Aktueller Abschnitt in der Navigation */
.site-nav a[aria-current="location"] { color: #fff; background-color: rgb(99 102 241 / .28); box-shadow: inset 0 0 0 1px rgb(165 180 252 / .55), 0 0 22px -8px rgb(123 63 196 / .95); }
@media (min-width: 1040px) {
  .site-nav .submenu a[aria-current="location"] { background: rgb(99 102 241 / .18); color: #fff; }
}

/* Kleiner Strich hinter jeder Überschrift-Zeile (Eyebrow) wächst beim Einscrollen */
.eyebrow::after { content: ""; display: inline-block; width: 36px; height: 1px; margin-left: 12px; vertical-align: middle; background: currentColor; opacity: .55; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .eyebrow::after { transform-origin: 0 50%; animation: line-grow linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
    @keyframes line-grow { from { transform: scaleX(0); } to { transform: none; } }

    /* Hero tritt beim Weiterscrollen zurück */
    .hero-inner { animation: hero-out linear both; animation-timeline: view(); animation-range: exit 5% exit 80%; }
    @keyframes hero-out { to { opacity: 0; transform: translateY(-60px) scale(.97); } }

    /* Hintergrundsymbole wandern langsamer als der Inhalt */
    .deco { animation: deco-par linear both; animation-timeline: view(); }
    @keyframes deco-par { from { transform: translateY(70px); } to { transform: translateY(-70px); } }

    /* Karten wachsen beim Einscrollen auf ihre Größe */
    .setup-card, .cta-card { animation: card-grow linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes card-grow { from { scale: .94; } to { scale: 1; } }
  }
}
.perf-low .eyebrow::after, .perf-low .hero-inner, .perf-low .deco, .perf-low .setup-card, .perf-low .cta-card { animation: none; }
.perf-low .eyebrow::after { transform: none; }
.section-head--center .eyebrow::before { content: ""; display: inline-block; width: 36px; height: 1px; margin-right: 12px; vertical-align: middle; background: currentColor; opacity: .55; transform-origin: 100% 50%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head--center .eyebrow::before { animation: line-grow linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
  }
}
.perf-low .section-head--center .eyebrow::before { animation: none; transform: none; }
.perf-low .site-header.is-scrolled { background: rgb(18 19 24 / .96); }

/* Feinkorrektur: Der Punkt vom „ä“ rutschte durch das Kerning unter den Arm des „T“ (Überschrift „Täuschend echt.“) */
.kern-t { margin-right: .06em; }

/* ==========================================================================
   Schulungs-Modul (Vorschau in „Schulungen“): zwei Schritte statt einer Textwand
   ========================================================================== */
.module { padding: 0; }
.module-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: linear-gradient(135deg, #5b3fc4, #6366f1); color: #fff; }
.module-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgb(255 255 255 / .18); }
.module-ico .icon { width: 22px; height: 22px; }
.module-head strong { font: 700 1.1rem/1.25 var(--font-display); }

.module-steps { display: none; padding: 0 20px; border-bottom: 1px solid var(--line); background: #0f1119; }
.js .module-steps { display: flex; gap: 8px; }
.module-step { flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px 4px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: .95rem; font-weight: 600; text-align: left; cursor: pointer; transition: color .15s ease, border-color .2s ease; }
.module-step i { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 50%; font-size: .8rem; font-style: normal; font-weight: 700; transition: background-color .2s ease, border-color .2s ease; }
.module-step[aria-selected="true"] { color: #fff; border-bottom-color: var(--c-ind); }
.module-step[aria-selected="true"] i { border-color: transparent; background: var(--grad); color: #fff; }
@media (hover: hover) and (pointer: fine) { .module-step:hover { color: #fff; } }

.module-panel { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
@media (min-width: 960px) { .module-panel { min-height: 560px; } }

.module-scenario { display: grid; gap: 8px; margin: 0; padding: 14px 16px 14px 18px; border-left: 3px solid var(--c-ind); border-radius: 0 12px 12px 0; background: rgb(99 102 241 / .09); color: #d3d8ea; font-size: .9rem; line-height: 1.55; }
.module-label { display: inline-flex; align-items: center; gap: 8px; color: #a5b4fc; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.module-label .icon { width: 15px; height: 15px; }

.module-signals h4 { margin-bottom: 10px; color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.signals { display: grid; gap: 12px; }
.signals li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.sig-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(99 102 241 / .16); color: #a5b4fc; }
.signals b { display: block; color: #fff; font-size: .92rem; }
.signals li > div > span { display: block; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.module-go { align-self: center; margin-top: auto; }
.module-go .icon { width: 18px; height: 18px; }

/* Wissenscheck: Antworten als Karten mit Buchstaben */
.module .quiz-q { gap: 12px; margin: 0; padding: 0; background: none; }
.module .quiz-q > strong { font-size: 1rem; line-height: 1.4; }
.module .quiz-opts { gap: 10px; }
.module .quiz-opt { grid-template-columns: 30px 1fr; align-items: start; gap: 12px; padding: 13px 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #131829; color: #dfe2f3; font-size: .9rem; }
.quiz-letter { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(99 102 241 / .18); color: #a5b4fc; font-size: .85rem; font-weight: 700; transition: background-color .15s ease, color .15s ease; }
.quiz-text { display: grid; gap: 2px; }
.module .quiz-opt.is-good { border-color: var(--ok); background: rgb(16 185 129 / .12); }
.module .quiz-opt.is-good .quiz-letter { background: var(--ok); color: #06281d; }
.module .quiz-opt.is-bad { border-color: var(--c-red); background: rgb(239 68 68 / .12); }
.module .quiz-opt.is-bad .quiz-letter { background: var(--c-red); color: #fff; }

/* ==========================================================================
   Dashboard: Kacheln laufen gestaffelt ein, danach reagieren sie auf den Mauszeiger
   ========================================================================== */
.uc { position: relative; transition: opacity .25s ease, transform .25s var(--ease-out), border-color .2s ease, box-shadow .25s var(--ease-out); }
.reveal .uc { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal .ui-g > .uc:nth-child(2) { transition-delay: .07s; }
.reveal .ui-g > .uc:nth-child(3) { transition-delay: .14s; }
.reveal .ui-g > .uc:nth-child(4) { transition-delay: .21s; }
.reveal .ui-g > .uc:nth-child(5) { transition-delay: .28s; }
.reveal .ui-g > .uc:nth-child(6) { transition-delay: .35s; }
.reveal .ui-g + .uc { transition-delay: .42s; }
.reveal:not(.is-in) .uc { opacity: 0; transform: translateY(calc(12px * var(--m))); }
/* Balken wachsen ein (Abteilungsleistung) */
.uc svg.hb rect { transform-box: fill-box; transform-origin: 0 50%; transition: transform .25s var(--ease-out), filter .2s ease; }
.reveal svg.hb rect { transition: transform .8s var(--ease-out) .5s, filter .2s ease; }
.reveal:not(.is-in) svg.hb rect { transform: scaleX(0); }
.uc svg g[fill-opacity] circle { transform-box: fill-box; transform-origin: center; transition: transform .2s var(--ease-out); }
.act li { transition: background-color .15s ease; }
.mt > div { transition: background-color .15s ease; }

@media (hover: hover) and (pointer: fine) {
  /* Kachel hebt sich, Rahmen leuchtet, die übrigen Kacheln treten leicht zurück */
  .uc:hover { transform: translateY(calc(-3px * var(--m))); border-color: rgb(129 140 248 / .5); box-shadow: 0 18px 40px -22px rgb(99 102 241 / .7); }
  .ui:has(.uc:hover) .uc:not(:hover) { opacity: .75; }
  .uc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(129 140 248 / .14), transparent 65%); }
  .uc:hover::after { opacity: 1; }
  /* Balken und Punkte reagieren einzeln */
  .uc svg.hb rect:hover { transform: scaleX(1.05) scaleY(1.18); filter: brightness(1.25); }
  .uc svg g[fill-opacity] circle:hover { transform: scale(1.8); }
  .act li:hover { background: rgb(255 255 255 / .04); }
  .mt > div:hover { background: #232a45; }
}

/* Landing-Page als geöffnetes Browserfenster; die Karte „lädt“, sobald sie ins Bild kommt (per Klick oder beim normalen Scrollen) */
.browser-bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #0f1119; }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.browser-url { flex: 1; min-width: 0; margin-left: 10px; padding: 5px 12px; overflow: hidden; border-radius: 8px; background: #0b0d16; color: var(--muted); font-size: .78rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.browser-progress { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--grad); opacity: 0; transform: scaleX(0); transform-origin: 0 50%; }
.lp-body { transition: opacity .5s var(--ease-out) .3s, transform .5s var(--ease-out) .3s; }
.lp.lp-wait:not(.is-open) .lp-body { opacity: 0; transform: translateY(calc(10px * var(--m))); }
.lp.is-open .browser-progress { animation: page-load .7s var(--ease-out) both; }
@keyframes page-load { 0% { opacity: 1; transform: scaleX(0); } 75% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }


/* ==========================================================================
   Test-Mail (Outlook-Look) mit klickbarem Button und „Report Phishing“-Panel
   ========================================================================== */
.window.mail { position: relative; border-color: #dfe3ea; background: #fff; color: #1f2937; }

/* Kopfleiste mit Ordner, Mail-Aktionen und dem auffälligen Report-Button */
.mail-top { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid #e3e7ee; background: #f3f5f8; }
.mail-folder { display: inline-flex; align-items: center; gap: 8px; color: #1f2937; font-size: .92rem; font-weight: 700; }
.mail-folder .icon { width: 18px; height: 18px; color: #0f6cbd; }
.mail-actions { display: none; align-items: center; gap: 16px; color: #6b7280; font-size: .82rem; font-weight: 600; }
.mail-actions > span { display: inline-flex; align-items: center; gap: 6px; }
.mail-actions .icon { width: 16px; height: 16px; }
@media (min-width: 600px) { .mail-actions { display: inline-flex; } }

.mail-report { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border: 2px solid #e11d48; border-radius: 9px; background: #fff; color: #111827; font-size: .88rem; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 16px -8px rgb(225 29 72 / .7); transition: transform .16s var(--ease-out), box-shadow .2s ease, background-color .15s ease; }
.mail-report-logo { width: 22px; height: 22px; flex: none; border-radius: 50%; background: url("../img/logo.png") center / cover; }
.mail-report-shine { position: absolute; inset: 0; overflow: hidden; border-radius: 7px; pointer-events: none; }
.mail-report-shine::before { content: ""; position: absolute; inset: -20% auto -20% 0; width: 45%; background: linear-gradient(105deg, transparent 20%, rgb(255 255 255 / .95) 50%, transparent 80%); transform: translateX(-160%) skewX(-18deg); animation: report-glint 2.4s ease-in-out infinite; animation-play-state: paused; }
.mail-report::before, .mail-report::after { content: ""; position: absolute; inset: -3px; border: 3px solid #f43f5e; border-radius: 12px; opacity: 0; animation: report-ring 1.2s ease-out infinite; animation-play-state: paused; pointer-events: none; }
.mail-report::after { animation-delay: .6s; }
@keyframes report-glint { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes report-ring { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22, 1.75); } }
.mail-report:active { transform: scale(calc(1 - .03 * var(--m))); }
.is-active .mail-report-shine::before, .is-active .mail-report::before, .is-active .mail-report::after { animation-play-state: running; }
@media (hover: hover) and (pointer: fine) { .mail-report:hover { background: #fff1f3; box-shadow: 0 10px 22px -8px rgb(225 29 72 / .8); } }

/* Absender und Betreff */
.mail-head { padding: 16px 20px 14px; border-bottom: 1px solid #eef0f4; }
.mail-subject { margin: 0 0 12px; color: #111827; font: 650 1.12rem/1.35 var(--font-display); }
.mail-from { display: flex; align-items: center; gap: 12px; }
.mail-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: #0f6cbd; color: #fff; font-size: .85rem; font-weight: 700; }
.mail-from-text { display: grid; min-width: 0; line-height: 1.4; }
.mail-from-text strong { color: #111827; font-size: .92rem; }
.mail-addr { color: #6b7280; font-size: .82rem; overflow-wrap: anywhere; }
.mail-tag { margin-left: 6px; padding: 1px 7px; border: 1px solid #f5d29a; border-radius: 4px; background: #fff4e5; color: #a15c00; font-size: .7rem; font-style: normal; font-weight: 700; }
.mail-from-text small { color: #6b7280; font-size: .8rem; }
.mail-time { margin-left: auto; color: #6b7280; font-size: .8rem; white-space: nowrap; }

/* Mail-Inhalt */
.mail-body { padding: 18px 20px 20px; background: #f7f8fb; }
.mail-card { overflow: hidden; border: 1px solid #e3e7ee; border-radius: 8px; background: #fff; transition: opacity .35s ease; }
.mail-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; background: linear-gradient(90deg, #0b3d75, #0f6cbd); color: #fff; font-size: .88rem; }
.mail-card-top strong { font-size: 1rem; }
.mail-badge { padding: 3px 10px; border: 1px solid rgb(255 255 255 / .5); border-radius: 99px; background: rgb(255 255 255 / .16); font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mail-card-main { display: grid; gap: 12px; padding: 18px; color: #374151; font-size: .92rem; line-height: 1.55; }
.mail-card-title { margin: 0; color: #111827; font: 700 1.12rem/1.3 var(--font-display); }
.mail-card-main b { color: #111827; }
.mail-card-main .note { padding: 10px 12px; border-left: 3px solid #f59e0b; background: #fff8e6; color: #5b4400; font-size: .88rem; }
.mail-foot { margin: 0; padding: 0 18px 16px; color: #9ca3af; font-size: .78rem; }
.mail.is-deleted .mail-card { opacity: .35; }

/* „Probieren Sie es aus“: sichtbarer Hinweis, der von oben nach unten hüpft, und klickbarer Button */
.try { position: relative; display: grid; justify-items: center; gap: 14px; padding-top: 24px; }
.try-hint { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px 12px 18px; border-radius: 99px; background: linear-gradient(135deg, #ff8a00, #ff2d6f); color: #fff; font-size: 1.12rem; font-weight: 800; letter-spacing: .01em; box-shadow: 0 14px 30px -8px rgb(255 61 100 / .95), 0 0 0 5px rgb(255 122 60 / .28); animation: hop 1.3s infinite; animation-play-state: paused; }
.try-hint::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 14px; margin-left: -7px; border-radius: 3px; background: #ff4f5a; transform: rotate(45deg); }
.try-hint .icon { width: 20px; height: 20px; fill: currentColor; stroke-width: 1.5; }
@keyframes hop {
  0%   { translate: 0 0;     animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  28%  { translate: 0 -18px; animation-timing-function: cubic-bezier(.7, 0, .8, .4); }
  52%  { translate: 0 0; }
  62%  { translate: 0 -5px;  animation-timing-function: cubic-bezier(.7, 0, .8, .4); }
  74%, 100% { translate: 0 0; }
}
.mail .fake-btn--live { position: relative; display: block; width: min(100%, 400px); padding: 13px 22px; border-radius: 6px; background: #0f6cbd; color: #fff; font-size: .95rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s ease, transform .16s var(--ease-out); }
.fake-btn--live::after { content: ""; position: absolute; inset: -3px; border: 2px solid #60a5fa; border-radius: 9px; opacity: 0; animation: try-ring 2s ease-out infinite; animation-play-state: paused; pointer-events: none; }
@keyframes try-ring { 0% { transform: scale(1, 1); opacity: .8; } 80%, 100% { transform: scale(1.04, 1.25); opacity: 0; } }
.is-active .fake-btn--live::after, .is-active .try-hint { animation-play-state: running; }
.try.is-done .try-hint { animation: none; background: #64748b; box-shadow: 0 10px 22px -12px rgb(100 116 139 / .9); }
.try.is-done .try-hint::after { background: #64748b; }
.try.is-done .fake-btn--live::after { display: none; }
.fake-btn--live:active { transform: scale(calc(1 - .02 * var(--m))); }
@media (hover: hover) and (pointer: fine) { .mail .fake-btn--live:hover { background: #0b5cad; color: #fff; } }

/* Report-Panel: fährt von rechts ein, wie das Add-in in Outlook */
.mail-scrim { position: absolute; inset: 0; background: rgb(15 17 26 / .4); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.mail.is-reported .mail-scrim { opacity: 1; pointer-events: auto; }
.mail-pane { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; width: min(330px, 100%); background: #f4f6f8; color: #1f2937; box-shadow: -24px 0 50px -22px rgb(0 0 0 / .55); transform: translateX(100%); visibility: hidden; transition: transform .42s var(--ease-out), visibility 0s .42s; }
.mail.is-reported .mail-pane { transform: none; visibility: visible; transition-delay: 0s; cursor: grab; }
.mail-pane.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.mail-pane button { cursor: pointer; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 16px; background: #3b3a39; color: #fff; }
.pane-head strong { font-size: .98rem; }
.pane-tools { display: inline-flex; align-items: center; gap: 12px; }
.pane-tools .icon { width: 17px; height: 17px; }
.pane-tools button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; transition: background-color .15s ease; }
@media (hover: hover) and (pointer: fine) { .pane-tools button:hover { background: rgb(255 255 255 / .16); } }
.pane-app { display: flex; align-items: center; gap: 10px; padding: 0 16px 12px; background: #3b3a39; color: #e5e5e5; font-size: .95rem; }
.pane-body { flex: 1; padding: 14px; overflow: auto; }
.pane-card { display: grid; justify-items: center; gap: 12px; padding: 20px 18px; border: 1px solid #e3e7ee; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px -16px rgb(15 23 42 / .35); text-align: center; }
.pane-label { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: #5b5bd6; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pane-label .icon { width: 15px; height: 15px; }
.pane-check { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #dff5ea; color: #12915f; }
.pane-check .icon { width: 32px; height: 32px; stroke-width: 2.6; }
.pane-pill { padding: 5px 14px; border: 1px solid #a7e3c4; border-radius: 99px; background: #e8f8ef; color: #0f7a4d; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pane-title { margin: 0; color: #0f172a; font: 800 1.2rem/1.25 var(--font-display); }
.pane-text { margin: 0; color: #475569; font-size: .88rem; line-height: 1.5; }
.pane-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 11px 12px; border: 1px solid #d6dfec; border-radius: 10px; background: #eef2f8; color: #1e293b; font-size: .82rem; line-height: 1.45; text-align: left; }
.pane-note .icon { width: 17px; height: 17px; flex: none; margin-top: 1px; color: #e11d48; }
.pane-count { margin: 0; color: #94a3b8; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pane-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; padding: 0 16px; border: 0; border-radius: 10px; background: #12b981; color: #fff; font-size: .92rem; font-weight: 700; cursor: pointer; box-shadow: 0 10px 20px -10px rgb(18 185 129 / .8); transition: background-color .15s ease, transform .16s var(--ease-out); }
.pane-btn .icon { width: 17px; height: 17px; }
.pane-btn:active { transform: scale(calc(1 - .02 * var(--m))); }
@media (hover: hover) and (pointer: fine) { .pane-btn:hover { background: #0ea371; } }

.mail-toast { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 4; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; padding: 10px 16px; border-radius: 10px; background: #111827; color: #fff; font-size: .85rem; opacity: 0; visibility: hidden; transform: translateY(calc(8px * var(--m))); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s .25s; }
.mail-toast.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.perf-low .mail-report-shine::before, .perf-low .mail-report::before, .perf-low .mail-report::after, .perf-low .try-hint, .perf-low .fake-btn--live::after { animation: none; }
/* Reduzierte Bewegung: Panel blendet ein und aus, statt zu gleiten */
@media (prefers-reduced-motion: reduce) {
  .mail-report-shine::before, .mail-report::before, .mail-report::after, .try-hint, .fake-btn--live::after { animation: none; }
  .mail-pane { transform: none; opacity: 0; transition: opacity .2s ease, visibility 0s .2s; }
  .mail.is-reported .mail-pane { opacity: 1; transition-delay: 0s; cursor: auto; }
}

/* Systemeinstellungen: weniger Transparenz und mehr Kontrast → Materialien werden dichter, Ränder deutlicher */
@media (prefers-reduced-transparency: reduce) {
  .site-header, .site-header.is-scrolled { background: rgb(18 19 24 / .98); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .contact::backdrop { background: rgb(3 4 8 / .92); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-nav .submenu { background: #11141e; }
}
@media (prefers-contrast: more) {
  :root { --line: #4a5275; --line-strong: #6b7399; --muted: #c3c8dc; }
  .site-header, .site-header.is-scrolled { background: rgb(18 19 24 / .98); }
  .btn--ghost, .choice, .field input { border-color: #8b93b8; }
}

/* Autopilot: Ablaufzeile mittig, Panel füllt die Höhe des Nachbarn */
.stage .panel { display: flex; flex-direction: column; }
.stage .stair { flex: 1; height: auto; min-height: 168px; }
.chain { justify-content: center; text-align: center; }

/* Kontaktformular: Hinweis „wir melden uns“ */
.contact-promise { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid rgb(129 140 248 / .3); border-radius: 12px; background: rgb(99 102 241 / .1); color: #d9dcf5; font-size: .95rem; line-height: 1.4; }
.contact-promise .icon { width: 20px; height: 20px; flex: none; color: #a5b4fc; }

/* ---------- Klick-Effekt auf Buttons ----------
   Weicher Lichtkreis aus der Textfarbe des Buttons, dahinter ein feiner Ring, der etwas schneller läuft. */
.ripple-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ripple { position: absolute; border-radius: 50%; opacity: .55; background: currentColor; transform: scale(0); animation: ripple .7s var(--ease-out) forwards; }
@supports (background: color-mix(in srgb, red, blue)) {
  .ripple { background: radial-gradient(circle closest-side, color-mix(in srgb, currentColor 70%, transparent) 0%, color-mix(in srgb, currentColor 32%, transparent) 42%, transparent 72%); opacity: 1; }
}
.ripple::after { content: ""; position: absolute; inset: 8%; border: 2px solid currentColor; border-radius: 50%; opacity: .7; animation: ripple-ring .55s var(--ease-out) forwards; }
@keyframes ripple { 0% { transform: scale(.05); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes ripple-ring { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }