/* Auto Galerie Trier: Design nach der Aufbereitungs-LP (kfz-aufbereitung/), aber alle Ecken eckig wie das Logo.
   Abschnitte: .s1 weiß, .s2 hellgrau, .dunkel dunkel. Farben über Variablen, damit Bausteine hell und dunkel funktionieren. */
@font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-700.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700.woff2) format('woff2')}

:root{--r1:#E5261B;--r2:#B3120F;--r3:#8E0B0A;--rot-hell:#ff4b3e;--dark:#0d0d0e;--dark2:#161618;--dark3:#202024;--gold:#f5b301;
  --ink:#2a2a2d;--head:#0d0d0e;--muted:#64646b;--line:#e4e4e7;--karte:#fff;--flaeche:#f4f4f5;--feld:#fff;--feldrand:#d4d4d8}
.dunkel,.hero,.seitenkopf,.leiste,.abschluss,footer,.kopf,.mobil-leiste{--ink:#d6d6da;--head:#fff;--muted:#a1a1aa;--line:rgba(255,255,255,.1);--karte:var(--dark2);--flaeche:rgba(255,255,255,.04);--feld:#0f0f10;--feldrand:rgba(255,255,255,.16)}
.startkarte,.dlg,.kontakt-karte{--ink:#2a2a2d;--head:#0d0d0e;--muted:#64646b;--line:#e4e4e7;--karte:#fff;--flaeche:#f4f4f5;--feld:#fff;--feldrand:#d4d4d8}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.6;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit}
.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 16px}
@media(min-width:760px){.wrap{padding:0 32px}}
h1,h2,h3{font-family:Barlow,Arial,sans-serif;text-transform:uppercase;letter-spacing:.3px;line-height:1.06;color:var(--head);font-weight:700}
h1 b,h2 b,h3 b{color:var(--r1);font-weight:700}
.dunkel h1 b,.dunkel h2 b,.hero h1 b,.seitenkopf h1 b,.abschluss h2 b{color:var(--rot-hell)}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(36px,5.2vw,64px)}
h2{font-size:clamp(30px,4vw,48px)}
h3{font-size:20px;letter-spacing:.2px}
.intro{color:var(--muted);font-size:17px;margin-top:14px;max-width:620px}
section{padding:72px 0}
@media(min-width:760px){section{padding:104px 0}}
.s1{background:#fff}
.s2{background:#f4f4f5;--karte:#fff}
.dunkel{background:var(--dark);color:var(--ink)}
.mitte{text-align:center}.mitte .intro{margin-inline:auto}
svg.i{width:20px;height:20px;flex:none}

/* Buttons wie die LP (roter Verlauf), aber eckig */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--r1),var(--r2));color:#fff;text-decoration:none;font-weight:700;font-size:16px;line-height:1.25;padding:15px 26px;border:0;border-radius:0;cursor:pointer;box-shadow:0 10px 26px rgba(229,38,27,.3);transition:transform .2s,box-shadow .2s,background .2s;text-align:center}
.btn:hover{background:linear-gradient(135deg,var(--r2),var(--r3));transform:translateY(-2px);box-shadow:0 14px 30px rgba(229,38,27,.42)}
.btn.gross{font-size:18px;padding:18px 30px}
.btn svg{width:20px;height:20px}
.btn.rahmen{background:transparent;box-shadow:none;color:var(--head);border:1.5px solid var(--head)}
.btn.rahmen:hover{background:var(--head);color:var(--karte);transform:none}
.dunkel .btn.rahmen,.hero .btn.rahmen,.seitenkopf .btn.rahmen,.abschluss .btn.rahmen,.kopf .btn.rahmen{color:#fff;border-color:rgba(255,255,255,.5)}
.dunkel .btn.rahmen:hover,.hero .btn.rahmen:hover,.seitenkopf .btn.rahmen:hover,.abschluss .btn.rahmen:hover,.kopf .btn.rahmen:hover{background:#fff;color:var(--dark)}
.btn.wa{background:#1f9d55;box-shadow:none}
.btn.wa:hover{background:#17844a}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.mitte .knopfreihe,.mitte.knopfreihe{justify-content:center}
@media(max-width:480px){.btn.gross{width:100%;font-size:17px}}

/* Kopf (wie LP: dunkel, Logo links, Telefon + CTA rechts), dazu Navigation */
.topbar{display:none}
.kopf{position:sticky;top:0;z-index:50;background:rgba(13,13,14,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.07);color:#fff}
.kopf .wrap{display:flex;align-items:center;gap:26px;height:76px}
.logo img{height:50px;width:auto}
.nav{display:flex;gap:24px;align-items:center;margin-right:auto}
.nav a{text-decoration:none;font-family:Barlow,sans-serif;font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.6px;color:#d6d6da}
.nav a:hover,.nav a.aktiv,.nav .unter.aktiv>a{color:#fff}
.nav a.aktiv,.nav .unter.aktiv>a{box-shadow:inset 0 -2px 0 var(--r1)}
.kopf .tel-kopf{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.kopf .tel-kopf svg{width:18px;height:18px;color:var(--rot-hell)}
.kopf .btn{padding:12px 18px;font-size:15px;box-shadow:none;white-space:nowrap}
.menue-knopf{display:none;background:none;border:1px solid rgba(255,255,255,.2);color:#fff;width:46px;height:44px;cursor:pointer;font-size:18px}
.nav .unter{position:relative}
.nav .unter>a::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 3px 8px}
.unter-menue{position:absolute;top:100%;left:-18px;min-width:260px;background:var(--dark);border:1px solid rgba(255,255,255,.08);padding:8px 0;display:none;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.unter-menue a{display:block;padding:10px 18px;text-transform:none;font-family:Inter,sans-serif;font-weight:500;letter-spacing:0;font-size:15px;box-shadow:none!important}
.unter-menue a:hover,.unter-menue a.aktiv{background:var(--dark2);color:#fff}
/* Mega-Menü Dienstleistungen (05.11.2026) */
.unter-menue .mega-h,.unter-menue a small,.unter-menue .mega-kachel{display:none}
.unter-menue a small{font-size:13px;font-weight:400;color:#8f8f97;margin-top:2px}
@media(min-width:1101px){
  .kopf .wrap{position:relative}
  .nav .unter{position:static}
  .unter-menue.mega{left:20px;right:20px;top:100%;min-width:0;padding:30px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:12px 32px;border-top:2px solid var(--r1);animation:megaAuf .22s ease-out}
  .nav .unter:hover .unter-menue.mega,.nav .unter:focus-within .unter-menue.mega{display:grid}
  .unter-menue .mega-h{display:block;font-family:Barlow,sans-serif;font-weight:600;font-size:17px;text-transform:uppercase;letter-spacing:.6px;color:#fff;padding:0 14px 10px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08)}
  .unter-menue.mega .mega-sp a{padding:10px 14px}
  .unter-menue a small{display:block}
  .unter-menue .mega-kachel{display:block;position:relative;grid-row:1/3;grid-column:3;overflow:hidden;padding:0!important;min-height:220px}
  .mega-kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
  .mega-kachel:hover img{transform:scale(1.05)}
  .mega-kachel span{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(transparent,rgba(7,7,8,.92));font-size:13.5px;color:#d6d6da;line-height:1.4}
  .mega-kachel b{display:block;font-family:Barlow,sans-serif;font-size:21px;text-transform:uppercase;letter-spacing:.4px;color:#fff;margin-bottom:2px}
  .unter-menue a.mega-alle{grid-column:1/3;align-self:end;color:var(--rot-hell);font-weight:600}
  .unter-menue a.mega-alle::after{content:" →"}
}
@keyframes megaAuf{from{transform:translateY(-6px)}to{transform:none}}
@media(max-width:1100px){.unter-menue a.mega-alle{order:-1}.unter-menue.mega{display:none}.nav .unter.auf .unter-menue.mega{display:flex;flex-direction:column}.mega-sp{display:contents}}
@media(prefers-reduced-motion:reduce){.unter-menue.mega{animation:none}}
@media(min-width:1101px){.nav .unter:hover .unter-menue,.nav .unter:focus-within .unter-menue{display:block}.nav .unter{padding:28px 0;margin:-28px 0}}
@media(max-width:1100px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--dark);flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid rgba(255,255,255,.08);max-height:calc(100dvh - 70px);overflow:auto}
  .nav.auf{display:flex}.nav a{padding:15px 20px;border-top:1px solid rgba(255,255,255,.06);box-shadow:none!important}
  .nav .unter>a{display:block}.unter-menue{position:static;display:none;border:0;box-shadow:none;background:var(--dark2);padding:0}.nav .unter.auf .unter-menue{display:block}.unter-menue a{padding-left:36px}
  .menue-knopf{display:block;margin-left:auto}.kopf .wrap{gap:14px}
}
@media(max-width:759px){.kopf .wrap{height:66px}.logo img{height:40px}.kopf .tel-kopf span{display:none}.kopf .tel-kopf{width:44px;height:44px;justify-content:center;border:1px solid rgba(255,255,255,.2)}.kopf .btn{display:none}}

/* Hero Startseite (dunkel, Foto, roter Schein wie LP) */
.hero{position:relative;padding:48px 0 72px;background:var(--dark);color:var(--ink);overflow:hidden}
@media(min-width:1000px){.hero{padding:72px 0 104px}}
.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;filter:grayscale(.3)}
.hero::after,.seitenkopf::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(229,38,27,.18),transparent 55%),linear-gradient(90deg,rgba(13,13,14,.85),rgba(13,13,14,.35)),linear-gradient(180deg,rgba(13,13,14,.1),var(--dark) 96%)}
.hero .wrap,.seitenkopf.mit-karte .wrap{position:relative;z-index:2;display:grid;gap:40px;align-items:center}
@media(min-width:1000px){.hero .wrap,.seitenkopf.mit-karte .wrap{grid-template-columns:1.02fr 1fr;gap:56px}}
.hero p.lead,.seitenkopf p.lead{font-size:18px;color:#c4c4ca;margin-top:20px;max-width:580px}
.pfad{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:#a9a9b0;margin-bottom:18px;list-style:none}
.pfad a{text-decoration:none;color:#d6d6da}.pfad a:hover{color:#fff}
.pfad li+li::before{content:"/";margin-right:8px;color:#5a5a60}
.seitenkopf{position:relative;padding:56px 0 72px;background:var(--dark);color:var(--ink);overflow:hidden}
.seitenkopf>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:grayscale(.3)}
.seitenkopf .wrap{position:relative;z-index:2}
@media(min-width:1000px){.seitenkopf{padding:72px 0 96px}}
/* Ken Burns */
.hero picture img,.seitenkopf>img{animation:kenburns 24s ease-in-out infinite alternate;transform-origin:60% 45%;will-change:transform}
.seitenkopf>img{transform-origin:35% 55%}
@keyframes kenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.16) translate(-2.5%,-1.5%)}}
/* Handy: Karte direkt unter Überschrift und Einleitung */
@media(max-width:999px){.hero .wrap,.seitenkopf.mit-karte .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0}.hero-text{display:contents}.pfad{order:0}.hero h1,.seitenkopf h1{order:1}.hero p.lead,.seitenkopf p.lead{order:2;margin-bottom:24px;font-size:16px}.startkarte{order:3}}

/* Startkarte im Hero: weiße, eckige Karte */
.startkarte{background:#fff;color:var(--ink);padding:26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.reiter{display:grid;grid-template-columns:1fr 1fr;margin:-26px -26px 22px;background:#f4f4f5}
.reiter button{background:none;border:0;color:#71717a;padding:16px 10px;font-family:Barlow,sans-serif;font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;border-bottom:3px solid transparent}
.reiter button.an{color:var(--dark);background:#fff;border-bottom-color:var(--r1)}
.startkarte h2{font-size:28px;margin-bottom:4px}
.startkarte .unter{font-size:14px;color:var(--muted);margin-bottom:18px}
.startkarte .btn{width:100%;margin-top:6px}
.klein{font-size:13px;color:var(--muted);margin-top:12px;display:flex;gap:8px;align-items:center;justify-content:center;text-align:center}
.klein svg{width:15px;height:15px;color:#16a34a;flex:none}
.oder{display:flex;align-items:center;gap:12px;margin:16px 0 12px;font-size:12px;color:#a1a1aa;text-transform:uppercase;letter-spacing:1px}
.oder::before,.oder::after{content:"";flex:1;height:1px;background:var(--line)}
.wa-link{display:flex;align-items:center;justify-content:center;gap:9px;color:#15803d;text-decoration:none;font-weight:600;font-size:15px}
.wa-link svg{width:19px;height:19px}
.startkarte a.wa-link[href*="bestand"]{color:var(--dark)!important}

/* Formularfelder (hell, eckig) */
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.feld label,.frage{font-size:14px;font-weight:600;color:var(--head)}
.feld label small,.frage small{font-weight:400;color:var(--muted)}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{width:100%;background:var(--feld);border:1.5px solid var(--feldrand);color:var(--head);font:inherit;font-size:16px;padding:12px 14px;border-radius:0;outline:none;transition:border-color .2s}
input:focus,select:focus,textarea:focus{border-color:var(--r1)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;padding:10px 14px;border:1.5px solid var(--feldrand);background:var(--feld);color:var(--ink);font-size:14px;cursor:pointer;transition:all .15s;user-select:none}
.chip span:hover{border-color:var(--head)}
.chip input:checked+span{border-color:var(--r1);background:var(--r1);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--r1);outline-offset:2px}
.chips.gross .chip span{padding:14px 16px;font-size:15px}
.block{margin-bottom:18px}
.block .frage{display:block;margin-bottom:9px}

/* Leiste unter dem Hero (wie LP: rote Symbole, Großbuchstaben) */
.leiste{padding:28px 0;background:var(--dark2);border-top:1px solid rgba(255,255,255,.06);color:var(--ink)}
.leiste ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px}
.leiste li{display:flex;gap:12px;align-items:center;font-size:14px;line-height:1.35;color:#a1a1aa}
.leiste li b{display:block;font-family:Barlow,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:#fff;font-size:17px}
.leiste .ikon{width:auto;height:auto;border:0;background:none;color:var(--r1)}
.leiste .ikon svg{width:28px;height:28px}
@media(max-width:600px){.leiste ul{flex-direction:column;align-items:flex-start;gap:16px}}

/* Symbole in Karten */
.ikon{display:inline-grid;place-items:center;flex:none;color:var(--r1);align-self:flex-start}
.ikon svg{width:30px;height:30px}

/* Kopfzeile von Abschnitten */
.kopfzeile{display:grid;gap:18px;align-items:end;margin-bottom:44px}
@media(min-width:900px){.kopfzeile{grid-template-columns:1.3fr 1fr}}
.kopfzeile .intro{margin-top:0}

/* Karten (eckig) */
.karten3{display:grid;gap:16px;margin-top:44px}
@media(min-width:800px){.karten3{grid-template-columns:repeat(3,1fr)}}
.karten3.zwei-k{grid-template-columns:1fr}
@media(min-width:800px){.karten3.zwei-k{grid-template-columns:1fr 1fr}}
.karte-weg{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--karte);border:1.5px solid var(--line);padding:28px 24px 24px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s;text-align:left;font:inherit}
a.karte-weg:hover,button.karte-weg:hover{border-color:var(--r1);transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(0,0,0,.25)}
.karte-weg h3{font-size:24px}
.karte-weg p{font-size:15px;color:var(--muted)}
.karte-weg .mehr{margin-top:auto;padding-top:6px;font-weight:700;font-size:15px;color:var(--r1)}
.leist-gitter{display:grid;gap:12px;margin-top:44px}
@media(min-width:640px){.leist-gitter{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.leist-gitter{grid-template-columns:repeat(5,1fr)}}
.leist{display:flex;flex-direction:column;gap:10px;background:var(--karte);border:1.5px solid var(--line);padding:22px 20px;text-decoration:none;color:var(--ink);transition:border-color .2s}
a.leist:hover{border-color:var(--r1)}
.leist h3{font-size:20px}
.leist p{font-size:14.5px;color:var(--muted)}
.leist .mehr{margin-top:auto;font-weight:700;font-size:14px;color:var(--r1)}

/* Schritte (wie LP: drei Spalten mittig, eckige Ziffernfelder) */
.schritte{display:grid;gap:30px;counter-reset:n}
@media(min-width:860px){.schritte{grid-template-columns:repeat(3,1fr);gap:24px}}
.schritt-k{text-align:center;padding:0 10px}
.schritt-k::before{counter-increment:n;content:counter(n);display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border:1.5px solid var(--line);font-family:Barlow,sans-serif;font-weight:700;font-size:22px;color:var(--head)}
.schritt-k h3{margin-bottom:8px}
.schritt-k p{font-size:15px;color:var(--muted);max-width:340px;margin:0 auto}

/* Zwei Spalten, Text, Listen (wie LP v-liste) */
.zwei-spalten{display:grid;gap:44px;align-items:center}
@media(min-width:1000px){.zwei-spalten{grid-template-columns:1fr 1fr;gap:64px}}
.zwei-spalten.oben{align-items:start}
.zwei-spalten img.bild{width:100%;aspect-ratio:4/3;object-fit:cover}
.text p{margin-top:14px;color:var(--muted)}
.text h2+p{margin-top:20px}
.zwei-spalten h3{font-size:22px}
.vorteile{list-style:none;display:grid;margin-top:18px}
.vorteile li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line);color:var(--ink);font-size:16px}
.vorteile li:last-child{border-bottom:1px solid var(--line)}
.vorteile li svg{width:22px;height:22px;color:var(--r1);flex:none;margin-top:1px}
.kauf-gitter{display:grid;gap:28px;margin-top:48px;align-items:stretch}
@media(min-width:1000px){.kauf-gitter{grid-template-columns:1fr 1fr;gap:48px}}
.kauf-liste{list-style:none;display:grid}
.kauf-liste li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.kauf-liste li:last-child{border-bottom:1px solid var(--line)}
.kauf-liste li b{display:block;font-family:Barlow,sans-serif;font-size:19px;text-transform:uppercase;color:var(--head);margin-bottom:2px}
.kauf-liste li span{font-size:15px;color:var(--muted)}
.such-box{background:var(--dark);--ink:#d6d6da;--head:#fff;--muted:#a1a1aa;color:var(--ink);padding:34px;display:flex;flex-direction:column;justify-content:center}
.such-box h3{font-size:30px;color:#fff}
.such-box h3 b{color:var(--rot-hell)}
.such-box p{color:#a1a1aa;margin:14px 0 18px}
.such-box ol{list-style:none;display:grid;gap:10px;margin-bottom:26px;counter-reset:s}
.such-box ol li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:#d6d6da}
.such-box ol li::before{counter-increment:s;content:counter(s);width:26px;height:26px;flex:none;background:var(--r1);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.such-box .btn{align-self:flex-start}
@media(max-width:600px){.such-box{padding:26px 20px}.such-box .btn{align-self:stretch}}

/* Vergleich + WhatsApp-Kasten */
.vergleich{display:grid;gap:30px;align-items:center}
@media(min-width:1000px){.vergleich{grid-template-columns:.85fr 1.15fr;gap:56px}}
.vergleich table{width:100%;border-collapse:collapse;font-size:15px;background:#fff;border:1.5px solid var(--line)}
.vergleich th,.vergleich td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.vergleich thead th{font-family:Barlow,sans-serif;font-size:16px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);font-weight:700;background:#fafafa}
.vergleich thead th:last-child{background:var(--dark);color:#fff}
.vergleich td:first-child{color:var(--head);font-weight:600;width:24%}
.vergleich td:nth-child(2){color:var(--muted)}
.vergleich td:last-child{color:var(--head);font-weight:500}
.vergleich .x{color:#a1a1aa;margin-right:6px}.vergleich .ok{color:var(--r1);font-weight:700;margin-right:6px}
@media(max-width:560px){.vergleich table{font-size:13px}.vergleich th,.vergleich td{padding:10px 8px}}
.wa-box{margin-top:48px;display:flex;align-items:center;gap:20px 26px;justify-content:space-between;flex-wrap:wrap;background:#fff;border:1.5px solid var(--line);padding:26px 28px}
.wa-box h3{font-size:24px}
.wa-box p{color:var(--muted);font-size:15px;margin-top:4px}

/* Bewertungen (wie LP: helle Karten) */
.filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:28px 0 30px}
.filter button{background:#fff;border:1.5px solid var(--line);color:var(--ink);padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
.filter button.an{background:var(--dark);color:#fff;border-color:var(--dark)}
.rev-gitter{columns:3 300px;column-gap:16px}
.rev{break-inside:avoid;background:var(--flaeche);border:0;padding:20px;margin-bottom:16px;color:var(--ink)}
.s2 .rev{background:#fff}
.rev.weg{display:none}
.rev-kopf{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rev-kopf .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;flex:none}
.rev-kopf b{display:block;font-size:15px;line-height:1.2;color:var(--head)}
.rev-kopf small{font-size:12px;color:var(--muted)}
.rev-kopf .g{margin-left:auto;width:20px;height:20px}
.sterne{color:var(--gold);letter-spacing:2px;font-size:15px}
.rev .sterne{display:block;margin-bottom:6px}
.rev p{font-size:15px;line-height:1.55}
.rev .tag{display:none}
.rev-hinweis{text-align:center;font-size:13px;color:var(--muted);margin-top:8px}
.mehr-link{display:inline-block;margin-top:10px;color:var(--r1);font-weight:700}

/* Galerie */
.galerie{position:relative}
.reihe{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:#555 transparent}
.reihe figure{scroll-snap-align:start;overflow:hidden;background:#111;aspect-ratio:4/3}
.reihe img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.reihe figure:hover img{transform:scale(1.04)}
@media(min-width:900px){.reihe{grid-auto-columns:calc((100% - 42px)/4)}}
.pfeil{position:absolute;top:calc(50% - 30px);width:46px;height:46px;border:0;background:#fff;color:#111;display:grid;place-items:center;cursor:pointer;z-index:3;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.pfeil.l{left:-12px}.pfeil.r{right:-12px}
@media(max-width:700px){.pfeil{display:none}}
.galerie-unter{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:var(--muted)}
.galerie-unter a{color:var(--head);font-weight:700}

/* Über uns */
.ueber{display:grid;gap:44px;align-items:center}
@media(min-width:1000px){.ueber{grid-template-columns:.9fr 1.1fr;gap:64px}}
.ueber-bild img.foto{width:100%;aspect-ratio:4/5;object-fit:cover}
@media(max-width:999px){.ueber-bild{max-width:460px}.ueber-bild img.foto{aspect-ratio:1/1;object-position:50% 40%}}
.ueber p{margin-top:16px;color:var(--muted)}
.ueber h2+p{margin-top:20px}
.ueber blockquote{margin-top:24px;font-family:Barlow,sans-serif;font-size:24px;line-height:1.25;color:var(--head);font-weight:600}
.unterschrift{width:220px;margin-top:22px;filter:invert(1)}
.dunkel .unterschrift{filter:none}
.fakten{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.fakten div{border:1.5px solid var(--line);padding:14px 10px;text-align:center}
.fakten b{display:block;font-family:Barlow,sans-serif;font-size:32px;color:var(--head);line-height:1}
.fakten span{font-size:13px;color:var(--muted);line-height:1.35;display:block;margin-top:6px}

/* FAQ (wie LP) */
.faq-gitter{display:grid;gap:12px;margin-top:40px;align-items:start}
@media(min-width:900px){.faq-gitter{grid-template-columns:1fr 1fr}}
details{background:var(--karte);border:1.5px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:17px 54px 17px 20px;font-weight:600;color:var(--head);position:relative;font-size:15.5px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:grid;place-items:center;background:var(--flaeche);font-size:18px;color:var(--head)}
details[open] summary::after{content:"−";background:var(--r1);color:#fff}
details p{padding:0 20px 18px;color:var(--muted);font-size:15px}
details p a{color:var(--r1)}

/* Abschluss (wie LP-Finale: dunkel mit Autofoto) */
.abschluss{position:relative;padding:104px 0;text-align:center;overflow:hidden;background:var(--dark);color:var(--ink)}
.abschluss img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.abschluss::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(229,38,27,.2),transparent 60%),linear-gradient(180deg,rgba(13,13,14,.4),rgba(13,13,14,.9))}
.abschluss .wrap{position:relative;z-index:2}
.abschluss p{color:#c4c4ca;max-width:640px;margin:16px auto 0;font-size:17px}
.abschluss .knopfreihe{justify-content:center}

/* Kontakt */
.kontakt-gitter{display:grid;gap:24px}
@media(min-width:1000px){.kontakt-gitter{grid-template-columns:1fr 1fr}}
.kontakt-karte{background:#fff;border:1.5px solid #e4e4e7;padding:30px;color:var(--ink)}
.s2 .kontakt-karte{border-color:#fff}
.kontakt-karte ul{list-style:none;display:grid;gap:0}
.kontakt-karte li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.kontakt-karte li:first-child{border-top:0;padding-top:0}
.kontakt-karte li a{text-decoration:none;color:var(--head);font-weight:700;font-size:17px}
.kontakt-karte li span{display:block;font-size:14px;color:var(--muted);font-weight:400}
.kontakt-karte .ikon svg{width:26px;height:26px}
.karte-link{display:block;margin-top:18px;position:relative;overflow:hidden}
.karte-link img{width:100%;height:180px;object-fit:cover;filter:brightness(.55)}
.karte-link b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:Barlow,sans-serif;font-size:18px;letter-spacing:.5px;text-transform:uppercase}
.kontakt-karte h3{font-size:26px;margin-bottom:4px}
.kontakt-karte .unter{color:var(--muted);font-size:15px;margin-bottom:18px}
@media(max-width:600px){.kontakt-karte{padding:22px 18px}}
.ds{font-size:12.5px;color:var(--muted);margin-top:14px}
.ds a{color:inherit}
.fehler{display:none;color:#dc2626;font-size:14px;margin-top:10px}
.fehler.an{display:block}
.feld.falsch input,.feld.falsch select,.feld.falsch textarea,.block.falsch .chips{outline:2px solid #ef4444;outline-offset:2px}
.hinweis-box{border:1.5px solid var(--line);background:#fff;padding:20px 22px;margin-top:22px;color:var(--ink);font-size:15.5px}
.hinweis-box b{color:var(--head)}
.recht{max-width:760px}
.recht h2{font-size:26px;margin:34px 0 10px}
.recht h2:first-child{margin-top:0}
.recht p{color:var(--ink);margin-top:8px}

/* Fuß */
footer{background:#070708;padding:56px 0 110px;font-size:14px;color:#a1a1aa}
footer .wrap{display:grid;gap:30px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}footer li{overflow-wrap:anywhere}
@media(min-width:900px){footer .wrap{grid-template-columns:1.2fr 1fr 1fr 1fr}}
footer h4{color:#fff;font-family:Barlow,sans-serif;text-transform:uppercase;font-size:17px;letter-spacing:.6px;margin-bottom:12px;font-weight:600}
footer ul{list-style:none;display:grid;gap:8px}
footer a{text-decoration:none}footer a:hover{color:#fff}
footer .logo img{height:auto;width:170px;margin-bottom:16px}
.fuss-sozial{margin-top:12px;font-size:13px}
.unterzeile{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);padding-top:20px;font-size:12.5px;color:#71717a}
@media(min-width:1101px){footer{padding-bottom:56px}}

/* Mobile Leiste + WhatsApp */
.mobil-leiste{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr 1.5fr;background:var(--dark);border-top:1px solid rgba(255,255,255,.1);padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:8px;transform:translateY(110%);transition:transform .3s}
.mobil-leiste.zeigen{transform:none}
.mobil-leiste a,.mobil-leiste button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:700;text-decoration:none;color:#fff;background:var(--dark3);border:0;padding:8px 4px;cursor:pointer}
.mobil-leiste svg{width:20px;height:20px}
.mobil-leiste .wa{background:#1f9d55}
.mobil-leiste .haupt{background:linear-gradient(135deg,var(--r1),var(--r2));flex-direction:row;gap:8px;font-size:14px}
@media(max-width:1100px){.mobil-leiste{display:grid}}
.wa-schwebe{position:fixed;right:22px;bottom:22px;z-index:55;width:56px;height:56px;background:#1f9d55;display:grid;place-items:center;color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.wa-schwebe svg{width:30px;height:30px}
@media(max-width:1100px){.wa-schwebe{display:none}}

/* Dialog (hell, eckig) */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(13,13,14,.78);backdrop-filter:blur(4px)}
.modal.auf{display:flex}
.dlg{width:min(640px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;color:var(--ink);position:relative;display:flex;flex-direction:column;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.dlg-kopf{padding:20px 24px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:2}
.dlg-kopf .titel{font-family:Barlow,sans-serif;font-size:18px;letter-spacing:.4px;text-transform:uppercase;color:var(--head);display:flex;justify-content:space-between;gap:10px;padding-right:36px}
.dlg-kopf .titel span{color:var(--muted);font-weight:600}
.balken{height:4px;background:#f4f4f5;margin-top:12px;overflow:hidden}
.balken i{display:block;height:100%;width:0;background:var(--r1);transition:width .35s}
.zu{position:absolute;right:12px;top:10px;width:40px;height:40px;border:0;background:none;color:#71717a;font-size:30px;cursor:pointer;line-height:1;z-index:3}
.zu:hover{color:var(--dark)}
.dlg form{display:none;padding:22px 24px 24px}
.dlg form.an{display:block}
.schritt{display:none}
.schritt.an{display:block;animation:rein .3s ease}
@keyframes rein{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.schritt h3{font-size:28px;margin-bottom:4px}
.schritt .sub{font-size:15px;color:var(--muted);margin-bottom:20px}
.dlg-fuss{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.dlg-fuss .zurueck{background:none;border:0;color:var(--muted);font-size:15px;cursor:pointer;padding:10px 4px}
.dlg-fuss .zurueck:hover{color:var(--dark)}
.dlg-fuss .btn{min-width:210px}
.foto-feld{display:block;border:2px dashed #d4d4d8;padding:26px;text-align:center;cursor:pointer;background:#fafafa;transition:border-color .2s}
.foto-feld:hover{border-color:var(--r1)}
.foto-feld b{color:var(--head);display:block;margin:8px 0 2px}
.foto-feld small{color:var(--muted)}
.foto-feld svg{width:34px;height:34px;color:var(--r1);margin:0 auto}
.foto-vorschau{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:12px}
.foto-vorschau div{position:relative;aspect-ratio:1;background:#eee}
.foto-vorschau img{width:100%;height:100%;object-fit:cover}
.foto-vorschau button{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;background:rgba(0,0,0,.75);color:#fff;cursor:pointer;font-size:14px;line-height:1}
@media(max-width:560px){.modal{padding:0;align-items:stretch}.dlg{max-height:100dvh;height:100dvh}.dlg form{padding:18px 16px 24px;flex:1}.dlg-kopf{padding:16px 16px 12px}.dlg-fuss{position:sticky;bottom:0;background:#fff;padding-bottom:6px}.dlg-fuss .btn{min-width:0;flex:1}}

/* ===== Schnellstart (Hero-Karte): antippen statt tippen ===== */
.ss-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ss-kopf h2{font-size:28px;margin:0}
.ss-kopf span{font-family:Barlow,sans-serif;font-weight:700;font-size:16px;color:var(--muted);white-space:nowrap}
.ss-balken{height:4px;background:#f4f4f5;margin:12px 0 14px;overflow:hidden}
.ss-balken i{display:block;height:100%;width:25%;background:var(--r1);transition:width .35s}
.ss-auto{font-size:14px;color:var(--muted);margin-bottom:12px;padding:9px 12px;background:#f4f4f5}
.ss-auto b{color:var(--head)}
.ss-gitter{display:grid;gap:8px}
.ss-gitter.g3{grid-template-columns:repeat(3,1fr)}
.ss-gitter.g4{grid-template-columns:repeat(4,1fr)}
.ss-gitter.g2{grid-template-columns:repeat(2,1fr)}
.ss-k{background:#fff;border:1.5px solid #e4e4e7;color:var(--head);font-family:Barlow,sans-serif;font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.3px;padding:13px 6px;cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .15s;line-height:1.1}
.ss-gitter.g2 .ss-k{font-family:Inter,sans-serif;font-weight:600;font-size:14.5px;text-transform:none;letter-spacing:0;padding:14px 8px}
.ss-k:hover{border-color:var(--r1);color:var(--r1)}
.ss-k:active{transform:scale(.97);background:var(--r1);color:#fff;border-color:var(--r1)}
.ss-andere{font-size:14px!important}
.ss-frei{display:flex;gap:8px;margin-top:10px}
.ss-frei .btn{padding:12px 18px;font-size:15px;box-shadow:none}
.ss-fuss{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;min-height:24px}
.ss-zurueck,.ss-direkt{background:none;border:0;color:var(--muted);font:inherit;font-size:13.5px;cursor:pointer;padding:4px 0}
.ss-direkt{margin-left:auto;text-decoration:underline}
.ss-zurueck:hover,.ss-direkt:hover{color:var(--head)}
.ss-fertig{padding:22px 4px;font-weight:600;color:var(--head);text-align:center}
.rein-ss{animation:ssrein .3s ease}
@keyframes ssrein{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media(max-width:420px){.ss-k{font-size:15px;padding:12px 4px}.ss-kopf h2{font-size:24px}}
.versteckt{display:none!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rein{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.rein.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rein{opacity:1;transform:none}html{scroll-behavior:auto}}

/* Bildband: farbiges Foto über die volle Breite zwischen zwei Abschnitten */
.bildband{position:relative;height:clamp(240px,40vw,540px);overflow:hidden;background:var(--dark)}
.bildband img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
/* Seitenkopf mit Farbfoto (Übergabe-Bilder): Foto kräftiger, links dunkel für den Text */
.seitenkopf.hell>img{opacity:.85;filter:none}
.seitenkopf.hell::after{background:linear-gradient(90deg,rgba(13,13,14,.92) 0%,rgba(13,13,14,.7) 40%,rgba(13,13,14,.3) 75%,rgba(13,13,14,.45) 100%),linear-gradient(180deg,rgba(13,13,14,.15) 70%,var(--dark) 100%)}
@media(max-width:999px){.seitenkopf.hell>img{height:min(100%,560px);opacity:.8}.seitenkopf.hell::after{background:linear-gradient(180deg,rgba(13,13,14,.45) 0,rgba(13,13,14,.75) 300px,var(--dark) 560px)}}
/* Abschnitt mit Foto als Hintergrund (Startseite "Was dürfen wir für Sie tun?"): Text oben, Foto in der Mitte frei, weiße Karten unten */
.bild-bg{position:relative;overflow:hidden}
.bild-bg>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.bild-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,14,.85) 0,rgba(13,13,14,.45) 32%,rgba(13,13,14,.1) 55%,rgba(13,13,14,.55) 100%)}
.bild-bg .wrap{position:relative;z-index:2}
.bild-bg .intro{color:#d6d6da}
.bild-bg .karten3{margin-top:clamp(200px,24vw,380px)}
.bild-bg .karte-weg{--karte:#fff;--line:#fff;--ink:#2a2a2d;--head:#0b0b0b;--muted:#64646b;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
/* Handy: Text auf dunklem Grund, Foto darunter (Gesichter frei), Karten ragen ins Foto */
@media(max-width:759px){.bild-bg{display:grid;grid-template-columns:100%}.bild-bg .wrap{display:contents}
.bild-bg .mitte,.bild-bg .karten3{position:relative;z-index:2;padding:0 16px}.bild-bg .mitte{grid-row:1}
.bild-bg>img.bg,.bild-bg::after{grid-row:2;grid-column:1;position:relative;inset:auto;height:360px;margin-top:20px}
.bild-bg>img.bg{object-position:58% 50%}
.bild-bg::after{background:linear-gradient(180deg,var(--dark) 0,rgba(13,13,14,0) 18%,rgba(13,13,14,0) 62%,var(--dark) 100%)}
.bild-bg .karten3{grid-row:3;margin-top:-70px}}
/* "So arbeiten wir mit Ihnen" mit Foto als Hintergrund: Kopf oben, Foto frei in der Mitte, Schritte unten auf Dunkel */
.bild-bg-steps{position:relative;overflow:hidden}
.bild-bg-steps>img.bg{position:absolute;top:0;left:0;width:100%;height:clamp(420px,52vw,760px);object-fit:cover;object-position:50% 42%}
.bild-bg-steps::after{content:"";position:absolute;top:0;left:0;right:0;height:clamp(420px,52vw,760px);background:linear-gradient(180deg,rgba(13,13,14,.82) 0,rgba(13,13,14,.3) 26%,rgba(13,13,14,0) 50%,rgba(13,13,14,.6) 82%,var(--dark) 100%)}
.bild-bg-steps .wrap{position:relative;z-index:2}
.bild-bg-steps .schritte{margin-top:clamp(240px,34vw,520px)}
@media(max-width:759px){.bild-bg-steps>img.bg,.bild-bg-steps::after{height:300px}.bild-bg-steps>img.bg{object-position:38% 42%}.bild-bg-steps::after{background:linear-gradient(180deg,rgba(13,13,14,.25) 0,rgba(13,13,14,.15) 45%,rgba(13,13,14,.75) 85%,var(--dark) 100%)}.bild-bg-steps .kopfzeile{margin-top:270px;margin-bottom:36px}.bild-bg-steps .schritte{margin-top:0}}