/* Geist + Geist Mono (Vercel, SIL Open Font License, siehe assets/fonts/OFL-Geist.txt).
   Gleiche Familie wie Identiqa AuraCore (Daniel, 09.11.2026). */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("/assets/fonts/geist.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("/assets/fonts/geist-mono.woff2") format("woff2");
}

/* Web-CI nach dem Identiqa-Logo (#191818) und der AuraLink-Hardware:
   neutrales Markenschwarz, ruhiges Papier, Leuchtkante #70F1F6 als
   einziger Akzent (Petrol #0C6B7C als Lesbarkeits-Variante auf hell). */
:root {
  color-scheme: light dark;
  /* Light: ruhiges, warmes Papier statt knallendem Weiß */
  --paper: #f1f0ec;
  --surface: #f9f8f5;
  --ink: #191818;
  --ink-2: #4c4e52;
  --ink-3: #686a6f;
  --hair: rgba(25, 24, 24, 0.16);
  --hair-soft: rgba(25, 24, 24, 0.09);
  --accent: #0c6b7c;
  --glow: #70f1f6;
  --deep: #1c1f24;
  --deeper: #101317;
  --nav-bg: rgba(241, 240, 236, 0.92);
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wrap-max: 1080px;
  --wrap-wide-max: 1280px;
}
/* Theme-Steuerung: data-theme="light|dark" erzwingt, ohne Attribut gilt das
   System (prefers-color-scheme). theme.js setzt das Attribut (Auto nach
   Sonnenstand, manuell oder System) und hält beide Blöcke synchron. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121417;
    --surface: #1a1d21;
    --ink: #f1f1ee;
    --ink-2: #b9bbbd;
    --ink-3: #8e9094;
    --hair: rgba(241, 241, 238, 0.16);
    --hair-soft: rgba(241, 241, 238, 0.09);
    --accent: #6fd3e0;
    --nav-bg: rgba(18, 20, 23, 0.9);
  }
  :root:not([data-theme="light"]) .inv-dark { filter: invert(1) hue-rotate(180deg); }
  :root:not([data-theme="light"]) .photo img,
  :root:not([data-theme="light"]) .frame img { opacity: 0.92; }
  :root:not([data-theme="light"]) .chart .bar-v { fill: var(--ink); }
  :root:not([data-theme="light"]) .chart .bar-y { fill: var(--ink-3); }
}
:root[data-theme="dark"] {
  --paper: #121417;
  --surface: #1a1d21;
  --ink: #f1f1ee;
  --ink-2: #b9bbbd;
  --ink-3: #8e9094;
  --hair: rgba(241, 241, 238, 0.16);
  --hair-soft: rgba(241, 241, 238, 0.09);
  --accent: #6fd3e0;
  --nav-bg: rgba(18, 20, 23, 0.9);
}
:root[data-theme="dark"] .inv-dark { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="dark"] .photo img,
:root[data-theme="dark"] .frame img { opacity: 0.92; }
:root[data-theme="dark"] .chart .bar-v { fill: var(--ink); }
:root[data-theme="dark"] .chart .bar-y { fill: var(--ink-3); }

/* Progressiver Wide-Gamut-Farbraum (Display-P3) für die Hardware-Leuchtkante
   auf modernen Apple- und OLED-Displays (better-color). */
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --accent: color(display-p3 0.12 0.42 0.48);
    --glow: color(display-p3 0.52 0.94 0.97);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --accent: color(display-p3 0.48 0.83 0.88);
    }
  }
  :root[data-theme="dark"] {
    --accent: color(display-p3 0.48 0.83 0.88);
  }
}

.theme-btn {
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  margin-right: 10px;
}
.theme-btn:hover { color: var(--ink); }

* { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: rgba(38, 184, 206, 0.2); color: var(--ink); }
html { background: var(--paper); color: var(--ink); font-variant-numeric: tabular-nums; overflow-x: clip; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
button { font-family: inherit; }

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
  z-index: 80;
}
.skip:focus { top: 12px; }

.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.wrap-wide {
  max-width: var(--wrap-wide-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}

.nav-dock {
  position: sticky;
  top: 0;
  z-index: 40;
  view-transition-name: site-nav;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair-soft);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  max-width: var(--wrap-wide-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 48px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s ease, transform 0.16s var(--ease);
}
.brand:active { transform: scale(0.97); }
.brand-mark { width: 22px; height: 22px; display: block; overflow: visible; flex-shrink: 0; }
.brand-mark .bm { fill: var(--ink); }
.brand-word {
  display: block;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--ink);
}
/* Dach-Claim neben dem Logo: leise, nur wo die Kopfzeile Platz hat. */
.brand-claim { display: none; }
@media (min-width: 1280px) {
  .brand-claim {
    display: block;
    margin-left: 4px;
    padding-left: 14px;
    border-left: 1px solid var(--hair);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: -0.004em;
    line-height: 18px;
    white-space: nowrap;
    color: var(--ink-3);
  }
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > a, .menu-btn, .menu-toggle, .text-link {
  color: var(--ink-2);
  font-size: 0.9rem;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
}
.nav-links > a:hover, .menu-btn:hover, .text-link:hover,
.nav-links > a[aria-current="page"] { color: var(--ink); }
.menu { position: relative; }
.menu-btn { display: inline-flex; align-items: center; gap: 6px; }
.menu-btn[aria-expanded="true"] { color: var(--ink); }
.chev {
  display: inline-block;
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  opacity: 0.56;
  transform: translateY(0.5px);
  transition: transform 0.18s var(--ease), opacity 0.18s ease;
}
.menu-btn:hover .chev,
.menu-btn[data-active="true"] .chev,
.lang-switch:hover .chev {
  opacity: 0.9;
}
.menu-btn[aria-expanded="true"] .chev,
.lang-switch[aria-expanded="true"] .chev {
  opacity: 1;
  transform: translateY(0.5px) rotate(180deg);
}
.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(400px, 78vw);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(20, 20, 23, 0.06);
}
.menu-panel a { display: block; padding: 12px 12px 14px; border-radius: 4px; }
.menu-panel a:hover, .menu-panel a:focus-visible { background: rgba(20, 20, 23, 0.04); }
.menu-panel strong { display: block; font-weight: 500; font-size: 0.95rem; letter-spacing: -0.015em; }
.menu-panel span { display: block; margin-top: 3px; color: var(--ink-3); font-size: 0.84rem; line-height: 1.35; }
.menu-panel[hidden] { display: none; }
.menu-toggle { display: none; }
.nav-ctas { display: flex; align-items: center; }
.text-link { color: var(--accent); border-bottom: 1px solid currentColor; padding: 4px 0; margin-left: 12px; }
.text-link:hover { color: var(--ink); }

.screen { padding: clamp(80px, 13vh, 136px) 0; }
.screen + .screen {
  padding-top: clamp(68px, 10.5vh, 108px);
  border-top: 1px solid var(--hair-soft);
}
.screen.stage-dark,
.screen + .screen.stage-dark {
  padding-top: clamp(84px, 13vh, 136px);
  padding-bottom: clamp(84px, 13vh, 136px);
  border-top: 1px solid rgba(112, 241, 246, 0.16);
}
.screen.stage-dark + .screen {
  padding-top: clamp(84px, 13vh, 136px);
  border-top: 0;
}

/* Hero: Betonhalle, Lichtkante, Zwei-Ton-Headline */
.hero {
  position: relative;
  min-height: clamp(540px, 86vh, 860px);
  display: flex;
  align-items: flex-end;
  background: var(--deeper);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
/* Panorama-Hero (US: auralink-pavillon.webp, UAE: auralink-horizont.webp): Sonnenaufgang links muss
   sichtbar bleiben, Appliance sitzt rechts der Mitte. Der Standard-Scrim
   (82 % links) würde den Horizont schlucken, deshalb eine leichtere Fassung,
   die die Lesbarkeit über dem hellen Himmel trotzdem hält. */
.hero-horizont .hero-bg {
  object-position: 50% 58%;
}
.hero-horizont .hero-scrim {
  background:
    linear-gradient(90deg, rgba(16, 21, 27, 0.68) 0%, rgba(16, 21, 27, 0.4) 44%, rgba(16, 21, 27, 0.06) 78%),
    linear-gradient(0deg, rgba(16, 21, 27, 0.58) 0%, rgba(16, 21, 27, 0) 36%);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 21, 27, 0.82) 0%, rgba(16, 21, 27, 0.55) 44%, rgba(16, 21, 27, 0.08) 78%),
    linear-gradient(0deg, rgba(16, 21, 27, 0.6) 0%, rgba(16, 21, 27, 0) 36%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(96px, 16vh, 180px);
  padding-bottom: clamp(56px, 10vh, 104px);
}
.hero h1 {
  color: #f3f7f8;
  max-width: 15ch;
}
.hero .quiet {
  color: var(--glow);
  font-weight: 460;
  max-width: 40ch;
}
.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: 36px;
}
.btn {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  background: #f3f7f8;
  color: var(--deep);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-radius: 4px;
}
.btn:hover { background: var(--glow); color: var(--deeper); }
.btn:active { transform: scale(0.98); }
.btn.ghost {
  background: transparent;
  color: #f3f7f8;
  border: 1px solid rgba(243, 247, 248, 0.45);
}
.btn.ghost:hover { border-color: var(--glow); color: var(--glow); background: transparent; }
.hero :focus-visible { outline-color: var(--glow); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d6d4cd; border-radius: 99px; }

h1 {
  font-size: clamp(2.7rem, 6vw, 4.8rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 17ch;
}
.quiet {
  margin-top: 28px;
  max-width: 44ch;
  color: var(--ink-2);
  font-size: clamp(1.15rem, 2vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: -0.012em;
}
.lang {
  margin-top: 36px;
  color: var(--ink-3);
  font-size: 0.88rem;
}
.lang a { color: var(--ink-2); }

.paths { margin-top: clamp(64px, 10vh, 96px); }
.path {
  display: block;
  padding: 28px 0;
  border-top: 1px solid var(--hair);
}
.path:last-child { border-bottom: 1px solid var(--hair); }
.path strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 480;
  letter-spacing: -0.03em;
}
.path span {
  display: block;
  margin-top: 8px;
  max-width: 48ch;
  color: var(--ink-2);
  font-size: 1.05rem;
}
.path:hover strong { color: var(--accent); }

.photo { margin-top: clamp(56px, 9vh, 88px); }
/* Viertelkreis-Signatur aus der Logomark: eine Ecke trägt die Marke. */
.photo img {
  width: 100%;
  height: clamp(280px, 52vh, 560px);
  object-fit: cover;
  border-radius: 8px clamp(40px, 9vw, 110px) 8px 8px;
  background: var(--surface);
}
.photo p, .frame p { margin-top: 14px; color: var(--ink-3); font-size: 0.92rem; max-width: 50ch; }
.frame {
  margin-top: clamp(40px, 7vh, 72px);
  border-radius: 8px clamp(32px, 7vw, 80px) 8px 8px;
  border: 1px solid var(--hair);
  overflow: hidden;
  background: var(--surface);
}
.frame img {
  width: 100%;
  height: clamp(220px, 40vh, 420px);
  object-fit: cover;
  background: var(--surface);
}

.ledger { margin-top: clamp(56px, 9vh, 80px); }
.ledger a {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 16px 32px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--hair);
}
.ledger a:last-child { border-bottom: 1px solid var(--hair); }
.ledger strong { font-weight: 500; letter-spacing: -0.02em; font-size: 1.08rem; }
.ledger span { color: var(--ink-2); }
.ledger a:hover strong { color: var(--accent); }
.fact {
  margin-top: 32px;
  max-width: 52ch;
  color: var(--ink-2);
  font-size: 0.98rem;
}
.audience {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  color: var(--ink);
  font-size: 0.95rem;
}
.audience a { border-bottom: 1px solid var(--hair); padding-bottom: 1px; }
.audience a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.continue { margin-top: 36px; color: var(--ink); font-size: 1.02rem; }
.continue a { border-bottom: 1px solid var(--hair); }
.continue a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.next-list { margin-top: clamp(52px, 8vh, 76px); }
.next-list a {
  display: block;
  padding: 24px 0;
  border-top: 1px solid var(--hair);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}
.next-list a:last-child { border-bottom: 1px solid var(--hair); }
.next-list a span { display: block; margin-top: 4px; color: var(--ink-2); font-size: 0.95rem; }
.next-list a:hover { color: var(--accent); }

/* Sektionen der Startseite */
h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 24ch;
}
.section-intro {
  margin-top: 16px;
  max-width: 54ch;
  color: var(--ink-2);
  font-size: 1.08rem;
}

.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  margin-top: clamp(40px, 6vh, 64px);
}
.contrast-col h3 {
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.contrast-col.plain h3 { color: var(--ink-3); }
.contrast-col.marked h3 { border-bottom-color: var(--accent); }
.contrast-col ul { list-style: none; }
.contrast-col li {
  padding: 18px 0;
  border-bottom: 1px solid var(--hair-soft);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.contrast-col.plain li { color: var(--ink-3); }
.contrast-col.marked li { color: var(--ink); font-weight: 480; }
.contrast-note {
  margin-top: clamp(32px, 5vh, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  color: var(--ink-2);
  font-size: 1.02rem;
  max-width: 58ch;
}

/* Notfall-Hinweis: fett, im Akzent, mit klickbarer Nummer. */
.contrast { padding-bottom: clamp(40px, 6vh, 56px); }
.screen + .screen.notruf-band,
.notruf-band {
  padding-top: 0;
  padding-bottom: clamp(76px, 11vh, 116px);
  border-top: 0;
}
.notruf {
  margin-top: clamp(36px, 5.5vh, 52px);
  border-top: 2px solid var(--accent);
  padding-top: clamp(24px, 3.5vh, 32px);
  max-width: 62ch;
}
.notruf-band .notruf {
  margin-top: 0;
}
.notruf strong {
  display: block;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 560;
  letter-spacing: -0.02em;
}
.notruf-nr {
  display: block;
  margin-top: 10px;
  color: var(--accent);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.notruf-nr:hover { color: var(--ink); }
.notruf span {
  display: block;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 1.02rem;
}

.obj-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: clamp(32px, 5vh, 48px);
}
.obj-tabs button {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 10px 16px;
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--hair);
  border-radius: 4px;
  cursor: pointer;
}
.obj-tabs button:hover {
  color: var(--ink);
  border-color: var(--ink-3);
  background: var(--paper);
}
.obj-tabs button[aria-selected="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.obj-panels article { margin-top: 24px; max-width: 62ch; }
.obj-panels h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.015em; }
.obj-panels p { margin-top: 10px; color: var(--ink-2); font-size: 1.05rem; line-height: 1.55; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(40px, 6vh, 64px);
}
.stat { border-top: 1px solid var(--hair); padding-top: 24px; }
.stat .v {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 480;
  letter-spacing: -0.035em;
  line-height: 1;
}
.stat .v .u { font-size: 0.45em; font-weight: 460; color: var(--ink-2); margin-left: 6px; letter-spacing: -0.01em; }
.stat .k { margin-top: 10px; font-weight: 500; letter-spacing: -0.01em; }
.stat .n { margin-top: 6px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.45; max-width: 34ch; }

.chart { margin-top: clamp(48px, 8vh, 72px); }
.chart svg { width: 100%; height: auto; display: block; }
.chart .bar { fill: var(--accent); opacity: 0.88; }
.chart .bar-open { opacity: 0.38; }
.chart .bar-v { fill: var(--ink); font-size: 15px; font-weight: 500; text-anchor: middle; }
.chart .bar-y { fill: var(--ink-3); font-size: 13px; text-anchor: middle; }
.chart figcaption { margin-top: 12px; color: var(--ink-3); font-size: 0.9rem; }
.sources { margin-top: 20px; list-style: none; }
.sources li { color: var(--ink-3); font-size: 0.82rem; line-height: 1.5; }
.sources a { border-bottom: 1px solid var(--hair); }

.check-form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  max-width: 560px;
}
.check-form input {
  flex: 1 1 260px;
  font: inherit;
  font-size: 1rem;
  padding: 13px 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 4px;
}
.check-form input::placeholder { color: var(--ink-3); }
.check-form button {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 13px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 4px;
  cursor: not-allowed;
  opacity: 0.55;
}
.check-note { margin-top: 16px; color: var(--ink-2); font-size: 0.95rem; max-width: 54ch; }
.check-note a { color: var(--accent); border-bottom: 1px solid currentColor; }

.quote-list { margin-top: clamp(40px, 6vh, 64px); }
.quote-list blockquote,
.quote-list .voice {
  padding: 28px 0;
  border-top: 1px solid var(--hair);
}
.quote-list blockquote:last-child, .quote-list .voice:last-child { border-bottom: 1px solid var(--hair); }
.quote-list p {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.4;
  max-width: 56ch;
}
.quote-list footer, .quote-list .voice-who { margin-top: 12px; color: var(--ink-3); font-size: 0.92rem; }
/* Startseite: Rollen-Zeilen verlinken auf ihre Rollenseite. Linien sitzen am Link, nicht am Zitat. */
.quote-list .quote-link { display: block; color: inherit; text-decoration: none; border-top: 1px solid var(--hair); }
.quote-list .quote-link:last-child { border-bottom: 1px solid var(--hair); }
.quote-list .quote-link blockquote, .quote-list .quote-link .voice { border: 0; }
.quote-list .quote-link footer::after,
.quote-list .quote-link .voice-who::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.quote-list .quote-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (hover: hover) {
  .quote-list .quote-link:hover footer, .quote-list .quote-link:hover .voice-who { color: var(--accent); }
  .quote-list .quote-link:hover footer::after, .quote-list .quote-link:hover .voice-who::after { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .quote-list .quote-link footer::after, .quote-list .quote-link .voice-who::after { transition: none; }
}

.kw-block { margin-top: clamp(48px, 8vh, 72px); max-width: 62ch; }
.kw-block h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.kw-block p { margin-top: 14px; color: var(--ink-2); font-size: 1.08rem; line-height: 1.55; }

.mini-faq { margin-top: clamp(64px, 10vh, 96px); max-width: 62ch; }
.mini-faq h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 24px; }
.mini-faq article { padding: 24px 0; border-bottom: 1px solid var(--hair); }
.mini-faq article:first-of-type { margin-top: 0; border-top: 1px solid var(--hair); }
.mini-faq h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.015em; }
.mini-faq p { margin-top: 10px; color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; }

.prose-wide { max-width: 760px; }
.insight { padding: clamp(32px, 5vh, 48px) 0; border-top: 1px solid var(--hair); }
.insight:last-of-type { border-bottom: 1px solid var(--hair); }
.insight h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.insight p { margin-top: 16px; color: var(--ink-2); font-size: 1.08rem; line-height: 1.55; max-width: 62ch; }
.insight .continue a { color: var(--accent); border-bottom-color: var(--accent); }

.prose { max-width: 62ch; margin-top: clamp(24px, 3.5vh, 36px); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: clamp(56px, 9vh, 88px); }
.prose > h2:first-child { margin-top: 0; }
.arch-grid + .prose,
details.more + .prose,
.notruf + .prose,
.fact + .prose,
.photo + .prose,
.frame + .prose,
.ledger + .prose {
  margin-top: clamp(64px, 10vh, 96px);
  padding-top: clamp(36px, 5.5vh, 52px);
  border-top: 1px solid var(--hair);
}
.prose p { margin-top: 18px; color: var(--ink-2); font-size: 1.08rem; line-height: 1.55; }
.prose p.lead { color: var(--ink); font-size: 1.2rem; }

details.more {
  margin-top: clamp(44px, 7vh, 64px);
  border-top: 1px solid var(--hair);
  padding-top: 22px;
}
details.more summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  list-style: none;
}
details.more[open] > summary { margin-bottom: 14px; }
details.more summary:hover { color: var(--accent); }
details.more summary::-webkit-details-marker { display: none; }
details.more p, details.more li { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
details.more ul { margin: 14px 0 8px 1.1em; }
details.more li { margin: 8px 0; }

.faq { margin-top: clamp(48px, 7vh, 72px); }
.faq article { padding: clamp(28px, 4.5vh, 40px) 0; border-top: 1px solid var(--hair); }
.faq article:last-child { border-bottom: 1px solid var(--hair); }
.faq h2 { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; max-width: 30ch; }
.faq p { margin-top: 12px; max-width: 62ch; color: var(--ink-2); font-size: 1.05rem; }

footer.closing {
  margin-top: clamp(64px, 10vh, 120px);
  padding: clamp(48px, 8vh, 88px) 0 40px;
  background: var(--deeper);
  color: rgba(247, 247, 245, 0.55);
}
.footer-word { display: block; width: clamp(140px, 22vw, 210px); height: auto; opacity: 0.95; }
.legal {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  border-top: 1px solid rgba(247, 247, 245, 0.14);
  margin-top: 28px;
  padding-top: 18px;
}
.legal a:hover { color: #f1f1ee; }
.crumbs { color: var(--ink-3); font-size: 0.85rem; margin-bottom: 28px; }

@media (max-width: 800px) {
  .ledger a { grid-template-columns: 1fr; gap: 4px; }
  .contrast-grid { grid-template-columns: 1fr; gap: 32px; }
  .stats { grid-template-columns: 1fr; gap: 28px; }
}
/* ---- Motion-System (Apple-Vorbild: wenig, weich, mit Absicht) ---- */

/* Scroll-Reveals: .m-init setzt nur JavaScript (motion.js), daher bleibt
   ohne JavaScript und mit reduced-motion alles sofort sichtbar. */
.m-init {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: 0ms;
}
.m-init.m-in { opacity: 1; transform: none; }

/* Kontrast-Choreografie: Erst baut sich links der Ist-Zustand auf,
   Zeile für Zeile. Dann löst rechts Identiqa auf, aus leichter Unschärfe. */
.contrast-grid.m-init { opacity: 1; transform: none; }
.contrast-grid.m-init .contrast-col.plain h3,
.contrast-grid.m-init .contrast-col.plain li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.contrast-grid.m-init .contrast-col.marked h3,
.contrast-grid.m-init .contrast-col.marked li {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(5px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease);
}
.contrast-grid.m-init.m-in .contrast-col h3,
.contrast-grid.m-init.m-in .contrast-col li {
  opacity: 1;
  transform: none;
  filter: none;
}
.contrast-grid.m-init.m-in .contrast-col.plain h3 { transition-delay: 0ms; }
.contrast-grid.m-init.m-in .contrast-col.plain li:nth-child(1) { transition-delay: 120ms; }
.contrast-grid.m-init.m-in .contrast-col.plain li:nth-child(2) { transition-delay: 260ms; }
.contrast-grid.m-init.m-in .contrast-col.plain li:nth-child(3) { transition-delay: 400ms; }
.contrast-grid.m-init.m-in .contrast-col.plain li:nth-child(4) { transition-delay: 540ms; }
.contrast-grid.m-init.m-in .contrast-col.marked h3 { transition-delay: 820ms; }
.contrast-grid.m-init.m-in .contrast-col.marked li:nth-child(1) { transition-delay: 960ms; }
.contrast-grid.m-init.m-in .contrast-col.marked li:nth-child(2) { transition-delay: 1100ms; }
.contrast-grid.m-init.m-in .contrast-col.marked li:nth-child(3) { transition-delay: 1240ms; }

/* Chart: Balken wachsen beim ersten Sichtkontakt von unten. */
.chart.m-init .bar {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
  transition: transform 0.8s var(--ease);
}
.chart.m-init .bar-v { opacity: 0; transition: opacity 0.4s ease 0.6s; }
.chart.m-init.m-in .bar { transform: scaleY(1); }
.chart.m-init.m-in .bar-v { opacity: 1; }
.chart.m-init.m-in .bar:nth-of-type(1) { transition-delay: 0ms; }
.chart.m-init .bar:nth-of-type(2) { transition-delay: 80ms; }
.chart.m-init .bar:nth-of-type(3) { transition-delay: 160ms; }
.chart.m-init .bar:nth-of-type(4) { transition-delay: 240ms; }
.chart.m-init .bar:nth-of-type(5) { transition-delay: 320ms; }
.chart.m-init .bar:nth-of-type(6) { transition-delay: 400ms; }

/* Hero: eine orchestrierte Lade-Sequenz, rein in CSS. */
@media (prefers-reduced-motion: no-preference) {
  /* Hero-Bild, zwei Fälle (per onload am <img> entschieden):
     ist-da      Das Bild war schon vor dem ersten Bildaufbau geladen (Cache, Neuladen,
                 schnelle Leitung): Es steht sofort, ohne Einblendung. Vorher wurde es
                 bei jedem Neuladen erst schwarz und blendete dann 1,2 s wieder ein.
     ist-bereit  Das Bild kommt erst nach dem ersten Bildaufbau an: Es blendet weich ein,
                 sobald es geladen und dekodiert ist, statt mitten hinein zu platzen.
     Bewusst nur Deckkraft und als Transition: Der Endzustand ist ein echter Stilwert
     (keine Keyframe-Füllung, die abreißen kann), und ohne Skalierung gibt es am Ende
     keinen Schärfe-Sprung. Daniels Befunde 09.11.2026. */
  .js .hero-bg { opacity: 0; }
  .js .hero-bg.ist-da { opacity: 1; }
  .js .hero-bg.ist-bereit { opacity: 1; transition: opacity 0.9s var(--ease); }
  .hero h1 { animation: hero-up 0.8s var(--ease) 0.15s both; }
  .hero .quiet { animation: hero-up 0.8s var(--ease) 0.3s both; }
  .hero .acts { animation: hero-up 0.8s var(--ease) 0.45s both; }
  @keyframes hero-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
  .menu-panel:not([hidden]) { animation: popover-in 0.16s var(--ease); }
  .obj-panels [role="tabpanel"]:not([hidden]) { animation: tab-panel-in 0.22s var(--ease) both; }
  @keyframes popover-in {
    from {
      transform: translateY(-5px) scale(0.98);
    }
    to {
      transform: none;
    }
  }
  @keyframes tab-panel-in {
    from {
      opacity: 0;
      transform: translateY(5px);
      filter: blur(2px);
    }
    to {
      opacity: 1;
      transform: none;
      filter: blur(0);
    }
  }
}

/* Logo: ein ruhiger Effekt für das ganze Zeichen, keine Einzelteile färben oder verschieben. */
@media (hover: hover) and (pointer: fine) {
  .brand:hover { opacity: 0.68; }
}

/* Mikro-Feedback auf Interaktion. */
a, button { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.btn, .obj-tabs button, .check-form button { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.15s var(--ease); }
.obj-tabs button:active, .btn:active { transform: scale(0.97); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .brand:active { transform: none; }
  .m-init { opacity: 1; transform: none; transition: none; }
  .chart.m-init .bar { transform: none; transition: none; }
  .chart.m-init .bar-v { opacity: 1; }
}

.notruf small {
  display: block;
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 58ch;
}

.notruf-mehr { margin-top: 8px; }
.notruf-mehr summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-3);
  font-size: 0.82rem;
}
.notruf-mehr summary::-webkit-details-marker { display: none; }
.notruf-mehr summary::before {
  content: "+";
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 13px;
  text-align: center;
  border: 1px solid var(--hair);
  border-radius: 3px;
  font-size: 0.75rem;
}
.notruf-mehr[open] summary::before { content: "\2212"; }
.notruf-mehr summary:hover { color: var(--ink); }
.notruf-mehr p {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 58ch;
}


/* Bilder blenden erst ein, wenn sie geladen sind (motion.js setzt die
   Klassen). Verhindert Platzhalter-Blitzen und das Reinploppen großer
   Dateien; steht bewusst am Dateiende, damit es Theme-Regeln schlägt. */
img.img-wait { opacity: 0; }
img.img-wait.img-ready { opacity: 1; transition: opacity 0.9s var(--ease); }
:root[data-theme="dark"] .photo img.img-wait:not(.img-ready),
:root[data-theme="dark"] .frame img.img-wait:not(.img-ready),
:root[data-theme="dark"] .team-portrait img.img-wait:not(.img-ready) { opacity: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .photo img.img-wait:not(.img-ready),
  :root:not([data-theme="light"]) .frame img.img-wait:not(.img-ready),
  :root:not([data-theme="light"]) .team-portrait img.img-wait:not(.img-ready) { opacity: 0; }
}

/* Sofort-Check, Demo-Lauf */
.check-form button { cursor: pointer; opacity: 1; }
.check-run { margin-top: 28px; max-width: 560px; }
.check-head { font-weight: 560; letter-spacing: -0.01em; }
.check-steps { margin-top: 10px; }
.check-step {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}
.check-step strong { font-weight: 500; font-size: 0.98rem; }
.check-step span { grid-column: 1; color: var(--ink-3); font-size: 0.85rem; }
.check-status {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 500;
}
.check-status.is-wait { color: var(--ink-3); }
.check-status.is-ok { color: var(--accent); }
.check-status.is-warn { color: #94620f; }
:root[data-theme="dark"] .check-status.is-warn { color: #e3a64a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .check-status.is-warn { color: #e3a64a; }
}
.check-status.is-part { color: var(--ink-2); }
.check-sub { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.8rem; color: var(--ink-3); }
.check-sub li { padding: 2px 0 2px 16px; position: relative; overflow-wrap: anywhere; }
.check-sub li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.check-sub li.is-ok::before { background: var(--accent); }
.check-sub li.is-warn::before { background: #94620f; }
.check-sub code { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-2); }
.check-sum { margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 14px; font-size: 1.02rem; }
.check-sum b { font-weight: 560; }
.check-demo, .check-invalid { margin-top: 8px; color: var(--ink-3); font-size: 0.82rem; }

/* ---- Optimum-Pass nach apple-design / emil-design-eng (07.11.2026) ---- */

/* Seitenübergänge wie eine App: Cross-Document View Transitions.
   Die Navigationsleiste (site-nav) bleibt vollkommen ruhig stehen. Der Rest der Seite
   blendet als Ganzes über, genau so, wie er gerade im Bild ist.
   Wichtig: main bekommt KEINEN eigenen view-transition-name. Sonst morpht der Browser
   das Inhaltsfeld von seiner alten Scroll-Position zur neuen, und der Text springt
   von unten nach oben ins Bild (Daniels Befund, 09.11.2026). */
@view-transition { navigation: auto; }
::view-transition-group(site-nav) { animation: none; }
::view-transition-old(site-nav) { display: none; }
::view-transition-new(site-nav) { animation: none; }
/* Abgang schnell und still, Auftritt ruhig: die neue Seite gleitet 10px herein,
   eine leichte Unschärfe löst sich dabei auf (verbindet alt und neu zu einer Bewegung). */
::view-transition-old(root) {
  animation: vt-page-out 0.2s cubic-bezier(0.23, 1, 0.32, 1) both;
}
::view-transition-new(root) {
  animation: vt-page-in 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.08s both;
}
@keyframes vt-page-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes vt-page-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
/* Fallback nur für Browser ohne View Transitions, sonst liefe die Einblendung doppelt. */
@supports not (view-transition-name: none) {
 @media (prefers-reduced-motion: no-preference) {
  main#content {
    animation: page-glide-in 0.26s var(--ease) both;
  }
  @keyframes page-glide-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
 }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Optische Typografie: ausgewogene Headline-Umbrüche, keine Hurenkinder. */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

/* Druck-Feedback sofort auf pointer-down, 100ms, wie bei Apple. */
.btn:active, .obj-tabs button:active, .check-form button:active,
.theme-btn:active, .menu-btn:active, .menu-toggle:active {
  transform: scale(0.97);
  transition: transform 100ms ease-out;
}

/* Mobile fühlt sich nativ an: kein graues Tap-Blitzen, keine Tap-Verzögerung. */
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Anker gleiten per motion.js (eigene Kurve, unterbrechbar); ohne JS springt der Browser direkt. */
/* Sprungziele (#ransomware, #platform …) landen mit Luft unter dem klebenden Menü, nie darunter. */
html { scroll-padding-top: calc(var(--nav-dock-h, 60px) + 16px); }
html { scrollbar-gutter: stable; }

/* Wissens-Hub: Suche, Cluster, Glossar */
.wissen-suche { margin-top: 32px; }
.wissen-suche input {
  width: 100%;
  max-width: 560px;
  font: inherit;
  font-size: 1.02rem;
  padding: 13px 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 6px;
}
.wissen-suche input::placeholder { color: var(--ink-3); }
.wissen-leer { margin-top: 12px; color: var(--ink-3); font-size: 0.95rem; }
.wissen-cluster { margin-top: clamp(56px, 9vh, 88px); }
.wissen-cluster > h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  margin-bottom: clamp(22px, 3.2vh, 32px);
}
.wissen-cluster .insight h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 500; letter-spacing: -0.02em; }
.glossar { margin-top: 0; border-top: 1px solid var(--hair); }
.glossar-eintrag { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.glossar dt { font-weight: 560; letter-spacing: -0.01em; }
.glossar dd { margin: 6px 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 62ch; }

/* Footer: Versicherungs-Hinweis und Spalten */
.footer-cta {
  display: block;
  border-left: 3px solid var(--glow);
  padding: 4px 0 4px 18px;
  margin-bottom: clamp(32px, 5vh, 48px);
}
.footer-cta strong {
  display: block;
  color: #f1f1ee;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 560;
  letter-spacing: -0.02em;
}
.footer-cta span { display: block; margin-top: 4px; color: rgba(247, 247, 245, 0.6); font-size: 0.95rem; }
.footer-cta:hover strong { color: var(--glow); }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin-bottom: clamp(36px, 6vh, 56px);
}
.footer-grid h4 {
  color: rgba(247, 247, 245, 0.45);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin: 7px 0; }
.footer-grid a { color: rgba(247, 247, 245, 0.78); font-size: 0.95rem; }
.footer-grid a:hover { color: var(--glow); }

/* Über uns: Team */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 28px;
  max-width: 760px;
}
.team-karte {
  border: 1px solid var(--hair);
  border-radius: 8px clamp(24px, 4vw, 48px) 8px 8px;
  padding: 24px;
  background: var(--surface);
}
.team-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 8px 32px 8px 8px;
  background: var(--deeper);
  color: var(--glow);
  font-weight: 560;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
}
.team-karte h3 { margin-top: 16px; font-size: 1.15rem; font-weight: 560; letter-spacing: -0.015em; }
.team-karte h3 a:hover { color: var(--accent); }
.team-rolle { color: var(--accent); font-size: 0.9rem; font-weight: 500; margin-top: 2px; }
.team-karte p { margin-top: 8px; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }

.img-slot {
  margin-top: 24px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--hair);
  border-radius: 8px clamp(24px, 4vw, 48px) 8px 8px;
  background: var(--surface);
  color: var(--ink-3);
  font-size: 0.9rem;
  max-width: 760px;
}

.footer-notruf { margin-bottom: clamp(28px, 4vh, 40px); }
.footer-notruf a { color: var(--glow); font-size: 0.95rem; font-weight: 500; }
.footer-notruf a:hover { color: #f1f1ee; }
.presse-logos { list-style: none; margin-top: 24px; max-width: 62ch; }
.presse-logos li { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.presse-logos li:first-child { border-top: 1px solid var(--hair); }
.presse-logos a { color: var(--accent); }
.presse-logos a:hover { color: var(--ink); }

/* Bühnen statt Dokumente: Inhalts-H2s bekommen großen Vorlauf,
   Teamzeilen sind Editorial-Zeilen, keine Kärtchen. */
.wrap > h2:not(:first-child) {
  margin-top: clamp(68px, 11vh, 108px);
  margin-bottom: 8px;
}
.wrap > .prose + .photo, .wrap > .prose + .frame { margin-top: clamp(40px, 7vh, 64px); }

.team-rows { margin-top: clamp(40px, 7vh, 64px); }
.team-row {
  display: grid;
  grid-template-columns: minmax(140px, 188px) 1fr;
  gap: clamp(24px, 4.5vw, 52px);
  align-items: center;
  padding: clamp(28px, 5vh, 44px) 0;
  border-top: 1px solid var(--hair);
}
.team-row:last-child { border-bottom: 1px solid var(--hair); }
.team-row .team-avatar {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 15vw, 188px);
  height: clamp(154px, 16.5vw, 208px);
  border-radius: 10px 48px 10px 10px;
  background: radial-gradient(120% 100% at 50% 0%, #1a2028 0%, #0d1014 100%);
  border: 1px solid rgba(112, 241, 246, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(10, 12, 16, 0.08),
    0 14px 32px -10px rgba(10, 12, 16, 0.2);
}
.team-avatar-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.team-avatar-ini {
  position: relative;
  z-index: 1;
  font-size: clamp(1.65rem, 2.3vw, 2.05rem);
  font-weight: 560;
  letter-spacing: 0.04em;
  color: var(--glow);
}
.team-avatar-tag {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  font-size: 0.64rem;
  font-weight: 540;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 241, 238, 0.56);
}
.team-portrait {
  position: relative;
  width: clamp(140px, 15vw, 188px);
  height: clamp(154px, 16.5vw, 208px);
  border-radius: 10px 48px 10px 10px;
  overflow: hidden;
  background: var(--deeper);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 6px rgba(10, 12, 16, 0.08),
    0 14px 32px -10px rgba(10, 12, 16, 0.22);
}
.team-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 22%;
  filter: saturate(1.14) contrast(1.08) brightness(0.97);
}
:root[data-theme="dark"] .team-portrait img {
  filter: saturate(1.14) contrast(1.08) brightness(0.92);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .team-portrait img {
    filter: saturate(1.14) contrast(1.08) brightness(0.92);
  }
}
.team-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 240, 215, 0.08) 0%,
      rgba(0, 0, 0, 0) 36%,
      rgba(0, 0, 0, 0) 60%,
      rgba(16, 19, 23, 0.26) 100%
    );
  box-shadow: inset 0 0 0 1px rgba(25, 24, 24, 0.12);
}
:root[data-theme="dark"] .team-portrait::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .team-portrait::after {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  }
}
.team-row h3 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.team-row h3 a:hover { color: var(--accent); }
.team-row .team-rolle { margin-top: 6px; color: var(--accent); font-weight: 500; font-size: 1rem; }
.team-row p { margin-top: 10px; color: var(--ink-2); font-size: 1.05rem; line-height: 1.5; max-width: 54ch; }
@media (max-width: 700px) {
  .team-row { grid-template-columns: 1fr; gap: 16px; }
  .team-portrait,
  .team-row .team-avatar {
    width: 136px;
    height: 150px;
    border-radius: 10px 40px 10px 10px;
  }
}

/* Bereichs-Navigation Unternehmen */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0 0 clamp(40px, 6vh, 60px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hair);
}
.subnav a { color: var(--ink-3); font-size: 0.92rem; padding: 4px 0; }
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---- Flaggschiff-Upgrade: Cybersecurity Apple Stages (identiqa-design) ---- */

/* 1. Two-Tone Executive Statements (Apple / Linear Typografie-Kontrast) */
.two-tone {
  font-size: clamp(1.38rem, 2.45vw, 2.05rem);
  line-height: 1.26;
  letter-spacing: -0.026em;
  color: var(--ink-3);
  max-width: 44ch;
  margin-top: clamp(20px, 3.2vh, 32px);
  font-weight: 420;
}
.two-tone strong {
  color: var(--ink);
  font-weight: 540;
}
.stage-dark .two-tone {
  color: rgba(241, 241, 238, 0.56);
}
.stage-dark .two-tone strong {
  color: #f1f1ee;
}

/* 2. Tiefdunkle Pro-Stages (.stage-dark) für Hardware, Konsole & Live-Check */
.stage-dark {
  background: linear-gradient(180deg, #0d1014 0%, #12161c 100%);
  color: #f1f1ee;
  border-top: 1px solid rgba(112, 241, 246, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}
.stage-dark h1,
.stage-dark h2,
.stage-dark h3 {
  color: #f1f1ee;
}
.stage-dark .quiet,
.stage-dark .section-intro {
  color: rgba(241, 241, 238, 0.72);
}
.stage-dark .crumbs,
.stage-dark .crumbs a {
  color: rgba(241, 241, 238, 0.52);
}
.stage-dark .crumbs a:hover {
  color: var(--glow);
}
.stage-dark .fact {
  color: rgba(241, 241, 238, 0.78);
  border-left-color: var(--glow);
}
.stage-dark .ledger {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.stage-dark .ledger a {
  border-top-color: rgba(255, 255, 255, 0.12);
}
.stage-dark .ledger a strong {
  color: #f1f1ee;
}
.stage-dark .ledger a span {
  color: rgba(241, 241, 238, 0.68);
}
.stage-dark .ledger a:hover strong {
  color: var(--glow);
}
.stage-dark .audience {
  color: rgba(241, 241, 238, 0.62);
}
.stage-dark .audience a {
  color: #f1f1ee;
  border-bottom-color: rgba(112, 241, 246, 0.4);
}
.stage-dark .audience a:hover {
  color: var(--glow);
  border-bottom-color: var(--glow);
}

/* Check-Sektion als dunkle Pro-Stage */
.stage-dark.check .check-form input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f1f1ee;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.stage-dark.check .check-form input::placeholder {
  color: rgba(241, 241, 238, 0.42);
}
.stage-dark.check .check-form input:focus {
  border-color: var(--glow);
  outline: none;
}
.stage-dark.check .check-form button {
  background: var(--glow);
  color: #101317;
  font-weight: 560;
}
.stage-dark.check .check-form button:hover {
  background: #9cf6fa;
}
.stage-dark.check .check-run {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px 32px 8px 8px;
  padding: 20px 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.stage-dark.check .check-step {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.stage-dark.check .check-step span {
  color: rgba(241, 241, 238, 0.6);
}
.stage-dark.check .check-status.is-ok {
  color: var(--glow);
}
.stage-dark.check .check-status.is-warn {
  color: #e3a64a;
}
.stage-dark.check .check-status.is-part {
  color: rgba(241, 241, 238, 0.82);
}
.stage-dark.check .check-sub {
  color: rgba(241, 241, 238, 0.6);
}
.stage-dark.check .check-sub code {
  color: rgba(241, 241, 238, 0.85);
}
.stage-dark.check .check-sub li.is-ok::before {
  background: var(--glow);
}
.stage-dark.check .check-sub li.is-warn::before {
  background: #e3a64a;
}
.stage-dark.check .check-sum {
  border-top-color: rgba(255, 255, 255, 0.14);
}
.stage-dark.check .check-note {
  color: rgba(241, 241, 238, 0.56);
}
.stage-dark.check .check-note a {
  color: var(--glow);
}

/* 3. Double-Bezel Machined Framing (.machined-frame) mit konzentrischen Radien (better-ui) */
.machined-frame {
  margin-top: clamp(36px, 6vh, 56px);
  padding: clamp(10px, 1.5vw, 16px);
  background: linear-gradient(180deg, #181c22 0%, #0f1216 100%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 14px clamp(44px, 8.5vw, 98px) 14px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 6px rgba(8, 10, 14, 0.14),
    0 14px 32px -8px rgba(8, 10, 14, 0.28),
    0 28px 64px -16px rgba(8, 10, 14, 0.42);
  color: #f1f1ee;
}
.machined-screen {
  overflow: hidden;
  border-radius: 6px clamp(32px, 7.5vw, 82px) 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  outline: 1px solid rgba(255, 255, 255, 0.06);
  outline-offset: -1px;
  background: #0a0c0f;
}
.machined-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
.machined-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 14px 8px 4px;
}
.machined-tag {
  font-family: var(--mono);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 540;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glow);
  font-variant-numeric: tabular-nums;
}
.machined-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px var(--glow);
}
.machined-meta p {
  margin: 0;
  font-size: 0.92rem;
  color: rgba(241, 241, 238, 0.74);
  max-width: 58ch;
}

/* 4. Technische Spezifikations-Leiste (.spec-strip) */
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 18px 24px;
  margin-top: clamp(32px, 5vh, 48px);
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 8px 36px 8px 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.stage-dark .spec-strip {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.12);
}
.spec-item strong {
  display: block;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stage-dark .spec-item strong {
  color: var(--glow);
}
.spec-item span {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.stage-dark .spec-item span {
  color: rgba(241, 241, 238, 0.68);
}

/* 5. Bento- & Architektur-Grid (.arch-grid) + 2-Spalten-Split (.split-stage) */
.split-stage {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
  margin-top: clamp(28px, 4.5vh, 44px);
}
@media (max-width: 820px) {
  .split-stage {
    grid-template-columns: 1fr;
  }
}

.arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: clamp(36px, 5.5vh, 52px);
}
.arch-grid:has(> .arch-card:nth-child(4):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 680px) {
  .arch-grid,
  .arch-grid:has(> .arch-card:nth-child(4):last-child) {
    grid-template-columns: 1fr;
  }
}
.arch-card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 8px 32px 8px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.arch-card h3 {
  font-size: 1.14rem;
  font-weight: 560;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.arch-card p {
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
.arch-card .arch-meta {
  font-size: 0.8rem;
  font-weight: 520;
  color: var(--accent);
  padding-top: 10px;
  border-top: 1px solid var(--hair-soft);
}

/* 6. GEO Citation & Key-Takeaway Callout (.kw-block veredelt) */
.kw-block {
  margin-top: clamp(40px, 6.5vh, 64px);
  padding: clamp(24px, 4vw, 36px);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--accent);
  border-radius: 4px 36px 8px 4px;
}
.kw-block h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  margin-top: 0;
}
.kw-block p {
  margin-top: 12px;
  color: var(--ink-2);
  font-size: 1.04rem;
  line-height: 1.55;
  max-width: 64ch;
}

/* 7. Executive Conversion Box (.exec-cta-box) */
.exec-cta-box {
  margin-top: clamp(44px, 7vh, 72px);
  padding: clamp(26px, 4vw, 38px);
  background: linear-gradient(180deg, #161a20 0%, #101317 100%);
  color: #f1f1ee;
  border: 1px solid rgba(112, 241, 246, 0.22);
  border-radius: 10px clamp(36px, 6vw, 68px) 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 14px clamp(28px, 4vw, 56px);
  align-items: start;
}
.exec-cta-box h2,
.exec-cta-box h3 {
  color: #f1f1ee;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.22;
  text-wrap: balance;
  font-weight: 540;
  letter-spacing: -0.02em;
  margin: 0;
}
.exec-cta-box p {
  margin: 0;
  color: rgba(241, 241, 238, 0.74);
  font-size: 0.98rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.exec-cta-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.exec-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.93rem;
  font-weight: 520;
  letter-spacing: -0.01em;
  color: var(--glow);
  text-decoration: none;
  transition: color 180ms ease;
}
.exec-cta-link span {
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .exec-cta-link:hover {
    color: #ffffff;
  }
  .exec-cta-link:hover span {
    transform: translateX(3px);
  }
}
@media (max-width: 760px) {
  .exec-cta-box { grid-template-columns: 1fr; }
}

/* 8. Flaggschiff-Header (.nav-dock) & Dropdown-Architektur */
.nav-dock {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--hair);
}
.nav-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nav-bg);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.nav-inner {
  min-height: 64px;
  gap: 16px;
}
.nav-links {
  gap: 3px;
}
.nav-links > a,
.menu-btn {
  position: relative;
  font-size: 0.89rem;
  font-weight: 470;
  letter-spacing: -0.01em;
  padding: 8px 13px;
  border-radius: 7px;
  transition: color 0.16s ease, background-color 0.16s ease;
}
.nav-links > a:hover,
.menu-btn:hover,
.menu-btn[aria-expanded="true"],
.menu-btn[data-active="true"],
.nav-links > a[aria-current="page"] {
  color: var(--ink);
}
.nav-links > a:hover,
.menu-btn:hover,
.menu-btn[aria-expanded="true"] {
  background: var(--hair-soft);
}
.menu-btn[data-active="true"],
.nav-links > a[aria-current="page"] {
  font-weight: 530;
}
.menu-btn[data-active="true"]::after,
.nav-links > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.85;
}
.menu-btn[aria-expanded="true"]::after {
  opacity: 0;
}
.menu-panel {
  top: calc(100% + 12px);
  width: min(430px, 86vw);
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 12px 32px 12px 12px;
  transform-origin: top left;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 12px rgba(10, 12, 16, 0.08),
    0 24px 52px -12px rgba(10, 12, 16, 0.28);
}
@media (min-width: 1041px) {
  .menu-panel.menu-panel-wide:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 6px;
    width: min(620px, 88vw);
  }
  #guides-panel.menu-panel-wide {
    left: -120px;
    transform-origin: 170px top;
  }
  #company-panel.menu-panel-wide {
    left: -210px;
    transform-origin: 260px top;
  }
  .menu-panel.menu-panel-wide .menu-kicker {
    grid-column: 1 / -1;
  }
}
.menu-kicker {
  display: block;
  padding: 6px 12px 9px;
  margin-bottom: 4px;
  font-size: 0.7rem;
  font-weight: 580;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--hair-soft);
}
.menu-panel a {
  padding: 11px 12px 12px;
  border-radius: 7px 18px 7px 7px;
  transition: background-color 0.16s ease, transform 0.16s var(--ease);
}
.menu-panel a:hover,
.menu-panel a:focus-visible {
  background: var(--hair-soft);
}
.menu-panel a[aria-current="page"] {
  background: var(--hair-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.menu-panel strong {
  font-weight: 540;
  color: var(--ink);
}
.nav-ctas {
  gap: 7px;
}
.lang-switch,
.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  gap: 5px;
  margin-right: 0;
  font-size: 0.78rem;
  font-weight: 530;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: rgba(25, 24, 24, 0.025);
  border: 1px solid var(--hair);
  border-radius: 6px;
  padding: 0 10px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root[data-theme="dark"] .lang-switch,
:root[data-theme="dark"] .theme-btn {
  background: rgba(255, 255, 255, 0.03);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lang-switch,
  :root:not([data-theme="light"]) .theme-btn {
    background: rgba(255, 255, 255, 0.03);
  }
}
.lang-switch:hover,
.lang-switch[aria-expanded="true"],
.theme-btn:hover {
  color: var(--ink);
  border-color: var(--ink-3);
  background: var(--hair-soft);
}
.menu-panel.lang-panel {
  left: auto;
  right: 0;
  width: min(260px, 84vw);
  transform-origin: top right;
}
@media (max-width: 860px) {
  .menu-panel.lang-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    width: 240px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: 10px 24px 10px 10px;
    box-shadow: 0 18px 40px rgba(10, 12, 16, 0.24);
  }
}
.nav-emergency {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  gap: 8px;
  margin-left: 10px;
  padding: 0 14px;
  background: linear-gradient(180deg, #1d2229 0%, #101318 100%);
  color: #f1f1ee;
  border: 1px solid rgba(112, 241, 246, 0.34);
  border-radius: 6px 16px 6px 6px;
  font-size: 0.82rem;
  font-weight: 530;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 6px rgba(10, 12, 16, 0.16);
}
.nav-emergency::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: var(--hair);
  pointer-events: none;
}
.nav-emergency::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px var(--glow);
  flex-shrink: 0;
}
.nav-emergency:hover {
  border-color: var(--glow);
  color: var(--glow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 14px rgba(112, 241, 246, 0.14);
}
.nav-mobile-foot {
  display: none;
}
.menu-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 10px;
}
.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s var(--ease), top 0.2s var(--ease);
}
.menu-icon::before {
  top: 2px;
}
.menu-icon::after {
  top: 7px;
}
.menu-toggle[aria-expanded="true"] .menu-icon::before {
  top: 4.5px;
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-icon::after {
  top: 4.5px;
  transform: rotate(-45deg);
}
@media (max-width: 1040px) {
  .nav-inner {
    position: relative;
    min-height: 58px;
  }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    height: 32px;
    gap: 7px;
    border: 1px solid var(--hair);
    border-radius: 6px;
    padding: 0 11px;
    font-size: 0.82rem;
    font-weight: 520;
    color: var(--ink);
    background: var(--surface);
  }
  .nav-links > .menu > .menu-btn::after,
  .nav-links > .nav-direct-link::after {
    display: none;
  }
  .nav-links {
    display: none;
  }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: clamp(12px, 3vw, 24px);
    right: clamp(12px, 3vw, 24px);
    top: calc(100% + 8px);
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 16px 16px;
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: 12px;
    box-shadow:
      0 4px 12px rgba(10, 12, 16, 0.08),
      0 24px 56px -12px rgba(10, 12, 16, 0.32);
  }
  .nav-links > .menu,
  .nav-links > .nav-direct-link {
    border-bottom: 1px solid var(--hair-soft);
  }
  .nav-links > .menu > .menu-btn,
  .nav-links > .nav-direct-link {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 13px 6px;
    font-size: 0.98rem;
    font-weight: 520;
    color: var(--ink);
    border-radius: 0;
    background: transparent;
  }
  .nav-links .menu-panel {
    position: static;
    width: 100%;
    margin: 0 0 10px;
    padding: 2px 0 2px 12px;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--hair);
    border-radius: 0;
    background: transparent;
  }
  .nav-links .menu-kicker {
    display: none;
  }
  .nav-links .menu-panel a {
    padding: 9px 10px;
    border-radius: 6px;
  }
  .nav-links .menu-panel a strong {
    font-size: 0.92rem;
    font-weight: 500;
  }
  /* Auf Mobile/iPhone nur die klaren Link-Titel zeigen, keine mehrzeiligen Textblöcke */
  .nav-links .menu-panel a span {
    display: none;
  }
  .nav-mobile-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
    padding-top: 4px;
  }
  .nav-mobile-emergency {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--deeper);
    color: #f1f1ee;
    border: 1px solid rgba(112, 241, 246, 0.28);
    border-radius: 8px;
  }
  .nav-mobile-emergency strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    font-weight: 540;
    color: #f1f1ee;
  }
  .nav-mobile-emergency strong::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--glow);
    box-shadow: 0 0 8px var(--glow);
    flex-shrink: 0;
  }
  .nav-mobile-emergency span {
    font-size: 0.82rem;
    font-weight: 540;
    color: var(--glow);
    font-variant-numeric: tabular-nums;
  }
  .nav-mobile-regions {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
  }
  .nav-mobile-regions a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 4px;
    font-size: 0.76rem;
    font-weight: 540;
    letter-spacing: 0.03em;
    color: var(--ink-2);
    border: 1px solid var(--hair);
    border-radius: 5px;
    text-align: center;
  }
  .nav-mobile-regions a[aria-current="page"] {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
}
@media (max-width: 760px) {
  .nav-ctas .lang-menu,
  .nav-ctas .nav-emergency {
    display: none;
  }
  .brand-word {
    font-size: 16.5px;
  }
  .brand-mark {
    width: 20px;
    height: 20px;
  }
}

/* 9. Flaggschiff-Footer (footer.closing) */
footer.closing {
  margin-top: 0;
  padding: clamp(64px, 10vh, 104px) 0 44px;
  background: linear-gradient(180deg, #0d1014 0%, #090b0e 100%);
  color: rgba(247, 247, 245, 0.64);
  border-top: 1px solid rgba(112, 241, 246, 0.16);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
  padding-bottom: clamp(36px, 6vh, 52px);
  border-bottom: 1px solid rgba(247, 247, 245, 0.12);
  margin-bottom: clamp(36px, 6vh, 52px);
}
.footer-brand-col .footer-word {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: clamp(22px, 2.3vw, 27px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1;
  color: #f1f1ee;
  width: auto;
  margin-bottom: 16px;
}
.footer-brand-col .footer-mark {
  width: clamp(27px, 2.8vw, 33px);
  height: clamp(27px, 2.8vw, 33px);
  display: block;
  flex-shrink: 0;
  fill: #f1f1ee;
}
.footer-claim {
  color: #f1f1ee;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  font-weight: 450;
  line-height: 1.42;
  letter-spacing: -0.015em;
  max-width: 44ch;
}
.footer-cloud-tag {
  margin-top: 12px;
  font-size: 0.82rem;
  color: rgba(247, 247, 245, 0.5);
  letter-spacing: 0.01em;
}
.footer-emergency {
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(112, 241, 246, 0.24);
  border-radius: 10px 36px 10px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.footer-emergency-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 560;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glow);
}
.footer-emergency-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px var(--glow);
}
.footer-emergency-phone {
  display: block;
  margin-top: 8px;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  color: #f1f1ee;
  font-variant-numeric: tabular-nums;
}
.footer-emergency-phone:hover {
  color: var(--glow);
}
.footer-emergency p {
  margin-top: 6px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(247, 247, 245, 0.68);
}
.footer-grid {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 28px 32px;
}
.footer-grid h4 {
  color: #f1f1ee;
  font-size: 0.76rem;
  font-weight: 560;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.footer-grid li {
  margin: 9px 0;
}
.footer-grid a {
  color: rgba(247, 247, 245, 0.72);
  font-size: 0.92rem;
}
.footer-grid a:hover {
  color: var(--glow);
}
.legal {
  align-items: center;
  padding-top: 22px;
  margin-top: 20px;
}
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}
.legal-links a {
  color: rgba(247, 247, 245, 0.74);
}
.legal-links a:hover {
  color: var(--glow);
}
@media (max-width: 860px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* 10. Seriöse 2x2-Architektur-Matrix (.arch-schematic, Swiss/Linear Precision) */
.arch-schematic {
  margin-top: clamp(36px, 5.5vh, 52px);
  padding: 0;
  overflow: hidden;
  background: #13161b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px -16px rgba(8, 10, 14, 0.36);
  color: #f1f1ee;
}
.arch-schem-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.arch-schem-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 241, 238, 0.78);
  font-variant-numeric: tabular-nums;
}
.arch-schem-sub {
  font-size: 0.78rem;
  color: rgba(241, 241, 238, 0.54);
  font-variant-numeric: tabular-nums;
}
.arch-schem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
}
.arch-node {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 24px;
  background: #13161b;
  border: 0;
  border-radius: 0;
  transition: background-color 0.18s ease;
}
.arch-node-step {
  font-size: 0.7rem;
  font-weight: 560;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(241, 241, 238, 0.5);
  font-variant-numeric: tabular-nums;
}
.arch-node strong {
  display: block;
  margin-top: 6px;
  font-size: 1.06rem;
  font-weight: 560;
  letter-spacing: -0.015em;
  color: #f1f1ee;
}
.arch-node-desc {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.48;
  color: rgba(241, 241, 238, 0.72);
}
.arch-node-metric {
  display: block;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(241, 241, 238, 0.88);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .arch-node:hover {
    background: #191d24;
  }
  .arch-card {
    transition: border-color 0.2s ease, transform 0.2s var(--ease);
  }
  .arch-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
  }
}
@media (max-width: 680px) {
  .arch-schem-grid {
    grid-template-columns: 1fr;
  }
}

/* 11. Responsive Stage-Architektur: iPhone / Mobile & Ultra-Wide (21:9 / 32:9 / 4K / 5K) */

/* A. iPhone & Mobile Feinabstimmung (<= 680px & <= 480px) */
@media (max-width: 680px) {
  .screen {
    padding: clamp(52px, 8.5vh, 76px) 0;
  }
  .screen + .screen,
  .screen.stage-dark,
  .screen + .screen.stage-dark,
  .screen.stage-dark + .screen {
    padding-top: clamp(52px, 8.5vh, 76px);
    padding-bottom: clamp(52px, 8.5vh, 76px);
  }
  .crumbs {
    font-size: 0.8rem;
    margin-bottom: 18px;
  }
  h1 {
    font-size: clamp(2rem, 8vw, 2.55rem);
    line-height: 1.07;
    letter-spacing: -0.03em;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  h2 {
    font-size: clamp(1.5rem, 6vw, 1.95rem);
    line-height: 1.12;
    letter-spacing: -0.025em;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .quiet {
    margin-top: 18px;
    font-size: 1.06rem;
    line-height: 1.42;
  }
  .two-tone {
    font-size: clamp(1.16rem, 4.8vw, 1.36rem);
    line-height: 1.32;
    margin-top: 18px;
  }
  .prose p.lead {
    font-size: 1.08rem;
  }
  .prose p {
    font-size: 1rem;
  }
  /* Unternehmen-Subnavigation als einzeilige, horizontal wischbare iOS-Tab-Leiste */
  .subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 12px;
  }
  .subnav::-webkit-scrollbar {
    display: none;
  }
  .subnav a {
    flex-shrink: 0;
    font-size: 0.88rem;
  }
  /* Hero auf iPhone mit starkem vertikalem Scrim für 100 % Lesbarkeit */
  .hero {
    min-height: clamp(460px, 76svh, 640px);
  }
  .hero-bg {
    object-position: 68% 50%;
  }
  /* Panorama-Hero mobil: Appliance und Lichtkante vor dem Horizont priorisieren */
  .hero-horizont .hero-bg {
    object-position: 62% 50%;
  }
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(16, 21, 27, 0.38) 0%, rgba(16, 21, 27, 0.78) 54%, rgba(16, 21, 27, 0.94) 100%);
  }
  .hero-inner {
    padding-top: 72px;
    padding-bottom: 44px;
  }
  /* Technische Kennzahlen-Leiste als kompaktes 2x2-Raster auf dem iPhone */
  .spec-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px;
    border-radius: 8px 24px 8px 8px;
  }
  .spec-item strong {
    font-size: 1.02rem;
  }
  .spec-item span {
    font-size: 0.8rem;
  }
  /* Proportionale Viertelkreis-Radien auf Mobile */
  .machined-frame {
    padding: 10px;
    border-radius: 10px 36px 10px 10px;
  }
  .machined-screen {
    border-radius: 5px 26px 5px 5px;
  }
  .photo img {
    height: clamp(220px, 38vh, 340px);
    border-radius: 8px 36px 8px 8px;
  }
  .frame {
    border-radius: 8px 32px 8px 8px;
  }
  .arch-card {
    padding: 20px;
    border-radius: 8px 24px 8px 8px;
  }
  .exec-cta-box {
    padding: 22px 20px;
    border-radius: 10px 28px 10px 10px;
  }
}

@media (max-width: 480px) {
  .acts {
    flex-direction: column;
    align-items: stretch;
  }
  .acts .btn {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 360px) {
  .spec-strip {
    grid-template-columns: 1fr;
  }
}

/* B. Wide & Ultra-Wide Screen Architektur (1600px+, 2000px+, 2560px+ / 21:9 & 32:9) */
@media (min-width: 1600px) {
  :root {
    --wrap-max: 1260px;
    --wrap-wide-max: 1460px;
  }
  .prose-wide {
    max-width: 920px;
  }
  .split-stage {
    grid-template-columns: 1fr 1.06fr;
    gap: 64px;
  }
  .spec-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 26px 32px;
  }
  .contrast-grid {
    gap: 72px;
  }
  .stats {
    gap: 56px;
  }
  .ledger a {
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 20px 48px;
  }
}

@media (min-width: 2000px) {
  :root {
    --wrap-max: 1420px;
    --wrap-wide-max: 1640px;
  }
  .screen {
    padding: clamp(96px, 11vh, 148px) 0;
  }
  /* Hero-Bühne auf 21:9 / 32:9 Ultra-Wide: Hardware-Foto nicht extrem aufzoomen,
     sondern bei max. 2160px zentrieren und seitlich nahtlos in --deeper blenden */
  .hero {
    min-height: clamp(620px, 78vh, 900px);
  }
  .hero-bg {
    max-width: 2160px;
    left: 0;
    right: 0;
    margin-inline: auto;
  }
  .hero-scrim {
    max-width: 2160px;
    left: 0;
    right: 0;
    margin-inline: auto;
    background:
      linear-gradient(90deg, var(--deeper) 0%, rgba(16, 21, 27, 0.86) 14%, rgba(16, 21, 27, 0.48) 46%, rgba(16, 21, 27, 0.14) 78%, var(--deeper) 100%),
      linear-gradient(0deg, rgba(16, 21, 27, 0.65) 0%, rgba(16, 21, 27, 0) 36%);
  }
  .machined-screen img,
  .photo img {
    max-height: 680px;
    object-fit: cover;
  }
  .arch-node {
    padding: 28px 32px;
  }
  .arch-card {
    padding: 28px 30px;
  }
}

@media (min-width: 2560px) {
  :root {
    --wrap-max: 1540px;
    --wrap-wide-max: 1780px;
  }
  html {
    font-size: 106.25%;
  }
}

/* ---- Länder-Switcher-Modal (region.js): dunkle Pro-Stage, Apple-Physik ---- */
.region-overlay[hidden] { display: none !important; }
.region-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 19, 23, 0.58);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}
.region-overlay.ist-offen { opacity: 1; }
.region-modal {
  position: relative;
  width: min(460px, 100%);
  max-height: min(640px, 90svh);
  display: flex;
  flex-direction: column;
  padding: 26px 26px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, #181c22 0%, #101317 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 24px 64px rgba(0, 0, 0, 0.5);
  color: #f1f1ee;
  transform: scale(0.97) translateY(6px);
  filter: blur(2px);
  transition: transform 0.18s var(--ease), filter 0.18s var(--ease);
}
.region-overlay.ist-offen .region-modal { transform: none; filter: none; }
.region-modal .menu-kicker { color: rgba(247, 247, 245, 0.55); }
.region-titel {
  margin: 10px 0 6px;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  letter-spacing: -0.022em;
  line-height: 1.22;
  text-wrap: balance;
}
.region-text {
  margin: 0 0 16px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(247, 247, 245, 0.68);
  text-wrap: pretty;
}
.region-zu {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(247, 247, 245, 0.75);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.region-zu:hover { background: rgba(255, 255, 255, 0.12); color: #f1f1ee; }
.region-suche {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px; /* verhindert iOS-Zoom */
  color: #f1f1ee;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.region-suche::placeholder { color: rgba(247, 247, 245, 0.42); }
.region-suche:focus {
  border-color: var(--glow);
  box-shadow: 0 0 0 3px rgba(112, 241, 246, 0.18);
}
.region-liste {
  margin-top: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
}
.region-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #f1f1ee;
  transition: background 0.14s var(--ease);
}
@media (hover: hover) {
  .region-zeile:hover { background: rgba(255, 255, 255, 0.07); }
}
.region-zeile:active { transform: scale(0.99); }
.region-zeile strong { font-weight: 600; letter-spacing: -0.01em; }
.region-zeile > span:not(.region-flagge):not(.region-punkt) {
  margin-left: auto;
  font-size: 0.78rem;
  color: rgba(247, 247, 245, 0.45);
  font-variant-numeric: tabular-nums;
}
.region-flagge { font-size: 1.15rem; line-height: 1; }
.region-zeile.ist-aktiv { background: rgba(112, 241, 246, 0.07); }
.region-punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 10px rgba(112, 241, 246, 0.8);
  flex-shrink: 0;
}
.region-leer {
  margin: 14px 2px 4px;
  font-size: 0.9rem;
  color: rgba(247, 247, 245, 0.55);
}
.region-bleiben {
  margin-top: 14px;
  padding: 11px 16px;
  font: inherit;
  font-weight: 600;
  color: #10151b;
  background: #f1f0ec;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s var(--ease), background 0.15s var(--ease);
}
.region-bleiben:hover { background: #ffffff; }
.region-bleiben:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
  .region-overlay, .region-modal { transition: none; transform: none; filter: none; }
}

/* 11. Sanftes Aufgleiten aller <details>-Sektionen (Apple/iOS Fluid Disclosure) */
@media (prefers-reduced-motion: no-preference) {
  :root {
    interpolate-size: allow-keywords;
  }
  details.more::details-content,
  details.notruf-mehr::details-content {
    overflow: clip;
    height: 0;
    opacity: 0;
    transition:
      height 0.28s var(--ease),
      opacity 0.22s var(--ease),
      content-visibility 0.28s var(--ease) allow-discrete;
  }
  details.more[open]::details-content,
  details.notruf-mehr[open]::details-content {
    height: auto;
    opacity: 1;
  }
}

/* 12. Command Stage (.cmd-stage auf /auracore/ und /aura/ nach Identiqa GUI-Design) */
.cmd-stage {
  margin-top: clamp(36px, 5.5vh, 52px);
  background: radial-gradient(120% 100% at 50% 0%, #141920 0%, #0b0e11 100%);
  color: #f1f1ee;
  border: 1px solid rgba(241, 241, 238, 0.14);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 12px rgba(8, 10, 14, 0.18),
    0 22px 48px -16px rgba(8, 10, 14, 0.42);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.cmd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(241, 241, 238, 0.1);
}
.cmd-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f1f1ee;
}
.cmd-orb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 10px var(--glow);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .cmd-orb {
    animation: cmd-orb-breathe 3.2s ease-in-out infinite;
  }
  @keyframes cmd-orb-breathe {
    0%, 100% { opacity: 0.95; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.86); }
  }
}
.cmd-badge {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--glow);
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(112, 241, 246, 0.08);
  border: 1px solid rgba(112, 241, 246, 0.24);
}
.cmd-body {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 18px;
  padding: 20px 22px;
  align-items: stretch;
}
.cmd-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cmd-col-title {
  font-size: 0.68rem;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 241, 238, 0.56);
  margin-bottom: 2px;
}
.cmd-nodes,
.cmd-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmd-node,
.cmd-step {
  padding: 11px 13px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(241, 241, 238, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cmd-node {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}
.cmd-node.warn,
.cmd-step.warn {
  border-color: rgba(227, 166, 74, 0.36);
  background: rgba(227, 166, 74, 0.05);
}
.cmd-node-main {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.cmd-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 6px var(--glow);
  flex-shrink: 0;
}
.cmd-node.warn .cmd-dot {
  background: #e3a64a;
  box-shadow: 0 0 8px rgba(227, 166, 74, 0.7);
}
.cmd-node-main code,
.cmd-aura-target code,
.cmd-kv-row code {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: #f1f1ee;
}
.cmd-node-os {
  font-size: 0.78rem;
  color: rgba(241, 241, 238, 0.62);
}
.cmd-node-state {
  font-size: 0.74rem;
  font-weight: 520;
  color: var(--glow);
}
.cmd-node.warn .cmd-node-state {
  color: #e3a64a;
}
.cmd-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
}
.cmd-time {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--glow);
  white-space: nowrap;
}
.cmd-step.warn .cmd-time {
  color: #e3a64a;
}
.cmd-step-kicker {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #f1f1ee;
}
.cmd-step p {
  margin: 3px 0 0;
  font-size: 0.84rem;
  line-height: 1.42;
  color: rgba(241, 241, 238, 0.74);
}
.cmd-glass {
  padding: 16px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(112, 241, 246, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}
.cmd-aura-target {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(11, 14, 17, 0.65);
  border: 1px solid rgba(112, 241, 246, 0.24);
}
/* Aura-Zeichen, ruhige Fassung wie in AuraCore (CI): gestrichelter Ring dreht in 8 s,
   der Kern atmet in 3,2 s. Flach, keine Umlaufbahnen, keine Perspektive. */
.cmd-aura-ring {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.cmd-aura-ring.is-sm { width: 18px; height: 18px; }
.cmd-aura-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.4px dashed var(--glow);
}
.cmd-aura-ring::after {
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 10px var(--glow);
}
@media (prefers-reduced-motion: no-preference) {
  .cmd-aura-ring::before { animation: cmd-ring-spin 8s linear infinite; }
  .cmd-aura-ring::after { animation: cmd-core-breathe 3.2s ease-in-out infinite; }
  @keyframes cmd-ring-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes cmd-core-breathe {
    0%, 100% { transform: scale(0.92); opacity: 0.9; }
    50% { transform: scale(1.08); opacity: 1; }
  }
}
/* Kopf der Konsolen-Bühne wie in AuraCore: Siegel als Starter, Name / Bereich. */
.cmd-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: #f1f1ee;
}
.cmd-brand b { font-weight: 650; letter-spacing: -0.02em; }
.cmd-brand > i { font-style: normal; color: rgba(241, 241, 238, 0.42); }
.cmd-brand > span:last-child { font-size: 0.84rem; font-weight: 500; }
.cmd-brand .cmd-brand-lbl {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 241, 238, 0.58);
}
.cmd-seal {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(241, 241, 238, 0.05);
  box-shadow: inset 0 0 0 1px rgba(241, 241, 238, 0.14);
}
.cmd-seal svg { width: 15px; height: 15px; fill: #f1f1ee; display: block; }
.cmd-target-lbl {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(241, 241, 238, 0.58);
}
.cmd-kv {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cmd-kv-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  padding-top: 7px;
  border-top: 1px solid rgba(241, 241, 238, 0.08);
  font-size: 0.78rem;
  color: rgba(241, 241, 238, 0.62);
}
.cmd-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  background: rgba(0, 0, 0, 0.28);
  border-top: 1px solid rgba(241, 241, 238, 0.08);
  font-size: 0.76rem;
  color: rgba(241, 241, 238, 0.62);
}
.cmd-foot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  flex-shrink: 0;
}
@supports (color: color(display-p3 1 1 1)) {
  .cmd-orb,
  .cmd-dot,
  .cmd-foot-dot,
  .cmd-aura-ring::after {
    background: color(display-p3 0.52 0.94 0.97);
  }
  .cmd-badge,
  .cmd-node-state,
  .cmd-time {
    color: color(display-p3 0.52 0.94 0.97);
  }
}
@media (max-width: 860px) {
  .cmd-body {
    grid-template-columns: 1fr;
  }
}

/* Konsolen-Bühne im Aufbau der echten AuraCore-Oberfläche, dunkles Theme (aura-gui/css/ui.css):
   --bg #121417, --panel #1a1d21, --bd #262a30, --mut #8e9094, Akzent Leuchtkante, --warn #d9a94e.
   Kopf mit Siegel und Name / Bereich, Karte auf der Arbeitsfläche, rechts das angedockte Aura-Panel
   mit Chip (.ap-chip) und Protokoll-Kasten (.ap-tools). Normale Schreibweise, Mono nur für Kennungen. */
.cmd-stage.acs { background: #121417; border-color: #262a30; border-radius: 14px; color: #f1f1ee; font-size: 0.86rem; line-height: 1.45; }
.acs-hdr { display: flex; align-items: center; gap: 11px; height: 54px; padding: 0 18px; border-bottom: 1px solid #262a30; }
.acs-hdr b { font-size: 0.97rem; font-weight: 650; letter-spacing: -0.02em; }
.acs-hdr > i { font-style: normal; color: #8e9094; opacity: 0.6; }
.acs-hdr > span:not([class]) { font-size: 0.84rem; font-weight: 500; }
.acs-ask { margin-left: auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px 18px 10px 10px; background: rgba(112, 241, 246, 0.07); box-shadow: inset 0 0 0 1px rgba(112, 241, 246, 0.3); }
.acs-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.acs-main { padding: clamp(18px, 2.4vw, 30px); min-width: 0; }
.acs-kicker { margin: 0 0 14px; font-size: 0.78rem; color: #8e9094; }
.acs-card { background: #1a1d21; border-radius: 14px; padding: 20px 22px 8px; box-shadow: inset 0 0 0 1px #262a30; }
.acs-card h3 { margin: 0 0 12px; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.015em; color: #f1f1ee; max-width: none; }
.acs-row { display: grid; grid-template-columns: 6px auto minmax(0, 1fr) auto; gap: 4px 11px; align-items: baseline; padding: 11px 0; border-top: 1px solid #262a30; }
.acs-row code, .acs-tool code, .acs-chip { font-family: var(--mono); font-size: 0.76rem; color: #f1f1ee; }
.acs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--glow); align-self: center; }
.acs-row.warn .acs-dot { background: #d9a94e; }
.acs-sub { color: #8e9094; font-size: 0.8rem; }
.acs-state { color: var(--glow); font-size: 0.78rem; font-weight: 550; text-align: right; }
.acs-row.warn .acs-state { color: #d9a94e; }
.acs-step { grid-template-columns: 6px auto minmax(0, 1fr); }
.acs-step code { color: #8e9094; }
.acs-step .acs-dot { align-self: start; margin-top: 0.5em; }
.acs-step b { display: block; font-weight: 550; font-size: 0.84rem; }
.acs-step p { margin: 2px 0 0; color: #b9bbbd; font-size: 0.84rem; line-height: 1.45; }
.acs-foot { margin: 16px 2px 0; font-size: 0.76rem; color: #8e9094; line-height: 1.5; }
.acs-panel { background: #1a1d21; border-left: 1px solid #262a30; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; border-radius: 0 0 13px 0; }
.acs-phead { display: flex; align-items: center; gap: 9px; font-size: 0.92rem; }
.acs-phead b { font-weight: 600; }
.acs-q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 12px; background: rgba(241, 241, 238, 0.05); }
.acs-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; padding: 2px 7px 2px 6px; border-radius: 5px; border: 1px solid rgba(112, 241, 246, 0.3); background: rgba(112, 241, 246, 0.08); }
.acs-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--glow); }
.acs-tools { padding: 10px 12px 6px; border-radius: 10px; border: 1px solid #262a30; border-left: 2px solid var(--glow); background: #17191c; }
.acs-tools-hd { font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8e9094; padding-bottom: 7px; margin-bottom: 2px; border-bottom: 1px solid #262a30; }
.acs-tool { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; padding: 7px 0; border-top: 1px solid rgba(38, 42, 48, 0.7); font-size: 0.78rem; color: #8e9094; }
.acs-tool:first-of-type { border-top: 0; }
.acs-tool code { text-align: right; font-size: 0.72rem; }
.acs-model { margin: auto 0 0; padding-top: 4px; font-family: var(--mono); font-size: 0.68rem; color: #8e9094; }
@supports (color: color(display-p3 1 1 1)) {
  .acs-dot, .acs-chip::before { background: color(display-p3 0.52 0.94 0.97); }
  .acs-state { color: color(display-p3 0.52 0.94 0.97); }
}
@media (max-width: 860px) {
  .acs-body { grid-template-columns: 1fr; }
  .acs-panel { border-left: 0; border-top: 1px solid #262a30; border-radius: 0 0 13px 13px; }
  .acs-row:not(.acs-step) { grid-template-columns: 6px auto minmax(0, 1fr); }
  .acs-row:not(.acs-step) .acs-state { grid-column: 2 / -1; text-align: left; }
}
@media (max-width: 520px) {
  .acs-step { grid-template-columns: 6px minmax(0, 1fr); }
  .acs-step > div { grid-column: 1 / -1; }
}

/* Aura-Zeichen, große Fassung (CI, Abschnitt 2 B, identiqa-aura-ring.svg): Sensorring, Innenring,
   Lichtbogen, Kern. In Ruhe dreht nur der Sensorring (8 s) und atmet der Kern (3,2 s). */
.aura-head { display: grid; gap: clamp(20px, 3vw, 36px); }
.aura-sign { order: -1; width: clamp(104px, 11vw, 156px); height: auto; display: block; overflow: visible; }
.aura-sign circle, .aura-sign path { fill: none; }
.aura-sign .as-d { stroke: rgba(241, 241, 238, 0.2); stroke-width: 1.5; stroke-dasharray: 6 5; transform-origin: 60px 60px; }
.aura-sign .as-i { stroke: rgba(241, 241, 238, 0.13); stroke-width: 1; }
.aura-sign .as-a { stroke: var(--glow); stroke-width: 1.75; stroke-linecap: round; }
.aura-sign .as-c { fill: rgba(112, 241, 246, 0.09); stroke: rgba(112, 241, 246, 0.55); stroke-width: 1.25; transform-origin: 60px 60px; }
@media (prefers-reduced-motion: no-preference) {
  .aura-sign .as-d { animation: cmd-ring-spin 8s linear infinite; }
  .aura-sign .as-c { animation: aura-sign-breathe 3.2s ease-in-out infinite; }
  @keyframes aura-sign-breathe {
    0%, 100% { transform: scale(0.97); }
    50% { transform: scale(1.03); }
  }
}

/* ---- Druckansicht (CI: digital frei, Druck sparsam) ----
   Keine dunklen Flächen, keine Hintergrundbilder, eine Druckfarbe. */
@media print {
  :root, :root[data-theme="dark"] {
    --paper: #fff; --surface: #fff; --ink: #191818; --ink-2: #333; --ink-3: #555;
    --hair: rgba(25, 24, 24, 0.3); --hair-soft: rgba(25, 24, 24, 0.18); --accent: #191818; --glow: #191818;
  }
  html, body { background: #fff !important; color: #191818 !important; }
  .skip, .nav-dock, .nav-mobile-foot, .hero-bg, .hero-scrim, .acts, .check-form, .check-run,
  .footer-cta, .footer-grid, .menu-toggle, [class^="region-"], [class*=" region-"], iframe, video { display: none !important; }
  .acs-card, .acs-panel, .acs-q, .acs-tools, .acs-chip, .acs-ask,
  .hero, .closing, .stage-dark, .cmd-stage, .cmd-head, .cmd-glass, .cmd-aura-target, .cmd-badge,
  .machined-frame, .machined-screen, .exec-cta-box, .arch-schematic, footer {
    background: none !important; box-shadow: none !important; color: #191818 !important;
  }
  .hero *, .closing *, .stage-dark *, .cmd-stage *, .machined-frame *, .exec-cta-box *, footer * {
    color: #191818 !important; text-shadow: none !important; box-shadow: none !important;
    border-color: rgba(25, 24, 24, 0.3) !important;
  }
  .cmd-stage, .machined-frame, .exec-cta-box { border: 1px solid rgba(25, 24, 24, 0.3) !important; }
  .acs-dot, .acs-chip::before, .cmd-dot, .cmd-foot-dot, .cmd-aura-ring::after, .machined-tag::before { background: #191818 !important; }
  .cmd-seal svg, .brand-mark .bm { fill: #191818 !important; }
  .aura-sign .as-d, .aura-sign .as-i, .aura-sign .as-a, .aura-sign .as-c { stroke: #191818 !important; fill: none !important; }
  .aura-sign { width: 90pt; }
  .machined-screen img, .frame img { max-width: 60%; }
  .hero, .closing, .stage-dark { min-height: 0 !important; padding-block: 24pt !important; }
  .hero > *, .hero .wrap { min-height: 0 !important; }
  .m-init, .m-init * { opacity: 1 !important; transform: none !important; filter: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  h1, h2, h3 { break-after: avoid; }
  figure, .cmd-stage, .exec-cta-box, table { break-inside: avoid; }
  a { text-decoration: none; }
}

/* 30. Rechtsseiten (Impressum, Datenschutz, AGB, Cookie-Einstellungen)
   Aufbau nach den bisherigen Seiten: Titel und Wegweiser links, Text rechts. */
.recht-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.recht-seite {
  position: sticky;
  top: 108px;
}
.recht-seite h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  hyphens: auto;
}
.recht-stand {
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 0.86rem;
}
.recht-nav {
  display: grid;
  gap: 2px;
  margin-top: clamp(28px, 5vh, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--hair);
}
.recht-nav a {
  color: var(--ink-3);
  font-size: 0.94rem;
  padding: 7px 0;
}
.recht-nav a:hover { color: var(--ink); }
.recht-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}
.recht-nav-knopf {
  justify-self: start;
  padding: 7px 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  font-size: 0.94rem;
  text-align: left;
  cursor: pointer;
}
.recht-nav-knopf:hover { color: var(--ink); }
.recht-text { max-width: 68ch; }
.recht-text > :first-child { margin-top: 0; }
.recht-text h2 {
  margin-top: clamp(34px, 5vh, 48px);
  font-size: 1.22rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.recht-text h3 {
  margin-top: 26px;
  font-size: 1.02rem;
  font-weight: 560;
}
.recht-text p,
.recht-text li {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.62;
}
.recht-text p { margin-top: 12px; }
.recht-text p.lead { color: var(--ink); font-size: 1.16rem; line-height: 1.5; }
.recht-text ul { margin: 12px 0 0; padding-left: 1.15em; list-style: disc; }
.recht-text li { margin-top: 6px; }
.recht-text a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.recht-daten { display: grid; gap: 0; }
.recht-daten > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) 1fr;
  gap: 6px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--hair);
}
.recht-daten > div:last-child { border-bottom: 1px solid var(--hair); }
.recht-daten dt { color: var(--ink-3); font-size: 0.9rem; line-height: 1.55; }
.recht-daten dd { margin: 0; color: var(--ink); line-height: 1.55; }
.recht-hinweis {
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid var(--hair);
  border-radius: 8px 22px 8px 8px;
  color: var(--ink-2);
  font-size: 0.94rem;
}
.recht-tabelle { margin-top: 16px; border-top: 1px solid var(--hair); }
.recht-tabelle > div {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr 1fr 1fr;
  gap: 8px 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.recht-tabelle .recht-kopf { color: var(--ink-3); font-size: 0.8rem; }
.recht-tabelle code { font-family: var(--mono); font-size: 0.86rem; color: var(--ink); }
.recht-knopf {
  margin-top: 8px;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s var(--ease);
}
.recht-knopf:active { transform: scale(0.98); }
@media (hover: hover) { .recht-knopf:hover { opacity: 0.86; } }
.recht-status { margin-left: 10px; color: var(--ink-3); font-size: 0.9rem; }
@media (max-width: 860px) {
  .recht-grid { grid-template-columns: 1fr; gap: 28px; }
  .recht-seite { position: static; }
  .recht-nav { display: flex; flex-wrap: wrap; gap: 2px 20px; }
  .recht-daten > div { grid-template-columns: 1fr; gap: 2px; }
  .recht-tabelle > div { grid-template-columns: 1fr 1fr; }
  .recht-tabelle .recht-kopf { display: none; }
}

/* 31. Footer: Rechts- und Social-Zeile (je Land, siehe FOOTER_LAND im Generator) */
.footer-recht {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-top: clamp(32px, 5vh, 44px);
  padding-top: 22px;
  border-top: 1px solid rgba(247, 247, 245, 0.14);
  font-size: 0.9rem;
}
.footer-recht-links,
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}
.footer-social { margin-left: auto; }
.footer-recht a { color: rgba(247, 247, 245, 0.82); }
.footer-recht a:hover,
.footer-recht a[aria-current="page"] { color: #f1f1ee; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}
.footer-copy {
  margin: 0;
  color: rgba(247, 247, 245, 0.82);
  white-space: nowrap;
}
.footer-copy span { color: rgba(247, 247, 245, 0.5); }
@media (max-width: 860px) { .footer-social { margin-left: 0; } }

/* 32. Fehlerseiten (/errors/): vier Entwürfe zum Vergleichen.
   a = Leuchtzahl (404), b = Konsole (403), c = Papier (500), d = Zeichen (sonstige). */
body.fehler {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--deeper);
  color: rgba(247, 247, 245, 0.72);
}
.fehler-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px clamp(20px, 5vw, 48px);
  border-bottom: 1px solid rgba(247, 247, 245, 0.1);
}
.fehler-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #f1f1ee;
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1;
  transition: opacity 0.2s ease;
}
.fehler-logo .fehler-mark { width: 24px; height: 24px; fill: currentColor; }
@media (hover: hover) { .fehler-logo:hover { opacity: 0.68; } }
.fehler-notruf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(112, 241, 246, 0.3);
  border-radius: 8px 18px 8px 8px;
  color: #f1f1ee;
  font-size: 0.86rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fehler-notruf::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px var(--glow);
}
.fehler-notruf:hover { border-color: var(--glow); }
.fehler-buehne {
  position: relative;
  flex: 1;
  display: grid;
  align-items: center;
  width: 100%;
  max-width: var(--wrap-wide-max);
  margin: 0 auto;
  padding: clamp(48px, 9vh, 112px) clamp(20px, 5vw, 48px);
  overflow: hidden;
}
.fehler-inhalt { position: relative; max-width: 34rem; }
.fehler h1 {
  color: #f1f1ee;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.034em;
  line-height: 1.04;
  text-wrap: balance;
}
.fehler-satz {
  margin-top: 20px;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: rgba(247, 247, 245, 0.56);
  text-wrap: pretty;
}
.fehler-satz strong { color: #f1f1ee; font-weight: 450; }
.fehler-kenn {
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(247, 247, 245, 0.5);
}
.fehler-kenn span { color: var(--glow); }
.fehler-kenn code { font-family: inherit; overflow-wrap: anywhere; }
.fehler-wege { margin: clamp(32px, 5vh, 48px) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(247, 247, 245, 0.12); }
.fehler-wege li { border-bottom: 1px solid rgba(247, 247, 245, 0.12); }
.fehler-wege a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  color: #f1f1ee;
  font-size: 1.02rem;
  transition: color 0.2s ease;
}
.fehler-wege a::after {
  content: "→";
  color: rgba(247, 247, 245, 0.4);
  transition: transform 0.2s var(--ease), color 0.2s ease;
}
@media (hover: hover) {
  .fehler-wege a:hover { color: var(--glow); }
  .fehler-wege a:hover::after { transform: translateX(4px); color: var(--glow); }
}
.fehler-knopf {
  display: inline-flex;
  align-items: center;
  margin-top: clamp(28px, 4vh, 40px);
  padding: 13px 22px;
  border: 0;
  border-radius: 8px;
  background: #f1f1ee;
  color: var(--deeper);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s var(--ease);
}
.fehler-knopf:active { transform: scale(0.98); }
@media (hover: hover) { .fehler-knopf:hover { background: var(--glow); } }

/* a · Leuchtzahl */
.fehler-a .fehler-zahl {
  position: absolute;
  right: clamp(-12px, 2vw, 40px);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(9rem, 34vw, 30rem);
  font-weight: 500;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(112, 241, 246, 0.2);
  user-select: none;
  pointer-events: none;
}
.fehler-a .fehler-buehne::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(112, 241, 246, 0.5), transparent);
}

/* b · Konsole */
.fehler-b .fehler-buehne {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 88px);
}
.fehler-protokoll {
  padding: 8px 0 0;
  background: linear-gradient(180deg, #181c22 0%, #0f1216 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px clamp(44px, 7vw, 84px) 14px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  font-family: var(--mono);
  font-size: 0.86rem;
}
.fehler-protokoll > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 16px;
  padding: 15px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.fehler-protokoll span { color: rgba(247, 247, 245, 0.44); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.74rem; align-self: center; }
.fehler-protokoll code { font-family: inherit; color: #f1f1ee; overflow-wrap: anywhere; }
.fehler-protokoll code span { color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.fehler-protokoll .fehler-protokoll-fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 0;
  color: var(--glow);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.74rem;
}
.fehler-protokoll-fuss i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px var(--glow);
}

/* c · Papier (folgt dem Hell-Dunkel-Schalter der Seite) */
body.fehler-c { background: var(--paper); color: var(--ink-2); }
.fehler-c .fehler-kopf { border-bottom-color: var(--hair); }
.fehler-c .fehler-logo { color: var(--ink); }
.fehler-c .fehler-notruf { color: var(--ink); border-color: var(--hair); }
.fehler-c .fehler-notruf::before { background: var(--accent); box-shadow: none; }
.fehler-c .fehler-buehne {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 6vw, 96px);
  align-items: start;
  padding-top: clamp(64px, 14vh, 160px);
}
.fehler-c .fehler-zahl {
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--ink);
  font-size: clamp(4.5rem, 13vw, 11rem);
  font-weight: 300;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.fehler-c .fehler-inhalt { padding-top: 18px; border-top: 1px solid var(--hair); max-width: 38rem; }
.fehler-c h1 { color: var(--ink); }
.fehler-c .fehler-satz { color: var(--ink-3); }
.fehler-c .fehler-satz strong { color: var(--ink); }
.fehler-c .fehler-knopf { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .fehler-c .fehler-knopf:hover { background: var(--accent); } }
.fehler-knoepfe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; }
.fehler-knoepfe a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fehler-notiz {
  margin-top: clamp(36px, 6vh, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-size: 0.94rem;
}
.fehler-notiz a { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* d · Zeichen */
.fehler-d .fehler-buehne { justify-items: center; text-align: center; }
.fehler-d .fehler-inhalt { max-width: 30rem; }
.fehler-d .fehler-inhalt .fehler-mark {
  width: clamp(72px, 10vw, 104px);
  height: clamp(72px, 10vw, 104px);
  margin: 0 auto clamp(32px, 5vh, 48px);
  fill: #f1f1ee;
}
.fehler-d .fehler-inhalt .fehler-mark .fm-b { fill: var(--glow); }
.fehler-d h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.026em; line-height: 1.14; }

@media (max-width: 760px) {
  .fehler-b .fehler-buehne,
  .fehler-c .fehler-buehne { grid-template-columns: 1fr; }
  .fehler-notruf { padding: 7px 11px; font-size: 0.8rem; }
  .fehler-c .fehler-zahl { border-top: 0; padding-top: 0; }
  .fehler-a .fehler-zahl { top: auto; bottom: 3%; right: -4%; transform: none; font-size: 46vw; -webkit-text-stroke-color: rgba(112, 241, 246, 0.14); }
  .fehler-a .fehler-buehne { align-items: start; padding-bottom: 46vw; }
}
@media (max-width: 420px) {
  .fehler-notruf span[data-de] { display: none; }
}

/* 33. Einwilligung (site/js/einwilligung.js).
   Erste Ebene: ruhiger Kasten unten links, sperrt die Seite nicht; Annehmen und
   Ablehnen sind gleich gewichtet. Zweite Ebene: Dialog mit Schaltern je Zweck. */
.einw,
.einw-quittung,
.einw-dialog {
  background: linear-gradient(180deg, #181c22 0%, #0f1216 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 30px 60px -20px rgba(0, 0, 0, 0.6), 0 8px 20px -8px rgba(0, 0, 0, 0.5);
  color: rgba(247, 247, 245, 0.7);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.5;
}
.einw {
  position: fixed;
  left: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 60;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 22px 24px 18px;
  border-radius: 12px 40px 12px 12px;
  animation: einw-auf 0.32s var(--ease) both;
}
@keyframes einw-auf { from { opacity: 0; transform: translateY(10px); } }
.einw-titel {
  margin: 0 0 8px;
  color: #f1f1ee;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.einw-text { margin: 0; text-wrap: pretty; }
.einw-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.einw-knopf {
  flex: 1 1 0;
  min-width: max-content;
  padding: 11px 14px;
  border: 1px solid #f1f1ee;
  border-radius: 8px;
  background: #f1f1ee;
  color: var(--deeper);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s var(--ease);
}
.einw-knopf:active { transform: scale(0.98); }
.einw-knopf.einw-leise { background: transparent; color: #f1f1ee; border-color: rgba(255, 255, 255, 0.24); }
@media (hover: hover) {
  .einw-knopf:hover { opacity: 0.86; }
  .einw-knopf.einw-leise:hover { opacity: 1; border-color: var(--glow); color: var(--glow); }
}
.einw-unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 18px;
  margin-top: 14px;
  font-size: 0.84rem;
}
.einw-link {
  padding: 0;
  border: 0;
  background: none;
  color: #f1f1ee;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.einw-link:hover { color: var(--glow); }
.einw-mehr { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
.einw-mehr a { color: rgba(247, 247, 245, 0.62); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.einw-mehr a:hover { color: #f1f1ee; }
.einw-datum { margin: 0; color: rgba(247, 247, 245, 0.5); }

.einw-dialog {
  width: min(600px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 26px clamp(20px, 4vw, 30px) 20px;
  border-radius: 14px 56px 14px 14px;
  overflow: auto;
}
.einw-dialog::backdrop { background: rgba(8, 10, 13, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.einw-dialog[open] { animation: einw-auf 0.26s var(--ease) both; }
.einw-dialog-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-right: 22px; }
.einw-dialog .einw-titel { font-size: 1.3rem; letter-spacing: -0.02em; }
.einw-zu {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: rgba(247, 247, 245, 0.6);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.einw-zu:hover { color: #f1f1ee; background: rgba(255, 255, 255, 0.06); }
.einw-hinweis {
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(112, 241, 246, 0.24);
  border-radius: 8px;
  font-size: 0.86rem;
}
.einw-kat { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.einw-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; cursor: pointer; }
.einw-zeile strong { display: block; color: #f1f1ee; font-weight: 500; }
.einw-zeile small { display: block; margin-top: 2px; font-size: 0.86rem; color: rgba(247, 247, 245, 0.6); }
.einw-immer {
  flex-shrink: 0;
  font: 400 0.72rem/1.9 var(--mono);
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--glow);
  white-space: nowrap;
}
.einw-schalter {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  position: relative;
  width: 44px;
  height: 26px;
  margin: 2px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.einw-schalter::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(247, 247, 245, 0.7);
  transition: transform 0.2s var(--ease), background-color 0.2s ease;
}
.einw-schalter:checked { background: rgba(112, 241, 246, 0.22); border-color: var(--glow); }
.einw-schalter:checked::after { transform: translateX(18px); background: var(--glow); }
.einw-schalter:focus-visible,
.einw-knopf:focus-visible,
.einw-link:focus-visible,
.einw-zu:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.einw-dienste { margin-top: 10px; font-size: 0.84rem; }
.einw-dienste summary { cursor: pointer; color: rgba(247, 247, 245, 0.6); width: max-content; }
.einw-dienste summary:hover { color: #f1f1ee; }
.einw-dienste dl { margin: 10px 0 0; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; }
.einw-dienste dl > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; margin-top: 4px; }
.einw-dienste dt { color: rgba(247, 247, 245, 0.5); }
.einw-dienste dt.einw-dienst { color: #f1f1ee; font-weight: 500; }
.einw-dienste dd { margin: 0; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .einw, .einw-dialog[open] { animation: none; } }
@media (max-width: 520px) {
  .einw-dienste dl > div { grid-template-columns: 1fr; gap: 0; }
}
.footer-cookie {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(247, 247, 245, 0.82);
  font: inherit;
  cursor: pointer;
}
.footer-cookie:hover { color: #f1f1ee; }
.recht-knopf-leise { background: transparent; color: var(--ink); }
.recht-tabelle > div:has(> span:nth-child(4)) { grid-template-columns: 1.1fr 1.5fr 1fr 1fr; }
.einw-quittung {
  position: fixed;
  left: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 60;
  width: min(380px, calc(100vw - 24px));
  padding: 16px 48px 14px 20px;
  border-radius: 12px 28px 12px 12px;
  animation: einw-auf 0.32s var(--ease) both;
}
.einw-quittung .einw-zu { position: absolute; top: 8px; right: 10px; }
.einw-quittung .einw-text + .einw-text { margin-top: 6px; }
.einw-quittung .einw-datum { margin-top: 6px; font-size: 0.84rem; }
.einw-id {
  font-family: var(--mono);
  font-size: 0.9em;
  color: #f1f1ee;
  letter-spacing: 0.02em;
  user-select: all;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .einw-quittung { animation: none; } }
@media print { .einw, .einw-quittung { display: none; } }