/* PIC GmbH, Vorschau Richtung C „Typenschild“. Werte aus DESIGN.md, gilt für alle Seiten. */
:root {
  --blau: #394D69; --blau-tief: #263449; --blau-hell: #EAEEF3;
  --sand: #A08F78; --sand-hell: #F4F0EA; --sand-dunkel: #76674F; --rot: #C21D1B; --rot-tief: #A31816;
  --weiss: #FFFFFF; --tinte: #1E2632; --leise: #525C6B; --sand-auf-blau: #CFC4B4;
  --linie: #DDD5CA; --feldlinie: #8A8070;
  --slab: 'Rokkitt', Rockwell, 'Roboto Slab', Georgia, serif;
  --text: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --rand: clamp(20px, 4vw, 32px);
  --abstand: clamp(72px, 9vw, 128px);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--weiss); color: var(--tinte); font-family: var(--text);
  font-size: clamp(1.0625rem, 1.03rem + .15vw, 1.125rem); line-height: 1.6;
}
::selection { background: var(--blau); color: var(--weiss); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blau); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
[id] { scroll-margin-top: 96px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }
.wrap--breit { max-width: 1440px; }
h1, h2, h3 { font-family: var(--slab); font-weight: 600; margin: 0; text-wrap: balance; color: inherit; }
h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -.01em; max-width: 22ch; }
h3 { font-size: clamp(1.5rem, 1.35rem + .5vw, 1.75rem); line-height: 1.2; }
p { margin: 0; }
.einleitung { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 1.55; max-width: 60ch; margin: 20px 0 0; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--weiss); padding: 12px 16px; border-radius: 6px; }
.sprung:focus { top: 8px; }

/* Überzeile im Stil von „SYSTEME“ im Logo (Richtung C: mindestens 17px) */
.label--lang { text-transform: none !important; letter-spacing: .02em !important; }
.label { display: block; font: 600 1.0625rem/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--sand-dunkel); margin: 0 0 14px; }

/* Ziffern in Rokkitt: Atkinson hat nur eine durchgestrichene Null (siehe DESIGN.md) */
.ziffern { font-family: var(--slab); font-weight: 400; font-size: 1.08em; letter-spacing: .01em; }

/* Textlink mit Pixel-Pfeil, der bei Hover 3px nach rechts rastet */
/* 15px = 1,5-fach der 10er-Zeichnung, also 3px je Block (nur ganzzahlige Blöcke, sonst wird der Pfeil unscharf) */
.pfeil { width: 15px; height: 15px; fill: currentColor; flex: none; transition: transform 160ms steps(3, end); }
.textlink { margin: 28px 0 0; }
.textlink a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.textlink a:hover .pfeil, .verwandt a:hover .pfeil, .karte-db:hover .pfeil { transform: translateX(3px); }

/* Links im Fließtext: Klickfläche mindestens 44px hoch, ohne die Zeile zu verschieben */
main p:not(.verwandt-zeile):not(.textlink):not(.kontakt-mail) a:not([class]), .einstieg-klein a, .felder dd a, .liste a, .fuss-aufruf-text p a { display: inline-block; padding-block: 11px; margin-block: -11px; }

/* Hinweis auf externe Seiten: kleiner Pixel-Pfeil nach oben rechts */
.extern-zeichen {
  display: inline-block; width: 10px; height: 10px; margin-left: 7px; flex: none; background: currentColor; vertical-align: .05em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M4 0h6v6H8V2H4zM6 2h2v2H6zM4 4h2v2H4zM2 6h2v2H2zM0 8h2v2H0z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M4 0h6v6H8V2H4zM6 2h2v2H6zM4 4h2v2H4zM2 6h2v2H2zM0 8h2v2H0z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Aufzählung mit quadratischen Punkten, getrennt durch Haarlinien */
.liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.liste li { position: relative; padding: 14px 0 14px 24px; border-bottom: 1px solid var(--linie); }
.liste li::before { content: ""; position: absolute; left: 0; top: calc(14px + .62em); width: 8px; height: 8px; background: var(--sand-dunkel); }
.liste strong { font-weight: 600; }
.zeile-inhalt p + .liste, .zeile-inhalt .liste + p { margin-top: 24px; }
.zeile-inhalt p + p { margin-top: 16px; }

/* Servicezeile für Bestandskunden */
.servicezeile { background: var(--blau-tief); color: var(--weiss); font-size: 1.0625rem; }
.servicezeile-innen { display: flex; align-items: center; justify-content: flex-end; gap: 4px 24px; min-height: 44px; }
.servicezeile-text { margin-right: auto; color: var(--sand-auf-blau); }
.servicezeile a { white-space: nowrap; color: var(--weiss); display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.servicezeile a:hover { text-decoration: underline; }
.servicezeile :focus-visible { outline-color: var(--weiss); }

/* Kopfleiste */
.kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.kopf-innen { display: flex; align-items: center; min-height: 76px; }
.kopf-logo { display: inline-flex; align-items: center; min-height: 44px; }
.kopf-logo img { height: 44px; width: auto; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font: 600 1.0625rem/1.2 var(--text); min-height: 48px; padding: 14px 24px; border-radius: 6px;
  border: 0; background: var(--blau); color: var(--weiss); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, transform .16s var(--ease-out);
}
.knopf:hover { background: var(--blau-tief); text-decoration: none; }
.knopf:active { transform: scale(.97); }
.knopf--hell { background: var(--weiss); color: var(--blau); }
.knopf--hell:hover { background: var(--blau-hell); }
.knopf--rand-hell { background: transparent; color: var(--weiss); box-shadow: inset 0 0 0 1.5px var(--weiss); }
.knopf--rand-hell:hover { background: var(--blau-tief); }
.knopf--rand { background: transparent; color: var(--blau); box-shadow: inset 0 0 0 1.5px var(--blau); }
.knopf--rand:hover { background: var(--blau-hell); }
.knopf--gross { min-height: 56px; padding: 16px 32px; font-size: 1.125rem; }
.knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.einstieg-klein + .knoepfe { margin-top: 16px; }
/* Knopf-Regel (DESIGN.md, Buttons): Ticketsystem und Fernwartung rot mit weißer Schrift (6,0 : 1, Hover 7,8 : 1),
   „Anfrage senden“ weiß mit dunkelblauer Schrift. Die Klassen setzt build.mjs anhand des Linkziels. */
.knopf--hilfe { background: var(--rot); color: var(--weiss); }
.knopf--hilfe:hover { background: var(--rot-tief); }
.knopf--anfrage { background: var(--weiss); color: var(--blau); box-shadow: inset 0 0 0 1.5px var(--blau); }
.knopf--anfrage:hover { background: var(--blau-hell); }
.einstieg--blau .knopf--anfrage, .fuss .knopf--anfrage { box-shadow: none; }
/* Gruppen mit Ticketsystem oder Fernwartung: alle Knöpfe gleich groß, so breit wie der längste */
.knoepfe--gleich { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: fit-content; max-width: 100%; }
.knoepfe--gleich .knopf { padding-inline: 20px; }
/* „Anfrage senden“ in der Kopfleiste: weiß mit dunkelblauer Schrift, Rand gegen den weißen Kopf */
.kopf-knopf { background: var(--weiss); color: var(--blau); box-shadow: inset 0 0 0 1.5px var(--blau); }
.kopf-knopf:hover { background: var(--blau-hell); }
/* Nur auf der Startseite tritt „Anfrage senden“ im Kopf zurück, solange derselbe Knopf im Einstieg oder im Fuß
   zu sehen ist (Klasse setzt site.js; ohne JavaScript bleibt der Kopf-Knopf immer sichtbar) */
.kopf .kopf-knopf { transition: opacity 160ms cubic-bezier(.23, 1, .32, 1), visibility 0s; }
.anfrage-im-bild .kopf .kopf-knopf:not(:focus) { opacity: 0; visibility: hidden; transition: opacity 160ms cubic-bezier(.23, 1, .32, 1), visibility 0s 160ms; }
@media (prefers-reduced-motion: reduce) { .kopf .kopf-knopf, .anfrage-im-bild .kopf .kopf-knopf:not(:focus) { transition: none; } }
/* Pixel-Ecke auf blauem Grund in Weiß */
.einstieg--blau .knopf::after, .fuss .knopf::after, .menue .knopf::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23FFFFFF' d='M8 0h4v4H8zM8 8h4v4H8zM0 8h4v4H0z'/%3E%3C/svg%3E");
}

/* Brotkrumen */
.brotkrumen { margin: 0 0 32px; font-size: 1.0625rem; }
.brotkrumen ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.brotkrumen li { display: inline-flex; align-items: center; }
.brotkrumen li + li::before { content: ""; width: 6px; height: 6px; margin: 0 12px; background: currentColor; opacity: .45; }
.brotkrumen a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.brotkrumen [aria-current] { color: var(--leise); }
.einstieg--blau .brotkrumen, .einstieg--blau .brotkrumen [aria-current] { color: var(--sand-auf-blau); }
.einstieg--blau .brotkrumen a { color: var(--weiss); }

/* Einstieg */
.einstieg { padding: clamp(24px, 3vw, 40px) 0 clamp(64px, 8vw, 112px); }
.einstieg--seite, .einstieg--fehler, .einstieg--recht { background: var(--sand-hell); }
.einstieg--recht { padding-bottom: clamp(40px, 5vw, 64px); }
.abschnitt--recht { padding-top: clamp(48px, 6vw, 80px); }
.einstieg--fehler .einstieg-raster { align-items: center; }
.einstieg--blau { background: var(--blau); color: var(--weiss); }
.einstieg--blau :focus-visible { outline-color: var(--weiss); }
.einstieg--blau p a:not(.knopf), .einstieg--blau .einstieg-klein a { color: var(--weiss); }
.einstieg--blau .label { color: var(--sand-auf-blau); }
.einstieg-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px clamp(40px, 6vw, 96px); align-items: end; }
.einstieg-raster--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.einstieg h1 { font-size: clamp(2.5rem, 1.7rem + 2.6vw, 4rem); line-height: 1.04; letter-spacing: -.015em; max-width: 18ch; }
.einstieg-sub { font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 1.55; max-width: 56ch; margin-top: 24px !important; }
.einstieg-text > p + p { margin-top: 14px; max-width: 56ch; }
.einstieg-klein { margin-top: 20px !important; font-size: 1.0625rem; }
.einstieg--blau .einstieg-klein { color: var(--sand-auf-blau); }
.einstieg-bild { background: var(--weiss); border-radius: 12px; contain: layout paint; justify-self: start; }
.einstieg--blau .einstieg-bild { background: var(--sand-hell); }
.einstieg-bild--gross { border-radius: 12px; }
.preisfeld { margin-top: 28px !important; }
.preis { display: inline-block; font-family: var(--slab); font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); line-height: 1.1; color: var(--blau); border-top: 2px solid var(--tinte); border-bottom: 1px solid var(--linie); padding: 12px 0; }
.preis .ziffern { font-weight: 600; font-size: 1em; }

/* Startseite: blaue Fläche, darunter das Sand-Drittel mit Icon-Reihe und Nachweisen */
.start-einstieg { padding: clamp(40px, 4vw, 56px) 0; }
.start-einstieg h1 { font-size: clamp(2.75rem, 1.6rem + 3vw, 4rem); line-height: 1.02; max-width: 18ch; }
.nowrap { white-space: nowrap; }
.start-einstieg .knoepfe { margin-top: 36px; }
/* Einstieg der Startseite: Text links, rechts das Icon-Feld (3 × 2, mobil 2 × 3) auf Sand hell mit Haarlinien.
   Pixel-Grafiken stehen immer auf Weiß oder Sand hell (DESIGN.md). Die ganze Zelle ist der Link. */
.start-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 56px; align-items: center; }
.icon-feld { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 164px); gap: 1px; background: var(--linie); border-radius: 12px; overflow: hidden; }
.icon-feld li { background: var(--sand-hell); }
.icon-zelle { --feld: 2px; /* kleiner Platz: 2px pro Feld, 64er = 128px */ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 16px 12px 18px; color: var(--tinte); text-decoration: none; contain: layout paint; }
/* Hover-Fläche in Weiß hinter dem Inhalt (z-index -1 im eigenen Stapelkontext durch contain), sonst verdeckt sie den Fokusrahmen */
.icon-zelle::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--weiss); opacity: 0; transition: opacity 160ms var(--ease-out); pointer-events: none; }
.icon-zelle span { font-family: var(--slab); font-weight: 600; font-size: 1.25rem; line-height: 1.1; text-decoration: underline 2px transparent; text-underline-offset: .15em; }
@media (hover: hover) and (pointer: fine) {
  .icon-zelle:hover::before { opacity: 1; }
  .icon-zelle:hover span { text-decoration-color: currentColor; }
}
/* Fokus nach innen in Dunkelblau (7,6 : 1 auf Sand hell), weil die Zellen ohne Abstand aneinanderstoßen */
.einstieg--blau .icon-zelle:focus-visible { outline: 3px solid var(--blau); outline-offset: -6px; }
.icon-zelle:focus-visible::before { opacity: 1; }
.icon-zelle:focus-visible span { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .icon-zelle::before { transition: none; } }
/* Darunter nur ein schmaler Sandstreifen mit der Partnerzeile */
.sandstreifen { background: var(--sand); }
.nachweise { list-style: none; margin: 0; padding: 16px 0; display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 10px 32px; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--tinte); }
.nachweise li { display: flex; align-items: baseline; gap: 12px; }
.nachweise li::before { content: ""; width: 8px; height: 8px; background: var(--tinte); flex: none; transform: translateY(-.1em); }

/* Abschnitte */
.abschnitt { padding: var(--abstand) 0; }
.abschnitt--sand { background: var(--sand-hell); }
.abschnitt--eng { padding: clamp(56px, 6vw, 88px) 0; }
.abschnitt + .abschnitt:not(.abschnitt--sand):not(.abschnitt--abfolge) { border-top: 1px solid var(--linie); }
.abschnitt--sand + .abschnitt, .abschnitt + .abschnitt--sand { border-top: 0 !important; }
.kopfzeile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; margin-bottom: 48px; }
.kopfzeile .einleitung { align-self: end; }
.kopfzeile .einleitung { margin: 0; }

/* Überschrift links, Inhalt rechts */
.zeile { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(40px, 6vw, 96px); align-items: start; }
.zeile h2 { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); }
.zeile-inhalt { max-width: 66ch; }
/* aufeinanderfolgende Text-Abschnitte rücken zusammen, getrennt nur durch eine Haarlinie */
.abschnitt--zeile + .abschnitt--zeile { padding-top: 0; border-top: 0 !important; }
.abschnitt--zeile + .abschnitt--zeile .zeile { border-top: 1px solid var(--linie); padding-top: clamp(48px, 6vw, 80px); }
.abschnitt--zeile:has(+ .abschnitt--zeile) { padding-bottom: clamp(48px, 6vw, 80px); }
h2 + p, h2 + .liste, h2 + .zeile-inhalt { margin-top: 20px; }
.zwei > div > h2 + p { margin-top: 20px; }
.zwei { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); align-items: start; }
.zwei--gleich { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zwei--bild-rechts { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

/* Datenblatt (Feldliste) */
.datenblatt { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: clamp(24px, 3vw, 40px); }
.abschnitt--sand .datenblatt { border-color: transparent; }
.datenblatt-titel { font-size: 1.75rem; margin-bottom: 20px; }
.felder { margin: 0; border-top: 2px solid var(--tinte); }
.felder div { display: grid; grid-template-columns: 10rem 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.felder dt { font-size: 1.0625rem; font-weight: 600; color: var(--sand-dunkel); hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.felder dd { margin: 0; font-size: 1.0625rem; line-height: 1.5; }

/* Datenblatt-Karten, ganze Karte klickbar */
.karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.karte-db {
  position: relative; display: flex; flex-direction: column; gap: 24px; background: var(--weiss); color: var(--tinte); text-decoration: none;
  border: 1px solid var(--linie); border-radius: 12px; padding: clamp(24px, 3vw, 40px);
}
.karte-db::before { content: ""; position: absolute; inset: -1px; border: 1px solid var(--blau); border-radius: inherit; opacity: 0; transition: opacity 160ms ease; pointer-events: none; }
.karte-db:hover::before, .karte-db:focus-visible::before { opacity: 1; }
.karte-kopf { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 24px; align-items: start; }
.karte-db--ohne-icon .karte-kopf { grid-template-columns: minmax(0, 1fr); }
.karte-icon { --feld: 2px; background: var(--sand-hell); border-radius: 8px; contain: layout paint; }
.karte-titel { font-size: clamp(1.5rem, 1.35rem + .5vw, 1.75rem); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.karte-db:hover .karte-titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.karte-text { display: block; margin-top: 8px; }
.karte-weiter { margin-top: auto; }
.karte-weiter { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--blau); }
.neu { display: inline-flex; align-items: center; gap: 8px; font: 600 1.0625rem/1 var(--text); color: var(--tinte); text-decoration: none; }
.neu::before { content: ""; width: 8px; height: 8px; background: var(--rot); }

.abstand-oben { margin-top: 40px; }
.folge-titel { margin-top: clamp(64px, 8vw, 112px); }
.kacheln--rahmen .kachel--leistung { border: 1px solid var(--linie); background: var(--weiss); }
.kacheln--rahmen .kachel--leistung:not(:has(.kachel-icon)) { padding: 24px 28px; }

/* Unterseiten eines Bereichs auf dem Sand-Drittel */
.kachelband { background: var(--sand); padding: 32px 0; }
.kachelband--sand-hell { background: var(--sand-hell); padding: var(--abstand) 0; }
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kacheln--3, .kacheln--4 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.kachel--leistung { display: flex; align-items: flex-start; gap: 24px; height: 100%; padding: 16px 28px 16px 16px; background: var(--weiss); border-radius: 12px; color: var(--tinte); text-decoration: none; contain: layout paint; }
.kachel-icon { --feld: 2px; flex: none; background: var(--sand-hell); border-radius: 8px; }
.kachel-text { display: grid; gap: 4px; }
.kachel-titel { font-family: var(--slab); font-weight: 600; font-size: 1.75rem; line-height: 1.15; }
.kachel--leistung:hover .kachel-titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.kacheln--3 .kachel--leistung, .kacheln--4 .kachel--leistung { min-height: 96px; padding: 16px 64px 16px 16px; }
.kacheln--3 .kachel--leistung:not(:has(.kachel-icon)) { padding-left: 28px; }

/* Ablauf (Signatur): verbundene Stationen mit quadratischen Marken */
.ablauf { list-style: none; margin: 56px 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 40px 32px; }
.ablauf--4 { --n: 4; } .ablauf--5 { --n: 5; } .ablauf--6 { --n: 6; }
.ablauf::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--feldlinie); }
.ablauf li { position: relative; padding-top: 36px; }
.ablauf li::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; background: var(--blau); }
.ablauf li:first-child::before { background: var(--rot); }
.ablauf-nr { display: block; font-family: var(--slab); font-weight: 600; font-size: 2.5rem; line-height: 1; color: var(--blau); margin-bottom: 10px; }
.ablauf-nr .ziffern { font-size: 1em; font-weight: 600; }
.ablauf h3 { font-size: 1.5rem; margin-bottom: 8px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.ablauf p { font-size: 1.0625rem; line-height: 1.5; max-width: 32ch; }
/* Zeitstrahl: gerade Linie, am Ende ein Pfeil (Desktop nach rechts, Handy nach unten). Kein Knick, kein Rückweg.
   Pfeilspitze aus 1px-Treppen, 13 Pixel hoch, Spitze genau auf der 1px-Linie. */
.ablauf::after { content: ""; position: absolute; right: 0; top: -1px; width: 8px; height: 13px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' shape-rendering='crispEdges'%3E%3Cpath fill='%238A8070' d='M0 0h2v1H0zM1 1h2v1H1zM2 2h2v1H2zM3 3h2v1H3zM4 4h2v1H4zM5 5h2v1H5zM6 6h2v1H6zM5 7h2v1H5zM4 8h2v1H4zM3 9h2v1H3zM2 10h2v1H2zM1 11h2v1H1zM0 12h2v1H0z'/%3E%3C/svg%3E") no-repeat; }
/* Ablauf mit Schritt-Motiven: Motiv (128px, 2px pro Feld) über der Linie und der Schrittnummer */
.ablauf--bilder { --bild: 128px; }
.ablauf--bilder li { padding-top: 0; }
.ablauf-bild { --feld: 2px; display: block; width: max-content; margin-bottom: 52px; border-radius: 12px; }
.ablauf-bild svg.pic-px { background: var(--weiss); border-radius: 12px; }
.abschnitt--sand .ablauf-bild svg.pic-px { background: var(--weiss); }
.abschnitt:not(.abschnitt--sand) .ablauf-bild svg.pic-px { background: var(--sand-hell); }
.ablauf--bilder li::before { top: calc(var(--bild) + 20px); }
.ablauf--bilder::before { top: calc(var(--bild) + 25px); }
.ablauf--bilder::after { top: calc(var(--bild) + 19px); }

/* Möglichkeiten-Liste */
.moeglich { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--feldlinie); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px 48px; }
.moeglich-titel { font: 600 1.0625rem/1.3 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--sand-dunkel); }
.moeglich ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.moeglich li { display: flex; align-items: baseline; gap: 12px; }
.moeglich li::before { content: ""; width: 8px; height: 8px; background: var(--sand-dunkel); flex: none; transform: translateY(-.1em); }
.zeile-inhalt .moeglich, .zwei .moeglich { grid-template-columns: 1fr; margin-top: 40px; }
.zeile-inhalt .moeglich ul, .zwei .moeglich ul { grid-template-columns: 1fr; }

/* Fragen und Antworten */
.fragen { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none; font-family: var(--slab); font-weight: 600; font-size: 1.5rem; line-height: 1.3; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.frage-pfeil { width: 25px; height: 15px; fill: var(--blau); flex: none; }
.frage[open] .frage-pfeil { transform: rotate(180deg); }
.antwort { padding: 0 48px 24px 0; max-width: 66ch; }
.antwort p + p { margin-top: 12px; }
.fragen-titel { font-size: 1.75rem; margin-bottom: 20px; }

/* Abschluss-Band vor dem Fuß */
.aufruf { background: var(--blau-hell); padding: clamp(48px, 6vw, 80px) 0; }
.aufruf-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 64px; }
.aufruf-text { font-family: var(--slab); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); line-height: 1.2; max-width: 30ch; text-wrap: balance; }
.aufruf-wege { display: grid; gap: 12px; justify-items: start; }
.aufruf .knoepfe { margin: 0; }
.aufruf-tel { font-size: 1.125rem; }
.aufruf-tel a { display: inline-flex; align-items: center; min-height: 44px; }

/* Schnellzugang: Ticketsystem und Fernwartung */
.schnellzugang { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 32px; }
.schnellzugang-zusatz { flex-basis: 100%; }
.schnellzugang-zusatz a { display: inline-flex; align-items: center; min-height: 44px; }

/* Verwandte Seiten */
.verwandt { border-top: 1px solid var(--linie); padding: 28px 0; }
.verwandt-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.verwandt-zeile + .verwandt-zeile { margin-top: 8px; }
.verwandt-titel { font-weight: 600; color: var(--sand-dunkel); margin-right: 4px; }
.verwandt a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }

/* Fotoband: ganze Breite, ohne Bildunterschrift */
.fotoband { margin: 0; }
.fotoband img { width: 100%; height: clamp(200px, 26vw, 420px); object-fit: cover; }
.fotoband figcaption { max-width: 1200px; margin: 0 auto; padding: 8px var(--rand) 0; text-align: right; font-size: 1.0625rem; color: var(--leise); }

/* Team */
.team-kompakt { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.team-kompakt li { display: grid; gap: 2px; align-content: start; padding: 18px 0 20px; border-top: 1px solid var(--feldlinie); }
.team-name { font-family: var(--slab); font-weight: 600; font-size: 1.625rem; line-height: 1.2; }
.team-rolle, .person-rolle { font: 600 1.0625rem/1.35 var(--text); color: var(--sand-dunkel); }
.team-rolle .ziffern, .person-rolle .ziffern { font-size: 1em; font-weight: 600; }
.team-bereich { color: var(--leise); }
/* Geschäftsführung und Leitung breit nebeneinander, darunter das Team im Raster 3 × 2: jede Reihe gleich hohe Karten */
.team-voll { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.team-voll > li { grid-column: span 4; }
.team-voll > li.person--breit { grid-column: span 6; }
.person { background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; padding: 28px 28px 24px; display: flex; flex-direction: column; }
.abschnitt--sand .person { border-color: transparent; }
.person-name { font-size: 1.75rem; }
.person-rolle { margin: 6px 0 20px; }
.person .felder div { grid-template-columns: 1fr; gap: 0; }
.person-mail { margin-top: 16px; }
.person-mail a { display: inline-flex; align-items: center; min-height: 44px; }
.hinweis-klein { margin-top: 24px; font-size: 1.0625rem; color: var(--leise); }

/* Pixel-Bühne neben Text */
.buehne { background: var(--sand-hell); border-radius: 12px; contain: layout paint; justify-self: start; }
.abschnitt--sand .buehne { background: var(--weiss); }
.buehne--hover { cursor: default; }
/* Grafik-Kästen: so groß wie die Grafik, auch in WebKit (justify-self wirkt dort nur im Raster, nicht im Block,
   z. B. die Bühne im Support-Abschnitt der Startseite). Falls ein Kasten doch größer wird, sitzt die Grafik mittig.
   Den Inhalt der Grafik mittelt pixel/neu/werkzeug.mjs. */
.einstieg-bild, .buehne { width: max-content; max-width: 100%; }
.einstieg-bild, .buehne, .karte-icon, .kachel-icon, .erfolg-bild { display: grid; place-items: center; }

/* Zitat */
.zitat { margin: 0; max-width: 980px; }
.zitat p { font-family: var(--slab); font-weight: 500; font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); line-height: 1.3; text-wrap: balance; }
.zitat blockquote { margin: 0; position: relative; padding-top: 28px; }
.zitat blockquote::before { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: var(--rot); }
.zitat figcaption { margin-top: 20px; font-weight: 600; }
.zitat figcaption span { display: block; font-weight: 400; color: var(--leise); }

/* Drei Merkmale nebeneinander, typografisch statt Karten */
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; margin-top: 40px; }
.drei > div, .dach { border-top: 2px solid var(--tinte); padding-top: 20px; }
.drei h3, .dach h3 { margin-bottom: 10px; }
.zwei--karte { grid-template-columns: auto minmax(0, 1fr); align-items: center; }

/* Ausbildung (schmales Band) */
.ausbildung-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 48px; align-items: center; }
.ausbildung-band h2 { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); }
.ausbildung-band p { margin-top: 12px; max-width: 56ch; }
.ausbildung-band .textlink { margin-top: 12px; }

/* Hinweise, die inhalte/ ausdrücklich vorsieht (Entwurf) */
.entwurf { display: flex; gap: 12px; align-items: baseline; border: 1px dashed var(--feldlinie); border-radius: 6px; padding: 12px 16px; font-size: 1.0625rem; color: var(--tinte); background: var(--weiss); }
.entwurf::before { content: "Entwurf"; font-weight: 600; color: var(--sand-dunkel); letter-spacing: .06em; text-transform: uppercase; flex: none; }

/* Kontakt */
.kunden-hinweis { background: var(--blau-hell); border-radius: 12px; padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; margin-bottom: 64px; }
.kunden-hinweis p { max-width: 60ch; }
.kunden-hinweis .knoepfe { margin: 0; }
.kontakt-mail { font-family: var(--slab); font-weight: 600; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.2; margin: 0 0 28px; }
.kontakt-mail a { display: inline-flex; align-items: center; min-height: 48px; }
.kontakt-mail small { display: block; font: 400 1.0625rem/1.5 var(--text); color: var(--leise); }
.felder dd a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.kontakt-formular { background: var(--sand-hell); border-radius: 12px; padding: clamp(24px, 4vw, 40px); }
.kontakt-formular h2 { font-size: 1.75rem; margin-bottom: 24px; }
form { display: grid; gap: 20px; }
form[hidden] { display: none; }
.feld { display: grid; gap: 8px; align-content: start; }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
label { font-weight: 600; font-size: 1.0625rem; }
.optional { font-weight: 400; color: var(--leise); }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font: inherit; color: var(--tinte); background: var(--weiss);
  border: 1px solid var(--feldlinie); border-radius: 6px; min-height: 48px; padding: 11px 14px;
}
select {
  appearance: none; padding-right: 48px; cursor: pointer;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23394D69' d='M0 0h4v4H0zM16 0h4v4h-4zM4 4h4v4H4zM12 4h4v4h-4zM8 8h4v4H8z'/%3E%3C/svg%3E") no-repeat right 16px center / 15px 9px;
}
textarea { resize: vertical; min-height: 140px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--blau); outline-offset: 0; border-color: var(--blau); }
[aria-invalid="true"] { border-color: var(--tinte) !important; box-shadow: inset 0 0 0 1px var(--tinte); }
.fehler { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 1.0625rem; color: var(--tinte); }
.fehler::before { content: ""; width: 8px; height: 8px; background: var(--rot); flex: none; transform: translateY(-.1em); }
.fehler[hidden] { display: none; }
/* Meldung des Servers über dem Formular (nur im WordPress-Theme, siehe inc/formular.php) */
.formular-meldung { border: 1px solid var(--tinte); border-radius: 6px; padding: 12px 16px; margin-bottom: 24px; }
.feld--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 12px; }
.feld--check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--blau); }
.feld--check label { font-weight: 400; line-height: 1.5; }
.feld--check label a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.feld--check .fehler { grid-column: 1 / -1; }
.feld--honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
form .knopf { justify-self: start; }
.erfolg { display: flex; gap: 24px; align-items: center; }
.erfolg[hidden] { display: none; }
.erfolg h2 { font-size: 1.75rem; margin-bottom: 8px; }
.erfolg-bild { flex: none; background: var(--weiss); border-radius: 12px; }

/* Häufige Fragen: Sprungmarken */
.sprungmarken { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 32px; padding: 0; list-style: none; }
.themen { position: sticky; top: 100px; }
.themen-titel { font-size: 1.75rem; }
.sprungmarken a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 6px; background: var(--weiss); box-shadow: inset 0 0 0 1px var(--feldlinie); font-weight: 600; text-decoration: none; color: var(--blau); }
.sprungmarken a:hover { background: var(--blau-hell); }
.fragegruppe + .fragegruppe { margin-top: 64px; }
.fragegruppe h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); margin-bottom: 20px; }

/* Rechtliches: schmale Textspalte */
.textspalte { max-width: 760px; }
.textspalte h2 { font-size: 1.75rem; margin: 40px 0 10px; }
.textspalte h2:first-child { margin-top: 0; }
.textspalte p + p, .textspalte ul { margin-top: 12px; }
.textspalte .liste { margin-top: 12px; }
.gliederung { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: g; border-top: 1px solid var(--linie); }
.gliederung li { counter-increment: g; display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linie); font-family: var(--slab); font-weight: 600; font-size: 1.375rem; }
.gliederung li::before { content: counter(g); min-width: 2ch; color: var(--blau); }
/* Inhaltsverzeichnis mit Sprungmarken (Datenschutz): ganze Zeile klickbar, zweispaltig auf breiten Schirmen */
.gliederung--links { columns: 2; column-gap: 40px; }
.gliederung--links li { padding: 0; font-size: 1.1875rem; align-items: center; break-inside: avoid; }
.gliederung--links a { flex: 1; display: flex; align-items: center; min-height: 48px; color: var(--tinte); text-decoration: none; }
.gliederung--links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.textspalte h2[id] { scroll-margin-top: 96px; }

/* Fehlerseite */
.fehler-hilfe { margin-top: 28px !important; }
.fehler-hilfe a { display: inline-flex; align-items: center; min-height: 44px; }

/* Fuß: Typenschild mit großer Kontakt-Aufforderung, ohne Pixel-Grafik */
.fuss { background: var(--blau-tief); color: var(--weiss); padding: clamp(56px, 7vw, 96px) 0 32px; font-size: 1.0625rem; }
.fuss :focus-visible { outline-color: var(--weiss); }
.fuss-aufruf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 32px 48px; margin-bottom: 48px; }
.fuss-frage { color: var(--weiss); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.05; max-width: 14ch; }
.fuss-aufruf-text p a { color: var(--weiss); }
.fuss-aufruf-text p { color: var(--sand-auf-blau); font-size: 1.125rem; margin: 16px 0 28px; max-width: 40ch; }
.fuss-wege { display: grid; gap: 4px; justify-items: start; }
.fuss-weg { font-family: var(--slab); font-weight: 600; font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.15; color: var(--weiss); text-decoration-thickness: 2px; display: inline-flex; align-items: center; min-height: 48px; overflow-wrap: anywhere; }
.fuss-weg .ziffern { font-size: 1em; font-weight: 600; }
.schild { position: relative; background: var(--weiss); color: var(--tinte); border-radius: 12px; padding: clamp(28px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 5fr); gap: 32px 48px; align-items: start; }
.schild :focus-visible { outline-color: var(--blau); }
/* vier Schrauben, wie auf einem Typenschild */
.schild::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none;
  background:
    linear-gradient(var(--feldlinie), var(--feldlinie)) left top / 6px 6px no-repeat,
    linear-gradient(var(--feldlinie), var(--feldlinie)) right top / 6px 6px no-repeat,
    linear-gradient(var(--feldlinie), var(--feldlinie)) left bottom / 6px 6px no-repeat,
    linear-gradient(var(--feldlinie), var(--feldlinie)) right bottom / 6px 6px no-repeat;
}
.schild-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.schild-kopf img { width: 72px; height: 72px; flex: none; }
.schild-kopf p { margin: 0; display: grid; }
.schild-kopf strong { font-family: var(--slab); font-weight: 600; font-size: 2rem; line-height: 1.1; }
.schild-kopf span { color: var(--leise); }
.schild-felder { margin: 0; border-top: 2px solid var(--tinte); }
.schild-felder div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.schild-felder dt, .schild-seiten-titel { font-weight: 600; color: var(--sand-dunkel); }
.schild-links { row-gap: 0; }
.schild-felder dd { margin: 0; }
.schild-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.schild-links a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
.schild-seiten { border-top: 2px solid var(--tinte); padding-top: 12px; }
.schild-seiten ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 28px; }
.schild-seiten a { display: inline-flex; align-items: center; min-height: 44px; }
.schild-seiten a[aria-current] { font-weight: 600; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 32px; margin-top: 20px; color: var(--sand-auf-blau); }
.fuss-recht { display: flex; flex-wrap: wrap; gap: 0 28px; }
.fuss-recht a { color: var(--weiss); display: inline-flex; align-items: center; min-height: 44px; }

/* Mittlere Breiten */
@media (max-width: 1399px) {
}
@media (max-width: 1100px) {
  .start-raster { grid-template-columns: minmax(0, 1fr); }
  .nachweise { grid-template-columns: repeat(2, max-content); justify-content: start; }
  .ablauf--5, .ablauf--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ablauf--5::before, .ablauf--6::before, .ablauf--5::after, .ablauf--6::after { display: none; }
  .schild { grid-template-columns: 1fr 1fr; }
  .schild-kopf { grid-column: 1 / -1; }
  .team-voll > li, .team-voll > li.person--breit { grid-column: span 6; }
}
@media (max-width: 960px) {
  .einstieg-raster, .zeile, .zwei, .zwei--gleich, .zwei--bild-rechts, .kopfzeile, .karten, .fuss-aufruf { grid-template-columns: minmax(0, 1fr); }
  .einstieg-raster { align-items: start; }
  .kacheln { grid-template-columns: minmax(0, 1fr); }
  .moeglich { grid-template-columns: 1fr; }
  .team-kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drei { grid-template-columns: 1fr; }
  .zwei--karte { grid-template-columns: minmax(0, 1fr); }
  .ablauf--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ablauf--4::before, .ablauf--4::after { display: none; }
}
/* Handy */
@media (max-width: 760px) {
  .servicezeile-text { display: none; }
  .servicezeile-innen { justify-content: space-between; gap: 4px 12px; }
  .servicezeile a { font-size: 1.0625rem; }
  .servicezeile .extern-zeichen { display: none; }
  .servicezeile .servicezeile-mail { display: none; }
  .start-einstieg .knoepfe .knopf { flex: 1 1 100%; }
  .knoepfe--gleich { grid-auto-flow: row; width: auto; }
  .kunden-hinweis .knoepfe--gleich { width: 100%; }
  .einstieg .knoepfe .knopf--gross { flex: 1 1 100%; }
  /* Icon-Feld mobil 2 × 3 unter dem Text: Icons bleiben bei 2px pro Feld (128px), drei passen nicht nebeneinander */
  .icon-feld { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .icon-zelle span { font-size: 1.1875rem; }
  .nachweise { grid-template-columns: 1fr; }
  .karte-kopf { grid-template-columns: 1fr; gap: 16px; }
  .karte-icon { justify-self: start; }
  .felder div, .schild-felder div { grid-template-columns: 1fr; gap: 2px; }
  .kachel--leistung, .kacheln--3 .kachel--leistung, .kacheln--4 .kachel--leistung { padding: 12px 16px 12px 12px; gap: 16px; }
  .kacheln--rahmen .kachel--leistung:not(:has(.kachel-icon)) { padding: 20px; }
  .kachel-titel { font-size: 1.375rem; }
  .ablauf, .ablauf--4, .ablauf--5, .ablauf--6 { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; padding-left: 32px; }
  .ablauf::before { display: block !important; left: 5px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .ablauf::after { display: block !important; left: -1px; right: auto; top: auto; bottom: 6px; width: 13px; height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' shape-rendering='crispEdges'%3E%3Cpath fill='%238A8070' d='M0 0h1v2H0zM1 1h1v2H1zM2 2h1v2H2zM3 3h1v2H3zM4 4h1v2H4zM5 5h1v2H5zM6 6h1v2H6zM7 5h1v2H7zM8 4h1v2H8zM9 3h1v2H9zM10 2h1v2h-1zM11 1h1v2h-1zM12 0h1v2h-1z'/%3E%3C/svg%3E"); }
  .ablauf li { padding-top: 0; }
  .ablauf li::before { left: -32px; top: 6px; }
  .ablauf-nr { font-size: 2rem; margin-bottom: 4px; }
  /* Abläufe mit Motiven: senkrechte Linie links, Motiv über der Nummer */
  .ablauf--bilder::before { top: 6px; }
  .ablauf--bilder::after { top: auto; }
  .ablauf--bilder li::before { top: 6px; }
  .ablauf-bild { margin-bottom: 16px; }
  .moeglich ul { grid-template-columns: 1fr; }
  .gliederung--links { columns: 1; }
  .team-kompakt { grid-template-columns: 1fr; }
  .team-voll > li, .team-voll > li.person--breit { grid-column: 1 / -1; }
  .feld-paar { grid-template-columns: 1fr; }
  .erfolg { flex-direction: column; align-items: flex-start; }
  .schild { grid-template-columns: 1fr; }
  .schild-kopf strong { font-size: 1.625rem; }
  .ausbildung-band { grid-template-columns: 1fr; }
  .antwort { padding-right: 0; }
  .frage summary { font-size: 1.3125rem; }
  .aufruf-innen { display: grid; }
  .kunden-hinweis { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .knopf, .pfeil, .karte-db::before { transition: none; }
  .knopf:active { transform: none; }
}