/* Biendl Consulting: Leitungsplan. Eine Leitung läuft durch die Seite, jeder Abschnitt ist ein Prüfpunkt. */

@font-face { font-family: 'Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/plex-mono-500.woff2') format('woff2'); }

:root {
  --canvas: #F2F5F6;
  --panel: #FAFCFC;
  --ink: #0F2A42;
  --ink-soft: #4F6472;
  --navy: #1C4A72;
  --navy-deep: #123249;
  --accent: #3E8E86;
  --accent-hover: #357A73;
  --accent-muted: #CFE3E0;
  --line: #D5DFE4;
  --line-strong: #B9C8D0;
  --warn: #B4672A;
  --kalt: #7C99AE;

  --f-sans: 'Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'Plex Mono', ui-monospace, Consolas, monospace;

  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);

  /* Die Kopfleiste schwebt als runde Leiste mit etwas Luft zum Rand */
  --kopf-bar: 58px;
  --kopf-luft: 10px;
  --kopf-h: calc(var(--kopf-bar) + 2 * var(--kopf-luft));
  --leitung-x: max(22px, calc((100vw - 1160px) / 2 - 34px));
  --rand: max(24px, env(safe-area-inset-left, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 0; /* Sprungziele sind Abschnitte, deren Polster die Kopfleiste schon einrechnet */ -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: hidden; overflow-x: clip;
  background: var(--canvas); color: var(--ink);
  font-family: var(--f-sans); font-size: 17px; line-height: 1.6;
  animation: seite-ein .6s var(--ease-out) both;
}
@keyframes seite-ein { from { opacity: 0; } to { opacity: 1; } }

/* Die Seite ist ein Ort: ein feines Planraster, das sehr langsam wandert */
body::before {
  content: ""; position: fixed; inset: -48px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(28, 74, 114, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 74, 114, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  animation: raster 120s linear infinite; animation-delay: -30s;
}
@keyframes raster { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(48px, 48px, 0); } }
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
a:not(.knopf):focus-visible { border-radius: 4px; }

h1, h2, h3 { font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(38px, 5.6vw, 70px); }
h2 { font-size: clamp(30px, 3.8vw, 48px); }
h3 { font-size: clamp(19px, 1.6vw, 22px); letter-spacing: -0.01em; line-height: 1.25; }
p { margin: 0; }
.text { max-width: 60ch; }
.lead { font-size: clamp(18px, 1.5vw, 20px); color: var(--ink-soft); max-width: 56ch; }
.klein { font-size: 14px; color: var(--ink-soft); }
.mono { font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.kicker { font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hover); }
.nur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 6px; }
.sprung:focus { top: 12px; color: #fff; }

/* Kopfzeile */
.kopf { position: fixed; top: var(--kopf-luft); left: 0; right: 0; z-index: 50; height: var(--kopf-bar); padding-inline: 12px; pointer-events: none; }
.kopf-innen { pointer-events: auto; position: relative; max-width: 1240px; height: 100%; margin: 0 auto; padding-inline: 22px 8px; display: flex; align-items: center; gap: 24px; background: rgba(250, 252, 252, .93); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 10px 30px rgba(15, 42, 66, .08), 0 1px 2px rgba(15, 42, 66, .05); -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px); }
/* Über dunklen Abschnitten wird die Leiste dunkel: Hintergrund per Deckkraft überblendet, Schrift folgt */
.kopf-innen::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: rgba(18, 50, 73, .92); opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none; }
.kopf-innen { transition: border-color .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.kopf .marke, .kopf .marke-zusatz, .kopf .nav a { transition: color .3s var(--ease-out); }
.kopf .marke rect, .kopf .marke circle { transition: fill .3s var(--ease-out); }
.kopf .marke path { transition: stroke .3s var(--ease-out); }
.kopf.dunkel .kopf-innen { border-color: rgba(255, 255, 255, .14); box-shadow: 0 10px 30px rgba(5, 18, 28, .35); }
.kopf.dunkel .kopf-innen::before { opacity: 1; }
.kopf.dunkel .marke { color: #F3F7FA; }
.kopf.dunkel .marke-zusatz { color: #8FCBC3; }
.kopf.dunkel .marke rect { fill: #F3F7FA; }
.kopf.dunkel .marke path { stroke: #F3F7FA; }
.kopf.dunkel .marke circle { fill: #5FB0A5; }
.kopf.dunkel .nav a { color: #E6EEF3; }
.kopf.dunkel .nav a:hover, .kopf.dunkel .nav a[aria-current="page"] { color: #8FCBC3; }
.kopf.dunkel .nav a.knopf, .kopf.dunkel .nav a.knopf:hover { background: #F3F7FA; border-color: #F3F7FA; color: var(--navy-deep); }
.kopf.dunkel .knopf.zweit { color: #F3F7FA; border-color: #8FA5B3; }
.kopf.dunkel .knopf.zweit:hover { background: rgba(255, 255, 255, .08); color: #FFFFFE; }
.anruf-knopf { display: none; }
.knopf.anruf-knopf { display: none; }
.kopf .knopf.anruf-knopf { width: 44px; padding: 0; flex: none; }
.anruf-knopf svg { width: 19px; height: 19px; fill: currentColor; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; }
.marke svg { width: 34px; height: 34px; flex: none; }
.marke-text { display: grid; line-height: 1.1; }
.marke-name { font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.marke-zusatz { font-family: var(--f-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .1em; color: var(--accent-hover); text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav a { text-decoration: none; color: var(--ink); font-size: 15.5px; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent-hover); }
.menue-knopf { display: none; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid var(--navy); background: var(--navy); color: #F6F9FB; font: 500 16px/1.2 var(--f-sans); text-decoration: none; cursor: pointer; transition: background .25s var(--ease-out), transform .25s var(--ease-out), border-color .25s var(--ease-out); }
.knopf:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #F6F9FB; transform: translateY(-1px); }
.knopf.zweit { background: transparent; color: var(--navy); }
.knopf.zweit:hover { background: rgba(28, 74, 114, .07); color: var(--navy-deep); }
.knopf.klein-k { min-height: 42px; padding: 9px 16px; font-size: 15px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 12px; }
@media (pointer: coarse) { .knopf { min-height: 48px; } .nav a { min-height: 44px; display: inline-flex; align-items: center; } }

/* Hauptbereich mit Leitung */
main { position: relative; display: block; }
main:focus { outline: none; }
.leitung { position: absolute; top: 0; bottom: 0; left: var(--leitung-x); width: 3px; background: var(--line); pointer-events: none; z-index: 0; }
.leitung-fuellung { position: absolute; inset: 0; background: linear-gradient(var(--accent), var(--navy)); transform-origin: top; transform: scaleY(0); will-change: transform; }

.abschnitt { position: relative; min-height: 100vh; min-height: 100svh; padding-block: calc(var(--kopf-h) + 40px) 56px; display: grid; align-content: center; }
.inhalt { width: 100%; max-width: 1160px; margin: 0 auto; padding-inline: var(--rand); position: relative; z-index: 1; }
.abschnitt.dunkel { background: var(--navy-deep); color: #E6EEF3; }
.abschnitt.dunkel h2, .abschnitt.dunkel h3 { color: #F3F7FA; }
.abschnitt.dunkel .lead, .abschnitt.dunkel .klein { color: #B7C9D6; }
.abschnitt.dunkel .kicker { color: #8FCBC3; }
.abschnitt.dunkel a { color: #D7E7F2; }
.abschnitt.dunkel .knopf.hell { background: #F3F7FA; color: var(--navy-deep); border-color: #F3F7FA; }
.abschnitt.dunkel .knopf.hell:hover { background: #FFFFFE; color: var(--navy-deep); }
.abschnitt.dunkel .knopf.zweit { color: #F3F7FA; border-color: #8FA5B3; }
.abschnitt.dunkel .knopf.zweit:hover { background: rgba(255, 255, 255, .08); color: #FFFFFE; }

/* Prüfpunkt-Markierung an der Leitung */
.pruefpunkt { position: absolute; top: calc(var(--kopf-h) + 18px); left: calc(var(--leitung-x) - 7px); display: flex; align-items: center; gap: 12px; z-index: 2; pointer-events: none; }
.pp-punkt { width: 17px; height: 17px; border-radius: 50%; background: var(--canvas); border: 3px solid var(--line-strong); transition: background .5s var(--ease-out), border-color .5s var(--ease-out), transform .5s var(--ease-out); }
.pp-text { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--ease-out) .15s, transform .5s var(--ease-out) .15s; }
.pruefpunkt.in .pp-punkt { background: var(--accent); border-color: var(--accent-muted); transform: scale(1.12); }
.pruefpunkt.in .pp-text { opacity: 1; transform: none; }
.abschnitt.dunkel .pp-punkt { background: var(--navy-deep); }
.abschnitt.dunkel .pruefpunkt.in .pp-punkt { background: #5FB0A5; border-color: rgba(95, 176, 165, .35); }
.abschnitt.dunkel .pp-text { color: #9FB4C1; }

/* Auftritte */
[data-reveal] > * { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].in > * { opacity: 1; transform: none; }
[data-reveal].in > :nth-child(2) { transition-delay: .09s; }
[data-reveal].in > :nth-child(3) { transition-delay: .18s; }
[data-reveal].in > :nth-child(4) { transition-delay: .27s; }
[data-reveal].in > :nth-child(5) { transition-delay: .36s; }
[data-reveal].in > :nth-child(6) { transition-delay: .45s; }
.stapel { display: grid; gap: 22px; align-content: start; }

/* Hero: Text und Porträt oben, darunter der Trinkwasserweg als Panorama (KI-Bild ohne Schrift, Beschriftung als HTML).
   Das Bild läuft an den Rändern weich in den Seitenhintergrund aus, kein Rahmen. */
.hero { overflow: hidden; align-content: start; padding-top: calc(var(--kopf-h) + clamp(40px, 7vh, 80px)); padding-bottom: 24px; gap: clamp(18px, 3vh, 36px); }
.hero-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hero h1 { max-width: 24ch; }
@media (min-width: 721px) { .hero h1 { font-size: clamp(34px, min(3.9vw, 6.8vh), 54px); } }
.hero .lead { max-width: 64ch; font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.55; }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.35em); animation: wort .7s var(--ease-out) forwards; animation-delay: calc(.08s + var(--i, 0) * .07s); }
@keyframes wort { to { opacity: 1; transform: none; } }
/* Dezenter Akzent auf "Risikoabschätzung": feine Linie in Petrol, die sich nach dem Wort aufbaut */
.hero h1 .w.akzent { position: relative; }
.hero h1 .w.akzent::after { content: ""; position: absolute; left: .02em; right: .02em; bottom: -.04em; height: .06em; border-radius: 99px; background: var(--accent); opacity: .6; transform: scaleX(0); transform-origin: left; animation: pegel .8s var(--ease-out) 1.2s forwards; }
@keyframes pegel { to { transform: scaleX(1); } }
@keyframes puls { 0% { opacity: .55; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(2.4); } }
.hero-person { position: relative; margin: 0; justify-self: end; width: clamp(180px, min(19vw, 30vh), 260px); }
.hero-person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; border: 6px solid var(--panel); background: var(--panel); box-shadow: 0 24px 60px rgba(15, 42, 66, .18), 0 2px 6px rgba(15, 42, 66, .08); }
.hero-avatar { display: none; }
.hero-avatar img { object-fit: cover; object-position: 50% 20%; }
.hero-panorama { position: relative; z-index: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding-inline: var(--rand); display: grid; gap: 10px; }
.hero-panorama img { width: 100%; height: auto; max-height: min(52vh, 560px); aspect-ratio: 1536 / 720; object-fit: cover; object-position: center bottom; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, #000 0, #000 80%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, #000 0, #000 80%, transparent); mask-composite: intersect; animation: panorama-ein 1.1s var(--ease-out) .3s both; }
@keyframes panorama-ein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-panorama-text { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 20px; max-width: 1160px; margin: 0 auto; width: 100%; font-size: 13.5px; color: var(--ink-soft); }
.hero-panorama-text span { display: grid; gap: 2px; padding-left: 14px; position: relative; }
.hero-panorama-text span::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero-panorama-text b { font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hover); }
/* Variante "hintergrund": das Panorama liegt hinter Text und Porträt und ist nach oben gezogen. Das Gebäude steht rechts
   unter dem Porträt, links bleibt der helle Himmel, ein Schleier hält den Text lesbar. Oben läuft das Bild weich aus. */
.hero.hintergrund { min-height: 100svh; padding-bottom: 0; gap: 0; }
.hero.hintergrund .hero-raster { padding-bottom: clamp(220px, 34vh, 360px); }
.hero.hintergrund .hero-panorama { position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; max-width: none; padding: 0; height: min(84%, 760px); pointer-events: none; }
.hero.hintergrund .hero-panorama picture { position: absolute; inset: 0; }
.hero.hintergrund .hero-panorama img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: 78% 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 100%); -webkit-mask-composite: source-over; mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 100%); mask-composite: add; }
.hero.hintergrund .hero-panorama::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(242, 245, 246, .97) 0%, rgba(242, 245, 246, .9) 40%, rgba(242, 245, 246, .45) 60%, rgba(242, 245, 246, 0) 74%); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 94%); mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 94%); }
.hero.hintergrund .hero-panorama-text { display: none; }
.hero.hintergrund .hero-person img { box-shadow: 0 28px 70px rgba(15, 42, 66, .26), 0 2px 6px rgba(15, 42, 66, .1); }
/* Variante "vollbild": das ganze Bild füllt den ersten Bildschirm, unten läuft es in den Hintergrund aus,
   Text und Porträt folgen beim Scrollen. Kein Rand, kein Rahmen. */
.hero.vollbild { padding-top: 0; gap: 0; }
/* Das Bild liegt über der Leitung, das Rohr beginnt erst unter dem Hero (Linarb, 04.11.2026: so lassen) */
.hero.vollbild .hero-panorama { order: -1; position: relative; z-index: 1; max-width: none; padding: 0; height: 100vh; height: 100svh; display: block; }
.hero.vollbild .hero-panorama img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; object-position: 50% 68%; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 86%, transparent 100%); -webkit-mask-composite: source-over; mask-image: linear-gradient(180deg, #000 0, #000 86%, transparent 100%); mask-composite: add; animation: none; }
.hero.vollbild .hero-panorama-text { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; padding-inline: var(--rand); max-width: 1160px; margin: 0 auto; }
.hero.vollbild .hero-panorama-text span { color: var(--ink); }
.hero.vollbild .hero-raster { padding-top: clamp(40px, 7vh, 72px); padding-bottom: 32px; }
/* Scroll-Hinweis: kleiner Pfeil unten in der Mitte des Bildes */
.hero.vollbild .hero-panorama::after { content: "↓"; position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(250, 252, 252, .92); color: var(--navy); font: 600 20px/1 var(--f-sans); box-shadow: 0 6px 18px rgba(15, 42, 66, .18); animation: wippen 2.2s var(--ease-inout) infinite; }
@keyframes wippen { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
/* Variante "vollbild-text": Kicker, Überschrift und Knöpfe liegen oben links auf dem Bild (über dem hellen Himmel),
   ein weicher Schleier hält sie lesbar. Intro-Text und Porträt folgen beim Scrollen. Die Versorgungsleitung unten bleibt im Bild. */
.hero.vollbild.text-oben .hero-panorama img { object-position: 50% 100%; }
.hero.vollbild.text-oben .hero-panorama::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(242, 245, 246, .9) 0%, rgba(242, 245, 246, .78) 30%, rgba(242, 245, 246, .28) 50%, rgba(242, 245, 246, 0) 64%); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 82%); mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent 82%); }
.hero.vollbild.text-oben .hero-oben { position: absolute; left: 0; right: 0; top: calc(var(--kopf-h) + clamp(36px, 6vh, 64px)); z-index: 2; max-width: 1160px; margin: 0 auto; padding-inline: var(--rand); display: grid; gap: 20px; justify-items: start; }
.hero.vollbild.text-oben .hero-oben h1 { max-width: 15ch; font-size: clamp(36px, min(4.6vw, 7.6vh), 64px); }
.hero.vollbild.text-oben .hero-raster { padding-top: clamp(32px, 6vh, 56px); }
.hero.vollbild.text-oben .hero-raster .lead { font-size: clamp(17px, 1.3vw, 19px); }
/* Eintritt "wort": Kicker, dann Wort für Wort, zuletzt die Knöpfe, alles gemächlich */
.hero.ein-wort .hero-oben .kicker { opacity: 0; animation: wort .8s var(--ease-out) .3s forwards; }
.hero.ein-wort .hero-oben h1 .w { animation-duration: 1s; animation-delay: calc(.7s + var(--i, 0) * .26s); }
.hero.ein-wort .hero-oben .knopfreihe { opacity: 0; transform: translateY(.5em); animation: wort .9s var(--ease-out) 2.9s forwards; }
/* Eintritt "zoom": der ganze Textblock kommt langsam aus der Vergrößerung heran, das Bild zoomt derweil minimal zurück */
.hero.ein-zoom .hero-oben { transform-origin: left top; opacity: 0; animation: zoom-ein 1.9s var(--ease-out) .35s forwards; }
.hero.ein-zoom .hero-oben h1 .w { opacity: 1; transform: none; animation: none; }
.hero.ein-zoom .hero-panorama img { transform-origin: 50% 100%; animation: ken 10s var(--ease-out) forwards; }
@keyframes zoom-ein { from { opacity: 0; transform: scale(1.16); } to { opacity: 1; transform: none; } }
@keyframes ken { from { transform: scale(1.07); } to { transform: none; } }
/* Eintritt "flug": Kicker, Überschrift und Knöpfe fliegen nacheinander von links ein, das Bild schiebt sich von unten nach */
.hero.ein-flug .hero-oben > * { opacity: 0; animation: flug .9s var(--ease-out) forwards; }
.hero.ein-flug .hero-oben .kicker { animation-delay: .35s; }
.hero.ein-flug .hero-oben h1 { animation-delay: .55s; }
.hero.ein-flug .hero-oben .knopfreihe { animation-delay: 1s; }
.hero.ein-flug .hero-oben h1 .w { opacity: 1; transform: none; animation: none; }
.hero.ein-flug .hero-panorama img { animation: hoch 1.5s var(--ease-out) both; }
@keyframes flug { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes hoch { from { opacity: .4; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .hero.vollbild.text-oben .hero-panorama { height: 100svh; }
  .hero.vollbild.text-oben .hero-panorama::before { background: linear-gradient(180deg, rgba(242, 245, 246, .94) 0%, rgba(242, 245, 246, .8) 46%, rgba(242, 245, 246, 0) 66%); -webkit-mask-image: none; mask-image: none; }
  .hero.vollbild.text-oben .hero-oben h1 { font-size: clamp(32px, 9.2vw, 38px); }
  .hero.vollbild.text-oben .hero-oben .knopfreihe { width: 100%; }
  .hero.vollbild.text-oben .hero-panorama img { object-position: 56% 100%; }
}
@media (max-width: 720px) {
  .hero.vollbild .hero-panorama { height: 72svh; }
  .hero.vollbild .hero-panorama img { object-position: 58% 70%; }
  .hero.vollbild .hero-panorama-text { display: none; }
  .hero.vollbild .hero-panorama::after { bottom: 24px; }
}
@media (max-width: 980px) {
  /* Schmal: wie Variante "frei", das Bild steht unter dem Text */
  .hero.hintergrund { padding-bottom: 24px; gap: clamp(18px, 3vh, 36px); }
  .hero.hintergrund .hero-raster { padding-bottom: 0; }
  .hero.hintergrund .hero-panorama { position: relative; height: auto; z-index: 1; pointer-events: auto; display: grid; gap: 10px; }
  .hero.hintergrund .hero-panorama picture { position: static; }
  .hero.hintergrund .hero-panorama img { height: auto; max-height: 46vh; aspect-ratio: 1536 / 720; object-position: center bottom; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, #000 0, #000 80%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent), linear-gradient(180deg, #000 0, #000 80%, transparent); mask-composite: intersect; }
  .hero.hintergrund .hero-panorama::before { display: none; }
  .hero.hintergrund .hero-panorama-text { position: static; padding-inline: var(--rand); }
}
/* Hero-Bild "glasrohr" (Linarb, 05.11.2026, Aufbau wie am Anfang): Text und Porträt oben, das Glasrohr steht unten im
   ersten Bildschirm über die ganze Breite, sauberes Wasser fließt hindurch. Das Foto wird nur so weit hochgezogen, dass
   seine leere Wand hinter dem Text liegt und das Rohr immer mit etwas Luft unter den Knöpfen beginnt.
   Rohroberkante im Foto bei 700 von 1536 Bildpunkten Breite = 45,57 % der Bildbreite. Ohne Skript, bei jeder Fenstergröße. */
.hero.rohr { display: flex; flex-direction: column; padding-bottom: 0; gap: 0; }
.hero.rohr .hero-raster { flex: none; }
.hero-rohr { --skala: 1; --luft: clamp(18px, 3.5vh, 40px); position: relative; z-index: -1; display: flow-root; margin-top: auto; pointer-events: none; }
.hero-rohr-bild { width: calc(100% * var(--skala)); margin-left: calc(50% - 50% * var(--skala)); margin-top: calc(-45.57% * var(--skala) + var(--luft)); animation: rohr-ein 1.3s var(--ease-out) .25s both; }
.rohr-bild { display: block; width: 100%; height: auto; aspect-ratio: 1536 / 880; }
@keyframes rohr-ein { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.rohr-blase { fill: rgba(255, 255, 255, .8); stroke: rgba(62, 142, 134, .45); stroke-width: 1; opacity: 0; animation: blase var(--dauer) linear var(--start) infinite; }
.rohr-glanz { animation: glanz 7s var(--ease-inout) -2s infinite; }
@keyframes blase { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .7; } 100% { transform: translateX(var(--weg)); opacity: 0; } }
@keyframes glanz { from { transform: translateX(0); } to { transform: translateX(1980px); } }
/* Hero außerhalb des Bildschirms: das Wasser ruht (main.js setzt .ruht) */
.hero.ruht .rohr-bild * { animation-play-state: paused; }
/* Schmal: Foto breiter als der Bildschirm (Mitte bleibt), damit das Rohr kräftig genug wirkt */
@media (max-width: 980px) { .hero-rohr { --skala: 1.4; } }
@media (max-width: 720px) { .hero-rohr { --skala: 2; --luft: 14px; } }

/* Anlass */
.zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pflichten { list-style: none; margin: 0; padding: 0; counter-reset: pf; display: grid; gap: 0; border-top: 1px solid var(--line); }
.pflichten li { counter-increment: pf; display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.pflichten li::before { content: "0" counter(pf); font-family: var(--f-mono); font-weight: 500; font-size: 13px; color: var(--accent-hover); padding-top: 3px; }
.pflichten b { display: block; font-weight: 600; }
.hinweis-zeile { border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; max-width: 58ch; }

/* Leistungen als Phasen einer Anlage: jede Phase ist ein Abzweig der Leitung */
.phasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 44px; }
.phase { position: relative; padding: 0 0 0 30px; display: grid; gap: 6px; align-content: start; }
.phase::before { content: ""; position: absolute; left: 0; top: 8px; bottom: -30px; width: 3px; background: var(--line-strong); }
.phase:nth-last-child(-n+3)::before { bottom: 0; }
.ph-punkt { position: absolute; left: -6px; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--canvas); border: 3px solid var(--accent); }
.phase.haupt .ph-punkt { background: var(--warn); border-color: #F1D9C6; }
.ph-name { font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hover); }
.phase.haupt .ph-name { color: #94531F; }
.phase h3 a { color: var(--ink); text-decoration: none; display: inline-block; padding-block: 12px; margin-block: -12px; /* Tippfläche 44px, Layout unverändert */ }
.phase h3 a::after { content: "→"; margin-left: .3em; color: var(--accent-hover); display: inline-block; transition: transform .3s var(--ease-out); }
.phase h3 a:hover { color: var(--accent-hover); }
.phase h3 a:hover::after { transform: translateX(4px); }
.ph-satz { color: var(--ink-soft); font-size: 15.5px; max-width: 34ch; }
.finder { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.finder span { color: var(--ink-soft); }
.weiter { font-weight: 500; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.weiter::after { content: "→"; transition: transform .3s var(--ease-out); }
.weiter:hover::after { transform: translateX(4px); }

/* Gebäude: Reiter je Gebäudeart, rechts die passende Tafel */
.geb-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.reiter { display: flex; flex-wrap: wrap; gap: 8px; }
.reiter button { font: 500 15px/1.2 var(--f-sans); color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 999px; min-height: 44px; padding: 8px 16px; cursor: pointer; white-space: nowrap; transition: background .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out); }
.reiter button:hover { border-color: var(--accent); }
.reiter button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #F6F9FB; }
.geb-panels { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 34px); }
.geb-panel { display: grid; gap: 16px; }
.js .geb-panel:not(.aktiv) { display: none; }
.js .geb-panel.aktiv { animation: tafel-ein .45s var(--ease-out); }
@keyframes tafel-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.geb-panel:focus-visible { outline-offset: 8px; border-radius: 8px; }
.geb-text { color: var(--ink-soft); max-width: 62ch; }
.geb-zwei { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 20px 28px; padding-top: 4px; }
.geb-zwei .mono { color: var(--ink-soft); font-size: 12px; margin-bottom: 10px; }
.geb-zwei .liste-haken { font-size: 15.5px; gap: 8px; }
.geb-leistungen { list-style: none; margin: 0; padding: 0; display: grid; }
.geb-leistungen a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-weight: 500; text-decoration: none; }
.geb-leistungen a::after { content: "→"; transition: transform .3s var(--ease-out); }
.geb-leistungen a:hover::after { transform: translateX(4px); }
.geb-praxis { font-size: 15px; color: var(--ink-soft); border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; max-width: 62ch; }
.geb-panel .knopf { justify-self: start; }

/* Prüfgang: Gebäudeschnitt als Skizze, ein Marker läuft von Station zu Station (components/Pruefgang.astro) */
:root { --kw: #2E8F5E; --ww: #C4463B; --zk: #7A4FB3; }
.pg-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.pg-buehne { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: clamp(14px, 2vw, 24px); display: grid; gap: 14px; }
/* Das Bild (1536x1024) liegt im SVG, die Stationen und der Marker in Bildpunkten darüber. Maße sind deshalb groß. */
.pg-svg { width: 100%; height: auto; display: block; max-height: 56vh; border-radius: 10px; overflow: hidden; }
.pg-svg .pg-stelle { cursor: pointer; }
.pg-svg .pg-stelle-ring { fill: none; stroke: var(--accent); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pg-svg .pg-stelle.aktiv .pg-stelle-ring { animation: puls 2.4s var(--ease-out) infinite; }
.pg-svg .pg-stelle-punkt { fill: rgba(250, 252, 252, .96); stroke: var(--line-strong); stroke-width: 5; transition: fill .4s var(--ease-out), stroke .4s var(--ease-out); filter: drop-shadow(0 4px 10px rgba(15, 42, 66, .22)); }
.pg-svg .pg-stelle.an .pg-stelle-punkt { fill: var(--accent); stroke: #FAFCFC; }
.pg-svg .pg-stelle.aktiv .pg-stelle-punkt { fill: var(--navy); stroke: #FAFCFC; }
.pg-svg .pg-stelle text { font-family: var(--f-mono); font-weight: 500; font-size: 24px; fill: var(--ink-soft); text-anchor: middle; pointer-events: none; transition: fill .4s var(--ease-out); }
.pg-svg .pg-stelle.an text { fill: #FFFFFE; }
.pg-svg .pg-marker { opacity: 0; transition: opacity .4s var(--ease-out); pointer-events: none; }
.pg-svg .pg-marker.sichtbar { opacity: 1; }
.pg-svg .pg-marker-punkt { fill: var(--warn); stroke: #FAFCFC; stroke-width: 5; filter: drop-shadow(0 4px 10px rgba(15, 42, 66, .3)); }
.pg-svg .pg-marker-puls { fill: none; stroke: var(--warn); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; animation: puls 2s var(--ease-out) infinite; }
@media (max-width: 720px) {
  /* Am Handy ist das Bild nur 340 px breit: Stationen und Marker größer, damit sie treffbar bleiben */
  .pg-svg .pg-stelle-punkt { r: 40; stroke-width: 7; }
  .pg-svg .pg-stelle-ring { r: 54; }
  .pg-svg .pg-stelle text { font-size: 40px; transform: translateY(6px); }
  .pg-svg .pg-marker-punkt { r: 26; }
  .pg-svg .pg-marker-puls { r: 44; }
  /* Beschriftungen wären hier nur 5 px groß: weglassen, Legende und Stationsliste erklären das Schema */
  .pg-svg .pg-beschr { display: none; }
}
.pg-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.pg-stand { color: var(--ink-soft); font-size: 12px; }
.pg-legende { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-soft); }
.pg-legende li { display: inline-flex; align-items: center; gap: 7px; }
.pg-legende svg { width: 30px; height: 8px; flex: none; overflow: visible; }
.pg-legende svg.pg-legende-flasche { width: 10px; height: 18px; }
/* Strangschema (Zeichenregeln wie im Sanitärplan): Kaltwasser durchgezogen, Warmwasser gestrichelt,
   Zirkulation strichpunktiert, Abzweige mit Punkt, Armaturen weiß gefüllt über der Leitung */
.pg-rohr { fill: none; stroke-width: 5; }
.pg-rohr.kw { stroke: var(--kw); }
.pg-rohr.ww { stroke: var(--ww); stroke-dasharray: 20 9; }
.pg-rohr.zk { stroke: var(--zk); stroke-dasharray: 20 7 4 7; }
.pg-punkt.kw { fill: var(--kw); } .pg-punkt.ww { fill: var(--ww); } .pg-punkt.zk { fill: var(--zk); }
.pg-hz { fill: none; stroke: #9AA8B1; stroke-width: 3; }
.pg-sym { fill: #FFFFFF; stroke: #2B4256; stroke-width: 2.5; stroke-linejoin: round; }
.pg-sym-linie { fill: none; stroke: #2B4256; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pg-gestrichelt { stroke-dasharray: 3 4; stroke-linecap: butt; }
.pg-gelaende { stroke: #A89A86; stroke-width: 3; }
.pg-flamme { fill: #E07A3A; }
.pg-flasche { fill: #EAF3F7; stroke: #2B4256; stroke-width: 2; }
.pg-deckel { fill: #2F6DB5; }
.pg-svg .pg-beschr { font-family: var(--f-mono); font-weight: 500; font-size: 22px; letter-spacing: .06em; fill: var(--ink-soft); }
.pg-svg .pg-titel { font-size: 18px; letter-spacing: .1em; }
.pg-svg .pg-temp { fill: var(--ww); }
.pg-svg .pg-ba { font-family: var(--f-mono); font-weight: 600; font-size: 17px; fill: #2B4256; }
.pg-seite { display: grid; gap: 18px; align-content: start; }
.pg-stellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pg-station { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; width: 100%; min-height: 44px; padding: 7px 10px; border-radius: 10px; cursor: pointer; transition: background .3s var(--ease-out); }
/* Ohne JavaScript: alle Texte lesbar, Knopf und Marker ohne Funktion bleiben weg */
html:not(.js) .pg-stellen .sub { display: block; }
html:not(.js) .pg-steuer .pg-knopf, html:not(.js) .pg-steuer .pg-stand, html:not(.js) .pg-marker { display: none; }
html:not(.js) .pg-fazit { opacity: 1; transform: none; }
.pg-station:hover { background: rgba(250, 252, 252, .9); }
.pg-station:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pg-stellen li.aktiv .pg-station { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.pg-stellen .nr { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--line-strong); display: grid; place-items: center; font-family: var(--f-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-soft); background: var(--panel); transition: background .4s var(--ease-out), border-color .4s, color .4s; }
.pg-stellen li.an .nr { background: var(--accent); border-color: var(--accent-muted); color: #FFFFFE; }
.pg-stellen li.aktiv .nr { background: var(--navy); border-color: #C9D8E6; }
.pg-text { display: grid; gap: 4px; padding-top: 4px; }
.pg-stellen b { display: block; color: var(--ink-soft); font-weight: 600; transition: color .4s var(--ease-out); }
.pg-stellen li.an b { color: var(--ink); }
.pg-stellen .sub { display: none; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.pg-stellen li.aktiv .sub { display: block; }
.pg-fazit { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); font-weight: 500; max-width: 52ch; border-left: 3px solid var(--accent); padding-left: 14px; }
[data-pruefgang].fertig .pg-fazit { opacity: 1; transform: none; }
[data-pruefgang].fertig .pg-knopf { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Ablauf */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; position: relative; }
.schritte::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 3px; background: var(--line-strong); }
.schritt { position: relative; padding: 0 28px 0 0; display: grid; gap: 12px; align-content: start; }
.schritt .nr { width: 48px; height: 48px; border-radius: 50%; background: var(--canvas); border: 3px solid var(--navy); display: grid; place-items: center; font-family: var(--f-mono); font-weight: 500; color: var(--navy); position: relative; z-index: 1; }
.schritt p { color: var(--ink-soft); font-size: 16px; }

/* Nachweise (dunkler Abschnitt) */
.nachweise { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.nachweise li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.nachweise .wann { font-family: var(--f-mono); font-size: 12.5px; color: #9FB4C1; letter-spacing: .04em; }
.nachweise a { font-size: 14.5px; }
.dvqst { display: flex; align-items: center; gap: 14px; }
.dvqst img { width: 72px; height: auto; background: #FAFCFC; border-radius: 8px; padding: 6px; }

/* Einsatzgebiet: Bayernkarte mit Regierungsbezirken (components/BayernKarte.astro), Kernregion kräftiger, Büro als Punkt */
.gebiet-raster { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.gebiet-gross { font-weight: 500; border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; max-width: 48ch; }
.bezirke { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bezirke a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 15px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-soft); font-size: 15px; font-weight: 500; text-decoration: none; transition: border-color .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out); }
.bezirke a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.bezirke a::after { content: "→"; margin-left: 2px; opacity: .55; transition: transform .25s var(--ease-out), opacity .25s var(--ease-out); }
.bezirke a:hover, .bezirke a:focus-visible { border-color: var(--accent); color: var(--ink); }
.bezirke a:hover::after, .bezirke a:focus-visible::after { opacity: 1; transform: translateX(3px); }
.bezirke .kern a { color: var(--ink); border-color: var(--accent); background: #E9F3F1; }
.bezirke .kern a::before { background: var(--accent); }
.kicker-link { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.bz-projekte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bz-projekte li { display: grid; gap: 2px; }
.bz-projekte span { font-weight: 400; color: var(--ink-soft); font-size: 15px; }
/* Link-Pillen (404-Seite) */
.pillen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pillen a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); text-decoration: none; color: var(--ink); font-weight: 500; transition: border-color .25s var(--ease-out), background .25s var(--ease-out); }
.pillen a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.pillen a:hover, .pillen a:focus-visible { border-color: var(--accent); background: #E9F3F1; color: var(--ink); }
.karte-figur { margin: 0; display: grid; gap: 8px; justify-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 2.4vw, 28px); }
.karte-bayern { width: 100%; height: auto; max-height: 64vh; overflow: visible; }
.karte-bayern .bezirk { fill: #E7EDF0; stroke: #FAFCFC; stroke-width: 2; stroke-linejoin: round; opacity: 0; transition: opacity .6s var(--ease-out), fill .3s var(--ease-out); }
.karte-bayern .bezirk.kern { fill: #CFE3E0; }
.karte-bayern.in .bezirk { opacity: 1; }
.karte-bayern.in .bezirk:nth-child(2) { transition-delay: .08s; } .karte-bayern.in .bezirk:nth-child(3) { transition-delay: .16s; }
.karte-bayern.in .bezirk:nth-child(4) { transition-delay: .24s; } .karte-bayern.in .bezirk:nth-child(5) { transition-delay: .32s; }
.karte-bayern.in .bezirk:nth-child(6) { transition-delay: .4s; } .karte-bayern.in .bezirk:nth-child(7) { transition-delay: .48s; }
.karte-bayern .bezirk-name { font-family: var(--f-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink-soft); text-anchor: middle; pointer-events: none; }
.karte-bayern .bezirk-name.kern { fill: #2A6660; }
.karte-bayern .buero { fill: var(--navy); stroke: var(--canvas); stroke-width: 4; }
.karte-bayern .buero-puls { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: puls 4.8s var(--ease-out) infinite; animation-delay: -2.4s; }
.karte-bayern .buero-name { font: 600 15px var(--f-sans); fill: var(--ink); }
.karte-bayern .buero-rolle { font: 500 11px var(--f-mono); fill: var(--ink-soft); letter-spacing: .06em; text-transform: uppercase; }
html:not(.js) .karte-bayern .bezirk { opacity: 1; }

/* Anfrage */
.anfrage-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.direkt { display: grid; gap: 14px; }
.direkt a { font-size: clamp(19px, 1.7vw, 22px); font-weight: 600; text-decoration: none; color: var(--ink); }
.direkt a:hover { color: var(--accent-hover); }
.direkt .mono { color: var(--ink-soft); }
.formular { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px; }
.formular fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.formular legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl label { position: relative; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl-hinweis { font-size: 14.5px; color: var(--ink-soft); margin: -2px 0 6px; max-width: 48ch; }
.wahl span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--canvas); font-size: 15px; cursor: pointer; transition: border-color .2s, background .2s; }
.wahl input:checked + span { border-color: var(--navy); background: #E4ECF3; font-weight: 500; }
.wahl input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 500; font-size: 15px; }
.feld input, .feld textarea { font: 400 16px/1.4 var(--f-sans); color: var(--ink); background: #FFFFFE; border: 1px solid #8FA5B3; border-radius: 8px; padding: 12px 14px; width: 100%; }
.feld textarea { min-height: 84px; resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: 3px solid var(--accent-muted); border-color: var(--accent); }
.haken { display: flex; gap: 10px; align-items: center; font-size: 15px; min-height: 44px; }
.haken input { width: 20px; height: 20px; accent-color: var(--navy); }
.schritt-anzeige { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.form-schritt[hidden] { display: none !important; }
.form-fehler { color: #9A3B1E; font-size: 14.5px; min-height: 1.4em; }
.form-ok { background: #E4F1EF; border: 1px solid var(--accent-muted); border-radius: 10px; padding: 16px; }

/* Unterseiten */
.seitenkopf h1 { max-width: 20ch; }
.liste-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.liste-haken li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.liste-haken li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; border-radius: 50%; border: 3px solid var(--accent); }
.fragen { display: grid; gap: 10px; }
.fragen details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0 18px; }
.fragen summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; font-weight: 600; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; font-family: var(--f-mono); font-size: 20px; color: var(--accent-hover); transition: transform .3s var(--ease-out); }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { padding-bottom: 16px; color: var(--ink-soft); max-width: 70ch; }
.rechtstext { max-width: 72ch; display: grid; gap: 14px; padding-block: calc(var(--kopf-h) + 48px) 72px; }
.rechtstext h1 { font-size: clamp(32px, 4vw, 44px); }
.rechtstext h2 { font-size: 21px; letter-spacing: 0; margin-top: 18px; }

/* Fuß */
.fuss { background: var(--navy-deep); color: #C3D4E2; padding-block: 48px 36px; position: relative; z-index: 1; }
.fuss-raster { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 28px 40px; }
.fuss h2 { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8FCBC3; margin-bottom: 10px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fuss a { color: #E6EEF3; text-decoration: none; }
.fuss a:hover { color: #8FCBC3; text-decoration: underline; }
.fuss .marke { color: #F3F7FA; margin-bottom: 12px; }
.fuss .marke-zusatz { color: #8FCBC3; }
.fuss-unten { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: #9FB4C1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 24px; }
.fuss-recht { display: grid; gap: 2px; }

/* Hinweis auf die Agentur, wie bei Capitals Club: Logo und Name in den Farben von Xhafa Webdesign (Bronze).
   Beim Überfahren Bronze-Rand, Lichtstreifen und Pfeil. */
.fuss .credit { --bronze: #b08858; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #F3F7FA; text-decoration: none; }
.fuss .credit:hover { color: #F3F7FA; text-decoration: none; }
.credit-logo { position: relative; display: block; width: 46px; height: 46px; flex: 0 0 46px; overflow: hidden; border-radius: 9px; box-shadow: 0 8px 22px rgba(0, 0, 0, .22), 0 0 0 1px rgba(205, 229, 247, .14); transition: box-shadow .32s ease, transform .42s var(--ease-out); }
.credit-logo img { display: block; width: 100%; height: 100%; }
.credit-logo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(236, 231, 223, .5) 50%, transparent 70%); transform: translateX(-120%); }
.credit-text { display: grid; line-height: 1.25; }
.credit-text small { color: rgba(222, 237, 248, .62); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; transition: color .32s ease; }
.credit-text span { font-size: 13.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.credit-pfeil { color: var(--bronze); opacity: .55; transition: opacity .32s ease, transform .42s var(--ease-out); }
.credit:hover .credit-logo, .credit:focus-visible .credit-logo { box-shadow: 0 10px 26px rgba(0, 0, 0, .3), 0 0 0 1px var(--bronze), 0 0 26px rgba(176, 136, 88, .38); }
.credit:hover .credit-text small, .credit:focus-visible .credit-text small { color: #d2ad80; }
.credit:hover .credit-pfeil, .credit:focus-visible .credit-pfeil { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .credit:hover .credit-logo, .credit:focus-visible .credit-logo { transform: translateY(-2px) rotate(-4deg); }
  .credit:hover .credit-logo::after, .credit:focus-visible .credit-logo::after { animation: credit-glanz .9s var(--ease-out) both; }
  .credit:hover .credit-pfeil, .credit:focus-visible .credit-pfeil { transform: translate(3px, -3px); }
}
@keyframes credit-glanz { to { transform: translateX(120%); } }

/* Schmale Bildschirme */
@media (max-width: 980px) {
  .nav { display: none; }
  .menue-knopf { display: inline-flex; }
  .kopf-innen { gap: 8px; padding-inline: 18px 7px; }
  .knopf.anruf-knopf { display: inline-flex; }
  .kopf.offen .nav { display: grid; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 16px 40px rgba(15, 42, 66, .14); padding: 6px 20px 16px; gap: 0; }
  .kopf.offen .nav a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .kopf.offen .nav a.knopf { margin-top: 12px; padding: 10px 20px; border-bottom: 2px solid var(--navy); }
  .kopf.dunkel.offen .nav { background: var(--navy-deep); border-color: rgba(255, 255, 255, .14); }
  .kopf.dunkel.offen .nav a { border-bottom-color: rgba(255, 255, 255, .14); }
  .kopf.dunkel.offen .nav a.knopf { border-bottom-color: #F3F7FA; }
  .hero-raster, .zwei, .pg-raster, .anfrage-raster, .geb-raster, .gebiet-raster { grid-template-columns: minmax(0, 1fr); }
  .hero-person { display: none; }
  .hero-avatar { display: flex; align-items: center; gap: 12px; }
  .hero-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid var(--accent-muted); }
  .phasen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
  .phase:nth-last-child(-n+3)::before { bottom: -22px; }
  .phase:nth-last-child(-n+2)::before { bottom: 0; }
  .karte-bayern { max-height: 44vh; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-panorama-text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  :root { --kopf-bar: 54px; --kopf-luft: 8px; --leitung-x: 10px; --rand: max(26px, env(safe-area-inset-left, 0px)); }
  .kopf { padding-inline: 8px; }
  .kopf-innen { padding-inline: 14px 6px; }
  body { font-size: 16px; }
  .marke-zusatz { display: none; }
  .marke-name { font-size: 17px; }
  .abschnitt { padding-block: calc(var(--kopf-h) + 34px) 32px; }
  .pruefpunkt { top: calc(var(--kopf-h) + 10px); }
  .pp-text { font-size: 10.5px; }
  .schritte { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .schritte::before { left: 23px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
  .schritt { grid-template-columns: 48px 1fr; padding: 0; column-gap: 14px; }
  .schritt .nr { grid-row: span 2; }
  .pflichten li { padding: 11px 0; grid-template-columns: 38px 1fr; }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); }
  .knopfreihe .knopf { flex: 1 1 auto; }
}
@media (max-height: 560px) and (min-width: 721px) { .pp-text { display: none; } }

/* Weniger Bewegung: alles sofort im Endzustand */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  body::before { animation: none; }
  [data-reveal] > *, .pruefpunkt .pp-text, .hero h1 .w, .hero-panorama img { opacity: 1 !important; transform: none !important; }
  .hero h1 .w.akzent::after { transform: none; }
  /* Glasrohr als stehendes Foto: keine Bläschen, kein Glanz, kein Hochkommen */
  .rohr-blase, .rohr-glanz { display: none; }
  .hero-rohr-bild { opacity: 1 !important; transform: none !important; }
  /* Prüfgang als stehendes Bild: alle Stationen nummeriert und an, Marker und Knöpfe weg, alle Texte lesbar */
  .pg-svg .pg-marker, .pg-steuer .pg-knopf, .pg-steuer .pg-stand, .pg-stelle-ring, .pg-marker-puls { display: none; }
  .pg-stellen .sub { display: block; }
  .pg-fazit { opacity: 1; transform: none; }
}

/* Korrekturen nach dem ersten Selbsttest (21.10.2026) */
html:not(.js) [data-reveal] > *, html:not(.js) .pruefpunkt .pp-text { opacity: 1; transform: none; }
.knopf.menue-knopf { display: none; }
.nav a.knopf, .nav a.knopf:hover { color: #F6F9FB; }
.marke { min-height: 44px; }
.knopf.klein-k { min-height: 44px; }
.nachweise a, .direkt a, .direkt-kurz a { display: inline-flex; align-items: center; min-height: 44px; }
.direkt-kurz { display: none; }
@media (max-height: 880px) and (min-width: 721px) {
  .abschnitt { padding-block: calc(var(--kopf-h) + 34px) 40px; }
}
@media (max-width: 980px) {
  .knopf.menue-knopf { display: inline-flex; }
  /* Schmal: Text oben, das Panorama darunter über die volle Breite */
  .hero { display: flex; flex-direction: column; }
  .hero-panorama { padding-inline: 0; margin-top: auto; }
  .hero-panorama img { max-height: 46vh; }
  .hero-panorama-text { padding-inline: var(--rand); }
  .pg-svg { max-height: none; }
  .pg-legende { margin-left: 0; }
}
@media (max-width: 720px) {
  h1 { font-size: clamp(34px, 10vw, 40px); }
  h2 { font-size: clamp(26px, 7.4vw, 32px); }
  .lead { font-size: 16px; }
  .abschnitt { padding-block: calc(var(--kopf-h) + 30px) 24px; }
  .stapel { gap: 16px; }
  .hero-fakten, .zusatz { display: none; }
  .pflichten li > span { font-size: 0; }
  .pflichten li b { font-size: 16px; }
  .phasen { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .phase { gap: 0; }
  .phase:nth-last-child(-n+3)::before { bottom: -10px; }
  .phase:last-child::before { bottom: 0; }
  .ph-satz, #leistungen .lead { display: none; }
  .phase h3 { font-size: 17px; }
  .finder span { display: none; }
  #gebaeude .lead, .geb-zwei, .geb-praxis { display: none; }
  .reiter { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--rand); margin-inline: calc(var(--rand) * -1); padding: 2px var(--rand) 6px; scrollbar-width: none; }
  .reiter::-webkit-scrollbar { display: none; }
  .reiter button { scroll-snap-align: start; flex: none; font-size: 14.5px; padding: 8px 14px; }
  .geb-panels { padding: 18px; border-radius: 16px; }
  .geb-panel { gap: 12px; }
  .geb-text { font-size: 15.5px; }
  .geb-panel .knopf { justify-self: stretch; }
  #einsatzgebiet .lead { display: none; }
  .karte-bayern { max-height: 36vh; }
  .karte-figur { padding: 12px; border-radius: 14px; }
  .bezirke a { padding: 4px 12px; font-size: 14px; gap: 7px; }
  .hero .lead { font-size: 15.5px; }
  #anfrage.abschnitt { padding-block: calc(var(--kopf-h) + 22px) 16px; }
  .projekte b { font-size: 15.5px; line-height: 1.35; }
  .pg-station { grid-template-columns: 32px 1fr; padding: 6px 8px; gap: 8px; }
  .pg-stellen .nr { width: 28px; height: 28px; font-size: 11px; }
  .pg-stellen b { font-size: 15.5px; }
  .pg-stellen .sub { font-size: 14.5px; }
  .pg-text { padding-top: 3px; }
  .hero-panorama-text { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 12.5px; gap: 6px 14px; }
  .hero-panorama-text b { font-size: 10.5px; }
  #anfrage .lead, #anfrage .direkt { display: none; }
  .direkt-kurz { display: block; }
  .wahl span { min-height: 44px; padding: 6px 12px; font-size: 14.5px; }
  .formular { padding: 18px; gap: 12px; }
  .formular legend { margin-bottom: 2px; }
  .nachweise li { padding: 8px 0; }
  .schritt p { font-size: 15px; }
}

/* Bausteine der Unterseiten */
.blick { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 6px 22px; display: grid; }
.blick > div { display: grid; grid-template-columns: minmax(110px, .4fr) 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.blick > div:last-child { border-bottom: 0; }
.blick dt { font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding-top: 3px; }
.blick dd { margin: 0; font-weight: 500; }
.zwei.oben { align-items: start; }
.karte { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 14px; align-content: start; }
.karte p { color: var(--ink-soft); }
.liste-haken.hell li::before { border-color: #8FCBC3; }
.abschnitt.dunkel .liste-haken li { color: #E6EEF3; }
.projekte { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.projekte li { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.projekte li > span:last-child { color: var(--ink-soft); font-size: 15.5px; }
.projekte .mono { color: var(--accent-hover); font-size: 12px; }
.marke-twh { justify-self: start; background: #E1EFED; padding: 2px 8px; border-radius: 4px; }
.zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 3px solid var(--line-strong); }
.zeitleiste li { position: relative; display: grid; grid-template-columns: minmax(130px, .22fr) 1fr; gap: 16px; padding: 12px 0 12px 26px; }
.zeitleiste li::before { content: ""; position: absolute; left: -10px; top: 18px; width: 17px; height: 17px; border-radius: 50%; background: var(--canvas); border: 3px solid var(--accent); }
.zeitleiste .mono { color: var(--accent-hover); padding-top: 2px; }
.portraet { margin: 0; max-width: 420px; justify-self: end; }
.portraet img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
@media (max-width: 980px) {
  .portraet { justify-self: start; max-width: 200px; }
}
@media (max-width: 720px) {
  .blick { padding: 2px 16px; }
  .blick > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  .zeitleiste li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0 8px 22px; }
  .zeitleiste li::before { top: 12px; }
  .karte .liste-haken { display: none; }
  .projekte li { padding: 10px 0; }
  .portraet { display: none; }
}

/* Korrekturen nach dem zweiten Selbsttest */
main > section:first-of-type [data-reveal] > * { opacity: 1; transform: none; transition: none; }
.marke-twh { color: #2A6660; }
.fuss li a, .blick dd a, .direkt a { display: inline-flex; align-items: center; min-height: 44px; }
.fuss ul { gap: 0; }
@media (max-height: 880px) and (min-width: 721px) { .pg-svg { max-height: 50vh; } }
@media (max-width: 720px) {
  .seitenkopf .blick { display: none; }
  #nachweise .lead, #nachweise .dvqst .klein { display: none; }
  #nachweise .nachweise b { font-size: 15px; }
  .ueber-seite .lead { display: none; }
  .zeitleiste li { font-size: 15px; }
  .projekte li > span:last-child { display: none; }
  .projekte li { padding: 8px 0; }
  .pflichten li { padding: 9px 0; }
  .pg-buehne { padding: 10px; gap: 10px; }
  .pg-legende { font-size: 12px; gap: 4px 12px; }
  .fragen summary { min-height: 52px; font-size: 15.5px; }
  .knopfreihe { gap: 10px; }
  .liste-haken { gap: 8px; font-size: 15.5px; }
}
@media (max-width: 720px) and (max-height: 700px) {
  h2 { font-size: 25px; }
  .kicker { font-size: 12px; }
  .abschnitt { padding-block: calc(var(--kopf-h) + 26px) 18px; }
  .stapel { gap: 12px; }
  .schritte { gap: 12px; }
  .schritt p { font-size: 14.5px; }
  .hinweis-zeile { font-size: 15px; }
}

/* Korrekturen nach dem dritten Selbsttest */
.projekte .marke-twh { color: #2A6660; }
.nachweise .kurz { display: none; }
@media (max-height: 820px) and (min-width: 721px) { .pg-svg { max-height: 46vh; } }
@media (max-width: 720px) {
  .nachweise .lang { display: none; }
  .nachweise .kurz { display: inline; }
}
@media (max-width: 720px) and (max-height: 700px) {
  #anfrage .kicker, #anfrage .schritt-anzeige { display: none; }
  .formular legend { font-size: 15px; }
  .wahl { gap: 6px; }
  .zeitleiste li { padding: 6px 0 6px 22px; font-size: 14.5px; }
}

/* Korrekturen nach dem vierten Selbsttest */
.fuss p a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 720px) {
  #nachweise .dvqst { display: none; }
  .zeitleiste li { display: block; }
  .zeitleiste li .mono { margin-right: 8px; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .abschnitt:not(.hero) .kicker { display: none; }
  .formular { padding: 14px; gap: 10px; }
  .formular legend { margin-bottom: 0; }
  .wahl span { padding: 6px 10px; }
}
.nachweise a { min-width: 44px; justify-content: center; }
@media (max-width: 720px) and (max-height: 700px) { #anfrage.abschnitt { padding-block: calc(var(--kopf-h) + 18px) 10px; } }

/* Ortsseiten: die Fakten zum Ort bleiben auch auf dem Handy sichtbar */
.ort-kopf h1 { font-size: clamp(34px, 3.5vw, 50px); }
.amt-adresse { font-weight: 400; color: var(--ink-soft); }
.blick-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.andere-orte a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 720px) {
  .ort-kopf .blick { display: grid; }
  .ort-kopf .blick .umland, .ort-kopf .blick .leistungen, .ort-kopf .amt-adresse, .ort-kopf .andere-orte { display: none; }
  .ort-kopf .lead { font-size: 15.5px; }
}
@media (max-width: 720px) and (max-height: 700px) {
  #nachweise .weiter { display: none; }
  .nachweise li { padding: 4px 0; }
  .seitenkopf .lead { font-size: 15px; }
  .seitenkopf .liste-haken { gap: 4px; font-size: 15px; }
  .projekte li { padding: 6px 0; }
}
@media (max-height: 860px) and (min-width: 721px) {
  .ueber-seite .projekte li > span:last-child { display: none; }
  .ueber-seite .projekte li { padding: 10px 0; }
}

/* Kleine Handys: das Panorama bleibt, aber flacher, der Text hat Vorrang */
@media (max-width: 720px) and (max-height: 700px) { .hero-panorama img { max-height: 34vh; } .hero-panorama-text { display: none; } }

/* Weniger Bewegung: Karte sofort fertig, kein Puls */
@media (prefers-reduced-motion: reduce) {
  .karte-bayern .bezirk { opacity: 1; }
  .karte-bayern .buero-puls { display: none; }
}

/* Heller Abschluss (Probe auf "Über mich"): weißer Grund mit feiner Linie oben, Knöpfe wie im Hero */
/* Heller Grund als halbdurchsichtige Ebene hinter der Leitung (z-index -1): das Rohr läuft durch, das Planraster bleibt sichtbar */
.abschluss-hell { border-top: 1px solid var(--line); }
.abschluss-hell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .3); }
.abschluss-hell .lead { max-width: 60ch; }

/* Über mich: Projekte in zwei Gruppen (Selbstständig, Als Bauleiter) */
.projekt-gruppen { gap: 28px; }
.projekt-gruppe { display: grid; gap: 10px; }
.projekt-gruppe h3 { color: var(--accent-hover); font-size: 12.5px; letter-spacing: .08em; }
@media (max-width: 720px) { .projekt-gruppen { gap: 18px; } }