/* =========================================================
   allrounderX – Designsystem der Website
   Farben, Maße und Bausteine. Keine Fremdbibliothek.
   Die Marke: Wortmarke in Tiefschwarzblau, das X im Verlauf
   Cyan (#00b9fe) → Blau (#0066fd) → Tiefblau (#0120a8) – aus der Logovorlage gemessen.
   ========================================================= */

:root {
  --navy: #0a1221;
  --navy-2: #0f1d3a;
  --navy-3: #16295a;
  --ink: #0a1221;
  --text: #1e293b;
  --muted: #5c636e;
  --accent: #0066fd;
  --accent-dunkel: #0047c2;
  --accent-hell: #e8f1ff;
  --cyan: #00b9fe;
  --tiefblau: #0120a8;
  --verlauf: linear-gradient(180deg, #00b9fe 0%, #0066fd 55%, #0120a8 100%);
  --verlauf-quer: linear-gradient(90deg, #00b9fe 0%, #0066fd 60%, #0120a8 100%);
  /* Der Name bleibt, der Wert ist die helle Akzentfarbe der Marke: Er steht auf dunklem Grund. */
  --gelb: #4fd0ff;
  --mint: #22c55e;
  --mint-hell: #e8f9ee;
  --sky: #38bdf8;
  --rot: #ef4444;
  --bg: #f6f8fc;
  --weiss: #ffffff;
  --rand: #e5eaf2;
  --radius: 18px;
  --radius-klein: 10px;
  --schatten: 0 10px 30px rgba(11, 27, 58, 0.10);
  --schatten-gross: 0 30px 80px rgba(11, 27, 58, 0.22);
  --schrift: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --breite: 1180px;
  --uebergang: 220ms cubic-bezier(.2,.7,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--weiss);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; color: var(--ink); letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-weight: 900; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 850; }
h3 { font-size: 1.32rem; font-weight: 750; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
strong { color: var(--ink); }
.container { width: min(var(--breite), 100% - 2.5rem); margin-inline: auto; }
.nur-lesegeraet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}
.kopf.geschrumpft { border-color: var(--rand); box-shadow: 0 6px 24px rgba(11,27,58,.06); }
/* Sieben Menüpunkte und zwei Knöpfe: Abstände und Schrift sind so gesetzt, dass die Zeile in den 1180 Pixeln
   des Inhalts Platz hat (gemessen: 1160 nötig). Mit den früheren, weiteren Maßen wären es 1219 gewesen. */
.kopf__zeile { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.kopf__aktionen .knopf { padding: .75rem 1.2rem; font-size: .95rem; }
.logo { display: flex; align-items: center; gap: .6rem; font-weight: 900; font-size: 1.28rem; color: var(--ink); letter-spacing: -0.02em; }
.logo svg { width: 40px; height: 40px; }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo span em { font-style: normal; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.navigation { display: flex; gap: 1.15rem; margin-left: auto; font-weight: 600; font-size: .93rem; }
/* Nur die Punkte der Leiste selbst: In ihr hängt auch die Tafel des Funktionsmenüs, und deren Verweise sind Einträge, keine Menüpunkte. */
.navigation > a, .navigation__knopf { position: relative; padding: .3rem 0; color: var(--text); white-space: nowrap; }
.navigation > a::after, .navigation__knopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--uebergang); }
.navigation > a:hover::after, .navigation > a.aktiv::after, .navigation__knopf:hover::after, .navigation__knopf.aktiv::after, .navigation__knopf[aria-expanded="true"]::after { transform: scaleX(1); }

/* ---------- Funktionsmenü: Tafel unter der Kopfzeile (js/main.js baut sie) ---------- */
.navigation__knopf { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none; font: inherit; cursor: pointer; }
.navigation__knopf svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--uebergang); }
.navigation__knopf[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Die Hülle beginnt 22 Pixel über der Unterkante der Kopfzeile: Zwischen Knopf und Tafel liegt sonst ein
   Streifen, der zu keinem von beiden gehört, und die Maus verlöre die Tafel auf dem Weg dorthin. */
.funktionsmenue { position: absolute; left: 0; right: 0; top: calc(100% - 22px); width: min(var(--breite), 100% - 2.5rem); margin-inline: auto; padding-top: 28px; font-weight: 400; }
.funktionsmenue[hidden] { display: none; }
.funktionsmenue__tafel { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 1.5rem; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; padding: 1.6rem; border: 1px solid var(--rand); border-radius: 24px; background: #fff; box-shadow: var(--schatten-gross); animation: menueauf .18s ease-out; }
@keyframes menueauf { from { opacity: 0; transform: translateY(-6px); } }
.bewegung-aus .funktionsmenue__tafel { animation: none; }
.funktionsmenue__spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem 1rem; align-items: start; }
.funktionsmenue__titel { margin: 0 0 .5rem; padding: 0 .7rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.funktionsmenue__eintrag { display: flex; align-items: flex-start; gap: .8rem; padding: .6rem .7rem; border-radius: 12px; transition: background var(--uebergang); }
.funktionsmenue__eintrag:hover, .funktionsmenue__eintrag:focus-visible { background: var(--bg); }
.funktionsmenue__eintrag[aria-current="page"] { background: var(--accent-hell); }
.funktionsmenue__eintrag b { display: block; font-size: .97rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.funktionsmenue__eintrag small { display: block; margin-top: .15rem; font-size: .83rem; line-height: 1.4; color: var(--muted); }
/* Zweifarbige Zeichen: Umriss in der Schriftfarbe, eine helle Fläche dahinter und ein Strich oder Fleck im Akzent. */
.menuezeichen { flex: none; width: 36px; height: 36px; margin-top: .05rem; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.menuezeichen .f { fill: #d9e9ff; stroke: none; transition: fill var(--uebergang); }
.menuezeichen .a { stroke: var(--accent); }
.menuezeichen .p { fill: var(--accent); stroke: none; }
.funktionsmenue__eintrag:hover .menuezeichen .f { fill: #bcd9ff; }
.menuezeichen .funkeln { transform-box: fill-box; transform-origin: center; animation: funkeln 2.6s ease-in-out infinite; }
.menuezeichen .funkeln--2 { animation-delay: 1.3s; }
@keyframes funkeln { 50% { opacity: .3; transform: scale(.7); } }
.bewegung-aus .menuezeichen .funkeln { animation: none; }
.funktionsmenue__demo { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; padding: 1.4rem; border-radius: var(--radius); background: radial-gradient(120% 90% at 100% 0%, #16295a 0%, var(--navy) 62%); color: #c9d5ea; }
.funktionsmenue__demo .funktionsmenue__titel { margin: 0; padding: 0; color: #fff; }
.funktionsmenue__demo p { margin: 0; font-size: .9rem; line-height: 1.5; }
.funktionsmenue__demo .knopf { margin-top: auto; align-self: stretch; padding: .75rem 1rem; font-size: .95rem; }
.funktionsmenue__demo .knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.funktionsmenue__neben { align-self: center; font-size: .83rem; font-weight: 600; color: #a9b6cc; text-decoration: underline; text-underline-offset: 3px; }
.funktionsmenue__neben:hover { color: #fff; }
/* ---------- Gewerkeseite: je Gewerk eine Karte, auf die das Gewerkemenü springt ---------- */
.gewerkkarte { display: flex; flex-direction: column; scroll-margin-top: 100px; }
.gewerkkarte h3 { display: flex; align-items: center; gap: .75rem; }
.gewerkkarte .menuezeichen { width: 40px; height: 40px; margin: 0; }
.gewerkkarte > p { color: var(--muted); font-size: .98rem; }
.gewerkkarte ul { display: grid; gap: .4rem; margin: 0 0 1.2rem; font-size: .95rem; }
.gewerkkarte li { position: relative; padding-left: 1.2rem; }
.gewerkkarte li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.gewerkkarte .textverweis { margin-top: auto; font-size: .93rem; }
/* Die angesprungene Karte hebt sich ab: Auf einer Seite mit vierzehn gleichen Karten sagt nur das, welche gemeint war. */
.gewerkkarte:target { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-hell); }
/* Die Vorzeile IN der Hauptüberschrift statt darüber: Sie trägt das Wort, nach dem gesucht wird
   („Handwerkersoftware für Elektrobetriebe“), der Satz darunter bleibt der Werbesatz. Über der Überschrift
   war sie für eine Suchmaschine loser Text, und die Hauptüberschrift nannte das Thema der Seite nicht.
   Aussehen soll sie wie vorher – deshalb nimmt die Regel zurück, was sie von der Überschrift erbt. */
.seitenkopf h1 .vorzeile { display: flex; width: fit-content; max-width: 100%; margin: 0 auto 1rem; line-height: 1.6; letter-spacing: .04em; text-align: center; }
/* ---------- Seiten je Gewerk (handwerkersoftware-….html, erzeugt von server/gewerkeseiten.py) ---------- */
.gewerkweg__nummer { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .9rem; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: .95rem; }
.gewerkweg p { margin: 0; }
.gewerkweiter { max-width: 820px; margin: 2rem auto 0; text-align: center; font-size: .95rem; line-height: 2; color: var(--muted); }
/* ---------- Über uns ---------- */
.weg__nummer { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1.1rem; border-radius: 14px; background: var(--verlauf); color: #fff; font-weight: 900; font-size: 1rem; letter-spacing: .02em; }
.weg .karte p { margin: 0; color: var(--muted); }
/* Die Messlatte zeigt ein Verhältnis, keine Messwerte: Der Balken der anderen läuft vor der Marke aus,
   statt an einer Zahl zu enden, die niemand gemessen hat. */
.messlatte { padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; box-shadow: var(--schatten); }
.messlatte__titel { margin: 0 0 .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.messlatte__zeile { margin-top: 1.5rem; }
.messlatte__zeile span { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; font-weight: 700; color: var(--ink); }
.messlatte__zeile b { font-size: .88rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.messlatte__zeile:last-of-type b { color: var(--accent-dunkel); }
.messlatte__bahn { position: relative; height: 20px; border-radius: 999px; background: var(--bg); }
.messlatte__bahn i { display: block; height: 100%; border-radius: 999px; }
.messlatte__bahn--andere i { width: 64%; background: repeating-linear-gradient(135deg, #c3ccdb 0 8px, #d8dfeb 8px 16px); -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.messlatte__bahn--wir i { width: 95%; background: var(--verlauf-quer); box-shadow: 0 6px 16px rgba(0,102,253,.3); }
.messlatte__bahn::after { content: ""; position: absolute; left: 70%; top: -8px; bottom: -8px; width: 2px; border-radius: 2px; background: var(--ink); }
.messlatte__fuss { margin: 1.4rem 0 0; font-size: .84rem; color: var(--muted); }
/* Zwei Klassen, weil die Grundregel der Liste weiter hinten steht und bei gleicher Stärke gewänne. */
.merkmal__liste.merkmal__liste--nein svg { color: var(--rot); }
.leitsatz { padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: linear-gradient(160deg, rgba(0,102,253,.28), rgba(255,255,255,.04) 70%); }
.leitsatz small { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gelb); }
.leitsatz h3 { margin: .7rem 0 .9rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 850; color: #fff; }
.leitsatz p { margin: 0; color: #c7d2e6; }
/* Neben drei Spalten bleibt unter 1040 Pixeln kein Platz für die Demo-Karte; sie legt sich als Zeile darunter. */
@media (max-width: 1040px) {
  .funktionsmenue__tafel { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.2rem; }
  .funktionsmenue__demo { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .6rem 1.2rem; padding: 1rem 1.2rem; }
  .funktionsmenue__demo p:not(.funktionsmenue__titel) { flex: 1 1 260px; }
  .funktionsmenue__demo .knopf { margin-top: 0; align-self: center; }
}
.kopf__aktionen { display: flex; gap: .7rem; align-items: center; }
.kopf__schalter { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--rand); border-radius: 12px; background: #fff; cursor: pointer; }
.kopf__schalter span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--ink); border-radius: 2px; transition: transform var(--uebergang), opacity var(--uebergang); }
.kopf__schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.kopf__schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf__schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.45rem; border-radius: 999px; font-weight: 700; font-size: 1rem;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform var(--uebergang), box-shadow var(--uebergang), background var(--uebergang), color var(--uebergang);
}
.knopf:hover { transform: translateY(-2px); }
.knopf--primaer { background: var(--verlauf-quer); color: #fff; box-shadow: 0 10px 24px rgba(0,102,253,.35); }
.knopf--primaer:hover { filter: brightness(1.08); box-shadow: 0 14px 30px rgba(0,102,253,.45); }
.knopf--hell { background: #fff; color: var(--ink); border-color: var(--rand); }
.knopf--hell:hover { border-color: var(--ink); }
.knopf--geist { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.knopf--geist:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.knopf--gross { padding: 1.05rem 1.9rem; font-size: 1.08rem; }
.knopf svg { width: 18px; height: 18px; }

/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(4rem, 8vw, 7rem) 0; }
.abschnitt--grau { background: var(--bg); }
.abschnitt--dunkel { background: var(--navy); color: #cbd5e1; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: #fff; }
.abschnitt--dunkel strong { color: #fff; }
.abschnitt--eng { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.abschnitt__kopf { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.abschnitt__kopf p { font-size: 1.15rem; color: var(--muted); }
.abschnitt--dunkel .abschnitt__kopf p { color: #a9b6cc; }
.vorzeile { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .35rem .85rem; border-radius: 999px; background: var(--accent-hell); color: var(--accent-dunkel); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.abschnitt--dunkel .vorzeile { background: rgba(255,255,255,.1); color: var(--gelb); }
.vorzeile::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- Held (Startbereich) ---------- */
.held { position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 80% -10%, #0a3fd0 0%, var(--navy) 55%, #060b18 100%); color: #fff; padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(4rem, 8vw, 7rem); }
.held::before, .held::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; }
.held::before { width: 520px; height: 520px; left: -160px; bottom: -220px; background: var(--accent); animation: schweben 14s ease-in-out infinite; }
.held::after { width: 420px; height: 420px; right: -120px; top: -160px; background: #2563eb; animation: schweben 18s ease-in-out infinite reverse; }
@keyframes schweben { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px,-30px); } }
.held__raster { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); pointer-events: none; }
.held .container { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.held h1 { color: #fff; margin-bottom: 1.2rem; }
.held h1 .markiert { position: relative; display: inline-block; color: var(--gelb); }
.held h1 .markiert::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .28em; background: var(--accent); opacity: .55; border-radius: 4px; z-index: -1; transform: scaleX(0); transform-origin: left; animation: unterstreichen .9s .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes unterstreichen { to { transform: scaleX(1); } }
.held__text { font-size: 1.22rem; color: #c7d2e6; max-width: 560px; }
.held__knoepfe { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 1.8rem; }
.held__hinweise { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.8rem; font-size: .92rem; color: #a9b6cc; }
.held__hinweise li { display: flex; align-items: center; gap: .45rem; }
.held__hinweise svg { width: 18px; height: 18px; color: var(--mint); }
.held__slogan { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.4rem; padding: .45rem 1rem .45rem .6rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); font-weight: 700; font-size: .95rem; }
.held__slogan .abzeichen { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--verlauf); font-size: .85rem; font-weight: 900; color: #fff; }

/* ---------- Geräte-Rahmen (Mockups) ---------- */
.geraet { position: relative; background: #fff; border-radius: 16px; box-shadow: var(--schatten-gross); overflow: hidden; color: var(--text); }
.geraet__leiste { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; background: #eef2f8; border-bottom: 1px solid var(--rand); }
.geraet__leiste i { width: 10px; height: 10px; border-radius: 50%; background: #d3dae6; }
.geraet__leiste i:nth-child(1) { background: #ff5f57; } .geraet__leiste i:nth-child(2) { background: #febc2e; } .geraet__leiste i:nth-child(3) { background: #28c840; }
.geraet__adresse { flex: 1; margin-left: .6rem; padding: .25rem .7rem; border-radius: 6px; background: #fff; font-size: .72rem; color: var(--muted); }
.geraet__inhalt { padding: 1rem; }
.held .geraet { animation: hereinschweben 1s .2s cubic-bezier(.2,.7,.2,1) both; transform-origin: center; }
@keyframes hereinschweben { from { opacity: 0; transform: translateY(30px) rotate(-1deg); } to { opacity: 1; transform: none; } }

/* Dashboard-Mockup im Held */
.dash { display: grid; grid-template-columns: 150px 1fr; min-height: 380px; font-size: .78rem; }
.dash__menue { background: var(--navy); color: #a9b6cc; padding: .9rem .7rem; display: flex; flex-direction: column; gap: .35rem; }
.dash__menue b { color: #fff; font-size: .82rem; margin-bottom: .5rem; display: flex; align-items: center; gap: .4rem; }
.dash__menue span { padding: .35rem .5rem; border-radius: 6px; }
.dash__menue span.aktiv { background: rgba(255,255,255,.12); color: #fff; }
.dash__haupt { padding: .9rem; background: var(--bg); display: flex; flex-direction: column; gap: .7rem; }
.dash__kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.kachel { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: .7rem .8rem; }
.kachel small { display: block; color: var(--muted); font-size: .68rem; }
.kachel b { font-size: 1.15rem; color: var(--ink); }
.kachel .trend { color: var(--mint); font-weight: 700; font-size: .68rem; margin-left: .3rem; }
.dash__diagramm { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: .7rem .8rem; }
.balken { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: .4rem; }
.balken i { flex: 1; background: linear-gradient(180deg, var(--accent), #7cc4ff); border-radius: 4px 4px 0 0; transform-origin: bottom; animation: wachsen 1.2s cubic-bezier(.2,.7,.2,1) both; height: var(--h); }
.balken i:nth-child(odd) { background: linear-gradient(180deg, var(--navy-3), #7aa2ff); }
@keyframes wachsen { from { transform: scaleY(0); } }
.dash__liste { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: .5rem .8rem; }
.dash__liste div { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed var(--rand); }
.dash__liste div:last-child { border-bottom: 0; }
.status { padding: .12rem .5rem; border-radius: 999px; font-size: .66rem; font-weight: 700; }
.status--gruen { background: var(--mint-hell); color: #15803d; }
.status--gelb { background: #fff7db; color: #a16207; }
.status--rot { background: #fee2e2; color: #b91c1c; }
.status--blau { background: #e0f2fe; color: #0369a1; }
.hinweis-schwebend { position: absolute; display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: #fff; border-radius: 12px; box-shadow: var(--schatten); font-size: .8rem; font-weight: 600; color: var(--ink); animation: einblenden .6s cubic-bezier(.2,.7,.2,1) both; }
.hinweis-schwebend .punkt { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .8rem; }
.hinweis-schwebend--1 { right: -14px; top: -18px; animation-delay: 1.1s; }
.hinweis-schwebend--2 { left: -22px; bottom: 70px; animation-delay: 1.6s; }
.hinweis-schwebend--3 { right: 30px; bottom: -14px; animation-delay: 2.1s; }
@keyframes einblenden { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.held__bild { position: relative; }

/* ---------- Vertrauensleiste ---------- */
.vertrauen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.vertrauen li { text-align: center; padding: 1.4rem 1rem; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); }
/* Die Zahl ist die Aussage und steht groß. Die Schrift wächst mit der Breite: Bei vier Karten knapp über
   1024 Pixeln bleiben je Karte 200 Pixel, und „0 Datenabfluss“ soll dort in einer Zeile stehen. */
.vertrauen b { display: block; margin-bottom: .35rem; font-size: clamp(2.4rem, 3.6vw, 3.2rem); font-weight: 900; line-height: 1.1; color: var(--navy); letter-spacing: -0.03em; }
.vertrauen b em { font-style: normal; color: var(--accent); }
/* Ein Wort hinter der Zahl steht kleiner als sie – ein Pluszeichen nicht. */
.vertrauen b em.wort { font-size: .5em; letter-spacing: -0.01em; }
/* Nur die Zeile unter der Zahl. Ohne das „>“ traf die Regel auch den Zähler in der Zahl selbst:
   Die Zahl stand grau und in Textgröße neben einem großen Pluszeichen. */
.vertrauen li > span { color: var(--muted); font-size: .95rem; }

/* ---------- Karten und Raster ---------- */
.raster { display: grid; gap: 1.4rem; }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
.karte { position: relative; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 1.7rem; transition: transform var(--uebergang), box-shadow var(--uebergang), border-color var(--uebergang); }
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: #d4dceb; }
.karte__symbol { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-hell); color: var(--accent-dunkel); margin-bottom: 1.1rem; }
.karte__symbol svg { width: 26px; height: 26px; }
.karte__symbol--blau { background: #e6edff; color: var(--navy-3); }
.karte__symbol--gruen { background: var(--mint-hell); color: #15803d; }
.karte__symbol--gelb { background: #fff4d6; color: #a16207; }
.karte__symbol--himmel { background: #e0f2fe; color: #0369a1; }
.karte p { color: var(--muted); margin-bottom: .8rem; }
.karte .besser { margin-top: auto; }
.abschnitt--dunkel .karte { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.abschnitt--dunkel .karte p { color: #a9b6cc; }
.abschnitt--dunkel .karte:hover { border-color: rgba(255,255,255,.25); box-shadow: none; }

/* „Besser als andere“-Hinweis */
.besser { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .9rem; border-radius: 12px; background: var(--mint-hell); color: #14532d; font-size: .92rem; line-height: 1.45; }
.besser svg { flex: none; width: 18px; height: 18px; margin-top: .15rem; color: #16a34a; }
.besser b { color: #14532d; }
.abschnitt--dunkel .besser { background: rgba(34,197,94,.14); color: #bbf7d0; }
.abschnitt--dunkel .besser b { color: #dcfce7; }

/* ---------- Wechselnde Merkmalsabschnitte ---------- */
.merkmal { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; padding: clamp(2.5rem, 6vw, 5rem) 0; }
.merkmal + .merkmal { border-top: 1px solid var(--rand); }
.merkmal--umgekehrt .merkmal__text { order: 2; }
.merkmal__text h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.merkmal__text > p { font-size: 1.08rem; color: var(--muted); }
.merkmal__liste { margin: 1.2rem 0 1.4rem; display: grid; gap: .6rem; }
.merkmal__liste li { display: flex; gap: .65rem; align-items: flex-start; }
.merkmal__liste svg { flex: none; width: 22px; height: 22px; color: var(--accent); margin-top: .1rem; }
.merkmal__bild { position: relative; }

/* ---------- Belegfluss-Animation ---------- */
.fluss { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1.4rem; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); }
.fluss__schritt { flex: 1; text-align: center; font-size: .82rem; font-weight: 700; color: var(--muted); position: relative; }
.fluss__schritt i { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto .5rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--rand); color: var(--muted); transition: all .4s; }
.fluss__schritt i svg { width: 24px; height: 24px; }
.fluss__schritt.aktiv i { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.1); box-shadow: 0 8px 20px rgba(0,102,253,.4); }
.fluss__schritt.aktiv { color: var(--ink); }
.fluss__schritt.fertig i { background: var(--mint); border-color: var(--mint); color: #fff; }
/* Der Pfeil gibt nach, die Schritte nicht: In einer halben Spalte bei 1040 Pixeln drückten vier feste
   Pfeile den letzten Schritt 48 Pixel über den Seitenrand. */
.fluss__pfeil { height: 2px; background: var(--rand); position: relative; overflow: hidden; flex: 0 1 40px; min-width: 6px; }
.fluss__pfeil::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateX(-100%); }
.fluss__pfeil.laeuft::after { animation: fliessen .8s linear forwards; }
@keyframes fliessen { to { transform: translateX(0); } }

/* Beleg-Mockup (Rechnung) */
.beleg { background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 1.3rem; box-shadow: var(--schatten); font-size: .8rem; position: relative; overflow: hidden; }
.beleg__kopf { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.beleg__kopf b { font-size: 1rem; color: var(--ink); }
.beleg__kopf small { color: var(--muted); display: block; }
.beleg table { width: 100%; border-collapse: collapse; }
.beleg td { padding: .35rem 0; border-bottom: 1px solid var(--rand); }
.beleg td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.beleg tr.summe td { font-weight: 800; border-bottom: 0; color: var(--ink); font-size: .9rem; }
.beleg tr { animation: zeile-erscheinen .5s both; }
.beleg tr:nth-child(1) { animation-delay: .2s } .beleg tr:nth-child(2) { animation-delay: .5s } .beleg tr:nth-child(3) { animation-delay: .8s } .beleg tr:nth-child(4) { animation-delay: 1.1s } .beleg tr:nth-child(5) { animation-delay: 1.4s }
@keyframes zeile-erscheinen { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.beleg__stempel { position: absolute; right: 22px; bottom: 60px; padding: .4rem .9rem; border: 3px solid var(--mint); color: var(--mint); border-radius: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-12deg) scale(0); animation: stempeln .5s 2s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes stempeln { to { transform: rotate(-12deg) scale(1); } }
.beleg__qr { position: absolute; right: 22px; top: 22px; width: 54px; height: 54px; background:
  linear-gradient(#0f172a,#0f172a) 0 0/16px 16px no-repeat, linear-gradient(#0f172a,#0f172a) 100% 0/16px 16px no-repeat, linear-gradient(#0f172a,#0f172a) 0 100%/16px 16px no-repeat,
  repeating-linear-gradient(90deg,#0f172a 0 4px,transparent 4px 8px) 20px 20px/30px 4px no-repeat, repeating-linear-gradient(0deg,#0f172a 0 4px,transparent 4px 8px) 22px 22px/4px 30px no-repeat,
  repeating-linear-gradient(45deg,#0f172a 0 3px,transparent 3px 7px) 30px 30px/24px 24px no-repeat; border: 3px solid #fff; outline: 1px solid var(--rand); }

/* ---------- Plantafel-Mockup ---------- */
.plantafel { background: #fff; border: 1px solid var(--rand); border-radius: 14px; box-shadow: var(--schatten); overflow: hidden; font-size: .74rem; }
.plantafel__kopf { display: grid; grid-template-columns: 110px repeat(5, 1fr); background: var(--bg); border-bottom: 1px solid var(--rand); }
.plantafel__kopf div { padding: .5rem .6rem; font-weight: 700; color: var(--muted); text-align: center; border-left: 1px solid var(--rand); }
.plantafel__kopf div:first-child { border-left: 0; text-align: left; }
.plantafel__zeile { display: grid; grid-template-columns: 110px repeat(5, 1fr); border-bottom: 1px solid var(--rand); min-height: 46px; }
.plantafel__zeile > div { border-left: 1px solid var(--rand); position: relative; padding: .3rem; }
.plantafel__zeile > div:first-child { border-left: 0; display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink); }
.avatar { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .62rem; font-weight: 800; }
.plan-kachel { border-radius: 6px; padding: .25rem .45rem; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: einblenden .5s both; }
.plan-kachel--rot { outline: 2px solid var(--rot); outline-offset: -2px; background: #fecaca !important; color: #7f1d1d; }
.plan-kachel--abwesend { background: repeating-linear-gradient(135deg,#e2e8f0 0 6px,#f1f5f9 6px 12px) !important; color: var(--muted); }
.plan-kachel.zieht { animation: ziehen 4s ease-in-out infinite; }
@keyframes ziehen { 0%,25% { transform: translate(0,0); } 45%,75% { transform: translate(calc(100% + 8px), 0); box-shadow: 0 10px 20px rgba(0,0,0,.2); } 95%,100% { transform: translate(0,0); } }
.auslastung { display: grid; grid-template-columns: 110px repeat(5, 1fr); background: var(--bg); }
.auslastung div { padding: .35rem; border-left: 1px solid var(--rand); }
.auslastung div:first-child { border-left: 0; font-weight: 700; color: var(--muted); }
.auslastung i { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--mint) var(--p), var(--rand) 0); }

/* ---------- Karten-Mockup ---------- */
.landkarte { position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--schatten); background: #e8eef5; aspect-ratio: 4/3; }
.landkarte svg { width: 100%; height: 100%; }
.nadel { position: absolute; transform: translate(-50%, -100%); }
.nadel__kopf { width: 34px; height: 34px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .7rem; box-shadow: 0 6px 14px rgba(0,0,0,.25); animation: nadel-fallen .6s cubic-bezier(.2,.7,.2,1) both; }
.nadel__kopf span { transform: rotate(45deg); }
.nadel::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 22px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.2); transform: translateX(-50%); animation: pulsieren 2s ease-out infinite; }
@keyframes nadel-fallen { from { opacity: 0; transform: translateY(-40px) rotate(-45deg); } to { opacity: 1; transform: rotate(-45deg); } }
@keyframes pulsieren { 0% { transform: translateX(-50%) scale(.6); opacity: .6; } 100% { transform: translateX(-50%) scale(2.2); opacity: 0; } }
.landkarte__blase { position: absolute; background: #fff; border-radius: 10px; padding: .6rem .8rem; font-size: .75rem; box-shadow: var(--schatten); min-width: 160px; animation: einblenden .5s 1.2s both; }
.landkarte__blase b { display: block; color: var(--ink); }
.landkarte__regler { position: absolute; left: 12px; right: 12px; bottom: 12px; background: #fff; border-radius: 10px; padding: .5rem .8rem; font-size: .72rem; display: flex; align-items: center; gap: .6rem; box-shadow: var(--schatten); }
.landkarte__regler i { flex: 1; height: 6px; border-radius: 3px; background: var(--rand); position: relative; }
.landkarte__regler i::after { content: ""; position: absolute; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 6px rgba(0,0,0,.25); animation: regler 6s ease-in-out infinite; }
@keyframes regler { 0%,100% { left: 10%; } 50% { left: 70%; } }

/* ---------- Zeichnungen (Aufmaß / Elektro) ---------- */
.zeichnung { background: #fff; border: 1px solid var(--rand); border-radius: 14px; box-shadow: var(--schatten); padding: 1rem; }
.zeichnung svg { width: 100%; height: auto; }
.zeichnung .strich { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.sichtbar .zeichnung .strich, .zeichnung.sofort .strich { animation: zeichnen 2.2s ease forwards; }
.zeichnung .strich--2 { animation-delay: .4s !important; } .zeichnung .strich--3 { animation-delay: .8s !important; } .zeichnung .strich--4 { animation-delay: 1.2s !important; } .zeichnung .strich--5 { animation-delay: 1.6s !important; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.zeichnung .mass { font-size: 11px; fill: var(--muted); font-family: var(--schrift); }
.zeichnung .masslinie { stroke: var(--accent); stroke-width: 1.2; }
.zeichnung .glas { fill: #dbeafe; opacity: 0; }
.sichtbar .zeichnung .glas, .zeichnung.sofort .glas { animation: einblenden .6s 2s both; }
.befund { display: flex; gap: .5rem; align-items: center; margin-top: .6rem; padding: .5rem .7rem; border-radius: 8px; font-size: .78rem; font-weight: 600; opacity: 0; }
.befund svg, .zeichnung .befund svg { width: 16px; height: 16px; flex: none; }
.sichtbar .befund, .sofort .befund { animation: einblenden .5s 2.4s both; }
.befund--hinweis { background: #fff7db; color: #a16207; }
.befund--fehler { background: #fee2e2; color: #b91c1c; }
.befund--ok { background: var(--mint-hell); color: #15803d; }

/* ---------- Telefon-Mockup ---------- */
.telefon { width: 300px; margin: 0 auto; background: #0f172a; border-radius: 40px; padding: 12px; box-shadow: var(--schatten-gross), inset 0 0 0 2px #334155; position: relative; }
.telefon::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 90px; height: 24px; border-radius: 14px; background: #0f172a; z-index: 2; }
.telefon__schirm { background: var(--bg); border-radius: 30px; overflow: hidden; height: 600px; display: flex; flex-direction: column; font-size: .78rem; position: relative; }
.telefon__status { display: flex; justify-content: space-between; padding: .8rem 1.3rem .3rem; font-size: .7rem; font-weight: 700; color: var(--ink); }
.telefon__kopf { padding: .6rem 1rem; background: var(--navy); color: #fff; font-weight: 800; display: flex; justify-content: space-between; align-items: center; }
.netz { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 700; }
.netz--offline { background: #fee2e2; color: #b91c1c; }
.netz--online { background: var(--mint-hell); color: #15803d; }
.netz i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.telefon__inhalt { padding: .8rem .8rem 150px; display: flex; flex-direction: column; gap: .6rem; flex: 1; overflow: hidden; }
.app-kachel { background: #fff; border-radius: 12px; padding: .7rem .8rem; border: 1px solid var(--rand); display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.app-kachel b { color: var(--ink); display: block; }
.app-kachel small { color: var(--muted); }
.mappe { position: absolute; left: .8rem; right: .8rem; bottom: .8rem; background: #fff; border-radius: 12px; padding: .7rem .8rem; border: 1px solid var(--rand); box-shadow: var(--schatten); }
.mappe__zeile { display: flex; justify-content: space-between; align-items: center; padding: .25rem 0; }
.mappe__zeile .status { transition: all .4s; }
.telefon__leiste { display: flex; justify-content: space-around; padding: .6rem; background: #fff; border-top: 1px solid var(--rand); color: var(--muted); font-size: .64rem; font-weight: 700; }
.telefon__leiste span.aktiv { color: var(--accent); }
.sync-pfad { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); pointer-events: none; }

/* ---------- Chat-Mockup ---------- */
.chat { background: #fff; border: 1px solid var(--rand); border-radius: 14px; box-shadow: var(--schatten); overflow: hidden; font-size: .82rem; }
.chat__kopf { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: var(--navy); color: #fff; font-weight: 700; }
.chat__kopf .avatar { background: var(--accent); }
.chat__verlauf { padding: 1rem; display: flex; flex-direction: column; gap: .6rem; min-height: 300px; background: #f8fafc; }
.blase { max-width: 82%; padding: .6rem .8rem; border-radius: 14px; line-height: 1.45; opacity: 0; animation: einblenden .4s both; }
.blase--ich { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.blase--held { align-self: flex-start; background: #fff; border: 1px solid var(--rand); border-bottom-left-radius: 4px; }
.blase--held ul { margin-top: .4rem; display: grid; gap: .25rem; }
.blase--held li { padding: .3rem .5rem; background: var(--bg); border-radius: 6px; display: flex; justify-content: space-between; gap: .6rem; }
.blase--kanal { align-self: center; font-size: .7rem; color: var(--muted); background: transparent; padding: .2rem .6rem; border: 1px dashed var(--rand); border-radius: 999px; }
.tippt { display: inline-flex; gap: 3px; }
.tippt i { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: huepfen 1s infinite; }
.tippt i:nth-child(2) { animation-delay: .15s } .tippt i:nth-child(3) { animation-delay: .3s }
@keyframes huepfen { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

/* ---------- Vergleichstabelle ---------- */
.vergleich { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.vergleich th, .vergleich td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; }
.vergleich th { background: var(--bg); font-size: .9rem; color: var(--muted); }
.vergleich th.held-spalte { background: var(--navy); color: #fff; font-size: 1rem; }
.vergleich td.held-spalte { background: #fff8f4; font-weight: 600; color: var(--ink); }
.vergleich tr:last-child td { border-bottom: 0; }
.vergleich td small { display: block; color: var(--muted); font-weight: 400; font-size: .85rem; }
.haken, .kreuz, .halb { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; margin-right: .5rem; vertical-align: middle; font-size: .8rem; font-weight: 800; }
.haken { background: var(--mint-hell); color: #15803d; }
.kreuz { background: #fee2e2; color: #b91c1c; }
.halb { background: #fff7db; color: #a16207; }
.tabelle-rollen { overflow-x: auto; }

/* ---------- Reiter ---------- */
.reiter { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; }
.reiter button { padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--rand); background: #fff; font: inherit; font-weight: 700; font-size: .92rem; color: var(--muted); cursor: pointer; transition: all var(--uebergang); }
.reiter button[aria-selected="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.reiter-tafel[hidden] { display: none; }
.reiter-tafel { animation: einblenden .4s both; }

/* ---------- Preise ---------- */
.preise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }
.preis { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 2rem; position: relative; }
.preis--empfohlen { border-color: var(--accent); box-shadow: 0 20px 50px rgba(0,102,253,.18); transform: translateY(-8px); }
.preis__abzeichen { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: .3rem .9rem; border-radius: 999px; background: var(--verlauf-quer); color: #fff; font-size: .78rem; font-weight: 800; }
.preis h3 { font-size: 1.4rem; }
.preis__betrag { font-size: 2.8rem; font-weight: 900; color: var(--navy); letter-spacing: -0.03em; margin: .6rem 0 .2rem; }
.preis__betrag small { font-size: 1rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
/* Die Staffel nach Teamgröße: Der große Betrag nennt den Einstieg, die Zeilen darunter jede Stufe mit ihrem
   Preis und – kleiner, unter dem Preis – was ein Nutzer damit kostet. */
.preis__staffel { display: grid; gap: .5rem; margin: .7rem 0 .9rem; padding: .8rem .95rem; border-radius: var(--radius-klein); background: var(--bg); }
.preis__staffel p { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 1rem; margin: 0; font-size: .95rem; }
.preis__staffel p + p { padding-top: .5rem; border-top: 1px solid rgba(10,18,33,.08); }
.preis__staffel b { color: var(--ink); font-weight: 800; white-space: nowrap; }
.preis__staffel small { grid-column: 1 / -1; justify-self: end; font-size: .8rem; color: var(--muted); white-space: nowrap; }
.preis--empfohlen .preis__staffel { background: var(--accent-hell); }
.preis__hinweis { color: var(--muted); font-size: .9rem; min-height: 2.6em; }
.preis ul { margin: 1.4rem 0 1.8rem; display: grid; gap: .55rem; }
.preis li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; }
.preis li svg { flex: none; width: 18px; height: 18px; color: var(--mint); margin-top: .2rem; }
.preis .knopf { margin-top: auto; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: .8rem; }
.faq details { background: #fff; border: 1px solid var(--rand); border-radius: 14px; padding: 0 1.4rem; }
.faq summary { cursor: pointer; padding: 1.1rem 0; font-weight: 700; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--accent); transition: transform var(--uebergang); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 1.1rem; }

/* ---------- Aufruf ---------- */
.aufruf { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(2.5rem, 6vw, 4.5rem); background: linear-gradient(135deg, var(--navy) 0%, #0a3fd0 60%, #0120a8 100%); color: #fff; text-align: center; }
.aufruf::before { content: ""; position: absolute; width: 500px; height: 500px; right: -150px; top: -250px; border-radius: 50%; background: var(--accent); filter: blur(80px); opacity: .5; }
.aufruf h2 { color: #fff; position: relative; }
.aufruf p { position: relative; color: #c7d2e6; font-size: 1.15rem; max-width: 620px; margin-inline: auto; }
.aufruf .held__knoepfe { justify-content: center; position: relative; }

/* ---------- Fußzeile ---------- */
.fuss { background: #08132b; color: #a9b6cc; padding: 4rem 0 2rem; font-size: .93rem; }
/* Fünf Spalten, seit die Funktionsseiten eine eigene haben. minmax(0, …) lässt eine Spalte schmaler werden
   als ihr längstes Wort – sonst schöbe „Baustellendokumentation“ den Fuß über den Rand. Das Wort trennt
   dann der Browser nach den Regeln der Seitensprache (hyphens), statt es abzuschneiden. */
.fuss__raster { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 2rem; margin-bottom: 3rem; }
.fuss__raster li { hyphens: auto; }
.fuss h4 { color: #fff; font-size: .95rem; margin-bottom: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.fuss ul { display: grid; gap: .45rem; }
.fuss a:hover { color: #fff; }
.fuss .logo { color: #fff; margin-bottom: .8rem; }
.fuss__unten { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .85rem; }

/* ---------- Inhaltsseiten ---------- */
.seitenkopf { background: linear-gradient(180deg, #0b1b3a, #122653); color: #fff; padding: clamp(3rem, 6vw, 5rem) 0; text-align: center; position: relative; overflow: hidden; }
.seitenkopf h1 { color: #fff; font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
.seitenkopf p { color: #c7d2e6; font-size: 1.15rem; max-width: 720px; margin-inline: auto; }
.sprungleiste { position: sticky; top: 76px; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rand); }
/* Ohne Skript bleibt die Zeile zum Wischen und zeigt ihren Rollbalken: Was nicht hineinpasst, soll man
   wenigstens erreichen. Mit Skript kommen Übersicht, Pfeile und Randverlauf dazu (weiter unten). */
.sprungleiste ul { display: flex; gap: .3rem; overflow-x: auto; padding: .6rem 0; scrollbar-width: thin; }
.sprungleiste ul a { display: block; padding: .45rem .9rem; border-radius: 999px; font-size: .88rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sprungleiste ul a:hover, .sprungleiste ul a.aktiv { background: var(--accent-hell); color: var(--accent-dunkel); }
.gruppe { padding: clamp(3rem, 6vw, 5rem) 0; }
/* Sprungziel des Funktionsmenüs: Die Überschrift soll unter der klebenden Kopfzeile frei stehen. */
.gruppe[id] { scroll-margin-top: 40px; }
.gruppe + .gruppe { border-top: 1px solid var(--rand); }
.gruppe__kopf { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; margin-bottom: 2rem; }
.gruppe__kopf .karte__symbol { margin: 0; width: 60px; height: 60px; }
.gruppe__kopf p { margin: 0; color: var(--muted); }
.merkmal-klein { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.merkmal-klein .karte { display: flex; flex-direction: column; }
.merkmal-klein h3 { display: flex; align-items: center; gap: .6rem; }
.merkmal-klein ul.punkte { margin: 0 0 1rem; display: grid; gap: .35rem; color: var(--text); font-size: .95rem; }
.merkmal-klein ul.punkte li { padding-left: 1.2rem; position: relative; }
.merkmal-klein ul.punkte li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.formular { display: grid; gap: 1rem; background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 2rem; box-shadow: var(--schatten); }
.formular label { display: grid; gap: .35rem; font-weight: 600; font-size: .92rem; }
.formular input, .formular textarea, .formular select { font: inherit; padding: .8rem .9rem; border: 1px solid var(--rand); border-radius: 10px; background: #fff; }
.formular input:focus, .formular textarea:focus, .formular select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.formular .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* Die Meldung unter dem Knopf. „besser“ färbt sie grün und setzt display: flex – damit galt das Attribut
   hidden nicht mehr, und unter dem Knopf stand immer ein leerer grüner Balken. */
.formular__meldung { margin: 0; }
.formular__meldung[hidden] { display: none; }
.formular__meldung--fehler { padding: .75rem .9rem; border-radius: 12px; background: #fdecec; color: #991b1b; font-size: .92rem; line-height: 1.45; }
.formular--sendet button[type="submit"] { opacity: .65; cursor: progress; }
/* Das Lockfeld für Programme: für Menschen weder zu sehen noch mit der Tastatur zu erreichen. */
.formular__falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prosa { max-width: 820px; margin-inline: auto; }
.prosa h2 { font-size: 1.5rem; margin-top: 2rem; }
.prosa p, .prosa li { color: var(--text); }
.prosa ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: .3rem; }
/* Rechtstexte haben drei Ebenen; ohne eigene Maße stünde die dritte so groß da wie die zweite. */
.prosa h3 { font-size: 1.18rem; margin-top: 1.6rem; }
.prosa h4 { font-size: 1rem; margin-top: 1.1rem; letter-spacing: 0; }
.prosa ul { margin-bottom: 1em; }
.prosa a { color: var(--accent-dunkel); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.prosa__kurz { margin: 0 0 1.6rem; padding: 1rem 1.2rem; border-radius: var(--radius-klein); background: var(--mint-hell); color: #14532d; }
.prosa__kurz strong { color: #14532d; }
/* Das Widerspruchsrecht muss sich vom übrigen Text abheben – ein Rahmen statt Großbuchstaben, die niemand liest. */
.prosa__hervor { margin: 0 0 1em; padding: 1rem 1.2rem; border-left: 4px solid var(--accent); border-radius: 0 var(--radius-klein) var(--radius-klein) 0; background: var(--accent-hell); }
.prosa__hervor p:last-child { margin-bottom: 0; }
.prosa__inhalt { display: grid; gap: .25rem; margin: 0 0 1.6rem; padding: 1rem 1.2rem; border: 1px solid var(--rand); border-radius: var(--radius-klein); }
.prosa h2[id] { scroll-margin-top: 96px; }
.prosa__stand { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rand); font-size: .9rem; color: var(--muted); }
/* Ratgeber (server/ratgeber.py): Fließtext wie die Rechtstexte, dazu nummerierte Schritte und Tabellen.
   Die Tabelle steht hier im Text und nicht für sich – deshalb ohne Schatten und mit engeren Zellen. */
.prosa ol { list-style: decimal; padding-left: 1.4rem; display: grid; gap: .45rem; margin-bottom: 1em; }
.prosa li > strong:first-child { color: var(--ink); }
.prosa .tabelle-rollen { margin: 0 0 1.4em; }
.prosa .vergleich { border: 1px solid var(--rand); box-shadow: none; font-size: .95rem; }
.prosa .vergleich th, .prosa .vergleich td { padding: .7rem .9rem; }
.prosa__programm { margin-top: 2.2rem; }
.prosa__programm p { margin-bottom: .5em; }
.ratgeber__stand { margin: 0 0 1rem; font-size: .85rem; }
.platzhalter { background: #fff7db; border: 1px dashed #f59e0b; color: #92400e; padding: .8rem 1rem; border-radius: 10px; font-size: .92rem; }

/* ---------- Erscheinen beim Rollen ---------- */
.erscheint { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.erscheint.sichtbar { opacity: 1; transform: none; }
.erscheint[data-verzoegerung="1"] { transition-delay: .12s } .erscheint[data-verzoegerung="2"] { transition-delay: .24s } .erscheint[data-verzoegerung="3"] { transition-delay: .36s } .erscheint[data-verzoegerung="4"] { transition-delay: .48s }

/* ---------- Laufband der Gewerke ---------- */
.laufband { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.laufband ul { display: flex; gap: .8rem; width: max-content; animation: laufen 40s linear infinite; }
.laufband li { padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); font-weight: 600; white-space: nowrap; color: #dbe4f3; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ---------- Responsiv ---------- */
@media (max-width: 1240px) {
  .navigation { gap: 1rem; font-size: .9rem; }
  .kopf__aktionen .knopf { padding: .65rem 1rem; font-size: .9rem; }
  .kopf__zeile { gap: 1.2rem; }
}
/* Das Telefonmenü beginnt bei 980 Pixeln und nicht bei 800 wie der übrige Umbruch: Sieben Menüpunkte samt
   Knopf brauchen in der engsten Fassung 910 Pixel. js/main.js fragt dieselbe Breite. */
@media (max-width: 980px) {
  .navigation, .kopf__aktionen { display: none; }
  .kopf__schalter { display: block; }
  /* Mit aufgeklapptem Fach ist das Menü länger als ein Telefon hoch: Es rollt in sich. */
  .kopf.offen .navigation { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; gap: 0; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-bottom: 1px solid var(--rand); padding: .6rem 1.25rem 1rem; font-size: .96rem; box-shadow: var(--schatten); }
  .kopf.offen .navigation > a, .kopf.offen .navigation__knopf { padding: .8rem 0; border-bottom: 1px solid var(--rand); }
  .kopf.offen .navigation__knopf { justify-content: space-between; width: 100%; text-align: left; }
  .kopf.offen .navigation__knopf svg { width: 14px; height: 14px; }
  /* Im Telefonmenü ist die Tafel ein Fach unter ihrem Knopf: ohne Rahmen, eine Spalte, und ohne die
     Karte rechts – der Knopf zur Demo steht am Ende des Menüs ohnehin. */
  .funktionsmenue { position: static; width: auto; padding: 0; }
  .funktionsmenue__tafel { display: block; max-height: none; overflow: visible; padding: .4rem 0 .6rem; border: 0; border-bottom: 1px solid var(--rand); border-radius: 0; box-shadow: none; animation: none; }
  .funktionsmenue__spalten { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .funktionsmenue__titel { margin: .7rem 0 .15rem; padding: 0; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .funktionsmenue__eintrag { align-items: center; padding: .55rem 0; }
  .funktionsmenue__eintrag[aria-current="page"] { margin-inline: -.5rem; padding-inline: .5rem; }
  .funktionsmenue__demo { display: none; }
  .kopf.offen .kopf__aktionen { display: flex; padding-top: 1rem; }
  .kopf.offen .kopf__aktionen .knopf { flex: 1; }
}
@media (max-width: 1024px) {
  .held .container { grid-template-columns: 1fr; }
  .held__bild { max-width: 640px; margin: 1rem auto 0; }
  .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); }
  .vertrauen { grid-template-columns: repeat(2, 1fr); }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
  .preise { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .preis--empfohlen { transform: none; }
}
@media (max-width: 800px) {
  .hinweis-schwebend--1 { right: 8px; top: -14px; }
  .vergleich { min-width: 720px; }
  /* Die Tabellen im Ratgeber haben zwei oder drei Spalten und passen aufs Telefon – nur die mit vier
     (Netto, Steuer, Brutto) rollt für sich, statt ihre Beträge umzubrechen. */
  .prosa .vergleich { min-width: 0; }
  .prosa .vergleich--breit { min-width: 520px; }
  .prosa .vergleich th, .prosa .vergleich td { padding: .6rem .65rem; }
  .telefon { width: 300px; }
  .telefon__schirm { height: 600px; }
  .merkmal, .merkmal-klein, .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }
  .merkmal--umgekehrt .merkmal__text { order: 0; }
  .dash { grid-template-columns: 1fr; }
  .dash__menue { display: none; }
  .hinweis-schwebend--2 { left: 8px; }
  .hinweis-schwebend--1 { right: 8px; }
  .formular .zwei { grid-template-columns: 1fr; }
  .fluss { flex-wrap: wrap; }
  .fluss__pfeil { display: none; }
  .fluss__schritt { flex: 1 1 40%; margin-bottom: 1rem; }
  .gruppe__kopf { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .erscheint { opacity: 1; transform: none; }
}

/* =========================================================
   Aus dem Studio-Entwurf übernommen (Oktober 2026):
   Werkstattfoto im Held, Branchenreiter, Auftragsablauf,
   Beispielraum mit Heizlast-Vorschau, Betriebswissen und
   Sprachbeispiel. Gebaut mit den Farben und Maßen von oben –
   der Entwurf brachte eine eigene Schrift (von Google geladen)
   und ein eigenes Blau mit; beides wäre eine zweite Marke
   auf derselben Seite gewesen.
   ========================================================= */

/* ---------- Rollmaß und Bewegungsschalter ---------- */
.rollmass { position: fixed; top: 0; left: 0; z-index: 80; width: 100%; height: 3px; background: var(--verlauf-quer); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.bewegung-schalter { position: absolute; right: 1.25rem; bottom: 1.1rem; z-index: 3; padding: .4rem .8rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(10,18,33,.65); color: #a9b6cc; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.bewegung-schalter:hover { color: #fff; border-color: rgba(255,255,255,.55); }
/* Dieselbe Wirkung wie die Systemeinstellung „weniger Bewegung“. Anhalten (play-state) wäre der
   kürzere Weg und der falsche: Was noch nicht begonnen hat, bliebe unsichtbar – jede Zeichnung
   weiter unten stünde ohne Striche da. So springt alles in seinen Endzustand. */
.bewegung-aus *, .bewegung-aus *::before, .bewegung-aus *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.bewegung-aus .erscheint { opacity: 1; transform: none; }
.bewegung-aus .rollmass { display: none; }
.branchen button:focus-visible, .ablauf button:focus-visible, .raum button:focus-visible, .raum input:focus-visible, .raum select:focus-visible, .raum summary:focus-visible, .wissen button:focus-visible, .sprachdemo button:focus-visible, .bewegung-schalter:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ---------- Held mit Werkstattfoto ---------- */
.held--foto { min-height: 840px; }
/* Lage, Deckung und Verlauf trägt die Hülle, Foto und Film füllen sie gleich aus. Stünden die Angaben an
   beiden einzeln, schiene das Foto durch den halb deckenden Film hindurch. */
.held__motiv { position: absolute; top: 0; right: 0; width: 64%; height: 100%; opacity: .66; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%); mask-image: linear-gradient(90deg, transparent, #000 32%); pointer-events: none; }
.held__foto, .held__film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% center; }
/* Der Film blendet erst ein, wenn er wirklich läuft, und am Ende wieder aus: Dazwischen steht das Foto,
   das seinem ersten Bild gleicht – so hat die Schleife keinen Sprung. */
.held__film { opacity: 0; transition: opacity .9s ease; }
.held__film.laeuft { opacity: 1; }
/* Der blaue Schein oben rechts läge genau auf dem Gesicht. */
.held--foto::after { display: none; }
.held--foto .held__raster { -webkit-mask-image: radial-gradient(ellipse at 18% 35%, #000 20%, transparent 62%); mask-image: radial-gradient(ellipse at 18% 35%, #000 20%, transparent 62%); }
.held--foto h1 { font-size: clamp(2.9rem, 6.2vw, 5.2rem); line-height: 1; letter-spacing: -0.035em; }
/* Das Programmfenster steht unter dem Gesicht und leicht gekippt – so bleibt das Foto ein Foto
   und wird nicht zur Tapete hinter einem Bildschirm. */
.held--foto .held__bild { margin-top: 15rem; transform: perspective(1800px) rotateY(-8deg) rotateX(5deg); transform-origin: center; }

/* ---------- Seitenkopf mit Film (Themenseiten) ----------
   Derselbe Aufbau wie im Held der Startseite, mit denselben Bausteinen: Foto und Film füllen die rechte
   Seite (held__motiv), der Text steht links. Gesetzt von server/seitenvorlage.py für Seiten mit „film“. */
.seitenkopf--film { padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: left; }
/* Über dem Motiv: Es ist absolut gesetzt und läge sonst über dem Text. */
.seitenkopf--film .container { position: relative; z-index: 1; }
.seitenkopf--film h1, .seitenkopf--film p { max-width: 620px; margin-inline: 0; }
.seitenkopf--film h1 { font-size: clamp(2.1rem, 3.8vw, 3rem); }
.seitenkopf--film h1 .vorzeile { margin-inline: 0; text-align: left; }
/* Der Mann steht in der Bildmitte – anders als auf der Startseite, wo das Gesicht rechts der Mitte sitzt. */
.seitenkopf--film .held__foto, .seitenkopf--film .held__film { object-position: center 30%; }
@media (max-width: 1024px) {
  /* Schmal liegt das Motiv blass hinter dem ganzen Kopf; der Schalter steht dann unter dem Text. */
  .seitenkopf--film { padding-bottom: 1.5rem; }
  .seitenkopf--film .held__motiv { height: 100%; }
}

/* ---------- Branchenreiter ---------- */
.branchen { background: var(--navy); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.branchen__zeile { display: flex; align-items: stretch; gap: 1.5rem; }
.branchen__vor { display: flex; flex-direction: column; justify-content: center; min-width: 120px; font-size: .9rem; line-height: 1.3; color: #a9b6cc; }
.branchen__vor strong { color: #fff; font-size: 1.15rem; }
.branchen__reiter { display: grid; grid-template-columns: repeat(6, 1fr); flex: 1; }
.branchen__reiter button { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 84px; padding: .5rem .4rem; border: 0; border-left: 1px solid rgba(255,255,255,.08); background: none; color: #dbe4f3; font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; transition: background var(--uebergang), color var(--uebergang); }
.branchen__reiter button svg { flex: none; width: 24px; height: 24px; color: var(--gelb); }
.branchen__reiter button:hover { background: rgba(255,255,255,.06); }
.branchen__reiter button[aria-selected="true"] { background: var(--verlauf-quer); color: #fff; }
.branchen__reiter button[aria-selected="true"] svg { color: #fff; }
/* Die Mindesthöhe hält den Abschnitt ruhig: Die Sätze sind verschieden lang, und ohne sie spränge
   beim Wechsel alles darunter um eine Zeile. */
.branchen__text { margin: 0; padding: 1rem 0 1.2rem; min-height: 4.4em; border-top: 1px solid rgba(255,255,255,.08); font-size: .98rem; color: #c7d2e6; }
.branchen__text strong { color: #fff; }

/* ---------- Auftragsablauf ---------- */
.ablauf__schritte { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 1.4rem; }
.ablauf__schritte::before { content: ""; position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 13px; height: 2px; background: var(--rand); }
.ablauf__schritte::after { content: ""; position: absolute; top: 9px; left: calc(100% / 14); width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: ablaufpuls 7s linear infinite; }
@keyframes ablaufpuls { from { left: calc(100% / 14); } to { left: calc(100% - 100% / 14 - 10px); } }
.ablauf__schritte button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 0 .3rem .9rem; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-weight: 700; font-size: .95rem; color: var(--muted); cursor: pointer; }
.ablauf__schritte button i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--rand); background: #fff; font-style: normal; font-size: .68rem; font-weight: 800; color: var(--muted); transition: all var(--uebergang); }
.ablauf__schritte button:hover i { border-color: var(--accent); color: var(--accent); }
.ablauf__schritte button.fertig i { background: var(--mint); border-color: var(--mint); color: #fff; }
.ablauf__schritte button[aria-selected="true"] { color: var(--accent-dunkel); border-bottom-color: var(--accent); }
.ablauf__schritte button[aria-selected="true"] i { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.15); box-shadow: 0 6px 16px rgba(0,102,253,.4); }
.ablauf__tafel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; padding: clamp(1.4rem, 4vw, 2.8rem); background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); }
.ablauf__nummer { display: block; margin-bottom: .8rem; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dunkel); }
.ablauf__tafel h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 850; }
/* Auch hier eine Mindesthöhe – der Text wechselt, die Karte daneben soll stehen bleiben. */
.ablauf__tafel p { max-width: 460px; min-height: 6.4em; margin: 0; color: var(--muted); }
.ablauf__verbunden { display: flex; align-items: center; gap: .6rem; margin-top: 1.2rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.ablauf__verbunden i { width: 28px; height: 1px; background: #b9c6da; }
.auftragskarte { overflow: hidden; border: 1px solid var(--rand); border-radius: 14px; background: #fff; font-size: .9rem; }
.auftragskarte__kopf { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.auftragskarte h4 { margin: 0 0 .7rem; padding: 0 1.2rem; font-size: 1.2rem; }
.auftragskarte__zeile { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.2rem; border-top: 1px solid var(--rand); }
.auftragskarte__zeile small { display: block; font-size: .8rem; color: var(--muted); }
.auftragskarte__zeile > svg { flex: none; width: 22px; height: 22px; color: var(--accent); }
.auftragskarte__zeile .avatar { flex: none; width: 30px; height: 30px; background: var(--navy-3); }
.auftragskarte__zeile .haken { margin: 0 0 0 auto; }
.auftragskarte__fuss { padding: .8rem 1.2rem; background: var(--accent-hell); font-size: .85rem; font-weight: 600; color: var(--accent-dunkel); }

/* ---------- Beispielraum mit Heizlast-Vorschau ---------- */
.raum { display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: var(--schatten); }
.raum__ansicht { display: flex; flex-direction: column; min-width: 0; padding: 1.6rem; background: radial-gradient(ellipse at center, #16295a, var(--navy) 72%); color: #fff; }
.raum__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a9b6cc; }
.raum__kopf b { margin: 0 .5rem; font-weight: 400; color: #55668a; }
.raum__marke { padding: .3rem .55rem; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; font-size: .66rem; }
/* Die Fläche nimmt, was neben den Reglern an Höhe übrig bleibt – sonst stünde unter dem Raum ein leerer Streifen. */
.raum__flaeche { flex: 1 1 340px; width: 100%; min-height: 340px; min-width: 0; margin-top: .5rem; cursor: grab; }
.raum__flaeche:active { cursor: grabbing; }
.raum__flaeche canvas { display: block; width: 100%; height: 100%; }
.raum__ersatz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; height: 100%; color: var(--gelb); text-align: center; font-size: .85rem; line-height: 1.5; cursor: default; }
.raum__ersatz svg { width: 84px; height: 84px; }
.raum__masse { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14); }
.raum__masse small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8fa3c7; }
.raum__masse strong { display: block; margin-top: .3rem; font-size: 1.6rem; font-weight: 600; color: #fff; }
.raum__drehen { display: flex; align-items: center; gap: .6rem; margin-top: 1.3rem; font-size: .78rem; color: #8fa3c7; }
.raum__drehen button { min-width: 36px; height: 36px; padding: 0 .6rem; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(255,255,255,.07); color: #dbe4f3; font: inherit; font-size: 1.05rem; cursor: pointer; }
.raum__drehen button:hover { background: rgba(255,255,255,.14); }
.raum__drehen button:disabled { opacity: .4; cursor: default; }
.raum__drehen button:last-child { margin-left: auto; font-size: .78rem; }
.raum__legende { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: 1.2rem; font-size: .76rem; color: #a9b6cc; }
.raum__legende li { display: flex; align-items: center; gap: .4rem; }
.raum__legende i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.raum__legende li:nth-child(2) i { background: #80dcff; }
.raum__legende li:nth-child(3) i { background: #55668a; }
.raum__regler { min-width: 0; padding: 1.9rem 2rem; background: var(--bg); }
.raum__regler h3 { margin-bottom: .3rem; }
.raum__regler > p { margin: 0; font-size: .95rem; color: var(--muted); }
.raum__schieber { margin: 1.2rem 0 1.4rem; }
.raum__schieber label { display: flex; justify-content: space-between; align-items: center; margin-top: .9rem; font-size: .92rem; font-weight: 700; color: var(--ink); }
.raum__schieber output { font-weight: 600; color: var(--accent); }
.raum__schieber input { width: 100%; min-height: 26px; margin-top: .3rem; accent-color: var(--accent); cursor: pointer; }
.raum__felder { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.raum__felder label { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--muted); }
.raum__felder input, .raum__felder select { width: 100%; min-width: 0; min-height: 42px; padding: .55rem .7rem; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: #fff; font: inherit; font-size: .95rem; color: var(--text); }
.raum__felder input:invalid { border-color: var(--rot); }
.raum__ergebnis { display: grid; grid-template-columns: 1.3fr .8fr .8fr; gap: .7rem; margin-top: 1.4rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 14px; background: var(--accent-hell); }
.raum__ergebnis small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; line-height: 1.35; text-transform: uppercase; color: var(--accent-dunkel); }
.raum__ergebnis strong { display: block; margin-top: .3rem; font-size: 1.6rem; font-weight: 800; color: var(--accent); }
.raum__ergebnis strong span { font-size: .9rem; font-weight: 600; opacity: .75; }
.raum__ergebnis > div:first-child strong { font-size: 2.2rem; color: var(--ink); }
.raum__fehler { margin: .6rem 0 0; font-size: .85rem; font-weight: 600; color: #b91c1c; }
.raum__fehler:empty { display: none; }
.raum__annahmen { margin-top: 1rem; font-size: .85rem; line-height: 1.55; color: var(--muted); }
.raum__annahmen summary { cursor: pointer; font-weight: 700; color: var(--accent-dunkel); }
.raum__annahmen p { margin: .6rem 0 0; }
.raum__weg { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.3rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.raum__weg i { width: 14px; height: 1px; background: #b9c6da; }

/* ---------- Betriebswissen und Sprachbeispiel ---------- */
.wissen { display: flex; flex-direction: column; padding: 2rem; border-radius: var(--radius); background: var(--navy); color: #c7d2e6; box-shadow: var(--schatten); }
.wissen__vor { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gelb); }
.wissen h3 { margin: 1rem 0 .8rem; font-size: 1.5rem; color: #fff; }
.wissen__antwort { min-height: 9.5em; }
.wissen__antwort p { margin: 0 0 1rem; }
.wissen__quelle { display: inline-block; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.07); font-size: .8rem; color: #a9d8ff; }
.wissen__fragen { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); }
.wissen__fragen button { padding: .7rem .9rem; border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-klein); background: rgba(255,255,255,.04); color: #dbe4f3; font: inherit; font-size: .92rem; font-weight: 600; text-align: left; cursor: pointer; transition: border-color var(--uebergang), background var(--uebergang); }
.wissen__fragen button:hover, .wissen__fragen button.gewaehlt { border-color: var(--gelb); background: rgba(79,208,255,.1); color: #fff; }
.sprachdemo { display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; text-align: center; }
.sprachdemo .vorzeile { align-self: center; }
.sprachdemo > p { color: var(--muted); }
.sprachdemo__welle { display: flex; align-items: center; justify-content: center; gap: 5px; height: 76px; }
.sprachdemo__welle i { width: 4px; height: var(--h); border-radius: 5px; background: var(--sky); transform: scaleY(.65); animation: sprachwelle 1.5s var(--v) infinite ease-in-out; }
@keyframes sprachwelle { 50% { transform: scaleY(1); } }
.sprachdemo.gespielt .sprachdemo__welle i { animation: none; transform: scaleY(.25); }
.sprachdemo__knopf { align-self: center; display: grid; place-items: center; width: 56px; height: 56px; margin: .8rem 0 1.2rem; border: 0; border-radius: 50%; background: var(--verlauf); color: #fff; box-shadow: 0 0 0 10px rgba(0,102,253,.1); cursor: pointer; transition: transform var(--uebergang); }
.sprachdemo__knopf:hover { transform: scale(1.06); }
.sprachdemo__knopf svg { width: 26px; height: 26px; }
.sprachdemo .sprachdemo__text { min-height: 4.8em; margin: 0; font-size: 1.08rem; font-weight: 600; color: var(--ink); }
.sprachdemo small { margin-top: .8rem; font-size: .8rem; color: var(--muted); }

/* ---------- Das X im Aufruf ---------- */
.aufruf__x { position: absolute; right: -30px; top: 50%; width: min(420px, 60%); height: auto; max-width: none; transform: translateY(-50%); opacity: .08; pointer-events: none; }

/* Zwei Stellen, die schon vor dem Umbau über den Rand liefen (gemessen bei 920 Pixeln): Eine Rasterspalte
   mit 1fr wird nicht schmaler als ihr breitester Inhalt – die Plantafel drückte den Text daneben um
   113 Pixel hinaus. Und zwischen Telefonmenü und voller Breite passen zwei Knöpfe nicht neben das Menü. */
.merkmal > * { min-width: 0; }
/* Mit sieben Menüpunkten reicht der Platz für beide Knöpfe erst ab 1180 Pixeln (gemessen: 1097 nötig bei
   40 Pixeln Seitenrand); darunter bleibt „Demo buchen“ allein stehen (980 nötig), und unter 1060 wird die
   Leiste noch einmal enger gesetzt (910 nötig). */
@media (min-width: 981px) and (max-width: 1179px) {
  .kopf__aktionen .knopf--hell { display: none; }
}
@media (min-width: 981px) and (max-width: 1059px) {
  .kopf__zeile { gap: .8rem; }
  .navigation { gap: .7rem; font-size: .85rem; }
}
/* Der Belegfluss in einer halben Spalte: enger gesetzt, damit fünf Schritte nebeneinander bleiben. */
@media (min-width: 801px) and (max-width: 1100px) {
  .merkmal .fluss { gap: .2rem; padding: 1.2rem .7rem; }
  .merkmal .fluss__schritt { min-width: 0; font-size: .75rem; }
}

@media (max-width: 1100px) {
  .branchen__reiter button { font-size: .9rem; gap: .4rem; }
  .raum__regler { padding: 1.6rem 1.4rem; }
  .raum__ergebnis strong { font-size: 1.4rem; }
  .raum__ergebnis > div:first-child strong { font-size: 1.9rem; }
}
@media (max-width: 1024px) {
  .held--foto { min-height: 0; }
  .held__motiv { width: 100%; height: 640px; opacity: .4; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
  .held__foto, .held__film { object-position: 62% center; }
  .held--foto .held__bild { margin-top: 1.5rem; transform: none; }
  .bewegung-schalter { position: relative; right: auto; bottom: auto; display: block; margin: 1.5rem 1.25rem 0 auto; }
}
@media (max-width: 800px) {
  .branchen__vor { display: none; }
  .branchen__reiter { grid-template-columns: repeat(3, 1fr); }
  .branchen__reiter button { flex-direction: column; gap: .3rem; min-height: 70px; font-size: .82rem; border-bottom: 1px solid rgba(255,255,255,.08); }
  .branchen__text { min-height: 7.5em; font-size: .92rem; }
  /* Sieben Punkte auf einer Linie tragen ein Telefon nicht: Linie und Puls weichen, die Schritte brechen um. */
  .ablauf__schritte { grid-template-columns: repeat(4, 1fr); gap: .8rem .2rem; }
  .ablauf__schritte::before, .ablauf__schritte::after { display: none; }
  .ablauf__schritte button { padding-bottom: .5rem; font-size: .8rem; }
  .ablauf__tafel { grid-template-columns: 1fr; }
  .ablauf__tafel p { min-height: 0; }
  .raum { grid-template-columns: 1fr; }
  .raum__flaeche { flex-basis: 280px; min-height: 280px; }
  .raum__ergebnis { grid-template-columns: 1fr 1fr; }
  .raum__ergebnis > div:first-child { grid-column: 1 / -1; }
  .raum__drehen { flex-wrap: wrap; }
  .wissen, .sprachdemo { padding: 1.5rem; }
}

/* =========================================================
   Aus der Prüfung auf Telefonbreite (360 Pixel, Oktober 2026).
   Gemessen, nicht geschätzt: Die Startseite war 63 Pixel breiter als der Bildschirm – ein Telefon
   verkleinert dann die ganze Seite, und jede Schrift wird kleiner, als sie gesetzt ist.
   ========================================================= */

/* Die Gattung über der großen Zeile: klein gesetzt, aber Teil der Überschrift. */
.held__gattung { display: block; margin-bottom: .9rem; font-size: clamp(.95rem, 1.5vw, 1.15rem); font-weight: 700; line-height: 1.35; letter-spacing: 0; color: var(--gelb); }

/* Eine Rasterzelle wird nicht schmaler als ihr Inhalt, solange niemand es erlaubt. */
.vertrauen li, .plantafel__kopf div, .plantafel__zeile > div, .auslastung div, .formular > *, .formular .zwei > * { min-width: 0; }
.formular input:not([type="checkbox"]):not([type="radio"]), .formular textarea, .formular select { width: 100%; min-width: 0; }
.plantafel__kopf div, .auslastung div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kleine Beschriftungen der neuen Abschnitte: nicht unter zwölf Pixel. */
.raum__kopf, .raum__masse small, .raum__ergebnis small, .wissen__vor, .auftragskarte__kopf { font-size: .75rem; }
.raum__marke { font-size: .75rem; }
.ablauf__schritte button i { font-size: .75rem; }

@media (max-width: 800px) {
  /* Zwei Karten nebeneinander lassen bei 360 Pixeln je 118 für den Inhalt: Das Wort rückt unter die Zahl. */
  .vertrauen b { font-size: clamp(1.9rem, 9.4vw, 2.6rem); }
  .vertrauen b em.wort { display: block; margin-top: .15rem; font-size: .4em; line-height: 1.2; overflow-wrap: anywhere; }
  .plantafel__kopf, .plantafel__zeile, .auslastung { grid-template-columns: 84px repeat(5, 1fr); }
  /* Unter sechzehn Pixeln zoomt iOS beim Antippen in das Feld hinein und nicht wieder heraus. */
  .formular input, .formular textarea, .formular select, .raum__felder input, .raum__felder select { font-size: 16px; }
}

/* Mit dem Finger: Was man antippt, ist mindestens 44 Pixel hoch. Am groben Zeiger und nicht an der
   Breite – ein schmales Fenster am Rechner wird mit der Maus bedient. */
@media (pointer: coarse) {
  .fuss li a { display: inline-block; padding: .55rem 0; }
  .fuss ul { gap: 0; }
  .sprungleiste ul a { padding: .7rem .9rem; }
  .sprungleiste__knopf { min-height: 44px; }
  .raum__drehen button { min-width: 44px; height: 44px; }
  .raum__schieber input { min-height: 44px; }
  .raum__annahmen summary { padding: .7rem 0; }
  .raum__felder input, .raum__felder select { min-height: 46px; }
  .bewegung-schalter { min-height: 44px; padding: .5rem 1rem; }
  .wissen__fragen button { min-height: 46px; }
}

/* =========================================================
   Seite der Außendienst-App (Oktober 2026): Übersicht im Telefon, Raumscan,
   aufgenommener Raum, Funktionen nach Arbeitslage, Netzliste, Gerätetafel.
   ========================================================= */

/* Sprungziele: Über dem Abschnitt kleben Kopfzeile und Sprungleiste – ohne den Abstand läge die
   Überschrift nach dem Sprung darunter. Nur auf Seiten mit Sprungleiste. */
.sprungleiste ~ .abschnitt[id], .sprungleiste ~ .gruppe[id] { scroll-margin-top: 110px; }

/* ---------- Sprungleiste: Übersicht, Pfeile, Band am Telefon ----------
   Zwölf Bereiche passen in keine Zeile. Vorher war die Zeile ohne Rollbalken abgeschnitten – fünf Bereiche
   standen hinter dem Rand, und nichts verriet es. Jetzt gibt es drei Wege, und jeder zeigt sich selbst:
   die Übersicht mit allen Bereichen samt einem Satz dazu, die Pfeile am Rand der Zeile, und am Telefon
   ein Band, das sagt, wo man gerade ist. Die Klasse „sprungleiste--bereit“ setzt js/main.js. */
.sprungleiste__zeile { display: flex; align-items: center; gap: .7rem; }
.sprungleiste__knopf { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; padding: .4rem .85rem; border: 1px solid var(--rand); border-radius: 999px; background: #fff; font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: border-color var(--uebergang), background var(--uebergang), color var(--uebergang); }
.sprungleiste__knopf:hover, .sprungleiste__knopf[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-hell); color: var(--accent-dunkel); }
.sprungleiste__knopf svg { flex: none; width: 16px; height: 16px; }
.sprungleiste__pfeil { transition: transform var(--uebergang); }
.sprungleiste__knopf[aria-expanded="true"] .sprungleiste__pfeil { transform: rotate(180deg); }
.sprungleiste__wo, .sprungleiste__zahl { display: none; }
.sprungleiste__zahl { margin-left: auto; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sprungleiste__bahn { position: relative; flex: 1 1 auto; min-width: 0; }
.sprungleiste--bereit ul { position: relative; scrollbar-width: none; }
.sprungleiste--bereit ul::-webkit-scrollbar { display: none; }
/* Der Verlauf am Rand sagt, dass dahinter noch etwas kommt; der Pfeil darauf holt es. */
.sprungleiste__bahn::before, .sprungleiste__bahn::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 72px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.sprungleiste__bahn::before { left: 0; background: linear-gradient(90deg, #fff 45%, rgba(255,255,255,0)); }
.sprungleiste__bahn::after { right: 0; background: linear-gradient(270deg, #fff 45%, rgba(255,255,255,0)); }
.sprungleiste__bahn.hat-links::before, .sprungleiste__bahn.hat-rechts::after { opacity: 1; }
.sprungleiste__weiter { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 1px solid var(--rand); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(11,27,58,.12); cursor: pointer; }
.sprungleiste__weiter:hover { border-color: var(--accent); color: var(--accent-dunkel); }
.sprungleiste__weiter svg { width: 16px; height: 16px; }
.sprungleiste__weiter--links { left: 0; }
.sprungleiste__weiter--rechts { right: 0; }
.hat-links .sprungleiste__weiter--links, .hat-rechts .sprungleiste__weiter--rechts { display: grid; }
/* Die Übersicht: alle Bereiche auf einen Blick, jeder mit Zeichen und einem Satz, was darin steht. */
.sprungleiste__tafel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-bottom: 1px solid var(--rand); box-shadow: 0 28px 40px rgba(11,27,58,.14); }
.sprungleiste__tafel[hidden] { display: none; }
.sprungleiste__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: 1rem 0 1.3rem; }
.sprungleiste__eintrag { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem .8rem; border: 1px solid transparent; border-radius: var(--radius-klein); transition: background var(--uebergang), border-color var(--uebergang); }
.sprungleiste__eintrag:hover { background: var(--bg); border-color: var(--rand); }
.sprungleiste__eintrag.aktiv { background: var(--accent-hell); border-color: #bfd9ff; }
.sprungleiste__bild { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-hell); color: var(--accent-dunkel); font-size: .9rem; font-weight: 800; }
.sprungleiste__eintrag.aktiv .sprungleiste__bild { background: var(--accent); color: #fff; }
.sprungleiste__bild svg { width: 20px; height: 20px; }
.sprungleiste__eintrag b { display: block; font-size: .95rem; line-height: 1.3; color: var(--ink); }
.sprungleiste__eintrag small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-top: .15rem; font-size: .82rem; line-height: 1.4; color: var(--muted); }
.sprungleiste__knopf:focus-visible, .sprungleiste__weiter:focus-visible, .sprungleiste a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
@media (max-width: 1024px) {
  .sprungleiste__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Am Telefon trägt eine Zeile aus zwölf Pillen nicht – man wischt und verliert den Überblick. Dort steht
   stattdessen ein Band über die ganze Breite: der Bereich, in dem man gerade liest, und wie viele es gibt.
   Ein Tipp öffnet die Liste. */
@media (max-width: 760px) {
  .sprungleiste--bereit .sprungleiste__bahn, .sprungleiste--bereit .sprungleiste__fest { display: none; }
  .sprungleiste--bereit .sprungleiste__zeile { padding: .5rem 0; }
  .sprungleiste--bereit .sprungleiste__knopf { flex: 1 1 auto; min-width: 0; min-height: 44px; border-radius: var(--radius-klein); }
  .sprungleiste--bereit .sprungleiste__wo { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sprungleiste--bereit .sprungleiste__zahl { display: block; }
  .sprungleiste__raster { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .5rem 0 .9rem; }
  .sprungleiste__eintrag { padding: .6rem .5rem; }
}

/* ---------- Die Übersicht der App: halbe Kacheln, zu zweit nebeneinander ---------- */
.app-kurzblick { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.app-halb { min-width: 0; padding: .5rem .65rem; border: 1px solid var(--rand); border-radius: 12px; background: #fff; line-height: 1.3; }
.app-halb small { display: block; font-size: .68rem; font-weight: 600; color: var(--muted); }
.app-halb b { display: block; font-size: 1rem; color: var(--ink); }
.app-halb span { font-size: .68rem; color: var(--muted); }
/* Eine wartende Nachricht färbt die ganze Kachel – so ist es auch in der App. */
.app-halb--wichtig { border-color: var(--accent); background: var(--accent); }
.app-halb--wichtig small, .app-halb--wichtig b { color: #fff; }
.app-halb--karte { padding: 0; overflow: hidden; }
.app-halb--karte svg { width: 100%; height: 100%; }
/* Die Mappe steht in dieser Ansicht über der Leiste und nicht auf ihr. */
.telefon--uebersicht .telefon__inhalt { padding-bottom: .8rem; }
.telefon--uebersicht .mappe { position: static; margin: 0 .8rem .7rem; }

/* ---------- Raumscan im Telefon ---------- */
/* Der Bildschirm steht im Held auf dunklem Grund und erbte dessen weiße Schrift: Die Zeilen der Mappe
   standen weiß auf Weiß. */
.telefon__schirm { color: var(--text); }
.telefon--scan .telefon__schirm { height: 640px; background: var(--navy); }
.telefon--scan .telefon__status { color: #fff; }
.scanbild { flex: none; width: 100%; height: auto; }
.scanbild text { font-family: var(--schrift); font-size: 9.5px; font-weight: 700; fill: #fff; text-anchor: middle; }
/* Ein Durchgang dauert neun Sekunden: Die Kanten zeichnen sich nach, der Strahl zieht durch, und was er
   überstrichen hat, wird eingerahmt. „both“ hält den Endzustand – mit abgeschalteter Bewegung stünde
   sonst gar kein Fund im Bild. */
.scan-netz { fill: none; stroke: var(--cyan); stroke-width: 1.4; stroke-dasharray: 900; animation: scannetz 9s linear infinite both; }
.scan-strahl { animation: scanstrahl 9s linear infinite both; }
.scan-fund { animation: 9s linear infinite both; }
.scan-fund--1 { animation-name: scanfund1; }
.scan-fund--2 { animation-name: scanfund2; }
@keyframes scannetz { 0% { stroke-dashoffset: 900; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes scanstrahl { 0% { transform: translateX(0); opacity: 1; } 78% { transform: translateX(330px); opacity: 1; } 80%, 100% { transform: translateX(330px); opacity: 0; } }
@keyframes scanfund1 { 0%, 44% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes scanfund2 { 0%, 64% { opacity: 0; } 70%, 100% { opacity: 1; } }
.scan-funde { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: .7rem .8rem .8rem; border-radius: 16px 16px 0 0; background: var(--bg); }
.scan-funde > b { color: var(--ink); }
.scan-knopf { margin-top: auto; padding: .6rem; border-radius: 10px; background: var(--verlauf-quer); color: #fff; font-weight: 700; text-align: center; }

/* ---------- Der aufgenommene Raum ---------- */
.wandnummern circle { fill: #fff; stroke: var(--muted); stroke-width: 1.2; }
.wandnummern text { font-family: var(--schrift); font-size: 10px; font-weight: 700; fill: var(--text); text-anchor: middle; }
.wandlegende { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .5rem; font-size: .8rem; color: var(--muted); }
.wandlegende li { display: flex; align-items: center; gap: .4rem; }
.wandlegende i { width: 20px; height: 4px; border-radius: 2px; }
#gebaeude .fluss { margin-bottom: clamp(1rem, 3vw, 2rem); }
.kleingedrucktes { font-size: .88rem; line-height: 1.55; color: var(--muted); }
.merkmal__text > p.kleingedrucktes { font-size: .88rem; }

/* ---------- Funktionen nach Arbeitslage ---------- */
.karte__neu { position: absolute; top: 1.2rem; right: 1.2rem; padding: .15rem .6rem; border-radius: 999px; background: var(--verlauf-quer); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.textverweis { color: var(--accent-dunkel); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.textverweis:hover { color: var(--accent); }
/* Verweise am Ende einer Karte stehen jeder auf seiner Zeile – zwei nebeneinander läsen sich als ein Satz.
   Die Verweiskarten (gewerkkarte) sind ausgenommen: Dort schiebt „margin-top: auto“ den Verweis an den Fuß. */
.karte:not(.gewerkkarte) > .textverweis { display: block; margin-top: .9rem; font-size: .95rem; }
.karte:not(.gewerkkarte) > .textverweis + .textverweis { margin-top: .3rem; }
/* Der Verweis am Ende eines Abschnitts der Startseite auf seine Themenseite. */
.merkmal__text > p.merkmal__weiter { margin-top: 1.3rem; font-size: 1rem; }
.gewerkweiter + .gewerkweiter { margin-top: .3rem; }
/* Auf der Startseite stehen acht Verweise in einer Zeile; mit der Breite der Themenseiten bliebe der letzte allein. */
#ueberblick .gewerkweiter { max-width: 1040px; }
/* Auf dunklem Grund trägt das Verweisblau nicht: gemessen wäre es dunkles Blau auf Navy. */
.abschnitt--dunkel .textverweis { color: #4fd0ff; }
.abschnitt--dunkel .textverweis:hover { color: #fff; }

/* ---------- Was ohne Netz geht und was nicht ---------- */
.netzliste { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.netzliste h3 { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.netzliste h3 .karte__symbol { flex: none; width: 40px; height: 40px; margin: 0; border-radius: 11px; }
.netzliste h3 .karte__symbol svg { width: 20px; height: 20px; }
.netzliste ul { display: grid; gap: .5rem; }
.netzliste li { display: flex; align-items: flex-start; gap: .6rem; }
.netzliste li svg { flex: none; width: 18px; height: 18px; margin-top: .25rem; color: #16a34a; }
.netzliste .karte--netz li svg { color: var(--accent); }
.netzliste .kleingedrucktes { margin: 1rem 0 0; }

/* ---------- Zugangskarte und Gerätetafel ---------- */
.geraet__inhalt--zugang { display: grid; grid-template-columns: 1fr 160px; gap: 1rem; align-items: center; font-size: .82rem; }
.vergleich--geraete th small { display: block; font-weight: 400; font-size: .8rem; }
.vergleich--geraete th.held-spalte small { color: #a9b6cc; }
.vergleich--geraete td:not(:first-child), .vergleich--geraete th:not(:first-child) { text-align: center; }
.vergleich--geraete td .haken, .vergleich--geraete td .kreuz { margin-right: 0; }
.vergleich--geraete td.held-spalte { background: var(--accent-hell); }

@media (max-width: 800px) {
  .netzliste { grid-template-columns: 1fr; }
  /* Der QR-Code rutscht unter die Angaben – neben ihnen blieben auf dem Telefon keine 150 Pixel. */
  .geraet__inhalt--zugang { grid-template-columns: 1fr; }
  /* Vier Spalten mit Haken passen auf ein Telefon – seitlich rollen müsste man sonst genau zu den Haken. */
  .vergleich--geraete { min-width: 0; table-layout: fixed; }
  .vergleich--geraete th, .vergleich--geraete td { padding: .7rem .35rem; }
  .vergleich--geraete th:first-child, .vergleich--geraete td:first-child { width: 46%; padding-left: .8rem; }
  .vergleich--geraete th, .vergleich--geraete th.held-spalte { font-size: .75rem; overflow-wrap: anywhere; }
  .vergleich--geraete th small { font-size: .75rem; }
  .vergleich--geraete td strong { font-size: .92rem; }
  .reiter button { padding: .55rem .9rem; font-size: .88rem; }
}
@media (pointer: coarse) {
  .reiter button { min-height: 44px; }
  .faq summary { min-height: 44px; }
}

/* =========================================================
   Telefonassistent: der Beispielanruf (Oktober 2026)
   Links das Gespräch, rechts die Rückrufaufgabe, die sich
   dabei füllt. Ohne Skript steht beides fertig da; erst die
   Klasse „anruf--lebt“ aus js/main.js blendet aus, was noch
   nicht gesagt und noch nicht notiert ist.
   ========================================================= */
.anruf { display: grid; grid-template-columns: minmax(0, 1.25fr) 56px minmax(0, 1fr); align-items: stretch; max-width: 1040px; margin: 0 auto; }
.anruf__gespraech { display: flex; flex-direction: column; border-radius: var(--radius); background: var(--navy); color: #dbe4f3; box-shadow: var(--schatten-gross); overflow: hidden; }
.anruf__kopf { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.anruf__hoerer { position: relative; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--verlauf); color: #fff; transition: background var(--uebergang); }
.anruf__hoerer svg { width: 20px; height: 20px; }
.anruf__hoerer::before, .anruf__hoerer::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--cyan); opacity: 0; pointer-events: none; }
.anruf--klingelt .anruf__hoerer::before { animation: anrufring 1.2s ease-out infinite both; }
.anruf--klingelt .anruf__hoerer::after { animation: anrufring 1.2s .4s ease-out infinite both; }
.anruf--klingelt .anruf__hoerer svg { animation: anrufzittern .6s ease-in-out infinite both; }
.anruf--aufgelegt .anruf__hoerer { background: #334155; }
@keyframes anrufring { from { transform: scale(1); opacity: .7; } to { transform: scale(2.1); opacity: 0; } }
@keyframes anrufzittern { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.anruf__wer { min-width: 0; line-height: 1.3; }
.anruf__wer b { display: block; color: #fff; }
.anruf__wer small { color: #a9b6cc; font-size: .78rem; }
.anruf__uhr { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gelb); }
/* Die Welle zeigt, wer gerade spricht: blau der Assistent, grün der Anrufer, flach die Stille. */
.anruf__welle { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; padding: 0 1.2rem; }
.anruf__welle i { width: 3px; height: var(--h); border-radius: 3px; background: var(--sky); transform: scaleY(.16); transition: background .3s; }
.anruf--assistent .anruf__welle i, .anruf--anrufer .anruf__welle i { animation: sprachwelle 1.1s var(--v) infinite ease-in-out; }
.anruf--anrufer .anruf__welle i { background: var(--mint); }
.anruf__verlauf { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: .4rem 1.2rem 1.2rem; list-style: none; font-size: .92rem; line-height: 1.45; }
.anruf__satz { flex: none; max-width: 88%; padding: .6rem .8rem; border-radius: 14px; }
.anruf__satz small { display: block; margin-bottom: .1rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.anruf__satz--assistent { align-self: flex-start; background: rgba(255,255,255,.09); border-bottom-left-radius: 4px; }
.anruf__satz--anrufer { align-self: flex-end; background: rgba(34,197,94,.18); color: #dcfce7; border-bottom-right-radius: 4px; }
/* Im Ablauf hat das Gespräch eine feste Höhe und wächst von unten: Der neueste Satz steht am Rand, ältere
   wandern nach oben hinaus. So verschiebt der Ablauf die Seite darunter nicht. */
.anruf--lebt .anruf__verlauf { height: 340px; justify-content: flex-end; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 26%); mask-image: linear-gradient(transparent, #000 26%); }
.anruf--lebt .anruf__satz { display: none; }
.anruf--lebt .anruf__satz.gesagt { display: block; animation: einblenden .4s both; }
.anruf--lebt .anruf__satz.alt { animation: none; opacity: .74; }
/* Drei Punkte zwischen Gespräch und Aufgabe: Sie laufen, wenn etwas notiert wird. */
.anruf__weg { display: flex; align-items: center; justify-content: center; gap: 6px; }
.anruf__weg i { width: 7px; height: 7px; border-radius: 50%; background: #cfd8e6; }
.anruf--schreibt .anruf__weg i { animation: anrufweg .9s ease-in-out both; }
.anruf--schreibt .anruf__weg i:nth-child(2) { animation-delay: .15s; }
.anruf--schreibt .anruf__weg i:nth-child(3) { animation-delay: .3s; }
@keyframes anrufweg { 0%, 100% { background: #cfd8e6; transform: scale(1); } 50% { background: var(--accent); transform: scale(1.6); } }
.anruf__aufgabe { align-self: center; display: flex; flex-direction: column; gap: .8rem; padding: 1.4rem; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; box-shadow: var(--schatten); }
.anruf__aufgabekopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.anruf__titel { min-height: 2.6em; font-size: 1.08rem; line-height: 1.3; color: var(--ink); }
.anruf__aufgabe dl { display: grid; margin: 0; font-size: .92rem; }
.anruf__aufgabe dl > div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) 1.1rem; gap: .6rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--rand); }
.anruf__aufgabe dl > div::after { content: "✓"; color: #16a34a; font-weight: 900; }
.anruf__aufgabe dt { color: var(--muted); }
.anruf__aufgabe dd { margin: 0; font-weight: 600; color: var(--ink); }
.anruf__ziel { display: flex; gap: .55rem; align-items: flex-start; margin: 0; padding: .7rem .8rem; border-radius: 12px; background: var(--mint-hell); color: #14532d; font-size: .88rem; line-height: 1.4; }
.anruf__ziel svg { flex: none; width: 18px; height: 18px; margin-top: .1rem; color: #16a34a; }
/* Eine Angabe erscheint, wenn der Anrufer sie gesagt hat; den Haken bekommt sie erst mit seinem Ja. */
.anruf--lebt [data-feld] dd { opacity: 0; transform: translateY(5px); transition: opacity .45s ease, transform .45s ease; }
.anruf--lebt [data-feld].gefuellt dd { opacity: 1; transform: none; }
.anruf--lebt [data-feld]::after { opacity: 0; transform: scale(.3); transition: opacity .3s ease, transform .3s cubic-bezier(.2,1.6,.4,1); }
.anruf--lebt [data-feld].bestaetigt::after { opacity: 1; transform: none; }
.anruf--lebt .anruf__titel { color: var(--muted); font-weight: 600; transition: color .4s ease; }
.anruf--lebt.anruf--fertig .anruf__titel { color: var(--ink); font-weight: 800; }
.anruf--lebt .anruf__ziel { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; }
.anruf--lebt.anruf--fertig .anruf__ziel { opacity: 1; transform: none; }
.anruf__hinweis { margin: .9rem 0 0; text-align: center; font-size: .8rem; color: var(--muted); }
@media (max-width: 900px) {
  .anruf { grid-template-columns: minmax(0, 1fr); }
  .anruf__weg { flex-direction: column; height: 44px; }
  .anruf--lebt .anruf__verlauf { height: 300px; }
  .anruf__satz { max-width: 94%; }
}

/* =========================================================
   Über uns: Bewegung. Alles hängt an der Klasse „sichtbar“,
   die js/main.js setzt, sobald ein Baustein ins Bild kommt;
   der Kopf läuft beim Laden. Jede Bewegung endet in dem Zustand,
   in dem der Baustein auch ohne sie stünde – mit „weniger
   Bewegung“ steht die Seite sofort so da.
   ========================================================= */

/* ---------- Kopf: zwei Sätze nacheinander, der Schluss wird unterstrichen ---------- */
.seitenkopf--ueber { padding-bottom: clamp(5.5rem, 9vw, 8rem); }
.seitenkopf--ueber .container { position: relative; }
.seitenkopf--ueber .satz { display: inline-block; animation: satzauf .8s cubic-bezier(.2,.7,.2,1) both; }
.seitenkopf--ueber .satz--2 { animation-delay: .6s; }
.seitenkopf--ueber p { animation: satzauf .8s 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes satzauf { from { opacity: 0; transform: translateY(22px); } }
.seitenkopf--ueber .markiert { position: relative; white-space: nowrap; }
.seitenkopf--ueber .markiert::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .13em; border-radius: 4px; background: var(--verlauf-quer); transform: scaleX(0); transform-origin: left; animation: unterstreichen .8s 1.5s cubic-bezier(.2,.7,.2,1) forwards; }
/* Das X der Marke treibt groß und blass im Hintergrund. */
.seitenkopf__x { position: absolute; right: -30px; top: 50%; width: min(440px, 52%); height: auto; max-width: none; margin-top: -220px; fill: #fff; opacity: .06; pointer-events: none; animation: xtreiben 16s ease-in-out infinite; }
@keyframes xtreiben { 50% { transform: translate(-26px, 16px) rotate(-5deg); } }

/* ---------- Zahlenband: liegt halb auf dem Kopf, die Zahlen zählen hoch ---------- */
.ueber__zahlen { position: relative; margin-top: clamp(-4.5rem, -6vw, -3rem); }
.ueber__zahlen .vertrauen li { box-shadow: var(--schatten); }

/* ---------- Die drei Schritte ---------- */
.weg__bild { display: grid; place-items: center; height: 104px; margin: -.5rem -.5rem 1.3rem; border-radius: 12px; background: linear-gradient(180deg, var(--bg), #e9f0fb); overflow: hidden; }
.wegbild { width: 220px; height: 90px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wb-blatt { fill: #fff; stroke: #c6d1e3; }
.wb-leiste { stroke: #dbe3f0; }
.wb-punkt { fill: #c6d1e3; stroke: none; }
.wb-ruhig { stroke: #c6d1e3; }
/* 01: Die Liste schreibt sich Zeile für Zeile. */
.wb-zeile rect { stroke: var(--accent); opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; }
.wb-zeile path { stroke-dasharray: 60; stroke-dashoffset: 60; }
.karte.sichtbar .wb-zeile rect { animation: wbpunkt .35s cubic-bezier(.3,1.6,.5,1) forwards; }
.karte.sichtbar .wb-zeile path { animation: zeichnen .5s ease-out forwards; }
.karte.sichtbar .wb-zeile:nth-of-type(1) rect { animation-delay: .35s; } .karte.sichtbar .wb-zeile:nth-of-type(1) path { animation-delay: .45s; }
.karte.sichtbar .wb-zeile:nth-of-type(2) rect { animation-delay: .7s; }  .karte.sichtbar .wb-zeile:nth-of-type(2) path { animation-delay: .8s; }
.karte.sichtbar .wb-zeile:nth-of-type(3) rect { animation-delay: 1.05s; } .karte.sichtbar .wb-zeile:nth-of-type(3) path { animation-delay: 1.15s; }
.karte.sichtbar .wb-zeile:nth-of-type(4) rect { animation-delay: 1.4s; }  .karte.sichtbar .wb-zeile:nth-of-type(4) path { animation-delay: 1.5s; }
@keyframes wbpunkt { to { opacity: 1; transform: none; } }
/* 02: Die Lupe fährt die Liste ab, dann fällt der Stempel. */
.wb-lupe { stroke: var(--accent); }
.wb-lupe circle { fill: rgba(0,102,253,.1); }
.karte.sichtbar .wb-lupe { animation: wblupe 1.9s .5s cubic-bezier(.45,0,.3,1) forwards; }
@keyframes wblupe { 0% { transform: translate(0, 0); } 30% { transform: translate(-46px, 15px); } 60% { transform: translate(-6px, 30px); } 85% { transform: translate(-50px, 45px); opacity: 1; } 100% { transform: translate(34px, 40px); opacity: .35; } }
.wb-stempel { opacity: 0; transform: rotate(-7deg) scale(1.7); transform-box: fill-box; transform-origin: center; }
.wb-stempel rect { fill: #fff; stroke: var(--rot); stroke-width: 2.5; }
.wb-stempel text { fill: var(--rot); stroke: none; font: 800 14px var(--schrift); letter-spacing: .02em; }
.karte.sichtbar .wb-stempel { animation: wbstempel .35s 2.2s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes wbstempel { to { opacity: 1; transform: rotate(-7deg) scale(1); } }
/* 03: Im Fenster entsteht der Code, am Ende steht das X. */
.wb-code { stroke-width: 3; stroke-dasharray: 64; stroke-dashoffset: 64; }
.wb-code--1 { stroke: var(--accent); } .wb-code--2 { stroke: var(--cyan); } .wb-code--3 { stroke: #9fb3d1; } .wb-code--4 { stroke: var(--accent); }
.karte.sichtbar .wb-code { animation: zeichnen .55s ease-out forwards; }
.karte.sichtbar .wb-code--1 { animation-delay: .5s; } .karte.sichtbar .wb-code--2 { animation-delay: .95s; }
.karte.sichtbar .wb-code--3 { animation-delay: 1.4s; } .karte.sichtbar .wb-code--4 { animation-delay: 1.85s; }
.wb-x { stroke: none; opacity: 0; transform: scale(.2) rotate(-25deg); transform-box: fill-box; transform-origin: center; }
.karte.sichtbar .wb-x { animation: wbpunkt .6s 2.3s cubic-bezier(.3,1.6,.5,1) forwards; }
/* Der Pfeil zwischen den Karten: nur, solange sie nebeneinander stehen. */
.weg .karte + .karte::before { content: "›"; position: absolute; left: calc(-.7rem - 15px); top: 9.3rem; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; padding-bottom: 3px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 1.15rem; line-height: 1; box-shadow: 0 6px 14px rgba(0,102,253,.35); transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1) .7s; }
.weg .karte + .karte.sichtbar::before { transform: scale(1); }
.weg__nummer { transform: scale(.5); opacity: 0; transition: transform .5s cubic-bezier(.3,1.6,.5,1) .2s, opacity .3s .2s; }
.karte.sichtbar .weg__nummer { transform: none; opacity: 1; }
@media (max-width: 1024px) { .weg .karte + .karte::before { display: none; } }

/* ---------- Messlatte: Der eine Balken bleibt vor der Marke stehen, der andere geht darüber ---------- */
.messlatte__bahn--andere i { width: 0; transition: width 1.3s cubic-bezier(.2,.7,.2,1) .4s; }
.messlatte.sichtbar .messlatte__bahn--andere i { width: 64%; }
.messlatte__bahn--wir i { position: relative; width: 0; overflow: hidden; transition: width 1.9s cubic-bezier(.3,.6,.2,1) 1.5s; }
.messlatte.sichtbar .messlatte__bahn--wir i { width: 95%; }
/* Ein Glanz, der über den fertigen Balken läuft. */
.messlatte__bahn--wir i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 36%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-120%); }
.messlatte.sichtbar .messlatte__bahn--wir i::after { animation: wbglanz 3.6s 3.6s ease-in-out infinite; }
@keyframes wbglanz { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(320%); } }
.messlatte__zeile b { opacity: 0; transform: translateY(4px); transition: opacity .5s, transform .5s; }
.messlatte.sichtbar .messlatte__zeile b { opacity: 1; transform: none; transition-delay: 1.6s; }
.messlatte.sichtbar .messlatte__zeile + .messlatte__zeile b { transition-delay: 3.1s; }
/* Die Marke schlägt aus, wenn der Balken sie überfährt. */
.messlatte.sichtbar .messlatte__bahn--wir::after { animation: wbmarke .7s 2.15s ease-out; }
@keyframes wbmarke { 30% { transform: scaleY(1.6); background: var(--accent); box-shadow: 0 0 0 5px rgba(0,102,253,.2); } }

/* ---------- Karten, Listen, Leitsätze ---------- */
.ueber .gewerkkarte .menuezeichen { opacity: 0; transform: scale(.4) rotate(-12deg); transition: transform .55s cubic-bezier(.3,1.6,.5,1) .3s, opacity .3s .3s; }
.ueber .gewerkkarte.sichtbar .menuezeichen { opacity: 1; transform: none; }
.ueber .gegen li { opacity: 0; transform: translateX(-16px); transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1); }
.ueber .karte.sichtbar .gegen li { opacity: 1; transform: none; }
.ueber .karte.sichtbar .gegen li:nth-child(1) { transition-delay: .3s; }
.ueber .karte.sichtbar .gegen li:nth-child(2) { transition-delay: .55s; }
.ueber .karte.sichtbar .gegen li:nth-child(3) { transition-delay: .8s; }
.ueber .gegen svg { transform: scale(.3) rotate(-90deg); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.ueber .karte.sichtbar .gegen svg { transform: none; }
.ueber .karte.sichtbar .gegen li:nth-child(1) svg { transition-delay: .45s; }
.ueber .karte.sichtbar .gegen li:nth-child(2) svg { transition-delay: .7s; }
.ueber .karte.sichtbar .gegen li:nth-child(3) svg { transition-delay: .95s; }
/* Leitsätze: ein Licht wandert langsam durch die Karte, unter der Vorzeile wächst ein Strich. */
.leitsatz { position: relative; overflow: hidden; }
.leitsatz > * { position: relative; }
.leitsatz::before { content: ""; position: absolute; left: -30%; top: -60%; width: 90%; height: 160%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,185,254,.26), transparent); animation: wblicht 11s ease-in-out infinite alternate; pointer-events: none; }
.leitsatz + .leitsatz::before { animation-delay: -5s; }
@keyframes wblicht { to { transform: translate(70%, 30%); } }
.leitsatz small::after { content: ""; display: block; width: 0; height: 3px; margin-top: .55rem; border-radius: 3px; background: var(--verlauf-quer); transition: width .9s cubic-bezier(.2,.7,.2,1) .4s; }
.leitsatz.sichtbar small::after { width: 64px; }

/* ---------- Kreislauf: aus dem Handwerk die Anforderungen, zurück die Lösungen ---------- */
.kreislauf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, 150px) minmax(0, 1fr); align-items: center; gap: .7rem; padding: clamp(1.2rem, 3vw, 2.2rem); border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; box-shadow: var(--schatten); }
.kreislauf__seite { display: grid; justify-items: center; gap: .3rem; padding: 1.3rem .6rem; border-radius: 14px; background: var(--bg); text-align: center; opacity: 0; transform: scale(.85); transition: opacity .5s .2s, transform .6s cubic-bezier(.3,1.6,.5,1) .2s; }
.kreislauf__seite svg { width: 54px; height: 54px; margin: 0 0 .3rem; }
.kreislauf__seite b { color: var(--ink); line-height: 1.2; }
.kreislauf__seite small { font-size: .82rem; color: var(--muted); }
.kreislauf__seite--x { background: var(--navy); transition-delay: 1.3s; }
.kreislauf__seite--x b { color: #fff; }
.kreislauf__seite--x small { color: #a9b6cc; }
.kreislauf.sichtbar .kreislauf__seite { opacity: 1; transform: none; }
.kreislauf__pfeile { width: 100%; height: auto; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.kreislauf__pfeile text { fill: var(--muted); stroke: none; font: 700 13px var(--schrift); opacity: 0; transition: opacity .5s; }
.kl-zurueck, .kl-spitze--zurueck { stroke: var(--tiefblau); }
.kl-linie { stroke-dasharray: 170; stroke-dashoffset: 170; }
.kl-spitze { opacity: 0; transition: opacity .3s; }
.kreislauf.sichtbar .kl-hin { animation: zeichnen .9s .6s ease-out forwards; }
.kreislauf.sichtbar .kl-zurueck { animation: zeichnen .9s 1.9s ease-out forwards; }
.kreislauf.sichtbar .kl-spitze { opacity: 1; }
.kreislauf.sichtbar .kl-spitze--hin { transition-delay: 1.35s; }
.kreislauf.sichtbar .kl-spitze--zurueck { transition-delay: 2.65s; }
.kreislauf.sichtbar text { opacity: 1; transition-delay: .7s; }
.kreislauf.sichtbar text + path ~ text { transition-delay: 2s; }
.kreislauf__wege { display: none; }
/* Gemessen bei 400 Pixeln: Neben 150 Pixeln Bogen blieben den Seiten 75, und „allrounderX“ lief aus seiner
   Fläche. Dort stehen die Seiten untereinander, dazwischen die beiden Wege als Wörter. */
@media (max-width: 560px) {
  .kreislauf { grid-template-columns: minmax(0, 1fr); }
  .kreislauf__pfeile { display: none; }
  .kreislauf__wege { display: flex; justify-content: center; gap: 1.6rem; padding: .2rem 0; font-size: .9rem; font-weight: 700; color: var(--accent-dunkel); }
}

/* ---------- Unser Ziel: links wird durchgestrichen, rechts unterstrichen ---------- */
.zielwahl { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 1.2rem; }
.zielwahl__karte { padding: clamp(1.5rem, 3vw, 2.3rem); border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; }
.zielwahl__karte small { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.zielwahl__karte b { display: block; margin: .7rem 0 .7rem; font-size: clamp(1.45rem, 2.6vw, 2.05rem); font-weight: 850; line-height: 1.2; letter-spacing: -0.02em; color: var(--muted); }
.zielwahl__karte p { margin: 0; color: var(--muted); }
.zielwahl__karte b span { -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(var(--rot), var(--rot)) no-repeat left 56% / 0 3px; transition: background-size .8s cubic-bezier(.2,.7,.2,1) .7s; }
.zielwahl__karte.sichtbar b span { background-size: 100% 3px; }
.zielwahl__karte--ja { border-color: transparent; background: linear-gradient(135deg, var(--navy) 0%, #0a3fd0 68%, #0120a8 100%); box-shadow: 0 18px 40px rgba(0,102,253,.28); }
.zielwahl__karte--ja small { color: var(--gelb); }
.zielwahl__karte--ja b { color: #fff; }
.zielwahl__karte--ja p { color: #c7d2e6; }
.zielwahl__karte--ja b span { background: linear-gradient(var(--cyan), var(--cyan)) no-repeat left 100% / 0 .13em; padding-bottom: .08em; transition-delay: 1.3s; }
.zielwahl__karte--ja.sichtbar b span { background-size: 100% .13em; }
.zielwahl__wort { align-self: center; padding: .5rem 1rem; border: 1px solid var(--rand); border-radius: 999px; background: #fff; font-weight: 800; font-size: .92rem; color: var(--accent-dunkel); box-shadow: var(--schatten); }
.zielpunkte { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 2rem; margin-top: 2.2rem; font-weight: 600; color: var(--ink); }
.zielpunkte li { display: flex; align-items: center; gap: .5rem; }
.zielpunkte svg { flex: none; width: 22px; height: 22px; color: var(--accent); }
@media (max-width: 800px) {
  .zielwahl { grid-template-columns: minmax(0, 1fr); }
  .zielwahl__wort { justify-self: center; }
  .zielpunkte { flex-direction: column; align-items: flex-start; }
}

/* Ohne Bewegung auch ohne Wartezeit: Die Verzüge oben gehören zur Bewegung und fallen mit ihr weg. */
.bewegung-aus .ueber *, .bewegung-aus .ueber *::before, .bewegung-aus .ueber *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .ueber *, .ueber *::before, .ueber *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
}
@media (max-width: 800px) {
  .seitenkopf__x { width: 280px; margin-top: -140px; right: -70px; }
  .ueber__zahlen .vertrauen { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Seitenmenü: die Abschnitte einer langen Seite ----------
   Eine Liste in drei Gestalten, je nach Platz neben dem Inhalt:
   breit        – Liste mit Namen am linken Rand,
   Laptop       – schmale Nummernleiste, die sich unter dem Zeiger öffnet,
   sonst        – Knopf „Inhalt“ unten rechts, der die Liste aufklappt.
   Die Nummer trägt jeder Punkt in allen dreien; markiert ist der Abschnitt, in dem man liest. */
.seitenmenue { position: fixed; z-index: 45; font-size: .82rem; }
.seitenmenue__knopf { display: none; }
.seitenmenue__tafel { border: 1px solid var(--rand); border-radius: 18px; background: #fff; box-shadow: var(--schatten); }
.seitenmenue__titel { display: block; padding: .7rem .9rem .15rem; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.seitenmenue ol { margin: 0; padding: 6px; list-style: none; counter-reset: punkt; }
.seitenmenue li { counter-increment: punkt; }
.seitenmenue a { display: flex; align-items: center; gap: .55rem; padding: 4px 12px 4px 4px; border-radius: 999px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: background var(--uebergang), color var(--uebergang); }
.seitenmenue a::before { content: counter(punkt); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--rand); border-radius: 50%; background: var(--bg); color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1; transition: background var(--uebergang), border-color var(--uebergang), color var(--uebergang); }
.seitenmenue a:hover { background: var(--bg); color: var(--ink); }
.seitenmenue a.aktiv { background: var(--accent-hell); color: var(--accent-dunkel); }
.seitenmenue a.aktiv::before { border-color: var(--accent); background: var(--accent); color: #fff; }
.seitenmenue a:focus-visible, .seitenmenue__knopf:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* Unter der klebenden Kopfzeile bleibt die Vorzeile des angesprungenen Abschnitts sichtbar. */
.ueber .abschnitt[id] { scroll-margin-top: 30px; }

/* Am Rand: Die Liste mit Namen ist 175 Pixel breit (gemessen); ab 1600 Pixeln bleiben neben dem Inhalt
   gut 200. Die Nummernleiste braucht einen Zeiger, der darüberfahren kann – ein Tablet im Querformat
   bekommt deshalb den Knopf. */
@media (min-width: 1600px), (min-width: 1340px) and (hover: hover) {
  .seitenmenue { left: 10px; top: 50%; transform: translateY(-50%); }
}
@media (min-width: 1340px) and (max-width: 1599px) and (hover: hover) {
  .seitenmenue__titel { display: none; }
  .seitenmenue a { gap: 0; padding-right: 4px; }
  .seitenmenue a span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .25s ease, margin .25s ease, opacity .2s ease; }
  .seitenmenue:hover a span { max-width: 11rem; margin: 0 8px 0 .55rem; opacity: 1; }
  .seitenmenue:hover .seitenmenue__tafel { box-shadow: var(--schatten-gross); }
  /* Mit der Tastatur genauso – aber nicht nach einem Mausklick: Der Punkt behält dann den Fokus, und die
     Leiste bliebe über dem Text stehen. Als eigene Regel, damit ein Browser ohne :has die darüber behält. */
  .seitenmenue:has(a:focus-visible) a span { max-width: 11rem; margin: 0 8px 0 .55rem; opacity: 1; }
}

/* Als Knopf. Ohne Skript ließe er sich nicht öffnen, deshalb erscheint er erst mit ihm. */
@media (max-width: 1339px), (max-width: 1599px) and (hover: none) {
  .seitenmenue { right: 14px; bottom: 14px; display: none; }
  .seitenmenue--bereit { display: block; }
  .seitenmenue__knopf { display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: 0 1.05rem 0 .9rem; border: 1px solid var(--rand); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: .92rem; font-weight: 700; box-shadow: var(--schatten); cursor: pointer; }
  .seitenmenue__knopf svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
  .seitenmenue__knopf small { font-size: .8rem; font-weight: 600; color: var(--muted); }
  .seitenmenue__knopf small:empty { display: none; }
  .seitenmenue.offen .seitenmenue__knopf { border-color: var(--accent); }
  .seitenmenue__tafel { display: none; position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 232px; max-width: calc(100vw - 28px); max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); overflow-y: auto; overscroll-behavior: contain; font-size: .95rem; box-shadow: var(--schatten-gross); }
  .seitenmenue.offen .seitenmenue__tafel { display: block; }
  /* Mit dem Finger: 44 Pixel je Zeile. */
  .seitenmenue a { padding: 7px 16px 7px 7px; }
  .seitenmenue a::before { width: 30px; height: 30px; font-size: .8rem; }
}
@media print { .seitenmenue { display: none; } }