/* Elektro Dienstleistungen Schulz (29.10.2026). Oben die Startszene nach Labor S09 „Vom Kabel zum Licht“
   (Mechanik der Szene aus tools/single-site/custom/labor/effekte/kabel/gemeinsam/seite.css), darunter helles Papier.
   Grundzustand ist eine gewöhnliche Seite, erst die Klasse „bewegt“ (js/frueh.js) hält die Szene fest. Festgehalten
   wird mit position: sticky und svh, damit am Handy nichts nachzieht, wenn die Adressleiste ein- und ausfährt. */
@font-face { font-family: "Barlow"; src: url(../fonts/barlow-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../fonts/barlow-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(../fonts/barlow-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --nacht: #0e1114; --nacht-2: #181c21; --hell: #f3f1ec; --hell-leise: #b5b1a8;
  --papier: #efe9df; --papier-2: #e5ddd0; --tinte: #17191c; --tinte-leise: #4f4b45; --linie: rgba(23, 25, 28, .14);
  --licht: #f2a444; --licht-dunkel: #1b1308; --kupfer: #8a4c10;
  --rand: clamp(20px, 6vw, 88px);
  --aus: cubic-bezier(.22, .9, .3, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* 10.11.2026: kein seitliches Verrutschen und kein Doppeltipp-Zoom (wie Valentin und Seven, Jonathan 08.11.: „das ist ja basic“).
   clip statt hidden, sonst hält die Startszene (sticky) nicht mehr fest (CL-62). Die Zoom-Sperre selbst: Viewport und js/frueh.js. */
html { background: var(--papier); -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; touch-action: manipulation; overflow-x: clip; }
body { font: 500 17px/1.55 "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tinte); background: var(--papier); overflow-x: clip; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.norm { white-space: nowrap; }
a { color: inherit; }
h1, h2, h3 { font-weight: 700; line-height: 1.06; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); line-height: 1.15; }
p { max-width: 58ch; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--licht); outline-offset: 3px; border-radius: 4px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zum-inhalt { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--licht); color: var(--licht-dunkel); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.zum-inhalt:focus { top: 12px; }

/* ---------------------------------------------------------------- Knöpfe (einer laut je Abschnitt) */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px;
  border: 0; border-radius: 10px; font: 600 1.02rem/1 "Barlow", system-ui, sans-serif; text-decoration: none; cursor: pointer;
  background: var(--tinte); color: var(--hell); transition: transform .16s var(--aus), background-color .2s var(--aus);
}
.knopf:active { transform: scale(.97); }
.knopf.licht { background: var(--licht); color: var(--licht-dunkel); }
@media (hover: hover) { .knopf:hover { background: #2a2d31; } .knopf.licht:hover { background: #ffb85c; } }
.textlink { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; color: var(--kupfer); }

/* ---------------------------------------------------------------- Kopfzeile */
.kopf {
  --deck: 0; position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 68px; padding: 0 var(--rand);
  padding-top: env(safe-area-inset-top); box-sizing: content-box;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--hell);
}
/* Fläche als eigene Ebene, nur ihre Deckkraft ändert sich (kein Milchglas über der 3D-Szene, das kostete im Labor bis 260 ms) */
.kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(14, 17, 20); border-bottom: 1px solid rgba(255, 255, 255, .08); opacity: var(--deck); }
/* Weicher Schatten von oben, damit Name und Menü vor der Leitung lesbar bleiben. Runde 2 (07.11.2026, Jonathan: beim ersten
   Mausrad-Schritt „ist eine Millisekunde einfach nichts und dann kommt die Leiste“): Der Schatten bleibt stehen, solange der
   dunkle Startbereich unter dem Kopf liegt, und geht erst weg, wenn das Papier kommt (js/seite.js setzt --verlauf). Vorher ging er
   mit dem ersten Schritt weg, und das Stück Leitung unter dem Kopf sprang von Helligkeit 128 auf 220. Die deckende Fläche legt
   sich nur noch darüber, so wird es beim Scrollen nie heller. */
.kopf::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 150%; z-index: -2; pointer-events: none; opacity: var(--verlauf, 1);
  background: linear-gradient(180deg, rgba(14, 17, 20, .92) 0%, rgba(14, 17, 20, .7) 45%, rgba(14, 17, 20, 0) 100%); }
body.hinweis .kopf::after { display: none; }
/* Neu geladen: bis js/seite.js die echte Scrollstelle kennt, deckend, sonst liegt der Schatten von oben kurz über dem Papier */
.versetzt .kopf { --deck: 1; --verlauf: 0; }
.marke-name { display: grid; gap: 1px; text-decoration: none; min-width: 0; }
/* Korbinians Logo (Vorschlag 05.11.2026, tools/korbinian-schulz/logo): im dunklen Kopf die helle Fassung, im hellen Fuß die Originalfarben */
.marke-logo { height: 44px; width: auto; }
.leiste { display: none; }
/* Zeichen: eine Strichstärke, runde Enden (Formen nach Lucide, ISC) */
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Menü-Knopf. Runde 2 (Jonathan 07.11.: „Menü und dann schließen. Das halt lame … dass es offensichtlich ist“): ohne Wort.
   Zwei Striche im Kreis, offen ein X. Geht im Menü das Licht an, glüht das X warm mit. Der Name für Vorleser steht in aria-label. */
.menue-knopf {
  flex-shrink: 0; position: relative; width: 46px; height: 46px; margin-right: -6px; display: grid; place-content: center;
  border: 1px solid rgba(243, 241, 236, .24); border-radius: 50%; background: rgba(14, 17, 20, .4); color: var(--hell);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .25s var(--aus), box-shadow .4s var(--aus), transform .14s var(--aus);
}
.menue-knopf:active { transform: scale(.93); }
.striche { position: relative; display: block; width: 20px; height: 12px; }
.striche i { position: absolute; left: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .34s cubic-bezier(.16, 1, .3, 1), width .34s cubic-bezier(.16, 1, .3, 1), background-color .25s var(--aus), box-shadow .3s var(--aus); }
.striche i:nth-child(1) { top: 0; width: 20px; }
.striche i:nth-child(2) { bottom: 0; width: 13px; }
.menue-offen .striche i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menue-offen .striche i:nth-child(2) { width: 20px; transform: translateY(-5px) rotate(-45deg); }
.menue-hell .striche i { background: #ffc06a; box-shadow: 0 0 8px rgba(242, 164, 68, .75); }
.menue-hell .menue-knopf { border-color: rgba(242, 164, 68, .55); box-shadow: 0 0 20px -4px rgba(242, 164, 68, .65); }

/* Menü am Handy (Runde 2): die ganze Fläche. Oben hängt die Leuchte aus der Startszene, mit derselben 3D-Szene gerendert,
   aus und an (tools/korbinian-schulz/leuchte-rendern.mjs). Beim Öffnen pendelt sie aus, dann geht das Licht an und fällt
   auf die Einträge, die oberen etwas heller als die unteren. Die Bilder lädt js/seite.js erst, wenn die Seite Luft hat. */
.menue {
  --lh: clamp(150px, 33svh, 290px);
  position: fixed; z-index: 19; inset: 0; display: grid; grid-template-rows: 1fr auto; gap: 22px;
  padding: calc(var(--lh) + 16px) var(--rand) calc(18px + env(safe-area-inset-bottom));
  background: var(--nacht); color: var(--hell); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .18s var(--aus), visibility 0s .18s;
}
.menue-offen .menue { opacity: 1; visibility: visible; transition: opacity .22s var(--aus), visibility 0s; }
html.menue-offen { overflow: hidden; }
/* Licht der Birne: heller Kern um die Birne, darunter ein weicher Kegel über die Einträge */
.menue::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .15s linear;
  background:
    radial-gradient(circle at 50% calc(var(--lh) * .77), rgba(255, 206, 140, .5) 0, rgba(255, 176, 96, .2) calc(var(--lh) * .16), rgba(255, 166, 86, .07) calc(var(--lh) * .4), rgba(255, 160, 80, 0) calc(var(--lh) * .75)),
    radial-gradient(82% 56% at 50% calc(var(--lh) * .84), rgba(255, 168, 88, .2) 0%, rgba(255, 150, 70, .07) 52%, rgba(255, 140, 60, 0) 78%); }
.menue-hell .menue::before { opacity: 1; transition: opacity .6s var(--aus); }
.menue-leuchte { position: absolute; left: 50%; top: 0; width: calc(var(--lh) * .6667); height: var(--lh); transform-origin: 50% 0; translate: -50% 0; cursor: pointer; }
/* Runde 2: Ein Tipp auf die Lampe stößt sie an, das Licht geht aus und das Menü zu (js/seite.js) */
.menue-offen .menue-leuchte.tipp { animation: anstossen .5s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes anstossen { 0% { transform: none; } 30% { transform: rotate(-2.6deg); } 62% { transform: rotate(1.3deg); } 100% { transform: rotate(-.4deg); } }
.menue-leuchte img { position: absolute; inset: 0; width: 100%; height: 100%; }
.menue-leuchte .an { opacity: 0; transition: opacity .06s linear; }
.menue-hell .menue-leuchte .an { opacity: 1; transition: opacity .09s linear; }
.menue-offen .menue-leuchte { animation: pendeln 1.15s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes pendeln { 0% { transform: translateY(-24px) rotate(3.4deg); } 36% { transform: translateY(0) rotate(-1.8deg); } 62% { transform: rotate(.9deg); } 82% { transform: rotate(-.35deg); } 100% { transform: none; } }
.menue ul { position: relative; list-style: none; display: grid; align-content: start; justify-items: center; gap: 2px; text-align: center; }
.menue li a { display: block; padding: 9px 18px; text-decoration: none; font-weight: 700; font-size: clamp(1.9rem, 8.6vw, 2.5rem); line-height: 1.1;
  letter-spacing: -.015em; color: #3b3f45; transition: color .15s var(--aus); }
.menue-hell .menue li a { transition: color .5s var(--aus); }
.menue-hell .menue li:nth-child(1) a { color: #f6f3ec; transition-delay: .04s; }
.menue-hell .menue li:nth-child(2) a { color: #ece6db; transition-delay: .1s; }
.menue-hell .menue li:nth-child(3) a { color: #e0d8cb; transition-delay: .16s; }
.menue-hell .menue li:nth-child(4) a { color: #d3cabb; transition-delay: .22s; }
.menue-hell .menue li a.gewaehlt { color: #ffc06a; transition: color .08s linear; }
.menue li a[aria-current] { text-decoration: underline; text-decoration-color: var(--licht); text-decoration-thickness: 3px; text-underline-offset: 9px; }
.menue-wege { position: relative; display: grid; gap: 10px; }
.menue-wege .knopf { width: 100%; min-height: 54px; }
.menue-wege .nr { font-weight: 500; opacity: .8; margin-left: 4px; font-variant-numeric: tabular-nums; }
.knopf.hohl { background: transparent; color: var(--hell); box-shadow: inset 0 0 0 1.5px rgba(243, 241, 236, .3); }
@media (hover: hover) { .knopf.hohl:hover { background: rgba(243, 241, 236, .06); } }
.menue-adresse { margin: 4px auto 0; text-align: center; font-size: .9rem; color: var(--hell-leise); }
/* Tablet: Knöpfe nicht über die ganze Breite, sie folgen gleich den Einträgen (am Handy stehen sie unten, wo der Daumen ist) */
@media (min-width: 600px) {
  .menue { grid-template-rows: auto auto; align-content: start; gap: 40px; }
  .menue-wege { width: min(100%, 420px); justify-self: center; }
}

/* ---------------------------------------------------------------- Startszene, Grundzustand ohne Bewegung */
.szene { color: var(--hell); background: linear-gradient(to top, var(--nacht) 0%, rgba(14, 17, 20, 0) 18%), radial-gradient(120% 80% at 60% 30%, #262c34 0%, #161a1f 55%, var(--nacht) 100%); }
.fest { padding: 100px var(--rand) 64px; display: grid; gap: 28px; }
.buehne { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin: 0 auto; }
.buehne img, .buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.buehne img { object-fit: cover; object-position: 50% 100%; }
.buehne canvas, .marken, .weg, .waerme { display: none; }
.texte { display: grid; gap: 40px; }
.lage { display: grid; gap: 14px; justify-items: start; align-content: start; }
.lage p { color: var(--hell-leise); font-size: 1.08rem; max-width: 40ch; }
.lage h2 { font-size: clamp(1.75rem, 3.2vw, 2.7rem); }
.schritte { list-style: none; display: grid; gap: 40px; }
.bewertung { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .95rem; color: var(--hell-leise); text-decoration: none; }
.sterne { color: var(--licht); letter-spacing: 2px; font-size: 1rem; }
.bewertung b { color: var(--hell); font-weight: 600; }
.lage .knopf { margin-top: 6px; }

/* ---------------------------------------------------------------- Festgehaltene Szene */
.bewegt .szene { height: 860svh; background: var(--nacht); }
.bewegt .fest {
  position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 0; display: block;
  background: radial-gradient(85% 70% at 50% 31%, #2a3039 0%, #171b20 52%, var(--nacht) 100%);
}
.bewegt .buehne { position: absolute; inset: 0; width: auto; aspect-ratio: auto; margin: 0; }
/* Standbild genau wie das erste 3D-Bild: 46 mm Ausschnitt füllen am Handy min(46 % Höhe, 90 % Breite), das Standbild
   zeigt sie auf 720 von 900 Pixeln (layoutStandbild fw .8). Blickpunkt am Handy bei 31 % Höhe, am PC bei 65 % Breite.
   Am Handy reicht es 30 % seiner Breite über das Quadrat um den Blickpunkt hinaus, sonst endet die Leitung an seiner Oberkante. */
.bewegt .buehne img { --b: min(57.5svh, 112.5vw); inset: auto; left: 50%; top: calc(31% - var(--b) * .15); width: var(--b); max-width: none; height: auto; aspect-ratio: 1 / 1.3; transform: translate(-50%, -50%); z-index: 1; }
.bewegt .buehne canvas { display: block; opacity: 0; }
.bewegt.bereit .buehne canvas { opacity: 1; }
.bewegt.bereit .buehne img { opacity: 0; transition: opacity .25s linear; }
/* Neu geladen oder zurückgekommen, weiter unten als das Standbild zeigt (js/frueh.js, js/start.js): Bühne und Text bleiben
   leer, bis die Szene an dieser Stelle steht, dann blenden sie ein. Sonst stünde kurz der Anfang da und spränge dann weg. */
.bewegt.versetzt:not(.bereit) .buehne img, .bewegt.versetzt:not(.bereit) .texte, .bewegt.versetzt:not(.bereit) .weg { opacity: 0; }
.bewegt.versetzt.bereit .buehne canvas, .bewegt.versetzt.bereit .texte, .bewegt.versetzt.bereit .weg { transition: opacity .35s var(--aus); }
.bewegt .marken { display: block; position: absolute; inset: 0; pointer-events: none; }
.marke { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.marke::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 0 0 7px rgba(255, 255, 255, .07); }
.marke i { position: absolute; left: 0; top: 0; width: 46px; height: 1px; background: rgba(255, 255, 255, .7); transform-origin: 0 0; transform: rotate(-32deg); }
.marke span { position: absolute; left: 38px; top: -48px; white-space: nowrap; padding: 6px 11px; border-radius: 8px; font-size: .86rem; font-weight: 600; color: #fff;
  background: rgba(20, 24, 29, .88); border: 1px solid rgba(255, 255, 255, .22); }
.marke.links i { transform: rotate(212deg); }
.marke.links span { left: auto; right: 38px; }
.marke.oben i { width: 1px; height: 40px; transform: translateY(-40px); }
.marke.oben span { left: 50%; transform: translateX(-50%); top: -74px; }
/* Schmale Handys: kleinere Schilder mit kurzem Strich, damit Außenleiter rechts Platz hat und nichts übereinanderliegt */
@media (max-width: 600px) {
  .marke span { font-size: .74rem; padding: 4px 8px; left: 26px; top: -36px; }
  .marke i { width: 32px; }
  .marke.links span { right: 26px; }
  .marke.oben i { height: 30px; transform: translateY(-30px); }
  .marke.oben span { top: -58px; }
}
/* --licht hier fest auf 0: ohne das erbt das Feld die Farbe --licht von :root, die Deckkraft wird ungültig und das Feld steht beim Laden voll da */
.bewegt .waerme { --licht: 0; display: block; position: absolute; inset: 0; pointer-events: none; opacity: var(--licht);
  background: radial-gradient(60% 55% at var(--lx, 50%) var(--ly, 62%), rgba(255, 176, 96, .42) 0%, rgba(255, 150, 70, .14) 40%, rgba(255, 140, 60, 0) 75%); }

.bewegt .texte { position: absolute; z-index: 2; left: var(--rand); right: var(--rand); bottom: max(50px, 7svh); height: 40svh; display: block; pointer-events: none; }
/* Schmale Handys (Fehlersuche 07.11.2026: bei 320 × 640 lag das Kabelende über „Strom, wo Sie“, bei 360 × 640 stieß es an).
   Der Text bricht dort in mehr Zeilen und wächst nach oben ins Bild, also etwas kleiner und dichter. Gemessen Abstand
   Kabelende zur Überschrift vorher/nachher: 320 × 568 −64/+28, 320 × 640 −18/+46, 360 × 640 4/45, ab 375 px unverändert. */
@media (max-width: 374px) {
  .lage-0 h1 { font-size: 2.15rem; }
  .lage { gap: 11px; }
  .lage p { font-size: 1rem; }
  .bewertung { font-size: .88rem; }
}
@media (max-width: 374px) and (max-height: 660px) {
  .bewegt .texte { bottom: 40px; }
}
@media (max-width: 374px) and (max-height: 600px) {
  .lage-0 h1 { font-size: 1.85rem; }
  .lage p { font-size: .94rem; line-height: 1.45; }
  .lage { gap: 9px; }
}
.bewegt .schritte { display: block; }
/* 05.11.2026 (Barrierefreiheit): Ausgeblendete Lagen sind nur durchsichtig, nicht „visibility: hidden“, damit Vorleser alle
   Schritte finden. Klicks gehen nur an die Lage, die zu sehen ist (Klasse „an“ setzt js/buehne.js). */
.bewegt .lage { position: absolute; left: 0; right: 0; bottom: 0; align-content: end; opacity: 0; will-change: transform, opacity; }
.bewegt .lage-0 { opacity: 1; }
.bewegt .lage a { pointer-events: none; }
.bewegt .lage.an a, .bewegt:not(.bereit) .lage-0 a { pointer-events: auto; }
/* Fortschritt der Szene. Runde 2 (Jonathan: „so neonleuchtend … mehr so wie das Licht der Lampe“): warmer Faden mit Schein,
   zur Spitze hin heller wie der Glühfaden. buehne.js skaliert ihn nur in der Breite, der Schein nach oben und unten bleibt gleich. */
.bewegt .weg { display: block; position: absolute; z-index: 2; left: var(--rand); right: var(--rand); bottom: 24px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); }
.bewegt .weg i { display: block; height: 100%; border-radius: 3px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #b8691f 0%, #f2a444 45%, #ffcf86 85%, #fff3d8 100%);
  box-shadow: 0 0 5px 1px rgba(255, 196, 120, .85), 0 0 14px 3px rgba(255, 160, 72, .5), 0 0 30px 6px rgba(255, 140, 60, .22); }
/* Am Handy liegt der Text über dem unteren Teil der Bühne, der Grund läuft darunter weich ins Dunkel */
.bewegt .fest::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56svh; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, rgba(14, 17, 20, .95) 0%, rgba(14, 17, 20, .84) 34%, rgba(14, 17, 20, .5) 66%, rgba(14, 17, 20, 0) 100%); }

/* Übergang Nacht zu Papier: in OKLab gerechnet, Mitte warm getönt (wie FeuerQuell), 25 Stufen */
.uebergang { height: clamp(160px, 30svh, 300px); margin-top: -1px;
  background: linear-gradient(180deg, rgb(14 17 20) 0%, rgb(15 18 21) 4.2%, rgb(18 20 23) 8.3%, rgb(22 24 26) 12.5%, rgb(29 29 30) 16.7%, rgb(36 36 35) 20.8%, rgb(46 44 42) 25%, rgb(56 53 49) 29.2%, rgb(68 64 58) 33.3%, rgb(81 75 67) 37.5%, rgb(95 87 77) 41.7%, rgb(109 100 89) 45.8%, rgb(123 114 101) 50%, rgb(138 127 114) 54.2%, rgb(152 141 127) 58.3%, rgb(166 155 141) 62.5%, rgb(179 169 155) 66.7%, rgb(191 182 168) 70.8%, rgb(203 194 181) 75%, rgb(213 205 193) 79.2%, rgb(222 214 203) 83.3%, rgb(229 222 211) 87.5%, rgb(234 228 218) 91.7%, rgb(238 232 222) 95.8%, rgb(239 233 223) 100%); }

/* ---------------------------------------------------------------- Leistungen */
.abschnitt { padding: clamp(56px, 9vw, 120px) var(--rand); }
.leistungen { padding-top: 8px; }
.leistungen-kopf { display: grid; gap: 16px; margin-bottom: clamp(40px, 6vw, 80px); max-width: 980px; }
.leistungen-kopf p { font-size: 1.15rem; color: var(--tinte-leise); }
.leistung { display: grid; gap: 22px; padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--linie); }
.leistung:last-child { border-bottom: 1px solid var(--linie); }
.leistung figure { border-radius: 14px; overflow: hidden; overflow: clip; background: var(--papier-2); aspect-ratio: 4 / 3; }
.leistung figure img { width: 100%; height: 100%; object-fit: cover; }
.leistung-text { display: grid; gap: 14px; align-content: center; }
.leistung-text p { color: var(--tinte-leise); }
.leistung ul { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.leistung li { position: relative; padding-left: 22px; }
/* Aufzählung als kleine Ader in Leiterfarbe */
.leistung li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 3px; border-radius: 2px; background: var(--kupfer); }
.leistung .textlink { justify-self: start; margin-top: 4px; }

/* ---------------------------------------------------------------- Über ihn */
.ueber { display: grid; gap: clamp(32px, 5vw, 72px); }
.zitat { display: grid; gap: 18px; max-width: 900px; }
.zitat blockquote, .zitat .kernsatz { font-size: clamp(1.7rem, 3.4vw, 2.8rem); font-weight: 600; line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; }
.zitat figcaption { color: var(--tinte-leise); font-size: .98rem; }
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 2px solid var(--tinte); }
.fakten div { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--linie); display: grid; gap: 4px; }
.fakten dt { font-size: .9rem; color: var(--tinte-leise); }
.fakten dd { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.fakten dd a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- Störung (Verweis auf die Unterseite) */
/* Dunkle Tafel mit runden Ecken im Papier, kein Band über die ganze Breite (sonst harte Kanten Hell zu Dunkel) */
.stoerung { position: relative; display: grid; overflow: hidden; overflow: clip; background: var(--nacht); color: var(--hell); margin: 0 clamp(10px, 3vw, 48px); border-radius: 18px; isolation: isolate; }
.stoerung figure { position: relative; height: 62vw; max-height: 420px; overflow: hidden; overflow: clip; }   /* Runde 2: das bewegte Foto bleibt im Rahmen, sonst ragte es links mit harter heller Kante unter den Text */
.stoerung figure img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 12%; }
/* Foto läuft unten weich in das Dunkel des Textes */
.stoerung figure::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 17, 20, 0) 35%, rgba(14, 17, 20, .35) 62%, rgba(14, 17, 20, .8) 84%, rgb(14, 17, 20) 100%); }
.stoerung-text { position: relative; display: grid; gap: 16px; justify-items: start; padding: 0 var(--rand) clamp(56px, 8vw, 96px); margin-top: -40px; }
.stoerung-text p { color: var(--hell-leise); font-size: 1.1rem; }

/* ---------------------------------------------------------------- Kontakt */
.kontakt { display: grid; gap: clamp(32px, 5vw, 64px); }
.kontakt-kopf { display: grid; gap: 14px; align-content: start; }
.kontakt-kopf p { color: var(--tinte-leise); font-size: 1.12rem; }
.wege { display: grid; gap: 0; margin-top: 12px; border-top: 1px solid var(--linie); }
.wege div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.wege dt { color: var(--tinte-leise); }
.wege dd { font-weight: 600; }
.wege .folgt { color: var(--tinte-leise); font-weight: 500; font-style: normal; }
.anfrage { display: grid; gap: 20px; padding: clamp(22px, 3.4vw, 40px); border-radius: 18px; background: var(--papier-2); }
.feld { display: grid; gap: 8px; }
.feld label, .feld .frage { font-weight: 600; font-size: .98rem; }
.feld input, .feld textarea {
  width: 100%; font: 500 1.05rem/1.4 "Barlow", system-ui, sans-serif; color: var(--tinte); background: #fbf9f5;
  border: 1.5px solid rgba(23, 25, 28, .22); border-radius: 10px; padding: 13px 14px; min-height: 52px;
}
.feld textarea { min-height: 120px; resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--tinte); box-shadow: 0 0 0 3px rgba(242, 164, 68, .45); }
.feld [aria-invalid="true"] { border-color: #a33a1c; }
.fehler { color: #a33a1c; font-size: .92rem; font-weight: 600; min-height: 0; }
.fehler:empty { display: none; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl button { font: 600 .98rem/1 "Barlow", system-ui, sans-serif; color: var(--tinte); background: #fbf9f5; border: 1.5px solid rgba(23, 25, 28, .22);
  border-radius: 999px; padding: 12px 16px; min-height: 44px; cursor: pointer; transition: background-color .16s var(--aus), border-color .16s var(--aus), transform .16s var(--aus); }
.wahl button:active { transform: scale(.97); }
.wahl button[aria-pressed="true"] { background: var(--tinte); color: var(--hell); border-color: var(--tinte); }
/* Runde 2: „Licht an“ am Formular. Je vollständiger, desto heller die Birne im Knopf. Sind Name und Telefon oder E-Mail da,
   geht der Knopf an (Lichtfarbe) und sein Licht fällt warm auf die Fläche (js/seite.js setzt --glas, --schein und „bereit“). */
.anfrage { position: relative; isolation: isolate; overflow: hidden; }
.anfrage::before { content: ""; position: absolute; z-index: -1; left: -18%; bottom: -36%; width: 96%; height: 88%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 178, 98, .42), rgba(255, 160, 80, .14) 55%, rgba(255, 150, 70, 0));
  opacity: var(--schein, 0); transition: opacity .6s var(--aus); }
.feld input::placeholder, .feld textarea::placeholder { color: #6f6a62; opacity: 1; }
.akut { font-size: .95rem; color: var(--tinte-leise); }
.senden-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.senden { position: relative; transition: background-color .45s var(--aus), color .45s var(--aus), box-shadow .45s var(--aus), transform .16s var(--aus); }
.birne-ic { width: 22px; height: 22px; }
.birne-ic .glas { fill: #ffc06a; fill-opacity: var(--glas, 0); transition: fill-opacity .45s var(--aus), fill .3s var(--aus); }
.anfrage.bereit .senden { background: var(--licht); color: var(--licht-dunkel); box-shadow: 0 12px 28px -10px rgba(242, 164, 68, .75); }
@media (hover: hover) { .anfrage.bereit .senden:hover { background: #ffb85c; } }
.anfrage.bereit .senden .glas { fill: #fff2d2; }
.senden.laeuft { color: transparent; }
.senden.laeuft::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(243, 241, 236, .35); border-top-color: var(--hell); animation: dreh .7s linear infinite; }
@keyframes dreh { to { transform: rotate(1turn); } }
.anfrage-hinweis { font-size: .9rem; color: var(--tinte-leise); }
/* Runde 2b (Jonathan 07.11. „irgendwas Cooles“): nach dem Abschicken hängt die Leuchte aus dem Menü über dem Dank, pendelt aus
   und geht an, ihr Licht fällt auf den Text. Nur transform und opacity. In der ruhigen Fassung brennt sie gleich. */
.dank { --lh: 168px; position: relative; isolation: isolate; display: grid; justify-items: center; text-align: center;
  padding: calc(var(--lh) + 4px) 24px 34px; border-radius: 18px; background: var(--nacht); color: var(--hell); overflow: hidden; overflow: clip;
  box-shadow: 0 18px 40px -18px rgba(242, 164, 68, .7); animation: licht-an .25s var(--aus) both; }
.dank::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% calc(var(--lh) * .77), rgba(255, 206, 140, .55) 0, rgba(255, 176, 96, .22) calc(var(--lh) * .16), rgba(255, 166, 86, .08) calc(var(--lh) * .42), rgba(255, 160, 80, 0) calc(var(--lh) * .8)),
    radial-gradient(90% 70% at 50% calc(var(--lh) * .9), rgba(255, 168, 88, .24) 0%, rgba(255, 150, 70, .08) 55%, rgba(255, 140, 60, 0) 80%);
  animation: licht-an .6s var(--aus) .62s both; }
.dank-leuchte { position: absolute; left: 50%; top: 0; width: calc(var(--lh) * .6667); height: var(--lh); translate: -50% 0; transform-origin: 50% 0;
  animation: pendeln 1.15s cubic-bezier(.3, .7, .3, 1) both; }
.dank-leuchte img { position: absolute; inset: 0; width: 100%; height: 100%; }
.dank-leuchte .an { animation: licht-an .09s linear .58s both; }
.dank > div { display: grid; gap: 8px; max-width: 34ch; animation: angestrahlt .5s var(--aus) .62s both; }
.dank b { font-size: 1.3rem; line-height: 1.2; }
.dank p { color: var(--hell-leise); }
.dank:focus { outline: none; }
@keyframes licht-an { from { opacity: 0; } to { opacity: 1; } }
@keyframes angestrahlt { from { opacity: .22; } to { opacity: 1; } }
.anfrage.fertig .feld, .anfrage.fertig .senden-zeile { display: none; }
/* Nach dem Abschicken füllt der dunkle Dank die ganze Formularfläche */
.anfrage.fertig { padding: 0; background: var(--nacht); box-shadow: 0 22px 44px -22px rgba(242, 164, 68, .75); }
.anfrage.fertig::before { display: none; }

/* ---------------------------------------------------------------- Fuß */
.fuss { padding: 28px var(--rand) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between; font-size: .92rem; color: var(--tinte-leise); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
/* eigene Zeile über © und Links: volle Breite, das Bild selbst bleibt links in seiner Größe */
.fuss-logo { flex: 0 0 100%; height: 48px; width: 100%; object-fit: contain; object-position: left center; margin-bottom: 8px; }
.fuss a { text-underline-offset: 3px; }

/* ---------------------------------------------------------------- Anruf-Leiste am Handy (erst nach dem Startbereich) */
/* Runde 2: Zeichen zu den Worten. Beim Erscheinen und danach alle 14 s läuft ein Lichtstreif über „Anrufen“ und der Hörer
   klingelt kurz (js/seite.js, Klasse „strom“). Die ruhige Fassung hat beides nicht. */
.anrufleiste { position: fixed; z-index: 15; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(66px, .56fr) minmax(0, 1fr); gap: 7px;
  padding: 7px; border-radius: 18px; background: rgba(14, 17, 20, .97); box-shadow: 0 16px 36px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(255, 255, 255, .07);
  transform: translateY(calc(100% + 24px)); transition: transform .55s cubic-bezier(.16, 1, .3, 1); }
.anrufleiste.da { transform: none; }
.anrufleiste a { position: relative; overflow: hidden; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 8px;
  border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 1.04rem; line-height: 1.05; color: var(--hell); background: #23272d;
  transition: transform .14s var(--aus); -webkit-tap-highlight-color: transparent; }
.anrufleiste a:active { transform: scale(.97); }
.anrufleiste a > span { display: grid; gap: 3px; text-align: left; }
.anrufleiste a small { display: block; font-weight: 500; font-size: .8rem; color: var(--hell-leise); font-variant-numeric: tabular-nums; }
.anrufleiste a.erst { background: var(--licht); color: var(--licht-dunkel); }
.anrufleiste a.erst small { color: rgba(27, 19, 8, .74); }
.anrufleiste a.erst::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 42%; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 247, 230, .62) 50%, rgba(255, 255, 255, 0) 100%); transform: translateX(-130%) skewX(-14deg); }
.anrufleiste.strom a.erst::after { animation: strom 1.05s cubic-bezier(.45, .05, .25, 1); }
@keyframes strom { to { transform: translateX(340%) skewX(-14deg); } }
.anrufleiste.strom a.erst .ic { animation: klingeln .72s ease-in-out .18s; }
@keyframes klingeln { 0%, 100% { transform: rotate(0); } 14% { transform: rotate(-15deg); } 28% { transform: rotate(13deg); } 42% { transform: rotate(-10deg); } 56% { transform: rotate(8deg); } 70% { transform: rotate(-4deg); } 84% { transform: rotate(2deg); } }
/* Runde 2b: WhatsApp als eigenes Feld mit dem bekannten Zeichen (Korbinian 👍 07.11.), ruhig auf dunkel, Anrufen bleibt der laute Knopf */
.anrufleiste a.wa { padding: 0; color: #25d366; }
.ic-wa { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.menue-wege .paar { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 10px; }
.menue-wege .knopf.wa { padding: 0; color: #25d366; }
/* Runde 2d (Jonathan 07.11.: Anrufen etwas schmaler, WhatsApp etwas breiter, ausgewogen). Unter 360 px reicht der Platz nicht für
   Zeichen neben Wort samt Nummer (bei 320 brach die Nummer um): Zeichen über dem Wort, ohne Nummer und ohne „schreiben“. */
@media (max-width: 359px) {
  .anrufleiste { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); }
  .anrufleiste a { flex-direction: column; gap: 4px; min-height: 58px; padding: 0 4px; font-size: .98rem; }
  .anrufleiste a > span { text-align: center; }
  .anrufleiste a small { display: none; }
}
body:has(.anrufleiste) .fuss { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

/* ---------------------------------------------------------------- Unterseite Fehlersuche */
.kopfbild { position: relative; background: var(--nacht); color: var(--hell); display: grid; }
.kopfbild figure { position: relative; height: 64svh; min-height: 340px; }
.kopfbild figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.kopfbild figure::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 17, 20, .55) 0%, rgba(14, 17, 20, 0) 22%, rgba(14, 17, 20, 0) 40%, rgba(14, 17, 20, .4) 62%, rgba(14, 17, 20, .82) 84%, rgb(14, 17, 20) 100%); }
.kopfbild-text { position: relative; display: grid; gap: 16px; justify-items: start; padding: 0 var(--rand) 12px; margin-top: -120px; }
.kopfbild-text p { color: var(--hell-leise); font-size: 1.12rem; max-width: 46ch; }
.zurueck { font-size: .95rem; color: var(--hell-leise); text-underline-offset: 3px; }
.hilfe { display: grid; gap: 24px; }
.hilfe-kopf { display: grid; gap: 12px; max-width: 760px; }
.hilfe-kopf p { color: var(--tinte-leise); font-size: 1.1rem; }
.zeichen { display: grid; gap: 10px; }
.zeichen button {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; text-align: left; width: 100%;
  font: 600 1.08rem/1.25 "Barlow", system-ui, sans-serif; color: var(--tinte); background: #fbf9f5; border: 1.5px solid rgba(23, 25, 28, .18);
  border-radius: 12px; padding: 16px 18px; min-height: 58px; cursor: pointer; transition: border-color .16s var(--aus), background-color .16s var(--aus), transform .16s var(--aus);
}
.zeichen button::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .18s var(--aus); }
.zeichen button:active { transform: scale(.985); }
.zeichen button[aria-pressed="true"] { background: var(--tinte); color: var(--hell); border-color: var(--tinte); }
.zeichen button[aria-pressed="true"]::after { transform: rotate(45deg); }
.antwort { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); border-radius: 16px; background: #fbf9f5; border: 1.5px solid var(--tinte); }
.antwort h3 { font-size: 1.35rem; }
.antwort ol { display: grid; gap: 10px; padding-left: 22px; }
.antwort li { padding-left: 4px; }
.antwort .wann { font-weight: 600; }
.antwort.warnung { border-color: #a33a1c; }
.antwort.warnung .wann { color: #a33a1c; }
.hilfe-leer { color: var(--tinte-leise); }
.hilfe.gewaehlt .hilfe-leer { display: none; }
.vorgehen { display: grid; gap: clamp(28px, 4vw, 48px); }
.vorgehen ol { list-style: none; display: grid; gap: 0; counter-reset: s; border-top: 2px solid var(--tinte); }
.vorgehen li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 6px 14px; padding: 20px 0; border-bottom: 1px solid var(--linie); }
.vorgehen li::before { content: counter(s); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-content: center; font-weight: 700; border: 2px solid var(--tinte); }
.vorgehen li p { color: var(--tinte-leise); grid-column: 2; }
.vorgehen-kopf { display: grid; gap: 12px; max-width: 760px; }
.vorgehen-kopf p { color: var(--tinte-leise); font-size: 1.1rem; }
.weiter { display: grid; gap: 16px; justify-items: start; padding-top: 0; }
.weiter p { color: var(--tinte-leise); font-size: 1.1rem; }

/* ---------------------------------------------------------------- Hinweis-Seite */
.schlicht { padding: 120px var(--rand) 72px; display: grid; gap: 18px; max-width: 860px; }
.schlicht p { color: var(--tinte-leise); }
body.hinweis .kopf { color: var(--hell); }
body.hinweis .kopf::before { opacity: 1; }

/* ---------------------------------------------------------------- PC */
@media (min-width: 900px) {
  .kopf { height: 76px; }
  .marke-logo { height: 56px; }
  /* Am PC läuft die Leitung genau hinter dem Menü: sie kommt erst unter der Kopfzeile aus dem Dunkel */
  .kopf::after { height: 200%; background: linear-gradient(180deg, rgba(14, 17, 20, .97) 0%, rgba(14, 17, 20, .9) 45%, rgba(14, 17, 20, 0) 100%); }
  .menue-knopf, .menue, .anrufleiste { display: none; }
  .leiste { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); font-weight: 600; font-size: .98rem; }
  /* Runde 2: Ein Zeiger aus Licht gleitet unter den Eintrag, auf den die Maus zeigt, sonst unter den Abschnitt, in dem man liest */
  .leiste-links { position: relative; display: flex; gap: clamp(20px, 2.4vw, 34px); }
  .leiste-links a { text-decoration: none; padding: 10px 0; color: rgba(243, 241, 236, .76); transition: color .18s var(--aus); }
  .leiste-links a:hover, .leiste-links a.aktiv, .leiste-links a[aria-current] { color: var(--hell); }
  .zeiger { position: absolute; left: 0; bottom: 3px; width: 1px; height: 2px; background: var(--licht); transform-origin: 0 50%;
    transform: translateX(var(--zx, 0)) scaleX(var(--zb, 0)); opacity: 0; transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .22s var(--aus); }
  .leiste-links.zeigt .zeiger { opacity: 1; }
  .leiste-links.sofort .zeiger { transition: none; }
  .leiste-tel { display: inline-flex; align-items: center; gap: 9px; padding: 10px 0 10px clamp(20px, 2.4vw, 36px); border-left: 1px solid rgba(243, 241, 236, .16);
    text-decoration: none; font-variant-numeric: tabular-nums; transition: color .18s var(--aus); }
  .leiste-tel .ic { width: 18px; height: 18px; color: var(--licht); }
  .leiste-tel:hover { color: var(--licht); }
  .leiste .knopf { min-height: 44px; padding: 0 18px; }
  body:has(.anrufleiste) .fuss { padding-bottom: 28px; }

  .fest { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; padding: 140px var(--rand) 90px; }
  .buehne { order: 2; width: min(100%, 560px); }
  .bewegt .buehne img { left: 65%; top: 50%; width: min(100svh, 70vw); aspect-ratio: 1; }
  .bewegt .texte { left: var(--rand); right: auto; width: min(38vw, 520px); top: 0; bottom: 0; height: auto; }
  .bewegt .lage { top: 0; bottom: 0; align-content: center; }
  .bewegt .weg { left: var(--rand); right: auto; width: 26vw; bottom: 9svh; }
  .bewegt .fest::after { top: 0; bottom: 0; left: 0; right: auto; width: 50vw; height: auto;
    background: linear-gradient(to right, rgba(14, 17, 20, .86) 0%, rgba(14, 17, 20, .6) 55%, rgba(14, 17, 20, 0) 100%); }
  /* Startseite (31.10.2026, Jonathan: „harter Strich“): Am PC hängt die Birne tief, ihr Licht endet an der Unterkante der Szene.
     Deshalb beginnt der Verlauf schon über der Szene durchsichtig und ist bei 37,5 % deckend, die Kante (39 %) liegt unter ihm.
     Über dem Nacht-Grund ergibt jede Stufe genau die Farbe von oben, das Licht scheint durch und läuft in den Verlauf aus.
     Am Handy ist dort unten kein Licht, aber der Knopf, also bleibt es dort beim einfachen Verlauf. */
  .bewegt .szene + .uebergang { --t: clamp(260px, 48svh, 520px); position: relative; z-index: 3; pointer-events: none; height: var(--t); margin-top: calc(var(--t) * -.39);
    background: linear-gradient(180deg, rgba(14, 17, 20, 0) 0%, rgba(43, 46, 49, .034) 4.2%, rgba(46, 41, 44, .126) 8.3%, rgba(45, 44, 43, .259) 12.5%, rgba(50, 46, 44, .417) 16.7%, rgba(52, 50, 46, .583) 20.8%, rgba(57, 53, 50, .741) 25%, rgba(62, 58, 53, .874) 29.2%, rgba(70, 66, 59, .966) 33.3%, rgb(81 75 67) 37.5%, rgb(95 87 77) 41.7%, rgb(109 100 89) 45.8%, rgb(123 114 101) 50%, rgb(138 127 114) 54.2%, rgb(152 141 127) 58.3%, rgb(166 155 141) 62.5%, rgb(179 169 155) 66.7%, rgb(191 182 168) 70.8%, rgb(203 194 181) 75%, rgb(213 205 193) 79.2%, rgb(222 214 203) 83.3%, rgb(229 222 211) 87.5%, rgb(234 228 218) 91.7%, rgb(238 232 222) 95.8%, rgb(239 233 223) 100%); }
  .lage p { font-size: 1.16rem; }

  .leistung { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
  .leistung:nth-child(even) figure { order: 2; }
  .ueber { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .fakten { grid-template-columns: 1fr; }

  .stoerung { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 560px; }
  .stoerung figure { order: 2; height: auto; max-height: none; }
  .stoerung figure img { object-position: 100% 0; }
  .stoerung figure::after { background: linear-gradient(90deg, rgb(14, 17, 20) 0%, rgba(14, 17, 20, .8) 14%, rgba(14, 17, 20, .3) 36%, rgba(14, 17, 20, 0) 60%), linear-gradient(0deg, rgb(14, 17, 20) 0%, rgba(14, 17, 20, .75) 20%, rgba(14, 17, 20, 0) 46%); }
  .stoerung-text { align-content: center; margin: 0; padding: 80px 0 80px var(--rand); z-index: 1; }

  .kontakt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }

  .kopfbild { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); min-height: 88svh; }
  .kopfbild figure { order: 2; height: auto; min-height: 0; }
  .kopfbild figure::after { background: linear-gradient(90deg, rgb(14, 17, 20) 0%, rgba(14, 17, 20, .78) 16%, rgba(14, 17, 20, .25) 40%, rgba(14, 17, 20, 0) 62%), linear-gradient(180deg, rgba(14, 17, 20, .5) 0%, rgba(14, 17, 20, 0) 20%), linear-gradient(0deg, rgb(14, 17, 20) 0%, rgba(14, 17, 20, 0) 26%); }
  .kopfbild-text { align-content: center; margin: 0; padding: 120px 0 80px var(--rand); z-index: 1; }
  .hilfe { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; column-gap: clamp(32px, 5vw, 80px); }
  .hilfe-kopf { grid-column: 1 / -1; }
  .antworten { position: sticky; top: 100px; }
}

/* ---------------------------------------------------------------- Bewegung beim Scrollen (Runde 2, 07.11.2026) */
/* Am Scrollweg festgemacht, nicht an einer Zeit. Jeder Abschnitt bewegt sich anders. Ohne Unterstützung im Browser oder in der
   ruhigen Fassung steht alles gleich im Endzustand. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Leistungen (Runde 2b, Jonathan 07.11. „noch cool“): das Foto liegt erst im Dunkeln, ein warmer Lichtkegel wie von einer
       Taschenlampe sucht darüber, dann geht das Licht ganz an. Der Kegel ist eine doppelt so große dunkle Fläche mit hellem Loch,
       die nur verschoben, vergrößert und ausgeblendet wird (transform, opacity). Das Foto zieht dabei langsam im Rahmen mit. */
    .leistung figure { position: relative; }
    .leistung figure::after { content: ""; position: absolute; inset: -50%; pointer-events: none;
      background: radial-gradient(circle closest-side, rgba(255, 214, 160, .12) 0%, rgba(255, 196, 128, .05) 15%, rgba(14, 17, 20, .52) 25%, rgba(14, 17, 20, .88) 42%);
      animation: suchen linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .leistung:nth-child(even) figure::after { animation-name: suchen-andersrum; }
    .leistung figure img { animation: wandern linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* Leiter (11.11.): die Spitze sitzt knapp unter dem oberen Bildrand, das Foto zieht deshalb nur nach unten und bleibt oben im Bild */
    .leistung figure.oben-frei img { animation-name: wandern-unten; }
    /* Über mich: die Linie über den Angaben wird verlegt wie eine Leitung */
    .fakten { position: relative; border-top-color: transparent; }
    .fakten::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--tinte); transform-origin: 0 50%;
      animation: verlegen linear both; animation-timeline: view(); animation-range: entry 10% cover 34%; }
    /* Störung: das Foto der Sicherungen zieht langsamer vorbei als die Seite */
    .stoerung figure img { animation: tiefe linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes suchen {
  0% { transform: translate(-21%, 13%); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  42% { transform: translate(-5%, -9%); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  70% { transform: translate(9%, 4%); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  100% { transform: translate(4%, 0) scale(2.4); opacity: 0; } }
@keyframes suchen-andersrum {
  0% { transform: translate(21%, 13%); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  42% { transform: translate(5%, -9%); opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  70% { transform: translate(-9%, 4%); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  100% { transform: translate(-4%, 0) scale(2.4); opacity: 0; } }
@keyframes wandern { from { transform: translateY(-5%) scale(1.13); } to { transform: translateY(5%) scale(1.13); } }
@keyframes wandern-unten { from { transform: translateY(0) scale(1.13); } to { transform: translateY(6%) scale(1.13); } }
@keyframes verlegen { from { transform: scaleX(0); } to { transform: none; } }
@keyframes tiefe { from { transform: translateY(-5%) scale(1.1); } to { transform: translateY(5%) scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Online-Fassung (11.11.2026): Honigtopf gegen automatische Absender, Meldung, wenn das Senden scheitert */
.honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.senden-fehler { margin: 0; }
.anfrage.fertig .senden-fehler { display: none; }
/* Datenschutz ist ein langer Text: Zwischenüberschriften kleiner als die Abschnittstitel der Startseite */
.schlicht h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.15; margin-top: 14px; }
.schlicht h3 { font-size: 1.2rem; line-height: 1.2; }