/* ═══════════════════════════════════════════════════════════════
   Look: farbwerk  (Malerbetrieb: Maler und Lackierer, Wandgestaltung, Fassade, Tapezieren, Putz)
   Formen vom Malerhandwerk: Malerkrepp-Laufband, Musterfläche mit Rollstreifen, Auftragsblatt mit
   Farbtonleiste, Farbfächer für Leistungen, Zwischenstand/Ergebnis mit Krepp-Etiketten, Abzüge mit
   Malerkrepp an der Wand, Schichtaufbau als Stufenmuster, Bautafel „Hier arbeitet …“.
   --accent kommt aus content.json (brand.accent), --acc-ink optional (brand.accent_ink), Rest abgeleitet.
   Kein Beige als Fläche, keine Raster- oder Textur-Hintergründe, kein backdrop-filter.
   ═══════════════════════════════════════════════════════════════ */


@font-face{font-family:'Montserrat';font-style:normal;font-weight:500 800;font-display:swap;src:url('fonts/montserrat-normal-var.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:italic;font-weight:600 800;font-display:swap;src:url('fonts/montserrat-italic-var.woff2') format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/open-sans-normal-var.woff2') format('woff2');}

:root{
  color-scheme: light only;
  --ink:#1C1D24; --body:#4A4E58; --muted:#6F737E;
  --line:rgba(28,29,36,.12);
  --white:#FFFFFF; --gray:#F2F3F5;
  --dark:#1C1D24; --dark2:#262730; --oil:#15161B;
  --dtext:rgba(255,255,255,.78);
  --acc-hi: var(--accent);
  --acc-ink: var(--accent);
  --tape: color-mix(in srgb, var(--accent) 62%, #F4EBCB);
  --r: 6px; --r-sm: 3px;
  --ease: cubic-bezier(.16,1,.3,1);
  --gut: 20px;
  --maxw: 1240px;
  --sec-y: clamp(64px, 5vw + 40px, 112px);
  --hdr-h: 66px;
  /* EINE Regel für alle H2, H1 immer größer */
  --fs-h1: clamp(2.6rem, 1.2rem + 5.4vw, 5.1rem);
  --fs-h2: clamp(1.85rem, 1.22rem + 2.15vw, 3.1rem);
  --fs-h3: clamp(1.14rem, 1.05rem + .32vw, 1.3rem);
  --fs-body: clamp(1rem, .97rem + .14vw, 1.07rem);
}
html[data-acclight="y"]{ --acc-ink: color-mix(in srgb, var(--accent) 56%, #1C1D24); }
@supports (color: oklch(from red l c h)){
  html[data-accent="lift"]{ --acc-hi: oklch(from var(--accent) max(l, .78) max(c, .08) h); }
}
html[data-accent="fixed"]{ --acc-hi: var(--acc-hi-fixed, var(--accent)); }

@media (min-width:768px){ :root{ --gut: 32px; --hdr-h: 76px; } }
@media (min-width:1200px){ :root{ --gut: 48px; } }
@media (min-width:1800px){ :root{ --maxw: 1480px; --fs-h1: 5.5rem; --fs-h2: 3.35rem; --fs-body: 1.12rem; } }
@media (min-width:2300px){ :root{ --maxw: 1640px; --fs-h1: 6rem; --fs-h2: 3.55rem; --fs-body: 1.17rem; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; background:var(--white); color:var(--body); font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:var(--fs-body); line-height:1.62; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; overflow-anchor:none; }
img,video,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
p,li{ text-wrap:pretty; }
h1,h2,h3,h4{ text-wrap:balance; hyphens:none; -webkit-hyphens:none; overflow-wrap:normal; margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure,dl,dd{ margin:0; }
::selection{ background:color-mix(in srgb, var(--accent) 34%, transparent); }
:focus-visible{ outline:2px solid var(--acc-ink); outline-offset:3px; }
:is(.sec--dark,.sec--dark2,.hero,.hdr,.ftr,.thx,.cta) :focus-visible{ outline-color:#fff; }
.skip{ position:absolute; left:-9999px; top:8px; z-index:200; background:#fff; color:var(--ink); padding:10px 14px; border-radius:var(--r-sm); }
.skip:focus{ left:8px; }
.wrap{ width:100%; max-width:calc(var(--maxw) + 2 * var(--gut)); margin:0 auto; padding:0 var(--gut); }

/* ─── Typo: Bricolage Grotesque kräftig, ein Keyword in Instrument Serif kursiv, Inter für Text ─── */
.h1,.h2,.h3{ font-family:'Montserrat',system-ui,sans-serif; color:var(--ink); }
.h1{ font-size:var(--fs-h1); font-weight:700; font-stretch:94%; line-height:1.0; letter-spacing:-.025em; color:#fff; }
.h2{ font-size:var(--fs-h2); font-weight:700; font-stretch:94%; line-height:1.06; letter-spacing:-.018em; }
main section:not(.hero) h2{ font-size:var(--fs-h2) !important; }
.h3{ font-size:var(--fs-h3); font-weight:650; font-stretch:96%; line-height:1.22; letter-spacing:-.005em; }
.kicker{ font-family:'Open Sans',sans-serif; font-weight:600; font-size:1rem; color:var(--acc-ink); margin-bottom:12px; letter-spacing:0; }
.sub{ margin-top:16px; max-width:640px; font-size:1.05em; line-height:1.6; color:var(--body); }
.head{ text-align:center; margin:0 auto clamp(36px, 3vw + 20px, 58px); max-width:880px; }
.head .sub{ margin-left:auto; margin-right:auto; }
.head--left{ text-align:left; margin-left:0; margin-right:0; }
.head--left .sub{ margin-left:0; }

/* ─── Sections ─────────────────────────────────────────── */
.sec{ position:relative; padding:var(--sec-y) 0; overflow:clip; }
.sec--white{ background:var(--white); }
.sec--gray{ background:var(--gray); }
.sec--dark{ background:var(--dark); }
.sec--dark2{ background:var(--dark2); }
section[id]{ scroll-margin-top:calc(var(--hdr-h) + 16px); }
.sec--dark,.sec--dark2,.hero,.ftr{ color:var(--dtext); }
:is(.sec--dark,.sec--dark2) :is(.h2,.h3){ color:#fff; }
:is(.sec--dark,.sec--dark2) .kicker{ color:var(--acc-hi); }
:is(.sec--dark,.sec--dark2) .sub{ color:var(--dtext); }
.sec-cta{ display:flex; justify-content:center; margin-top:clamp(30px, 3vw, 44px); }
.sec-cta[hidden]{ display:none; }

/* ─── Buttons: eckig und sachlich (Handwerk), eine Füllfarbe, Pfeil rutscht beim Hover ─── */
.ic{ width:1.1em; height:1.1em; flex:0 0 auto; }
.btn{ --bh:54px; position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:var(--bh); padding:0 24px; border-radius:var(--r-sm); border:0; font-family:'Open Sans',system-ui,sans-serif; font-weight:650; font-size:1rem; line-height:1.15; letter-spacing:0; white-space:nowrap; transition:translate .45s var(--ease), background-color .25s, box-shadow .25s, color .25s; }
.btn:hover{ translate:0 -1px; }
.btn:active{ translate:0 0; }
.btn-bd{ display:inline-grid; place-items:center; flex:0 0 auto; transition:transform .4s var(--ease); }
.btn-bd .ic{ width:18px; height:18px; }
/* Start-Icon zählt bei Text ohne Element auch als :last-child: nur das End-Icon bewegen */
.btn:hover > .btn-bd:last-child:not(.btn-bd--start){ transform:translateX(3px); }
.btn--lg{ --bh:58px; padding:0 28px; font-size:1.05rem; }
.btn--sm{ --bh:46px; padding:0 18px; font-size:.95rem; }
.btn--accent{ background:var(--accent); color:var(--on-accent); }
.btn--accent:hover{ background:color-mix(in srgb, var(--accent) 86%, #1C1D24); }
html[data-acclight="y"] .btn--accent:hover{ background:color-mix(in srgb, var(--accent) 88%, #fff); }
.btn--accent[disabled]{ opacity:.38; cursor:not-allowed; translate:none; }
.btn--glass{ background:rgba(255,255,255,.06); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42); }
.btn--glass:hover{ background:rgba(255,255,255,.14); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:#30323B; }
.btn--line{ background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px #C6CAD1; gap:6px; }
.btn--line:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn--line > .ic{ width:18px; height:18px; margin-left:-4px; }
.tlink{ display:inline-block; padding:11px 0; font-family:'Open Sans',sans-serif; font-weight:650; font-size:.95rem; line-height:1.35; color:var(--acc-ink); }
.nb{ white-space:nowrap; }
.tlink .ic{ display:inline-block; vertical-align:-.17em; margin-left:7px; transition:transform .35s var(--ease); }
.tlink:hover .ic{ transform:translateX(4px); }

/* ─── Header ───────────────────────────────────────────── */
.hdr{ position:fixed; top:0; left:0; right:0; z-index:100; background:transparent; box-shadow:0 1px 0 transparent; transition:background-color .3s ease, box-shadow .3s ease; }
.hdr.is-solid{ background:rgba(28,29,36,.97); box-shadow:0 1px 0 rgba(255,255,255,.07); }
.hdr.is-open{ background:#1C1D24; box-shadow:0 1px 0 rgba(255,255,255,.07); }
.hdr-in{ max-width:calc(var(--maxw) + 2 * var(--gut)); margin:0 auto; height:var(--hdr-h); display:flex; align-items:center; gap:24px; padding:0 var(--gut); }
.hdr-logo{ display:flex; align-items:center; height:100%; flex:0 0 auto; }
.hdr-logo img{ height:34px; width:auto; max-width:200px; object-fit:contain; object-position:left center; }
@media (min-width:768px){ .hdr-logo img{ height:42px; max-width:240px; } }
.hdr-name{ font-family:'Montserrat'; font-weight:700; color:#fff; font-size:1.15rem; }
.hdr-nav{ display:none; flex:1; justify-content:center; gap:clamp(20px, 2.3vw, 38px); }
.hdr-nav a{ position:relative; font-weight:550; font-size:.98rem; color:rgba(255,255,255,.9); padding:10px 0; transition:color .2s; text-shadow:0 1px 10px rgba(0,0,0,.35); }
.hdr-nav a::after{ content:''; position:absolute; left:0; right:0; bottom:4px; height:2px; background:var(--acc-hi); transform:scaleX(0); transform-origin:0 50%; transition:transform .3s var(--ease); }
.hdr-nav a:hover{ color:#fff; }
.hdr-nav a:hover::after,.hdr-nav a.is-active::after{ transform:scaleX(1); }
.hdr-cta{ display:none; margin-left:auto; }
.hdr-burger{ margin-left:auto; width:46px; height:46px; border-radius:var(--r-sm); border:0; background:rgba(28,29,36,.7); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); display:grid; place-content:center; gap:6px; }
.hdr-burger span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; transition:transform .3s var(--ease); }
.hdr.is-open .hdr-burger span:first-child{ transform:translateY(4px) rotate(45deg); }
.hdr.is-open .hdr-burger span:last-child{ transform:translateY(-4px) rotate(-45deg); }
@media (min-width:1080px){ .hdr-nav{ display:flex; } .hdr-cta{ display:inline-flex; margin-left:0; } .hdr-burger{ display:none; } }
.mnav{ background:#1C1D24; padding:2px var(--gut) 22px; border-bottom:1px solid rgba(255,255,255,.08); max-height:calc(100vh - var(--hdr-h)); overflow-y:auto; }
.mnav[hidden]{ display:none; }
.mnav a:not(.btn){ display:flex; align-items:center; justify-content:space-between; min-height:58px; border-bottom:1px solid rgba(255,255,255,.1); font-family:'Montserrat'; font-weight:650; font-size:1.1rem; color:#fff; }
.mnav a:not(.btn) .ic{ color:var(--acc-hi); width:18px; height:18px; }
.mnav .btn{ width:100%; margin-top:18px; }
@media (min-width:1080px){ .mnav{ display:none !important; } }

/* ─── Hero ─────────────────────────────────────────────── */
.hero{ position:relative; background:#121318; height:var(--hero-h, 100svh); display:flex; flex-direction:column; isolation:isolate; overflow:clip; }
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.hero-vid{ width:100%; height:100%; object-fit:cover; object-position:var(--hero-fx) 50%; }
@media (max-width:767px){ .hero-vid{ object-position:var(--hero-fx-m) 50%; } }
.hero-shade{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(14,15,19,.7) 0%, rgba(14,15,19,0) 24%),
  linear-gradient(0deg, rgba(14,15,19,.72) 0%, rgba(14,15,19,0) 32%),
  linear-gradient(90deg, rgba(14,15,19,.88) 0%, rgba(14,15,19,.72) 36%, rgba(14,15,19,.3) 66%, rgba(14,15,19,calc(.08 + var(--hero-ov-d))) 100%); }
@media (max-width:1079px){ .hero-shade{ background:
  linear-gradient(180deg, rgba(14,15,19,.82) 0%, rgba(14,15,19,.55) 18%, rgba(14,15,19,calc(.42 + var(--hero-ov-m))) 40%, rgba(14,15,19,.92) 100%); } }
.hero-grid{ position:relative; flex:1; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; padding-top:calc(var(--hdr-h) + 44px); padding-bottom:96px; }
.hero-copy{ min-width:0; max-width:880px; }
.sheet{ position:relative; }
.hero-kicker{ font-weight:600; font-size:1.04rem; color:var(--acc-hi); margin-bottom:16px; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.h1-l{ display:block; }
.h1 .em{ font-family:'Montserrat',Georgia,serif; font-style:italic; font-weight:400; font-size:1.14em; line-height:.92; letter-spacing:-.01em; color:#fff; }
.hero-lead{ margin-top:22px; max-width:600px; color:rgba(255,255,255,.88); font-size:clamp(1.06rem, 1rem + .3vw, 1.24rem); line-height:1.55; }
@media (min-width:1800px){ .hero-lead{ max-width:700px; } }
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; margin-top:32px; }
@media (max-width:599px){ .hero-ctas .btn{ width:100%; } .hero-grid{ padding-top:calc(var(--hdr-h) + 30px); padding-bottom:88px; } }
@media (min-width:600px){ .hero-ctas .btn{ min-width:240px; } }
/* Meisterkarte: echtes Inhaberfoto, nur am großen Bildschirm */
.mcard{ display:none; }
@media (min-width:1200px){
  .mcard{ position:absolute; right:var(--gut); bottom:118px; display:flex; align-items:center; gap:14px; width:300px; padding:10px 16px 10px 10px; border-radius:var(--r); background:#fff; color:var(--ink); box-shadow:inset 0 4px 0 var(--accent), 0 24px 40px -22px rgba(0,0,0,.8); animation:hero-in .8s .25s var(--ease) both; transition:translate .5s var(--ease); }
  .mcard:hover{ translate:0 -3px; }
  .mcard-img{ width:72px; height:72px; border-radius:var(--r-sm); object-fit:cover; object-position:50% 20%; flex:0 0 auto; margin-top:4px; }
  .mcard figcaption{ display:flex; flex-direction:column; line-height:1.3; min-width:0; padding-top:4px; }
  .mcard small{ font-size:.78rem; font-weight:600; color:var(--acc-ink); }
  .mcard b{ font-family:'Montserrat'; font-weight:700; font-size:1.12rem; }
  .mcard span{ font-size:.86rem; color:var(--body); }
}
@media (min-width:1200px) and (max-height:700px){ .mcard{ display:none; } }

.cta .sgw-row{ justify-content:center; }

/* ─── Laufband: Malerkrepp quer über die Hero-Unterkante ─── */
.tape{ position:absolute; z-index:2; left:-3%; right:-3%; bottom:26px; height:50px; overflow:hidden; rotate:-.9deg; background:var(--tape); color:var(--ink);
  box-shadow:0 10px 24px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.08); }
.tape::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%, rgba(0,0,0,.05)); }
@media (max-width:599px){ .tape{ height:44px; bottom:20px; rotate:-1.4deg; } }
.banner-track{ position:relative; display:flex; width:max-content; height:100%; animation:banner var(--banner-dur, 70s) linear infinite; will-change:transform; }
.tape.is-off .banner-track{ animation-play-state:paused; }
.banner-list{ display:flex; flex:0 0 auto; }
.banner-list li{ display:flex; align-items:center; gap:24px; padding-left:24px; height:100%; white-space:nowrap; font-family:'Montserrat'; font-weight:650; font-stretch:88%; font-size:1.02rem; text-transform:uppercase; letter-spacing:.07em; line-height:1; color:color-mix(in srgb, var(--ink) 88%, transparent); }
@media (max-width:599px){ .banner-list li{ font-size:.92rem; gap:18px; padding-left:18px; } }
.tape-tick{ width:9px; height:9px; border-radius:50%; background:currentColor; opacity:.35; flex:0 0 auto; }
@keyframes banner{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ─── Vorteile: drei (oder vier) normale Karten (Maxim 19.10.2026: ganz normal) ─── */
.bcards{ display:grid; gap:clamp(14px, 1.6vw, 22px); grid-template-columns:minmax(0,1fr); }
@media (min-width:768px){ .bcards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .bcards.n3{ grid-template-columns:repeat(3, minmax(0,1fr)); } .bcards.n4{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.bcard{ display:flex; flex-direction:column; padding:clamp(24px, 2.4vw, 32px); border-radius:var(--r); background:#fff; color:var(--body); box-shadow:inset 0 0 0 1px rgba(28,29,36,.07); transition:translate .6s var(--ease), box-shadow .6s var(--ease); }
.sec--white .bcard{ background:var(--gray); box-shadow:none; }
.bcard:hover{ translate:0 -4px; box-shadow:inset 0 0 0 1px rgba(28,29,36,.07), 0 22px 30px -24px rgba(28,29,36,.45); }
.bcard-ic{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:18px; border-radius:var(--r-sm); background:var(--accent); color:var(--on-accent); }
.bcard-ic .ic{ width:20px; height:20px; }
.bcard p{ margin-top:8px; font-size:.98rem; line-height:1.6; }

/* ─── Anfrage: Auftragsblatt mit Farbtonleiste ─── */
.inq-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(34px, 5vw, 88px); align-items:center; }
@media (min-width:1024px){ .inq-grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); } }
.inq-copy .head{ margin-bottom:0; }
.inq-steps{ display:none; gap:10px; margin-top:30px; max-width:460px; }
@media (min-width:1024px){ .inq-steps{ display:grid; } }
.inq-steps li{ display:flex; gap:14px; align-items:center; padding:11px 14px 11px 11px; border-radius:var(--r-sm); background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:background-color .35s, box-shadow .35s; }
.inq-no{ width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center; flex:0 0 auto; color:transparent; box-shadow:inset 0 0 0 2px rgba(255,255,255,.3); transition:background-color .35s, color .35s, box-shadow .35s; }
.inq-no .ic{ width:16px; height:16px; }
.inq-t{ display:flex; flex-direction:column; line-height:1.3; }
.inq-t b{ font-family:'Montserrat'; font-weight:650; color:rgba(255,255,255,.82); font-size:1.02rem; }
.inq-t small{ font-size:.88rem; color:rgba(255,255,255,.55); }
.inq-steps li.is-on{ background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.inq-steps li.is-on .inq-no{ box-shadow:inset 0 0 0 2px var(--acc-hi); }
.inq-steps li.is-on .inq-t b{ color:#fff; }
.inq-steps li.is-done .inq-no{ background:var(--accent); color:var(--on-accent); box-shadow:none; }
.inq-alt{ margin-top:24px; font-size:1rem; color:rgba(255,255,255,.7); }
.inq-alt a{ font-weight:650; color:#fff; border-bottom:2px solid var(--acc-hi); padding-bottom:1px; white-space:nowrap; }
.order{ position:relative; border-radius:var(--r); overflow:hidden; background:#fff; box-shadow:0 30px 60px -40px #000; }

.quiz{ position:relative; z-index:1; padding:clamp(18px, 2.4vw, 32px); padding-top:clamp(18px, 2.2vw, 26px); overflow-anchor:none; color:var(--body); }
.quiz-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:2px solid var(--ink); }
.quiz-title{ font-family:'Montserrat'; font-weight:700; font-size:clamp(1.2rem, 1.08rem + .45vw, 1.45rem); letter-spacing:-.01em; color:var(--ink); line-height:1.15; }
.quiz-logo{ height:30px; width:auto; max-width:150px; min-width:0; object-fit:contain; }
@media (max-width:479px){ .quiz-logo{ display:none; } }
.quiz-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0 14px; margin-bottom:14px; border-bottom:1px solid #E1E3E7; }
.quiz-count{ font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.quiz-count b{ color:var(--ink); }
.quiz-bars{ display:flex; gap:6px; flex:0 1 200px; }
.quiz-bars li{ flex:1; height:6px; border-radius:2px; background:#E5E7EB; overflow:hidden; }
.quiz-bars i{ display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; transition:transform .5s var(--ease); }
.quiz-bars li.is-on i,.quiz-bars li.is-done i{ transform:scaleX(1); }
.qstep{ border:0; margin:0; padding:0; min-width:0; }
.qstep[hidden]{ display:none; }
.qlegend{ display:block; float:left; width:100%; padding:0; font-family:'Montserrat'; font-weight:700; font-size:clamp(1.18rem, 1.06rem + .48vw, 1.4rem); line-height:1.2; color:var(--ink); outline:0; text-wrap:balance; }
.qlegend + *{ clear:both; }
.qtext{ padding-top:4px; color:var(--body); font-size:.96rem; }
/* Leistung: Auswahlkarten */
.sopts{ display:grid; gap:10px; padding-top:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:480px){ .sopts{ grid-template-columns:1fr 1fr; } .sopts.n1{ grid-template-columns:1fr; } }
.sopt{ position:relative; display:flex; align-items:center; gap:13px; min-height:62px; padding:12px 16px 12px 16px; border-radius:var(--r-sm); background:#fff; box-shadow:inset 0 0 0 1.5px #D4D7DD; cursor:pointer; transition:box-shadow .25s, background-color .25s, translate .45s var(--ease); }
.sopt:hover{ translate:0 -2px; box-shadow:inset 0 0 0 1.5px #8C909A, 0 12px 20px -16px rgba(28,29,36,.5); }
.sopt input{ position:absolute; opacity:0; width:1px; height:1px; }
.sopt-t{ flex:1; font-weight:600; font-size:.96rem; line-height:1.3; color:var(--ink); }
.sopt-box{ width:22px; height:22px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; color:transparent; box-shadow:inset 0 0 0 1.5px #C3C7CE; transition:background-color .2s, color .2s, box-shadow .2s; }
.sopt-box .ic{ width:13px; height:13px; }
.sopt:has(input:checked){ background:color-mix(in srgb, var(--accent) 10%, #fff); box-shadow:inset 0 0 0 2px var(--acc-ink); }
.sopt input:checked ~ .sopt-box{ background:var(--ink); color:#fff; box-shadow:none; }
.sopt:has(input:focus-visible){ outline:2px solid var(--ink); outline-offset:2px; }
/* Objekt: Ankreuz-Karten */
.qopts{ display:grid; gap:10px; padding-top:16px; }
@media (min-width:480px){ .qopts{ grid-template-columns:1fr 1fr; } .qopts.n1{ grid-template-columns:1fr; } }
.qopt{ position:relative; display:flex; align-items:center; gap:13px; min-height:62px; padding:12px 16px 12px 14px; border-radius:var(--r-sm); background:#fff; box-shadow:inset 0 0 0 1.5px #D4D7DD; cursor:pointer; transition:box-shadow .25s, background-color .25s, translate .45s var(--ease); }
.qopt:hover{ translate:0 -2px; box-shadow:inset 0 0 0 1.5px #8C909A, 0 12px 20px -16px rgba(28,29,36,.5); }
.qopt input{ position:absolute; opacity:0; width:1px; height:1px; }
.qopt-box{ width:24px; height:24px; border-radius:var(--r-sm); flex:0 0 auto; display:grid; place-items:center; background:#fff; box-shadow:inset 0 0 0 2px #BEC2CA; color:transparent; transition:background-color .2s, box-shadow .2s, color .2s; }
.qopt-box .ic{ width:15px; height:15px; }
.qopt-t{ font-weight:600; font-size:.96rem; line-height:1.3; color:var(--ink); }
.qopt:has(input:checked){ background:color-mix(in srgb, var(--accent) 10%, #fff); box-shadow:inset 0 0 0 2px var(--acc-ink); }
.qopt input:checked + .qopt-box{ background:var(--ink); box-shadow:none; color:#fff; }
.qopt input:focus-visible + .qopt-box{ outline:2px solid var(--ink); outline-offset:3px; }
.qnav{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; }
.qnav .btn{ min-width:150px; }
@media (max-width:420px){ .qnav .btn{ min-width:0; flex:1; padding:0 16px; } .qnav > span{ display:none; } }
.qfields{ display:grid; gap:12px; padding-top:16px; grid-template-columns:1fr 1fr; }
@media (max-width:339px){ .qfields{ grid-template-columns:1fr; } }
.fld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.fld span{ font-size:.86rem; font-weight:600; color:var(--ink); }
.fld small{ font-weight:500; color:var(--muted); }
.fld i,.consent i{ font-style:normal; color:var(--acc-ink); }
.fld input,.fld textarea{ width:100%; min-width:0; height:52px; padding:0 14px; border-radius:var(--r-sm); border:1.5px solid #CFD3D9; background:#fff; font:inherit; font-size:16px; color:var(--ink); transition:border-color .2s, box-shadow .2s; }
.fld textarea{ height:auto; min-height:76px; padding:11px 14px; resize:vertical; line-height:1.45; }
.fld input:focus,.fld textarea:focus{ outline:0; border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.fld .is-bad{ border-color:#C62828; }
.fld--area{ margin-top:12px; }
.consent{ display:flex; gap:12px; align-items:flex-start; margin-top:14px; font-size:.86rem; line-height:1.5; color:var(--body); cursor:pointer; }
.consent input{ width:20px; height:20px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--ink); }
.consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.consent.is-bad span{ color:#C62828; }
.qerr{ margin-top:12px; font-size:.92rem; color:#C62828; font-weight:600; }
.qdemo{ display:flex; gap:8px; align-items:center; margin-top:14px; font-size:.83rem; color:var(--muted); }
.qdemo .ic{ width:15px; height:15px; }
.qsend{ flex:1 1 auto; max-width:380px; white-space:normal; text-align:center; }
@media (max-width:559px){ .qnav:has(.qsend){ flex-direction:column-reverse; align-items:stretch; } .qnav:has(.qsend) .btn{ width:100%; max-width:none; } .qnav:has(.qsend) > span{ display:none; } }

/* ─── Leistungen: schlichte Karten (Icon oder Bild, Titel, kurzer Text, Link), gleichmäßiges Raster ─── */
.svc{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(14px, 1.6vw, 22px); --per:3; }
.svc.n4,.svc.n7,.svc.n8{ --per:4; }
.svc.n2{ --per:2; max-width:820px; margin:0 auto; }
.scard{ position:relative; display:flex; flex-direction:column; flex:0 0 calc((100% - (var(--per) - 1) * clamp(14px, 1.6vw, 22px)) / var(--per)); min-width:0; padding:clamp(22px, 2.2vw, 30px); border-radius:var(--r); background:var(--gray); color:var(--body); transition:translate .6s var(--ease), box-shadow .6s var(--ease); }
.sec--gray .scard{ background:#fff; box-shadow:inset 0 0 0 1px rgba(28,29,36,.07); }
.scard:hover{ translate:0 -4px; box-shadow:0 22px 30px -24px rgba(28,29,36,.45); }
.scard-ic{ display:grid; place-items:center; width:46px; height:46px; margin-bottom:18px; border-radius:var(--r-sm); background:var(--ink); color:#fff; }
.scard-ic .ic{ width:22px; height:22px; }
.scard-img{ margin:calc(-1 * clamp(22px, 2.2vw, 30px)) calc(-1 * clamp(22px, 2.2vw, 30px)) 18px; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r) var(--r) 0 0; background:#E3E5E9; }
.scard-img img{ width:100%; height:100%; object-fit:cover; }
.scard p{ margin-top:8px; font-size:.96rem; line-height:1.58; }
.scard .tlink{ margin-top:auto; padding-bottom:0; align-self:flex-start; }
.scard p + .tlink{ padding-top:14px; }
.svc-more{ margin:clamp(28px, 3vw, 40px) auto 0; max-width:760px; text-align:center; font-size:1rem; color:var(--body); }
@media (max-width:1023px){ .svc{ --per:2 !important; } }
@media (max-width:599px){ .svc{ --per:1 !important; } }

/* ─── Zwischenstand → Ergebnis: echte Paare, Etiketten aus Malerkrepp ─── */
.pairs{ display:grid; gap:clamp(26px, 3vw, 44px); grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .pairs.n2,.pairs.n4{ grid-template-columns:repeat(2, minmax(0,1fr)); } .pairs.n3{ grid-template-columns:repeat(3, minmax(0,1fr)); } .pairs.n1{ max-width:820px; margin:0 auto; } }
.pair{ transition:translate .6s var(--ease); }
.pair:hover{ translate:0 -4px; }
.pair-imgs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px, 1vw, 12px); }
.pair-img{ position:relative; aspect-ratio:3/4; border-radius:var(--r-sm); overflow:hidden; background:#2E3038; }
.pair-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.pair:hover .pair-img img{ transform:scale(1.03); }
.krepp{ position:absolute; top:10px; left:10px; padding:5px 10px; border-radius:var(--r-sm); background:rgba(14,15,19,.78); color:#fff; font-weight:600; font-size:.8rem; line-height:1.2; }
.pair-img.is-after .krepp{ left:auto; right:10px; background:var(--accent); color:var(--on-accent); }
.pair figcaption{ margin-top:14px; font-size:.98rem; line-height:1.5; color:var(--dtext); text-align:center; }
.sec--white .pair figcaption,.sec--gray .pair figcaption{ color:var(--body); }

/* ─── Galerie: gleichmäßiges Raster, keine schrägen Abzüge ─── */
.gal{ display:grid; gap:clamp(12px, 1.6vw, 22px); grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:900px){ .gal{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.gal-tile{ position:relative; display:block; border-radius:var(--r); overflow:hidden; background:#fff; transition:translate .6s var(--ease), box-shadow .6s var(--ease); }
.gal-tile:hover{ translate:0 -4px; box-shadow:0 24px 32px -24px rgba(28,29,36,.5); }
.gal-tile.is-more.is-collapsed{ display:none; }
.gal-ph{ display:block; aspect-ratio:4/3; overflow:hidden; background:#E3E5E9; }
.gal-ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.gal-tile:hover .gal-ph img{ transform:scale(1.03); }
.gal-label{ display:block; padding:11px 14px 12px; font-size:.9rem; font-weight:600; line-height:1.35; color:var(--ink); }
.sec--white .gal-tile{ background:var(--gray); }
@media (max-width:479px){ .gal-label{ font-size:.82rem; padding:9px 10px 10px; } }
.lbx{ position:fixed; inset:0; z-index:200; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:clamp(10px, 2vw, 28px); background:rgba(14,15,19,.95); overscroll-behavior:contain; touch-action:none; }
.lbx[hidden]{ display:none; }
.lbx-fig{ margin:0; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.lbx-fig img{ max-width:100%; max-height:calc(100vh - 140px); width:auto; height:auto; object-fit:contain; border-radius:2px; }
.lbx-fig figcaption{ display:flex; gap:14px; color:#fff; font-weight:600; }
.lbx-no{ color:rgba(255,255,255,.6); }
.lbx-btn{ width:50px; height:50px; display:grid; place-items:center; border:0; border-radius:6px; background:rgba(255,255,255,.1); color:#fff; }
.lbx-btn .ic{ width:22px; height:22px; }
.lbx-x{ position:absolute; top:14px; right:14px; z-index:2; }
@media (max-width:699px){ .lbx{ grid-template-columns:minmax(0,1fr); } .lbx-prev,.lbx-next{ position:absolute; bottom:16px; } .lbx-prev{ left:calc(50% - 58px); } .lbx-next{ left:calc(50% + 8px); } }

/* ─── Ablauf: drei/vier Schritte, eckige Nummern an einer dünnen neutralen Linie ─── */
.steps{ position:relative; display:grid; gap:28px; grid-template-columns:minmax(0,1fr); max-width:1120px; margin:0 auto; counter-reset:none; }
.steps::before{ content:''; position:absolute; left:23px; top:24px; bottom:24px; width:2px; background:rgba(255,255,255,.16); }
.step{ position:relative; display:flex; gap:20px; align-items:flex-start; }
.step-no{ position:relative; z-index:1; display:grid; place-items:center; width:48px; height:48px; flex:0 0 auto; border-radius:var(--r-sm); background:var(--accent); color:var(--on-accent); font-family:'Montserrat'; font-weight:700; font-size:1.25rem; line-height:1; }
.step-t{ padding-top:10px; min-width:0; }
.step-t p{ margin-top:8px; font-size:.98rem; line-height:1.6; color:var(--dtext); }
.process .step .h3{ color:#fff; }
@media (min-width:900px){
  .steps{ grid-template-columns:repeat(var(--cols, 3), minmax(0,1fr)); gap:clamp(28px, 3vw, 48px); }
  .steps::before{ left:0; right:calc(100% / var(--cols, 3)); top:23px; bottom:auto; width:auto; height:2px; }
  .step{ flex-direction:column; gap:22px; }
  .step-t{ padding-top:0; max-width:340px; }
}

/* ─── Über uns: echtes Foto mit Farbkarten-Etikett ─── */
.about-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(44px, 5vw, 88px); align-items:center; }
@media (min-width:1024px){ .about-grid{ grid-template-columns:minmax(0, 6fr) minmax(0, 6fr); } }
.aphoto{ position:relative; margin-bottom:26px; }
.aphoto-img{ aspect-ratio:4/3.3; border-radius:var(--r); overflow:hidden; background:#E3E5E9; }
.aphoto-img img{ width:100%; height:100%; object-fit:cover; }
.alabel{ position:absolute; left:clamp(14px, 2vw, 24px); bottom:-26px; display:flex; flex-direction:column; min-width:230px; max-width:calc(100% - 28px); padding:20px 20px 16px; border-radius:var(--r-sm); background:#fff; color:var(--ink); box-shadow:0 22px 34px -20px rgba(28,29,36,.55), inset 0 0 0 1px rgba(28,29,36,.06); overflow:hidden; transition:translate .5s var(--ease); }
.alabel:hover{ translate:0 -3px; }
.alabel b{ font-family:'Montserrat'; font-weight:700; font-size:1.18rem; line-height:1.2; }
.alabel span{ font-size:.9rem; color:var(--body); }
.alabel img{ height:36px; width:auto; max-width:200px; object-fit:contain; }
.aloc{ display:flex; align-items:center; gap:8px; margin:-8px 0 18px; font-weight:600; color:var(--ink); }
.aloc .ic{ width:18px; height:18px; color:var(--acc-ink); }
.atext + .atext{ margin-top:14px; }
.afacts{ display:grid; gap:10px; margin-top:24px; }
.afacts li{ display:flex; align-items:center; gap:14px; font-size:.98rem; color:var(--ink); font-weight:500; line-height:1.4; }
.afact-ic{ display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-sm); flex:0 0 auto; background:var(--accent); color:var(--on-accent); }
.afact-ic .ic{ width:14px; height:14px; }
.acopy > .btn{ margin-top:28px; }

/* ─── FAQ ──────────────────────────────────────────────── */
.faq-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px, 4vw, 76px); }
@media (min-width:1024px){ .faq-grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:start; } .faq-side{ position:sticky; top:calc(var(--hdr-h) + 36px); } }
.faq-side .head{ margin-bottom:26px; }
.callcard{ max-width:420px; padding:24px 24px 26px; border-radius:var(--r); background:#fff; box-shadow:inset 0 4px 0 var(--accent), inset 0 0 0 1px rgba(28,29,36,.07); transition:translate .5s var(--ease), box-shadow .5s var(--ease); }
.callcard:hover{ translate:0 -4px; box-shadow:inset 0 4px 0 var(--accent), 0 22px 30px -24px rgba(28,29,36,.45); }
.callcard-h{ font-family:'Montserrat'; font-weight:700; font-size:1.22rem; line-height:1.25; color:var(--ink); }
.callcard-p{ margin-top:6px; font-size:.98rem; }
.callcard .btn{ margin-top:18px; }
.acc{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.acc-it{ border-radius:var(--r); background:#fff; transition:background-color .3s, box-shadow .3s, translate .5s var(--ease); }
.sec--white .acc-it{ background:var(--gray); }
.acc-it:hover{ translate:0 -2px; }
.acc-it.is-open{ box-shadow:inset 3px 0 0 var(--accent), inset 0 0 0 1px rgba(28,29,36,.1); }
.acc-h{ font:inherit; }
.acc-h button{ width:100%; display:flex; align-items:center; gap:16px; padding:18px 18px 18px 22px; background:none; border:0; text-align:left; border-radius:var(--r); outline-offset:-3px; }
.acc-q{ flex:1; font-family:'Montserrat'; font-weight:650; font-size:clamp(1.03rem, 1rem + .24vw, 1.16rem); line-height:1.35; color:var(--ink); }
.acc-pm{ width:36px; height:36px; flex:0 0 auto; display:grid; place-items:center; border-radius:6px; background:var(--gray); color:var(--ink); transition:transform .45s var(--ease), background-color .25s, color .25s; }
.sec--white .acc-pm{ background:#fff; }
.acc-pm .ic{ width:18px; height:18px; }
.acc-it.is-open .acc-pm{ transform:rotate(45deg); background:var(--accent); color:var(--on-accent); }
.acc-a{ overflow:hidden; padding:0 64px 22px 22px; }
.acc-a[hidden]{ display:none; }
.acc-a p{ line-height:1.7; }
@media (max-width:599px){ .acc-h button{ padding:16px 14px 16px 16px; gap:12px; } .acc-a{ padding:0 16px 18px 16px; } }

/* ─── Kontakt: Kontaktkarten + Bautafel ─── */
.contact-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(40px, 4vw, 80px); align-items:center; }
@media (min-width:1024px){ .contact-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
.ccopy .head{ margin-bottom:26px; }
.ctiles{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.ctile{ display:flex; align-items:center; gap:16px; padding:12px 18px 12px 12px; border-radius:var(--r); background:#fff; box-shadow:inset 0 0 0 1px rgba(28,29,36,.08); transition:translate .5s var(--ease), box-shadow .5s var(--ease); }
.sec--white .ctile{ background:var(--gray); box-shadow:none; }
.ctile:hover{ translate:0 -3px; box-shadow:0 20px 26px -20px rgba(28,29,36,.5); }
.ctile-ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:var(--r-sm); flex:0 0 auto; background:var(--ink); color:var(--acc-hi); }
.ctile-ic .ic{ width:21px; height:21px; }
.ctile-t{ display:flex; flex-direction:column; min-width:0; }
.ctile-t small{ font-weight:600; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.ctile-t b{ font-family:'Montserrat'; font-weight:650; color:var(--ink); font-size:1.08rem; line-height:1.35; overflow-wrap:anywhere; }
.ctile-go{ margin-left:auto; color:var(--muted); transition:transform .35s var(--ease), color .2s; }
.ctile-go .ic{ width:18px; height:18px; }
a.ctile:hover .ctile-go{ color:var(--ink); transform:translateX(3px); }
.chours{ display:grid; gap:4px; margin-top:16px; max-width:420px; font-size:.95rem; }
.chours div{ display:flex; justify-content:space-between; gap:16px; }
.chours dt{ color:var(--muted); }
.chours dd{ color:var(--ink); font-weight:600; }
/* Formularkarte rechts: Name, Telefon, Notizen (Maxim 19.10.2026) */
.kcard{ padding:clamp(24px, 2.6vw, 36px); border-radius:var(--r); background:#fff; box-shadow:inset 0 0 0 1px rgba(28,29,36,.08), 0 24px 40px -32px rgba(28,29,36,.4); }
.sec--white .kcard{ background:var(--gray); box-shadow:none; }
.kform{ display:grid; gap:14px; }
.kform-h{ font-family:'Montserrat'; font-weight:700; font-size:clamp(1.2rem, 1.08rem + .45vw, 1.45rem); letter-spacing:-.01em; color:var(--ink); line-height:1.15; }
.kform .qerr{ margin-top:0; }
.kform-btn{ justify-self:start; }
@media (max-width:599px){ .kform-btn{ justify-self:stretch; } }
.kform-note{ font-size:.82rem; line-height:1.45; color:var(--muted); }
.kform-note a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }

/* ─── CTA: Projektfoto über die volle Breite, kompakt (kein min-height) ─── */
.cta{ display:flex; align-items:center; text-align:center; isolation:isolate; background:#16171C; padding:clamp(56px, 3vw + 36px, 84px) 0; color:var(--dtext); }
.cta-img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.cta-veil{ position:absolute; inset:0; z-index:-1; background:
  radial-gradient(80% 95% at 50% 50%, rgba(14,15,19,.74) 0%, rgba(14,15,19,.56) 100%),
  linear-gradient(180deg, rgba(14,15,19,.58) 0%, rgba(14,15,19,0) 30%, rgba(14,15,19,0) 68%, rgba(14,15,19,.7) 100%); }
.cta--plain .cta-veil{ background:linear-gradient(180deg, #22232A, #16171C); }
.cta .head{ margin-bottom:0; }
.cta .h2{ color:#fff; text-shadow:0 2px 26px rgba(0,0,0,.45); }
.cta .kicker{ color:var(--acc-hi); text-shadow:0 1px 12px rgba(0,0,0,.5); }
.cta .sub{ color:rgba(255,255,255,.88); }
.cta-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:clamp(28px, 3vw, 40px); }
@media (min-width:600px){ .cta-ctas .btn{ min-width:240px; } }
@media (max-width:599px){ .cta-ctas .btn{ width:100%; } }

/* ─── Footer ───────────────────────────────────────────── */
.ftr{ background:var(--oil); padding:clamp(52px, 5vw, 80px) 0 26px; font-size:.96rem; color:rgba(255,255,255,.8); }
.ftr-grid{ display:grid; gap:36px; }
@media (min-width:768px){ .ftr-grid{ grid-template-columns:1fr 1fr; gap:40px 48px; } }
@media (min-width:1100px){ .ftr-grid{ grid-template-columns:1.3fr 1fr .8fr 1fr; } }
.ftr-logo{ height:46px; max-width:230px; width:auto; object-fit:contain; object-position:left center; margin-bottom:18px; }
.ftr-name{ font-family:'Montserrat'; font-weight:700; color:#fff; font-size:1.25rem; margin-bottom:14px; }
.ftr-brand p{ line-height:1.65; max-width:380px; }
.ftr-h{ font-family:'Montserrat'; font-weight:700; color:#fff; font-size:1.02rem; margin-bottom:16px; }
.ftr-col li{ margin-bottom:10px; }
.ftr-col a{ color:rgba(255,255,255,.8); transition:color .2s; }
.ftr-col a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.ftr-contact li{ display:flex; gap:10px; align-items:flex-start; }
.ftr-contact .ic{ color:var(--acc-hi); width:17px; height:17px; margin-top:4px; }
.ftr-contact a,.ftr-contact span{ overflow-wrap:anywhere; }
.ftr-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px; margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); }
.ftr-copy{ color:rgba(255,255,255,.62); font-size:.86rem; }
.ftr-badge{ display:inline-flex; align-items:center; gap:10px; color:rgba(255,255,255,.62); font-size:.8rem; transition:color .2s; }
.ftr-badge img{ width:84px; height:auto; }
.ftr-badge:hover{ color:#fff; }
.ftr-legal{ display:flex; gap:20px; }
.ftr-legal a{ color:rgba(255,255,255,.8); font-size:.9rem; }
.ftr-legal a:hover{ color:#fff; }
@media (max-width:767px){ .ftr-bottom{ flex-direction:column; align-items:flex-start; } }

/* ─── WhatsApp ─────────────────────────────────────────── */
.wa{ position:fixed; right:18px; bottom:18px; z-index:90; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px -8px rgba(0,0,0,.45); transition:translate .4s var(--ease), scale .4s var(--ease); }
.wa .ic{ width:30px; height:30px; }
.wa:hover{ translate:0 -3px; scale:1.04; }
@media (min-width:768px){ .wa{ right:24px; bottom:24px; } }

/* ─── Danke-Popup: kompakt, ohne Vollbild-Hintergrund ──── */
.thx{ position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:16px; pointer-events:none; }
.thx[hidden]{ display:none; }
.thx-card{ pointer-events:auto; position:relative; width:min(420px, 100%); max-height:330px; padding:30px 24px 22px; border-radius:var(--r); background:var(--dark); box-shadow:inset 0 6px 0 var(--accent), inset 0 0 0 1px rgba(255,255,255,.1), 0 40px 100px -20px rgba(0,0,0,.7); text-align:center; color:var(--dtext); overflow:hidden; animation:thx-in .5s var(--ease); }
@keyframes thx-in{ from{ opacity:0; transform:translateY(16px) scale(.97); } }
.thx-x{ position:absolute; top:12px; right:10px; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:6px; background:rgba(255,255,255,.07); color:#fff; z-index:2; }
.thx-logo{ height:40px; max-width:210px; width:auto; object-fit:contain; margin:0 auto 14px; position:relative; z-index:1; }
.thx-h{ font-family:'Montserrat'; font-weight:700; font-size:1.7rem; color:#fff; line-height:1.1; position:relative; z-index:1; outline:0; }
.thx-p{ margin-top:8px; font-size:.95rem; line-height:1.5; position:relative; z-index:1; }
.thx-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; position:relative; z-index:1; }
.thx-btns .btn{ --bh:48px; padding:0 12px; width:100%; gap:8px; }
.thx-btns .btn:only-child{ grid-column:1 / -1; }
.thx-confetti{ position:absolute; inset:0; pointer-events:none; }
.thx-confetti i{ position:absolute; left:50%; top:38%; width:8px; height:12px; border-radius:1px; opacity:0; animation:conf 1.5s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes conf{ 0%{ opacity:1; transform:translate(-50%,-50%) rotate(0); } 100%{ opacity:0; transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); } }

/* ─── Reveals ─────────────────────────────────────────── */
html.rv-on .rv{ opacity:0; transform:translate3d(0,16px,0); transition:opacity .42s ease-out, transform .48s var(--ease); transition-delay:min(calc(var(--d, 0ms) * .6), 180ms); }
@media (max-width:860px){ html.rv-on .rv{ transition-delay:0s; } }
html.rv-on .rv.in{ opacity:1; transform:none; }
html.js .sheet > *{ animation:hero-in .7s var(--ease) both; }
html.js .sheet > :nth-child(2){ animation-delay:.06s; } html.js .sheet > :nth-child(3){ animation-delay:.12s; } html.js .sheet > :nth-child(n+4){ animation-delay:.18s; }
@keyframes hero-in{ from{ opacity:0; transform:translateY(18px); } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .banner-track{ animation:none; }
  html.rv-on .rv{ opacity:1; transform:none; }
}

/* WhatsApp-Knopf immer sichtbar, nie ausblenden (Maxim/Boschi 15.10.2026) */
.wa.is-off,.wa.is-away,.wa.is-hide,.at-top .wa{opacity:1!important;visibility:visible!important;pointer-events:auto!important;translate:none!important;transform:none}

/* Maxim 19.10.2026 (Schwarzwälder): Laufband satt in der Markenfarbe, Schrift hell, kein Krepp-Mischton */
.tape{ background:var(--accent); color:var(--on-accent, #fff); box-shadow:0 10px 24px -14px rgba(0,0,0,.7); }
.tape::before{ display:none; }
.banner-list li{ color:var(--on-accent, #fff); }
.tape-tick{ opacity:.55; }
/* Lange E-Mail in Kontaktzeilen nicht mitten im Wort umbrechen (Schanzer, Handy) */
.ctile-t b{ overflow-wrap:normal; word-break:normal; }
@media (max-width:480px){ .ctile-t b{ font-size:.92rem; letter-spacing:-.01em; } }