/* ============================================================
   SGG – Stilvoll großartig gestaltet | style.css  (Version 2)
   Konzept „Frisch gestrichen“: Die Seite wird beim Scrollen
   gestrichen – Roller-Fortschrittsleiste, Farbfächer-Karten,
   horizontale Projektstrecke, Vorher/Nachher mit Roller-Griff.
   CI: Nachtblau #002673 · Königsblau #0066ff · Gelb #f2cc19 · Rot #ff0d33
   ============================================================ */

@font-face{font-family:'Ubuntu';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/ubuntu-300.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ubuntu-400.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ubuntu-500.woff2') format('woff2')}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ubuntu-700.woff2') format('woff2')}

:root{
  --nachtblau:#002673;
  --nachtblau-tief:#001a52;
  --koenigsblau:#0066ff;
  --gelb:#f2cc19;
  --rot:#ff0d33;
  --rot-flaeche:#e00b2c;
  --rot-dunkel:#d90a2b;
  --grau:#f5f6f8;
  --text:#333;
  --weiss:#fff;
  --font:'Ubuntu','Trebuchet MS',Verdana,sans-serif;
  --radius:12px;
  --schatten:0 10px 34px rgba(0,38,115,.09);
  --schatten-gross:0 24px 60px rgba(0,38,115,.18);
  --wrap:1240px;
  --header-h:78px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 14px)}
body{margin:0;font-family:var(--font);font-weight:300;font-size:1.0625rem;line-height:1.7;color:var(--text);background:var(--weiss);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--koenigsblau);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-weight:700;line-height:1.15;color:var(--nachtblau);margin:0 0 .55em}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);letter-spacing:-.015em}
h3{font-size:1.3rem;font-weight:500}
p{margin:0 0 1.1em}
:focus-visible{outline:3px solid var(--koenigsblau);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--nachtblau);color:#fff;padding:.7em 1.2em;z-index:300}
.skip-link:focus{left:12px;top:12px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--koenigsblau);margin-bottom:1rem}
.eyebrow::before{content:"";width:26px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--koenigsblau) 0 34%,var(--gelb) 34% 67%,var(--rot) 67% 100%)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.9em 1.8em;border-radius:999px;font-weight:500;font-size:1rem;line-height:1.2;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s;text-decoration:none;position:relative;overflow:hidden}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--rot{background:var(--rot-flaeche);color:#fff;box-shadow:0 8px 22px rgba(255,13,51,.38)}
.btn--rot:hover{background:var(--rot-dunkel)}
.btn--outline-hell{border-color:rgba(255,255,255,.7);color:#fff}
.btn--outline-hell:hover{background:#fff;color:var(--nachtblau);border-color:#fff}
.btn--outline{border-color:currentColor;color:var(--nachtblau)}
.btn--outline:hover{background:var(--nachtblau);color:#fff}
.btn--blau{background:var(--nachtblau);color:#fff}
.btn--blau:hover{background:#01308f}
.btn--whatsapp{background:#25d366;color:#fff}
.btn--whatsapp:hover{background:#1fb457}

/* ============================================================
   Roller-Fortschrittsleiste (Signature #1):
   Der 3-Farb-Streifen „streicht“ die Seite beim Scrollen.
   ============================================================ */
.fortschritt{position:fixed;top:0;left:0;height:5px;width:100%;z-index:210;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--koenigsblau) 0 34%,var(--gelb) 34% 67%,var(--rot) 67% 100%);pointer-events:none}
.fortschritt::after{content:"";position:absolute;right:-2px;top:-4px;width:6px;height:13px;border-radius:3px;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.35)}

/* ============================================================
   Header
   ============================================================ */
.header{position:fixed;inset:5px 0 auto;z-index:200;transition:background .3s,box-shadow .3s}
.header__inner{display:flex;align-items:center;gap:1.5rem;height:var(--header-h)}
.header__logo img{height:42px;width:auto}
.header__logo--navy{display:none}
.header--fest{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:0 6px 26px rgba(0,38,115,.12)}
.header--fest .header__logo--weiss{display:none}
.header--fest .header__logo--navy{display:block}
.nav{margin-left:auto}
.nav ul{display:flex;gap:clamp(1rem,2.4vw,2.2rem);list-style:none;margin:0;padding:0}
.nav a{color:#fff;font-weight:500;font-size:.98rem;padding:.4em 0;position:relative}
.header--fest .nav a{color:var(--nachtblau)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--koenigsblau) 0 34%,var(--gelb) 34% 67%,var(--rot) 67% 100%);transition:right .25s}
.nav a:hover{text-decoration:none}
.nav a:hover::after,.nav a:focus-visible::after{right:0}
.header__cta{display:flex;gap:.7rem;align-items:center}
.header__cta .btn{padding:.6em 1.3em;font-size:.92rem}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:26px;height:3px;background:#fff;border-radius:2px;margin:5px 0;transition:transform .25s,opacity .25s,background .25s}
.header--fest .burger span{background:var(--nachtblau)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:980px){
  .nav{position:fixed;top:0;right:0;bottom:0;width:min(78vw,340px);background:var(--nachtblau-tief);padding:110px 0 2rem;transform:translateX(110%);transition:transform .3s;box-shadow:-20px 0 60px rgba(0,0,0,.3)}
  .nav.offen{transform:none}
  .nav ul{flex-direction:column;gap:0}
  .nav a,.header--fest .nav a{display:block;color:#fff;padding:1em 2rem;font-size:1.15rem}
  .burger{display:block;position:relative;z-index:220}
  .header__cta .btn--tel{display:none}
}
@media (max-width:560px){
  .header__cta .btn span{display:none}
  .header__cta .btn{padding:.6em .85em}
  .header__logo img{height:34px}
}

/* ============================================================
   Hero: typografisch, Nachtblau, Roller-Reveal (Signature #2)
   ============================================================ */
.hero{position:relative;min-height:100vh;min-height:100svh;background:radial-gradient(1200px 700px at 85% -10%,#0a3aa0 0%,var(--nachtblau) 45%,var(--nachtblau-tief) 100%);color:#fff;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:calc(var(--header-h) + 20px)}
/* dezente Roller-Textur */
.hero::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(105deg,rgba(255,255,255,.022) 0 3px,transparent 3px 9px);pointer-events:none}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{color:#fff;font-size:clamp(2.9rem,8vw,6rem);line-height:1.02;letter-spacing:-.025em;margin:0 0 1.2rem;text-wrap:balance}
/* Marken-Claim über der Headline (wie auf den Firmenfahrzeugen) */
.hero__kicker{display:inline-flex;align-items:center;gap:.7em;font-size:clamp(1rem,1.5vw,1.25rem);font-weight:500;font-style:italic;color:var(--gelb);margin:0 0 1.1rem;opacity:0;animation:einblenden .7s .25s forwards}
.hero__kicker::before{content:"";width:34px;height:4px;border-radius:2px;flex:none;background:linear-gradient(90deg,var(--koenigsblau) 0 34%,var(--gelb) 34% 67%,var(--rot) 67% 100%)}
.hero h1 .wort{display:inline-block;position:relative;clip-path:inset(0 100% 0 0);animation:wortAuf .001s forwards}
.hero h1 .wort::after{content:"";position:absolute;inset:-2% -1%;transform:scaleX(0);transform-origin:left}
.hero h1 .wort--1{animation-delay:.55s}
.hero h1 .wort--2{animation-delay:1.15s}
.hero h1 .wort--3{animation-delay:1.75s}
.hero h1 .wort--1::after{background:var(--koenigsblau);animation:rollerStrich 1s .15s cubic-bezier(.7,0,.3,1) forwards}
.hero h1 .wort--2::after{background:var(--gelb);animation:rollerStrich 1s .75s cubic-bezier(.7,0,.3,1) forwards}
.hero h1 .wort--3::after{background:var(--rot);animation:rollerStrich 1s 1.35s cubic-bezier(.7,0,.3,1) forwards}
@keyframes wortAuf{to{clip-path:inset(0 0 0 0)}}
@keyframes rollerStrich{0%{transform:scaleX(0);transform-origin:left}45%,55%{transform:scaleX(1);transform-origin:left}56%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
.hero__sub{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:32em;color:#dfe7ff;margin-bottom:2.2rem;opacity:0;animation:einblenden .8s 2.3s forwards}
.hero__ctas{display:flex;flex-wrap:wrap;gap:1rem;opacity:0;animation:einblenden .8s 2.6s forwards}
.hero__fakten{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;margin-top:3rem;opacity:0;animation:einblenden .8s 2.9s forwards}
.fakt{display:flex;flex-direction:column;gap:.1em}
.fakt strong{font-size:1.5rem;font-weight:700;color:#fff}
.fakt strong em{font-style:normal;color:var(--gelb)}
.fakt span{font-size:.85rem;color:#9db1e8;letter-spacing:.04em}
@keyframes einblenden{to{opacity:1}}

/* Team-Freisteller rechts: Der Kümmerer und sein Team */
.hero__team{position:relative;height:min(74vh,660px);display:flex;align-items:flex-end;justify-content:center;opacity:0;animation:einblenden 1s 1s forwards}
.hero__team::before{content:"";position:absolute;left:8%;right:8%;bottom:-6%;height:64%;background:radial-gradient(55% 62% at 50% 100%,rgba(0,102,255,.38),transparent 72%);filter:blur(6px);pointer-events:none}
.hero__team img{position:relative;max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 26px 38px rgba(0,8,34,.55))}
@media (max-width:900px){
  .hero__team{height:auto;margin-top:.4rem}
  .hero__team img{max-height:46vh}
}
.c-farbkarte{position:absolute;top:-4px;left:2%;z-index:2;width:110px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.35));animation:schweben 7s ease-in-out infinite}
@media (max-width:900px){.c-farbkarte{display:none}}
@keyframes schweben{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-14px) rotate(4deg)}}
/* Pfauenfeder-Akzent, sehr dezent */
.hero__pfau{position:absolute;left:-140px;bottom:-160px;width:520px;opacity:.05;pointer-events:none}
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__fakten{gap:1.2rem 1.8rem;margin-top:2.2rem}
}

/* Marquee: Leistungs-Laufband am Hero-Ende */
.marquee{position:relative;border-block:1px solid rgba(255,255,255,.14);padding-block:.9rem;overflow:hidden;background:rgba(0,0,0,.14)}
.marquee__track{display:flex;gap:2.6rem;width:max-content;animation:laufband 36s linear infinite;will-change:transform}
.marquee span{display:flex;align-items:center;gap:2.6rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;color:#cdd9f7;white-space:nowrap}
.marquee i{width:9px;height:9px;border-radius:50%;flex:none}
.marquee i:nth-of-type(3n+1){background:var(--koenigsblau)}
.marquee i:nth-of-type(3n+2){background:var(--gelb)}
.marquee i:nth-of-type(3n){background:var(--rot)}
@keyframes laufband{to{transform:translateX(-50%)}}

/* ============================================================
   Gestrichene Kanten zwischen Sektionen (Signature #3)
   ============================================================ */
.kante{display:block;width:100%;height:44px;margin-top:-1px}
.kante--unten{transform:scaleY(-1)}

/* ============================================================
   Abschnitte
   ============================================================ */
.abschnitt{padding-block:clamp(4.5rem,9vw,7rem);position:relative}
.abschnitt--grau{background:var(--grau)}
.abschnitt--navy{background:linear-gradient(160deg,var(--nachtblau) 0%,var(--nachtblau-tief) 100%);color:#dfe7ff}
.abschnitt--navy h2,.abschnitt--navy h3{color:#fff}
.abschnitt--navy .eyebrow{color:var(--gelb)}
.abschnitt__kopf{max-width:760px;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.abschnitt__kopf--mitte{margin-inline:auto;text-align:center}
.abschnitt__kopf--mitte .eyebrow{justify-content:center}

/* ============================================================
   Leistungen als Farbfächer (Signature #4)
   ============================================================ */
.faecher{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:clamp(1.1rem,2.4vw,1.8rem);perspective:1200px}
.farbkarte{background:#fff;border-radius:14px;box-shadow:var(--schatten);overflow:hidden;position:relative;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;transform-origin:bottom center;display:flex;flex-direction:column}
.farbkarte:nth-child(1){--akzent:var(--koenigsblau);--akzent-hell:#e5efff}
.farbkarte:nth-child(2){--akzent:#0aa574;--akzent-hell:#e4f6ef}
.farbkarte:nth-child(3){--akzent:var(--gelb);--akzent-hell:#fdf6d8}
.farbkarte:nth-child(4){--akzent:var(--rot);--akzent-hell:#ffe6ea}
.farbkarte:hover{transform:translateY(-10px) rotate(-1.2deg);box-shadow:var(--schatten-gross)}
.farbkarte:nth-child(even):hover{transform:translateY(-10px) rotate(1.2deg)}
/* Farbmuster-Kopf wie auf einer Farbtonkarte */
.farbkarte__muster{height:86px;background:var(--akzent);background:linear-gradient(180deg,var(--akzent) 0 52%,color-mix(in srgb,var(--akzent) 55%,white) 52% 76%,var(--akzent-hell) 76% 100%);position:relative}
.farbkarte__muster::after{content:attr(data-ton);position:absolute;right:12px;bottom:6px;font-size:.68rem;font-weight:500;letter-spacing:.12em;color:rgba(0,0,0,.45);text-transform:uppercase}
.farbkarte__loch{position:absolute;top:10px;left:14px;width:14px;height:14px;border-radius:50%;background:var(--grau);box-shadow:inset 0 1px 3px rgba(0,0,0,.25)}
.farbkarte__inhalt{padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.farbkarte h3{margin-bottom:.4em}
.farbkarte p{margin:0 0 1rem;font-size:.97rem;flex:1}
.farbkarte__mehr{font-size:.9rem;font-weight:500;color:var(--nachtblau);display:inline-flex;align-items:center;gap:.4em}
.farbkarte__mehr::after{content:"→";transition:transform .2s}
.farbkarte:hover .farbkarte__mehr::after{transform:translateX(4px)}

/* Banner „Badsanierung von A bis Z“ unter dem Farbfächer */
.bad-banner{margin-top:clamp(1.6rem,3vw,2.6rem);background:linear-gradient(120deg,var(--nachtblau) 0%,#01308f 100%);border-radius:14px;color:#dfe7ff;padding:clamp(1.6rem,3vw,2.2rem) clamp(1.5rem,3vw,2.4rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem;position:relative;overflow:hidden;box-shadow:var(--schatten-gross)}
.bad-banner::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:linear-gradient(180deg,var(--koenigsblau) 0 34%,var(--gelb) 34% 67%,var(--rot) 67% 100%)}
.bad-banner::after{content:"A–Z";position:absolute;right:-.06em;bottom:-.32em;font-size:7rem;font-weight:700;color:rgba(255,255,255,.05);line-height:1;pointer-events:none}
.bad-banner h3{color:#fff;margin:0 0 .25em;font-weight:700;font-size:1.4rem}
.bad-banner h3 em{font-style:normal;color:var(--gelb)}
.bad-banner p{margin:0;max-width:46em}
.bad-banner .btn{flex:none;position:relative;z-index:1}

/* Leistungs-Liste in der Badsanierungs-Sektion */
.vn-leistungen{display:flex;flex-wrap:wrap;gap:.6rem .7rem;margin:0 0 2.2rem;padding:0;list-style:none}
.vn-leistungen li{background:#fff;border:1px solid rgba(0,38,115,.14);border-radius:999px;padding:.45em 1.05em;font-size:.88rem;font-weight:500;color:var(--nachtblau);display:inline-flex;align-items:center;gap:.45em;box-shadow:0 3px 10px rgba(0,38,115,.05)}
.vn-leistungen li::before{content:"✓";color:var(--koenigsblau);font-weight:700}
.vn-cta{margin-top:2.4rem;text-align:center}

/* ============================================================
   Projektstrecke: horizontale Galerie (Signature #5)
   ============================================================ */
.strecke-kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem}
.filter{display:flex;flex-wrap:wrap;gap:.6rem}
.filter button{border:1.5px solid rgba(0,38,115,.25);background:#fff;color:var(--nachtblau);border-radius:999px;padding:.5em 1.2em;font-family:inherit;font-size:.92rem;font-weight:500;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.filter button:hover{border-color:var(--koenigsblau);color:var(--koenigsblau)}
.filter button[aria-pressed="true"]{background:var(--nachtblau);border-color:var(--nachtblau);color:#fff}
.strecke__nav{display:flex;gap:.6rem}
.strecke__pfeil{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(0,38,115,.3);background:#fff;color:var(--nachtblau);cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s,opacity .15s}
.strecke__pfeil:hover{background:var(--nachtblau);color:#fff}
.strecke__pfeil:disabled{opacity:.35;cursor:default}
.strecke__pfeil:disabled:hover{background:#fff;color:var(--nachtblau)}
.strecke{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x proximity;user-select:none;-webkit-user-select:none;padding:1.9rem clamp(18px,4vw,40px) 2.4rem;margin-top:.4rem;scrollbar-width:none;cursor:grab}
.strecke::-webkit-scrollbar{display:none}
.strecke.zieht{cursor:grabbing;scroll-snap-type:none}
.strecke__item{flex:none;height:min(56vh,460px);border-radius:var(--radius);overflow:hidden;position:relative;scroll-snap-align:center;border:0;padding:0;background:#dfe3ea;cursor:zoom-in;box-shadow:var(--schatten);transition:transform .3s,box-shadow .3s}
.strecke__item:hover{transform:translateY(-6px);box-shadow:var(--schatten-gross)}
.strecke__item picture{height:100%;display:block}
.strecke__item img{height:100%;width:auto;display:block;pointer-events:none}
.strecke__item .tag{position:absolute;left:14px;top:14px;background:rgba(0,38,115,.85);color:#fff;font-size:.76rem;font-weight:500;letter-spacing:.06em;padding:.34em .9em;border-radius:999px}
.strecke__item .bildtext{position:absolute;inset:auto 0 0;padding:2.2rem 1.1rem .95rem;background:linear-gradient(transparent,rgba(0,14,44,.78));color:#fff;font-size:.92rem;font-weight:400;text-align:left;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.strecke__item:hover .bildtext,.strecke__item:focus-visible .bildtext{opacity:1;transform:none}
.strecke__item.versteckt{display:none}
@media (max-width:700px){.strecke__item{height:60vw;min-height:230px}}
.strecke-hinweis{font-size:.85rem;color:#7a86a6;display:flex;align-items:center;gap:.5em;margin-top:-1rem}

/* ============================================================
   Vorher/Nachher mit Roller-Griff (Signature #6)
   ============================================================ */
.vn-band{background:var(--grau)}
.vn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(1.4rem,3vw,2.4rem)}
.vn h3{margin-bottom:.8rem;font-size:1.15rem}
.vergleich{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;box-shadow:var(--schatten);touch-action:pan-y;background:#0a0f1e}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* Das „Vorher“ ist entsättigt – der Regler streicht das Bad frisch */
.vergleich__vorher{filter:grayscale(.9) contrast(.95) brightness(.96)}
.vergleich__nachher{clip-path:inset(0 0 0 var(--pos,50%))}
.vergleich__griff{margin-inline:0}
.vergleich__griff{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:0;z-index:2;cursor:col-resize}
.vergleich{cursor:col-resize}
.vergleich:hover .vergleich__knopf{transform:translate(-50%,-50%) scale(1.08)}
.vergleich__griff::before{content:"";position:absolute;top:0;bottom:0;left:-2px;width:4px;background:#fff;box-shadow:0 0 14px rgba(0,0,0,.45)}
/* Griff als Farbroller */
.vergleich__knopf{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:#fff;border:0;display:grid;place-items:center;color:var(--nachtblau);box-shadow:0 6px 20px rgba(0,0,0,.45);transition:transform .12s}
.vergleich__knopf svg{transform:rotate(90deg)}
.vergleich__label{position:absolute;top:12px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:.32em .85em;border-radius:999px;pointer-events:none}
.vergleich__label--v{left:12px;background:rgba(40,45,60,.8)}
.vergleich__label--n{right:12px;background:var(--rot-flaeche)}
.vergleich input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* ============================================================
   Zielgruppen: diagonal geteilte Navy-Sektion
   ============================================================ */
.zielgruppen{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
.zielgruppe{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:2.2rem 2rem;position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.zielgruppe:hover{transform:translateY(-6px);border-color:rgba(242,204,25,.5)}
.zielgruppe::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--koenigsblau) 0 34%,var(--gelb) 34% 67%,var(--rot) 67% 100%)}
.zielgruppe h3{display:flex;align-items:center;gap:.6em}
.zielgruppe h3 svg{color:var(--gelb);flex:none}
.zielgruppe ul{margin:1em 0 0;padding-left:0;list-style:none;display:grid;gap:.55em}
.zielgruppe li{padding-left:1.5em;position:relative}
.zielgruppe li::before{content:"✓";position:absolute;left:0;color:var(--gelb);font-weight:700}

/* ============================================================
   Über uns
   ============================================================ */
.ueber{position:relative;overflow:hidden}
/* Pfau-Bühne: vollfarbiger Pfau steht auf dem SGG-Feinlinien-Streifen (wie auf dem Briefbogen) */
.pfau-buehne{position:relative;margin-top:clamp(1.8rem,3.5vw,2.6rem);padding-bottom:14px}
.pfau-buehne .sgg-linien{position:absolute;bottom:0;left:0;right:0}
.pfau-buehne__vogel{position:relative;display:block;margin-left:auto;margin-right:clamp(0px,4vw,60px);width:clamp(170px,24vw,290px);height:auto;transform:scaleX(-1);filter:drop-shadow(0 10px 18px rgba(0,38,115,.15))}
.sgg-linien{display:block;width:100%;height:16px}
@media (max-width:560px){.pfau-buehne__vogel{width:70vw;margin-right:0}}
.ueber__grid{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;position:relative;z-index:1}
@media (max-width:880px){.ueber__grid{grid-template-columns:1fr}}
.ueber__portraet{position:relative}
.ueber__portraet img{border-radius:var(--radius);box-shadow:var(--schatten-gross);width:100%}
/* Rahmen-Versatz im CI */
.ueber__portraet::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:3px solid var(--gelb);border-radius:var(--radius);z-index:-1}
.ueber__zitat{position:absolute;left:-14px;bottom:22px;right:auto;max-width:82%;background:var(--nachtblau);color:#fff;border-radius:10px;padding:.9rem 1.2rem;font-size:.92rem;box-shadow:var(--schatten-gross)}
.ueber__zitat strong{color:var(--gelb);font-weight:500}
.badges{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0}
.badge{display:inline-flex;align-items:center;gap:.45em;background:#fff;border:1px solid rgba(0,38,115,.14);color:var(--nachtblau);font-size:.86rem;font-weight:500;border-radius:999px;padding:.5em 1.05em;box-shadow:0 3px 10px rgba(0,38,115,.06)}
.badge svg{color:var(--koenigsblau)}
.badge--stern svg{color:var(--gelb)}
.partner{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-top:1.6rem}
.partner .partner__titel{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#7a86a6;font-weight:500}
.partner .marke{font-weight:700;font-size:1.3rem;color:#98a1ba;letter-spacing:.04em}
.team-band{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten-gross)}
.team-band img{width:100%;max-height:520px;object-fit:cover}
.team-band figcaption{position:absolute;inset:auto 0 0;padding:2.6rem 1.6rem 1.2rem;background:linear-gradient(transparent,rgba(0,14,44,.8));color:#fff;font-size:.95rem}

/* Medien-Reihe: Video + Teamfoto nebeneinander statt gestapelt */
.medien-reihe{display:grid;grid-template-columns:3fr 2fr;gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(2.4rem,5vw,3.6rem);align-items:stretch}
@media (max-width:820px){.medien-reihe{grid-template-columns:1fr}}
.medien-reihe .video-band,.medien-reihe .team-band{margin-top:0;height:100%}
.medien-reihe .team-band img{width:100%;height:100%;object-fit:contain;object-position:center bottom;max-height:none}
.team-band--frei{background:linear-gradient(165deg,#0a3aa0 0%,var(--nachtblau) 55%,var(--nachtblau-tief) 100%);padding-top:1.2rem}
.video-band{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten-gross);background:#0a0f1e}
.video-band video{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.video-band figcaption{position:absolute;inset:auto 0 0;padding:2.6rem 1.6rem 1.2rem;background:linear-gradient(transparent,rgba(0,14,44,.8));color:#fff;font-size:.95rem;pointer-events:none}
.video-band .video-tag{position:absolute;top:14px;left:14px;background:var(--rot);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.34em .9em;border-radius:999px;pointer-events:none;display:inline-flex;align-items:center;gap:.5em}
.video-band .video-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;animation:pulsieren 1.6s ease-in-out infinite}
@keyframes pulsieren{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.video-band .video-tag::before{animation:none}}

/* ============================================================
   Kundenstimmen
   ============================================================ */
.stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.1rem,2.4vw,1.8rem)}
.stimme{background:#fff;border-radius:var(--radius);padding:2.2rem 1.8rem 1.9rem;box-shadow:var(--schatten);display:flex;flex-direction:column;position:relative;transition:transform .25s,box-shadow .25s}
.stimme:hover{transform:translateY(-6px);box-shadow:var(--schatten-gross)}
.stimme::before{content:"“";position:absolute;top:-4px;right:20px;font-size:6rem;line-height:1;font-weight:700;color:var(--grau);pointer-events:none}
.stimme__sterne{color:var(--gelb);letter-spacing:.18em;font-size:1.05rem;margin-bottom:.9rem;position:relative}
.stimme blockquote{margin:0 0 1.2rem;font-style:italic;flex:1;position:relative}
.stimme cite{font-style:normal;font-weight:500;color:var(--nachtblau);display:flex;align-items:center;gap:.6em}
.stimme cite::before{content:"";width:22px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--koenigsblau) 0 34%,var(--gelb) 34% 67%,var(--rot) 67% 100%)}
.google-hinweis{margin-top:2.4rem;display:flex;justify-content:center;align-items:center;gap:.7rem;font-weight:500;color:var(--nachtblau)}

/* ============================================================
   Kontakt: Navy mit weißer Formular-Karte
   ============================================================ */
.kontakt__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:880px){.kontakt__grid{grid-template-columns:1fr}}
.formular-karte{background:#fff;border-radius:var(--radius);padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--schatten-gross)}
.formular{display:grid;gap:1.1rem}
.feld label{display:block;font-weight:500;color:var(--nachtblau);font-size:.94rem;margin-bottom:.35em}
.feld input,.feld textarea{width:100%;border:1.5px solid #ccd3e0;border-radius:9px;padding:.85em 1em;font-family:inherit;font-size:1rem;color:var(--text);background:#fff;transition:border-color .15s,box-shadow .15s}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--koenigsblau);box-shadow:0 0 0 3px rgba(0,102,255,.15)}
.feld--check{display:flex;gap:.7em;align-items:flex-start;font-size:.9rem}
.feld--check input{width:20px;height:20px;margin-top:2px;accent-color:var(--koenigsblau);flex:none}
.formular .btn{justify-self:start}
.pflicht{color:var(--rot)}
.hp-feld{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.kontakt__info h3{color:#fff}
.kontakt__liste{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:1rem}
.kontakt__liste li{display:flex;gap:.85em;align-items:flex-start}
.kontakt__liste svg{color:var(--gelb);flex:none;margin-top:3px}
.kontakt__liste a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35)}
.kontakt__buttons{display:grid;gap:.75rem;max-width:360px}
.kontakt__route{margin-top:1.5rem;font-size:.92rem;color:#b9c6ec}
.kontakt__route a{color:var(--gelb)}
.hinweis-box{background:#e8f6ec;border:1.5px solid #2e9e4f;color:#1c5e30;border-radius:var(--radius);padding:1.2rem 1.4rem;margin-bottom:1.4rem}
.hinweis-box--fehler{background:#fdeaea;border-color:var(--rot);color:#8f0a1f}

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{border:0;padding:0;background:rgba(0,14,44,.93);width:100vw;height:100vh;max-width:100vw;max-height:100vh}
.lightbox::backdrop{background:rgba(0,14,44,.93)}
.lightbox__inner{width:100%;height:100%;display:grid;place-items:center;padding:clamp(14px,4vw,48px)}
.lightbox img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox__caption{color:#dfe7ff;text-align:center;margin-top:.9rem;font-size:.95rem}
.lightbox__schliessen,.lightbox__pfeil{position:fixed;background:rgba(255,255,255,.12);border:0;color:#fff;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .15s}
.lightbox__schliessen:hover,.lightbox__pfeil:hover{background:rgba(255,255,255,.28)}
.lightbox__schliessen{top:18px;right:18px}
.lightbox__pfeil--zurueck{left:14px;top:50%;transform:translateY(-50%)}
.lightbox__pfeil--vor{right:14px;top:50%;transform:translateY(-50%)}

/* ============================================================
   Footer mit XXL-Wortmarke
   ============================================================ */
.footer{background:var(--nachtblau-tief);color:#c9d4f2;font-size:.95rem;position:relative;overflow:hidden}
.footer__streifen{height:5px;background:linear-gradient(90deg,var(--koenigsblau) 0 34%,var(--gelb) 34% 67%,var(--rot) 67% 100%)}
.footer__marke::before{content:"SGG"}
.footer__marke{position:absolute;left:50%;bottom:-.28em;transform:translateX(-50%);font-size:clamp(7rem,22vw,19rem);font-weight:700;letter-spacing:-.02em;color:rgba(255,255,255,.035);line-height:1;pointer-events:none;user-select:none;white-space:nowrap}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(1.5rem,4vw,3rem);padding-block:3.4rem 2.6rem;position:relative}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr}}
.footer__logo img{height:46px;width:auto;margin-bottom:1rem}
.footer h4{color:#fff;font-size:1rem;font-weight:500;margin-bottom:.9em}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer a{color:#c9d4f2}
.footer a:hover{color:#fff}
.footer__sozial{display:flex;gap:.8rem;margin-top:1rem}
.footer__sozial a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;transition:background .15s,transform .15s}
.footer__sozial a:hover{background:var(--koenigsblau);transform:translateY(-3px)}
.footer__unten{border-top:1px solid rgba(255,255,255,.14);padding-block:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;font-size:.86rem;color:#93a3d1;position:relative}

/* ============================================================
   Unterseiten (Impressum/Datenschutz/Danke) – kompatibel zu v1
   ============================================================ */
.unterseite{padding-top:calc(var(--header-h) + 3rem);padding-bottom:4rem;max-width:820px}
.unterseite h1{font-size:clamp(1.9rem,4vw,2.6rem)}
.unterseite h2{font-size:1.35rem;margin-top:2em}
.unterseite address{font-style:normal}
.streifen{height:4px;background:linear-gradient(90deg,var(--koenigsblau) 0 33.4%,var(--gelb) 33.4% 66.7%,var(--rot) 66.7% 100%);border:0;margin:0}
.streifen--kurz{width:72px;border-radius:2px;margin:0 0 1.4rem}
/* Unterseiten haben hellen Grund -> Header dort immer „fest“ stylen */
.seite--hell .header{background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(0,38,115,.08)}
.seite--hell .header__logo--weiss{display:none}
.seite--hell .header__logo--navy{display:block}
.seite--hell .nav a{color:var(--nachtblau)}
.seite--hell .burger span{background:var(--nachtblau)}

/* ============================================================
   Scroll-Reveal + Reduced Motion
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}
.reveal.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero h1 .wort{clip-path:none;animation:none}
  .hero h1 .wort::after{display:none}
  .hero__sub,.hero__ctas,.hero__fakten,.hero__collage{opacity:1;animation:none}
  .marquee__track{animation:none}
  .c-farbkarte{animation:none}
  *{transition-duration:.01ms !important}
}
@media print{.header,.fortschritt,.hero__ctas,.footer__sozial,.burger,.strecke__nav{display:none}}

/* Fortschrittsanzeige unter der Projektstrecke (Desktop-Affordance) */
.strecke-fortschritt{position:relative;height:4px;border-radius:2px;background:#e1e5ee;margin:-1.2rem auto 0;max-width:var(--wrap);width:calc(100% - 2*clamp(18px,4vw,40px));overflow:hidden}
.strecke-fortschritt i{position:absolute;top:0;bottom:0;left:0;width:20%;border-radius:2px;background:linear-gradient(90deg,var(--koenigsblau) 0 34%,var(--gelb) 34% 67%,var(--rot) 67% 100%)}
/* Tastatur-Fokus für Vorher/Nachher-Regler sichtbar machen */
.vergleich:focus-within{outline:3px solid var(--koenigsblau);outline-offset:3px}

/* ============================================================
   Mobile Aktionsleiste (Anrufen · WhatsApp · Anfrage)
   ============================================================ */
.aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;grid-template-columns:1fr 1fr 1fr;gap:1px;background:rgba(0,26,82,.95);backdrop-filter:blur(8px);padding-bottom:env(safe-area-inset-bottom);transform:translateY(110%);transition:transform .3s ease;box-shadow:0 -8px 30px rgba(0,14,44,.35)}
.aktionsleiste.sichtbar{transform:none}
.aktionsleiste a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.6em .3em .55em;color:#fff;font-size:.72rem;font-weight:500;letter-spacing:.02em;text-decoration:none}
.aktionsleiste a:active{background:rgba(255,255,255,.12)}
.aktionsleiste svg{width:21px;height:21px}
.aktionsleiste .al-anfrage{background:var(--rot-flaeche)}
@media (max-width:820px){
  .aktionsleiste{display:grid}
  body{padding-bottom:0}
  .footer__unten{padding-bottom:calc(1.2rem + 62px + env(safe-area-inset-bottom))}
}

/* Azubi-Hinweis */
.azubi-hinweis{margin-top:1.6rem;background:#fdf6d8;border:1.5px solid rgba(242,204,25,.7);border-radius:10px;padding:.9rem 1.2rem;font-size:.95rem;color:#5a4d10}
.azubi-hinweis strong{color:var(--nachtblau)}

/* Select im Formular */
.feld select{width:100%;border:1.5px solid #ccd3e0;border-radius:9px;padding:.85em 1em;font-family:inherit;font-size:1rem;color:var(--text);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23002673' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 1em center;appearance:none}
.feld select:focus{outline:none;border-color:var(--koenigsblau);box-shadow:0 0 0 3px rgba(0,102,255,.15)}
.feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.feld-reihe{grid-template-columns:1fr}}

/* ---------- Mobile Feinschliff (Audit-Fixes) ---------- */
@media (max-width:820px){
  .header__cta .btn{min-height:44px}
}
.feld--check input{width:24px;height:24px}
.footer__unten a{display:inline-block;padding:.7em .2em}
.vergleich input[type=range],.hp-feld input{font-size:16px}

/* ---------- Auszeichnungs-Band (Kundenstimmen) ---------- */
.auszeichnung{display:flex;gap:clamp(1rem,2.5vw,1.8rem);align-items:center;background:#fff;border:1.5px solid rgba(242,204,25,.6);border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--schatten);margin-bottom:clamp(1.8rem,4vw,2.8rem);position:relative;overflow:hidden}
.auszeichnung::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:var(--gelb)}
.auszeichnung picture{flex:none}
.auszeichnung img{width:min(300px,34vw);border-radius:8px;display:block}
.auszeichnung__text{min-width:0}
.auszeichnung__text h3{display:flex;align-items:center;gap:.5em;margin-bottom:.3em;font-size:1.15rem}
.auszeichnung__text h3 svg{color:var(--gelb);flex:none}
.auszeichnung__text p{margin:0;font-size:.96rem}
@media (max-width:640px){
  .auszeichnung{flex-direction:column;align-items:stretch;text-align:left}
  .auszeichnung img{width:100%}
}

/* Slider-Griff: Pfeil-Andeutung + einmalige Wackel-Animation als Bedien-Hinweis */
.vergleich__knopf::before,.vergleich__knopf::after{content:"";position:absolute;top:50%;width:0;height:0;border-block:5px solid transparent}
.vergleich__knopf::before{left:9px;border-right:7px solid currentColor;transform:translateY(-50%)}
.vergleich__knopf::after{right:9px;border-left:7px solid currentColor;transform:translateY(-50%)}
.vergleich__knopf svg{display:none}
@media (prefers-reduced-motion:no-preference){
  .vergleich[data-hint]:not(.beruehrt) .vergleich__knopf{animation:griffWackeln 1.6s ease-in-out 1.2s 2}
}
@keyframes griffWackeln{0%,100%{transform:translate(-50%,-50%)}25%{transform:translate(calc(-50% - 9px),-50%)}75%{transform:translate(calc(-50% + 9px),-50%)}}