/* Cavendo Security — Stylesheet
   Dunkle Gunmetal-Flächen, Haarlinien, Signalorange nur für Markierungen.
   Saira für Überschriften und Bedienelemente, Archivo für Fließtext,
   IBM Plex Mono ausschließlich für Maschinendaten (Kennungen, Messwerte,
   Tabellenköpfe, Formularfelder).

   1. Tokens  2. Grundlagen  3. Layout  4. Typografie  5. Bedienelemente
   6. Kopf    7. Einstieg    8. Bausteine  9. Grafiken  10. Formular
   11. Fließtext  12. Fuß  13. Platzhalter  14. Bewegung, Druck */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  --bg: #0B0D0F;
  --bg-2: #111418;
  --bg-3: #1A1E23;
  --fg: #E9ECEF;
  --fg-2: #A4ACB4;
  --fg-3: #7C858E;
  /* Farbtripel für Transparenzen: Grund, Schrift, Linien */
  --bg-rgb: 11, 13, 15;
  --fg-rgb: 233, 236, 239;
  --ink-rgb: 220, 228, 236;
  --line: rgba(var(--ink-rgb), 0.10);
  --line-2: rgba(var(--ink-rgb), 0.22);
  --signal: #E5532B;
  --signal-2: #FF7A52;

  --font-display: "Saira", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --t-xs: 0.6875rem;
  --t-sm: 0.875rem;
  --t-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --t-md: clamp(1.125rem, 1.07rem + 0.3vw, 1.3125rem);
  --t-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --t-xl: clamp(2rem, 1.45rem + 2.3vw, 3.375rem);
  --t-2xl: clamp(2.5rem, 1.6rem + 4vw, 5.25rem);
  --t-3xl: clamp(2.625rem, 1.3rem + 5.4vw, 6.25rem);

  --wrap: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --gap: clamp(1rem, 2vw, 2rem);
  --header-h: 4.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Eckmarken für Bildflächen und Grafiken, wie Passermarken auf Plänen */
  --corner: rgba(var(--ink-rgb), 0.34);
  --corners:
    linear-gradient(var(--corner), var(--corner)) top left / 14px 1px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top left / 1px 14px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top right / 14px 1px no-repeat,
    linear-gradient(var(--corner), var(--corner)) top right / 1px 14px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--corner), var(--corner)) bottom right / 1px 14px no-repeat;

  /* Status und Schweregrade */
  --sev-k: var(--signal);
  --sev-h: #F08A3E;
  --sev-m: #D7B24B;
  --sev-g: #8196AB;
  --ok: #56D6AA;
  --ok-2: #7FE6C2;
  --good: #8FB996;
  --green: #7AC895;
  --form-ok: #6FAF7C;
  --glow: #171A1E;
  --rp-bg: #07090B;

  color-scheme: dark;
}

/* Helles Design: warmes Papierweiß, dunkle Schrift, Signal etwas dunkler für Kontrast */
:root[data-theme="light"] {
  --bg: #F3F2EE;
  --bg-2: #EAE8E3;
  --bg-3: #DFDCD6;
  --fg: #15181B;
  --fg-2: #454C53;
  --fg-3: #575E65;
  --bg-rgb: 243, 242, 238;
  --fg-rgb: 21, 24, 27;
  --ink-rgb: 21, 24, 27;
  --signal: #D4461C;
  --signal-2: #B33914;
  --sev-h: #C4621C;
  --sev-m: #9A760B;
  --sev-g: #56697E;
  --ok: #178F69;
  --ok-2: #0F7555;
  --good: #3D7F4B;
  --green: #2E8A4F;
  --form-ok: #3D8A4E;
  --glow: #FFFFFF;
  --rp-bg: #CBC8C2;
  color-scheme: light;
}

/* --- 2. Grundlagen ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Feines Filmkorn über der ganzen Seite, wie in der Referenz */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--fg); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--signal-2); }

strong { font-weight: 600; color: var(--fg); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
::selection { background: var(--signal); color: var(--bg); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--fg);
  color: var(--bg);
  font: 500 var(--t-sm) / 1 var(--font-display);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- 3. Layout ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; padding-block: clamp(5rem, 11vw, 10rem); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--alt { background: var(--bg-2); }
.section--rule { border-top: 1px solid var(--line); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* Überschrift links, Inhalt versetzt rechts */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--gap); }
.split__side { grid-column: 1 / span 4; }
.split__main { grid-column: 6 / -1; }
.split__side--sticky { align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }

/* Abschnittseinstieg: Überschrift links, Einleitung eine Zeile tiefer rechts */
.intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--gap); margin-bottom: clamp(3rem, 6vw, 5rem); }
.intro > h2 { grid-column: 1 / span 7; }
.intro > .lead, .intro > p { grid-column: 7 / -1; margin: 0; }
.intro > .intro__aside { grid-column: 7 / -1; }

@media (max-width: 899px) {
  .split__side, .split__main { grid-column: 1 / -1; }
  .split__side--sticky { position: static; }
  .intro > h2, .intro > .lead, .intro > p, .intro > .intro__aside { grid-column: 1 / -1; }
}

/* --- 4. Typografie ------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 300;
  font-stretch: 104%;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: break-word;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); font-weight: 500; font-stretch: 100%; line-height: 1.25; letter-spacing: 0; }
h4 { font-size: var(--t-base); font-weight: 500; font-stretch: 100%; line-height: 1.3; letter-spacing: 0; }

p { margin: 0; max-width: 64ch; text-wrap: pretty; }
p + p { margin-top: 1em; }
:where(p, li, dd, td) { hyphens: auto; }

.lead { font-size: var(--t-md); line-height: 1.5; color: var(--fg-2); }

/* Zweitoniger Satz: gedämpfter Auftakt, heller Kern */
.dim { color: var(--fg-3); }

/* Maschinendaten */
.mono,
.code {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Überschrift in versetzten Haarlinienrahmen */
.boxed { display: flex; flex-direction: column; align-items: flex-start; }
.boxed > span {
  display: inline-block;
  max-width: 100%;
  padding: 0.06em 0.32em 0.14em;
  border: 1px solid var(--line-2);
}
.boxed > span + span { margin-top: -1px; margin-left: 0.62em; }
/* Trennstrich nur in der Darstellung: im Text bleibt das Wort ganz (Suchmaschinen, Vorlesen) */
.boxed__hy::after { content: "-"; }

/* --- 5. Bedienelemente --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3.125rem;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover { background: var(--signal); border-color: var(--signal); color: var(--bg); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn--ghost:hover { background: transparent; border-color: var(--fg); color: var(--fg); }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: var(--t-sm); }
.btn[disabled] { opacity: 0.6; cursor: progress; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.25rem; }

/* Verweis mit Fadenkreuz, wie die Marker der Referenz */
.plus-link {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.plus-link::after,
.plus::after {
  content: "";
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  background:
    linear-gradient(var(--signal), var(--signal)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--signal), var(--signal)) center / 1.5px 100% no-repeat;
  transition: transform 0.3s var(--ease);
}
.plus-link:hover { color: var(--fg); }
.plus-link:hover::after, a:hover .plus::after { transform: rotate(90deg) scale(1.2); }
.plus { display: inline-flex; }

/* --- 6. Kopf ------------------------------------------------------------- */

/* Hinweisleiste zur Gründungsphase, über dem Kopf, scrollt mit weg */
.notice { background: var(--bg-2); border-bottom: 1px solid var(--line); }
.notice__inner { display: flex; align-items: baseline; gap: 0.75rem; padding-block: 0.55rem; }
.notice__tag {
  flex: none;
  align-self: center;
  padding: 0.15rem 0.4rem;
  background: var(--signal);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.notice p { margin: 0; max-width: none; font-size: var(--t-sm); line-height: 1.45; color: var(--fg-3); }
@media (max-width: 639px) { .notice p { font-size: var(--t-xs); } }


.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--bg-rgb), 0.94);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  color: var(--fg);
  text-decoration: none;
}
.brand:hover { color: var(--fg); }
.brand__mark { width: 1.5rem; height: 1.88rem; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; font-family: var(--font-text); }
.brand__name { font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.brand__sub {
  margin-top: 0.34rem;
  font-size: 0.53rem;
  font-stretch: 92%;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.nav { display: flex; align-items: center; gap: 0.25rem; }
/* Zwischen Umbruch (1200 px) und voller Breite: Abstände straffen, damit Umschalter und Erstgespräch Platz haben */
@media (min-width: 1200px) and (max-width: 1359px) {
  .site-header__inner { gap: 1rem; }
  .nav > a { padding-inline: 0.5rem; }
  .nav > a[aria-current="page"]::after { left: 0.5rem; right: 0.5rem; }
  .header-cta { gap: 0.5rem; }
}
.nav > a {
  position: relative;
  padding: 0.5rem clamp(0.55rem, 0.9vw, 0.9rem);
  white-space: nowrap;
  color: var(--fg-2);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.nav > a:hover, .nav > a[aria-current="page"] { color: var(--fg); }
.nav > a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: clamp(0.55rem, 0.9vw, 0.9rem);
  right: clamp(0.55rem, 0.9vw, 0.9rem);
  bottom: calc((var(--header-h) - 2.6rem) / -2);
  height: 2px;
  background: var(--signal);
}
.nav__foot { display: none; }

.header-cta { display: flex; align-items: center; gap: 0.75rem; }

.theme-toggle {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.theme-toggle:hover { border-color: var(--fg-3); }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; margin: auto; }
.theme-toggle .icon-moon, :root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] body::after { filter: invert(1); opacity: 0.035; }

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.nav-toggle svg { width: 1.1rem; height: 1.1rem; margin: auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 1199px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 49;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem var(--gutter) 2.5rem;
    background: var(--bg);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .nav[data-open="true"] { visibility: visible; opacity: 1; transition: opacity 0.25s var(--ease); }
  .nav > a {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
    font-size: clamp(1.5rem, 5vw, 2rem);
    font-weight: 300;
    color: var(--fg);
  }
  .nav > a[aria-current="page"]::after { left: auto; right: 0; top: 50%; bottom: auto; width: 0.875rem; height: 0.875rem;
    background:
      linear-gradient(var(--signal), var(--signal)) center / 100% 2px no-repeat,
      linear-gradient(var(--signal), var(--signal)) center / 2px 100% no-repeat;
    transform: translateY(-50%);
  }
  .nav__foot { display: grid; gap: 0.5rem; margin-top: auto; padding-top: 2.5rem; }
  .nav__foot .btn { justify-self: start; margin-bottom: 1rem; }
  .nav__foot a:not(.btn) { color: var(--fg-2); text-decoration: none; }
}
/* Handy: Erstgespräch bleibt im Kopf, der Farbschema-Umschalter wandert ins Menü */
.theme-toggle--menu { display: none; }
@media (max-width: 479px) {
  .site-header__inner { gap: 1rem; }
  .header-cta { gap: 0.5rem; }
  .header-cta .theme-toggle { display: none; }
  .nav__foot .theme-toggle--menu { display: inline-flex; align-items: center; gap: 0.6rem; justify-self: start; width: auto; margin-top: 1rem; padding: 0 1rem; font: 500 0.875rem var(--font-display); }
  .theme-toggle--menu svg { margin: 0; }
  .theme-toggle--menu .icon-moon, :root[data-theme="light"] .theme-toggle--menu .icon-sun { display: none; }
  :root[data-theme="light"] .theme-toggle--menu .icon-moon { display: inline; }
}
@media (max-width: 359px) { .header-cta .btn { display: none; } }

/* --- 7. Einstieg --------------------------------------------------------- */

/* Punktwolken-Leinwand. Ohne JavaScript bleibt ein ruhiges Punktraster. */
.scan {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(var(--ink-rgb), 0.07) 1px, transparent 1.3px) 0 0 / 18px 18px,
    var(--bg);
}
.scan canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.js .scan[data-ready] { background: var(--bg); }

/* Markierung eines Punkts in der Wolke, wird per Skript nachgeführt */
.scan-tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  will-change: transform;
}
.scan-tag[data-visible="true"] { opacity: 1; }
.scan-tag__mark {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;
  background:
    linear-gradient(var(--signal), var(--signal)) center / 100% 1px no-repeat,
    linear-gradient(var(--signal), var(--signal)) center / 1px 100% no-repeat;
  border: 1px solid rgba(229, 83, 43, 0.55);
}
.scan-tag__text {
  margin-top: -0.95rem;
  padding: 0.35rem 0.55rem;
  background: rgba(var(--bg-rgb), 0.82);
  border-left: 1px solid var(--signal);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
.scan-tag__text span { display: block; color: var(--fg-3); }

.hero {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: clamp(40rem, calc(100svh - var(--header-h)), 62rem);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero__scan { position: absolute; inset: 0; }
.hero__scan::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(var(--bg-rgb), 0.94) 26%, rgba(var(--bg-rgb), 0.7) 44%, rgba(var(--bg-rgb), 0) 66%),
    linear-gradient(to right, rgba(var(--bg-rgb), 0.55) 0%, rgba(var(--bg-rgb), 0) 45%);
}
:root[data-theme="light"] .hero__title, :root[data-theme="light"] .hero__side .lead { text-shadow: 0 0 0.1em var(--bg), 0 0 0.25em var(--bg), 0 0 0.5em var(--bg); }
/* Helles Design: dunkle Linien stören Schrift stärker als helle Punkte, daher dichterer Schleier */
:root[data-theme="light"] .hero__scan::after {
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(var(--bg-rgb), 0.95) 34%, rgba(var(--bg-rgb), 0.8) 52%, rgba(var(--bg-rgb), 0) 76%),
    linear-gradient(to right, rgba(var(--bg-rgb), 0.6) 0%, rgba(var(--bg-rgb), 0) 45%);
}
.hero__content {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem var(--gap);
  align-items: end;
  padding-top: 8rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero__title {
  grid-column: 1 / span 8;
  /* so bemessen, dass "Sicherheitskonzepte," auf dem Desktop in eine Zeile passt */
  font-size: clamp(2.25rem, 5.1vw, 5.25rem);
  font-stretch: 102%;
  line-height: 1.02;
  letter-spacing: -0.022em;
}
.hero__side { grid-column: 9 / -1; }
.hero__side .btn-row { margin-top: 1.75rem; }

.hero__meta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin: 0 auto;
  padding-top: 1.1rem;
  padding-bottom: 1.4rem;
}
.hero__meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--line);
}
.hero__meta dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.hero__meta dd { margin: 0.2rem 0 0; color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem; }

@media (max-width: 999px) {
  .hero__title, .hero__side { grid-column: 1 / -1; }
  .hero__side { max-width: 34rem; }
  .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
}

/* Seitenkopf der Unterseiten */
.page-head {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-head__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2rem var(--gap);
  padding-top: clamp(3rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}
.page-head .crumbs { grid-column: 1 / -1; }
.page-head h1 { grid-column: 1 / span 8; }
.page-head__lead { grid-column: 7 / -1; margin-top: clamp(0.5rem, 3vw, 2.5rem); }
.page-head__lead .lead { color: var(--fg-2); }
/* Knapper Kopf, wenn die Grafik direkt unter dem Titel stehen soll (Lagebild) */
.page-head--slim .page-head__inner { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(1.25rem, 2.5vw, 2rem); gap: 1rem var(--gap); }
.page-head--slim h1 { font-size: var(--t-xl); }
.section--lead { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.page-head--scan .page-head__inner { min-height: clamp(34rem, 62vh, 44rem); align-content: end; }
.page-head--scan h1 { grid-column: 1 / span 7; }
.page-head__scan { position: absolute; inset: 0 0 0 30%; }
.page-head__scan::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--bg) 0%, rgba(var(--bg-rgb), 0.6) 30%, rgba(var(--bg-rgb), 0) 60%),
    linear-gradient(to top, var(--bg) 0%, rgba(var(--bg-rgb), 0) 40%);
}
@media (max-width: 899px) {
  .page-head h1, .page-head--scan h1, .page-head__lead { grid-column: 1 / -1; }
  .page-head__lead { margin-top: 0; }
  .page-head__scan { inset: 0; opacity: 0.55; }
}

/* Handy: erster Bildschirm ohne großen Leerraum, Haupt-CTA über der Falz */
@media (max-width: 599px) {
  .hero { min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
  .hero__content { padding-top: 4rem; }
  .page-head--scan .page-head__inner { min-height: 22rem; }
}

.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.crumbs li { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--line-2); }
.crumbs a { color: var(--fg-2); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }

/* --- 8. Bausteine -------------------------------------------------------- */

/* Leistungen als Bildkarten mit Unterzeile */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem var(--gap); }
.service { color: inherit; text-decoration: none; }
.service:hover { color: inherit; }
.service__media { position: relative; aspect-ratio: 16 / 10; background: var(--corners), var(--bg-3); }
.service__media .scan { position: absolute; inset: 1px; background-color: var(--bg-3); }
.service:hover .service__title { color: var(--fg); }
.service__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0 1.1rem;
  border-bottom: 1px solid var(--line);
}
.service__title { font-size: var(--t-lg); font-weight: 400; transition: color 0.2s var(--ease); }
.service__body { padding-top: 1.25rem; }
.service__body p { color: var(--fg-2); }
.service__body .ticks { margin-top: 1.25rem; }
@media (max-width: 899px) {
  .services { grid-template-columns: 1fr; gap: 2.5rem var(--gap); }
  .service__media { aspect-ratio: 16 / 8; }
}

/* Nüchterne Aufzählung mit Haarlinien */
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--fg);
}
.ticks li:first-child { border-top: 1px solid var(--line); }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 0.5rem;
  height: 1px;
  background: var(--signal);
}

/* Phasen mit Zeitleiste */
.phases {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-2);
}
.phases li { position: relative; padding: 1.75rem 1.5rem 0 0; }
.phases li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 1px;
  height: 0.9rem;
  background: var(--fg-2);
}
.phases li:first-child::before { width: 3rem; height: 2px; background: var(--signal); }
.phases .code { display: block; margin-bottom: 1.1rem; }
.phases h3 { font-size: var(--t-md); }
.phases p { margin-top: 0.75rem; font-size: 0.9375rem; }
@media (max-width: 999px) {
  .phases { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-2); }
  .phases li { padding: 0 0 2.25rem 1.75rem; }
  .phases li::before { top: 0.4rem; left: -1px; width: 0.9rem; height: 1px; }
  .phases li:first-child::before { width: 2rem; height: 2px; }
}

/* Zeilen mit Kennung, Begriff und Erläuterung.
   Als <ol> mit Kennung (li > .code, h3, p) oder als <dl class="rows--two">. */
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.rows > li,
.rows > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 15rem) minmax(0, 1fr);
  gap: 0.5rem var(--gap);
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
.rows .code { padding-top: 0.3rem; }
.rows h3, .rows dt { color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; line-height: 1.35; }
.rows dd { margin: 0; }
.rows > li > p + p, .rows dd p + p, .rows .ticks { margin-top: 0.75rem; }
.rows > li > :nth-child(n + 4) { grid-column: 3; }
.rows--two > div { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
@media (max-width: 799px) {
  .rows > li, .rows > div, .rows--two > div { grid-template-columns: 1fr; }
  .rows > li > :nth-child(n + 4) { grid-column: 1; }
  .rows .code { padding-top: 0; }
}

/* Raster aus Feldern mit Haarlinien statt Karten mit Schatten */
.cells {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.cells > * {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cells h3 { margin-bottom: 0.85rem; }
.cells .code { display: block; margin-bottom: 1.5rem; }
.cells p { font-size: 0.9375rem; }
@media (max-width: 999px) { .cells { --cols: 2 !important; } }
@media (max-width: 639px) { .cells { --cols: 1 !important; } }

/* Tabellen */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 44rem; border-collapse: collapse; font-size: 0.9375rem; }
th {
  padding: 0 1.25rem 0.85rem 0;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  color: var(--fg-3);
  white-space: nowrap;
}
td {
  padding: 1.2rem 1.25rem 1.2rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
td:first-child { color: var(--fg); font-family: var(--font-display); font-weight: 500; font-size: 1rem; }
td.num { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg); white-space: nowrap; }
td.num span { display: block; margin-top: 0.2rem; font-size: var(--t-xs); color: var(--fg-3); }
.table-note { margin-top: 1.25rem; font-size: var(--t-sm); color: var(--fg-3); }
/* Handy: jede Zeile als Karte, die Spaltenüberschrift steht über dem Wert */
@media (max-width: 639px) {
  .table-scroll table { min-width: 0; }
  .table-scroll thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table-scroll tr { display: block; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
  .table-scroll tbody tr:first-child { border-top: 1px solid var(--line-2); }
  .table-scroll td { display: block; padding: 0; border: 0; }
  .table-scroll td + td { margin-top: 0.7rem; }
  .table-scroll td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; margin-bottom: 0.15rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
  .table-scroll td.num { white-space: normal; }
}

/* Fragen und Antworten */
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 1.4rem 3rem 1.4rem 0;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: -0.4375rem;
  background:
    linear-gradient(var(--signal), var(--signal)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--signal), var(--signal)) center / 1.5px 100% no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--fg); }
.faq details > div { padding: 0 0 1.75rem; max-width: 62ch; }

/* Personen */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem var(--gap); }
.person h3 { margin-top: 1.25rem; }
.person .code { display: block; margin-top: 0.4rem; }
.person p { margin-top: 0.85rem; font-size: 0.9375rem; }
@media (max-width: 899px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .people { grid-template-columns: 1fr; } }

/* Kontaktangaben */
.contact-list { margin: 0; border-top: 1px solid var(--line-2); }
.contact-list > div { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.contact-list dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.contact-list dd { margin: 0.3rem 0 0; color: var(--fg); }
.contact-list address { font-style: normal; }

/* Beitragsliste */
.post-list { border-top: 1px solid var(--line-2); }
.post-item__link {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
  gap: 0.75rem var(--gap);
  align-items: baseline;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}
.post-item__link:hover { color: inherit; }
.post-item__link:hover h2, .post-item__link:hover h3 { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.post-item__meta { display: grid; gap: 0.2rem; }
.post-item h2, .post-item h3 { font-size: var(--t-lg); font-weight: 400; line-height: 1.2; }
.post-item__teaser { margin-top: 0.6rem; font-size: 0.9375rem; }
@media (max-width: 799px) {
  .post-item__link { grid-template-columns: 1fr; }
  .post-item__link .plus { display: none; }
}
.empty-note { padding: 1.75rem 0; border-bottom: 1px solid var(--line); color: var(--fg-3); }

/* Hinweis unter einem Abschnitt */
.aside-note { margin-top: 2rem; padding-left: 1rem; border-left: 1px solid var(--signal); font-size: var(--t-sm); color: var(--fg-3); max-width: 60ch; }

/* --- 9. Grafiken --------------------------------------------------------- */

.figure { margin: 0; }
.figure__frame { position: relative; padding: clamp(1rem, 3vw, 2.25rem); background: var(--corners), var(--bg-2); }
.figure svg { width: 100%; height: auto; overflow: visible; }
.figure figcaption { margin-top: 1rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }

.fig-line { stroke: var(--line-2); fill: none; }
.fig-soft { stroke: var(--line); fill: none; }
.fig-signal { stroke: var(--signal); fill: none; }
.fig-text { fill: var(--fg-2); font-family: var(--font-display); font-weight: 500; }
.fig-mono { fill: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.fig-strong { fill: var(--fg); }

/* Formel des Schalenmodells */
.formula {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--fg);
}
.formula .op { color: var(--signal); }

/* DORI-Stufen: dieselbe Person als Punktwolke, gerastert nach Pixeldichte
   (dori.js), darunter die maßstäbliche Reichweite von der Kamera aus. */
.dori { margin: 0; }
.dori__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.dori__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1rem 1.5rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(229, 83, 43, calc(var(--tint) * 0.42)), rgba(229, 83, 43, 0) 55%),
    var(--bg-2);
}
.dori__view { position: relative; width: 100%; aspect-ratio: 5 / 6; margin-top: 0.75rem; display: grid; place-items: center; }
.dori__view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dori__view[data-ready] .dori__person { visibility: hidden; }
.dori__person { width: min(100%, 5.5rem); height: auto; fill: var(--fg); }
.dori__person .in { opacity: 0.48; }
.dori__zone .dori__name { margin-top: 0.9rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; color: var(--fg); }
.dori__zone .dori__px { margin-top: 0.2rem; font-family: var(--font-mono); font-size: 1.375rem; letter-spacing: 0.04em; color: var(--signal-2); }
.dori__zone .dori__px span { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.dori__facts { display: flex; justify-content: center; gap: 1.25rem; margin: 0.9rem 0 0; padding: 0.55rem 0 0; border-top: 1px solid var(--line); width: 100%; }
.dori__facts div { display: flex; gap: 0.45rem; align-items: baseline; }
.dori__facts dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.dori__facts dd { margin: 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg); }
.dori__zone .dori__use { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.45; color: var(--fg-2); max-width: 16rem; hyphens: manual; text-wrap: balance; }
.dori__scale { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; margin-top: 1.25rem; }
.dori__cam { display: flex; align-items: center; gap: 0.45rem; padding-top: 0.1rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.dori__cam svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.dori__track { position: relative; height: 2.6rem; border-top: 1px solid var(--line-2); }
.dori__band { position: absolute; top: 0; height: 0.9rem; border-right: 2px solid var(--bg-2); background: rgba(229, 83, 43, calc(0.2 + var(--tint) * 1.3)); }
.dori__band b { position: absolute; left: 0.35rem; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; color: var(--bg); }
.dori__tick { position: absolute; top: 1.2rem; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--fg-3); white-space: nowrap; }
.dori__tick:first-of-type { transform: none; }
.dori__tick::before { content: ""; position: absolute; left: 50%; top: -0.35rem; height: 0.25rem; border-left: 1px solid var(--fg-3); }
@media (max-width: 799px) {
  .dori__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dori__scale { grid-template-columns: 1fr; gap: 0.6rem; }
}


/* Prüffelder: der Weg eines Angreifers als Strecke von außen nach innen.
   Ohne Skript stehen die sechs Felder untereinander. */
.scope__item { padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.scope__items { border-top: 1px solid var(--line-2); }
.scope__item .code { display: block; margin-bottom: 0.75rem; }
.scope__item h3 { font-size: var(--t-lg); font-weight: 400; }
.scope__item p { margin-top: 0.9rem; }
.scope__item .scope__q { margin-top: 0.6rem; font-family: var(--font-display); font-size: var(--t-md); font-weight: 300; line-height: 1.3; color: var(--fg); }
.scope__item .scope__label { margin-top: 1.4rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.scope__item .ticks { margin-top: 0.6rem; max-width: 34rem; }
.scope__axis, .scope__route, .scope__nav { display: none; }

.scope[data-enhanced] .scope__axis {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.scope[data-enhanced] .scope__axis span:first-child, .scope[data-enhanced] .scope__axis span:last-child { color: var(--fg-2); }
.scope[data-enhanced] .scope__route { display: block; margin-bottom: 1.75rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.scope__route::-webkit-scrollbar { display: none; }
.scope__track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
}
/* Strecke von der ersten zur letzten Station, darauf der Fortschritt bis zur gewählten */
.scope__track::before { content: ""; position: absolute; left: calc(50% / var(--n, 6)); right: calc(50% / var(--n, 6)); top: 1.15rem; height: 1px; background: var(--line-2); }
.scope__progress { position: absolute; left: calc(50% / var(--n, 6)); top: 1.15rem; width: 0; height: 1px; background: var(--signal); transition: width 0.5s var(--ease); }
.scope__tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.5rem 0.5rem;
  border: 0;
  background: none;
  color: var(--fg-3);
  font-family: var(--font-display);
  text-align: center;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.scope__node {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--fg-2);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.scope__icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.scope__title { max-width: 9.5rem; font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.0625rem); font-weight: 400; line-height: 1.2; text-wrap: balance; }
.scope__tab:hover { color: var(--fg); }
.scope__tab.is-past .scope__node { border-color: var(--signal); color: var(--fg); }
.scope__tab[aria-selected="true"] { color: var(--fg); }
.scope__tab[aria-selected="true"] .scope__node { background: var(--signal); border-color: var(--signal); color: var(--bg); box-shadow: 0 0 0 4px rgba(229, 83, 43, 0.16); }
.scope__tab:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.scope[data-enhanced] .scope__items { border-top: 0; }
.scope[data-enhanced] .scope__item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.scope[data-enhanced] .scope__item[hidden] { display: none; }
.scope[data-enhanced] .scope__item:not([hidden]) { animation: fade-in 0.45s var(--ease); }
.scope[data-enhanced] .scope__item .code, .scope[data-enhanced] .scope__item h3, .scope[data-enhanced] .scope__item .scope__q, .scope[data-enhanced] .scope__item > p { grid-column: 1; }
.scope[data-enhanced] .scope__item h3 { font-size: var(--t-xl); font-weight: 300; line-height: 1.06; }
.scope[data-enhanced] .scope__item .scope__q { margin-top: 0.9rem; font-size: var(--t-md); }
.scope[data-enhanced] .scope__item .scope__label { grid-column: 2; grid-row: 1; margin-top: 0.35rem; }
.scope[data-enhanced] .scope__item .ticks { grid-column: 2; grid-row: 2 / span 4; align-self: start; margin-top: 0.75rem; max-width: none; }
.scope[data-enhanced] .scope__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.scope__step {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line-2);
  background: none;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.scope__step--next { align-items: flex-end; text-align: right; }
.scope__step:hover:not(:disabled) { border-color: var(--fg); }
.scope__step:disabled { color: var(--fg-3); cursor: default; }
.scope__dir { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.scope__step--next:not(:disabled) .scope__dir { color: var(--signal); }

@media (max-width: 799px) {
  .scope[data-enhanced] .scope__item { grid-template-columns: 1fr; }
  .scope[data-enhanced] .scope__item .scope__label, .scope[data-enhanced] .scope__item .ticks { grid-column: 1; grid-row: auto; }
  .scope[data-enhanced] .scope__item .scope__label { margin-top: 1.4rem; }
  .scope__track { grid-auto-columns: 7.25rem; min-width: max-content; width: auto; }
  .scope[data-enhanced] .scope__axis span:nth-child(2) { display: none; }
}

/* Interaktive Punktgrafiken im Beitrag über FPV-Drohnen */
.fpv { margin: 2.5rem 0; max-width: none; }
.fpv__stage { position: relative; aspect-ratio: 16 / 10; background: var(--corners), var(--bg-2); overflow: hidden; }
.fpv__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.fpv__stage canvas.is-grabbing { cursor: grabbing; }
.fpv__badge { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3; margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.fpv__badge span { color: var(--signal); }
.fpv__markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fmark { position: absolute; top: 0; left: 0; margin: -11px 0 0 -11px; width: 22px; height: 22px; padding: 0; border: 1px solid rgba(229, 83, 43, 0.75); border-radius: 50%; background: rgba(var(--bg-rgb), 0.8); color: var(--fg); font-family: var(--font-mono); font-size: 0.65rem; line-height: 20px; text-align: center; cursor: pointer; pointer-events: auto; transition: opacity 0.3s var(--ease), background 0.2s var(--ease); }
.fmark:hover, .fmark.is-active { background: var(--signal); color: var(--bg); }
.fmark:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.fpv__parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 1px; border: 1px solid var(--line); background: var(--line); }
.fpv__part { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem; border: 0; background: var(--bg-2); color: var(--fg-2); font-family: var(--font-display); font-size: 0.9375rem; text-align: left; cursor: pointer; transition: color 0.2s var(--ease), background 0.2s var(--ease); }
.fpv__part:hover { color: var(--fg); }
.fpv__part[aria-pressed="true"] { color: var(--fg); background: var(--bg-3); }
.fpv__part[aria-pressed="true"] .fpv__no { background: var(--signal); border-color: var(--signal); color: var(--bg); }
.fpv__no { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border: 1px solid var(--line-2); border-radius: 50%; font-family: var(--font-mono); font-size: 0.65rem; color: var(--fg-2); }
.fpv__desc { margin-top: 0.9rem; min-height: 2.6em; font-size: 0.9375rem; color: var(--fg-2); }
.fpv__desc strong { color: var(--fg); font-weight: 500; }
.fpv__control { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin-top: 1px; padding: 0.8rem 1rem; border: 1px solid var(--line); background: var(--bg-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.fpv__control output { min-width: 3.2em; text-align: right; color: var(--fg); font-size: var(--t-sm); }
.fpv__control input[type="range"] { width: 100%; accent-color: var(--signal); }
.fpv figcaption { margin-top: 1rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 699px) {
  .fpv__stage { aspect-ratio: 4 / 3.4; }
  .fpv__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Workshop-Karten (Seminare): Kennung, Titel, Zielgruppe, Inhalte, Kenndaten */
.courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.course { display: flex; flex-direction: column; padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--bg); }
.section--alt .course { background: var(--bg-2); }
.course .code { margin-bottom: 1.1rem; }
.course h3 { font-size: var(--t-md); font-weight: 500; line-height: 1.25; }
.course .course__for { margin-top: 0.5rem; font-size: 0.875rem; color: var(--fg-3); }
.course p { margin-top: 0.9rem; font-size: 0.9375rem; }
.course .ticks { margin-top: 1.2rem; }
.course .ticks li { font-size: 0.875rem; }
.course .course__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: auto; padding-top: 1.4rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.course .course__meta span:first-child { color: var(--signal-2); }
.course:target { outline: 1px solid var(--signal); outline-offset: -1px; }
.course--cta { background: linear-gradient(180deg, rgba(229, 83, 43, 0.1), rgba(229, 83, 43, 0) 60%), var(--bg); }
.course .course__cta { margin-top: auto; padding-top: 1.4rem; }
@media (max-width: 999px) { .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .courses { grid-template-columns: 1fr; } }

/* --- 9c. Standortmodell (Showcase Sicherheitsaudit) --------------------- */
/* Vollflächig unter der Kopfzeile: links die Punktwolke, rechts das Verzeichnis.
   Unter 1024 px nur ein Hinweis, weil das Modell dort nicht bedienbar wäre. */
.campus { display: grid; grid-template-columns: minmax(0, 1fr) clamp(23.75rem, 26vw, 27.5rem); height: calc(100vh - var(--header-h) - 1px); min-height: 36rem; border-bottom: 1px solid var(--line); }
.campus__stage { position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, var(--glow) 0%, var(--bg) 72%); }
.campus__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.campus__stage canvas.is-grabbing { cursor: grabbing; }
.campus__stage canvas.campus__gl { pointer-events: none; }
.campus__markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.campus__mark { position: absolute; top: 0; left: 0; margin: -0.7rem 0 0 -1.2rem; padding: 0.15rem 0.4rem; border: 1px solid rgba(229, 83, 43, 0.6); background: rgba(var(--bg-rgb), 0.82); color: var(--fg); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; cursor: pointer; transition: opacity 0.25s var(--ease), background 0.2s var(--ease); will-change: transform; }
.campus__mark:hover, .campus__mark.is-active { background: var(--signal); border-color: var(--signal); color: var(--bg); }
.campus__badge, .campus__count, .campus__help { position: absolute; z-index: 3; margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); pointer-events: none; }
/* Beschriftungen auf dunklem Grund, damit sie auch vor hellem Himmel lesbar bleiben */
.campus__badge, .campus__count, .campus__help { padding: 0.3rem 0.55rem; background: rgba(var(--bg-rgb), 0.66); color: var(--fg-2); }
.campus__badge { top: 1rem; left: 1.25rem; }
.campus__badge span { color: var(--signal); }
.campus__count { top: 1rem; right: 1.25rem; }
.campus__help { left: 1.25rem; bottom: 1.2rem; white-space: nowrap; }
.campus__reset { position: absolute; z-index: 3; top: 3rem; left: 1.25rem; padding: 0.35rem 0.7rem; border: 1px solid var(--line-2); background: rgba(var(--bg-rgb), 0.7); color: var(--fg-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.campus__reset:hover { color: var(--fg); border-color: var(--fg); }
.campus__info { position: absolute; z-index: 3; left: 1.25rem; bottom: 3.2rem; display: flex; flex-direction: column; gap: 0.2rem; max-width: 26rem; padding: 0.75rem 1rem; border-left: 2px solid var(--signal); background: rgba(var(--bg-rgb), 0.9); }
.campus__info[hidden] { display: none; }
.campus__info[data-sev] { border-left-color: var(--sev); }
.campus__info[data-sev] .code { color: var(--sev); }
.campus__info strong { color: var(--fg); font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; }
.campus__info-note { font-size: 0.875rem; color: var(--fg-2); }
.campus__info.is-fix { border-left-color: var(--ok); }
.campus__mode { display: inline-flex; margin-top: 0.6rem; border: 1px solid var(--line-2); align-self: flex-start; }
.campus__mode button { padding: 0.35rem 0.7rem; border: 0; background: none; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.campus__mode button + button { border-left: 1px solid var(--line-2); }
.campus__mode button:hover { color: var(--fg); }
.campus__mode button[data-mode="0"][aria-pressed="true"] { background: var(--sev); color: var(--bg); }
.campus__mode button[data-mode="1"][aria-pressed="true"] { background: var(--ok); color: var(--bg); }
.campus__hud { position: absolute; z-index: 3; right: 1.25rem; bottom: 1.1rem; display: flex; align-items: flex-end; gap: 1rem; }
.campus__scale { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; padding: 0.35rem 0.55rem; background: rgba(var(--bg-rgb), 0.66); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--fg-2); }
.campus__scale-bar { display: block; height: 0.4rem; border: 1px solid var(--fg-3); border-top: 0; transition: width 0.2s var(--ease); }
.campus__compass { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-2); border-radius: 50%; background: rgba(var(--bg-rgb), 0.7); }
.campus__compass svg { width: 100%; height: 100%; overflow: visible; }
.campus__compass path { fill: var(--signal); }
.campus__compass path.s { fill: var(--fg-3); }
.campus__compass text { fill: var(--fg); font-family: var(--font-mono); font-size: 6px; text-anchor: middle; }
.campus__loading { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: 0.9rem; background: var(--bg); transition: opacity 0.5s var(--ease); }
.campus__bar { width: 12rem; height: 1px; background: linear-gradient(90deg, transparent, var(--signal), transparent); background-size: 50% 100%; background-repeat: no-repeat; animation: campus-load 1.4s linear infinite; }
@keyframes campus-load { from { background-position: -100% 0; } to { background-position: 200% 0; } }
.campus[data-state="ready"] .campus__loading { opacity: 0; pointer-events: none; }
.campus__panel { position: relative; overflow-y: auto; border-left: 1px solid var(--line); background: var(--bg-2); padding: 1.4rem 1.25rem 2.5rem; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.campus__head h1 { margin-top: 0.4rem; font-size: var(--t-lg); font-weight: 400; line-height: 1.1; }
.cp-lead { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.5; color: var(--fg-2); }
.cp-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
.cp-meta span { padding: 0.2rem 0.45rem; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
/* Bericht: Schweregrade als Farbe, auf jedes Element mit data-sev */
.campus [data-sev="k"] { --sev: var(--sev-k); }
.campus [data-sev="h"] { --sev: var(--sev-h); }
.campus [data-sev="m"] { --sev: var(--sev-m); }
.campus [data-sev="g"] { --sev: var(--sev-g); }

/* Übersicht: Bewertung, Verteilung, Filter, Aktionen */
.cp-risk { margin-top: 1.1rem; padding: 1rem; border: 1px solid var(--line); background: var(--bg); }
.cp-risk__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.cp-risk__top strong { display: block; margin-top: 0.3rem; font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; line-height: 1.1; color: var(--sev-h); }
.cp-scale { display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.cp-scale .code { color: var(--fg-3); }
.cp-scale__bar { display: flex; gap: 3px; }
.cp-scale__bar i { width: 0.9rem; height: 0.3rem; background: var(--line-2); }
.cp-scale__bar i.on { background: var(--sev-h); }
.cp-dist { display: flex; gap: 2px; height: 0.375rem; margin-top: 1rem; }
.cp-dist i { flex-basis: 0; background: var(--sev); }
.cp-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; margin-top: 0.5rem; }
.cp-filter button { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.5rem 0.55rem 0.45rem; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-3); text-align: left; cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.cp-filter b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1; color: var(--fg); }
.cp-filter span { display: flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.cp-filter span::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--sev); }
.cp-filter button:hover { border-color: var(--line-2); background: var(--bg-3); }
.cp-filter button[aria-pressed="true"] { border-color: var(--sev); background: var(--bg-3); color: var(--fg); }
.cp-risk__text { margin-top: 0.9rem; font-size: 0.8125rem; line-height: 1.55; color: var(--fg-2); }
.cp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.cp-btn { padding: 0.6rem 0.5rem; border: 1px solid var(--line-2); background: none; color: var(--fg); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background 0.2s var(--ease), border-color 0.2s var(--ease); }
.cp-btn:hover { border-color: var(--fg-3); }
.cp-btn--main { border-color: var(--signal); background: var(--signal); color: var(--bg); }
a.cp-btn { display: inline-block; text-align: center; text-decoration: none; }
a.cp-btn--main:hover { color: var(--bg); }
.cp-btn--main::after { content: " →"; }
.cp-btn--main:hover { border-color: var(--signal-2); background: var(--signal-2); }
.cp-btn:disabled { opacity: 0.5; cursor: progress; }

/* Reiter mit Anzahl */
.campus__tabs { position: sticky; top: -1.4rem; z-index: 2; display: flex; margin: 1.4rem -1.25rem 0; padding: 0 1.25rem; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.campus__tabs button { display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex: 1; margin-bottom: -1px; padding: 0.85rem 0.25rem 0.75rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.campus__tabs button span { padding: 0.05rem 0.3rem; background: var(--bg-3); color: var(--fg-3); font-size: 0.5625rem; letter-spacing: 0.04em; }
.campus__tabs button:hover { color: var(--fg-2); }
.campus__tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--signal); }
.campus__tabs button[aria-selected="true"] span { background: var(--signal); color: var(--bg); }
.cp-intro, .cp-foot, .campus__intro { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.5; color: var(--fg-3); }

/* Liste der Befunde */
.cp-list { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.finding[hidden] { display: none; }
.cp-num { display: inline-grid; flex: none; place-items: center; width: 1.625rem; height: 1.625rem; border: 1.5px solid var(--sev); border-radius: 50%; background: var(--bg); color: var(--fg); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; line-height: 1; }
.cp-num--l { width: 2.5rem; height: 2.5rem; border-width: 0; background: var(--sev); color: var(--bg); font-size: 1rem; }
.cp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; width: 100%; padding: 0.7rem 0.5rem 0.7rem 0.35rem; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg-2); text-align: left; cursor: pointer; transition: background 0.2s var(--ease); }
.cp-row:hover, .cp-row:focus-visible { background: rgba(var(--fg-rgb), 0.04); }
.cp-row:hover .cp-num { background: var(--sev); color: var(--bg); }
.cp-row__main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cp-row__title { color: var(--fg); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.cp-row__sub { font-size: 0.75rem; color: var(--fg-3); }
.cp-row__sev { margin-right: 0.45rem; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sev); }
.cp-due { padding: 0.2rem 0.4rem; border: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--fg-3); }
.cp-due[data-due="0"] { border-color: rgba(229, 83, 43, 0.55); color: var(--signal-2); }
.cp-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.75rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line-2); background: var(--bg); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--fg-2); }
.cp-filterbar[hidden] { display: none; }
.cp-filterbar button { padding: 0; border: 0; background: none; color: var(--signal-2); font: inherit; letter-spacing: inherit; cursor: pointer; }
.cp-filterbar button::after { content: " ×"; }
.cp-good { margin-top: 1.5rem; border: 1px solid var(--line); background: var(--bg); }
.cp-good summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.8rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); cursor: pointer; list-style: none; }
.cp-good summary::-webkit-details-marker { display: none; }
.cp-good summary b { padding: 0.05rem 0.35rem; background: rgba(143, 185, 150, 0.16); color: var(--good); font-weight: 400; }
.cp-good summary::after { content: ""; width: 0.4rem; height: 0.4rem; margin-left: auto; border-right: 1.5px solid var(--fg-3); border-bottom: 1.5px solid var(--fg-3); transform: rotate(45deg); transition: transform 0.2s var(--ease); }
.cp-good[open] summary::after { transform: rotate(-135deg); }
.cp-good .strengths { margin: 0; padding: 0 0.8rem 0.3rem; }
.strengths { list-style: none; border-top: 1px solid var(--line); }
.strengths li { position: relative; padding: 0.6rem 0.3rem 0.6rem 1.5rem; border-bottom: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.45; color: var(--fg-2); }
.strengths li:last-child { border-bottom: 0; }
.strengths li::before { content: ""; position: absolute; left: 0.35rem; top: 0.95rem; width: 0.55rem; height: 0.3rem; border-left: 1.5px solid var(--good); border-bottom: 1.5px solid var(--good); transform: rotate(-45deg); }

/* Detailansicht eines Befunds */
.cp-detail[hidden], [data-list][hidden] { display: none; }
.cp-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 0.8rem; }
.cp-bar .code { color: var(--fg-3); }
.cp-back { padding: 0.3rem 0; border: 0; background: none; color: var(--fg-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.cp-back::before { content: "← "; color: var(--signal); }
.cp-back:hover { color: var(--fg); }
.cp-dh { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; margin-top: 0.9rem; }
.cp-dh .code { color: var(--fg-3); }
.cp-dh__sev { color: var(--sev); }
.cp-dh h2 { margin-top: 0.3rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; line-height: 1.25; color: var(--fg); }
.cp-dh__where { margin-top: 0.3rem; font-size: 0.8125rem; color: var(--fg-2); }
.cp-mode { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1rem; border: 1px solid var(--line-2); }
.cp-mode button { padding: 0.6rem 0.5rem; border: 0; background: none; color: var(--fg-3); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.cp-mode button + button { border-left: 1px solid var(--line-2); }
.cp-mode button:hover { color: var(--fg); }
.cp-mode button[data-mode="0"][aria-pressed="true"] { background: var(--sev); color: var(--bg); }
.cp-mode button[data-mode="1"][aria-pressed="true"] { background: var(--ok); color: var(--bg); }
.cp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0.75rem 0 0; border: 1px solid var(--line); background: var(--line); }
.cp-facts div { padding: 0.55rem 0.65rem; background: var(--bg); }
.cp-facts dt { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.cp-facts dd { margin: 0.25rem 0 0; font-size: 0.8125rem; font-weight: 500; line-height: 1.35; color: var(--fg); }
.cp-sec { margin-top: 1.25rem; }
.cp-sec h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.45rem; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.cp-sec h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.cp-sec p { font-size: 0.84375rem; line-height: 1.6; color: var(--fg-2); }
.cp-sec--fix h3 { color: var(--ok-2); }
.cp-sec--fix ol { margin: 0; padding: 0; list-style: none; counter-reset: m; }
.cp-sec--fix li { position: relative; padding: 0.5rem 0 0.5rem 2rem; border-bottom: 1px solid var(--line); counter-increment: m; font-size: 0.84375rem; line-height: 1.5; color: var(--fg); }
.cp-sec--fix li:last-child { border-bottom: 0; }
.cp-sec--fix li::before { content: counter(m); position: absolute; left: 0; top: 0.5rem; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border: 1px solid var(--ok); color: var(--ok-2); font-family: var(--font-mono); font-size: 0.6875rem; }
.cp-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1.5rem; }
.cp-nav button { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.6rem 0.7rem; border: 1px solid var(--line-2); background: none; color: var(--fg); font-size: 0.8125rem; line-height: 1.35; text-align: left; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.cp-nav button .code { color: var(--fg-3); }
.cp-nav__next { align-items: flex-end; text-align: right !important; }
.cp-nav button:hover { border-color: var(--fg-3); background: rgba(var(--fg-rgb), 0.04); }

/* Maßnahmenplan als Zeitleiste */
.cp-plan { margin: 1.1rem 0 0; padding: 0; list-style: none; }
.cp-phase { position: relative; padding: 0 0 1.4rem 1.4rem; }
.cp-phase::before { content: ""; position: absolute; left: 0.3rem; top: 0.9rem; bottom: 0; width: 1px; background: var(--line-2); }
.cp-phase:last-child::before { display: none; }
.cp-phase::after { content: ""; position: absolute; left: 0; top: 0.3rem; width: 0.65rem; height: 0.65rem; border: 2px solid var(--signal); border-radius: 50%; background: var(--bg-2); }
.cp-phase[data-phase="1"]::after { border-color: var(--sev-h); }
.cp-phase[data-phase="2"]::after { border-color: var(--sev-g); }
.cp-phase__head { display: flex; flex-direction: column; gap: 0.2rem; }
.cp-phase__head strong { font-family: var(--font-display); font-size: 1rem; font-weight: 500; color: var(--fg); }
.cp-phase__head .code { color: var(--fg-3); white-space: nowrap; }
.cp-phase ol { margin: 0.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cp-meas { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.7rem; width: 100%; padding: 0.6rem 0.4rem 0.6rem 0.2rem; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; transition: background 0.2s var(--ease); }
.cp-meas .cp-num { width: 1.4rem; height: 1.4rem; font-size: 0.625rem; }
.cp-meas__main { display: flex; flex-direction: column; gap: 0.2rem; }
.cp-meas__text { font-size: 0.8125rem; line-height: 1.45; color: var(--fg); }
.cp-meas__sub { font-size: 0.75rem; color: var(--fg-3); }
.cp-meas:hover, .cp-meas[aria-pressed="true"] { background: rgba(var(--fg-rgb), 0.04); }

/* Objektverzeichnis mit Suche */
.cp-search { width: 100%; margin-top: 1rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line-2); border-radius: 0; background: var(--bg); color: var(--fg); font: inherit; font-size: 0.875rem; }
.cp-search::placeholder { color: var(--fg-3); }
.cp-search:focus { outline: none; border-color: var(--signal); }
.cp-grp { margin-top: 1.4rem; }
.cp-grp[hidden], .cp-grp li[hidden], .cp-empty[hidden] { display: none; }
.cp-grp h2 { display: flex; justify-content: space-between; color: var(--fg-2); }
.cp-grp h2 span { color: var(--fg-3); }
.cp-grp ol { margin: 0.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cp-obj { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.35rem; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; transition: background 0.2s var(--ease); }
.cp-obj__code { color: var(--fg-3); }
.cp-obj__main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.cp-obj__name { color: var(--fg); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; }
.cp-obj__note { overflow: hidden; font-size: 0.75rem; color: var(--fg-3); text-overflow: ellipsis; white-space: nowrap; }
.cp-obj__f { display: grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 0.25rem; border-radius: 0.6rem; background: var(--sev); color: var(--bg); font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; }
.cp-obj:hover, .cp-obj:focus-visible { background: rgba(var(--fg-rgb), 0.04); }
.cp-obj[aria-pressed="true"] { background: rgba(229, 83, 43, 0.12); }
.cp-obj[aria-pressed="true"] .cp-obj__code { color: var(--signal-2); }
.cp-empty { margin-top: 1rem; font-size: 0.8125rem; color: var(--fg-3); }
/* Markierungen der Befunde und Weg im Modell */
.campus__pin { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: -0.75rem 0 0 -0.75rem; padding: 0; border: 1.5px solid var(--sev); border-radius: 50%; background: rgba(var(--bg-rgb), 0.86); color: var(--fg); font-family: var(--font-mono); font-size: 0.625rem; cursor: pointer; transition: opacity 0.25s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); will-change: transform; }
.campus__pin:hover, .campus__pin.is-active { background: var(--sev); color: var(--bg); }
.campus__pin.is-active { z-index: 1; }
.campus__pin.is-active::after { content: ""; position: absolute; inset: -0.45rem; border: 1px solid var(--sev); border-radius: 50%; animation: campus-pulse 1.8s var(--ease) infinite; }
@keyframes campus-pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
/* Maße und Hinweise zum gewählten Befund */
.campus__ann { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ann line, .ann polyline { fill: none; stroke: rgba(var(--fg-rgb), 0.85); stroke-width: 1; }
.ann circle { fill: var(--bg); stroke: rgba(var(--fg-rgb), 0.9); stroke-width: 1.5; }
.ann text { fill: var(--fg); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; dominant-baseline: middle; paint-order: stroke; stroke: rgba(var(--bg-rgb), 0.92); stroke-width: 4px; stroke-linejoin: round; }
.campus__ann[data-mode="soll"] line, .campus__ann[data-mode="soll"] polyline, .campus__ann[data-mode="soll"] circle { stroke: var(--ok); }
.campus__ann[data-mode="soll"] text { fill: var(--ok-2); }
@media (prefers-reduced-motion: reduce) { .campus__pin.is-active::after { animation: none; } }

/* --- 9d. Sicherheitsbericht als Dokument ------------------------------------ */
/* A4-Seiten (210 × 297 mm) auf dunklem Grund, Inhalt links. Beim Drucken nur die Seiten. */
.rp { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--rp-bg); color: var(--fg); }
.rp[hidden] { display: none; }
body.rp-open { overflow: hidden; }
.rp-bar { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--bg); }
.rp-bar__title { display: flex; flex-direction: column; gap: 0.1rem; margin-right: auto; }
.rp-bar__title strong { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; }
.rp-bar__status { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--fg-3); }
.rp-btn { padding: 0.55rem 0.9rem; border: 1px solid var(--signal); background: var(--signal); color: var(--bg); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.rp-btn:disabled { opacity: 0.45; cursor: progress; }
.rp-btn--ghost { border-color: var(--line-2); background: none; color: var(--fg); }
.rp-btn--ghost:hover { border-color: var(--fg); }
.rp-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 0; }
.rp-side { overflow-y: auto; padding: 1.25rem 1rem 2rem 1.25rem; border-right: 1px solid var(--line); background: var(--bg); scrollbar-width: thin; }
.rp-side ol { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.rp-side a { display: block; padding: 0.35rem 0.5rem; border-left: 2px solid transparent; color: var(--fg-2); font-size: 0.8125rem; line-height: 1.35; text-decoration: none; }
.rp-side .rp-toc__sub a { padding-left: 1.1rem; font-size: 0.75rem; color: var(--fg-3); }
.rp-side a:hover { color: var(--fg); }
.rp-side a.is-on { border-left-color: var(--signal); color: var(--fg); background: rgba(229, 83, 43, 0.08); }
.rp-scroll { overflow-y: auto; padding: 24px; scrollbar-width: thin; }
.rp-pages { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 210mm; margin: 0 auto; }

/* Seite */
.rp-page { position: relative; flex: none; width: 210mm; height: 297mm; overflow: hidden; background: #fff; color: #1B1F23; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--font-text); font-size: 9.5pt; line-height: 1.5; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  --p-line: #DDE1E5; --p-mute: #5F6870; --p-soft: #F3F5F7; }
.rp-page strong { color: #0F1215; }
.rp-page td, .rp-page td:first-child { color: #1B1F23; font-family: inherit; font-size: inherit; font-weight: inherit; background: none; }
.rp-page th { background: none; }
.rp-table td:first-child { font-family: var(--font-mono); font-size: 7.8pt; }
.rp-page p { max-width: none; }
.rp-page [data-sev="k"] { --sevp: #D1401C; --sevt: #fff; }
.rp-page [data-sev="h"] { --sevp: #E07A2A; --sevt: #fff; }
.rp-page [data-sev="m"] { --sevp: #D9AA2B; --sevt: #1B1F23; }
.rp-page [data-sev="g"] { --sevp: #7A8FA4; --sevt: #fff; }
.rp-head { position: absolute; top: 10mm; left: 18mm; right: 18mm; display: flex; align-items: center; gap: 2mm; padding-bottom: 2.4mm; border-bottom: 0.25mm solid var(--p-line);
  font-family: var(--font-mono); font-size: 6.8pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-mute); }
.rp-head svg { width: 3.2mm; height: 4mm; color: #E5532B; }
.rp-head__doc { margin-left: auto; }
.rp-foot { position: absolute; bottom: 9mm; left: 18mm; right: 18mm; display: flex; justify-content: space-between; padding-top: 2.4mm; border-top: 0.25mm solid var(--p-line);
  font-family: var(--font-mono); font-size: 6.8pt; letter-spacing: 0.08em; color: var(--p-mute); }
.rp-content { position: absolute; top: 21mm; left: 18mm; right: 18mm; bottom: 19mm; }
.rp-content p { margin: 0 0 2.6mm; }
.rp-content ul, .rp-content ol { margin: 0 0 2.6mm; padding-left: 4.5mm; }
.rp-content li + li { margin-top: 0.8mm; }
.rp-h1 { display: flex; align-items: baseline; gap: 3mm; margin: 2mm 0 6mm; font-family: var(--font-display); font-size: 21pt; font-weight: 500; line-height: 1.15; color: #0F1215; }
.rp-h1 span { font-family: var(--font-mono); font-size: 11pt; color: #E5532B; }
.rp-h3 { margin: 6mm 0 2.4mm; font-family: var(--font-display); font-size: 11.5pt; font-weight: 600; color: #0F1215; }
.rp-h4 { margin: 3.4mm 0 1mm; font-family: var(--font-mono); font-size: 6.8pt; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-mute); }
.rp-label { margin: 0 0 1mm !important; font-family: var(--font-mono); font-size: 6.8pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-mute); }
.rp-nowrap { white-space: nowrap; }
.rp-sev { display: inline-block; padding: 0.3mm 1.8mm; background: var(--sevp); color: var(--sevt); font-family: var(--font-mono); font-size: 6.4pt; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* Deckblatt */
.rp-page--cover { padding: 0; }
.rp-cover__top { position: absolute; top: 16mm; left: 18mm; display: flex; align-items: center; gap: 3mm; }
.rp-cover__logo { width: 9mm; height: 11.3mm; color: #E5532B; }
.rp-cover__top div { display: flex; flex-direction: column; line-height: 1; }
.rp-cover__top strong { font-family: var(--font-display); font-size: 15pt; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.rp-cover__top span { margin-top: 1mm; font-family: var(--font-mono); font-size: 7pt; letter-spacing: 0.3em; text-transform: uppercase; color: var(--p-mute); }
.rp-page--cover .rp-kicker { position: absolute; top: 46mm; left: 18mm; margin: 0; font-family: var(--font-mono); font-size: 8pt; letter-spacing: 0.14em; text-transform: uppercase; color: #E5532B; }
.rp-cover__title { position: absolute; top: 53mm; left: 18mm; right: 18mm; margin: 0; font-family: var(--font-display); font-size: 34pt; font-weight: 500; line-height: 1.05; color: #0F1215; }
.rp-cover__sub { position: absolute; top: 71mm; left: 18mm; right: 40mm; margin: 0; font-size: 11pt; color: var(--p-mute); }
.rp-cover__img { position: absolute; top: 88mm; left: 0; width: 210mm; height: 118.1mm; background: #0B0D0F; }
.rp-page--cover .rp-meta { position: absolute; top: 216mm; left: 18mm; width: 174mm; }
.rp-cover__note { position: absolute; bottom: 12mm; left: 18mm; right: 18mm; margin: 0; padding-top: 2.4mm; border-top: 0.25mm solid var(--p-line); font-family: var(--font-mono); font-size: 6.8pt; letter-spacing: 0.06em; color: var(--p-mute); }
.rp-meta { width: 100%; border-collapse: collapse; font-size: 8.8pt; }
.rp-meta th { width: 38mm; padding: 1.6mm 0; border-bottom: 0.25mm solid var(--p-line); font-family: var(--font-mono); font-size: 6.8pt; font-weight: 400; letter-spacing: 0.1em; text-align: left; text-transform: uppercase; color: var(--p-mute); vertical-align: top; }
.rp-meta td { padding: 1.4mm 0; border-bottom: 0.25mm solid var(--p-line); }
.rp-meta--small { font-size: 8.4pt; }

/* Abbildungen */
.rp-fig { margin: 0 0 3mm; }
.rp-fig__img, .rp-cover__img { position: relative; display: grid; place-items: center; overflow: hidden; background: #0B0D0F; aspect-ratio: 3 / 2; }
.rp-fig--ist .rp-fig__img, .rp-fig--soll .rp-fig__img { aspect-ratio: 5 / 4; }
.rp-fig__img span, .rp-cover__img span { font-family: var(--font-mono); font-size: 7pt; letter-spacing: 0.1em; text-transform: uppercase; color: #7C858E; animation: rp-wait 1.4s ease-in-out infinite alternate; }
@keyframes rp-wait { from { opacity: 0.35; } to { opacity: 1; } }
.rp-fig__img canvas, .rp-cover__img canvas { display: block; width: 100%; height: 100%; }
.rp-fig figcaption { margin-top: 1.4mm; font-size: 7.6pt; line-height: 1.4; color: var(--p-mute); }
.rp-fig figcaption b { margin-right: 1mm; color: #1B1F23; font-weight: 600; }
.rp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; margin-top: 4mm; }
.rp-fig--ist .rp-fig__img { border-top: 1mm solid var(--sevp, #E5532B); }
.rp-fig--soll .rp-fig__img { border-top: 1mm solid #2FB386; }

/* Zusammenfassung */
.rp-rating { display: grid; grid-template-columns: 1fr 1.25fr; gap: 6mm; margin-bottom: 5mm; padding: 4.5mm 5mm; background: var(--p-soft); border-left: 1.2mm solid #E07A2A; }
.rp-rating strong { display: block; font-family: var(--font-display); font-size: 17pt; font-weight: 500; color: #C9621B; line-height: 1.2; }
.rp-scale { display: inline-flex; gap: 0.8mm; margin-top: 2mm; vertical-align: middle; }
.rp-scale i { width: 6mm; height: 1.6mm; background: #D3D8DD; }
.rp-scale i.on { background: #E07A2A; }
.rp-scale__txt { margin-left: 2mm; font-family: var(--font-mono); font-size: 6.8pt; color: var(--p-mute); vertical-align: middle; }
.rp-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2mm; margin: 0; }
.rp-figs div { padding-left: 2.4mm; border-left: 0.25mm solid #C8CED4; }
.rp-figs dt { font-family: var(--font-mono); font-size: 6pt; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-mute); }
.rp-figs dd { margin: 0.6mm 0 0; font-family: var(--font-display); font-size: 18pt; font-weight: 500; line-height: 1.1; }
.rp-dist { display: flex; height: 7mm; gap: 0.6mm; }
.rp-dist__seg { display: flex; align-items: center; padding-left: 2mm; background: var(--sevp); color: var(--sevt); font-family: var(--font-mono); font-size: 7.5pt; }
.rp-legend { display: flex; gap: 5mm; margin-top: 1.6mm !important; font-family: var(--font-mono); font-size: 6.8pt; letter-spacing: 0.06em; color: var(--p-mute); }
.rp-legend i { display: inline-block; width: 2.4mm; height: 2.4mm; margin-right: 1.2mm; background: var(--sevp); vertical-align: -0.3mm; }

/* Tabellen */
.rp-table { width: 100%; border-collapse: collapse; font-size: 8.4pt; line-height: 1.4; }
.rp-table th { padding: 1.5mm 2mm 1.5mm 0; border-bottom: 0.4mm solid #1B1F23; font-family: var(--font-mono); font-size: 6.4pt; font-weight: 400; letter-spacing: 0.1em; text-align: left; text-transform: uppercase; color: var(--p-mute); }
.rp-table td { padding: 1.6mm 2mm 1.6mm 0; border-bottom: 0.25mm solid var(--p-line); vertical-align: top; }
.rp-table--list td:nth-child(3) { color: var(--p-mute); }
.rp-table--plan { font-size: 8pt; }
.rp-table--plan td { padding-top: 1.25mm; padding-bottom: 1.25mm; }
.rp-grp th { padding-top: 3.2mm; border-bottom: 0.25mm solid var(--p-line); font-family: var(--font-display); font-size: 9pt; font-weight: 600; letter-spacing: 0; text-transform: none; color: #0F1215; }

/* Vorgehen */
.rp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.rp-steps { margin: 0 0 2mm; padding: 0 !important; list-style: none; counter-reset: st; display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 6mm; }
.rp-steps li { counter-increment: st; position: relative; margin: 0 !important; padding: 2.6mm 3mm 2.6mm 10mm; background: var(--p-soft); }
.rp-steps li::before { content: "0" counter(st); position: absolute; left: 3mm; top: 2.5mm; font-family: var(--font-mono); font-size: 8pt; color: #E5532B; }
.rp-steps b { display: block; margin-bottom: 0.6mm; font-weight: 600; }
.rp-steps span { font-size: 8.4pt; color: #3A4147; }

/* Risikomatrix */
.rp-cols--mx { grid-template-columns: 92mm 1fr; margin-top: 5mm; align-items: start; }
.rp-cols--mx > div:first-child { position: relative; padding-left: 5mm; }
.rp-mx { display: grid; grid-template-columns: 5mm repeat(4, 1fr); gap: 0.8mm; }
.rp-mx__c { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 0.8mm; height: 15mm; background: color-mix(in srgb, var(--sevp) 22%, #fff); }
.rp-mx__c b { display: grid; place-items: center; width: 6mm; height: 6mm; border-radius: 50%; background: var(--sevp); color: var(--sevt); font-family: var(--font-mono); font-size: 6.6pt; }
.rp-mx__x, .rp-mx__y { display: grid; place-items: center; font-family: var(--font-mono); font-size: 7pt; color: var(--p-mute); }
.rp-mx__lx { margin: 1.4mm 0 0 !important; text-align: center; font-family: var(--font-mono); font-size: 6.6pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-mute); }
.rp-mx__ly { position: absolute; left: -4mm; top: 30mm; margin: 0 !important; transform: rotate(-90deg); transform-origin: center; font-family: var(--font-mono); font-size: 6.6pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-mute); }

/* Befundübersicht */
.rp-shells { display: grid; gap: 1.6mm; }
.rp-shell { display: grid; grid-template-columns: 6mm 40mm 1fr 8mm; align-items: center; gap: 2mm; font-size: 8.6pt; }
.rp-shell__n { font-family: var(--font-mono); color: #E5532B; }
.rp-shell__bar { display: flex; gap: 0.8mm; }
.rp-shell__bar i { width: 9mm; height: 3.6mm; background: var(--sevp); }
.rp-shell__c { font-family: var(--font-mono); text-align: right; color: var(--p-mute); }
.rp-ok { padding: 0 !important; list-style: none; }
.rp-ok li { position: relative; padding: 1.4mm 0 1.4mm 6mm; border-bottom: 0.25mm solid var(--p-line); }
.rp-ok li::before { content: ""; position: absolute; left: 0.8mm; top: 2.6mm; width: 2.6mm; height: 1.4mm; border-left: 0.5mm solid #2FB386; border-bottom: 0.5mm solid #2FB386; transform: rotate(-45deg); }

/* Befundseite */
.rp-find__top { display: flex; align-items: center; gap: 3mm; font-family: var(--font-mono); font-size: 7pt; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-mute); }
.rp-find__id { color: #1B1F23; font-weight: 600; }
.rp-find__title { margin: 2mm 0 4mm; font-family: var(--font-display); font-size: 16pt; font-weight: 500; line-height: 1.2; color: #0F1215; }
.rp-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 0.25mm solid var(--p-line); }
.rp-facts div { padding: 1.8mm 2mm 1.8mm 0; border-bottom: 0.25mm solid var(--p-line); }
.rp-facts dt { font-family: var(--font-mono); font-size: 6pt; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-mute); }
.rp-facts dd { margin: 0.4mm 0 0; font-size: 8.6pt; }
.rp-mass li::marker { font-family: var(--font-mono); color: #E5532B; }

/* Anhang */
.rp-gloss { margin: 0; }
.rp-gloss div { display: grid; grid-template-columns: 38mm 1fr; gap: 3mm; padding: 1.8mm 0; border-bottom: 0.25mm solid var(--p-line); }
.rp-gloss dt { font-weight: 600; }
.rp-gloss dd { margin: 0; color: #3A4147; }
.rp-contact { display: flex; gap: 4mm; align-items: flex-start; margin-top: 8mm; padding: 5mm; background: var(--p-soft); }
.rp-contact svg { width: 8mm; height: 10mm; color: #E5532B; flex: none; }
.rp-contact div { display: flex; flex-direction: column; gap: 0.6mm; font-size: 8.8pt; }
.rp-contact span { color: #3A4147; }
.rp-toc { margin: 0 0 4mm; padding: 0 !important; list-style: none; }
.rp-toc li { margin: 0 !important; }
.rp-toc a { display: flex; align-items: baseline; gap: 2mm; padding: 1.5mm 0; color: #1B1F23; text-decoration: none; font-size: 10pt; }
.rp-toc a i { flex: 1; border-bottom: 0.3mm dotted #B8C0C7; }
.rp-toc a b { font-family: var(--font-mono); font-size: 8.5pt; font-weight: 400; }
.rp-toc__sub a { padding: 0.7mm 0 0.7mm 6mm; font-size: 8.8pt; color: #3A4147; }

@media print {
  @page { size: A4; margin: 0; }
  body.rp-open { overflow: visible; background: #fff; }
  body.rp-open > *:not(.rp):not(svg) { display: none !important; }
  body.rp-open .rp { position: static; display: block; background: none; }
  body.rp-open .rp-bar, body.rp-open .rp-side { display: none; }
  body.rp-open .rp-body, body.rp-open .rp-scroll { display: block; overflow: visible; padding: 0; }
  body.rp-open .rp-pages { display: block; width: auto; zoom: 1 !important; }
  body.rp-open .rp-page { height: 296.6mm; box-shadow: none; }
  body.rp-open .rp-page:not(:last-child) { break-after: page; }
}
.kp-crumbs li { font-size: var(--t-xs); }
.campus-small + .kp-info { padding-top: clamp(2.5rem, 6vw, 5rem); }
.campus-small { display: none; }
@media (max-width: 1023px) {
  .campus { display: none; }
  .campus-small { display: block; padding: clamp(3rem, 10vw, 5rem) 0; }
  .campus-small h1, .campus-small h2 { margin-top: 0.75rem; font-size: var(--t-xl); }
  .campus-small .lead { margin-top: 1.25rem; }
}

/* --- 9b. Interaktives Lagebild ------------------------------------------ */

/* Ohne JS bleibt die lesbare Liste; mit JS erscheint das drehbare Gelände. */
.gelaende__stage, .gelaende__panel { display: none; }
.gelaende[data-enhanced] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--gap);
  align-items: stretch;
}
.gelaende[data-enhanced] .gelaende__stage,
.gelaende[data-enhanced] .gelaende__panel { display: flex; }
.gelaende[data-enhanced] .gelaende__list { display: none; }

.gelaende__stage {
  position: relative;
  flex-direction: column;
  min-height: clamp(26rem, 64vh, 46rem);
  background: var(--corners), var(--bg-2);
  overflow: hidden;
}
.gelaende__stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.gelaende__stage canvas.is-grabbing { cursor: grabbing; }
.gelaende__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.gelaende__badge span { color: var(--signal); }
/* die Ebene selbst lässt Ziehen zum Drehen durch, einzelne Marker schaltet gelaende.js klickbar */
.gelaende__markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* Touch: senkrecht wischen scrollt die Seite, waagerecht dreht das Modell */
@media (pointer: coarse) { .fpv__stage canvas, .gelaende__stage canvas { touch-action: pan-y; } }

.gmark {
  position: absolute;
  top: 0;
  left: 0;
  margin: -10px 0 0 -10px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
  transition: opacity 0.3s var(--ease);
  will-change: transform;
}
.gmark__dot {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(229, 83, 43, 0.7);
  background: rgba(var(--bg-rgb), 0.45);
}
.gmark__dot::before, .gmark__dot::after { content: ""; position: absolute; background: var(--signal); }
.gmark__dot::before { left: 50%; top: 3px; bottom: 3px; width: 1px; margin-left: -0.5px; }
.gmark__dot::after { top: 50%; left: 3px; right: 3px; height: 1px; margin-top: -0.5px; }
.gmark__no {
  position: absolute;
  left: 26px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-2);
}
.gmark__label {
  margin-left: 1.4rem;
  padding: 0.25rem 0.5rem;
  background: rgba(var(--bg-rgb), 0.82);
  border-left: 1px solid var(--signal);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.gmark:hover .gmark__label { opacity: 1; }
/* Der aktive Punkt steht mit Titel im Panel; sein Label würde nur die
   Callouts der Szene überdecken. */
.gmark.is-active .gmark__label { display: none; }
.gmark:hover .gmark__no, .gmark.is-active .gmark__no { opacity: 0; }
/* Der aktive Punkt wird zum kleinen, offenen Fadenkreuz, damit er die Szene nicht überdeckt */
.gmark.is-active .gmark__dot { width: 12px; height: 12px; margin: 4px; background: transparent; box-shadow: 0 0 0 3px rgba(229, 83, 43, 0.14); }
.gmark:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }

.gelaende__panel {
  flex-direction: column;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.gelaende__panel h3 { margin-top: 0.5rem; font-size: var(--t-lg); font-weight: 400; }
.gelaende__lead { font-size: var(--t-md); font-weight: 400; line-height: 1.25; }
.gelaende__muted { margin-top: 1rem; color: var(--fg-3); font-size: 0.9375rem; }
.gelaende__hint-line { margin-top: auto; padding-top: 1.5rem; }

.gfield { margin-top: 1.4rem; padding-left: 1rem; border-left: 2px solid var(--line-2); }
.gfield p { font-size: 0.9375rem; color: var(--fg-2); }
.gfield__tag { display: block; margin-bottom: 0.4rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.gfield--risk { border-color: var(--signal); }
.gfield--risk .gfield__tag { color: var(--signal); }
.gfield--fix[data-on] { border-color: var(--green); }
.gfield--fix[data-on] .gfield__tag { color: var(--green); }

.gelaende__actions { margin-top: auto; padding-top: 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gelaende__nav { display: flex; gap: 0.4rem; }
.gnav { width: 2.5rem; height: 2.5rem; border: 1px solid var(--line-2); background: transparent; color: var(--fg); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: border-color 0.2s var(--ease), color 0.2s var(--ease); }
.gnav:hover { border-color: var(--fg); color: var(--signal-2); }

/* Lesbare Liste als Grundlage und als Fallback ohne JavaScript */
.gelaende__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.gelaende__list article { padding: clamp(1.25rem, 2.5vw, 2rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gelaende__list .code { display: block; margin-bottom: 0.75rem; }
.gelaende__list h3 { font-size: var(--t-md); font-weight: 500; }
.gelaende__list .hs-risk, .gelaende__list .hs-fix { margin-top: 1rem; padding-left: 1rem; border-left: 2px solid var(--line-2); }
.gelaende__list .hs-risk { border-color: var(--signal); }
.gelaende__list .hs-fix { border-color: var(--green); }
.gelaende__list p { font-size: 0.9375rem; }
.gelaende__list .hs-risk::before, .gelaende__list .hs-fix::before {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.gelaende__list .hs-risk::before { content: "Schwachstelle"; color: var(--signal); }
.gelaende__list .hs-fix::before { content: "Maßnahme"; color: var(--green); }

@media (max-width: 899px) {
  .gelaende[data-enhanced] { grid-template-columns: 1fr; gap: 0.75rem; }
  .gelaende__stage { min-height: clamp(20rem, 52vh, 30rem); }
  .gelaende__list { grid-template-columns: 1fr; }
  /* Gestapelt liegt das Panel unter dem Gelände. Der Umschalter zur Maßnahme
     und die Navigation rücken an den Anfang des Panels, direkt unter die
     Darstellung, damit niemand erst zum Ende des Textes scrollen muss. */
  .gelaende__actions {
    order: -1;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .gelaende__actions .btn { flex: 1 1 auto; justify-content: center; }
  .gelaende__actions + .code, .gelaende__actions ~ .code { margin-top: 1.25rem; }
  /* Kleinere Marker auf schmalen Schirmen */
  .gmark { margin: -8px 0 0 -8px; }
  .gmark__dot { width: 16px; height: 16px; }
  .gmark__no { left: 22px; }
  .gmark.is-active .gmark__dot { width: 10px; height: 10px; margin: 3px; }
}

/* --- 9e. Visitenkarte ------------------------------------------------------ */
/* Die Karte im Format 85 × 55 mm, auf dem Telefon hochkant. Schriftgrößen in
   Anteilen der Kartenbreite (cqw), damit der Satz wie gedruckt mitskaliert. */
.vk { border-bottom: 1px solid var(--line); background: radial-gradient(ellipse 60% 55% at 50% 42%, var(--glow) 0%, var(--bg) 75%); }
.vk__inner { display: grid; justify-items: center; align-content: center; gap: clamp(2rem, 5vh, 3rem); min-height: calc(100svh - var(--header-h)); padding-top: clamp(2.5rem, 8vh, 5rem); padding-bottom: clamp(2.5rem, 8vh, 5rem); }

.vk-stage { display: flex; align-items: center; justify-content: center; width: 100%; }
.vk-card { width: min(100%, 36rem); aspect-ratio: 85 / 55; container-type: inline-size; perspective: 1600px; }
.vk-card__turn { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.3, 0.7, 0.2, 1); }
.vk-card[data-turned] .vk-card__turn { transform: rotateY(180deg); }
.vk-face { position: absolute; inset: 0; display: grid; padding: 7cqw; border-radius: 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.35), 0 12px 24px -8px rgba(0, 0, 0, 0.55), 0 40px 70px -24px rgba(0, 0, 0, 0.75); }

/* Vorderseite: Papier, dunkle Schrift */
.vk-face--front {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; column-gap: 5cqw;
  color: #15181B;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #F1EFEA;
}
.vk-brand { display: flex; align-items: center; gap: 2.2cqw; margin: 0; grid-column: 1 / -1; }
.vk-brand__mark { width: 5.6cqw; height: 7cqw; color: currentColor; }
.vk-brand__word { display: flex; flex-direction: column; font-family: var(--font-display); font-size: 3cqw; font-weight: 600; letter-spacing: 0.1em; line-height: 1.05; text-transform: uppercase; }
.vk-brand__word span { font-size: 0.62em; font-weight: 500; letter-spacing: 0.32em; opacity: 0.7; }
.vk-person { align-self: end; }
.vk-person h1 { font-family: var(--font-display); font-size: 5.6cqw; font-weight: 500; letter-spacing: -0.005em; line-height: 1.05; color: inherit; }
.vk-person p { margin-top: 1.3cqw; font-family: var(--font-display); font-size: 2.1cqw; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #6A7178; }
.vk-person::after { content: ""; display: block; width: 6cqw; height: 2px; margin-top: 2.6cqw; background: var(--signal); }
.vk-lines { align-self: end; margin: 0; padding: 0; list-style: none; font-size: 2.45cqw; line-height: 1.75; }
.vk-lines li { display: grid; grid-template-columns: 3.4cqw auto; }
.vk-lines span { font-family: var(--font-display); font-weight: 600; color: var(--signal); }
.vk-lines a { color: inherit; text-decoration: none; }
.vk-lines a:hover, .vk-lines a:focus-visible { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 0.2em; }
.vk-address { grid-column: 1 / -1; margin-top: 4.5cqw; padding-top: 2.2cqw; border-top: 1px solid rgba(21, 24, 27, 0.14); font-size: 1.7cqw; font-style: normal; letter-spacing: 0.02em; color: #6A7178; }

/* Rückseite: Markenfarbe, Logo, QR-Code zur Weitergabe */
.vk-face--back {
  transform: rotateY(180deg);
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; column-gap: 5cqw;
  color: #E9ECEF;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .04 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #111418;
  box-shadow: inset 0 0 0 1px rgba(233, 236, 239, 0.08), 0 1px 1px rgba(0, 0, 0, 0.35), 0 12px 24px -8px rgba(0, 0, 0, 0.55), 0 40px 70px -24px rgba(0, 0, 0, 0.75);
}
.vk-brand--light { grid-column: 1; align-self: center; gap: 3cqw; }
.vk-brand--light .vk-brand__mark { width: 9cqw; height: 11.3cqw; }
.vk-brand--light .vk-brand__word { font-size: 4.4cqw; }
.vk-back__claim { grid-column: 1; align-self: end; margin: 0; font-family: var(--font-display); font-size: 1.9cqw; font-weight: 500; letter-spacing: 0.18em; line-height: 1.7; text-transform: uppercase; color: #8A939B; }
.vk-back__qr { grid-column: 2; grid-row: 1 / -1; align-self: end; width: 24cqw; padding: 1.4cqw; background: #F1EFEA; color: #15181B; }
.vk-back__qr svg { display: block; width: 100%; height: auto; fill: currentColor; }

:root[data-theme="light"] .vk { background: radial-gradient(ellipse 60% 55% at 50% 42%, #ECEAE5 0%, #D6D3CD 80%); }
:root[data-theme="light"] .vk-face { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 12px 24px -10px rgba(0, 0, 0, 0.25), 0 36px 60px -26px rgba(0, 0, 0, 0.35); }

/* Unter der Karte: speichern, wenden, teilen */
.vk-actions { display: grid; justify-items: center; gap: 1.1rem; width: min(100%, 36rem); }
.vk-save { width: 100%; }
.vk-apps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; width: 100%; }
.vk-apps a { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.8rem 0.25rem 0.65rem; border: 1px solid var(--line-2); color: var(--fg); font-family: var(--font-display); font-size: 0.8125rem; font-weight: 500; text-decoration: none; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.vk-apps svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.vk-apps a:hover, .vk-apps a:focus-visible { border-color: var(--fg-3); background: rgba(var(--fg-rgb), 0.04); }
.vk-apps a:active { background: rgba(var(--fg-rgb), 0.08); }
.vk-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; margin: 0; }
.vk-legal { display: none; }
.vk-textbtn { padding: 0.2rem 0; border: 0; border-bottom: 1px solid var(--line-2); background: none; color: var(--fg-2); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.vk-textbtn:hover, .vk-textbtn:focus-visible { color: var(--fg); border-color: var(--signal); }

/* Telefon: Karte hochkant */
@media (max-width: 599px) {
  html:has(.vk), body:has(.vk) { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body:has(.vk) .site-header, body:has(.vk) .site-footer { display: none; }
  body:has(.vk) main { height: 100vh; height: 100dvh; }
  .vk { height: 100%; border-bottom: 0; }
  .vk__inner { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 0.8rem; padding: max(0.9rem, env(safe-area-inset-top)) 1rem max(0.7rem, env(safe-area-inset-bottom)); }
  .vk-stage { flex: 1 1 0; min-height: 0; }
  .vk-card { width: auto; height: min(100%, calc((100vw - 2rem) * 85 / 55), 38rem); max-width: 100%; aspect-ratio: 55 / 85; }
  .vk-face { padding: 9cqw; }
  .vk-face--front { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; }
  .vk-brand__mark { width: 9cqw; height: 11.3cqw; }
  .vk-brand { gap: 3.5cqw; }
  .vk-brand__word { font-size: 4.8cqw; }
  .vk-person h1 { font-size: 9.6cqw; }
  .vk-person p { margin-top: 2.2cqw; font-size: 3.5cqw; }
  .vk-person::after { width: 10cqw; margin-top: 4.5cqw; }
  .vk-lines { margin-top: 7cqw; font-size: 4.3cqw; }
  .vk-lines li { grid-template-columns: 6cqw auto; }
  .vk-address { margin-top: 7cqw; padding-top: 3.5cqw; font-size: 3.1cqw; line-height: 1.5; }
  .vk-face--back { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; justify-items: center; text-align: center; }
  .vk-brand--light { flex-direction: column; margin-top: 10cqw; gap: 4cqw; }
  .vk-brand--light .vk-brand__mark { width: 14cqw; height: 17.6cqw; }
  .vk-brand--light .vk-brand__word { align-items: center; font-size: 6.4cqw; }
  .vk-back__claim { grid-row: 2; align-self: center; font-size: 3.2cqw; }
  .vk-back__qr { grid-column: 1; grid-row: 3; justify-self: center; width: 46cqw; padding: 2.6cqw; }
  .vk-actions { width: 100%; gap: 0.65rem; }
  .vk-save { min-height: 2.9rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .vk-apps { gap: 0.4rem; }
  .vk-apps a { gap: 0.3rem; padding: 0.6rem 0.1rem 0.5rem; font-size: 0.6875rem; }
  .vk-apps svg { width: 1.3rem; height: 1.3rem; }
  .vk-more { gap: 0.3rem 1.1rem; }
  .vk-more .vk-textbtn { font-size: 0.8125rem; }
  .vk-legal { display: inline; }
  .vk-lines { font-size: max(4.3cqw, 0.7rem); }
  .vk-address { font-size: max(3.1cqw, 0.625rem); }
}
@media (prefers-reduced-motion: reduce) { .vk-card__turn { transition: none; } }
@media print {
  .vk { background: none; }
  .vk-actions, .vk-face--back { display: none; }
  .vk-face { box-shadow: none; border: 1px solid #ccc; }
}

/* --- 9f. Labs -------------------------------------------------------------- */
/* Große Karte für das Hauptstück, darunter Karten wie bei den Leistungen,
   geplante Werkzeuge als ruhiges Raster mit Status. */
.lab-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem var(--gap); margin-bottom: clamp(3.5rem, 7vw, 6rem); color: inherit; text-decoration: none; }
.lab-feature:hover { color: inherit; }
.lab-feature__shot { overflow: hidden; }
.lab-feature__shot img { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: cover; transition: transform 0.6s var(--ease); }
.lab-feature:hover .lab-feature__shot img { transform: scale(1.02); }
.lab-feature__body { display: flex; flex-direction: column; align-items: flex-start; }
.lab-tag { margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal-2); }
.lab-feature h3 { margin-top: 0.75rem; font-size: var(--t-lg); font-weight: 400; transition: color 0.2s var(--ease); }
.lab-feature:hover h3 { color: var(--fg); }
.lab-feature__body > p:not(.lab-tag):not(.lab-note) { margin-top: 1rem; color: var(--fg-2); }
.lab-feature .ticks { align-self: stretch; margin-top: 1.5rem; }
.lab-go { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 1.75rem; color: var(--fg); font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; }
.lab-note { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--fg-3); }
.lab-feature--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.lab-feature--flip .lab-feature__shot { order: 2; }
@media (max-width: 899px) {
  .lab-feature { grid-template-columns: 1fr; }
  .lab-feature .service__media { aspect-ratio: 16 / 9; }
  .lab-feature--flip { grid-template-columns: 1fr; }
  .lab-feature--flip .lab-feature__shot { order: 0; }
}

.lab-ideas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); background: var(--line); }
.lab-idea { display: flex; flex-direction: column; gap: 0.8rem; padding: clamp(1.25rem, 2.5vw, 2rem); background: var(--bg); }
.lab-idea__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.lab-idea__state { padding: 0.1rem 0.45rem; border: 1px solid var(--line-2); }
.lab-idea h3 { font-size: var(--t-md); font-weight: 500; color: var(--fg); }
.lab-idea p:last-child { margin: 0; font-size: var(--t-sm); line-height: 1.6; color: var(--fg-2); }
.lab-ideas__foot { margin-top: 2rem; color: var(--fg-2); }
@media (max-width: 999px) { .lab-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .lab-ideas { grid-template-columns: 1fr; } }

/* --- 9g. Kamera-Planer ----------------------------------------------------- */
/* Aufbau wie beim Standortmodell. Plan und Modell bleiben hell wie Papier,
   Kameras und Richtungsgriff liegen als Schaltflächen über dem Bild. */
.kp-stage { background: #CDD7DE; }
.kp-stage canvas.kp-gl { pointer-events: none; }
.kp[data-tool="cam"] .kp-ui, .kp[data-tool="rect"] .kp-ui, .kp[data-tool="poly"] .kp-ui, .kp[data-tool="scale"] .kp-ui { cursor: crosshair; }
.kp-markers { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.kp-cam { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -0.8rem 0 0 -0.8rem; padding: 0; border: 2px solid var(--signal); border-radius: 50%; background: #15181B; color: #fff; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; cursor: move; pointer-events: auto; touch-action: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); will-change: transform; }
.kp-cam:hover { background: #2B2F33; }
.kp-cam.is-sel { border-color: #fff; background: var(--signal); }
.kp-dir { position: absolute; top: 0; left: 0; width: 1.35rem; height: 1.35rem; margin: -0.675rem 0 0 -0.675rem; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--signal); cursor: grab; pointer-events: auto; touch-action: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); will-change: transform; }
.kp-dir::before { content: ""; position: absolute; inset: 0; width: 0; height: 0; margin: auto; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid #fff; transform: rotate(var(--a, 0rad)); }
.kp-dir:active { cursor: grabbing; }
.kp-views { position: absolute; z-index: 3; top: 1rem; right: 1.25rem; display: flex; border: 1px solid var(--line-2); background: rgba(var(--bg-rgb), 0.8); }
.kp-views button { padding: 0.35rem 0.7rem; border: 0; background: none; color: var(--fg-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.kp-views button + button { border-left: 1px solid var(--line-2); }
.kp-views button:hover { color: var(--fg); }
.kp-views button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.kp-help { max-width: calc(100% - 20rem); overflow: hidden; text-overflow: ellipsis; }
.kp-legend { position: absolute; z-index: 3; right: 1.25rem; bottom: 1.1rem; display: grid; gap: 0.3rem; margin: 0; padding: 0.55rem 0.7rem; background: rgba(var(--bg-rgb), 0.8); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); pointer-events: none; }
.kp-legend div { display: grid; grid-template-columns: 0.8rem 1fr auto; align-items: center; gap: 0.55rem; }
.kp-legend div::before { content: ""; width: 0.8rem; height: 0.55rem; background: var(--c); }
.kp-legend dd { margin: 0; color: var(--fg-3); }
.kp-toast { position: absolute; z-index: 5; top: 3.4rem; left: 1.25rem; max-width: min(30rem, 55%); margin: 0; padding: 0.6rem 0.9rem; border-left: 2px solid var(--signal); background: rgba(var(--bg-rgb), 0.94); font-size: 0.875rem; line-height: 1.45; color: var(--fg); }
.kp-toast[hidden], .kp-drop[hidden], .kp-busy[hidden] { display: none; }
.kp[data-state="empty"] .kp-views, .kp[data-state="empty"] .kp-legend, .kp[data-state="empty"] .kp-help { display: none; }
.kp-drop { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; overflow: auto; padding: 2rem; background: radial-gradient(ellipse at 50% 42%, var(--glow) 0%, var(--bg) 72%); }
.kp-drop__box { max-width: 33rem; padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px dashed var(--line-2); background: rgba(var(--bg-rgb), 0.55); transition: border-color 0.2s var(--ease); }
.kp-drop__box h2 { margin-top: 0.7rem; font-size: var(--t-lg); font-weight: 400; line-height: 1.1; }
.kp-drop__box > p:not(.code):not(.kp-note):not(.kp-drop__or) { margin-top: 0.9rem; color: var(--fg-2); }
.kp-drop__box .kp-actions { margin-top: 1rem; }
.kp-stage.is-drop .kp-drop__box { border-color: var(--signal); }
.kp-stage.is-drop::after { content: "Plan loslassen"; position: absolute; inset: 0.75rem; z-index: 6; display: grid; place-items: center; border: 2px dashed var(--signal); background: rgba(var(--bg-rgb), 0.72); color: var(--fg); font-family: var(--font-mono); font-size: var(--t-sm); letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; }
.kp-busy { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 0.9rem; background: rgba(var(--bg-rgb), 0.82); }
.kp-nogl { display: none; }
.kp[data-nogl] .kp-nogl { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; padding: 2rem; background: var(--bg); color: var(--fg-2); text-align: center; }

.kp-search { display: grid; margin-top: 0.4rem; }
.kp-search .kp-field { margin-top: 0.8rem; }
.kp-search__row { display: flex; align-items: flex-end; gap: 0.6rem; }
.kp-search__row .kp-field { flex: 1; }
.kp-search__row .cp-btn { padding: 0.66rem 0.9rem; }
.kp-results { max-height: 14rem; margin: 0.7rem 0 0; padding: 0; overflow: auto; list-style: none; border: 1px solid var(--line-2); }
.kp-results[hidden] { display: none; }
.kp-results button { display: block; width: 100%; padding: 0.55rem 0.7rem; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); color: var(--fg); font: inherit; font-size: 0.8125rem; line-height: 1.4; text-align: left; cursor: pointer; }
.kp-results li:last-child button { border-bottom: 0; }
.kp-results button:hover, .kp-results button:focus-visible { outline: 0; background: var(--bg-3); }
.kp-drop__or { display: flex; align-items: center; gap: 0.8rem; margin: 1.6rem 0 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.kp-drop__or::before, .kp-drop__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kp-note a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
.kp-attr { position: absolute; z-index: 3; right: 1.25rem; bottom: 0.35rem; display: none; margin: 0; font-size: 0.625rem; color: var(--fg-3); }
.kp-attr a { color: inherit; }
.kp[data-src="osm"] .kp-attr { display: block; }
.kp[data-src="osm"] .kp-legend { bottom: 1.6rem; }

/* Vorschau und Kamerablick */
.kp[data-view="cam"] .kp-markers { display: none; }
.kp[data-view="cam"] .kp-ui { cursor: grab; }
.kp-panel .campus__tabs button { gap: 0.3rem; padding-right: 0.1rem; padding-left: 0.1rem; letter-spacing: 0.04em; }
.kp-pip { position: absolute; z-index: 3; top: 3.3rem; right: 1.25rem; width: clamp(14rem, 27%, 21rem); aspect-ratio: 16 / 9; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); pointer-events: none; }
.kp-pip[hidden], .kp-camhud[hidden], .kp-camhud__p[hidden], .kp-pv[hidden] { display: none; }
.kp-pip__open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; pointer-events: auto; }
.kp-pip__open:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.kp-pip__label { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0.3rem 0.5rem; background: rgba(21, 24, 27, 0.72); color: #fff; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
.kp-pip__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-pip__label em { font-style: normal; color: #F4A58E; white-space: nowrap; }
.kp-camhud { position: absolute; z-index: 3; pointer-events: none; }
.kp-camhud::before, .kp-camhud::after { content: ""; position: absolute; top: 50%; left: 50%; background: rgba(255, 255, 255, 0.8); }
.kp-camhud::before { width: 1.6rem; height: 1px; margin-left: -0.8rem; }
.kp-camhud::after { width: 1px; height: 1.6rem; margin-top: -0.8rem; }
.kp-camhud__t { position: absolute; top: 0.75rem; left: 0.75rem; max-width: calc(100% - 19rem); margin: 0; padding: 0.35rem 0.6rem; background: rgba(21, 24, 27, 0.72); color: #fff; font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.5; letter-spacing: 0.03em; }
.kp-camhud__p { position: absolute; top: 3.6rem; left: 0.75rem; max-width: calc(100% - 1.5rem); margin: 0; padding: 0.4rem 0.7rem 0.4rem 0.75rem; border-left: 3px solid var(--c, #8A8F96); background: rgba(21, 24, 27, 0.8); color: #fff; font-size: 0.8125rem; line-height: 1.4; }
.kp-camhud__btns { position: absolute; top: 0.75rem; right: 0.75rem; display: flex; gap: 0.4rem; pointer-events: auto; }
.kp-camhud__btns button { padding: 0.35rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.6); background: rgba(21, 24, 27, 0.72); color: #fff; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.kp-camhud__btns button:hover { border-color: #fff; }
.kp-camhud__btns button[aria-pressed="true"] { border-color: var(--signal); background: var(--signal); }
/* Testperson und Bereiche im Bild */
.kp-person { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: -0.75rem 0 0 -0.75rem; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #2966D1; color: #fff; cursor: move; pointer-events: auto; touch-action: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); will-change: transform; }
.kp-person svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
.kp-zone { position: absolute; top: 0; left: 0; padding: 0.2rem 0.45rem; border: 1px solid #C8322A; background: rgba(255, 255, 255, 0.92); color: #9A241C; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.04em; white-space: nowrap; cursor: pointer; pointer-events: auto; translate: -50% -50%; will-change: transform; }
.kp-zone.is-ok { border-color: #1D8F6A; color: #146B50; }
.kp-zone.is-sel { background: #C8322A; color: #fff; }
.kp-zone.is-ok.is-sel { background: #1D8F6A; }
.kp-checks { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 0.8rem; }
.kp-dot { display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.45rem; border-radius: 50%; background: var(--c); vertical-align: 0.02em; }
.kp-pv, .kp-zres { margin-top: 0.9rem; padding: 0.55rem 0.7rem; border-left: 3px solid var(--c, var(--line-2)); background: var(--bg-2); font-size: 0.8125rem; line-height: 1.45; color: var(--fg); }
.kp-zres { border-left-color: #C8322A; }
.kp-zres.is-ok { border-left-color: #1D8F6A; }
.kp-pct { color: #C8322A; }
.kp-pct.is-ok { color: #1D8F6A; }

.kp-panel [data-panel] { padding-top: 1.1rem; }
.kp-steps { display: grid; gap: 1px; margin: 1.1rem 0 0; padding: 0; list-style: none; counter-reset: kp; border: 1px solid var(--line); background: var(--line); }
.kp-steps li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.1rem 0.6rem; padding: 0.7rem 0.8rem; background: var(--bg); font-size: 0.8125rem; line-height: 1.45; color: var(--fg-2); counter-increment: kp; }
.kp-steps li::before { content: counter(kp, decimal-leading-zero); grid-row: span 2; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--signal); }
.kp-steps strong { font-weight: 500; color: var(--fg); }
.kp-p { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--fg-2); }
.kp-note { margin-top: 0.8rem; font-size: 0.75rem; line-height: 1.5; color: var(--fg-3); }
.kp-ok, .kp-warn { margin-top: 0.6rem; padding-left: 0.65rem; border-left: 2px solid var(--ok); font-size: 0.8125rem; line-height: 1.45; color: var(--fg-2); }
.kp-warn { border-left-color: var(--sev-m); }
.kp-actions, .kp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.kp-actions .cp-btn, .kp-tools .cp-btn { padding: 0.6rem 0.8rem; }
.kp-tools .kp-check { margin-left: auto; }
.kp-tools .cp-btn--main::after { content: none; }
.cp-btn.is-on { border-color: var(--signal); color: var(--signal); }
.cp-btn--main.is-on { background: none; color: var(--signal); }
.kp-file { position: relative; display: inline-flex; align-items: center; }
.kp-file input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.kp-file:focus-within { outline: 2px solid var(--signal); outline-offset: 2px; }
.kp-sec { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.kp-edit { margin-top: 1.1rem; padding: 1rem; border: 1px solid var(--line-2); background: var(--bg); }
.kp-sec h3, .kp-edit h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); }
.kp-sec h3 span, .kp-edit h3 span { color: var(--fg-3); letter-spacing: 0.06em; }
.kp-field { display: grid; gap: 0.35rem; margin-top: 0.9rem; font-size: 0.8125rem; color: var(--fg-2); }
.kp-field > span:first-child { display: flex; justify-content: space-between; gap: 1rem; }
.kp-field output { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg); }
.kp-field input[type="text"], .kp-field input[type="number"], .kp-field input[type="search"], .kp-field select { width: 100%; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--line-2); border-radius: 0; background: var(--bg-2); color: var(--fg); font: inherit; font-size: 0.875rem; }
.kp-field input:focus-visible, .kp-field select:focus-visible { outline: 0; border-color: var(--signal); }
.kp-field input[type="range"] { width: 100%; margin: 0.2rem 0 0; accent-color: var(--signal); }
.kp-in { display: flex; align-items: center; }
.kp-field .kp-in input { flex: 1 1 auto; width: auto; }
.kp-in em { padding: 0 0.2rem 0 0.6rem; font-family: var(--font-mono); font-size: 0.75rem; font-style: normal; color: var(--fg-3); }
.kp-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--fg-2); cursor: pointer; }
.kp-check input { margin: 0; accent-color: var(--signal); }
.kp-list { margin: 1.1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.kp-item { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; width: 100%; padding: 0.6rem 0.4rem; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; transition: background 0.2s var(--ease); }
.kp-item:hover { background: var(--bg-3); }
.kp-item.is-sel { background: var(--bg-3); box-shadow: inset 2px 0 0 var(--signal); }
.kp-item__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-item__n, .kp-item__m { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }
.kp-item__n--cam { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1.5px solid var(--signal); border-radius: 50%; color: var(--fg); }
.kp-ranges { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 1rem 0 0; border: 1px solid var(--line); background: var(--line); }
.kp-ranges div { padding: 0.5rem 0.6rem; border-left: 3px solid var(--c); background: var(--bg-2); }
.kp-ranges dt { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.kp-ranges dd { margin: 0.2rem 0 0; font-size: 0.8125rem; font-weight: 500; color: var(--fg); }
.kp-bars { display: grid; gap: 0.8rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.kp-bars li { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; font-size: 0.8125rem; }
.kp-bars__n { color: var(--fg); }
.kp-bars__v { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); }
.kp-bars__b { grid-column: 1 / -1; height: 0.4rem; background: var(--bg-3); }
.kp-bars__b i { display: block; height: 100%; background: var(--c); }
.kp-table { width: 100%; margin-top: 0.8rem; border-collapse: collapse; font-size: 0.75rem; }
.kp-table th { padding: 0.4rem 0.3rem; border-bottom: 1px solid var(--line-2); font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 400; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; color: var(--fg-3); }
.kp-table td { padding: 0.45rem 0.3rem; border-bottom: 1px solid var(--line); color: var(--fg-2); }
.kp-table td:first-child { font-family: var(--font-mono); color: var(--fg); }
.kp-table td span { display: block; margin-top: 0.15rem; font-family: var(--font-mono); font-size: 0.625rem; color: var(--fg-3); }
.kp-table td:last-child, .kp-table th:last-child { text-align: right; white-space: nowrap; }

/* --- 9h. Standort-Schnellcheck ------------------------------------------- */
/* Suche im Seitenkopf, darunter Karte und Befunde nebeneinander, auf dem Handy untereinander. */
.sc-search { grid-column: 1 / span 8; }
.sc-form { display: flex; align-items: flex-end; gap: 0.75rem; }
.sc-form__field { display: grid; flex: 1; gap: 0.45rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.sc-form__field input { width: 100%; min-width: 0; min-height: 3.125rem; padding: 0.75rem 1rem; border: 1px solid var(--line-2); border-radius: 0; background: rgba(var(--bg-rgb), 0.86); color: var(--fg); font-family: var(--font-text); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.sc-form__field input:focus { outline: none; border-color: var(--signal); }
.sc-status { margin: 0.9rem 0 0; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg-2); }
.sc-status.is-err { color: var(--sev-h, #E0533C); }
.sc-status[hidden], .sc-choices[hidden] { display: none; }
.sc-choices { margin: 0.7rem 0 0; padding: 0; list-style: none; border: 1px solid var(--line-2); background: rgba(var(--bg-rgb), 0.92); }
.sc-choices button { display: block; width: 100%; padding: 0.6rem 0.8rem; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
.sc-choices li:last-child button { border-bottom: 0; }
.sc-choices button:hover, .sc-choices button:focus-visible { outline: 0; background: var(--bg-3); }
.sc-privacy { margin: 0.9rem 0 0; font-size: var(--t-sm); color: var(--fg-3); }
.sc-privacy a { color: inherit; }
.sc-out { scroll-margin-top: calc(var(--header-h) + 1rem); }
.sc-out[hidden] { display: none; }
.sc-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 2rem var(--gap); align-items: start; }
.sc-map { position: sticky; top: calc(var(--header-h) + 1.5rem); margin: 0; }
.sc-map__canvas { position: relative; aspect-ratio: 1; border: 1px solid var(--line); background: #EFEEE9; }
.sc-map__canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.8rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.sc-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.sc-legend span::before { content: ""; width: 0.8rem; height: 0.55rem; background: var(--c); }
.sc-legend .is-dot::before { width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.sc-legend .is-line::before { height: 0.2rem; }
.sc-attr { margin: 0.5rem 0 0; font-size: 0.6875rem; color: var(--fg-3); }
.sc-attr a { color: inherit; }
.sc-report h2 { font-size: var(--t-lg); }
.sc-facts { display: grid; gap: 1px; margin: 0.8rem 0 0; border: 1px solid var(--line); background: var(--line); }
.sc-facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 0.65rem 0.8rem; background: var(--bg); }
.sc-facts dt { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); padding-top: 0.15rem; }
.sc-facts dd { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--fg); }
.sc-sum { margin-top: 1.5rem; }
.sc-sum__line { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.sc-sum__line span { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.3rem 0.7rem; border: 1px solid var(--c); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.sc-sum__line strong { font-size: 1.125rem; font-weight: 500; color: var(--c); }
.sc-sum__text { margin: 0.8rem 0 0; color: var(--fg-2); }
.sc-list { margin: 1.5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.sc-item { border-bottom: 1px solid var(--line); }
.sc-item__head { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; width: 100%; padding: 0.85rem 0.3rem; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: background 0.2s var(--ease); }
.sc-item__head:hover, .sc-item.is-open .sc-item__head { background: var(--bg-2); }
.sc-chip { justify-self: start; padding: 0.15rem 0.45rem; border: 1px solid var(--c, var(--line-2)); color: var(--c, var(--fg-3)); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sc-item__t { font-weight: 500; }
.sc-item__f { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); text-align: right; }
.sc-item__body { padding: 0 0.3rem 1.1rem calc(5.2rem + 1.1rem); }
.sc-item__body[hidden] { display: none; }
.sc-item__body p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.sc-item__body .sc-item__act { margin-top: 0.7rem; padding-left: 0.75rem; border-left: 2px solid var(--c, var(--line-2)); }
.sc-item__act strong { font-weight: 500; color: var(--fg); }
.sc-next { margin-top: 2rem; }
/* der Kamera-Planer läuft erst ab 1024 px Breite */
@media (max-width: 1023px) { .sc-desk { display: none; } }
.sc-print { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.sc-note { margin-top: 1.5rem; font-size: var(--t-sm); color: var(--fg-3); }
@media (max-width: 999px) {
  .sc-search { grid-column: 1 / -1; }
  .sc-grid { grid-template-columns: 1fr; }
  .sc-map { position: static; }
}
@media (max-width: 599px) {
  .sc-form { flex-direction: column; align-items: stretch; }
  .sc-item__head { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .sc-item__f { grid-column: 2; text-align: left; }
  .sc-item__body { padding-left: 0.3rem; }
  .sc-facts div { grid-template-columns: 1fr; gap: 0.2rem; }
}
@media print {
  .sc-head, .sc-about, .site-footer { display: none !important; }
  .sc-out[hidden] { display: block !important; }
  .sc-grid { grid-template-columns: 1fr; }
  .sc-map { position: static; max-width: 15cm; }
  .sc-item__body[hidden] { display: block !important; }
  .sc-item { break-inside: avoid; }
}

/* --- 10. Formular -------------------------------------------------------- */

.form { display: grid; gap: 1.75rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem var(--gap); }
@media (max-width: 639px) { .form__row { grid-template-columns: 1fr; } }

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.req { color: var(--signal); }
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.7rem 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  transition: border-color 0.2s var(--ease);
}
.field select {
  appearance: none;
  padding-right: 2rem;
  background:
    linear-gradient(45deg, transparent 50%, var(--fg-2) 50%) right 0.55rem center / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--fg-2) 50%) right 0.2rem center / 6px 6px no-repeat;
}
.field select option { background: var(--bg-2); color: var(--fg); }
.field textarea { min-height: 10rem; padding: 0.85rem 1rem; border: 1px solid var(--line-2); resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--fg-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--signal); }
.field ::placeholder { color: var(--fg-3); opacity: 1; }
.hint { margin-top: 0.6rem; font-size: var(--t-sm); color: var(--fg-3); }

.check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.9rem; align-items: start; font-size: 0.9375rem; }
.check input {
  appearance: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.2rem 0 0;
  border: 1px solid var(--fg-3);
  background: transparent;
  cursor: pointer;
}
.check input:checked {
  border-color: var(--signal);
  background:
    linear-gradient(var(--signal), var(--signal)) center / 0.5rem 0.5rem no-repeat;
}
.check input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__status { padding: 1rem 1.25rem; border-left: 2px solid var(--fg-3); background: var(--bg-2); color: var(--fg); font-size: 0.9375rem; }
.form__status[data-state="ok"] { border-color: var(--form-ok); }
.form__status[data-state="error"] { border-color: var(--signal); }

/* --- 10b. Anfrage-Assistent ------------------------------------------------ */
/* Schritte links, Lagebild rechts. Ohne JavaScript erscheinen alle Schritte untereinander. */
.ob { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem var(--gap); align-items: start; }
.ob-side { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 2rem; }
.ob:not([data-ob-ready]) .ob-dots, .ob:not([data-ob-ready]) [data-ob-back], .ob:not([data-ob-ready]) [data-ob-next] { display: none !important; }
.ob:not([data-ob-ready]) .ob-step + .ob-step { margin-top: 3rem; }
.ob-top { display: grid; gap: 1rem; margin-bottom: 2.2rem; }
.ob-top[hidden], .ob-form[hidden], .ob-done[hidden], .ob-nav [hidden], .ob-error[hidden], .ob-handoff[hidden], .ob-summary[hidden] { display: none !important; }
.ob-top .code { margin: 0; }
.ob-top__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ob-call, .ob-mini { display: none; }
.ob-dots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.ob-dots button { display: grid; gap: 0.5rem; width: 100%; padding: 0; border: 0; background: none; color: var(--fg-3); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; cursor: pointer; }
.ob-dots button::before { content: ""; height: 3px; background: var(--line-2); transition: background 0.25s var(--ease); }
.ob-dots button.is-done { color: var(--fg-2); }
.ob-dots button.is-done::before { background: var(--fg-3); }
.ob-dots button.is-cur { color: var(--fg); }
.ob-dots button.is-cur::before { background: var(--signal); }
.ob-dots button:disabled { cursor: default; opacity: 0.55; }
.ob-dots button:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
.ob-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.ob-step legend { padding: 0; font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; line-height: 1.15; color: var(--fg); }
.ob-lead { margin: 0.8rem 0 0; color: var(--fg-2); }
.ob-label { margin: 1.9rem 0 0; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.ob-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.4rem; }
.ob-label + .ob-opts { margin-top: 0.7rem; }
.ob-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ob-opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ob-opt { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-content: start; gap: 0.15rem 0.8rem; padding: 1rem; border: 1px solid var(--line-2); background: var(--bg); cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.ob-opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ob-opt__ico { grid-row: span 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--fg-2); transition: color 0.2s var(--ease); }
.ob-opt__ico svg { width: 1.9rem; height: 1.9rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ob-opt__t { align-self: center; font-weight: 500; line-height: 1.3; color: var(--fg); }
.ob-opt__d { font-size: var(--t-sm); line-height: 1.35; color: var(--fg-3); }
.ob-opt:hover { border-color: var(--fg-3); }
.ob-opt:has(input:checked) { border-color: var(--signal); background: rgba(229, 83, 43, 0.08); }
.ob-opt:has(input:checked) .ob-opt__ico { color: var(--signal); }
.ob-opt:has(input:checked)::after { content: ""; position: absolute; top: 0.6rem; right: 0.6rem; width: 0.5rem; height: 0.5rem; background: var(--signal); }
.ob-opt:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.ob-opts--3:not(.ob-opts--small) .ob-opt { grid-template-columns: 1fr; gap: 0.7rem; padding: 1.1rem 1rem 1rem; }
.ob-opts--3:not(.ob-opts--small) .ob-opt__ico { grid-row: auto; justify-content: start; width: auto; height: 2.6rem; }
.ob-opts--3:not(.ob-opts--small) .ob-opt__ico svg { width: 2.4rem; height: 2.4rem; }
.ob-opts--small .ob-opt { grid-template-columns: 1.9rem minmax(0, 1fr); padding: 0.75rem 0.8rem; }
.ob-opts--small .ob-opt__ico { width: 1.9rem; height: 1.9rem; }
.ob-opts--small .ob-opt__ico svg { width: 1.5rem; height: 1.5rem; }
.ob-step .field { margin-top: 1.5rem; }
.ob-form .form__row, .ob-form .check { margin-top: 1.5rem; }
.ob-aside { margin: 1.4rem 0 0; font-size: var(--t-sm); color: var(--fg-3); }
.ob-link { padding: 0; border: 0; background: none; color: var(--fg); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.ob-link:hover { color: var(--signal); }
.ob-handoff { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 1.2rem; padding: 0.8rem 1rem; border-left: 2px solid var(--signal); background: var(--bg-2); font-size: var(--t-sm); color: var(--fg-2); }
.ob-handoff p { margin: 0; }
.ob-handoff strong { font-weight: 500; color: var(--fg); }
.ob-summary { margin-top: 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--line); background: var(--bg-2); }
.ob-summary .code { margin: 0; }
.ob-summary dl { display: grid; gap: 0.5rem; margin: 0.7rem 0 0; }
.ob-summary dl div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 1rem; font-size: var(--t-sm); }
.ob-summary dt { padding-top: 0.15rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.ob-summary dd { margin: 0; color: var(--fg); }
.ob-summary .ob-link { font-size: 0.75rem; color: var(--fg-3); }
.ob-error { margin: 1.5rem 0 0; padding: 0.8rem 1rem; border-left: 2px solid var(--signal); background: var(--bg-2); font-size: 0.9375rem; color: var(--fg); }
.ob-nav { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.ob-done { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-left: 2px solid var(--form-ok); background: var(--bg-2); }
.ob-done:focus { outline: none; }
.ob-done .code { margin: 0; }
.ob-done h2 { margin-top: 0.7rem; font-size: var(--t-lg); }
.ob-done p:last-child { margin-top: 1rem; color: var(--fg-2); }

/* Lagebild */
.ob-scene { --ob-plate: #1A1E22; --ob-grid: rgba(233, 236, 239, 0.07); --ob-edge: #0E1113; --ob-top: #D5D9DD; --ob-left: #A4ABB2; --ob-right: #858D95; --ob-road: #2A3036; --ob-win: #56606B; --ob-roof: #B06A4F; --ob-roof2: #8E5540; --ob-line: #9AA1A8;
  margin: 0; border: 1px solid var(--line); background: var(--bg-2); }
[data-theme="light"] .ob-scene { --ob-plate: #E7E4DD; --ob-grid: rgba(21, 24, 27, 0.07); --ob-edge: #6F6A62; --ob-top: #FFFFFF; --ob-left: #DDD9D1; --ob-right: #C5C0B6; --ob-road: #D3CFC6; --ob-win: #9FA9B2; --ob-roof: #C98A6E; --ob-roof2: #AD735B; --ob-line: #5E6166; }
.ob-scene__art { padding: 0.5rem; }
.ob-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.ob-scene figcaption { padding: 1rem 1.1rem 1.1rem; border-top: 1px solid var(--line); }
.ob-scene figcaption .code { margin: 0; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.7rem 0 0; padding: 0; list-style: none; }
.ob-chips li { padding: 0.2rem 0.5rem; border: 1px solid var(--line-2); font-size: 0.75rem; color: var(--fg-2); }
.ob-chips .is-empty { border-style: dashed; color: var(--fg-3); }
.ob-scene polygon, .ob-scene polyline, .ob-scene path { stroke-linejoin: round; }
.ob-scene .f-plate { fill: var(--ob-plate); stroke: var(--ob-line); stroke-opacity: 0.35; }
.ob-scene .f-grid { fill: none; stroke: var(--ob-grid); }
.ob-scene .f-road { fill: var(--ob-road); }
.ob-scene .f-t { fill: var(--ob-top); stroke: var(--ob-edge); stroke-width: 0.8; }
.ob-scene .f-l { fill: var(--ob-left); stroke: var(--ob-edge); stroke-width: 0.8; }
.ob-scene .f-r { fill: var(--ob-right); stroke: var(--ob-edge); stroke-width: 0.8; }
.ob-scene .f-wire { fill: none; stroke: var(--fg-3); stroke-dasharray: 3 3; }
.ob-scene .f-win { fill: var(--ob-win); }
.ob-scene .f-roof { fill: var(--ob-roof); stroke: var(--ob-edge); stroke-width: 0.8; }
.ob-scene .f-roof2 { fill: var(--ob-roof2); stroke: var(--ob-edge); stroke-width: 0.8; }
.ob-scene .f-awn { fill: var(--signal); stroke: var(--ob-edge); stroke-width: 0.8; }
.ob-scene .f-mast, .ob-scene .f-col { fill: none; stroke: var(--ob-line); stroke-width: 1.4; }
.ob-scene .f-dot { fill: var(--ob-line); }
.ob-scene .f-tree { fill: #5E8F4A; stroke: #3F6632; }
.ob-scene .f-fence { fill: none; stroke: var(--ob-line); stroke-width: 1.1; }
.ob-scene .f-cone { fill: rgba(125, 187, 74, 0.26); stroke: rgba(125, 187, 74, 0.75); stroke-width: 0.8; }
.ob-scene .f-cam { fill: var(--fg); stroke: var(--bg-2); }
.ob-scene .f-bell { fill: var(--signal); }
.ob-scene .f-bellw { fill: none; stroke: var(--signal); stroke-width: 1.4; }
.ob-scene .f-boom { fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-dasharray: 5 4; }
.ob-scene .f-atk { fill: none; stroke: #E5533B; stroke-width: 2; stroke-dasharray: 5 4; animation: ob-march 1.2s linear infinite; }
.ob-scene .f-person path, .ob-scene .f-person circle { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; }
.ob-scene .f-person circle { fill: var(--fg); }
.ob-scene .f-person--atk path { stroke: #E5533B; }
.ob-scene .f-person--atk circle { fill: #E5533B; stroke: #E5533B; }
.ob-scene .f-pinl { stroke: var(--signal); stroke-width: 1.2; }
.ob-scene .f-pin, .ob-scene .f-pinm, .ob-scene .f-bub { fill: var(--signal); }
.ob-scene .f-pinc { fill: var(--bg-2); }
.ob-scene .f-pint { fill: #fff; font: 600 9px var(--font-mono); text-anchor: middle; }
.ob-scene .f-bubt { fill: #fff; font: 600 15px var(--font-display); text-anchor: middle; }
.ob-scene .f-lens { fill: rgba(255, 255, 255, 0.1); stroke: var(--signal); stroke-width: 2.5; }
.ob-scene .f-lensh { stroke: var(--signal); stroke-width: 4; stroke-linecap: round; }
.ob-scene .f-doc { fill: var(--ob-top); stroke: var(--ob-edge); }
.ob-scene .f-docl { stroke: var(--signal); stroke-width: 2; }
.ob-scene .f-lab { fill: var(--fg); font: 500 13px var(--font-mono); letter-spacing: 0.03em; }
.ob-scene .f-lab--s { font-size: 11px; fill: var(--fg-2); }
.ob-scene .f-badge { fill: var(--bg); stroke: var(--line-2); }
.ob-scene .ly { opacity: 0; transition: opacity 0.35s var(--ease); }
.ob-scene .ly.is-on { opacity: 1; }
.ob-scene .ly.is-new { animation: ob-in 0.5s var(--ease) both; }
@keyframes ob-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes ob-march { to { stroke-dashoffset: -18; } }

@media (max-width: 999px) {
  .ob { grid-template-columns: 1fr; gap: 2rem; }
  .ob-side { display: contents; }
  .ob-scene { order: -1; }
  .ob-scene__art svg { max-height: 16rem; }
  .ob-contact { order: 2; }
  .ob-opts--3, .ob-opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .ob-dots button { font-size: 0; gap: 0; }
  .ob-scene__art svg { max-height: 11rem; }
  .ob-scene figcaption { padding: 0.7rem 0.9rem 0.8rem; }
  .ob-opts:not(.ob-opts--small):not(.ob-opts--3) { grid-template-columns: 1fr; }
  .ob-summary dl div { grid-template-columns: 1fr auto; }
  .ob-summary dt { grid-column: 1 / -1; }
}

/* Handy: jeder Schritt passt auf einen Bildschirm. Der Assistent füllt die Höhe
   unter der Kopfzeile, die Navigation steht unten fest, lange Schritte teilt das
   Skript in Teile (.ob-part). Reicht die Höhe trotzdem nicht, blättert nur der Schritt. */
@media (max-width: 767px) {
  .kontakt-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .ob-section { padding-top: 0; padding-bottom: 3rem; }
  .ob[data-ob-ready] .ob-side > .ob-scene { display: none; }
  .ob[data-ob-ready]:not([data-ob-sent]) .ob-main {
    display: flex; flex-direction: column;
    height: calc(100vh - var(--header-h) - 1px); height: calc(100svh - var(--header-h) - 1px); min-height: 26rem;
    padding-top: 0.75rem;
  }
  .ob[data-ob-ready] .ob-top { flex: none; gap: 0.5rem; margin-bottom: 0.8rem; }
  .ob[data-ob-ready] .ob-top .code { font-size: 0.625rem; }
  .ob-call { display: inline-flex; flex: none; align-items: center; gap: 0.35rem; min-height: 2rem; font-size: 0.8125rem; white-space: nowrap; color: var(--fg-2); text-decoration: none; }
  .ob-call svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .ob-call:hover { color: var(--signal); }
  .ob[data-ob-ready] .ob-form { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .ob[data-ob-ready] .ob-step { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .ob-part[hidden] { display: none !important; }
  .ob-step legend { font-size: 1.375rem; line-height: 1.2; }
  .ob-lead { margin-top: 0.35rem; font-size: 0.875rem; line-height: 1.4; }
  .ob-label { margin-top: 0.95rem; font-size: 0.625rem; }
  .ob-opts { gap: 0.45rem; margin-top: 0.8rem; }
  .ob-label + .ob-opts { margin-top: 0.45rem; }
  .ob-opts:not(.ob-opts--small):not(.ob-opts--3), .ob-opts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ob-opt, .ob-opts--small .ob-opt { grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.1rem 0.5rem; padding: 0.5rem 0.85rem 0.55rem 0.6rem; }
  .ob-opt__ico, .ob-opts--small .ob-opt__ico { width: 1.5rem; height: 1.5rem; }
  .ob-opt__ico svg, .ob-opts--small .ob-opt__ico svg { width: 1.35rem; height: 1.35rem; }
  .ob-opt__t { font-size: 0.8125rem; line-height: 1.25; hyphens: manual; overflow-wrap: break-word; }
  .ob[data-ob-ready] .ob-step { overflow-x: hidden; }
  .ob-opt__d { font-size: 0.6875rem; line-height: 1.3; }
  .ob-opt:has(input:checked)::after { top: 0.4rem; right: 0.4rem; width: 0.4rem; height: 0.4rem; }
  /* drei nebeneinander: Symbol über dem Text */
  .ob-opts--3 .ob-opt, .ob-opts--3:not(.ob-opts--small) .ob-opt { grid-template-columns: 1fr; gap: 0.35rem; padding: 0.55rem 0.5rem 0.5rem; }
  .ob-opts--3 .ob-opt__ico, .ob-opts--3:not(.ob-opts--small) .ob-opt__ico { grid-row: auto; justify-content: start; width: auto; height: 1.6rem; }
  .ob-opts--3 .ob-opt__ico svg, .ob-opts--3:not(.ob-opts--small) .ob-opt__ico svg { width: 1.5rem; height: 1.5rem; }
  .ob-opts--3 .ob-opt__t { align-self: start; }
  .ob-aside { margin-top: 0.65rem; font-size: 0.8125rem; }
  .ob-handoff { margin-top: 0.7rem; padding: 0.55rem 0.75rem; font-size: 0.75rem; }
  /* übernommener Schnellcheck: Adresse steht schon im Feld, daher nur der Hinweis */
  .ob-handoff { flex-wrap: nowrap; align-items: baseline; }
  .ob-handoff [data-ob-handoff-text] { display: none; }
  .ob-handoff .ob-link { flex: none; }
  .ob-step:has(.ob-handoff:not([hidden])) .ob-lead { display: none; }
  .ob-step .field, .ob-form .form__row, .ob-form .check { margin-top: 0.8rem; }
  .ob-form .form__row { gap: 0.8rem; }
  .ob-form .field label { margin-bottom: 0.1rem; font-size: 0.625rem; }
  .ob-form .field input { padding: 0.45rem 0; }
  .ob-form .field textarea { height: 7.5rem; min-height: 4.5rem; padding: 0.55rem 0.7rem; resize: none; }
  .ob-form .hint { margin-top: 0.35rem; font-size: 0.6875rem; line-height: 1.35; }
  .ob-form .check { gap: 0.7rem; font-size: 0.8125rem; line-height: 1.4; }
  .ob-mini { display: block; margin-top: 0.8rem; }
  .ob-mini svg { height: 7rem; height: clamp(5.5rem, calc(100svh - 34rem), 13rem); }
  .ob-summary { margin-top: 0.6rem; padding: 0.6rem 0.75rem; }
  .ob-summary dl { gap: 0.2rem; margin-top: 0.4rem; }
  .ob-summary dl div { grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 0.5rem; font-size: 0.75rem; }
  .ob-summary dt { grid-column: auto; padding-top: 0.1rem; font-size: 0.5625rem; }
  .ob-summary dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ob-summary .ob-link { font-size: 0.6875rem; }
  .ob-error { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
  .ob[data-ob-ready] .ob-nav { order: 2; flex: none; flex-wrap: nowrap; gap: 0.6rem; margin-top: 0.6rem; padding: 0.7rem 0 max(0.7rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  .ob[data-ob-ready] .ob-nav .btn { min-height: 2.9rem; padding: 0.7rem 1.1rem; }
  .ob[data-ob-ready] .ob-nav [data-ob-next], .ob[data-ob-ready] .ob-nav [data-ob-send] { flex: 1; }
  .ob-form .form__status { margin-top: 0.5rem; padding: 0.6rem 0.8rem; font-size: 0.8125rem; }
  .ob-done { margin-top: 1rem; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .ob-lead { font-size: 0.8125rem; }
}

/* --- 10c. Videoüberwachung: Schnell-Check mit Grundriss -------------------- */
/* Eine Frage je Schritt, daneben der Grundriss. Ohne JavaScript stehen alle Felder untereinander. */
.vc { position: relative; border-bottom: 1px solid var(--line); }
.vc__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem var(--gap); align-items: center; min-height: calc(100vh - var(--header-h) - 1px); min-height: calc(100svh - var(--header-h) - 1px); padding-block: clamp(2rem, 5vh, 4rem); }
.vc-form { display: flex; flex-direction: column; gap: 0; }
[data-vc-ready] .vc-form { min-height: 31rem; }
.vc-top { display: grid; gap: 0.6rem; margin-bottom: 1.8rem; }
[data-vc-at="start"] .vc-top { visibility: hidden; }
.vc-bar { height: 3px; background: var(--line-2); }
.vc-bar i { display: block; width: 0; height: 100%; background: var(--signal); transition: width 0.45s var(--ease); }
.vc-top__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vc-top .code { margin: 0; }
.vc-call { margin-left: auto; font-size: var(--t-sm); color: var(--fg-2); text-decoration: none; white-space: nowrap; }
.vc-call:hover { color: var(--signal); }
.vc-stage { position: relative; flex: 1; }
.vc-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.vc-step[hidden], .vc-nav[hidden], .vc-nav [hidden], .vc-error[hidden] { display: none !important; }
.vc-step:focus { outline: none; }
.vc-step.is-fwd { animation: vc-fwd 0.45s var(--ease) both; }
.vc-step.is-back { animation: vc-back 0.45s var(--ease) both; }
@keyframes vc-fwd { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes vc-back { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
.vc-step legend, .vc-h { padding: 0; font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; line-height: 1.15; color: var(--fg); }
.vc-lead { margin: 0.8rem 0 0; color: var(--fg-2); }
.vc-step--intro h1 { margin-top: 1.4rem; font-size: var(--t-xl); line-height: 1.05; }
.vc-step--intro .lead { max-width: 34rem; margin-top: 1.25rem; color: var(--fg-2); }
.vc-step--intro .btn-row { margin-top: 2rem; }
.vc-link { padding: 0; border: 0; background: none; cursor: pointer; }
.vc-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 2rem 0 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--fg-2); }
.vc-trust li::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.55rem; background: var(--signal); vertical-align: 0.08em; }
.vc-more { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2.5rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); text-decoration: none; }
.vc-more::after { content: "\2193"; font-size: 0.875rem; }
.vc-more:hover { color: var(--fg); }
.vc-est { margin: 1.1rem 0 0; font-family: var(--font-display); color: var(--fg); }
.vc-est strong { font-size: var(--t-xl); font-weight: 400; line-height: 1; color: var(--signal); }
.vc-est span { margin-left: 0.4rem; font-size: var(--t-lg); }
.vc-sum { display: grid; gap: 0.5rem; margin: 1.4rem 0 0; }
.vc-sum div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: var(--t-sm); }
.vc-sum dt { padding-top: 0.15rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.vc-sum dd { margin: 0; color: var(--fg); }
.vc-note { margin-top: 1.2rem; font-size: var(--t-sm); color: var(--fg-3); }
/* Kalender und Uhrzeiten */
.vc-cal { max-width: 27rem; margin-top: 1.3rem; }
.vc-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.vc-cal__title { margin: 0; font-family: var(--font-display); font-size: var(--t-md); color: var(--fg); }
.vc-cal__nav { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--line-2); background: none; color: var(--fg); cursor: pointer; }
.vc-cal__nav svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vc-cal__nav:hover:not(:disabled) { border-color: var(--fg-3); }
.vc-cal__nav:disabled { opacity: 0.3; cursor: default; }
.vc-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.vc-cal__wd { padding-bottom: 0.25rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; color: var(--fg-3); }
.vc-day { position: relative; }
.vc-day input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vc-day span { display: grid; place-items: center; height: 2.6rem; border: 1px solid var(--line-2); background: var(--bg); font-size: var(--t-sm); color: var(--fg); cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.vc-day.is-we span { background: var(--bg-2); }
.vc-day.is-today span { border-color: var(--fg-3); }
.vc-day:hover input:not(:disabled) + span { border-color: var(--fg-3); }
.vc-day input:disabled + span { border-color: var(--line); background: none; color: var(--fg-3); opacity: 0.45; cursor: default; }
.vc-day input:checked + span { border-color: var(--signal); background: var(--signal); color: #fff; }
.vc-day input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.vc-slots { max-width: 30rem; margin-top: 1.3rem; }
.vc-slots__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.vc-form .field textarea { min-height: 2.6rem; padding-block: 0.55rem; resize: none; overflow-y: hidden; }
.vc-chip { position: relative; cursor: pointer; }
.vc-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.vc-chip span { display: block; padding: 0.6rem 0.8rem; border: 1px solid var(--line-2); background: var(--bg); font-size: var(--t-sm); text-align: center; color: var(--fg); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.vc-chip b { margin-right: 0.2rem; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.vc-chip:hover span { border-color: var(--fg-3); }
.vc-chip input:checked + span { border-color: var(--signal); background: rgba(229, 83, 43, 0.08); }
.vc-chip input:checked + span b { color: var(--signal); }
.vc-chip input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.vc-step .field, .vc-step .check { margin-top: 1.1rem; }
.vc-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem var(--gap); margin-top: 1rem; }
.vc-rows .field { margin-top: 0 !important; }
.vc-step .field textarea { min-height: 2.6rem; }
.vc-error { margin: 1.4rem 0 0; }
.vc-nav { display: flex; gap: 0.8rem; margin-top: 2rem; }
.vc-step--done { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line); border-left: 2px solid var(--form-ok); background: var(--bg-2); }
.vc-step--done .code { margin: 0; }
.vc-step--done .vc-h { margin-top: 0.7rem; }
.vc-step--done p { margin-top: 1rem; color: var(--fg-2); }
/* Ohne JavaScript: normales Formular */
[data-vc]:not([data-vc-ready]) .vc-step + .vc-step { margin-top: 3rem; }
[data-vc]:not([data-vc-ready]) .vc-top, [data-vc]:not([data-vc-ready]) [data-vc-step="ergebnis"], [data-vc]:not([data-vc-ready]) [data-vc-step="danke"],
[data-vc]:not([data-vc-ready]) [data-vc-back], [data-vc]:not([data-vc-ready]) [data-vc-next], [data-vc]:not([data-vc-ready]) [data-vc-start],
[data-vc]:not([data-vc-ready]) .vc-link, [data-vc]:not([data-vc-ready]) .vc-side { display: none !important; }

/* 3D-Modell (WebGL): eine Leinwand, die in den sichtbaren Rahmen wandert */
.vc-side { position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: center; animation: vc-in 0.6s var(--ease) both; }
.vc-plan { margin: 0; border: 1px solid var(--line); background: var(--bg-2); }
.vc-gl { position: relative; aspect-ratio: 13 / 10; }
.vc-gl__stage { position: absolute; inset: 0; overflow: hidden; }
.vc-gl__stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.vc-gl__stage.is-grabbing canvas { cursor: grabbing; }
.vc-gl__badges { position: absolute; top: 0.6rem; left: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.3rem; pointer-events: none; }
.vc-gl__badges span { padding: 0.2rem 0.45rem; border: 1px solid var(--line-2); background: var(--bg); font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); animation: vc-in 0.35s var(--ease) both; }
.vc-plan figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.1rem; border-top: 1px solid var(--line); }
.vc-plan figcaption .code { margin: 0; }
.vc-plan strong { font-weight: 500; color: var(--fg); }
.vc-model { position: relative; display: none; }
@keyframes vc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Startansicht ohne Modell, es erscheint erst mit der ersten Frage */
.vc__grid[data-vc-at="start"] { grid-template-columns: minmax(0, 1fr); }
[data-vc-at="start"] .vc-side, .no-gl .vc-gl, .no-gl .vc-model { display: none !important; }

/* Befragung läuft: Seite gesperrt, der Check füllt den Bildschirm */
html.vc-lock { overflow: hidden; scrollbar-gutter: stable; }
html.vc-lock body { position: fixed; inset: 0; overflow: hidden; }
html.vc-lock .vc__grid { height: calc(100vh - var(--header-h) - 1px); height: calc(100svh - var(--header-h) - 1px); min-height: 0; padding-block: clamp(1rem, 4vh, 3rem); }
html.vc-lock .vc__main { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 0; }
html.vc-lock [data-vc-ready] .vc-form { min-height: 0; max-height: 100%; }
html.vc-lock .vc-stage { flex: 0 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.vc-close { display: none; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--line-2); background: none; color: var(--fg); cursor: pointer; }
.vc-close svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.vc-close:hover { border-color: var(--fg-3); }
html.vc-lock .vc-close { display: grid; }
html.vc-lock .vc-top { margin-bottom: 1.2rem; }
html.vc-lock .vc-nav { margin-top: 1.4rem; }
@media (prefers-reduced-motion: reduce) {
  .vc-step.is-fwd, .vc-step.is-back, .vc-side, .vc-model, .vc-gl__badges span { animation: none; }
  .vc-bar i { transition: none; }
}

/* Informationen unter dem Schnell-Check */
.vc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: 2.5rem; }
.vc-card { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--bg); }
.vc-card__ico svg { display: block; width: 2.2rem; height: 2.2rem; fill: none; stroke: var(--signal); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vc-card h3 { margin-top: 1rem; }
.vc-card .ticks { margin-top: 1rem; }

@media (max-width: 999px) {
  .vc__grid { grid-template-columns: 1fr; min-height: 0; }
  .vc-side { display: none; }
  [data-vc-at="objekt"] .vc-model, [data-vc-at="flaeche"] .vc-model, [data-vc-at="bereiche"] .vc-model, [data-vc-at="anlass"] .vc-model, [data-vc-at="wuensche"] .vc-model, [data-vc-at="ergebnis"] .vc-model {
    display: block; flex: none; margin: 0 0 0.9rem; border: 1px solid var(--line); background: var(--bg-2); animation: vc-in 0.5s var(--ease) both; }
  .vc-model { height: clamp(7.5rem, 22vh, 12rem); height: clamp(7.5rem, 22svh, 12rem); }
}
@media (max-width: 999px) and (min-height: 660px) {
  .vc-model { height: clamp(8rem, 25vh, 14rem); height: clamp(8rem, 25svh, 14rem); }
}

/* Handy: wie der Anfrage-Assistent ein Schritt je Bildschirm, Navigation unten fest */
@media (max-width: 767px) {
  .vc__grid { display: block; padding-block: 0; }
  html.vc-lock .vc__grid { padding-block: 0; }
  html.vc-lock .vc__main { justify-content: flex-start; }
  html.vc-lock .vc-stage { flex: 1 1 auto; }
  [data-vc-ready] .vc-form { height: calc(100vh - var(--header-h) - 1px); height: calc(100svh - var(--header-h) - 1px); min-height: 26rem; padding-top: 0.75rem; }
  [data-vc-ready] .vc-top { flex: none; gap: 0.5rem; margin-bottom: 0.8rem; }
  [data-vc-at="start"] .vc-top { display: none; }
  [data-vc-ready] .vc-top .code { font-size: 0.625rem; }
  .vc-call { font-size: 0.8125rem; }
  [data-vc-ready] .vc-stage { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  [data-vc-ready] [data-vc-at="start"] .vc-stage { padding-top: 0.6rem; }
  .vc-step legend, .vc-h { font-size: 1.375rem; line-height: 1.2; }
  .vc-lead { margin-top: 0.35rem; font-size: 0.875rem; line-height: 1.4; }
  .vc-step--intro h1 { margin-top: 0.8rem; font-size: 2rem; }
  .vc-step--intro .lead { margin-top: 0.7rem; font-size: 0.9375rem; line-height: 1.45; }
  .vc-step--intro .btn-row { margin-top: 1rem; }
  .vc-trust { gap: 0.3rem 1rem; margin-top: 0.9rem; font-size: 0.75rem; }
  .vc-more { margin-top: 0.9rem; }
  .vc-est { margin-top: 0.6rem; }
  .vc-est strong { font-size: 2rem; }
  .vc-est span { font-size: 1.125rem; }
  .vc-sum { gap: 0.3rem; margin-top: 0.8rem; }
  .vc-sum div { grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0.6rem; padding-top: 0.35rem; font-size: 0.8125rem; line-height: 1.35; }
  .vc-note { margin-top: 0.6rem; font-size: 0.75rem; }
  .vc-cal { margin-top: 0.9rem; }
  .vc-cal__head { margin-bottom: 0.5rem; }
  .vc-cal__nav { width: 2.2rem; height: 2.2rem; }
  .vc-cal__grid { gap: 0.25rem; }
  .vc-day span { height: 2.35rem; font-size: 0.875rem; }
  .vc-slots { margin-top: 0.9rem; }
  .vc-slots__grid { gap: 0.35rem; }
  .vc-chip span { padding: 0.5rem 0.35rem; font-size: 0.8125rem; }
  .vc-step .field, .vc-step .check { margin-top: 0.8rem; }
  .vc-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.9rem; margin-top: 0.7rem; }
  .vc-form .field label { margin-bottom: 0.1rem; font-size: 0.625rem; }
  .vc-form .field input { padding: 0.45rem 0; }
  .vc-form .field textarea { min-height: 2.9rem; padding: 0.5rem 0.7rem; }
  .vc-form .check { gap: 0.7rem; font-size: 0.8125rem; line-height: 1.4; }
  .vc-error { margin-top: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
  [data-vc-ready] .vc-nav { order: 2; flex: none; gap: 0.6rem; margin-top: 0.6rem; padding: 0.7rem 0 max(0.7rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
  [data-vc-ready] .vc-nav .btn { min-height: 2.9rem; padding: 0.7rem 1.1rem; }
  [data-vc-ready] .vc-nav [data-vc-next], [data-vc-ready] .vc-nav [data-vc-send] { flex: 1; }
  .vc-form .form__status { margin-top: 0.5rem; padding: 0.6rem 0.8rem; font-size: 0.8125rem; }
  .vc-cards { grid-template-columns: 1fr; }
}

/* --- 11. Fließtext ------------------------------------------------------- */

.prose { max-width: 46rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 3.25rem; font-size: var(--t-lg); font-weight: 400; line-height: 1.2; }
.prose h3 { margin-top: 2.25rem; }
.prose h2 + *, .prose h3 + * { margin-top: 0.9rem; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: 0.4rem; }
.prose li::marker { color: var(--signal); }
.prose address { font-style: normal; color: var(--fg); }
.prose blockquote { margin: 2rem 0; padding-left: 1.25rem; border-left: 2px solid var(--signal); color: var(--fg); font-family: var(--font-display); font-size: var(--t-md); font-weight: 300; }
.prose .table-scroll { margin-top: 1.5rem; }
.prose > p:first-child:not([class]) { font-size: var(--t-md); line-height: 1.55; color: var(--fg); }

.legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem var(--gap); }
.legal__toc { grid-column: 1 / span 3; align-self: start; position: sticky; top: calc(var(--header-h) + 2rem); }
.legal__body { grid-column: 5 / span 8; }
.legal__body--wide { grid-column: 1 / span 8; }
.legal__toc ol { margin: 1rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.legal__toc li { border-bottom: 1px solid var(--line); }
.legal__toc a { display: block; padding: 0.5rem 0; color: var(--fg-2); font-size: var(--t-sm); text-decoration: none; }
.legal__toc a:hover { color: var(--fg); }
@media (max-width: 999px) {
  .legal__toc { position: static; grid-column: 1 / -1; }
  .legal__body, .legal__body--wide { grid-column: 1 / -1; }
}
/* Beispielbericht als Textseite */
.rb-note { padding: 0.8rem 1rem; border-left: 2px solid var(--signal); background: var(--bg-2); font-size: var(--t-sm); color: var(--fg-2); }
.rb-note strong { color: var(--fg); font-weight: 500; }
.rb-sev { display: inline-block; padding: 0.05rem 0.45rem; border: 1px solid currentColor; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.rb-sev[data-sev="k"] { color: var(--signal); }
.rb-sev[data-sev="h"] { color: var(--sev-h); }
.rb-sev[data-sev="m"] { color: var(--sev-m); }
.rb-sev[data-sev="g"] { color: var(--sev-g); }
.rb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rb-facts dt, .rb-glossar dt { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.rb-facts dd { margin: 0.15rem 0 0; color: var(--fg); }
.rb-glossar { display: grid; gap: 1rem; }
.rb-glossar dd { margin: 0.25rem 0 0; }
.rb-plan { margin: 1.5rem 0 0; border: 1px solid var(--line); background: #F4F2EC; }
.rb-plan img { display: block; width: 100%; height: auto; }
.rb-plan figcaption { padding: 0.6rem 0.9rem; border-top: 1px solid var(--line); background: var(--bg-2); font-size: var(--t-sm); color: var(--fg-3); }
@media (max-width: 599px) { .rb-facts { grid-template-columns: 1fr; } }
.stand { margin-top: 3.5rem !important; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }

.post-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; }

.error-page { min-height: 60vh; display: grid; align-items: center; }
.error-page .code { display: block; margin-bottom: 1.5rem; color: var(--signal); font-size: var(--t-sm); }

/* --- 12. Fuß ------------------------------------------------------------- */

.site-footer { position: relative; background: var(--bg); border-top: 1px solid var(--line); }
.footer-scan { position: relative; height: clamp(12rem, 26vw, 24rem); }
.footer-scan .scan { position: absolute; inset: 0; background-color: var(--bg); }
.footer-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg) 0%, rgba(var(--bg-rgb), 0) 55%), linear-gradient(to bottom, var(--bg) 0%, rgba(var(--bg-rgb), 0) 25%);
}
.footer-cta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 2rem var(--gap);
  margin-top: clamp(-6rem, -7vw, -3rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.footer-cta__title {
  max-width: 16em;
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 300;
  font-stretch: 104%;
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.footer-cta .btn { margin-top: 0.75rem; }
@media (max-width: 799px) { .footer-cta { grid-template-columns: 1fr; } .footer-cta .btn { justify-self: start; margin-top: 0; } }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem var(--gap);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.footer-col h2 {
  margin-bottom: 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li + li { margin-top: 0.55rem; }
.footer-col a, .footer-col li { color: var(--fg); font-size: 0.9375rem; text-decoration: none; }
.footer-col a:hover { color: var(--signal-2); }
.footer-col address { font-style: normal; }
@media (max-width: 899px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .footer-cols { grid-template-columns: 1fr; } }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--line);
}
.footer-bottom p { max-width: none; }

/* --- 13. Platzhalter ----------------------------------------------------- */

/* Inline: schraffiert wie eine Baustellenmarkierung, damit nichts übersehen wird */
.ph {
  padding: 0.05em 0.4em;
  background: repeating-linear-gradient(-45deg, rgba(229, 83, 43, 0.2) 0 5px, rgba(229, 83, 43, 0.07) 5px 10px);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.88em;
  letter-spacing: 0;
  text-transform: none;
}

/* Bildfläche mit Eckmarken und Beschriftung */
.ph-media {
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: var(--ratio, 4 / 3);
  padding: 1rem;
  background:
    var(--corners),
    radial-gradient(circle, rgba(var(--ink-rgb), 0.09) 1px, transparent 1.3px) 0 0 / 14px 14px,
    var(--bg-3);
}
.ph-media span { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); }
.ph-media span::before { content: "Platzhalter / "; color: var(--signal); }

/* Abschnitt, der als Ganzes noch ausgefüllt werden muss */
.ph-note { margin-bottom: 2.5rem; padding: 1rem 1.25rem; border-left: 2px solid var(--signal); background: var(--bg-2); font-size: var(--t-sm); color: var(--fg-2); max-width: 62ch; }
.ph-note strong { display: block; margin-bottom: 0.25rem; font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); }

/* --- 14. Bewegung, Druck ------------------------------------------------- */

@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  :root { --bg: #fff; --bg-2: #fff; --bg-3: #f2f2f2; --fg: #000; --fg-2: #222; --fg-3: #555; --line: #ccc; --line-2: #999; }
  body::after, .site-header, .footer-scan, .footer-cta, .scan, .nav-toggle, .skip-link, .btn-row { display: none !important; }
  .section { padding-block: 1.5rem; }
}