/* ==========================================================================
   GROWIT — KI-Automatisierung: Landkarte, Glow-Design, ROI, Genossenschaft
   Ergänzt site.css / leistungen.css · nur auf leistung-ki.html geladen
   ========================================================================== */

:root {
  --amber: #FFB86B;            /* Pfad 3 · Beschwerde-Management */
  --glow-cyan: 0 0 22px rgba(39,230,255,.6), 0 0 48px rgba(39,230,255,.28);
  --glow-royal: 0 0 22px rgba(82,113,255,.6), 0 0 48px rgba(82,113,255,.3);
}

/* ---------- Glow-Buttons (Apple-Neon) ----------
   Dunkler Glas-Button in Seitenfarbe, leuchtende Cyan-Umrandung, helle Schrift.
   Wirkt hochwertig und fügt sich nahtlos in den dunklen Hintergrund ein. */
.btn--glow {
  position: relative;
  background:
    linear-gradient(180deg, rgba(24,15,74,.72), rgba(12,7,42,.82));
  color: #EAFDFF; font-weight: 700; letter-spacing: -.01em;
  border: 1.5px solid rgba(39,230,255,.55);
  box-shadow:
    0 0 24px rgba(39,230,255,.34), 0 14px 30px -16px rgba(0,0,0,.7),
    inset 0 0 22px rgba(39,230,255,.10), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), border-color .3s, color .25s;
}
.btn--glow:hover {
  transform: translateY(-2px) scale(1.03); color: #fff;
  border-color: rgba(39,230,255,.9);
  box-shadow:
    0 0 40px rgba(39,230,255,.7), 0 20px 40px -18px rgba(0,0,0,.75),
    inset 0 0 30px rgba(39,230,255,.18), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--glow-ghost {
  background: rgba(255,255,255,.03); color: #fff; border: 1.5px solid rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .25s, border-color .3s;
}
.btn--glow-ghost:hover { transform: translateY(-2px) scale(1.03); background: rgba(39,230,255,.10);
  border-color: rgba(39,230,255,.6); box-shadow: 0 0 24px rgba(39,230,255,.28), inset 0 0 20px rgba(39,230,255,.10); }
@media (prefers-reduced-motion: no-preference) {
  .btn--glow { animation: glow-pulse 3.6s ease-in-out infinite; }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(39,230,255,.30), 0 14px 30px -16px rgba(0,0,0,.7), inset 0 0 20px rgba(39,230,255,.08), inset 0 1px 0 rgba(255,255,255,.14); border-color: rgba(39,230,255,.5); }
  50%      { box-shadow: 0 0 40px rgba(39,230,255,.6),  0 14px 30px -16px rgba(0,0,0,.7), inset 0 0 30px rgba(39,230,255,.16), inset 0 1px 0 rgba(255,255,255,.2);  border-color: rgba(39,230,255,.85); }
}

/* ---------- Header: oben hell (dunkle Schrift), gescrollt dunkelblau (weiße Schrift) ---------- */
.ki-auto-page .site-header {
  background: rgba(255, 255, 255, .82);
  border-bottom-color: rgba(40, 15, 145, .10);
  backdrop-filter: saturate(150%) blur(16px);
}
/* Gescrollt: dunkelblaue Leiste (schlägt body.lsec-dark-active durch spätere Ladung) */
body.ki-auto-page .site-header.scrolled,
body.ki-auto-page.lsec-dark-active .site-header.scrolled {
  background: rgba(23, 13, 82, .82);
  border-bottom-color: rgba(255, 255, 255, .10);
  box-shadow: 0 12px 34px -20px rgba(0, 0, 0, .6);
}

/* -- Zustand OBEN (nicht gescrollt): dunkle Schrift, blaues Logo -- */
body.ki-auto-page .site-header:not(.scrolled) .nav a:not(.btn),
body.ki-auto-page .site-header:not(.scrolled) .nav-dd__toggle { color: var(--ink); }
body.ki-auto-page .site-header:not(.scrolled) .nav a:not(.btn):hover,
body.ki-auto-page .site-header:not(.scrolled) .nav-dd__toggle:hover { color: var(--royal); background: rgba(40,15,145,.06); }
body.ki-auto-page .site-header:not(.scrolled) .logo-dark { display: block; }
body.ki-auto-page .site-header:not(.scrolled) .logo-white { display: none; }
body.ki-auto-page .site-header:not(.scrolled) .nav-toggle span,
body.ki-auto-page .site-header:not(.scrolled) .nav-toggle span::before,
body.ki-auto-page .site-header:not(.scrolled) .nav-toggle span::after { background: var(--navy); }

/* -- Zustand GESCROLLT (dunkelblau): weißes Logo, weiße Schrift -- */
body.ki-auto-page .site-header.scrolled .nav a:not(.btn),
body.ki-auto-page .site-header.scrolled .nav-dd__toggle { color: rgba(255,255,255,.92); }
body.ki-auto-page .site-header.scrolled .nav a:not(.btn):hover,
body.ki-auto-page .site-header.scrolled .nav-dd__toggle:hover { color: #fff; background: rgba(255,255,255,.12); }
body.ki-auto-page .site-header.scrolled .logo-dark { display: none; }
body.ki-auto-page .site-header.scrolled .logo-white { display: block; }
body.ki-auto-page .site-header.scrolled .nav-toggle span,
body.ki-auto-page .site-header.scrolled .nav-toggle span::before,
body.ki-auto-page .site-header.scrolled .nav-toggle span::after { background: #fff; }

/* Termin-Button OBEN (nicht gescrollt): Royal-Verlauf + mehr Abstand zum FAQ-Link */
.ki-auto-page .site-header .nav a.btn--primary { margin-left: 16px; }
body.ki-auto-page .site-header:not(.scrolled) .nav a.btn--primary {
  background: linear-gradient(120deg, var(--royal) 0%, #6C86FF 100%);
  color: #fff !important; border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 24px -12px rgba(82,113,255,.75), 0 0 0 1px rgba(82,113,255,.10);
}
body.ki-auto-page .site-header:not(.scrolled) .nav a.btn--primary:hover {
  box-shadow: 0 16px 30px -12px rgba(82,113,255,.9); filter: brightness(1.05);
}
/* Termin-Button GESCROLLT (dunkelblaue Leiste): Glow-Stil wie im Rest der Automatisierungs-Seite */
body.ki-auto-page .site-header.scrolled .nav a.btn--primary {
  background: linear-gradient(180deg, rgba(24,15,74,.72), rgba(12,7,42,.82));
  color: #EAFDFF !important; border: 1.5px solid rgba(39,230,255,.55);
  box-shadow:
    0 0 24px rgba(39,230,255,.34), 0 14px 30px -16px rgba(0,0,0,.7),
    inset 0 0 22px rgba(39,230,255,.10), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(4px);
}
body.ki-auto-page .site-header.scrolled .nav a.btn--primary:hover {
  color: #fff !important; border-color: rgba(39,230,255,.9); filter: none;
  box-shadow:
    0 0 40px rgba(39,230,255,.7), 0 20px 40px -18px rgba(0,0,0,.75),
    inset 0 0 30px rgba(39,230,255,.18), inset 0 1px 0 rgba(255,255,255,.22);
}

/* Dropdown „Leistungen": Panel ist hell -> Links IMMER dunkel lesbar,
   auch wenn die Leiste gescrollt ist und der übrige Menütext weiß wird. */
body.ki-auto-page .site-header .nav-dd__menu a,
body.ki-auto-page .site-header.scrolled .nav-dd__menu a { color: var(--ink) !important; }
body.ki-auto-page .site-header .nav-dd__menu a:hover,
body.ki-auto-page .site-header.scrolled .nav-dd__menu a:hover {
  color: var(--navy) !important; background: rgba(40,15,145,.06);
}

/* ---------- Heller Footer auf dieser Seite (dunkle Schrift) ---------- */
.ki-auto-page .footer {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #F4F7FF 0%, #EAF1FF 100%);
  color: var(--muted);
  border-top: 1px solid rgba(40, 15, 145, .10);
}
.ki-auto-page .footer__brand p { color: var(--muted); }
.ki-auto-page .footer h4 { color: var(--navy); }
.ki-auto-page .footer__top a,
.ki-auto-page .footer__top li { color: var(--muted); }
.ki-auto-page .footer__top a:hover { color: var(--royal); }
.ki-auto-page .footer__social a {
  background: rgba(40, 15, 145, .05); border-color: rgba(40, 15, 145, .12); color: var(--navy);
}
.ki-auto-page .footer__social a:hover { background: rgba(82, 113, 255, .12); }
.ki-auto-page .footer__bottom {
  border-top-color: rgba(40, 15, 145, .10); color: var(--muted);
}
.ki-auto-page .footer__bottom a:hover { color: var(--royal); }

/* ---------- Dunkler Hero, der beim Scrollen abdunkelt ---------- */
.kiauto-hero {
  position: relative; overflow: hidden;
  min-height: 84vh; display: flex; align-items: center;
  padding: clamp(150px, 22vh, 240px) 0 clamp(80px, 12vh, 130px);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(82,113,255,.32), rgba(82,113,255,0) 60%),
    linear-gradient(180deg, #241063 0%, #170D52 40%, rgba(10,6,40,0) 100%);
  color: #fff;
}
.kiauto-hero__lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; }
.kiauto-hero__inner { position: relative; z-index: 2; max-width: 880px; }
.kiauto-hero .crumbs a { color: rgba(255,255,255,.66); }
.kiauto-hero .crumbs b { color: #fff; }
.kiauto-hero .crumbs span { color: rgba(255,255,255,.36); }
.kiauto-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); letter-spacing: -.04em; line-height: 1.03; }
.kiauto-hero .lead { color: rgba(255,255,255,.82); margin-top: 24px; max-width: 60ch; }
.kiauto-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; align-items: center; }
.kiauto-eyebrow { color: var(--cyan); }
.kiauto-eyebrow::before { background: var(--cyan); }
.text-glow {
  position: relative;
  background: linear-gradient(180deg, #EAFDFF 0%, var(--cyan) 60%, #57C8FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(39,230,255,.7)) drop-shadow(0 0 44px rgba(39,230,255,.4));
}
@media (prefers-reduced-motion: no-preference) {
  .text-glow { animation: text-glow-pulse 3.8s ease-in-out infinite; }
}
@keyframes text-glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 16px rgba(39,230,255,.6)) drop-shadow(0 0 38px rgba(39,230,255,.32)); }
  50%      { filter: drop-shadow(0 0 24px rgba(39,230,255,.9)) drop-shadow(0 0 60px rgba(39,230,255,.55)); }
}

/* ---------- Landkarten-Sektion (dunkel, nahtlos) ---------- */
.automap-sec {
  position: relative; color: #fff;
  padding: clamp(70px, 10vw, 120px) 0;
  background: transparent;
}
.automap-sec__head { max-width: 760px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.automap-sec__head h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.automap-sec__head p { color: rgba(255,255,255,.78); margin: 16px auto 0; max-width: 60ch; }
.automap-sec__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 22px; }
.automap-sec__legend span { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.8); }
.automap-sec__legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.lg--p1 { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.lg--p2 { background: var(--royal); box-shadow: 0 0 10px var(--royal); }
.lg--p3 { background: var(--amber); box-shadow: 0 0 10px var(--amber); }

/* ---------- Die interaktive Landkarte (rahmenlos, direkt auf der Seite) ---------- */
.automap {
  position: relative;
  margin-inline: calc(50% - 50vw);   /* volle Breite, wirkt wie Teil der Seite */
  width: 100vw;
}
.automap__viewport {
  position: relative; width: 100%; height: clamp(460px, 66vh, 680px);
  /* Ein Finger scrollt die Seite; zwei Finger zoomen (per JS). Maus-Pan bleibt. */
  touch-action: pan-y; cursor: grab; overflow: hidden;
}
.automap__viewport.is-panning { cursor: grabbing; }
/* isolierter Stapelkontext → Drähte bleiben stabil HINTER den Knoten (kein Flackern) */
.automap__world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; isolation: isolate; }
.automap__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; transform: translateZ(0); }
.amnode { z-index: 2; }
.automap__wire { fill: none; stroke-width: 2.4; stroke-linecap: round; opacity: .5;
  transition: opacity .3s, stroke-width .3s, filter .3s; }
.wire--in, .wire--ai { stroke: rgba(255,255,255,.5); }
.wire--p1 { stroke: var(--cyan); filter: drop-shadow(0 0 5px rgba(39,230,255,.55)); }
.wire--p2 { stroke: var(--royal); filter: drop-shadow(0 0 5px rgba(82,113,255,.55)); }
.wire--p3 { stroke: var(--amber); filter: drop-shadow(0 0 5px rgba(255,184,107,.5)); }
.is-live .automap__wire { animation: wire-flow 2.6s linear infinite; stroke-dasharray: 7 10; }
@keyframes wire-flow { to { stroke-dashoffset: -34; } }
@media (prefers-reduced-motion: reduce) { .is-live .automap__wire { animation: none; stroke-dasharray: none; } }

/* Knoten */
.amnode {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 16px 11px 12px; border-radius: 16px;
  background: rgba(18, 12, 54, .82); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16); color: #fff;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.7);
  cursor: grab; text-align: left; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .25s, border-color .25s, background .25s;
}
.amnode:hover { border-color: rgba(255,255,255,.34); box-shadow: 0 18px 44px -18px rgba(0,0,0,.75); }
.amnode.is-grabbing { cursor: grabbing; transition: none; z-index: 30; }
.amnode:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(39,230,255,.4); }
.amnode__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.amnode__txt b { display: block; font-size: .92rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.amnode__txt small { display: block; font-size: .72rem; color: rgba(255,255,255,.6); margin-top: 2px; }
.amnode--in .amnode__dot, .amnode--ai .amnode__dot { background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.8); }
.amnode--ai { border-color: rgba(39,230,255,.5); box-shadow: 0 0 0 1px rgba(39,230,255,.25), 0 18px 40px -18px rgba(39,230,255,.5); }
.amnode--ai .amnode__dot { background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.amnode--p1 .amnode__dot { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.amnode--p2 .amnode__dot { background: var(--royal); box-shadow: 0 0 12px var(--royal); }
.amnode--p3 .amnode__dot { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.amnode.is-active { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(39,230,255,.5), 0 0 34px rgba(39,230,255,.4); z-index: 25; }
.amnode--p2.is-active { border-color: var(--royal); box-shadow: 0 0 0 2px rgba(82,113,255,.55), 0 0 34px rgba(82,113,255,.45); }
.amnode--p3.is-active { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(255,184,107,.55), 0 0 34px rgba(255,184,107,.4); }

/* Bedienleiste */
.automap__controls { position: absolute; right: 16px; bottom: 16px; z-index: 12; display: flex; flex-direction: column; gap: 8px; }
.automap__ctl {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(14, 9, 46, .8); border: 1px solid rgba(255,255,255,.18); color: #fff;
  font-size: 1.35rem; font-weight: 600; line-height: 1; backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .15s;
}
.automap__ctl:hover { background: rgba(39,230,255,.16); border-color: rgba(39,230,255,.5); transform: translateY(-1px); }
.automap__ctl svg { width: 18px; height: 18px; }

/* Hinweis */
.automap__hint {
  position: absolute; left: 16px; bottom: 16px; z-index: 12;
  display: flex; gap: 8px 14px; flex-wrap: wrap;
  font-size: .72rem; color: rgba(255,255,255,.55); pointer-events: none;
}
.automap__hint span { display: inline-flex; align-items: center; gap: 6px; }
.automap__hint span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(39,230,255,.7); }

/* Detail-Panel */
.automap__panel {
  position: absolute; top: 16px; right: 16px; z-index: 20;
  width: min(340px, calc(100% - 32px));
  background: rgba(12, 8, 42, .92); backdrop-filter: blur(14px);
  border: 1px solid rgba(39,230,255,.24); border-radius: 20px;
  padding: 22px 22px 24px; box-shadow: 0 30px 70px -24px rgba(0,0,0,.7), 0 0 40px rgba(39,230,255,.14);
  opacity: 0; visibility: hidden; transform: translateX(12px) scale(.98);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.automap__panel.is-open { opacity: 1; visibility: visible; transform: none; }
.automap__panel-close {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 9px;
  color: rgba(255,255,255,.7); font-size: 1.3rem; line-height: 1; display: grid; place-items: center;
  background: rgba(255,255,255,.06); transition: background .2s, color .2s;
}
.automap__panel-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.automap__panel-kind {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; color: var(--cyan);
  background: rgba(39,230,255,.12); border: 1px solid rgba(39,230,255,.3);
}
.automap__panel-kind[data-kind="p2"] { color: #9fb0ff; background: rgba(82,113,255,.14); border-color: rgba(82,113,255,.36); }
.automap__panel-kind[data-kind="p3"] { color: var(--amber); background: rgba(255,184,107,.12); border-color: rgba(255,184,107,.34); }
.automap__panel-title { margin: 14px 0 0; font-size: 1.28rem; color: #fff; letter-spacing: -.02em; line-height: 1.2; }
.automap__panel-text { margin-top: 12px; font-size: .95rem; color: rgba(255,255,255,.82); line-height: 1.6; }

/* ---------- ROI-Boxen ---------- */
.roi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(30px, 4vw, 46px); }
.roi-card {
  position: relative; padding: 34px 28px; border-radius: 24px; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 40px rgba(82,113,255,.06);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.roi-card:hover { transform: translateY(-4px); border-color: rgba(39,230,255,.4); box-shadow: 0 0 40px rgba(39,230,255,.18); }
.roi-card__num {
  font-size: clamp(2.4rem, 4vw, 3.3rem); font-weight: 800; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(120deg, var(--cyan), var(--royal));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.roi-card h3 { margin-top: 14px; font-size: 1.1rem; color: #fff; letter-spacing: -.02em; }
.roi-card p { margin-top: 10px; font-size: .92rem; color: rgba(255,255,255,.74); line-height: 1.55; }

/* ---------- Genossenschaft-Mini-Beispiel ---------- */
.gen-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(24px, 3vw, 36px); }
.gen-benefit {
  padding: 28px 26px; border-radius: 22px; background: var(--card);
  border: 1px solid var(--line); box-shadow: var(--sh-sm);
}
.gen-benefit b {
  display: block; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--navy); line-height: 1;
}
.gen-benefit span { display: block; margin-top: 10px; color: var(--muted); font-size: .95rem; line-height: 1.55; }

/* ======================================================================
   DURCHGEHEND DUNKLE SEITE — ein Hintergrund, keine Übergänge zwischen
   den Abschnitten. Alle Flächen dunkel, nur die Schrift hell.
   ====================================================================== */
/* Eine einzige, konstante dunkle Grundfläche (überschreibt den Farb-Morph).
   background-color bleibt konstant (überschreibt den JS-Morph per !important);
   ein sanfter Verlauf liegt als background-image darüber → nie flach, nie kantig. */
.ki-auto-page .lbg {
  background-color: #0A0628 !important;
  background-image:
    radial-gradient(1200px 900px at 78% -6%, rgba(82,113,255,.22), rgba(82,113,255,0) 58%),
    radial-gradient(1000px 800px at 6% 108%, rgba(39,230,255,.12), rgba(39,230,255,0) 60%),
    linear-gradient(180deg, #170D52 0%, #0C0733 40%, #080522 100%);
}
/* Statische, weiche Auren */
.ki-auto-page .lbg::after {
  background:
    radial-gradient(60% 50% at 88% 20%, rgba(82,113,255,.14), rgba(82,113,255,0) 62%),
    radial-gradient(52% 48% at 10% 82%, rgba(39,230,255,.10), rgba(39,230,255,0) 64%);
  opacity: 1;
}
/* Sanft wanderndes Glimmen / leises „Leuchten“, das an wechselnden Stellen aufscheint */
.ki-auto-page .lbg::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(28% 26% at 22% 30%, rgba(39,230,255,.16), rgba(39,230,255,0) 60%),
    radial-gradient(24% 22% at 74% 22%, rgba(82,113,255,.16), rgba(82,113,255,0) 60%),
    radial-gradient(26% 24% at 62% 78%, rgba(39,230,255,.12), rgba(39,230,255,0) 62%),
    radial-gradient(22% 20% at 34% 84%, rgba(82,113,255,.12), rgba(82,113,255,0) 62%);
  opacity: .8; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ki-auto-page .lbg::before { animation: ki-shimmer 22s ease-in-out infinite; }
}
@keyframes ki-shimmer {
  0%   { transform: translate3d(0,0,0) scale(1);      opacity: .55; }
  20%  { transform: translate3d(3%,-2%,0) scale(1.06); opacity: .9;  }
  40%  { transform: translate3d(-2%,3%,0) scale(1.02); opacity: .65; }
  60%  { transform: translate3d(2%,2%,0) scale(1.08);  opacity: .95; }
  80%  { transform: translate3d(-3%,-1%,0) scale(1.03);opacity: .6;  }
  100% { transform: translate3d(0,0,0) scale(1);       opacity: .55; }
}
/* Alle Abschnitte transparent → nahtlos eine Fläche */
.ki-auto-page .automap-sec,
.ki-auto-page .lsec,
.ki-auto-page .lsec--ki,
.ki-auto-page .lsec--cta { background: transparent !important; }

/* Überschriften & Einleitungen hell */
.ki-auto-page .ldx-head h2,
.ki-auto-page .automap-sec__head h2 { color: #fff; }
.ki-auto-page .ldx-head p { color: rgba(255,255,255,.78); }
.ki-auto-page .eyebrow { color: var(--cyan); }
.ki-auto-page .eyebrow::before { background: var(--cyan); }

/* Kennzahl-Karten (Zeit, die Ihr Team zurückbekommt) */
.ki-auto-page .stat-card {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 0 40px rgba(82,113,255,.05);
}
.ki-auto-page .stat-card > b + span { color: rgba(255,255,255,.72); }

/* Prozess „So arbeiten wir“ */
.ki-auto-page .proc-step h3 { color: #fff; }
.ki-auto-page .proc-step p { color: rgba(255,255,255,.72); }
.ki-auto-page .proc-step::before { background: linear-gradient(rgba(39,230,255,.5), rgba(39,230,255,.08)); }
/* Nummern-Kreise: helles Glas mit leuchtender Umrandung statt vollem Blau */
.ki-auto-page .proc-step__num {
  background: radial-gradient(120% 120% at 30% 20%, rgba(39,230,255,.18), rgba(255,255,255,.04));
  color: #EAFDFF; border: 1.5px solid rgba(39,230,255,.55);
  box-shadow: 0 0 22px rgba(39,230,255,.28), inset 0 0 18px rgba(39,230,255,.10);
}

/* „Was enthalten ist“ */
.ki-auto-page .deliver-item {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12);
}
.ki-auto-page .deliver-item:hover { border-color: rgba(39,230,255,.4); box-shadow: 0 0 34px rgba(39,230,255,.14); }
.ki-auto-page .deliver-item__ico { background: rgba(39,230,255,.12); color: var(--cyan); }
.ki-auto-page .deliver-item h3 { color: #fff; }
.ki-auto-page .deliver-item p { color: rgba(255,255,255,.72); }

/* FAQ */
.ki-auto-page .faq-item {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12);
}
.ki-auto-page .faq-item.open { border-color: rgba(39,230,255,.32); box-shadow: 0 0 34px rgba(39,230,255,.14); }
.ki-auto-page .faq-q { color: #fff; }
.ki-auto-page .faq-q .qnum { color: var(--cyan); }
.ki-auto-page .faq-q .ico::before, .ki-auto-page .faq-q .ico::after { background: var(--cyan); }
.ki-auto-page .faq-a p { color: rgba(255,255,255,.74); }

/* Verwandte Leistungen */
.ki-auto-page .ldx-related a {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); color: #fff;
}
.ki-auto-page .ldx-related a:hover { border-color: rgba(39,230,255,.4); box-shadow: 0 0 30px rgba(39,230,255,.14); }
.ki-auto-page .ldx-related a svg { color: var(--cyan); }

/* Genossenschaft-Beispiel: nur zwei Kennzahlen nebeneinander */
.ki-benefits--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }

/* Genossenschaft-Kopf trägt jetzt automap-sec__head → Abstand nach unten wieder herstellen */
.ki-auto-page .ki-head.automap-sec__head { margin-bottom: clamp(28px, 4vw, 48px); }
.ki-auto-page .ki-head .ki-head__hint { margin-top: 14px; }

/* „Entlasten Sie Ihr Team“ — glühende Glas-Karte statt dunkelblauem Block */
.ki-auto-page .cta-card {
  background:
    radial-gradient(120% 130% at 50% -10%, rgba(82,113,255,.28), rgba(82,113,255,0) 60%),
    linear-gradient(180deg, rgba(39,230,255,.10), rgba(82,113,255,.06));
  border: 1px solid rgba(39,230,255,.34);
  box-shadow: 0 0 60px rgba(39,230,255,.18), inset 0 0 60px rgba(82,113,255,.10);
}
.ki-auto-page .cta-card::before { opacity: .8; }

/* ======================================================================
   AUFWERTUNG — beleuchtete Typografie, Vorher/Nachher, Feature-Reihen,
   Live-Beispiele. Boldness liegt in der Karte; hier: ruhig & präzise.
   ====================================================================== */

/* --- Beleuchtete Überschriften --- */
.ki-auto-page h1,
.ki-auto-page .automap-sec__head h2,
.ki-auto-page .ldx-head h2,
.ki-auto-page .ki-head h2 {
  text-shadow: 0 0 34px rgba(82,113,255,.30), 0 0 66px rgba(39,230,255,.10);
}
.ki-auto-page .automap-sec__head h2,
.ki-auto-page .ldx-head h2,
.ki-auto-page .ki-head h2 { font-weight: 800; letter-spacing: -.03em; }

/* Gradient-Schlüsselwort in Überschriften */
.hl {
  background: linear-gradient(110deg, var(--cyan) 8%, var(--royal) 88%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none;
  filter: drop-shadow(0 0 16px rgba(39,230,255,.4));
}

/* --- Eyebrow / Tag als glühende Pille --- */
.ki-auto-page .eyebrow,
.ki-auto-page .lsec__tag,
.ki-auto-page .kiauto-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  background: rgba(39,230,255,.07); border: 1px solid rgba(39,230,255,.26);
  color: var(--cyan); font-weight: 600; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 0 22px rgba(39,230,255,.12), inset 0 0 16px rgba(39,230,255,.05);
}
.ki-auto-page .eyebrow::before,
.ki-auto-page .lsec__tag::before,
.ki-auto-page .kiauto-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; margin: 0; flex: none;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}

/* --- Vorher / Nachher --- */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,24px); margin-top: clamp(30px,4vw,46px); }
.vs-col { position: relative; padding: 30px 28px 32px; border-radius: 24px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); }
.vs-col--after {
  background: linear-gradient(180deg, rgba(39,230,255,.08), rgba(82,113,255,.05));
  border-color: rgba(39,230,255,.3); box-shadow: 0 0 46px rgba(39,230,255,.12);
}
.vs-tag { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.vs-tag--good { color: var(--cyan); }
.vs-col ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.vs-col li { position: relative; padding-left: 36px; color: rgba(255,255,255,.82); font-size: .96rem; line-height: 1.5; }
.vs-col li::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700; }
.vs-col--before li::before { content: "\2715"; background: rgba(255,255,255,.06); color: rgba(255,255,255,.5); }
.vs-col--after li::before { content: "\2713"; background: rgba(39,230,255,.16); color: var(--cyan); box-shadow: 0 0 12px rgba(39,230,255,.4); }

/* --- Feature-Reihen (abwechselnd links/rechts) --- */
.feat-rows { margin-top: clamp(32px,4vw,56px); display: grid; gap: clamp(28px,4.5vw,64px); }
.feat-row { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(24px,4vw,56px); }
.feat-row:nth-child(even) .feat-row__media { order: 2; }
.feat-row__media { position: relative; aspect-ratio: 4/3; border-radius: 28px; overflow: hidden;
  background: radial-gradient(120% 120% at 28% 18%, rgba(82,113,255,.24), rgba(82,113,255,0) 58%), rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10); display: grid; place-items: center;
  box-shadow: inset 0 0 60px rgba(39,230,255,.06); }
.feat-row__media svg { width: 38%; height: 38%; color: var(--cyan); filter: drop-shadow(0 0 22px rgba(39,230,255,.55)); }
.feat-num { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .12em; color: var(--cyan); }
.feat-row__body h3 { margin: 12px 0 0; font-size: clamp(1.4rem,2.4vw,1.95rem); color: #fff; letter-spacing: -.02em; line-height: 1.15; }
.feat-row__body > p { margin-top: 12px; color: rgba(255,255,255,.78); line-height: 1.6; }
.feat-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.feat-list li { position: relative; padding-left: 26px; color: rgba(255,255,255,.74); font-size: .93rem; line-height: 1.5; }
.feat-list li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* --- Live-Beispiele unter der Landkarte --- */
.am-examples { margin-top: clamp(34px,4vw,56px); }
.am-examples__title { text-align: center; color: #fff; font-size: clamp(1.3rem,2.4vw,1.7rem); letter-spacing: -.02em; }
.am-examples__grid { margin-top: clamp(20px,3vw,32px); display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,22px); }
.am-ex { padding: 22px 22px 20px; border-radius: 20px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10); display: flex; flex-direction: column; gap: 16px;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease); }
.am-ex:hover { transform: translateY(-3px); border-color: rgba(39,230,255,.34); box-shadow: 0 0 34px rgba(39,230,255,.14); }
.am-ex__msg { padding: 14px 16px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.9); font-size: .92rem; line-height: 1.5; font-style: italic; }
.am-ex__route { display: flex; align-items: center; gap: 10px; font-size: .86rem; font-weight: 600; color: rgba(255,255,255,.82); }
.am-ex__route i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.am-ex__route b { color: #fff; font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .feat-row, .feat-row:nth-child(even) { grid-template-columns: 1fr; }
  .feat-row__media, .feat-row:nth-child(even) .feat-row__media { order: 0; aspect-ratio: 16/9; }
}
@media (max-width: 720px) {
  .vs-grid { grid-template-columns: 1fr; }
  .am-examples__grid { grid-template-columns: 1fr; }
}

/* ---------- Responsive (bestehend) ---------- */
@media (max-width: 720px) {
  .roi-grid { grid-template-columns: 1fr; }
  .gen-benefits { grid-template-columns: 1fr; }
  .automap__panel { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; }
  .automap__hint { display: none; }
  .amnode { padding: 9px 13px 9px 10px; }
  .amnode__txt small { display: none; }
}

/* ======================================================================
   HINTERGRUND-PARTIKELFELD (ganze Seite, hinter allem)
   ====================================================================== */
.ki-field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; opacity: .9;
}

/* ======================================================================
   DREHBARES AUTOMATISIERUNGS-RAD — Mietvertrags-Digitalisierung
   ====================================================================== */
.mietflow-sec { position: relative; }
.mietwheel {
  position: relative; width: min(640px, 92vw); aspect-ratio: 1;
  margin: clamp(30px, 5vw, 56px) auto 0; touch-action: pan-y; outline: none;
}
.mietwheel.is-ready { cursor: grab; }
.mietwheel.is-grabbing { cursor: grabbing; }

/* --- Zifferblatt-Ebene (SVG): Ringe, Skala, Fortschrittsbogen --- */
.mietwheel__dial {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none; overflow: visible;
}
.mw-ring-outer { stroke: rgba(255,255,255,.10); stroke-width: .4; }
.mw-ring-mid   { stroke: rgba(255,255,255,.06); stroke-width: .3; stroke-dasharray: .5 2.4; }
.mw-ring-inner { stroke: rgba(82,113,255,.30); stroke-width: .5; }
/* feine Skala rundherum (72 Striche) */
.mw-ticks {
  stroke: rgba(120,150,255,.35); stroke-width: 2.4;
  stroke-dasharray: .35 .65; transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .mw-ticks { animation: mw-spin 90s linear infinite; }
}
@keyframes mw-spin { to { transform: rotate(360deg); } }
/* Fortschritts-Track + leuchtender Bogen (oben beginnend) */
.mw-track {
  stroke: rgba(255,255,255,.07); stroke-width: 1.1;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.mw-progress {
  stroke: url(#mwArc); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: var(--seg, 11) 100;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dasharray .55s var(--ease);
  filter: drop-shadow(0 0 3px rgba(39,230,255,.8));
}

/* --- Leuchtender Zeiger oben (Beam auf den aktiven Schritt) --- */
.mietwheel__marker {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 16px; border-radius: 50%; z-index: 4; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, #eafdff, var(--cyan));
  box-shadow: 0 0 14px var(--cyan), 0 0 34px rgba(39,230,255,.7);
}
.mietwheel__marker::before {
  content: ""; position: absolute; left: 50%; top: 15px; transform: translateX(-50%);
  width: 2px; height: 11%; height: clamp(30px, 8vw, 64px);
  background: linear-gradient(180deg, var(--cyan), rgba(39,230,255,0));
  opacity: .55;
}
.mietwheel__marker::after {
  content: ""; position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--cyan); opacity: .9;
}
.mietwheel__ring { position: absolute; inset: 0; z-index: 2; }
.mietwheel__item {
  position: absolute; left: 50%; top: 50%; width: clamp(78px, 13vw, 106px);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 8px 4px; border: 0; background: none; cursor: pointer;
  transform: translate(-50%, -50%); will-change: transform, opacity;
  -webkit-tap-highlight-color: transparent;
}
.mietwheel__ico {
  position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 32% 22%, rgba(255,255,255,.12), rgba(255,255,255,.02) 60%),
    rgba(16,12,48,.55);
  border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85); flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 20px -12px rgba(0,0,0,.7);
  backdrop-filter: blur(3px);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease),
              background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.mietwheel__ico svg { width: 26px; height: 26px; }
.mietwheel__label {
  font-size: .75rem; font-weight: 600; text-align: center; line-height: 1.2;
  letter-spacing: -.01em; color: rgba(255,255,255,.62); transition: color .3s;
}
.mietwheel__item.is-active .mietwheel__ico {
  background:
    radial-gradient(120% 120% at 30% 18%, rgba(39,230,255,.42), rgba(82,113,255,.16) 65%),
    rgba(16,12,48,.4);
  border-color: rgba(39,230,255,.9); color: #fff;
  box-shadow: 0 0 30px rgba(39,230,255,.6), 0 0 60px rgba(82,113,255,.28),
              inset 0 0 20px rgba(39,230,255,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.mietwheel__item.is-active .mietwheel__label { color: #fff; }

/* --- Mitte als leuchtende Glas-„Anzeige" --- */
.mietwheel__hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 51%; aspect-ratio: 1; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 9%; text-align: center; z-index: 3; pointer-events: none;
  background:
    radial-gradient(circle at 50% 34%, rgba(35,24,96,.92), rgba(10,6,40,.9) 72%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 46px rgba(82,113,255,.16), inset 0 1px 0 rgba(255,255,255,.10),
              0 26px 60px -28px rgba(0,0,0,.75);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.mietwheel__hub-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--cyan);
  text-transform: uppercase; }
.mietwheel__hub-eyebrow [data-hubnum] { color: #eafdff; }
.mietwheel__hub-title { margin: 9px 0 0; font-size: clamp(1rem, 1.9vw, 1.32rem); color: #fff; letter-spacing: -.02em; line-height: 1.18; }
.mietwheel__hub-text { margin: 11px 0 0; font-size: clamp(.84rem, 1.4vw, .9rem); color: rgba(255,255,255,.78); line-height: 1.5; }
.mietwheel__hub-bar { display: block; margin: 16px auto 0; width: 74%; height: 4px; border-radius: 4px; background: rgba(255,255,255,.10); overflow: hidden; }
.mietwheel__hub-bar i { display: block; height: 100%; width: 11%; border-radius: 4px;
  background: linear-gradient(90deg, var(--royal), var(--cyan)); box-shadow: 0 0 10px rgba(39,230,255,.7);
  transition: width .5s var(--ease); }

.mietwheel__controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: clamp(20px, 3vw, 30px); }
.mietwheel__arrow {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(39,230,255,.4); color: var(--cyan);
  transition: transform .2s var(--ease), box-shadow .3s, background .25s, border-color .3s;
}
.mietwheel__arrow svg { width: 24px; height: 24px; }
.mietwheel__arrow:hover { transform: scale(1.08); background: rgba(39,230,255,.12);
  border-color: rgba(39,230,255,.8); box-shadow: 0 0 26px rgba(39,230,255,.35); }
.mietwheel__arrow:active { transform: scale(.95); }
.mietwheel__hint { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* Fallback ohne JS: lesbare Icon-Liste statt überlagerter Kreise */
.mietwheel:not(.is-ready) { aspect-ratio: auto; width: 100%; max-width: 780px; }
.mietwheel:not(.is-ready) .mietwheel__dial,
.mietwheel:not(.is-ready) .mietwheel__marker,
.mietwheel:not(.is-ready) .mietwheel__hub { display: none; }
.mietwheel:not(.is-ready) .mietwheel__ring { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.mietwheel:not(.is-ready) .mietwheel__item { position: static; transform: none; opacity: 1; width: 110px; }

@media (max-width: 560px) {
  .mietwheel__hub { width: 49%; padding: 0 7%; }
  .mietwheel__label { font-size: .66rem; }
  .mietwheel__ico { width: 44px; height: 44px; }
  .mietwheel__ico svg { width: 21px; height: 21px; }
  .mietwheel__arrow { width: 46px; height: 46px; }
  /* aktiver Punkt oben: Label ausblenden (Titel steht groß in der Mitte) */
  .mietwheel__item.is-active .mietwheel__label { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Woher die Zahlen kommen
   Auf dieser Seite stehen Richtwerte der Branche, keine Messung an
   einzelnen Projekten. Das gehört dazu — eine Zahl ohne Herkunft ist
   eine Behauptung. Diese Seite lädt grund.css nicht (sie bleibt dunkel),
   deshalb steht die Regel hier.
   -------------------------------------------------------------------------- */
.ki-auto-page .stats-quelle {
  margin: clamp(14px, 2vw, 20px) 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .58);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Abschnittsköpfe mittig — wie auf der Startseite und den übrigen
   Leistungsseiten. Diese Seite lädt grund.css nicht (ihr Dunkel-Design
   steht bewusst für sich), deshalb steht die Regel hier noch einmal.
   Vorher standen zwei Köpfe zentriert und fünf linksbündig auf halber
   Breite — dieselbe Seite, zwei Haltungen.
   -------------------------------------------------------------------------- */
.ki-auto-page .ldx-head {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.ki-auto-page .ldx-head p {
  max-width: 62ch;
  margin-inline: auto;
}
.ki-auto-page .stats-quelle,
.ki-auto-page .ch-quelle {
  margin-inline: auto;
  text-align: center;
}

/* Schmale Geräte: zentrierter Fließtext ist schwerer zu lesen, das Auge
   findet den Zeilenanfang nicht wieder. Ab hier wieder linksbündig. */
@media (max-width: 640px) {
  .ki-auto-page .ldx-head { text-align: left; }
  .ki-auto-page .ldx-head p,
  .ki-auto-page .stats-quelle,
  .ki-auto-page .ch-quelle { margin-inline: 0; text-align: left; }
}

/* Der Fließtext in der Abschlusskarte stand hier vorher auf 76 Prozent
   Deckkraft. Beim Feinschliff der übrigen Seiten habe ich den Wert in
   site.css auf 86 Prozent angehoben. Diese Seite ist fertig und soll
   unverändert bleiben, deshalb hole ich den alten Wert hier gezielt
   zurück. Die zwei Klassen wiegen schwerer als die eine in site.css,
   die Reihenfolge der Dateien spielt damit keine Rolle. */
.ki-auto-page .cta-card p { color: rgba(255, 255, 255, .76); }

/* Der Knopf im Kopfbereich springt zu "#landkarte". Weil die Kopfleiste
   fest über der Seite liegt und im gescrollten Zustand 84 Pixel misst,
   verschwand die Überschrift des Zielabschnitts genau darunter. Auf allen
   übrigen Seiten habe ich das in grund.css geregelt; diese Seite lädt
   grund.css nicht, deshalb steht die Regel hier. Sie verschiebt nichts
   am Aufbau, sie ändert nur, wo der Sprung endet. */
.ki-auto-page #ablauf,
.ki-auto-page #landkarte { scroll-margin-top: 104px; }

@media (max-width: 720px) {
  .ki-auto-page #ablauf,
  .ki-auto-page #landkarte { scroll-margin-top: 86px; }
}