/* ============================================================
   REIN & FEIN Gebäudereinigung UG
   System: Hanken Grotesk + Urbanist (Akzent)
   Vertrag: Estoria-Vorlage (vorlage/*.webp) · PRODUCT.md
   ============================================================ */

/* HELLE VARIANTE — alle Navy-Stufen ersetzt durch das Logo-Blau #0252a6.
   Die Namen bleiben (--navy usw.), damit sämtliche Regeln der Vorlage
   ohne Umschreiben greifen; nur die Werte sind neu. */
:root{
  --navy:#0252a6;                    /* Logo-Blau: Buttons, Zahlen, Icons */
  --navy-deep:#0f6cc4;               /* große Flächen: Header, Referenz, Förderung, Footer */
  --navy-soft:#3a8ee0;               /* Hover */
  --sky:oklch(80% .08 245);          /* Hero-Himmel oben */
  --sky-low:oklch(68% .09 245);      /* Hero-Himmel unten */
  --paper:#f3f8fd;                   /* Seitengrund, leicht blaustichig statt kühlgrau */
  --surface:#e6f0fb;                 /* Flächen auf Papier */
  --white:#fff;
  --ink:oklch(32% .07 258);          /* Text: dunkles Blau statt Fast-Schwarz */
  --ink-soft:oklch(50% .06 258);     /* Sekundärtext */
  --ink-faint:oklch(76% .04 255);    /* nur Deko/Dim-Headline, nie Fließtext */
  --line:oklch(90% .025 250);
  --star:oklch(78% .13 85);
  --yellow:#F0E040;                  /* nur noch Archiv-Varianten */
  --blue-logo:#0252a6;               /* Logo-Blau: Akzent-Linien, CTAs, Zahlen */

  --r:12px;                          /* ein Radius-System: 12px, Pills für Interaktives */
  --container:1200px;
  --ease:cubic-bezier(.22,1,.36,1);  /* ease-out-quint */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:16px;line-height:1.6;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
h1,h2,h3{font-weight:600;text-wrap:balance;letter-spacing:-.015em}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}

.container{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,32px)}

/* Akzent-Schrift (modern geometrisch) */
.acc{font-family:"Urbanist",system-ui,sans-serif;font-weight:600;letter-spacing:-.02em}
.acc-u{font-family:"Urbanist",system-ui,sans-serif;font-weight:600;letter-spacing:-.02em;
  border-bottom:2px solid var(--blue-logo);padding-bottom:.06em}

/* Buttons: ein Stil, ein Radius, taktil, frosted */
.btn{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  background:rgba(2,82,166,.9);color:var(--white);
  padding:15px 28px;border-radius:8px;
  font-family:inherit;font-size:14.5px;font-weight:600;
  border:1px solid rgba(2,82,166,.35);cursor:pointer;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
  transition:background .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn:hover{background:rgba(20,110,205,.94);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 20px rgba(2,82,166,.22)}
.btn:active{transform:scale(.98)}
.btn svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn--white{background:rgba(255,255,255,.72);color:var(--navy);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.btn--white:hover{background:rgba(255,255,255,.88);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px rgba(2,82,166,.15)}
.btn--glass{background:rgba(255,255,255,.13);color:var(--white);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.btn--glass:hover{background:rgba(255,255,255,.24);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 6px 20px rgba(2,82,166,.18)}
.btn--sm{padding:10px 20px;font-size:13px}

/* Glas-Material (Vorlagen-Signatur): Blur + Innenkante */
.glass{background:rgba(2,82,166,.5);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 48px rgba(2,82,166,.25)}

/* Einheitlicher Navy-Tint auf allen dunklen Bildflächen */
.tinted{position:relative;overflow:hidden}
.tinted>img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.78) contrast(1.05) brightness(.9)}
.tinted::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,82,166,.34) 0%,rgba(2,82,166,.2) 45%,rgba(2,82,166,.68) 100%)}
.tinted>*:not(img){z-index:2}

/* ============================================================
   REVEALS (sichtbar by default; Animation nur wenn html.anim)
   ============================================================ */
[data-reveal]{opacity:1;transform:none}
html.anim [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.anim [data-reveal].in{opacity:1;transform:none}
html.anim [data-reveal="2"]{transition-delay:.12s}
html.anim [data-reveal="3"]{transition-delay:.24s}
html.anim [data-reveal="4"]{transition-delay:.36s}

/* Hero-Ladesequenz */
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
html.anim .hero .nav{animation:fade .9s var(--ease) both}
html.anim .hero-copy h1{animation:rise .9s var(--ease) .15s both}
html.anim .hero-copy p{animation:rise .9s var(--ease) .3s both}
html.anim .hero-copy .btn{animation:rise .9s var(--ease) .45s both}
html.anim .hero-img{animation:fade 1.2s var(--ease) .35s both}
html.anim .quotebar{animation:fade .9s var(--ease) .6s both}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;color:var(--white);overflow:hidden;
  min-height:100svh;display:flex;flex-direction:column;
  background:var(--navy-deep)}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  filter:saturate(.75) contrast(1.06) brightness(.88);
  transform:scale(1.01);will-change:transform}
html.anim .hero-img img{animation:kenburns 36s ease-in-out infinite alternate}
@keyframes kenburns{
  0%{transform:scale(1.05) translate3d(0,0,0)}
  33%{transform:scale(1.12) translate3d(-2%,-1.5%,0)}
  66%{transform:scale(1.08) translate3d(1%,-2.8%,0)}
  100%{transform:scale(1.15) translate3d(-1.5%,-3.2%,0)}
}
.hero-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,82,166,.36) 0%,rgba(2,82,166,.12) 32%,rgba(2,82,166,.46) 64%,rgba(2,82,166,.88) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;flex:1}

/* Navigation: 72px, eine Zeile */
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{display:flex;align-items:center;color:var(--white)}
.logo-img{height:47px;width:auto;display:block}
.nav-links{display:flex;gap:36px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.9);
  position:absolute !important;left:0;right:0;justify-content:center;pointer-events:none}
.nav-links a{padding:6px 0;position:relative;transition:color .3s var(--ease);pointer-events:auto}
.nav-links a::after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;
  background:var(--blue-logo);transform:translateX(-50%);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--white)}
.nav-links a.active::after{width:100%}
/* Desktop-Dropdown „Leistungen" (Glas-Panel, Echo des Custom-Select-Materials) */
.nav-ldd{position:relative;pointer-events:auto}
.nav-ldd-trg{display:flex!important;align-items:center;gap:6px;cursor:pointer}
.nav-ldd-trg .chev{width:11px;height:11px;flex:none;opacity:.7;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav-ldd.open .nav-ldd-trg .chev{transform:rotate(180deg);opacity:1}
.nav-ldd-panel{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:260px;padding:6px;z-index:20;
  background:rgba(2,82,166,.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  box-shadow:0 16px 40px rgba(2,82,166,.4);
  opacity:0;visibility:hidden;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav-ldd.open .nav-ldd-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-ldd-panel a{display:block;padding:10px 14px;border-radius:6px;
  font-size:13.5px;font-weight:500;color:rgba(255,255,255,.85);
  white-space:nowrap;transition:background .15s,color .15s}
.nav-ldd-panel a:hover{background:rgba(255,255,255,.1);color:var(--white)}
.nav-ldd-panel a::after{display:none}

.phone-pill{display:flex;align-items:center;gap:13px;background:var(--white);color:var(--navy);
  border-radius:999px;padding:7px 8px 7px 20px;font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.phone-pill:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(2,82,166,.18)}
.phone-pill .ic{width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--white);
  display:grid;place-items:center;flex:none;transition:transform .3s var(--ease),background .3s var(--ease)}
.phone-pill .ic svg{width:14px;height:14px}
.phone-pill:hover .ic{background:var(--navy-soft);transform:scale(1.1)}

/* Frozen Nav: Frosted-Bar + Inhalt immer sichtbar, Spread-Animation bei Scroll */
.pill-nav{position:fixed;top:0;left:0;right:0;z-index:200;
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px max(clamp(20px,4vw,32px), calc((100vw - var(--container)) / 2 + clamp(20px,4vw,32px)));
  transform:translateY(0);
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
.pill-nav.hidden{transform:translateY(-100%)}
.pill-nav>*{position:relative;z-index:2}
.pill-nav::before{content:"";position:absolute;inset:0;
  background:rgba(2,82,166,.62);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(2,82,166,.28)}
.pill-nav .logo-img{height:47px}

/* Hero-Copy: Headline, Subtext, CTA. Nicht mehr. */
.hero-copy{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px 0 clamp(160px,22vh,220px)}
.hero-copy h1{font-size:clamp(32px,6.2vw,80px);font-weight:600;line-height:1.22;letter-spacing:-.02em;max-width:21ch;margin-bottom:28px}
@media(max-width:640px){.hero-copy h1{font-size:clamp(30px,8.6vw,36px);max-width:15ch;margin-bottom:20px}}
.hero-copy h1 .acc-u{font-weight:500;padding-bottom:.1em}
.hero-copy p{margin:20px auto 0;font-size:16px;color:rgba(255,255,255,.92);max-width:440px}
.hero-copy .btn{margin-top:30px;position:relative;overflow:hidden}
.hero-copy .btn::after{content:"";position:absolute;left:50%;top:50%;width:140%;padding-top:140%;
  border-radius:50%;background:rgba(255,255,255,.32);pointer-events:none;
  translate:-50% -50%;scale:0;opacity:0}
.hero-copy .btn:active::after{animation:btn-ripple .6s var(--ease)}
@keyframes btn-ripple{0%{scale:0;opacity:.45}100%{scale:1;opacity:0}}
.hero-copy .btn:hover{animation:btn-breathe 2.4s ease-in-out infinite}
@keyframes btn-breathe{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 20px rgba(2,82,166,.22)}
  50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 26px rgba(2,82,166,.3)}
}

/* Glasleiste am Hero-Fuß */
.quotebar{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:28px;
  width:min(1136px,calc(100% - 48px));padding:22px 26px}
.quotebar h2{font-size:16px;font-weight:600;margin-bottom:16px;letter-spacing:0}
.quotebar form{display:grid;grid-template-columns:1.15fr 1fr 1.15fr auto;gap:16px;align-items:end}
.quotebar label{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.85);display:block;margin-bottom:7px}
.quotebar select,.quotebar input{width:100%;height:46px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  color:var(--white);border-radius:8px;padding:0 14px;font-family:inherit;font-size:14px}
.quotebar input::placeholder{color:rgba(255,255,255,.72)}

/* Custom Select Dropdown */
.custom-select{position:relative}
.cs-trigger{width:100%;height:46px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  color:var(--white);border-radius:8px;padding:0 14px;font-family:inherit;font-size:14px;
  cursor:pointer;text-align:left;transition:border-color .2s}
.cs-trigger:hover{border-color:rgba(255,255,255,.45)}
.cs-trigger svg{flex:none;opacity:.7;transition:transform .25s var(--ease)}
.custom-select.open .cs-trigger{border-color:rgba(255,255,255,.5)}
.custom-select.open .cs-trigger svg{transform:rotate(180deg)}
.cs-options{position:absolute;bottom:calc(100% + 6px);left:0;right:0;
  background:rgba(2,82,166,.88);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.18);border-radius:8px;
  padding:6px;list-style:none;z-index:20;
  box-shadow:0 16px 40px rgba(2,82,166,.4);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.custom-select.open .cs-options{opacity:1;visibility:visible;transform:translateY(0)}
.cs-options li{padding:10px 12px;border-radius:5px;font-size:13.5px;color:rgba(255,255,255,.85);
  cursor:pointer;transition:background .15s}
.cs-options li:hover{background:rgba(255,255,255,.1)}
.cs-options li.selected{background:rgba(255,255,255,.14);color:#fff;font-weight:500}
.quotebar .btn{height:46px;background:rgba(255,255,255,.72);color:var(--navy);
  border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.quotebar .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px rgba(2,82,166,.15)}
.qb-consent{grid-column:1/-1;display:flex;align-items:center;gap:10px;
  font-size:12px;line-height:1.5;color:rgba(255,255,255,.42);cursor:pointer;margin-top:4px}
.qb-consent input[type="checkbox"]{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  box-sizing:border-box;width:16px;height:16px;min-width:16px;min-height:16px;max-width:16px;max-height:16px;
  flex:0 0 16px;margin:0;padding:0;border-radius:4px;cursor:pointer;position:relative;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  transition:border-color .2s,background .2s}
.qb-consent input[type="checkbox"]:hover{border-color:rgba(255,255,255,.45)}
.qb-consent input[type="checkbox"]:checked{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.qb-consent input[type="checkbox"]:checked::after{content:"";position:absolute;left:4px;top:1px;
  width:4px;height:8px;border:solid rgba(255,255,255,.8);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.qb-consent a{color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:2px}
.qb-consent a:hover{color:rgba(255,255,255,.92)}

/* ============================================================
   ÜBER UNS
   ============================================================ */
.about{padding:clamp(80px,10vw,128px) 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.about-img{aspect-ratio:3/4;border-radius:var(--r);margin-left:clamp(-40px,-4vw,0px)}
.about-img img{width:100%;height:100%;object-fit:cover}
.about-img::after{background:linear-gradient(180deg,rgba(2,82,166,.1),rgba(2,82,166,.22))}
.about-num{display:none}
.about-main h2{font-size:clamp(24px,3vw,36px);line-height:1.4;hyphens:auto;-webkit-hyphens:auto}
.about-main h2 .dim{color:var(--ink-faint);font-weight:500}
.about-main p{color:var(--ink-soft);font-size:16px;line-height:1.75;max-width:46ch;margin:22px 0 32px;text-wrap:pretty}
.about-row{display:flex;align-items:center;gap:clamp(24px,3vw,48px);flex-wrap:wrap}
.about-row .stats{margin-top:0;gap:clamp(20px,3vw,40px)}
.about-row .stat{padding-right:clamp(20px,3vw,40px);margin-right:0}
.stats{display:flex;margin-top:72px}
.stat{padding-right:clamp(32px,5vw,60px);margin-right:clamp(32px,5vw,60px);border-right:1px solid var(--line)}
.stat:last-child{border-right:none;padding-right:0;margin-right:0}
.stat b{font-size:clamp(34px,3.6vw,46px);font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;display:block;line-height:1.1}
/* Zahlen/Counter im Logo-Blau */
.stat b{color:var(--blue-logo)}
.stat span{display:block;font-size:14px;color:var(--ink-soft);margin-top:6px}

/* ============================================================
   BRANCHEN-MARQUEE
   ============================================================ */
.sectors{padding:8px 0 clamp(72px,9vw,110px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee{display:flex;gap:14px;width:max-content}
html.anim .marquee{animation:scroll 36s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee span{background:var(--surface);border-radius:999px;padding:14px 30px;
  color:var(--ink-soft);font-weight:600;font-size:14.5px;white-space:nowrap}

/* ============================================================
   LEISTUNGS-BÄNDER (Vorlagen-Kernstück)
   ============================================================ */
.bands-section{padding-bottom:clamp(72px,9vw,110px);overflow:hidden}
.bands-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px}
.bands-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.25}
.bands-head h2 .dim{color:var(--ink-faint);font-weight:500}
.bands-wrap{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none}
.bands-wrap::-webkit-scrollbar{display:none}
.bands-track{display:flex;gap:22px;padding:0 clamp(20px,4vw,32px)}
.bands-nav{display:flex;gap:12px;justify-content:center;margin-top:28px}
.bands-prev,.bands-next{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:var(--white);display:grid;place-items:center;cursor:pointer;
  transition:opacity .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.bands-prev:hover,.bands-next:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(2,82,166,.1)}
.bands-prev svg,.bands-next svg{width:16px;height:16px;color:var(--ink)}
.bands-next svg{transform:rotate(0deg)}
.bands-prev svg{transform:rotate(180deg)}
.band{position:relative;border-radius:var(--r);color:var(--white);height:440px;width:380px;min-width:380px;flex:none}
.band>img{transition:transform 1.2s var(--ease)}
.band:hover>img{transform:scale(1.03)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:500}
.band-glass{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
  padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px}
.band-meta{font-size:12px;color:rgba(255,255,255,.75)}
.band-glass h3{font-size:20px;font-weight:600;line-height:1.25}
.band-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:12px;margin-top:4px}
.band-price{font-family:"Urbanist",system-ui,sans-serif;font-weight:600;font-size:14px;color:rgba(255,255,255,.9)}
.go-circle{width:42px;height:42px;flex:none;border-radius:50%;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
  display:grid;place-items:center;color:var(--white);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.go-circle svg{width:15px;height:15px}
.go-circle:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}

/* ============================================================
   ABLAUF: die einzige nummerierte Sequenz der Seite
   ============================================================ */
.steps{background:var(--white);padding:clamp(80px,10vw,120px) 0;text-align:center}
.steps h2{font-size:clamp(28px,3.2vw,40px);line-height:1.3}
.steps h2 .dim{color:var(--ink-faint);font-weight:500}
.steps-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:center;
  margin:60px auto 0;max-width:980px}
.step{padding:48px 32px;color:var(--ink-soft)}
.step .no{font-family:"Urbanist",system-ui,sans-serif;font-weight:600;font-size:30px;
  color:var(--ink-faint);display:block;margin-bottom:12px;line-height:1.2}
.step h3{font-size:16px;font-weight:600;color:var(--ink-soft);letter-spacing:0}
.step-main{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:52px 40px;position:relative;z-index:2;
  box-shadow:0 32px 64px rgba(2,82,166,.14)}
.step-main .no{color:var(--navy)}
.step-main h3{color:var(--ink);font-size:19px}
.step-main p{font-size:14.5px;color:var(--ink-soft);margin:12px 0 24px}

/* ============================================================
   RIESEN-WORTMARKE (Signatur der Vorlage, bildgefüllt)
   ============================================================ */
.bigword{background:var(--white);padding:0 0 clamp(48px,6vw,80px);text-align:center;overflow:hidden}
.bigword span{display:inline-block;white-space:nowrap;
  font-size:clamp(52px,12.8vw,186px);font-weight:800;line-height:1;letter-spacing:-.02em;
  text-transform:uppercase;color:transparent;
  background:url("../img/glasfassade-abzieher.jpg") center 28%/cover no-repeat;
  -webkit-background-clip:text;background-clip:text}

/* ============================================================
   KUNDENSTIMME
   ============================================================ */
.testimonial{color:var(--white);height:600px}
.testimonial .inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 20px;text-align:center}
.testimonial h2{font-size:clamp(26px,3vw,38px)}
.testi-card{margin-top:36px;width:min(560px,100%);padding:36px 44px}
.testi-card .stars{color:var(--star);letter-spacing:4px;font-size:14px}
.testi-card .who{margin:12px 0 14px;font-size:14px;font-weight:600}
.testi-card .who small{color:rgba(255,255,255,.72);font-weight:400;margin-left:8px}
.testi-card blockquote{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.94)}
.avatar-pill{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  background:var(--white);color:var(--ink);border-radius:999px;padding:9px 22px 9px 11px;
  display:flex;align-items:center;gap:13px;font-size:12.5px;font-weight:600;white-space:nowrap}
.avatars{display:flex}
.avatars span{width:30px;height:30px;border-radius:50%;border:2px solid var(--white);
  margin-left:-9px;display:grid;place-items:center;color:var(--white);font-size:11px;font-weight:700}
.avatars span:first-child{margin-left:0}
.avatars span:nth-child(1){background:var(--sky-low)}
.avatars span:nth-child(2){background:var(--navy-soft)}
.avatars span:nth-child(3){background:var(--navy)}

/* ============================================================
   OBJEKTE
   ============================================================ */
.objects{padding:clamp(80px,10vw,120px) 0}
.objects-head{margin-bottom:48px}
.objects-head h2{font-size:clamp(28px,3.2vw,40px)}
.objects-head .side{font-size:15px;color:var(--ink-soft);max-width:52ch;margin-top:14px}
.objects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.ocard{border-radius:var(--r);height:350px}
.ocard>img{transition:transform 1s var(--ease)}
.ocard:hover>img{transform:scale(1.04)}
.ocard figcaption{position:absolute;left:20px;bottom:18px;right:20px;color:var(--white)}
.ocard figcaption b{display:block;font-size:16px;font-weight:700;line-height:1.35}
.ocard figcaption small{font-size:13px;color:rgba(255,255,255,.82)}

/* ============================================================
   ANGEBOT (dunkle Formular-Sektion)
   ============================================================ */
.quoteform{color:var(--white)}
.quoteform.tinted::after{background:linear-gradient(100deg,rgba(2,82,166,.9) 0%,rgba(2,82,166,.72) 55%,rgba(2,82,166,.55) 100%)}
.quoteform>img{position:absolute;inset:0}
.qf-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 440px;
  gap:clamp(48px,7vw,88px);padding-block:clamp(80px,10vw,120px);align-items:center}
.qf-left h2{font-size:clamp(32px,3.8vw,48px);line-height:1.22}
.qf-left p{margin-top:20px;font-size:15px;color:rgba(255,255,255,.85);max-width:380px}
.qf-left .call{margin-top:36px;display:inline-block;
  font-family:"Urbanist",system-ui,sans-serif;font-weight:600;font-size:clamp(20px,2.2vw,26px);
  font-variant-numeric:tabular-nums;padding-bottom:.15em}
.qf-form{padding:32px}
.qf-form label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.82);display:block;margin:18px 0 8px}
.qf-form>label:first-child{margin-top:0}
.qf-form input,.qf-form textarea{width:100%;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.26);
  color:var(--white);border-radius:8px;padding:12px 14px;font-family:inherit;font-size:14px;resize:vertical}
.qf-form ::placeholder{color:rgba(255,255,255,.68)}
.qf-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qf-form .btn{width:100%;margin-top:26px;justify-content:center;
  background:rgba(255,255,255,.72);color:var(--navy);
  border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.qf-form .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px rgba(2,82,166,.15)}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--navy-deep);color:rgba(255,255,255,.88);overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:64px;padding-block:88px 56px}
.foot-news h2{color:var(--white);font-size:clamp(22px,2.4vw,28px);line-height:1.42;font-weight:600}
.newsform{margin-top:26px;display:flex;gap:6px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:6px 6px 6px 20px;max-width:400px}
.newsform input{flex:1;min-width:0;background:none;border:none;color:var(--white);
  font-family:inherit;font-size:14px;outline:none}
.newsform ::placeholder{color:rgba(255,255,255,.6)}
.newsform .btn{background:rgba(255,255,255,.72);color:var(--navy);padding:10px 20px;font-size:13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.newsform .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 20px rgba(2,82,166,.15)}
footer h3{color:var(--white);font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:20px}
footer li{margin-bottom:11px;font-size:14.5px}
footer a{transition:color .2s}
footer a:hover{color:var(--white)}
.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.foot-legal{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-block:26px;border-top:1px solid rgba(255,255,255,.09);font-size:12.5px;color:rgba(255,255,255,.64)}
/* Footer-Abschluss: nur die Wortmarke „rein & fein" (kein Tropfen-Icon, kein Unterzeilen-Schriftzug),
   Ton-in-Ton wie zuvor. CSS-Mask auf den auf den Text zugeschnittenen Wordmark-Ausschnitt. */
.foot-logo{width:min(78vw,860px);aspect-ratio:410/95;margin:20px auto 34px;
  background:rgba(255,255,255,.24);
  -webkit-mask:url("../img/logo-wordmark.svg") center/contain no-repeat;
  mask:url("../img/logo-wordmark.svg") center/contain no-repeat;user-select:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
.burger{display:none;background:none;border:none;color:var(--white);cursor:pointer;padding:10px}
.burger span{position:relative;width:22px;height:14px;display:block}
.burger i{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .45s var(--ease),opacity .3s var(--ease)}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:6px}
.burger i:nth-child(3){top:12px}
.pill-nav.open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pill-nav.open .burger i:nth-child(2){opacity:0}
.pill-nav.open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none}

@media(max-width:1020px){
  .nav-links{display:none}
  .burger{display:block}
  .pill-nav .phone-pill{display:none}
  /* Mobiles Menü: Vollbild-Bühne mit Glas-Hintergrund (Variante 1, 20.07.)
     Große Urbanist-Links steigen gestaffelt auf, Leistungen als Akkordeon. */
  /* Absolut statt fixed: der transform der .pill-nav macht sie zum Containing Block */
  .mnav{display:flex;flex-direction:column;position:absolute;top:0;left:0;right:0;z-index:1;
    height:100vh;height:100dvh;
    padding:96px 30px 30px;overflow-y:auto;
    background:rgba(2,82,166,.72);
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    opacity:0;visibility:hidden;
    transition:opacity .45s var(--ease),visibility 0s .45s}
  .pill-nav.open .mnav{opacity:1;visibility:visible;
    transition:opacity .45s var(--ease)}
  body.mnav-open{overflow:hidden}
  .mnav nav{display:flex;flex-direction:column;margin-top:auto}
  .mnav nav>a,.mnav-trg{font-family:"Urbanist",system-ui,sans-serif;font-weight:600;font-size:29px;
    color:var(--white);padding:11px 0;line-height:1.15;text-align:left;
    background:none;border:none;cursor:pointer;
    display:flex;align-items:center;gap:12px;
    opacity:0;transform:translateY(26px);
    transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .pill-nav.open .mnav nav>a,.pill-nav.open .mnav-trg{opacity:1;transform:none}
  .pill-nav.open .mnav nav>*:nth-child(1){transition-delay:.08s}
  .pill-nav.open .mnav nav>*:nth-child(2){transition-delay:.15s}
  .pill-nav.open .mnav nav>*:nth-child(4){transition-delay:.22s}
  .pill-nav.open .mnav nav>*:nth-child(5){transition-delay:.29s}
  .mnav-trg .chev{width:19px;height:19px;flex:none;color:rgba(255,255,255,.6);
    transition:transform .4s var(--ease),color .3s var(--ease)}
  .pill-nav.sub .mnav-trg .chev{transform:rotate(180deg);color:var(--white)}
  .mnav-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
  .pill-nav.sub .mnav-sub{grid-template-rows:1fr}
  .mnav-sub-in{overflow:hidden;min-height:0}
  .mnav-sub a{display:block;font-size:16.5px;font-weight:500;color:rgba(255,255,255,.85);
    padding:9px 0 9px 20px;margin-left:6px;border-left:1px solid rgba(255,255,255,.18);
    opacity:0;transform:translateX(-10px);
    transition:opacity .4s var(--ease),transform .4s var(--ease),color .2s}
  .mnav-sub a:hover{color:var(--white)}
  .mnav-sub a:first-child{margin-top:6px}
  .mnav-sub a:last-child{margin-bottom:8px}
  .pill-nav.sub .mnav-sub a{opacity:1;transform:none}
  .pill-nav.sub .mnav-sub a:nth-child(1){transition-delay:.1s}
  .pill-nav.sub .mnav-sub a:nth-child(2){transition-delay:.14s}
  .pill-nav.sub .mnav-sub a:nth-child(3){transition-delay:.18s}
  .pill-nav.sub .mnav-sub a:nth-child(4){transition-delay:.22s}
  .pill-nav.sub .mnav-sub a:nth-child(5){transition-delay:.26s}
  .pill-nav.sub .mnav-sub a:nth-child(6){transition-delay:.3s}
  .pill-nav.sub .mnav-sub a:nth-child(7){transition-delay:.34s}
  .mnav-foot{margin-top:auto;display:flex;flex-direction:column;gap:15px;
    padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
    opacity:0;transform:translateY(20px);
    transition:opacity .55s var(--ease) .38s,transform .55s var(--ease) .38s}
  .pill-nav.open .mnav-foot{opacity:1;transform:none}
  .mnav-foot .btn{width:100%;justify-content:center;border-radius:999px;
    background:var(--blue-logo);border:1px solid rgba(255,255,255,.2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
  .mnav-foot .btn:hover{background:#1c74c0}
  .mnav-tel{font-family:"Urbanist",system-ui,sans-serif;font-weight:600;text-align:center;
    font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);font-size:15px}
  @media(prefers-reduced-motion:reduce){
    .mnav,.mnav nav>a,.mnav-trg,.mnav-trg .chev,.mnav-sub,.mnav-sub a,.mnav-foot,.burger i{transition:none}
  }
  .hero-copy{padding-bottom:260px}
  .quotebar{width:calc(100% - 32px)}
  .quotebar form{grid-template-columns:1fr 1fr}
  /* Über uns mobil = Variante 6: bildfrei, "20+" als typografischer Anker, zentriert */
  .about-grid{grid-template-columns:1fr;gap:0}
  .about-img{display:none}
  .about-main{text-align:center;display:flex;flex-direction:column;align-items:center}
  .about-num{display:flex;flex-direction:column;align-items:center;margin-bottom:6px}
  .about-num b{font-size:clamp(56px,17vw,72px);font-weight:700;letter-spacing:-.03em;
    line-height:.9;font-variant-numeric:tabular-nums;color:var(--blue-logo)}
  .about-num span{font-size:12.5px;color:var(--ink-soft);margin-top:8px}
  .about-main h2{font-size:clamp(24px,6.5vw,30px)}
  .about-main p{margin:18px auto 28px}
  .about-row{flex-direction:column;align-items:center;gap:20px}
  .about-row .stats{justify-content:center;gap:24px}
  .about-row .stats .stat:first-child{display:none}
  .about-row .stat{display:flex;align-items:baseline;gap:6px;padding-right:0;margin-right:0}
  .about-row .stat b{font-size:20px}
  .about-row .stat span{margin-top:0}
  .stats{flex-wrap:wrap;gap:28px}
  .stat{border-right:none;padding-right:0;margin-right:0}
  .bands-head{flex-direction:column;align-items:flex-start;gap:20px}
  .bands-track{gap:14px;padding:0 20px}
  .band{width:82vw;min-width:82vw}
  .steps-grid{grid-template-columns:1fr}
  .step{padding:32px 16px}
  .objects-head{grid-template-columns:1fr;gap:20px}
  .qf-grid{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr;gap:44px}
}
@media(max-width:640px){
  /* Einheitliche H2-Größe auf Mobil (sonst 24–32px gemischt) */
  .about-main h2,.bands-head h2,.steps h2,.testimonial h2,.objects-head h2,.qf-left h2{
    font-size:27px;line-height:1.3}
  .foot-news h2{font-size:22px}
  /* Ablauf: große Leerräume zwischen den Schritten eindampfen */
  .steps{padding:64px 0 56px}
  .steps-grid{margin-top:32px}
  .step{padding:18px 16px}
  .step-main{padding:36px 24px}
}
@media(max-width:560px){
  .hero-copy{padding-top:130px;padding-bottom:500px}
  .quotebar{padding:18px 20px}
  .quotebar form{grid-template-columns:1fr}
  .band{height:400px}
  .phone-pill span.num{display:none}
  .phone-pill{padding:7px 8px}
}

/* ============================================================
   UNTERSEITEN: Service Pages
   ============================================================ */
.service-hero{position:relative;min-height:50vh;display:flex;align-items:flex-end;
  color:var(--white);overflow:hidden}
.service-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.service-hero-inner{position:relative;z-index:2;padding:0 0 clamp(48px,8vh,80px)}
.service-hero h1{font-size:clamp(32px,5vw,56px);font-weight:700;line-height:1.15;
  max-width:16ch;margin-top:80px}
.service-hero p{font-size:16px;color:rgba(255,255,255,.88);margin-top:16px;max-width:44ch}

.service-intro{padding:clamp(64px,8vw,100px) 0}
.service-intro-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(48px,6vw,80px);align-items:start}
.service-intro-text h2{font-size:clamp(24px,2.8vw,34px);font-weight:600;line-height:1.35}
.service-intro-text p{color:var(--ink-soft);font-size:16px;line-height:1.75;margin-top:18px;max-width:52ch}
.service-intro-aside{display:flex;flex-direction:column;gap:20px}
.service-stat{padding:20px 24px;border:1px solid var(--line);border-radius:var(--r)}
.service-stat b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.service-stat span{font-size:14px;color:var(--ink-soft)}

.service-details{background:var(--surface);padding:clamp(64px,8vw,100px) 0}
.service-details h2{font-size:clamp(24px,2.8vw,34px);font-weight:600;margin-bottom:32px}
.service-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.service-list li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.6;color:var(--ink-soft)}
.service-list li svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--navy)}

.service-quality{padding:clamp(64px,8vw,100px) 0}
.service-quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,80px);align-items:center}
.service-quality-img{border-radius:var(--r);height:360px}
.service-quality-text h2{font-size:clamp(24px,2.8vw,34px);font-weight:600;line-height:1.35}
.service-quality-text p{color:var(--ink-soft);font-size:16px;line-height:1.75;margin:18px 0 28px;max-width:46ch}

.service-cta{background:var(--navy-deep);color:var(--white);padding:clamp(64px,8vw,100px) 0}
.service-cta h2{font-size:clamp(28px,3.4vw,42px);font-weight:600;margin-bottom:16px}
.service-cta p{color:rgba(255,255,255,.8);font-size:16px;margin-bottom:28px;max-width:48ch;margin-left:auto;margin-right:auto}

@media(max-width:1020px){
  .service-intro-grid{grid-template-columns:1fr}
  .service-intro-aside{flex-direction:row;flex-wrap:wrap;gap:12px}
  .service-quality-grid{grid-template-columns:1fr}
  .service-list{grid-template-columns:1fr}
}
@media(max-width:560px){
  .service-hero h1{margin-top:100px}
}

/* ============================================================
   UNTERSEITEN v2: Leistungsseiten-Template (svc-*)
   Hero linksbündig + Fakten-Glasleiste · Checkliste · Bild-Bleed
   ============================================================ */
.svc-hero{position:relative;color:var(--white);overflow:hidden;background:var(--navy-deep);
  min-height:clamp(560px,82svh,860px);display:flex;flex-direction:column;justify-content:flex-end}
.svc-hero .hero-img::after{
  background:linear-gradient(102deg,rgba(2,82,166,.78) 0%,rgba(2,82,166,.44) 48%,rgba(2,82,166,.26) 100%),
             linear-gradient(180deg,rgba(2,82,166,.3) 0%,transparent 34%,rgba(2,82,166,.72) 100%)}
.svc-hero-inner{position:relative;z-index:2;width:100%;
  padding-top:150px;padding-bottom:clamp(140px,18vh,180px)}
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.72);margin-bottom:20px}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--white)}
.crumb span{opacity:.45}
.crumb b{font-weight:600;color:rgba(255,255,255,.92)}
.svc-hero h1{font-size:clamp(32px,4.6vw,58px);line-height:1.16;letter-spacing:-.02em;max-width:19ch}
.svc-hero h1 .acc-u{font-weight:500;padding-bottom:.1em}
.svc-hero .svc-hero-inner p{margin-top:20px;font-size:16px;color:rgba(255,255,255,.92);max-width:46ch}
.svc-cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:32px}
.svc-cta-row .btn--glass{font-variant-numeric:tabular-nums;
  font-family:"Urbanist",system-ui,sans-serif;letter-spacing:.01em}
html.anim .svc-hero .crumb{animation:rise .9s var(--ease) .05s both}
html.anim .svc-hero h1{animation:rise .9s var(--ease) .15s both}
html.anim .svc-hero .svc-hero-inner p{animation:rise .9s var(--ease) .3s both}
html.anim .svc-hero .svc-cta-row{animation:rise .9s var(--ease) .45s both}
html.anim .svc-facts{animation:fade .9s var(--ease) .6s both}

/* Fakten-Glasleiste am Hero-Fuß (Echo der Startseiten-Quotebar) */
.svc-facts{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:28px;
  width:min(1136px,calc(100% - 48px));
  display:grid;grid-template-columns:repeat(3,1fr)}
.svc-facts .fact{padding:20px 28px;display:flex;flex-direction:column;gap:3px}
.svc-facts .fact+.fact{border-left:1px solid rgba(255,255,255,.14)}
.svc-facts b{font-family:"Urbanist",system-ui,sans-serif;font-weight:600;font-size:19px;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.svc-facts span{font-size:13px;color:rgba(255,255,255,.76)}

/* Leistungsumfang: Text links, Checkliste rechts */
.svc-scope{padding:clamp(80px,10vw,124px) 0}
.svc-scope-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(48px,7vw,96px);align-items:start}
.svc-scope-copy h2{font-size:clamp(26px,3vw,38px);line-height:1.35}
.svc-scope-copy h2 .dim{color:var(--ink-faint);font-weight:500}
.svc-scope-copy p{color:var(--ink-soft);font-size:16px;line-height:1.75;max-width:48ch;margin-top:20px;text-wrap:pretty}
.svc-rhythm{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.svc-rhythm span{background:var(--surface);border-radius:999px;padding:10px 20px;
  color:var(--ink-soft);font-weight:600;font-size:13.5px;white-space:nowrap}
.svc-list li{display:flex;align-items:flex-start;gap:14px;
  padding:19px 2px;border-bottom:1px solid var(--line);
  font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.svc-list li:first-child{border-top:1px solid var(--line)}
.svc-list li b{font-weight:600;color:var(--ink)}
.svc-list li svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--navy)}

/* Qualität: Bild-Bleed links, Text + Stats rechts */
.svc-quality{background:var(--white);padding:clamp(80px,10vw,124px) 0}
.svc-quality-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,88px);align-items:center}
.svc-quality-img{aspect-ratio:3/4;border-radius:var(--r);margin-left:clamp(-40px,-4vw,0px)}
.svc-quality-img img{width:100%;height:100%;object-fit:cover}
.svc-quality-img::after{background:linear-gradient(180deg,rgba(2,82,166,.1),rgba(2,82,166,.22))}
.svc-quality-copy h2{font-size:clamp(26px,3vw,38px);line-height:1.35}
.svc-quality-copy h2 .dim{color:var(--ink-faint);font-weight:500}
.svc-quality-copy p{color:var(--ink-soft);font-size:16px;line-height:1.75;max-width:52ch;margin:20px 0 0;text-wrap:pretty}
.svc-quality-copy .stats{margin:36px 0 40px}
.svc-quality-copy .stat b{font-size:clamp(28px,3vw,38px)}

/* Weitere Leistungen: Band-Karussell mit Kopf-Abstand */
.svc-more{padding-top:clamp(72px,9vw,110px);background:var(--paper)}

@media(max-width:1020px){
  .svc-hero{min-height:auto}
  .svc-hero-inner{padding-top:130px;padding-bottom:44px}
  /* Fakten-Leiste mobil: im Fluss, als Zeilenliste */
  .svc-facts{position:static;transform:none;width:auto;
    margin:0 20px 20px;grid-template-columns:1fr}
  .svc-facts .fact{flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:14px;padding:14px 20px}
  .svc-facts .fact+.fact{border-left:none;border-top:1px solid rgba(255,255,255,.14)}
  .svc-facts b{font-size:16px}
  .svc-facts span{font-size:12.5px;text-align:right}
  .svc-scope-grid{grid-template-columns:1fr;gap:36px}
  .svc-quality-grid{grid-template-columns:1fr;gap:32px}
  /* Bild mobil als Querformat-Band statt Hochkant-Bleed */
  .svc-quality-img{aspect-ratio:16/10;margin-left:0}
  /* Stats mobil: kompakte Zeilen statt umbrechender Spalten */
  .svc-quality-copy .stats{margin:28px 0 32px;flex-direction:column;gap:12px}
  .svc-quality-copy .stat{display:flex;align-items:baseline;gap:9px;
    border-right:none;padding-right:0;margin-right:0}
  .svc-quality-copy .stat b{font-size:22px}
  .svc-quality-copy .stat span{margin-top:0;font-size:14.5px}
}
@media(max-width:640px){
  .svc-scope-copy h2,.svc-quality-copy h2{font-size:27px;line-height:1.3}
  .svc-hero h1{font-size:clamp(30px,8vw,36px)}
  .svc-cta-row{flex-direction:column;align-items:stretch}
  .svc-cta-row .btn{justify-content:center}
  .svc-rhythm span{padding:9px 16px;font-size:12.5px}
}

/* DSGVO-Checkbox im unteren Kontaktformular (Label-Uppercase neutralisieren) */
.qf-form .qb-consent{margin:18px 0 0;color:rgba(255,255,255,.6);
  font-size:12px;font-weight:400;letter-spacing:0;text-transform:none}