/* ============================================================
   RB-COMPUTERSERVICE — Stylesheet
   Farbwelt abgeleitet aus dem Logo: Metallic-Blau + Chrom-Silber.
   Die Seite ist durchgehend dunkel und blau unterlegt.
   ============================================================ */

/* ---------- Farbtokens: Dunkelblau (Standard) ---------- */
:root {
  --bg:        #070f23;
  --bg-alt:    #0a1530;
  --surface:   #0e1b3a;
  --surface-2: #16274d;
  --line:      #223458;
  --line-soft: #1a2b4d;

  --text:      #e8ecef;   /* Chrom-Hell aus dem Logo */
  --muted:     #aaaeb5;   /* Chrom-Mittel aus dem Logo */
  --dim:       #7d879b;

  --blue-deep: #052f71;   /* Logo-Blau, dunkel */
  --blue:      #2d6fc4;
  --blue-light:#6ea8e8;
  --cyan:      #22d3ee;

  --amber:     #f5a524;   /* nur für Handlungselemente */
  --amber-ink: #241603;
  --green:     #34d399;
  --red:       #f4757a;   /* nur zur Kennzeichnung fehlender Eigenschaften */

  --grad-brand: linear-gradient(100deg, var(--blue-light), var(--cyan));
  --grad-deep:  linear-gradient(135deg, var(--blue-deep), #0a1a44);

  --shadow:    0 18px 40px -22px rgba(0, 0, 0, .85);
  --radius:    16px;
  --radius-sm: 10px;

  --wrap: 1140px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Farbrollen der gezeichneten Seitenmotive (tools/grafiken.js).
     Als Variablen, damit eine Farbänderung hier auch die Grafiken erfasst. */
  --motiv-1:      #0b1730;
  --motiv-2:      #142a55;
  --motiv-schein: rgba(110, 168, 232, .22);
  --motiv-raster: rgba(148, 180, 224, .14);
  --motiv-linie:  #9fc0e8;
  --motiv-akzent: #6ea8e8;
  --motiv-flaeche: rgba(14, 27, 58, .72);
  --motiv-warn:   #f5a524;
  --motiv-gut:    #34d399;

  /* Leiterbahnen auf den Karten. Das Muster wird nicht gefärbt gezeichnet,
     sondern als Maske über eine Farbfläche gelegt — so trägt es die Farbe
     der Seite, statt eine eigene mitzubringen. */
  --platine-farbe: var(--blue-light);
  --platine-kraft: .12;

  color-scheme: dark;
}

/* Das Muster selbst: eine Kachel von 240 × 240, die nahtlos aufgeht — jede
   durchlaufende Bahn tritt gegenüber auf derselben Koordinate wieder ein.
   Als Datenadresse eingebettet und nicht als eigene Datei, damit die Maske
   auch beim Doppelklick auf die Seite greift: Ein Browser behandelt eine
   Datei neben der Seite als fremde Herkunft und verweigert sie dann.
   Der Quelltext dazu steht lesbar in tools/muster.js. */
:root {
  --platine: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%20viewBox='0%200%20240%20240'%3E%3Cg%20fill='none'%20stroke='%23fff'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M0%2040h50l22%2022h48l22-22h98'/%3E%3Cpath%20d='M0%20134h36l22-22h50l22%2022h110'/%3E%3Cpath%20d='M0%20196h84l22%2022h54l22-22h58'/%3E%3Cpath%20d='M70%200v80l-22%2022v58l22%2022v58'/%3E%3Cpath%20d='M176%200v52l22%2022v52l-22%2022v92'/%3E%3Cpath%20d='M120%2062v26'/%3E%3Cpath%20d='M58%20112V88'/%3E%3Cpath%20d='M130%20134v38'/%3E%3Cpath%20d='M198%2074h30'/%3E%3Ccircle%20cx='176'%20cy='148'%20r='5.5'%20stroke-width='2.2'/%3E%3Ccircle%20cx='58'%20cy='112'%20r='5.5'%20stroke-width='2.2'/%3E%3Ccircle%20cx='142'%20cy='40'%20r='5.5'%20stroke-width='2.2'/%3E%3C/g%3E%3Cg%20fill='%23fff'%3E%3Ccircle%20cx='72'%20cy='62'%20r='2.6'/%3E%3Ccircle%20cx='120'%20cy='62'%20r='2.6'/%3E%3Ccircle%20cx='142'%20cy='40'%20r='2.6'/%3E%3Ccircle%20cx='58'%20cy='112'%20r='2.6'/%3E%3Ccircle%20cx='130'%20cy='134'%20r='2.6'/%3E%3Ccircle%20cx='106'%20cy='218'%20r='2.6'/%3E%3Ccircle%20cx='182'%20cy='196'%20r='2.6'/%3E%3Ccircle%20cx='48'%20cy='102'%20r='2.6'/%3E%3Ccircle%20cx='70'%20cy='182'%20r='2.6'/%3E%3Ccircle%20cx='198'%20cy='74'%20r='2.6'/%3E%3Ccircle%20cx='176'%20cy='148'%20r='2.6'/%3E%3Ccircle%20cx='120'%20cy='88'%20r='2.6'/%3E%3Ccircle%20cx='58'%20cy='88'%20r='2.6'/%3E%3Ccircle%20cx='130'%20cy='172'%20r='2.6'/%3E%3Ccircle%20cx='228'%20cy='74'%20r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Der Winkel des umlaufenden Lichts. Angemeldet, weil ein Browser einen
   Kegelverlauf sonst nicht weiterdrehen kann: Ohne die Anmeldung ist
   „from 90deg" für ihn eine Zeichenkette ohne Zwischenwerte. Wo sie fehlt,
   steht das Licht still — sichtbar bleibt die Karte trotzdem. */
@property --winkel {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.68;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(60rem 32rem at 8% -10%, rgba(45, 111, 196, .18), transparent 62%),
    radial-gradient(52rem 30rem at 96% 2%, rgba(34, 211, 238, .10), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3 { line-height: 1.22; margin: 0 0 .6rem; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.15rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.15rem); font-weight: 800; }
h3 { font-size: 1.14rem; font-weight: 700; }
p  { margin: 0 0 1rem; }

a { color: var(--blue-light); }
a:hover { color: var(--cyan); }

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Sichtbarer Fokus — für Tastaturbedienung unverzichtbar */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--amber); color: var(--amber-ink);
  padding: .8rem 1.3rem; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
section.tight { padding: clamp(2.5rem, 5vw, 3.75rem) 0; }
.band { background: var(--bg-alt); border-block: 1px solid var(--line-soft); }

.head { max-width: 62ch; margin-bottom: 2.75rem; }
.head p { color: var(--muted); font-size: 1.06rem; margin: 0; }

.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: .55rem;
}

/* ---------- Kopfzeile ---------- */
/* Der Weichzeichner liegt bewusst auf einer eigenen Ebene hinter dem Kopf
   und nicht auf dem Kopf selbst: Safari behandelt ein Element mit
   backdrop-filter wie einen abgeschlossenen Bildbereich und beschneidet
   alles, was ein Kind darüber hinaus zeichnet. Das Aufklappfeld unter
   „Leistungen" hängt genau so am Kopf — es wurde dort geöffnet, aber an
   der Kopfunterkante abgeschnitten und war damit unsichtbar. Andere
   Browser zeigen es, deshalb fiel es nur auf dem Mac auf.
   Aus demselben Grund steht hier kein „will-change: transform" mehr:
   Es hebt den Kopf dauerhaft auf eine eigene Zeichenebene und begünstigt
   dasselbe Beschneiden. Das Ein- und Ausfahren läuft auch ohne flüssig. */
.top {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line-soft);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1),
              border-color .25s ease;
}
.top::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .25s ease, box-shadow .25s ease;
}
/* Der Kopf lief eine Zeit lang breiter als der Lesetext, weil Logo,
   Navigation und zwei beschriftete Schaltflächen in 1140px nicht mehr
   sicher nebeneinander passten. Seit WhatsApp auf der Kontaktseite steht,
   ist der Platz wieder da — und die Kante des Kopfes liegt wieder über
   der des Inhalts, wo sie hingehört. */
.top .wrap {
  position: relative;
  width: min(100% - 2.5rem, var(--wrap));
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem 0; flex-wrap: wrap;
  transition: padding .25s ease;
}

/* Sobald gescrollt wird: kompakter, deutlicher abgesetzt */
.top.gescrollt::before {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9);
}
.top.gescrollt { border-color: var(--line); }
.top.gescrollt .wrap { padding: .32rem 0; }
.top.gescrollt .brand img { width: 36px; height: 36px; }

/* Beim Lesen nach unten weicht der Kopf; beim Hochscrollen kehrt er zurück */
.top.versteckt { transform: translateY(-100%); }

.brand img { transition: width .25s ease, height .25s ease; }

/* Sprungziele nicht unter dem Kopf verschwinden lassen */
[id] { scroll-margin-top: 96px; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand img { width: 44px; height: 44px; }

.brand-text b { display: block; font-size: 1.02rem; font-weight: 800; color: var(--text); letter-spacing: .02em; }
.brand-text > span { display: block; font-size: .74rem; color: var(--muted); letter-spacing: .04em; }

.nav { display: flex; gap: .3rem; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--muted); text-decoration: none; font-size: .93rem; font-weight: 600;
  padding: .5rem .72rem; border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.aktiv { color: var(--text); }
.nav-link.aktiv::after {
  content: ""; position: absolute; left: .72rem; right: .72rem; bottom: -.1rem;
  height: 2px; border-radius: 2px; background: var(--grad-brand);
}
.nav > .nav-link { position: relative; }

/* ---------- Aufklappmenü „Leistungen" ---------- */
/* Das Aufklappfeld richtet sich am Kopfbereich aus, nicht am Menüpunkt —
   so bleibt es immer innerhalb der Seite, egal wo der Punkt steht. */
.nav-punkt { display: flex; align-items: center; }
.nav-punkt > .nav-haupt { position: relative; }
.nav-pfeil { width: 15px; height: 15px; transition: transform .2s ease; opacity: .8; }
.nav-punkt.offen .nav-pfeil { transform: rotate(180deg); }

/* Der eigene Aufklappknopf wird erst im schmalen Menü gebraucht */
.nav-auf { display: none; }

.mega {
  position: absolute; top: calc(100% - .1rem); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(94vw, 940px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8), var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 60;
}
/* Unsichtbare Brücke: der Zeiger darf den Spalt zum Panel überqueren,
   ohne dass es zuklappt */
.mega::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1.4rem; height: 1.4rem;
}
.nav-punkt:hover > .mega,
.nav-punkt:focus-within > .mega,
.nav-punkt.offen > .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Per Klick zugeklappt: Der Zeiger steht nach dem Klick noch auf dem
   Menütitel — ohne diese Regel hielte ihn allein sein Hover wieder offen,
   und der Klick sähe wirkungslos aus. Der Halt endet, sobald der Zeiger
   den Menüpunkt verlässt. Muss nach den Öffnen-Regeln stehen: gleiche
   Gewichtung, die spätere Regel gewinnt. */
.nav-punkt.zu > .mega {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
}
/* visibility statt display: das Panel bleibt aus dem Tabulator-Ablauf
   heraus, solange es geschlossen ist — ohne dass JavaScript nötig wäre */

.mega-innen {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 1.6rem; padding: 1.5rem 1.6rem 1.2rem;
}
.mega-spalte { min-width: 0; }

.mega-kopf {
  display: block; text-decoration: none; border-radius: var(--radius-sm);
  padding: .6rem .7rem; margin: -.6rem -.7rem .7rem;
  border-bottom: 1px solid var(--line-soft);
  transition: background .15s ease;
}
.mega-kopf:hover { background: var(--surface-2); }
.mega-kopf-titel {
  display: block; font-size: 1.02rem; font-weight: 800; color: var(--text);
  letter-spacing: -.01em;
}
.mega-kopf.aktiv .mega-kopf-titel { color: var(--blue-light); }
.mega-kopf-kurz {
  display: block; font-size: .82rem; color: var(--muted); line-height: 1.45;
  margin-top: .12rem;
}

.mega-zwischen {
  display: flex; align-items: center; gap: .5rem;
  font-size: .88rem; font-weight: 700; color: var(--cyan);
  text-decoration: none; padding: .42rem .6rem; margin-bottom: .35rem;
  border-radius: 8px; background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, transparent);
}
.mega-zwischen:hover { background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); }
.mega-zwischen svg { width: 16px; height: 16px; flex-shrink: 0; }

.mega-liste { list-style: none; margin: 0; padding: 0; }
.mega-liste.zweispaltig { columns: 2; column-gap: 1rem; }
.mega-liste li { break-inside: avoid; }
.mega-liste a {
  display: block; padding: .38rem .6rem; border-radius: 7px;
  font-size: .9rem; color: var(--muted); text-decoration: none;
  transition: color .12s ease, background .12s ease;
}
.mega-liste a:hover { color: var(--text); background: var(--surface-2); }
.mega-liste a[aria-current="page"] { color: var(--blue-light); font-weight: 700; }

.mega-fuss {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  margin: .4rem -1.6rem -1.2rem; padding: .85rem 1.6rem;
  background: var(--surface-2);
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}
.mega-alle, .mega-ruf {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem; font-weight: 700; text-decoration: none;
}
.mega-alle { color: var(--blue-light); }
.mega-alle:hover { color: var(--cyan); }
.mega-alle svg { width: 15px; height: 15px; }
.mega-ruf { color: var(--muted); }
.mega-ruf:hover { color: var(--text); }
.mega-ruf svg { width: 16px; height: 16px; color: var(--amber); }

/* Einspaltiges Aufklappfeld — für Punkte, unter denen einzelne Seiten
   hängen statt Bereiche mit eigener Liste. Schmaler als das zweispaltige:
   Fünf Einträge in einer 940 Pixel breiten Fläche stünden verloren.
   Und zwei Zeilen je Eintrag, weil ein Produktname allein nicht sagt,
   wofür das Ding gut ist. */
.mega-schmal { width: min(94vw, 520px); }
.mega-schmal .mega-innen { grid-template-columns: 1fr; }
.mega-produkte a { padding: .5rem .6rem; }
.mega-produkt-name {
  display: block; font-family: ui-monospace, Consolas, monospace;
  font-size: .92rem; font-weight: 700; color: var(--text);
  transition: color .12s ease;
}
.mega-produkte a:hover .mega-produkt-name,
.mega-produkte a[aria-current="page"] .mega-produkt-name { color: var(--blue-light); }
.mega-produkt-kurz {
  display: block; font-size: .8rem; color: var(--muted);
  line-height: 1.4; margin-top: .1rem;
}

.icon-btn {
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); width: 42px; height: 42px; border-radius: 10px;
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
.icon-btn:hover { border-color: var(--blue); }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- Kontaktwege im Kopf ---------- */
/* Gleiche Höhe und Kantenform wie .icon-btn, damit die rechte Ecke
   der Kopfzeile eine geschlossene Reihe bleibt. */
.kopf-akt { display: flex; align-items: center; gap: .4rem; }
.kopf-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 42px; padding: 0 .7rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; white-space: nowrap;
  font-size: .85rem; font-weight: 700; flex-shrink: 0;
  transition: border-color .15s ease, background .15s ease;
}
.kopf-btn:hover { border-color: var(--blue); }
.kopf-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Die Erkennungsfarbe des Dienstes trägt hier den Hinweis — der Rahmen
   bleibt wie bei den übrigen Schaltflächen. */
.kopf-fw svg { color: var(--cyan); }

/* ---------- Profile in der Fußzeile ---------- */
.profile { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.profil {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.profil:hover { color: var(--text); border-color: var(--blue); background: var(--surface); }
.profil svg { width: 19px; height: 19px; }

/* ---------- Kontaktformular ---------- */
.formular-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.3rem, 3vw, 2.2rem);
  box-shadow: var(--shadow);
}
.formular { display: flex; flex-direction: column; gap: 1.05rem; }
/* Zwei Felder nebeneinander, sobald die Spalte breit genug ist */
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.05rem; }
.feld { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.feld label { font-weight: 700; font-size: .93rem; color: var(--text); }
.feld label abbr { color: var(--amber); text-decoration: none; border: 0; }
.feld-zusatz { display: block; font-weight: 400; font-size: .84rem; color: var(--dim); }

.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: .97rem; color: var(--text);
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .72rem .85rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.feld textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--dim); }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--blue); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 22%, transparent);
}
/* Erst wenn etwas eingetragen wurde, wird auf Fehler hingewiesen — sonst
   stünde das Formular schon vor dem ersten Zeichen rot da. */
.feld input:not(:placeholder-shown):invalid,
.feld textarea:not(:placeholder-shown):invalid { border-color: var(--amber); }
.feld select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 55%, calc(100% - .75rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.feld select option { background: var(--surface); color: var(--text); }

.feld-haken { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.feld-haken input {
  width: 1.15rem; height: 1.15rem; margin-top: .2rem;
  accent-color: var(--blue); cursor: pointer;
}
.feld-haken label { font-weight: 400; font-size: .93rem; color: var(--muted); }

/* Das Feld für die Automaten: aus dem Bild geschoben, nicht per display:none
   ausgeblendet, damit es auch ausgefüllt wird. */
.feld-falle {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; margin: 0;
}

.formular-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: .3rem;
}

/* Rückmeldung nach dem Absenden. Sichtbar wird immer nur der Kasten, auf
   den die Adresse zeigt — dafür genügt CSS, ohne JavaScript. */
.formular-stand {
  display: none; align-items: flex-start; gap: .6rem;
  margin: 0 0 1.4rem; padding: .95rem 1.1rem;
  border-radius: var(--radius-sm); font-size: .95rem;
  border: 1px solid var(--line); background: var(--surface-2);
}
.formular-stand:target { display: flex; }
.formular-stand.gut {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  background: color-mix(in srgb, var(--green) 12%, var(--surface-2));
}
.formular-stand.schlecht {
  border-color: color-mix(in srgb, var(--amber) 55%, transparent);
  background: color-mix(in srgb, var(--amber) 12%, var(--surface-2));
}

/* ---------- Anfahrtskarte ---------- */
.karte {
  margin: 1.6rem 0 0; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; background: var(--surface);
}
.karte-vorschau {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .85rem; padding: clamp(1.8rem, 5vw, 3rem) 1.4rem;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 62%),
    var(--surface);
}
.karte-nadel { width: 34px; height: 34px; color: var(--cyan); }
.karte-anschrift { margin: 0; line-height: 1.6; color: var(--text); }
.karte-anschrift strong { letter-spacing: .02em; }
.karte-text { margin: 0; max-width: 34rem; font-size: .88rem; color: var(--dim); }
.karte-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: .3rem; }
.karte-knoepfe .btn { padding: .7rem 1.2rem; font-size: .93rem; }
.karte-knoepfe .btn svg { width: 18px; height: 18px; }
/* Die geladene Karte behält das Seitenverhältnis der Vorschau */
.karte iframe { display: block; width: 100%; height: clamp(300px, 42vw, 440px); border: 0; }

/* ---------- Schaltflächen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.6rem; border-radius: 12px; font-weight: 700; font-size: 1rem;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  font-family: inherit; transition: transform .14s ease, box-shadow .14s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }

.btn-cta {
  background: var(--amber); color: var(--amber-ink);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--amber) 75%, transparent);
}
.btn-cta:hover { color: var(--amber-ink); box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--amber) 75%, transparent); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--blue-light); color: var(--text); background: var(--surface-2); }

.btn-sm { padding: .62rem 1.05rem; font-size: .92rem; border-radius: 10px; }

/* ---------- Brotkrumen ---------- */
.krumen {
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg-alt) 55%, transparent);
}
.krumen ol {
  list-style: none; margin: 0; padding: .7rem 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .15rem;
  font-size: .84rem; color: var(--dim);
}
.krumen li { display: flex; align-items: center; }
.krumen li + li::before {
  content: "›"; margin: 0 .5rem; color: var(--dim); opacity: .7;
}
.krumen a { color: var(--muted); text-decoration: none; }
.krumen a:hover { color: var(--text); text-decoration: underline; }
.krumen [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(3rem, 7vw, 5rem); }

/* Aufmacher der Startseite: Foto im Hintergrund, Begrüßung davor.
   Ein Verlauf über dem Bild hält den Text bei jeder Bildhelligkeit lesbar. */
.hero-bild {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--line-soft);
}
/* Das Foto liegt in derselben Spalte wie der Inhalt: Es endet rechts bündig
   mit dem Text, statt bis an den Fensterrand zu laufen. Geometrie deshalb
   identisch zu .wrap. */
.hero-medium {
  position: absolute; inset-block: 0; z-index: 0;
  left: 50%; transform: translateX(-50%);
  width: min(100% - 2.5rem, var(--wrap));
}
.hero-foto { position: absolute; inset-block: 0; right: 0; width: min(54%, 660px); }
/* Rechts stößt das Foto oben an die Oberkante des Aufmachers, unten an
   seinen Abschluss und dazwischen an den rechten Rand des Inhalts. Runde
   Ecken sähen dort nach Versehen aus — sie bleiben der linken Seite
   vorbehalten, die frei im Bild liegt.
   Doppelte Klasse aus demselben Grund wie beim Zuschnitt darunter: `.motiv`
   setzt die Rundung weiter unten im Stylesheet als Kurzform und nähme diese
   Zeile sonst wieder zurück. */
.motiv.hero-foto {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* Doppelte Klasse mit Absicht: `.motiv img` setzt height auf auto und steht
   weiter unten im Stylesheet — ohne die höhere Spezifität bliebe der
   Zuschnitt hier wirkungslos.
   Y-Wert bewusst tief: so sitzt die Person hoch im Bild und über ihr
   bleibt nur wenig Decke stehen. */
.motiv.hero-foto img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
}
/* Querformatige Schaubilder im Aufmacher: Nur der bildhafte Teil rechts
   gehört in den Ausschnitt — der beschriftete linke Teil würde sonst mit
   der Überschrift der Seite um Aufmerksamkeit ringen. Dafür braucht der
   Aufmacher Höhe, denn erst dann greift der Zuschnitt nach den Seiten. */
.motiv.hero-foto.zeigt-rechts img { object-position: 100% 50%; }
.hero-bild.motivkopf { min-height: clamp(22rem, 38vw, 33rem); display: flex; align-items: center; }

/* Die Grafik reicht weiter nach links und läuft dort selbst aus, statt an
   einer Kante zu enden: Eine Maske nimmt ihre Deckkraft nach links hin
   zurück, sodass sie in den Seitenhintergrund übergeht. Ohne das entstünde
   genau dort ein sichtbarer Schnitt, wo das Bildelement beginnt. */
/* Die Grafik wird vollständig gezeigt — also wird sie auch nicht angeschnitten
   und nicht weggeblendet. Sie sitzt eingepasst im rechten Teil des Aufmachers,
   der Verlauf endet davor und sorgt nur noch für den Lesekontrast des Textes. */
.hero-bild.motivkopf .hero-foto { width: min(58%, 700px); }
.motiv.hero-foto.zeigt-rechts img {
  object-fit: contain; object-position: 100% 50%;
  border-radius: var(--radius);
}

/* Der Verlauf bleibt auf der Textseite und läuft aus, bevor die Grafik
   beginnt — sie soll ja gerade nicht abgedeckt werden. */
.hero-bild.motivkopf .hero-medium::after {
  background: linear-gradient(95deg,
    transparent 0%,
    color-mix(in srgb, var(--bg) 40%, transparent) 24%,
    color-mix(in srgb, var(--bg) 55%, transparent) 40%,
    transparent 48%);
}
.hero-bild.motivkopf > .wrap { width: min(100% - 2.5rem, var(--wrap)); }
.hero-bild.motivkopf h1, .hero-bild.motivkopf .lead { max-width: 20ch; }
.hero-bild.motivkopf .lead { max-width: 46ch; }
/* Waagerecht: von der Textseite her deckend, zum Bild hin offen.
   Links beginnt der Verlauf durchsichtig und nicht mit voller Deckung: Das
   Element ist genau so breit wie der Inhalt, und deckendes `--bg` schnitte
   das wandernde Licht dahinter an seiner Kante glatt ab — als senkrechte
   Linie am linken Rand des Inhalts, mal deutlich, mal kaum, je nachdem wo
   das Licht gerade steht. Gebraucht wird die Deckung ohnehin erst dort, wo
   das Foto anfängt (bei 46 %); davor liegt nur Hintergrund. */
.hero-medium::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(95deg,
      transparent 0%,
      color-mix(in srgb, var(--bg) 40%, transparent) 22%,
      color-mix(in srgb, var(--bg) 82%, transparent) 46%,
      color-mix(in srgb, var(--bg) 34%, transparent) 64%,
      transparent 88%),
    linear-gradient(to top,
      color-mix(in srgb, var(--bg) 72%, transparent) 0%,
      transparent 38%);
}
.hero-inhalt { position: relative; z-index: 1; }
.hero-bild h1 { text-shadow: 0 2px 18px color-mix(in srgb, var(--bg) 70%, transparent); }
.hero-bild .lead { max-width: 46ch; }

.hero .lead {
  font-size: clamp(1.05rem, 2.1vw, 1.22rem); color: var(--muted);
  max-width: 58ch; margin-bottom: 1.9rem;
}
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 2.4rem; }

.badges { display: flex; gap: .65rem; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--line);
  padding: .55rem 1rem; border-radius: 999px; font-size: .87rem; font-weight: 600;
  color: var(--text);
}
.badge svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }

/* Der Knopf zum Bewerten ist das einzige anklickbare Abzeichen und darf
   das zeigen: goldener Rand statt grünem Haken, Rückmeldung beim
   Überfahren. */
.badge-google { text-decoration: none; border-color: color-mix(in srgb, #f0b429 40%, transparent); }
.badge-google:hover { border-color: #f0b429; background: color-mix(in srgb, #f0b429 10%, var(--surface)); }
.badge-google svg { color: #f0b429; }

/* ---------- Sternzeile über der Überschrift ----------
   Sterne, Note und Anzahl nebeneinander in einer Zeile. Sie sitzt zwischen
   Augenbraue und Überschrift und muss deshalb schlank bleiben: kein Kasten,
   keine Fläche, nur Schrift. */
/* `flex` statt `inline-flex`: Die Augenbraue darüber ist inline-block, die
   Zeile würde sich sonst neben sie setzen statt darunter. `width` hält den
   anklickbaren Bereich trotzdem am Text. */
.hero-sterne {
  display: flex; align-items: center; gap: .55rem;
  width: max-content; max-width: 100%;
  margin: 0 0 .9rem; text-decoration: none;
  font-size: 1rem; line-height: 1;
}
.hero-sterne-note { font-weight: 800; color: var(--text); }
.hero-sterne-zahl { font-size: .88rem; color: var(--text); }
.hero-sterne:hover .hero-sterne-zahl { color: var(--muted); }

/* Zwei Sternreihen übereinander: die goldene wird auf den Anteil des
   Schnitts beschnitten, so stimmen auch halbe Sterne.
   `width: max-content` ist Pflicht, nicht Geschmack — in einem Raster oder
   Flexfluss würde die Reihe sonst gedehnt, und der Anteil bezöge sich auf
   die Dehnung statt auf die fünf Sterne. */
.sterne {
  position: relative; line-height: 1; flex-shrink: 0;
  width: max-content; justify-self: start;
  font-size: 1.12rem;
}
/* Auch die unausgefüllten Sterne bleiben golden, nur schwächer. So liest
   sich die Reihe als eine Skala und nicht als zwei verschiedene Dinge —
   und beim Stand 0,0 steht dort trotzdem Gold statt einer grauen Reihe. */
.sterne-leer {
  color: color-mix(in srgb, #f0b429 38%, transparent);
  letter-spacing: .08em;
}
.sterne-voll {
  position: absolute; inset: 0; overflow: hidden;
  color: #f0b429; letter-spacing: .08em; white-space: nowrap;
}

/* ---------- Karten & Raster ---------- */
.grid { display: grid; gap: 1.25rem; }
/* Breiten so gewählt, dass die Karten gleichmäßig aufgehen:
   g2 → 2 Spalten (Lösungen 2+2), g3 → 3 Spalten (Leistungen 3+3+3) */
.g2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

@media (max-width: 460px) {
  .g2, .g3 { grid-template-columns: 1fr; }
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.7rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .45rem; }
.card p  { color: var(--muted); font-size: .96rem; margin-bottom: 0; }

/* ---------- Leiterbahnen und umlaufendes Licht auf den Karten ----------
   Zwei Schichten hinter dem Inhalt: das ruhende Muster und ein Lichtpunkt,
   der am Rand entlangwandert. Beide liegen in Pseudoelementen mit
   z-index: -1. Damit sie dabei nicht hinter der Karte verschwinden, wird
   die Karte durch `isolation` zu einer eigenen Ebene — innerhalb dieser
   Ebene liegt -1 über dem Kartenhintergrund und unter dem Text.

   Ohne die Ebene rutschten beide bis hinter den Seitenhintergrund. */
.card, .kachel, .bereich, .kennzahl {
  position: relative;
  isolation: isolate;
}

.card::before, .kachel::before, .bereich::before, .kennzahl::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: var(--platine-farbe);
  opacity: var(--platine-kraft);
  /* Zwei Masken übereinander: das Muster und ein Verlauf, der es auf die
     untere rechte Ecke beschränkt. `intersect` heißt: sichtbar bleibt,
     was beide durchlassen.

     Der Verlauf ist in Pixeln bemessen und nicht in Prozent — daran hängt,
     ob große Karten lesbar bleiben. Prozentwerte wachsen mit der Karte
     mit: Eine hohe Karte mit langer Liste stünde dann vollflächig unter
     Leiterbahnen, und der Text läge mitten darin. So bleibt der Bogen
     immer gleich groß und lässt die Textseite frei, ganz gleich, ob die
     Karte drei Zeilen hoch ist oder dreißig. */
  -webkit-mask-image: var(--platine), radial-gradient(380px 330px at 100% 100%, #000, transparent 72%);
          mask-image: var(--platine), radial-gradient(380px 330px at 100% 100%, #000, transparent 72%);
  -webkit-mask-size: 240px 240px, cover;
          mask-size: 240px 240px, cover;
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  transition: opacity .3s ease;
}
/* Beim Überfahren tritt das Muster einen Schritt hervor */
.kachel:hover::before, .card:hover::before, .bereich:hover::before,
.kennzahl:hover::before {
  opacity: calc(var(--platine-kraft) * 1.75);
}

/* Der wandernde Lichtpunkt. Gezeichnet wird ein Kegelverlauf über die
   ganze Fläche; sichtbar bleibt davon nur der eine Pixel breite Saum —
   dafür sorgen die beiden Masken, von denen die innere ausgespart wird. */
.card::after, .kachel::after, .bereich::after, .kennzahl::after {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  border-radius: calc(var(--radius) + 1px);
  padding: 1px;
  background: conic-gradient(from var(--winkel),
    transparent 58%,
    color-mix(in srgb, var(--blue-light) 70%, transparent) 78%,
    var(--cyan) 88%,
    transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .75;
  animation: rand-licht 7s linear infinite;
}
@keyframes rand-licht { to { --winkel: 360deg; } }

/* Gerechnet wird nur, was auch zu sehen ist: main.js nimmt die Markierung
   weg, sobald eine Karte den Bildbereich verlässt. Bei einem Dutzend
   Karten spart das spürbar Rechenzeit — und der Lüfter bleibt leise. */
.ruht::after { animation-play-state: paused; }

.card-ico {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 1.05rem;
  background: color-mix(in srgb, var(--blue) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue-light) 35%, transparent);
  transition: background .22s ease, border-color .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
.card-ico svg { width: 23px; height: 23px; color: var(--blue-light); transition: color .22s ease; }

/* Beim Überfahren der Karte hebt sich ihr Symbol mit an — dieselbe Kurve
   wie beim Auftritt, damit sich beides nach derselben Hand anfühlt. */
.card:hover .card-ico {
  background: color-mix(in srgb, var(--blue) 34%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
  transform: translateY(-2px);
}
.card:hover .card-ico svg { color: var(--cyan); }

/* Zwei-Wege-Karten */
.split .card { padding: 2rem; display: flex; flex-direction: column; }
.split .card.accent { border-color: color-mix(in srgb, var(--blue-light) 45%, transparent); }
.split ul { list-style: none; padding: 0; margin: 1.15rem 0 1.7rem; }
.split li {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .38rem 0; font-size: .96rem; color: var(--text);
}
.split li svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; margin-top: .35rem; }
.split .card > :last-child { margin-top: auto; }

/* Ortslisten im Einzugsgebiet */
.ort-liste {
  list-style: none; padding: 0; margin: 1.15rem 0 0;
  columns: 2; column-gap: 1.2rem;
}
.ort-liste li {
  break-inside: avoid; padding: .26rem 0;
  font-size: .93rem; color: var(--muted);
}
.ort-liste li::before {
  content: "·"; color: var(--blue-light);
  margin-right: .5rem; font-weight: 700;
}

/* Lösungs-Karten für Geschäftskunden */
.sol { background: var(--grad-deep); border-color: color-mix(in srgb, var(--blue-light) 30%, transparent); }
.sol .tech {
  display: inline-block; font-family: ui-monospace, Consolas, monospace;
  font-size: .74rem; color: var(--cyan); letter-spacing: .04em;
  background: color-mix(in srgb, var(--cyan) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, transparent);
  padding: .18rem .5rem; border-radius: 5px; margin-bottom: .8rem;
}

/* Die ganze Karte ist der Verweis auf die Seite des Systems — ein kleiner
   „Details"-Link in der Ecke wäre ein winziges Ziel für dieselbe Absicht,
   besonders am Telefon. Die Zeile am Fuß sagt trotzdem, dass es weitergeht:
   Ohne sie sieht eine Karte aus wie ein Kasten, den man nur liest. Sie
   steht immer unten, auch wenn die Karten unterschiedlich viel Text
   tragen — dafür `margin-top: auto` in der Spalte. */
.sol-karte {
  display: flex; flex-direction: column; text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.sol-karte h3 { color: var(--text); transition: color .16s ease; }
.sol-karte:hover {
  border-color: color-mix(in srgb, var(--blue-light) 55%, transparent);
  transform: translateY(-3px);
}
.sol-karte:hover h3 { color: var(--blue-light); }
.sol-mehr {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: auto;
  padding-top: 1.1rem; font-size: .88rem; font-weight: 700;
  color: var(--blue-light);
}
.sol-mehr svg { width: 15px; height: 15px; transition: transform .16s ease; }
.sol-karte:hover .sol-mehr svg { transform: translateX(3px); }

/* Ein System, das noch entsteht: dieselbe Karte, nur ohne Verweisziel.
   Sie steht in der Reihe, damit sichtbar ist, woran gerade gearbeitet
   wird — aber nichts an ihr lädt zum Klicken ein: kein Pfeil, kein
   Anheben beim Überfahren, die Fußzeile grau statt blau. */
.sol-arbeit { cursor: default; }
.sol-arbeit:hover { transform: none; border-color: color-mix(in srgb, var(--blue-light) 30%, transparent); }
.sol-arbeit:hover h3 { color: var(--text); }
/* Kürzel und Stand teilen sich denselben Balken: links, wofür die Karte
   steht, rechts, wie weit sie ist. Ein zweiter Balken darunter wäre für
   zwei Wörter zu viel Gewicht. */
.sol-arbeit .tech { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sol-arbeit .status-arbeit {
  color: var(--amber); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
}
.sol-arbeit .sol-mehr { color: var(--dim); font-weight: 600; }

/* ---------- Seitenmotive ---------- */
.motiv { border-radius: var(--radius); overflow: hidden; line-height: 0; }
/* Bezugsrahmen für das Kennzeichen. Der Aufmacher ist ausgenommen: dort
   liegt das Motiv bereits absolut im Hintergrund und wäre sonst wieder
   im Textfluss. */
.motiv:not(.hero-foto) { position: relative; }
.motiv img, .motiv-svg { width: 100%; height: auto; display: block; }

/* Kennzeichnung erzeugter Motive — untrennbar am Bild, aber so zurück-
   genommen, dass sie das Motiv nicht bekämpft. Der dunkle Grund trägt die
   Schrift auch über hellen Bildstellen. */
.ki-hinweis {
  position: absolute; right: .55rem; bottom: .55rem; z-index: 1;
  padding: .2rem .5rem; border-radius: 6px;
  background: rgba(7, 15, 35, .66);
  border: 1px solid rgba(232, 236, 239, .24);
  backdrop-filter: blur(4px);
  color: #e8ecef; font-size: .68rem; font-weight: 600;
  letter-spacing: .05em; line-height: 1.5;
  pointer-events: none; user-select: none;
}
.motiv-gezeichnet { border: 1px solid var(--line); background: var(--surface-2); }

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.kopf-raster {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem); align-items: center;
}
/* Sämtliche Spaltenaufteilungen gelten ausdrücklich nur ab der zweispaltigen
   Ansicht. Sie stehen bewusst hier drin und nicht weiter unten neben dem
   Umbruch: Eine Media Query erhöht die Gewichtung einer Regel nicht. Ein
   „.kopf-raster.bild-gross" (zwei Klassen) schlägt deshalb jedes
   „.kopf-raster" (eine Klasse) — auch das im schmalen Bereich. Genau daran
   blieben die Köpfe bis aufs Handy hinunter zweispaltig, mit einem Bild
   neben statt unter dem Text. */
@media (min-width: 901px) {
  /* Motiv in der breiteren Spalte, wo es auf Einzelheiten im Bild ankommt.
     Der Text bleibt lesbar, weil die Einleitung ohnehin auf 54 Zeichen
     begrenzt ist und die Spalte damit nicht ausreizt. */
  .kopf-raster.bild-gross { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }

  /* Eine Stufe darüber, für Bildschirmfotos: Ein Fenster voller Kacheln und
     Zahlen braucht mehr Breite als ein Foto, sonst ist nichts davon zu lesen.
     Weiter als 1.5fr geht nicht sinnvoll, sonst zerfasert die Überschrift. */
  .kopf-raster.bild-sehr-gross { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }

  /* Motiv auf Texthöhe: Beide Spalten werden gleich hoch, das Bild füllt seine
     aus. Was seitlich nicht hineinpasst, wird beschnitten statt gestaucht.
     Darunter stehen Bild und Text ohnehin untereinander, und eine erzwungene
     Höhe schnitte dort nur ins Bild. Das Bild liegt dabei absolut in seinem
     Rahmen. Nur so gibt es seine eigene Höhe auf und richtet sich nach der
     Textspalte — sonst bestimmt ein Hochformat die Zeilenhöhe und wächst
     über den Text hinaus. */
  .kopf-raster.bild-fuellt { align-items: stretch; }
  /* Nach oben gedeckelt: Bei einem langen Einstieg würde das Motiv sonst
     mitwachsen und die Seite beherrschen. Es sitzt dann mittig zum Text. */
  .kopf-raster.bild-fuellt .kopf-bild {
    height: 100%; min-height: 20rem; max-height: 32rem; align-self: center;
  }
  .kopf-raster.bild-fuellt .kopf-bild img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 42%;
  }
}
.kopf-raster.gedreht .kopf-text { order: 2; }
.kopf-raster.gedreht .kopf-bild { order: 1; }
.kopf-text h1 { margin-bottom: .8rem; }
.kopf-text .lead {
  font-size: clamp(1.02rem, 1.9vw, 1.15rem); color: var(--muted);
  max-width: 54ch; margin-bottom: 1.7rem;
}
.kopf-text > p:last-child { margin-bottom: 0; }
.kopf-bild { box-shadow: var(--shadow); border: 1px solid var(--line); }

/* ---------- Kachelübersichten ---------- */
.kachel-gitter {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
}
.kachel-gitter.gross { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.kachel {
  display: block; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.kachel:hover {
  border-color: color-mix(in srgb, var(--blue-light) 55%, transparent);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.kachel h3 {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  color: var(--text); margin-bottom: .4rem;
}
.kachel p { color: var(--muted); font-size: .92rem; margin: 0; }
.kachel-pfeil {
  width: 17px; height: 17px; flex-shrink: 0; color: var(--blue-light);
  transition: transform .16s ease;
}
.kachel:hover .kachel-pfeil { transform: translateX(3px); }

/* ---------- Bereichsgitter auf der Leistungsseite ---------- */
.bereich-gitter {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.bereich {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem 1.7rem;
  box-shadow: var(--shadow);
}
.bereich-kopf { display: block; text-decoration: none; margin-bottom: 1.1rem; }
.bereich-kopf h2 {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  font-size: 1.4rem; color: var(--text); margin-bottom: .35rem;
}
.bereich-kopf:hover h2 { color: var(--blue-light); }
.bereich-kopf:hover .kachel-pfeil { transform: translateX(3px); }
.bereich-kopf p { color: var(--muted); font-size: .93rem; margin: 0; }
.bereich-zwischen {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 700; color: var(--cyan); text-decoration: none;
  padding: .5rem .7rem; margin-bottom: .6rem; border-radius: 8px;
  background: color-mix(in srgb, var(--cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyan) 24%, transparent);
}
.bereich-zwischen:hover { background: color-mix(in srgb, var(--cyan) 18%, transparent); color: var(--cyan); }
.bereich-zwischen svg { width: 17px; height: 17px; }
.bereich-liste { list-style: none; margin: 0; padding: 0; }
.bereich-liste a {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  padding: .52rem .7rem; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: .94rem;
  border-bottom: 1px solid var(--line-soft);
}
.bereich-liste li:last-child a { border-bottom: 0; }
.bereich-liste a:hover { color: var(--text); background: var(--surface-2); }
.bereich-liste svg { width: 15px; height: 15px; opacity: .55; flex-shrink: 0; }
.bereich-liste a:hover svg { opacity: 1; color: var(--blue-light); }

/* ---------- Häkchenliste ---------- */
.haken { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.haken.zweispaltig { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: .55rem 1.8rem; }
.haken li { display: flex; gap: .7rem; align-items: flex-start; font-size: .97rem; }
.haken svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; margin-top: .35rem; }

/* ---------- Bild im Textfluss ---------- */
.bildband { margin: 2.2rem 0 0; }
.bildband .motiv { box-shadow: var(--shadow); border: 1px solid var(--line); }
.bildband figcaption {
  color: var(--dim); font-size: .85rem; margin-top: .7rem; text-align: center;
}

/* ---------- Fließtextblock ---------- */
.fliesstext { max-width: 68ch; }
.fliesstext h2 { margin-bottom: 1rem; }
.fliesstext p { color: var(--muted); }
.fliesstext p:last-child { margin-bottom: 0; }

/* ---------- Lösungsblöcke ---------- */
.loesung {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem); align-items: start;
}
.loesung.gedreht .loesung-text { order: 2; }
.loesung.gedreht .loesung-bild { order: 1; }
/* Querformatige Schaubilder bekommen die ganze Spalte: Der Text steht
   darüber, die Grafik darunter. Nebeneinander bliebe sie zu klein, um die
   Beschriftungen lesen zu können. */
.loesung.breit { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
.loesung.breit .loesung-text { max-width: 76ch; }
/* Gegenüberstellung und der Kasten darunter tragen die Aussage des
   Abschnitts und brauchen mehr Platz als der Fließtext daneben: Drei Spalten
   in 76ch gepresst brechen in jeder Zelle mehrfach um. Beide treten deshalb
   aus der Lesebreite heraus, aber nicht bis an den Rand der Inhaltsspalte —
   sonst stünde die Tabelle als Fremdkörper neben dem übrigen Text. Die
   gemeinsame Breite liegt als Variable hier, damit die beiden Blöcke nicht
   auseinanderlaufen können; `100cqi` deckelt sie auf schmalen Fenstern auf
   die Breite von `.loesung.breit`. Der Container muss dafür hier stehen und
   nicht auf `.loesung-text`: dort wäre er selbst schon auf 76ch beschnitten.
   Das Maß steht in `rem` und nicht in `ch`: Eine Variable wird erst beim
   Element aufgelöst, das sie einsetzt, und der Kasten setzt kleinere Schrift
   als die Tabelle — in `ch` gerechnet käme er schmaler heraus. */
.loesung.breit { container-type: inline-size; --block-breit: min(100cqi, 57rem); }
.loesung.breit .loesung-text > .vergleich-rahmen,
.loesung.breit .loesung-text > .hinweis.weit { width: var(--block-breit); max-width: none; }
/* Die Grafik nimmt die Inhaltsbreite ein — höchstens jedoch ihre eigene
   Originalbreite, die `motiv()` als max-width einträgt. Hochskaliert
   würde sie nur unscharf. */
.loesung.breit .loesung-bild { justify-self: center; }
.loesung-text > p { color: var(--muted); }
.loesung-text h2 { margin-bottom: .8rem; }

/* Kernaussage direkt unter der Überschrift */
.loesung-text .claim {
  font-size: 1.08rem; font-weight: 600; color: var(--text);
  margin-bottom: 1.2rem;
}
.loesung-text h3 {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: 1.24rem;
}
.loesung-text h3 + p { color: var(--muted); }
.loesung-text .haken { margin-top: 1.4rem; }
.loesung-bild {
  border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--surface);
}

/* Der Knopf unter der Abschlussgrafik einer Produktseite.

   Er steht als Geschwister neben der Grafik im Raster von `.loesung.breit`
   und ist damit auf dieselbe Mitte ausgerichtet. Bewusst nicht in der
   Auftrittsliste weiter unten: Ein Aufruf zum Handeln soll da sein, auch
   wenn das Skript einmal nicht durchkommt. Die Grafik darf einfliegen,
   der Knopf steht. */
.loesung-knopf {
  display: flex; justify-content: center;
  margin: 0;
}

/* ---------- Großer Aufmacher ----------
   Die Schlagzeile über einem Abschnitt, der gelesen werden soll.

   Die Zeilenbegrenzung gehört an die Überschrift, nicht an den Kasten
   darum: `ch` misst in der Schriftgröße des Elements, das die Angabe
   trägt. Am Kasten (16px) käme ein Viertel der gewollten Breite heraus,
   und der Fließtext darunter wäre gleich mit eingeschnürt. */
.aufmacher { margin-bottom: 2.4rem; }
.aufmacher h2 {
  max-width: 22ch;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.12; letter-spacing: -.02em; margin-bottom: 1.1rem;
}
.aufmacher-lead {
  max-width: 68ch; font-size: clamp(1.02rem, 1.6vw, 1.14rem);
  color: var(--muted); margin-bottom: 0;
}
.aufmacher-lead strong { color: var(--text); }

/* ---------- Herausgestellte Zahlen ----------
   `auto-fit` statt fester Spaltenzahl: Die Reihe bricht selbst um, ohne dass
   für drei und vier Einträge je eine eigene Regel nötig wäre. */
.kennzahlen {
  display: grid; gap: 1.25rem; margin-top: 2.6rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.kennzahl {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
  /* Der Strich bleibt: Er führt das Auge in die Zahl hinein und
     unterscheidet die Kachel von einer gewöhnlichen Karte. */
  border-left: 2px solid color-mix(in srgb, var(--cyan) 55%, transparent);
}
.kennzahl-wert {
  display: block; font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: .35rem;
}
.kennzahl-text { display: block; color: var(--muted); font-size: .95rem; line-height: 1.45; }

/* Folgt eine Kartenreihe auf die Zahlen, braucht sie mehr Luft als der
   Abstand innerhalb des Gitters hergibt. */
.sol-gitter { margin-top: 3rem; }

/* ---------- Auffälliger Hinweis (z. B. Datenrettung) ---------- */
.achtungband { border-block-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.achtung-gross {
  display: flex; gap: 1.4rem; align-items: flex-start;
  background: color-mix(in srgb, var(--amber) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem);
}
.achtung-ico {
  width: 52px; height: 52px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--amber) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent);
}
.achtung-ico svg { width: 26px; height: 26px; color: var(--amber); }
.achtung-gross h2 { font-size: 1.35rem; margin-bottom: .6rem; }
.achtung-gross p { color: var(--text); }
.achtung-ruf { margin: 1.2rem 0 0; }

/* ---------- Tabellen ---------- */
.tabelle-rahmen {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
.ausstattung { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 520px; }
.ausstattung th, .ausstattung td {
  text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-soft);
}
.ausstattung thead th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--dim); background: var(--surface-2); font-weight: 800;
}
.ausstattung tbody th { color: var(--text); font-weight: 700; white-space: nowrap; }
.ausstattung td { color: var(--muted); }
.ausstattung tbody tr:last-child th,
.ausstattung tbody tr:last-child td { border-bottom: 0; }
.tabelle-fuss { color: var(--dim); font-size: .86rem; margin-top: .9rem; }

/* Gegenüberstellung zweier Bauweisen. Die eigene Spalte ist unterlegt und
   heller gesetzt — das trägt die Aussage schon vor dem Lesen. Der Zeilenkopf
   darf hier umbrechen: Merkmalsnamen wie „Sichtbarkeit im Netz" sind länger
   als die Ausstattungsmerkmale, für die `nowrap` gedacht war. */
.vergleich { min-width: 640px; }
.vergleich tbody th { white-space: normal; min-width: 11rem; }
.vergleich .spalte-gut {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--blue-light) 24%, transparent);
}
.vergleich tbody td.spalte-gut { color: var(--text); font-weight: 600; }
.vergleich thead th.spalte-gut { color: var(--blue-light); }

/* Wertung als Zeichen vor der Aussage. Das Zeichen sitzt in einer eigenen
   Zeile mit dem Text statt direkt in der Zelle: Ein `display: flex` auf dem
   `td` selbst nähme ihm seine Rolle im Tabellenraster. */
.vergleich .v-zelle { display: flex; gap: .55rem; align-items: flex-start; }
/* Das Zeichen sitzt nicht mittig zur Zeilenbox, sondern mittig zum
   sichtbaren Textkörper: Über den Kleinbuchstaben liegt die halbe Zeilenhöhe
   plus die Oberlänge, unter ihnen fast nichts — geometrisch zentriert wirkt
   das Zeichen deshalb zu hoch. Die 7px setzen seine Mitte auf die Mitte der
   x-Höhe. */
.vergleich .v-zelle svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 7px; }
.vergleich .v-ja { color: var(--green); }
.vergleich .v-nein { color: var(--red); }

/* Umlaufendes Licht auch um die Gegenüberstellung — sie ist die Karte, an
   der die Aussage des Abschnitts hängt.

   Der Saum liegt hier innen (`inset: 0`, nicht `-1px` wie bei den Karten):
   Der Rahmen scrollt die Tabelle bei schmalem Fenster seitlich, und was
   außerhalb seiner Kante läge, schnitte dieses `overflow` gleich wieder ab. */
.vergleich-rahmen { position: relative; isolation: isolate; }
.vergleich-rahmen::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit; padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--winkel),
    transparent 58%,
    color-mix(in srgb, var(--blue-light) 70%, transparent) 78%,
    var(--cyan) 88%,
    transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .75;
  animation: rand-licht 7s linear infinite;
}
/* Statt eines Listenpreises: der direkte Weg zum Angebot */
.preis-anfrage {
  white-space: nowrap; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Abschließender Aufruf ---------- */
.abschluss { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.abschluss-box {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  align-items: center; justify-content: space-between;
}
.abschluss-box h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: .5rem; }
.abschluss-box p { color: var(--muted); margin: 0; max-width: 52ch; }
.abschluss-box .hero-actions { margin-bottom: 0; }

/* ---------- Zeile mit weiterführenden Schaltflächen ---------- */
.mehr-zeile { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.mehr-zeile .btn svg { width: 16px; height: 16px; }

/* ---------- Preise ---------- */
.preis-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.preis { text-align: center; padding: 2.1rem 1.6rem; }
.preis .betrag {
  font-size: 2.7rem; font-weight: 800; line-height: 1.1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.preis .einheit { color: var(--muted); font-size: .95rem; margin-bottom: .4rem; }
.preis .netto { color: var(--dim); font-size: .84rem; }
.preis.gross { padding: 2.6rem 1.8rem; }
.preis.gross .betrag { font-size: 3.1rem; }
.hinweis {
  margin-top: 1.5rem; padding: 1.15rem 1.4rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: .9rem;
}
.hinweis strong { color: var(--text); }
.hinweis a { text-decoration: underline; text-underline-offset: 2px; }
/* Hinweis auf Inhalte, die noch nachgetragen werden */
.hinweis.offen {
  background: color-mix(in srgb, var(--amber) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--amber) 38%, transparent);
}

/* ---------- Ablauf ---------- */
.steps { counter-reset: s; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.step { position: relative; padding-left: 3.6rem; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: -.1rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
  color: var(--amber-ink); background: var(--amber);
}
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---------- Kontaktleiste ---------- */
.kontakt-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.8rem, 4vw, 2.9rem);
  box-shadow: var(--shadow);
}
.kontakt-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.kontakt-liste li { display: flex; gap: .85rem; align-items: flex-start; }
.kontakt-liste svg { width: 20px; height: 20px; color: var(--blue-light); flex-shrink: 0; margin-top: .3rem; }
.kontakt-liste a { text-decoration: none; font-weight: 700; }
.kontakt-liste span { display: block; font-size: .82rem; color: var(--muted); font-weight: 400; }

/* WhatsApp steht neben der Mobilnummer, weil es dieselbe Nummer ist —
   neben dem Festnetz wäre es ein Versprechen, das die Leitung nicht
   einlöst.

   Und zwar dicht daneben, nicht an den rechten Spaltenrand geschoben:
   Dort stünde es auf halber Strecke zur nächsten Spalte und sähe aus, als
   gehöre es dorthin. Eine Schaltfläche gehört neben das, was sie meint.
   `align-self` und der kleine Versatz nach oben setzen sie auf die Höhe
   der Nummer, nicht auf die Mitte aus Nummer und Beschriftung. */
.wa-knopf {
  display: inline-flex; align-items: center; gap: .4rem;
  flex-shrink: 0; align-self: flex-start; margin-top: -.12rem;
  padding: .32rem .62rem; border-radius: 8px;
  font-size: .82rem; font-weight: 700;
  color: var(--text); text-decoration: none;
  background: color-mix(in srgb, #25d366 12%, transparent);
  border: 1px solid color-mix(in srgb, #25d366 38%, transparent);
  transition: background .15s ease, border-color .15s ease;
}
.wa-knopf:hover {
  background: color-mix(in srgb, #25d366 22%, transparent);
  border-color: #25d366;
}
/* Das Symbol der Liste ist größer und hängt tiefer — in der Schaltfläche
   gilt beides nicht. */
.kontakt-liste .wa-knopf svg { width: 16px; height: 16px; margin-top: 0; color: #25d366; }

/* ---------- Fußzeile ---------- */
footer {
  background: var(--bg-alt); border-top: 1px solid var(--line-soft);
  padding: 3rem 0 2rem; margin-top: 1rem;
}
/* Sechs Spalten, seit die Lösungen eine eigene bekommen haben. Mit den
   früheren 190 Pixeln Mindestbreite rutschte die letzte allein in eine
   zweite Zeile, und das sah nach Versehen aus. */
.foot-grid {
  display: grid; gap: 2rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
/* Sobald alle sechs nebeneinander stehen, werden sie nach ihrem Inhalt
   verteilt statt gleich breit: Die E-Mail-Adresse und „Internet, WLAN &
   Router" brauchen mehr Platz als „Office-PCs". Gleich breite Spalten
   sähen ordentlicher aus und brächen dafür in jeder zweiten Zeile um. */
@media (min-width: 1080px) {
  .foot-grid { grid-template-columns: 1.02fr 1.2fr 1.14fr .7fr 1.02fr .92fr; }
}
.foot-seit { font-size: .84rem !important; color: var(--dim) !important; }
.foot-zeiten { color: var(--dim); font-size: .86rem; margin-top: .4rem; }
footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .11em; color: var(--dim); margin: 0 0 .85rem; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: .45rem; }
footer a { color: var(--muted); text-decoration: none; font-size: .94rem; }
footer a:hover { color: var(--text); }
footer p { color: var(--muted); font-size: .94rem; }
.foot-bottom {
  margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .87rem; color: var(--dim);
}

/* ---------- Rechtstexte ---------- */
.legal { max-width: 74ch; }
.legal h2 {
  font-size: 1.42rem; margin-top: 2.9rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { margin-top: 1.6rem; }
.legal h3 { font-size: 1.04rem; margin-top: 1.7rem; color: var(--blue-light); }
.legal p, .legal li { color: var(--muted); }
.legal strong { color: var(--text); }
.legal ul { padding-left: 1.3rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .45rem; }
.legal dl { margin: 0 0 1.2rem; }
.legal dt { font-weight: 700; color: var(--text); margin-top: .85rem; }
.legal dd { margin: 0; color: var(--muted); }

.legal .box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1.35rem 1.6rem; margin: 1.4rem 0;
}
.legal .box p:last-child { margin-bottom: 0; }

/* Hinweiskasten für Punkte, die noch geprüft werden müssen */
.legal .achtung {
  background: color-mix(in srgb, var(--amber) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 42%, transparent);
  border-radius: var(--radius-sm); padding: 1.25rem 1.5rem; margin: 1.6rem 0;
}
.legal .achtung strong { color: var(--text); }
.legal .achtung p { color: var(--text); }
.legal .achtung p:last-child { margin-bottom: 0; }

.legal-lead { color: var(--muted); font-size: 1.04rem; }

/* ---------- Platzhalter: markiert offene Inhalte ---------- */
.ph {
  background: color-mix(in srgb, var(--amber) 22%, transparent);
  border-bottom: 2px dotted var(--amber);
  padding: 0 .2rem; border-radius: 3px;
}

/* ---------- Auftritt beim Hereinscrollen ----------
   Nicht nur die Karten: Augenbraue, Überschrift, Einleitung, Bild und
   Karten treten nacheinander auf, jedes ein Stück tiefer und unsichtbar
   beginnend. Der Versatz zwischen ihnen macht aus einem gemeinsamen
   Erscheinen ein Nacheinander — das ist der ganze Trick. Ausgelöst wird
   es in main.js, das die Klasse „sichtbar" vergibt und den Verzug setzt.

   Alles hängt an .bewegt am <html>. Diese Klasse setzt das Skript selbst,
   und zwar bevor der Body gelesen ist — ohne Skript greift keine einzige
   Regel hier, und alles steht von Anfang an da, wo es hingehört.
   Wer Bewegung abbestellt hat, bekommt die Klasse gar nicht erst.

   Die Selektoren stehen hier ausgeschrieben und nicht als per Skript
   vergebene Markierung: Eine solche Klasse käme erst, wenn die Seite
   gelesen ist — die Elemente stünden also einen Wimpernschlag lang da und
   blendeten dann erst aus, um wieder einzublenden. Dieselbe Liste steht in
   main.js unter AUFTRITT; wer hier eine Zeile ergänzt, ergänzt sie dort.

   Was hier fehlt, fehlt mit Absicht: Der Seitenkopf läuft ohne Beobachter
   (siehe „Auftritt des Seitenkopfs"), Rechtstexte bleiben ruhig, und
   nichts steht innerhalb von etwas anderem aus dieser Liste — sonst
   erschiene eine Karte, deren Inhalt noch fehlt. */
.bewegt .grid > *,
.bewegt .kachel-gitter > *,
.bewegt .bereich-gitter > *,
.bewegt .preis-grid > *,
.bewegt .kennzahlen > *,
.bewegt .steps > *,
.bewegt .head > *,
.bewegt .fliesstext > *,
.bewegt .loesung-text > *,
.bewegt .abschluss-box > *,
.bewegt .mehr-zeile > *,
.bewegt .formular-box,
.bewegt .achtung-gross,
.bewegt .tabelle-rahmen,
.bewegt .hinweis {
  opacity: 0;
  transform: translateY(22px);
  /* Der Verzug staffelt eine Reihe; main.js setzt ihn je Element.
     Die Kurve läuft schnell an und legt sich weich hin — eine gleichmäßige
     wirkt dagegen mechanisch. */
  transition: opacity .72s ease var(--verzug, 0s),
              transform .72s cubic-bezier(.22, 1, .36, 1) var(--verzug, 0s);
}

/* Bilder kommen zusätzlich aus der Tiefe: Sie füllen eine Fläche, und ein
   reines Hochschieben sähe daneben nach verrutschtem Kasten aus. */
.bewegt .loesung-bild,
.bewegt .bildband,
.bewegt .karte {
  opacity: 0;
  transform: translateY(22px) scale(.965);
  transition: opacity .8s ease var(--verzug, 0s),
              transform .8s cubic-bezier(.22, 1, .36, 1) var(--verzug, 0s);
}

/* Gleiche Gewichtung wie oben, steht aber später — und gewinnt damit */
.bewegt .sichtbar { opacity: 1; transform: none; }

/* ---------- Auftritt des Seitenkopfs ----------
   Der Kopf steht beim Laden schon im Bild; auf einen Beobachter zu warten
   hieße, ihn erst nach dem ersten Malen zu zeigen. Deshalb hier eine
   Animation, die von selbst läuft.

   Der Ausgangszustand steht ausschließlich in den Bildern der Animation,
   nicht in der Regel. Das ist der Unterschied, an dem alles hängt: Wer
   Bewegung abbestellt hat, bekommt weiter unten `animation: none` — und
   damit ein Element, das schlicht sichtbar ist. Stünde `opacity: 0` in
   der Regel, bliebe der ganze Seitenkopf leer. */
@keyframes auftritt-hoch {
  from { opacity: 0; transform: translateY(26px); }
}
@keyframes auftritt-tiefe {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
}

.hero-inhalt > *,
.kopf-text > * {
  animation: auftritt-hoch .85s cubic-bezier(.22, 1, .36, 1) both;
}
/* Hier das Foto selbst und nicht sein Rahmen `.hero-medium`: Der hält sich
   mit einem eigenen transform in der Mitte der Seite, und eine Animation
   auf derselben Eigenschaft würde ihn aus ihr herausschieben. */
.hero-foto,
.kopf-bild {
  animation: auftritt-tiefe 1.1s cubic-bezier(.22, 1, .36, 1) both;
}

/* Die Staffelung: Augenbraue zuerst, dann Überschrift, Einleitung,
   Schaltflächen, Abzeichen. Das Bild setzt früh ein und läuft länger —
   so ist es fertig, wenn der Text es ist, ohne ihn zu überholen. */
.hero-inhalt > :nth-child(1), .kopf-text > :nth-child(1) { animation-delay: .05s; }
.hero-inhalt > :nth-child(2), .kopf-text > :nth-child(2) { animation-delay: .14s; }
.hero-inhalt > :nth-child(3), .kopf-text > :nth-child(3) { animation-delay: .23s; }
.hero-inhalt > :nth-child(4), .kopf-text > :nth-child(4) { animation-delay: .32s; }
.hero-inhalt > :nth-child(5), .kopf-text > :nth-child(5) { animation-delay: .41s; }
.hero-inhalt > :nth-child(n+6), .kopf-text > :nth-child(n+6) { animation-delay: .5s; }
.hero-foto, .kopf-bild { animation-delay: .12s; }

/* ---------- Wanderndes Licht hinter dem Aufmacher ----------
   Zwei weiche Lichtflecke, die langsam gegeneinander ziehen. Sie liegen
   hinter allem und bewegen sich so träge, dass man die Bewegung eher
   ahnt als sieht — genau das soll sie auch bleiben.

   Bewegt wird die Position des Verlaufs, nicht das Element: Ein Verschieben
   per transform zöge den Lichtfleck sichtbar über die Kante hinaus. */
.hero, .seitenkopf { position: relative; isolation: isolate; overflow: hidden; }
.hero::before, .seitenkopf::before {
  content: ""; position: absolute; inset: -20%; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(28rem 20rem at 22% 28%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 64%),
    radial-gradient(24rem 18rem at 78% 62%, color-mix(in srgb, var(--cyan) 15%, transparent), transparent 62%);
  animation: licht-wandern 28s ease-in-out infinite alternate;
}
@keyframes licht-wandern {
  from { transform: translate3d(-2%, -1.5%, 0); }
  to   { transform: translate3d(3%, 2.5%, 0); }
}

/* ---------- Reaktionsfreudig ---------- */
/* Menüschalter — erscheint erst, wenn die Navigation nicht mehr in
   eine Zeile passt */
.burger { display: none; }
/* view-box als Bezug, sonst dreht jeder Balken um seinen eigenen Mittelpunkt */
.burger .balken {
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), opacity .15s ease;
  transform-box: view-box;
  transform-origin: 12px 12px;
}
.burger[aria-expanded="true"] .b1 { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .b2 { opacity: 0; }
.burger[aria-expanded="true"] .b3 { transform: translateY(-5px) rotate(-45deg); }

/* Im schmalen Band, in dem die Navigation gerade noch neben dem Logo steht,
   bleibt die Fernwartung ein Symbol: Sechs Menüpunkte, die Wortmarke und die
   Beschriftung passen dort nicht zugleich in die Zeile — auf macOS setzt der
   Schriftstapel denselben Text zudem 4–6% breiter. Darüber ist Platz, darunter
   klappt die Navigation in den Menüknopf und gibt ihn frei.
   Was das Symbol allein nicht sagt, sagen `title` und `aria-label`; und die
   Fernwartung steht zusätzlich auf der Kontakt- und der Remote-Seite. */
@media (min-width: 1041px) and (max-width: 1200px) {
  .kopf-btn { width: 42px; padding: 0; justify-content: center; }
  .kopf-btn span { display: none; }
}

/* Der Bereich, in dem die Navigation gerade noch nebenher passt. Ein
   knapperes Innenmaß je Menüpunkt bringt hier die rund vierzig Pixel, die
   den Umbruch verhindern — auch mit der breiteren Mac-Systemschrift. */
@media (min-width: 1041px) and (max-width: 1200px) {
  .nav { gap: 0; }
  .nav-link { padding: .5rem .45rem; }
}
/* Die letzten zwanzig Pixel vor dem Menüknopf. Eine Spur kleiner gesetzt
   fällt beim Lesen nicht auf, ein Kopf in zwei Zeilen schon. */
@media (min-width: 1041px) and (max-width: 1100px) {
  .nav-link { font-size: .9rem; padding: .5rem .38rem; }
}

/* Ab hier passt die Navigation nicht mehr neben Logo und Schaltflächen */
@media (max-width: 1040px) {
  .burger { display: grid; order: 3; }

  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: .55rem .9rem 1rem;
    box-shadow: 0 22px 34px -20px rgba(0, 0, 0, .7);
    max-height: calc(100vh - 5rem); overflow-y: auto;
  }
  .nav.offen { display: flex; }
  .nav-link { padding: .9rem 1rem; font-size: 1.02rem; border-radius: 9px; }
  .nav-link.aktiv::after { display: none; }
  .nav-link.aktiv { background: var(--surface-2); }

  /* Aus dem Aufklappfeld wird eine eingerückte Liste, die der
     Knopf rechts daneben öffnet. Der Menütitel bleibt dabei ein Link. */
  .nav-punkt { display: block; position: static; }
  .nav-punkt > .nav-haupt { display: flex; padding-right: 3.4rem; }
  .nav-pfeil { display: none; }

  .nav-auf {
    display: grid; place-items: center;
    position: absolute; right: 1rem; margin-top: -3.2rem;
    width: 2.6rem; height: 2.6rem; border-radius: 8px;
    background: var(--surface-2); border: 1px solid var(--line);
    color: var(--text); cursor: pointer;
  }
  .nav-auf svg { width: 18px; height: 18px; transition: transform .2s ease; }
  .nav-punkt.offen .nav-auf svg { transform: rotate(180deg); }

  .mega {
    display: none;
    position: static; transform: none; width: auto;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: none;
  }
  .mega::before { display: none; }
  /* Hier öffnet ausschließlich der Knopf — Hover würde auf
     Berührungsgeräten sonst beim Scrollen auslösen */
  .nav-punkt:hover > .mega,
  .nav-punkt:focus-within > .mega { display: none; }
  .nav-punkt.offen > .mega { display: block; transform: none; }
  /* Der Zeiger-Halt aus der breiten Ansicht hat hier nichts zu suchen —
     bliebe er beim Verkleinern des Fensters stehen, wäre die aufgeklappte
     Liste unsichtbar */
  .nav-punkt.zu > .mega { opacity: 1; visibility: visible; pointer-events: auto; }

  .mega-innen {
    grid-template-columns: 1fr; gap: 1rem;
    padding: .3rem 0 .6rem .8rem;
    border-left: 2px solid var(--line);
    margin-left: 1rem;
  }
  .mega-kopf { margin: 0 0 .5rem; padding: .5rem .6rem; }
  .mega-liste.zweispaltig { columns: 1; }
  .mega-liste a { padding: .58rem .6rem; font-size: .95rem; }
  .mega-fuss {
    margin: .3rem 0 0; padding: .8rem .8rem;
    border-radius: var(--radius-sm); flex-direction: column; align-items: flex-start;
  }

  .top .wrap { padding: .6rem 0; }
  .brand { order: 1; }
  .kopf-akt { order: 2; }
}

/* ---------- Zweispaltige Blöcke umbrechen ---------- */
@media (max-width: 900px) {
  .kopf-raster, .loesung {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  /* Im Taschenformat steht der Text immer zuerst und das Bild darunter —
     auch dort, wo die beiden in der breiten Ansicht getauscht sind. Wer auf
     dem Handy liest, will zuerst wissen, worum es geht; das Motiv bestätigt
     es danach. Ein vorangestelltes Bild schöbe die Überschrift nur nach
     unten aus dem Blick. */
  .kopf-raster.gedreht .kopf-text,
  .loesung.gedreht .loesung-text { order: 1; }
  .kopf-raster.gedreht .kopf-bild,
  .loesung.gedreht .loesung-bild { order: 2; }
  .loesung-bild { max-width: 460px; }

  /* Aufmacher: Nebeneinander wird zu Übereinander. Das Foto steht oben in
     fester Höhe, der Text darunter — sonst läge die Überschrift mitten
     im Gesicht. */
  .hero-foto {
    width: 100%; inset-block: 0 auto;
    height: clamp(310px, 78vw, 460px);
  }
  /* Einspaltig steht das Foto frei über dem Text und stößt rechts an nichts
     mehr an — dort gehören die Rundungen wieder hin, sonst stünden eckige
     Ecken neben runden. */
  .motiv.hero-foto {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }
  /* Einspaltig steht das Bild über dem Text — eine Maske nach links wäre
     hier sinnlos und würde nur eine Ecke aufhellen. */
  .hero-bild.motivkopf .hero-foto {
    width: 100%;
    -webkit-mask-image: none; mask-image: none;
  }
  .motiv.hero-foto img { object-position: 50% 26%; }
  /* Schmales Fenster: Das eingepasste Schaubild steht mittig über dem Text */
  .motiv.hero-foto.zeigt-rechts img { object-position: 50% 50%; }
  /* Der Verlauf setzt erst unterhalb des Gesichts an und schließt zum
     Text hin geschlossen ab */
  .hero-foto::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 8%, transparent) 0%,
      color-mix(in srgb, var(--bg) 14%, transparent) 58%,
      color-mix(in srgb, var(--bg) 62%, transparent) 84%,
      var(--bg) 100%);
  }
  .hero-medium::after { background: none; }
  .hero-bild {
    padding-block: clamp(292px, 74vw, 438px) clamp(2.5rem, 6vw, 4rem);
  }
  .hero-bild h1 { text-shadow: none; }
  .hero-bild .lead { max-width: none; }

  .abschluss-box { flex-direction: column; align-items: flex-start; }

  /* Zwei Formularfelder nebeneinander werden zu schmal zum Lesen */
  .feld-paar { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  /* Logo, die Schaltflächen und der Firmenname müssen in eine Zeile.
     Der Name weicht dafür zurück, statt die Leiste umbrechen zu lassen. */
  .top .wrap { flex-wrap: nowrap; gap: .5rem; }
  /* Die Fernwartung lädt ein Windows-Programm herunter und hilft am
     Telefon in der Hand niemandem. Damit bleibt die Reihe hier leer —
     genau der Platz, den Name und Menüknopf auf schmalen Geräten brauchen. */
  .kopf-fw { display: none; }
  .brand { min-width: 0; gap: .5rem; }
  .brand-text { min-width: 0; }
  .brand-text b {
    font-size: .84rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
  }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions { flex-direction: column; }
  .brand-text > span { display: none; }
  .haken.zweispaltig { grid-template-columns: 1fr; }
  .achtung-gross { flex-direction: column; gap: 1rem; }
  .kachel { padding: 1.2rem 1.25rem; }
  .bereich { padding: 1.3rem 1.25rem; }
}

@media (max-width: 430px) {
  .brand img { width: 38px; height: 38px; }
  /* Gerade so klein, dass der volle Firmenname neben den
     Schaltflächen noch ungekürzt hineinpasst */
  .brand-text b { font-size: .74rem; letter-spacing: 0; }
  /* Seit WhatsApp dazugekommen ist, stehen hier drei Schaltflächen —
     jede gibt ein paar Pixel ab, damit der Name ungekürzt bleibt. */
  .icon-btn, .kopf-btn { width: 38px; height: 38px; }
  .top .wrap { gap: .42rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover { transform: none; }
  /* Wer Bewegung abbestellt hat, bekommt einen Kopf, der immer stehen bleibt */
  .top.versteckt { transform: none; }
}

@media print {
  .top, .hero-actions, .icon-btn, footer { display: none; }
  body { background: #fff; color: #000; }
}