/* Mirza Gebäudereinigung · Stil
   Farben aus dem Logo gemessen (Blau #039BD8/#0A66B4, Grün #37A743/#9AD14A),
   Tiefe aus dem alten Seitenstil (dunkles Blaugrau). Schriften lokal. */

@font-face { font-family: 'Manrope'; src: url(fonts/manrope-400_800-latin.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; src: url(fonts/manrope-400_800-latin-ext.woff2) format('woff2'); font-weight: 400 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; src: url(fonts/outfit-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(fonts/outfit-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url(fonts/outfit-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink: #071423;
  --navy: #0B2034;
  --navy2: #12304C;
  --blau: #0B8FD3;
  --blau-d: #0868A6;
  --cyan: #36C6F7;
  --gruen: #22994A;
  --gruen-h: #9AD14A;
  --hell: #F2F7FB;
  --hell2: #E4EEF6;
  --text: #11202F;
  --text2: #4A5B6E;
  --linie: #D7E3EE;
  --verlauf: linear-gradient(135deg, #1DB2F0 0%, #0A66B4 100%);
  --verlauf-gruen: linear-gradient(90deg, #36C6F7, #9AD14A);
  --radius: 20px;
  --schatten: 0 1px 2px rgba(7, 20, 35, .05), 0 18px 40px -20px rgba(7, 20, 35, .22);
  --kopf-h: 78px;
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-k: 'Outfit', 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .75, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html:not(.ruhe) { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65; color: var(--text); background: #fff; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--blau-d); }
h1, h2, h3 { font-family: var(--font-k); font-weight: 600; line-height: 1.15; margin: 0; color: inherit; }
p { margin: 0 0 1em; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1220px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.springe { position: fixed; left: 16px; top: -60px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 16px; border-radius: 10px; font-weight: 700; transition: top .2s; }
.springe:focus { top: 12px; }

/* ---------- Kopf ---------- */
.kopf { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--kopf-h); color: #fff; transition: background-color .35s, box-shadow .35s, height .35s var(--ease); }
.kopf.ist-gescrollt { background: rgba(7, 20, 35, .86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 10px 30px -18px rgba(0, 0, 0, .6); height: 66px; }
.kopf__innen { display: flex; align-items: center; gap: 20px; height: 100%; }
.logo { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; flex: none; }
/* Original-Logo des Kunden als Querformat (Marke + Schrift), 2x-Grafik */
.logo__bild { display: block; width: auto; height: 56px; transition: height .35s var(--ease), transform .5s var(--ease); }
.kopf.ist-gescrollt .logo__bild { height: 48px; }
.logo:hover .logo__bild { transform: scale(1.03); }
.logo--fuss .logo__bild { height: 64px; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { white-space: nowrap; position: relative; color: rgba(255, 255, 255, .8); text-decoration: none; padding: 10px 15px; border-radius: 999px; font-weight: 700; font-size: 15px; transition: color .2s, background-color .2s; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav a[aria-current] { color: #fff; }
.nav a[aria-current]::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--verlauf-gruen); }
.kopf__aktion { display: flex; align-items: center; gap: 14px; }
.kopf__cta { white-space: nowrap; }
.kopf__tel { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; }
.kopf__tel .ico { width: 20px; height: 20px; color: var(--cyan); }
/* WhatsApp direkt neben Anrufen (Kundenwunsch 14.10.2026) */
.kopf__wa { display: flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap; background: rgba(37, 211, 102, .14); box-shadow: inset 0 0 0 1.5px rgba(37, 211, 102, .55); transition: background-color .25s, box-shadow .25s; }
.kopf__wa:hover { background: rgba(37, 211, 102, .26); box-shadow: inset 0 0 0 1.5px #25D366; }
.kopf__wa .ico { width: 21px; height: 21px; color: #25D366; }
.knopf--wa { background: linear-gradient(135deg, #138A47, #0B6B52); box-shadow: 0 12px 26px -12px rgba(18, 140, 70, .8), inset 0 1px 0 rgba(255, 255, 255, .2); }
.knopf--wa:hover { box-shadow: 0 18px 34px -14px rgba(18, 140, 70, .9), inset 0 1px 0 rgba(255, 255, 255, .2); }
.knopf--wa:hover .ico, .kopf__wa:hover .ico { transform: none; }
.burger { display: none; position: relative; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); cursor: pointer; }
.burger span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: #fff; transition: transform .35s var(--ease), top .35s var(--ease); }
.burger span:first-child { top: 18px; }
.burger span:last-child { top: 26px; }
.burger[aria-expanded="true"] span:first-child { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 22px; transform: rotate(-45deg); }
.menue { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--kopf-h) + 24px) clamp(16px, 6vw, 40px) 36px; background: radial-gradient(600px 400px at 90% 0%, rgba(54, 198, 247, .2), transparent 70%), linear-gradient(180deg, #0B2034, #071423); color: #fff; overflow-y: auto; }
.menue[hidden] { display: none; }
.menue__nav { display: grid; gap: 4px; }
.menue__nav a { color: #fff; text-decoration: none; font-family: var(--font-k); font-weight: 600; font-size: clamp(32px, 9vw, 44px); padding: 6px 0; animation: menueRein .28s var(--ease) both; animation-delay: calc(var(--i) * .03s); }
.menue__nav a[aria-current] { color: var(--cyan); }
.menue__kontakt { display: grid; gap: 14px; margin-top: 32px; }
.menue__kontakt a { display: flex; gap: 12px; align-items: center; color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 700; }
.menue__kontakt .ico { color: var(--cyan); }
body.menue-offen { overflow: hidden; }
/* Menü offen (Handy): Seite darunter nicht mehr zeichnen, Unschärfe am Kopf aus. Die weichgezeichneten Glanz-Animationen und
   der Backdrop-Filter über dem Vollbild-Menü haben das Öffnen auf echten Handys spürbar gebremst (Bastian 16.10.2026). */
body.menue-offen main, body.menue-offen .fuss { visibility: hidden; }
body.menue-offen .kopf { -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; box-shadow: none; transition: none; }

/* ---------- Knöpfe ---------- */
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 999px; background: var(--verlauf); color: #fff; font-weight: 800; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; box-shadow: 0 12px 26px -12px rgba(11, 143, 211, .8), inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .3s var(--ease), box-shadow .3s; }
.knopf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.knopf:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(11, 143, 211, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.knopf:hover::before { transform: translateX(120%); }
.knopf .ico { width: 19px; height: 19px; transition: transform .3s var(--ease); }
.knopf:hover .ico { transform: translateX(3px); }
.knopf--gross { padding: 17px 30px; font-size: 17px; }
.knopf--klein { padding: 11px 19px; font-size: 15px; }
.knopf--geist { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.knopf--geist:hover { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
.knopf--rand { background: #fff; color: var(--blau-d); box-shadow: inset 0 0 0 1.5px var(--linie); }
.knopf--rand:hover { box-shadow: inset 0 0 0 1.5px var(--blau), 0 12px 24px -16px rgba(11, 143, 211, .6); }
.knopf--rand::before { background: linear-gradient(110deg, transparent 30%, rgba(54, 198, 247, .18) 50%, transparent 70%); }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--blau-d); text-decoration: none; }
.textlink .ico { transition: transform .3s var(--ease); }
.textlink:hover .ico { transform: translateX(4px); }

/* ---------- Typo-Bausteine ---------- */
.augenbraue { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--blau-d); }
.augenbraue .ico { width: 17px; height: 17px; }
.augenbraue--hell, .abschnitt--tief .augenbraue, .seitenkopf .augenbraue { color: var(--cyan); }
.abschnitt { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.abschnitt--hell { background: var(--hell); }
.abschnitt--tief { background: radial-gradient(900px 500px at 85% 0%, rgba(54, 198, 247, .13), transparent 70%), linear-gradient(180deg, #0B2034, #071423); color: #fff; }
.abschnitt__kopf { max-width: 740px; margin-bottom: clamp(36px, 5vw, 56px); }
.abschnitt__titel { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.015em; margin: 12px 0 16px; }
.abschnitt__lead { font-size: 18px; color: var(--text2); margin: 0; }
.abschnitt--tief .abschnitt__lead, .abschnitt--tief p { color: rgba(255, 255, 255, .74); }

/* ---------- Held (Startseite) ---------- */
.held { position: relative; display: flex; align-items: center; min-height: min(100svh, 940px); padding: calc(var(--kopf-h) + 40px) 0 150px; color: #fff; overflow: hidden; background: radial-gradient(1100px 620px at 78% 30%, #134774 0%, transparent 62%), linear-gradient(180deg, #071423 0%, #0B2034 100%); }
.held::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 72% 42%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 72% 42%, #000, transparent 75%); }
.held::after, .seitenkopf::after { content: ''; position: absolute; left: -5%; right: -5%; bottom: -1px; height: 90px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; }
.held__glanz, .seitenkopf__glanz { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.held__glanz i, .seitenkopf__glanz::before, .seitenkopf__glanz::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; animation: drift 18s ease-in-out infinite alternate; }
.held__glanz i:nth-child(1) { width: 440px; height: 440px; right: 6%; top: 8%; background: #1DA9EC; }
.held__glanz i:nth-child(2) { width: 300px; height: 300px; right: 30%; bottom: 10%; background: #22994A; opacity: .28; animation-duration: 22s; animation-delay: -6s; }
.held__glanz i:nth-child(3) { width: 260px; height: 260px; left: -4%; top: 20%; background: #0A66B4; opacity: .35; animation-duration: 26s; }
.held__raster { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
.held__titel { font-size: clamp(46px, 7.4vw, 96px); font-weight: 600; line-height: .98; letter-spacing: -.025em; margin: 20px 0 24px; }
.zeile { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.zeile > span { display: inline-block; transform: translateY(108%); animation: hoch 1.05s var(--ease) forwards; animation-delay: calc(.15s + var(--i) * .13s); }
.zeile--akzent > span { background: var(--verlauf-gruen); -webkit-background-clip: text; background-clip: text; color: transparent; }
.held__lead { max-width: 33em; font-size: clamp(17px, 1.6vw, 20px); color: rgba(255, 255, 255, .78); }
.held__auftritt { opacity: 0; transform: translateY(18px); animation: auf .9s var(--ease) forwards; animation-delay: calc(.25s + var(--i) * .12s); }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.held__erfahrung { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 8px 15px 8px 11px; border-radius: 999px; font-weight: 800; font-size: 15px; color: #D6F2B0; background: rgba(154, 209, 74, .12); box-shadow: inset 0 0 0 1px rgba(154, 209, 74, .42); }
.held__erfahrung .ico { width: 20px; height: 20px; color: var(--gruen-h); }
/* Original-Logo im Held, schwebend, mit Erfahrungs-Siegel */
.held__logo { position: relative; justify-self: end; width: 100%; max-width: 500px; opacity: 0; animation: auf 1.2s .4s var(--ease) forwards; }
.held__logo::before { content: ''; position: absolute; inset: 8% 6% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(54, 198, 247, .32), transparent); filter: blur(20px); }
.held__logo img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); animation: schweben 7s ease-in-out infinite; }
.held__siegel { position: absolute; top: 2%; right: -2%; display: grid; place-content: center; width: 124px; height: 124px; border-radius: 50%; text-align: center; font-weight: 800; font-size: 13px; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; color: #071423; background: var(--verlauf-gruen); box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .6), 0 0 0 6px rgba(255, 255, 255, .08); transform: rotate(-10deg); opacity: 0; animation: siegel .8s 1.2s var(--ease) forwards; }
@keyframes siegel { 0% { opacity: 0; transform: rotate(-10deg) scale(.3); } 60% { opacity: 1; transform: rotate(-10deg) scale(1.1); } 100% { opacity: 1; transform: rotate(-10deg); } }
.held__siegel b { display: block; font-family: var(--font-k); font-size: 40px; line-height: 1; letter-spacing: 0; }
.held__blase { position: absolute; bottom: 18%; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .9) 0 12%, rgba(54, 198, 247, .35) 13% 60%, rgba(54, 198, 247, .08) 61%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); opacity: 0; animation: blase 9s ease-in infinite; pointer-events: none; }
.held__blase:nth-of-type(1) { left: 8%; width: 26px; height: 26px; }
.held__blase:nth-of-type(2) { left: 30%; width: 16px; height: 16px; animation-delay: 3s; animation-duration: 11s; }
.held__blase:nth-of-type(3) { right: 12%; width: 20px; height: 20px; animation-delay: 6s; animation-duration: 10s; }
@keyframes blase { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; transform: translateY(-260px) scale(1.1); } }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.seitenkopf { position: relative; padding: calc(var(--kopf-h) + 72px) 0 130px; color: #fff; overflow: hidden; background: radial-gradient(900px 480px at 85% 10%, #134774 0%, transparent 65%), linear-gradient(180deg, #071423, #0B2034); }
.seitenkopf__glanz::before { width: 380px; height: 380px; right: 4%; top: -10%; background: #1DA9EC; }
.seitenkopf__glanz::after { width: 260px; height: 260px; right: 32%; bottom: -20%; background: #22994A; opacity: .25; animation-delay: -8s; }
.seitenkopf .wrap { position: relative; z-index: 1; }
.seitenkopf__titel { font-size: clamp(40px, 6.4vw, 78px); letter-spacing: -.02em; line-height: 1.02; margin: 14px 0 18px; max-width: 14em; hyphens: manual; }
.seitenkopf__lead { max-width: 40em; font-size: clamp(17px, 1.5vw, 19px); color: rgba(255, 255, 255, .76); margin: 0; }
.seitenkopf--404 { min-height: 80svh; display: flex; align-items: center; }

/* ---------- Werte ---------- */
.abschnitt--werte { padding-top: 0; margin-top: -120px; z-index: 2; }
.werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wert { padding: 30px 28px 26px; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }
.wert__ico, .ziel__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; color: var(--blau-d); background: linear-gradient(135deg, rgba(54, 198, 247, .18), rgba(154, 209, 74, .16)); }
.wert__ico .ico, .ziel__ico .ico { width: 27px; height: 27px; }
.wert h3 { font-size: 21px; margin: 18px 0 8px; }
.wert p { margin: 0; color: var(--text2); }

/* ---------- Leistungen (Startseite) ---------- */
.leistung-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.leistung { position: relative; display: block; padding: 28px 26px 26px; overflow: hidden; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.leistung::before { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(54, 198, 247, .16), transparent 45%); transition: opacity .3s; }
.leistung:hover { border-color: rgba(11, 143, 211, .35); box-shadow: 0 26px 50px -24px rgba(10, 102, 180, .45); }
.leistung:hover::before { opacity: 1; }
.leistung__ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 17px; color: #fff; background: var(--verlauf); box-shadow: 0 12px 22px -10px rgba(10, 102, 180, .6); }
.leistung__ico .ico { width: 29px; height: 29px; }
.leistung h3 { font-size: 21px; margin: 22px 0 6px; }
.leistung p { margin: 0; color: var(--text2); }
.leistung__pfeil { position: absolute; top: 26px; right: 22px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--blau-d); background: var(--hell); transition: transform .4s var(--ease), background-color .3s, color .3s; }
.leistung__pfeil .ico { width: 18px; height: 18px; }
.leistung:hover .leistung__pfeil { background: var(--blau); color: #fff; transform: rotate(-45deg); }

/* ---------- Vorher / Nachher ---------- */
.abschnitt__kopf--hell .abschnitt__lead { color: rgba(255, 255, 255, .74); }
.vn-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.vn { margin: 0; }
.vn__buehne { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: #0d2236; box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.vn__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vn__vorher { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vn__griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 22px rgba(54, 198, 247, .9); pointer-events: none; }
.vn__griff i { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .35); transition: transform .3s var(--ease); }
.vn__griff i::before, .vn__griff i::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border: solid var(--blau-d); }
.vn__griff i::before { left: 14px; border-width: 0 0 2.5px 2.5px; transform: rotate(45deg); }
.vn__griff i::after { right: 14px; border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); }
.vn__buehne.ist-aktiv .vn__griff i { transform: scale(1.12); }
.vn__buehne:has(.vn__regler:focus-visible) .vn__griff i { outline: 3px solid var(--cyan); outline-offset: 3px; }
.vn__regler { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.vn__marke { position: absolute; top: 14px; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; pointer-events: none; transition: opacity .3s; }
.vn__marke--vorher { left: 14px; background: rgba(7, 20, 35, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.vn__marke--nachher { right: 14px; background: linear-gradient(135deg, rgba(34, 153, 74, .92), rgba(11, 143, 211, .92)); }
.vn figcaption, .duo figcaption { display: grid; gap: 2px; margin-top: 16px; }
.vn figcaption b, .duo figcaption b { font-family: var(--font-k); font-weight: 600; font-size: 21px; }
.vn figcaption span, .duo figcaption span { color: rgba(255, 255, 255, .66); font-size: 16px; }
/* Paare ohne gleiche Kameraposition: nebeneinander statt Regler */
.duo-titel { margin: clamp(56px, 7vw, 88px) 0 24px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; color: #fff; }
.duo-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; align-items: start; }
.duo { margin: 0; }
.duo__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; overflow: hidden; border-radius: 18px; box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .06); }
.duo__bild { position: relative; aspect-ratio: 3 / 4; background: #0d2236; }
.duo__bild img { width: 100%; height: 100%; object-fit: cover; }
.duo .vn__marke { top: 12px; }
.duo .vn__marke--vorher { left: 12px; }
.duo .vn__marke--nachher { right: 12px; }
@media (max-width: 600px) { .duo .vn__marke { top: 8px; padding: 4px 8px; font-size: 10px; } .duo .vn__marke--vorher { left: 8px; } .duo .vn__marke--nachher { right: 8px; } }
/* Referenzen mit Videos */
.einsatz__fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: -12px 0 40px; padding: 0; list-style: none; }
.einsatz__fakten li { display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: #fff; border: 1px solid var(--linie); border-radius: 18px; }
.einsatz__fakten .ico { flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 14px; color: var(--blau-d); background: linear-gradient(135deg, rgba(54, 198, 247, .18), rgba(154, 209, 74, .16)); }
.einsatz__fakten b { display: block; font-family: var(--font-k); font-weight: 600; font-size: 18px; color: var(--text); }
.einsatz__fakten span { color: var(--text2); font-size: 15px; line-height: 1.4; }
.clips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; max-width: 1220px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 32px); }
.clip { margin: 0; min-width: 0; }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; background: var(--ink); box-shadow: var(--schatten); }
.clip figcaption { display: grid; gap: 2px; margin-top: 12px; }
.clip figcaption b { font-family: var(--font-k); font-weight: 600; font-size: 17px; line-height: 1.25; }
.clip figcaption span { color: var(--text2); font-size: 14.5px; }
/* Ansprechpartner (Über uns) */
.person { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.person__bild { max-width: 400px; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--schatten); }
.person__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.person__text > p:not(.augenbraue) { color: var(--text2); font-size: 18px; max-width: 34em; }
.person__text > .person__name { margin: -6px 0 14px; font-family: var(--font-k); font-weight: 600; font-size: 22px; color: var(--blau-d); }
.kontakt-karte__ico--wa { background: linear-gradient(135deg, #138A47, #0B6B52); }

/* ---------- Zielgruppen ---------- */
.ziel-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ziel { position: relative; display: block; padding: 32px 30px 28px; color: inherit; text-decoration: none; background: var(--hell); border-radius: var(--radius); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s; }
.ziel::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--verlauf); opacity: .08; transition: transform .6s var(--ease), opacity .4s; }
.ziel:hover { transform: translateY(-6px); background: #fff; box-shadow: var(--schatten), 0 0 0 1px var(--linie); }
.ziel:hover::after { transform: scale(1.6); opacity: .13; }
.ziel h3 { font-size: 24px; margin: 20px 0 8px; }
.ziel p { color: var(--text2); }
.ziel__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--blau-d); }
.ziel__link .ico { transition: transform .3s var(--ease); }
.ziel:hover .ziel__link .ico { transform: translateX(4px); }

/* ---------- Einblicke-Band ---------- */
.abschnitt--einblicke { background: var(--hell); overflow: hidden; }
.band { display: flex; gap: 20px; padding-inline: clamp(16px, 4vw, 32px); will-change: transform; transform: translate3d(var(--x, 0px), 0, 0); }
.band__bild { position: relative; flex: 0 0 clamp(250px, 25vw, 340px); margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--hell2); box-shadow: var(--schatten); }
.band__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.band__bild:hover img { transform: scale(1.06); }
.band__bild figcaption, .galerie__bild figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(transparent, rgba(7, 20, 35, .82)); }

/* ---------- Sonderreinigung ---------- */
.sonder__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.sonder__bild { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--schatten); }
.sonder__bild img { width: 100%; height: 100%; object-fit: cover; }
.sonder__text p { color: var(--text2); font-size: 18px; }
.sonder-band .sonder__text p { color: rgba(255, 255, 255, .74); }
.sonder__text .knopf { margin-top: 10px; }

/* ---------- Kontakt-Band ---------- */
.kontakt-band { background: linear-gradient(180deg, #fff, var(--hell)); }
.kontakt-band__raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.kontakt-band__text > p { color: var(--text2); font-size: 18px; max-width: 34em; }
.kontakt-band__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.kontakt-karte { list-style: none; margin: 0; padding: 10px 26px; background: #fff; border: 1px solid var(--linie); border-radius: 24px; box-shadow: var(--schatten); }
.kontakt-karte li { display: flex; gap: 16px; align-items: center; padding: 16px 0; }
.kontakt-karte li + li { border-top: 1px solid var(--linie); }
.kontakt-karte small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.kontakt-karte li > span:last-child { font-weight: 700; overflow-wrap: anywhere; }
.kontakt-karte a { color: var(--text); text-decoration: none; }
.kontakt-karte a:hover { color: var(--blau-d); }
.kontakt-karte__ico { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: var(--verlauf); }

/* ---------- Leistungen-Seite ---------- */
.leistung-liste { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap: 22px; }
.leistung-gross { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--linie); border-radius: 24px; transition: box-shadow .45s var(--ease), transform .45s var(--ease); scroll-margin-top: calc(var(--kopf-h) + 20px); }
.leistung-gross:hover { box-shadow: var(--schatten); transform: translateY(-4px); }
.leistung-gross:target { box-shadow: 0 0 0 3px var(--cyan), var(--schatten); }
.leistung-gross__bild { aspect-ratio: 16 / 10; overflow: hidden; }
.leistung-gross__bild img { width: 100%; height: 100%; object-fit: cover; }
.leistung-gross__text { position: relative; padding: 30px 30px 32px; flex: 1; }
.leistung-gross__nr { position: absolute; top: 20px; right: 26px; font-family: var(--font-k); font-weight: 700; font-size: 52px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--linie); }
.leistung-gross h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 22px 0 6px; }
.leistung-gross__kurz { font-weight: 800; color: var(--blau-d); }
.leistung-gross__text p:not(.leistung-gross__kurz) { color: var(--text2); }
.leistung-gross--breit { grid-column: 1 / -1; display: grid; grid-template-columns: 1.05fr 1fr; }
.leistung-gross--breit .leistung-gross__bild { position: relative; aspect-ratio: auto; min-height: 380px; }
.leistung-gross--breit .leistung-gross__bild img { position: absolute; inset: 0; }
.leistung-gross--breit .leistung-gross__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 4vw, 54px); }
/* ---------- Über uns ---------- */
.ueber__raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.ueber__bild { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--schatten); }
.ueber__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ueber__text p { color: var(--text2); font-size: 18px; }
.ueber__text .ueber__einstieg { font-family: var(--font-k); font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; color: var(--text); }
.ueber__gruss { font-family: var(--font-k); font-size: 20px !important; color: var(--text) !important; margin-top: 28px; }
.ueber__gruss span { font-family: var(--font); font-size: 16px; color: var(--blau-d); font-weight: 700; }
/* Ohne Foto (vorübergehend, daten.mjs UEBER_FOTOS): Text als eine mittige Spalte */
.ueber__raster--solo, .person--solo { grid-template-columns: minmax(0, 52rem); justify-content: center; }
.galerie { columns: 3 240px; column-gap: 18px; }
.galerie__bild { position: relative; margin: 0 0 18px; overflow: hidden; border-radius: var(--radius); break-inside: avoid; background: var(--hell2); }
.galerie__bild img { width: 100%; }

/* ---------- Angebotsrechner ---------- */
.abschnitt--rechner { background: var(--hell); padding-top: 56px; }
.rechner__raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.rechner { min-width: 0; padding: clamp(22px, 4vw, 46px); background: #fff; border: 1px solid var(--linie); border-radius: 28px; box-shadow: var(--schatten); }
.rechner__balken { height: 6px; overflow: hidden; border-radius: 6px; background: var(--hell2); }
.rechner__balken i { display: block; height: 100%; width: var(--p, 20%); border-radius: 6px; background: var(--verlauf-gruen); transition: width .6s var(--ease); }
.rechner__stufen { display: flex; justify-content: space-between; gap: 6px; margin: 14px 0 32px; padding: 0; list-style: none; font-size: 13px; font-weight: 800; color: var(--text2); }
.rechner__stufen li { display: flex; align-items: center; gap: 7px; }
.rechner__stufen span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hell2); font-size: 12px; transition: background .3s, color .3s; }
.rechner__stufen li.ist-aktiv { color: var(--blau-d); }
.rechner__stufen li.ist-aktiv span, .rechner__stufen li.ist-fertig span { background: var(--verlauf); color: #fff; }
.schritt { min-width: 0; margin: 0; padding: 0; border: 0; }
.schritt.ist-neu { animation: schrittEin .55s var(--ease); }
.schritt legend { padding: 0; font-family: var(--font-k); font-weight: 600; font-size: clamp(25px, 3vw, 34px); line-height: 1.15; }
.schritt__hinweis { margin: 8px 0 0; color: var(--text2); }
.wahl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 24px; }
.kunde-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.wahl { position: relative; display: block; cursor: pointer; }
.wahl input, .pille input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wahl__karte { position: relative; display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 18px 16px; background: #fff; border: 1.5px solid var(--linie); border-radius: 18px; transition: border-color .25s, box-shadow .25s, transform .25s var(--ease), background-color .25s; }
.wahl:hover .wahl__karte { border-color: rgba(11, 143, 211, .45); transform: translateY(-2px); }
.wahl__ico { width: 30px; height: 30px; margin-bottom: 8px; color: var(--blau-d); }
.wahl__karte b { font-size: 16px; line-height: 1.3; padding-right: 26px; }
.wahl__karte small { color: var(--text2); font-size: 14px; line-height: 1.45; }
.wahl__haken { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--linie); color: #fff; transition: background .25s, border-color .25s, transform .3s var(--ease); }
.wahl__haken .ico { width: 24px; height: 24px; opacity: 0; transition: opacity .2s; }
.wahl input:checked + .wahl__karte { border-color: var(--blau); background: linear-gradient(180deg, #F1F9FF, #fff); box-shadow: 0 0 0 4px rgba(11, 143, 211, .13); }
.wahl input:checked + .wahl__karte .wahl__haken { background: var(--verlauf); border-color: transparent; transform: scale(1.08); }
.wahl input:checked + .wahl__karte .wahl__haken .ico { opacity: 1; }
.wahl input:checked + .wahl__karte .wahl__haken .ico circle { stroke: none; }
.wahl input:focus-visible + .wahl__karte, .pille input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.feldgruppe { margin-top: 28px; }
.feldgruppe__titel { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.pille { position: relative; }
.pille span { display: inline-block; padding: 10px 17px; border: 1.5px solid var(--linie); border-radius: 999px; font-weight: 700; font-size: 15px; cursor: pointer; background: #fff; transition: background .2s, color .2s, border-color .2s; }
.pille:hover span { border-color: var(--blau); }
.pille input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.flaeche { display: flex; align-items: center; gap: 18px; transition: opacity .3s; }
.flaeche.ist-aus { opacity: .45; }
.flaeche__regler { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.flaeche__regler::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--blau) var(--fill, 7%), var(--hell2) var(--fill, 7%)); }
.flaeche__regler::-moz-range-track { height: 6px; border-radius: 6px; background: var(--hell2); }
.flaeche__regler::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--blau); }
.flaeche__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; border: 3px solid var(--blau); box-shadow: 0 4px 12px rgba(10, 102, 180, .35); }
.flaeche__regler::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--blau); box-shadow: 0 4px 12px rgba(10, 102, 180, .35); }
.flaeche__wert { min-width: 108px; text-align: right; font-family: var(--font-k); font-weight: 600; font-size: 28px; color: var(--blau-d); }
.haken-feld { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 15px; cursor: pointer; }
.haken-feld input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blau); }
.haken-feld--pflicht { margin-top: 22px; padding: 14px 16px; border-radius: 14px; background: var(--hell); }
.haken-feld--pflicht.ist-fehler { box-shadow: inset 0 0 0 1.5px #C62828; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.feld--breit { grid-column: 1 / -1; }
.feld--falle { display: none !important; }
.feld label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.feld input, .feld textarea { width: 100%; padding: 13px 15px; font: inherit; font-size: 16px; color: var(--text); background: #fff; border: 1.5px solid var(--linie); border-radius: 13px; transition: border-color .2s, box-shadow .2s; }
.feld textarea { resize: vertical; min-height: 110px; }
.feld input:focus, .feld textarea:focus { outline: none; border-color: var(--blau); box-shadow: 0 0 0 4px rgba(11, 143, 211, .15); }
.feld.ist-fehler input { border-color: #C62828; }
.feld__fehler { display: block; margin-top: 5px; font-size: 14px; font-weight: 700; color: #B3261E; }
.feld-fehler { margin: 16px 0 0; font-weight: 700; color: #B3261E; }
.rechner__nav { display: flex; gap: 12px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--linie); }
.rechner__nav [data-weiter] { margin-left: auto; }
.rechner__nav[hidden] { display: none; }
.rechner__text { max-height: 380px; margin: 20px 0; padding: 18px 20px; overflow: auto; white-space: pre-wrap; font-family: var(--font); font-size: 15px; line-height: 1.6; background: var(--hell); border: 1px solid var(--linie); border-radius: 16px; }
.senden { display: flex; flex-wrap: wrap; gap: 12px; }
.senden__info { margin: 16px 0 0; padding: 13px 16px; border-radius: 13px; font-weight: 700; color: #14532D; background: #E6F6EA; }
.senden__info.ist-fehler { color: #7A1C17; background: #FCE8E6; }
.rechner__fertig { padding: 36px 8px 12px; text-align: center; }
.rechner__fertig:focus { outline: none; }
.rechner__fertig-ico { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; color: #fff; background: var(--verlauf); animation: pop .7s var(--ease); }
.rechner__fertig-ico .ico { width: 46px; height: 46px; }
.rechner__fertig-ico .ico circle { stroke: none; }
.rechner__fertig h2 { font-size: 34px; margin: 20px 0 8px; }
.rechner__fertig p { color: var(--text2); }
.uebersicht { position: sticky; top: calc(var(--kopf-h) + 18px); }
.uebersicht__karte { padding: 26px; color: #fff; border-radius: 26px; background: radial-gradient(400px 260px at 100% 0%, rgba(54, 198, 247, .2), transparent 70%), linear-gradient(180deg, #0B2034, #071423); box-shadow: 0 30px 60px -30px rgba(7, 20, 35, .7); }
.uebersicht__kopf { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.uebersicht__kopf b { display: block; font-family: var(--font-k); font-size: 21px; font-weight: 600; }
.uebersicht__kopf small { color: rgba(255, 255, 255, .62); font-size: 14px; }
.ring { width: 56px; height: 56px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 4; }
.ring .ring__wert { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 * (1 - var(--p, 0))); transition: stroke-dashoffset .6s var(--ease); }
.uebersicht__liste { margin: 0; }
.uebersicht__liste > div { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.uebersicht__liste dt { color: rgba(255, 255, 255, .6); font-size: 14px; }
.uebersicht__liste dd { margin: 0; text-align: right; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.uebersicht__liste dd.ist-offen { color: rgba(255, 255, 255, .34); font-weight: 600; }
.uebersicht__liste dd.ist-neu { animation: blink .8s var(--ease); }
.uebersicht__fuss { display: flex; gap: 8px; align-items: center; margin: 16px 0 0; font-size: 14px; font-weight: 700; color: var(--gruen-h); }

/* ---------- Recht ---------- */
.recht { max-width: 800px; }
.recht h2 { font-size: 24px; margin: 44px 0 12px; }
.recht h2:first-child { margin-top: 0; }
.recht h3 { font-size: 19px; margin: 26px 0 8px; }
.recht p, .recht li { color: var(--text2); }
.recht ul { padding-left: 1.2em; }
.recht li { margin-bottom: 8px; }
.recht a { overflow-wrap: anywhere; }
.luecke { padding: 1px 5px; border-radius: 5px; color: #5A4500; background: #FFE58A; font-weight: 700; }
.recht-kasten { padding: 16px 18px; border-left: 4px solid var(--blau); border-radius: 10px; background: var(--hell); }
.recht-stand { margin-top: 40px; font-size: 14px; }

/* ---------- Fuß ---------- */
.fuss { position: relative; padding: 84px 0 28px; overflow: hidden; color: rgba(255, 255, 255, .72); background: radial-gradient(700px 400px at 95% 0%, rgba(54, 198, 247, .14), transparent 70%), var(--ink); }
.fuss__welle { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), var(--gruen-h), transparent); opacity: .6; }
.fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.35fr; gap: 40px; }
.fuss__marke p { max-width: 24em; margin-top: 22px; }
.fuss__gruss { font-family: var(--font-k); font-size: 19px; color: #fff; }
.fuss__titel { margin: 6px 0 16px; font-family: var(--font); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.fuss__liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fuss__liste a { color: rgba(255, 255, 255, .72); text-decoration: none; transition: color .2s; }
.fuss__liste a:hover { color: #fff; }
.fuss__kontakt li, .fuss__kontakt a { display: flex; gap: 10px; align-items: flex-start; overflow-wrap: anywhere; }
.fuss__kontakt .ico { margin-top: 3px; color: var(--cyan); }
.sozial { display: flex; gap: 10px; margin-top: 20px; }
.sozial a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .07); transition: background .3s, transform .3s var(--ease); }
.sozial a:hover { background: var(--verlauf); transform: translateY(-3px); }
.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 60px; padding-top: 22px; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, .09); }
.fuss__unten nav { display: flex; gap: 20px; }
.fuss__unten a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.fuss__unten a:hover { color: #fff; }
.signatur { opacity: .8; }
.ruhe-knopf { margin-left: auto; padding: 8px 15px; font-size: 13px; color: rgba(255, 255, 255, .75); background: none; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; cursor: pointer; }
.ruhe-knopf:hover { color: #fff; border-color: rgba(255, 255, 255, .45); }

/* ---------- Scroll-Animationen ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--ease), transform .85s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js [data-reveal].ist-sichtbar { opacity: 1; transform: none; }
/* Hover-Bewegungen müssen gegen das Einblenden gewinnen */
.js .leistung[data-reveal].ist-sichtbar { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.js .ziel.ist-sichtbar:hover { transform: translateY(-6px); }
.js .leistung-gross.ist-sichtbar:hover { transform: translateY(-4px); }
.wisch { position: relative; }
.js .wisch img { clip-path: inset(0 100% 0 0); transform: scale(1.14); transition: clip-path 1.2s var(--ease), transform 1.8s var(--ease); }
.js .wisch.ist-sichtbar img { clip-path: inset(0 0 0 0); transform: scale(1); }
.wisch::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-14deg); }
.js .wisch.ist-sichtbar::after { animation: glanz 1.4s .55s var(--ease) forwards; }

@keyframes hoch { to { transform: none; } }
@keyframes auf { to { opacity: 1; transform: none; } }
@keyframes menueRein { from { transform: translateY(12px); } }
@keyframes schweben { 50% { transform: translateY(-14px) rotate(-1.5deg); } }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-60px, 40px) scale(1.15); } }
@keyframes glanz { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
@keyframes schrittEin { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes blink { from { color: var(--cyan); transform: translateX(-4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}
html.ruhe *, html.ruhe *::before, html.ruhe *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }

/* ---------- Responsiv ---------- */
@media (max-width: 1400px) {
  .kopf__tel span { display: none; }
}
@media (max-width: 1140px) {
  .kopf__wa span { display: none; }
  .kopf__wa { padding: 0; width: 42px; height: 42px; justify-content: center; }
  .clips { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; }
  .clips::-webkit-scrollbar { display: none; }
  .clip { flex: 0 0 clamp(200px, 30vw, 260px); scroll-snap-align: start; }
  .leistung-raster { grid-template-columns: repeat(2, 1fr); }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  :root { --kopf-h: 70px; }
  .nav, .kopf__cta { display: none; }
  .burger { display: block; }
  .kopf__aktion { margin-left: auto; gap: 8px; }
  .kopf__tel { width: 46px; height: 46px; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .08); }
  .kopf__wa { width: 46px; height: 46px; }
  .einsatz__fakten { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .person__bild { max-width: 340px; }
  .held { min-height: 0; padding: calc(var(--kopf-h) + 34px) 0 120px; }
  .held__raster { grid-template-columns: 1fr; gap: 0; }
  .held__logo { justify-self: center; max-width: 360px; margin-top: 40px; }
  .held__siegel { width: 100px; height: 100px; font-size: 11px; right: -4%; }
  .held__siegel b { font-size: 32px; }
  .werte, .vn-raster, .ziel-raster, .kunde-raster { grid-template-columns: 1fr; }
  .vn-raster { max-width: 520px; margin-inline: auto; gap: 40px; }
  .sonder__raster, .ueber__raster, .kontakt-band__raster, .rechner__raster { grid-template-columns: 1fr; }
  .sonder-band .sonder__bild { order: -1; }
  .leistung-liste { grid-template-columns: 1fr; }
  .leistung-gross--breit { display: flex; }
  .leistung-gross--breit .leistung-gross__bild { min-height: 0; aspect-ratio: 16 / 10; }
  .uebersicht { position: static; }
  .band { overflow-x: auto; transform: none !important; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; }
  .band::-webkit-scrollbar { display: none; }
  .band__bild { flex-basis: 72vw; max-width: 320px; scroll-snap-align: center; }
  .abschnitt--werte { margin-top: -90px; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .logo__bild, .kopf.ist-gescrollt .logo__bild { height: 40px; }
  .logo--fuss .logo__bild { height: 56px; }
  .kopf__aktion { gap: 6px; }
  .duo-raster { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .clip { flex-basis: 64vw; }
  .leistung-raster { grid-template-columns: 1fr; gap: 10px; }
  .leistung { display: grid; grid-template-columns: 50px 1fr; column-gap: 16px; align-items: center; padding: 16px 52px 16px 16px; }
  .leistung__ico { grid-row: span 2; width: 50px; height: 50px; border-radius: 15px; }
  .leistung__ico .ico { width: 25px; height: 25px; }
  .leistung h3 { margin: 0; font-size: 18px; }
  .leistung p { font-size: 15px; line-height: 1.45; }
  .leistung__pfeil { top: 50%; right: 14px; margin-top: -17px; width: 34px; height: 34px; }
  .wert { padding: 24px 22px 20px; }
  .held__knoepfe .knopf { width: 100%; }
  .felder { grid-template-columns: 1fr; }
  .wahl-raster { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  .wahl-raster .wahl__karte { flex-direction: row; align-items: center; gap: 12px; padding: 13px 48px 13px 14px; }
  .wahl-raster .wahl__ico { width: 26px; height: 26px; margin: 0; }
  .wahl-raster .wahl__karte small { display: none; }
  .wahl-raster .wahl__haken { top: 50%; margin-top: -12px; }
  .galerie { columns: 2 140px; column-gap: 12px; }
  .galerie__bild { margin-bottom: 12px; }
  .galerie__bild figcaption { padding: 28px 12px 10px; font-size: 13px; }
  .fuss__raster { grid-template-columns: 1fr; gap: 32px; }
  .ruhe-knopf { margin-left: 0; }
  .rechner__stufen li { font-size: 0; gap: 0; }
  .rechner__stufen li.ist-aktiv { font-size: 13px; gap: 7px; }
  .rechner__nav .knopf { flex: 1; }
  .senden .knopf { width: 100%; }
  .flaeche__wert { min-width: 92px; font-size: 24px; }
  .leistung-gross__text { padding: 26px 22px 28px; }
  .leistung-gross__nr { font-size: 42px; }
}