/* =========================================================================
   NORDMANN Haushaltsauflösung — Google-Ads-Landingpage Oldenburg
   Design-Rezept "Leinen & Kupfer": Navy aus dem Logo als Tiefe, warmes
   Leinenpapier als Fläche, das Kupfer des Logos als einziger Akzent.
   Fraunces (weiche Serife) für die Überschriften, Manrope im Text.
   ========================================================================= */

/* --- Schriften (lokal) --------------------------------------------------- */
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* --- Marken-Werte -------------------------------------------------------- */
:root{
  --ink:#233453;          /* Navy aus dem Logo */
  --ink-2:#2B3F63;
  --ink-3:#354B72;
  --paper:#FFFFFF;
  --paper-2:#F6F3EE;      /* Leinen, 96 % Helligkeit */
  --line:#E8E3DB;
  --line-2:#D6CFC4;
  --txt:#1E2433;
  --txt-2:#4F5668;
  --txt-3:#7C8494;
  --acc:#B5703F;          /* Kupfer aus dem Logo — der einzige Akzent */
  --acc-h:#C47C4A;
  --acc-2:#9A5A2C;        /* Kupfer auf hellem Grund (Text, Icons) */
  --acc-3:#E6B48C;        /* Kupfer auf dunklem Grund */
  --sand:#F1E3D3;         /* helle Kupferfläche für Chips und Marker */
  --on-dark:#F4F1EC;
  --on-dark-2:#B8C0CF;
  --dark-line:rgba(255,255,255,.11);
  --gut:#3F8F3A;
  --schlecht:#B7473C;
  --wa:#25D366;

  --f-d:'Fraunces',Georgia,'Times New Roman',serif;
  --f-b:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-btn:10px;  --r-klein:14px;  --r:20px;  --r-gross:26px;  --r-pille:999px;

  --sh:0 1px 2px rgba(35,52,83,.04), 0 14px 32px rgba(35,52,83,.06);
  --sh-l:0 2px 4px rgba(35,52,83,.05), 0 28px 60px rgba(35,52,83,.09);
  --sh-acc:0 10px 26px rgba(181,112,63,.24);

  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:linear(0,.28 7.6%,.79 17%,.99 22.4%,1.06 26%,1.08 30%,1.03 39%,1 50%,1 100%);
  --wrap:1180px;
}

/* --- Grundlagen ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--txt);
  font:400 16px/1.65 var(--f-b);
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,table{margin:0;padding:0}
p,li{text-wrap:pretty}
ul{list-style:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
section[id]{scroll-margin-top:84px}
.sec{position:relative;padding:clamp(4rem,7.4vw,6.6rem) 0}
.s-paper{background:var(--paper)}
.s-paper2{background:var(--paper-2)}
.s-dark{background:var(--ink);color:var(--on-dark)}
.s-dark p{color:var(--on-dark-2)}
.sec > .wrap{position:relative;z-index:1}

/* Hintergrund-Deko: ein leiser Kupferschein in der Ecke und das Hausdach aus
   dem Logo als große, fast durchsichtige Linie — nur in einzelnen Sektionen. */
.deko{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.deko::before{
  content:"";position:absolute;width:44rem;height:44rem;border-radius:50%;
  background:radial-gradient(circle,rgba(181,112,63,.12) 0%,rgba(181,112,63,0) 66%);
  top:-15rem;right:-12rem;
}
.deko--links::before{right:auto;left:-15rem;top:auto;bottom:-16rem}
.deko__dach{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  width:min(52vw,720px);height:auto;opacity:.06;
}
.deko__dach path{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:square;stroke-linejoin:miter}
.s-dark .deko__dach{opacity:.08}
.s-dark .deko__dach path{stroke:#fff}
.s-dark .deko::before{background:radial-gradient(circle,rgba(230,180,140,.14) 0%,rgba(230,180,140,0) 66%)}

/* --- Typografie ---------------------------------------------------------- */
.kicker{
  display:block;margin:0 0 .7rem;font:600 .9375rem/1.4 var(--f-b);
  color:var(--acc-2);letter-spacing:0;
}
.s-dark .kicker,.kontakt .kicker{color:var(--acc-3)}

h2,.h2{
  font:500 clamp(1.6rem,3.1vw,2.35rem)/1.12 var(--f-d);
  letter-spacing:-.012em;color:var(--txt);text-wrap:balance;
}
.s-dark h2,.s-dark .h2,.kontakt h2{color:var(--on-dark)}
h2 .z{display:block}                       /* erzwungener Zeilenumbruch */
h2 .a{display:block;color:var(--acc-2)}    /* farbiger Teil, eigene Zeile */
.s-dark h2 .a,.kontakt h2 .a{color:var(--acc-3)}

h3{font:600 1.14rem/1.28 var(--f-d);color:var(--txt);letter-spacing:-.008em}
.s-dark h3,.kontakt h3{color:var(--on-dark)}

.lead{font-size:1.0625rem;line-height:1.62;color:var(--txt-2);max-width:56ch;margin-top:1rem}
.s-dark .lead,.kontakt .lead{color:var(--on-dark-2)}

.kopf{max-width:44rem;margin-bottom:clamp(2.2rem,3.6vw,3.1rem)}
.kopf--mitte{margin-inline:auto;text-align:center}
.kopf--mitte .lead{margin-inline:auto}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.86rem 1.4rem;border-radius:var(--r-btn);border:1px solid transparent;
  font:600 .96rem/1 var(--f-b);white-space:nowrap;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),
             border-color .22s var(--ease),transform .18s var(--spring);
}
.btn svg{width:17px;height:17px;flex:none}
.btn:active{transform:scale(.975)}
.btn--acc{background:var(--acc);color:#fff;box-shadow:var(--sh-acc)}
.btn--acc:hover{background:var(--acc-h)}
.btn--ink{background:var(--ink);color:var(--on-dark)}
.btn--ink:hover{background:var(--ink-3)}
.btn--geist{background:transparent;color:var(--txt);border-color:var(--line-2)}
.btn--geist:hover{border-color:var(--txt);background:rgba(35,52,83,.04)}
.s-dark .btn--geist,.hero .btn--geist,.kontakt .btn--geist{color:#fff;border-color:rgba(255,255,255,.34)}
.s-dark .btn--geist:hover,.hero .btn--geist:hover,.kontakt .btn--geist:hover{background:rgba(255,255,255,.10);border-color:#fff}
.btn--wa{background:var(--wa);color:#06331A}
.btn--wa:hover{background:#38DE78}
.btn--breit{width:100%}
.btn.is-laedt{opacity:.7;pointer-events:none}

/* --- Haken- und Kreuzlisten ---------------------------------------------- */
.haken{display:grid;gap:.6rem}
.haken li{display:grid;grid-template-columns:20px 1fr;gap:.66rem;align-items:start;
  font-size:.95rem;line-height:1.5}
.haken svg{width:20px;height:20px;color:var(--acc-2);margin-top:.12rem}
.s-dark .haken svg,.hero .haken svg,.kontakt .haken svg{color:var(--acc-3)}
.haken svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s var(--ease)}
.is-da .haken svg path,.hero .haken svg path,.haken.is-da svg path,.karte-form .haken svg path,
.popup .haken svg path{stroke-dashoffset:0}
.is-da .haken li:nth-child(2) svg path{transition-delay:.12s}
.is-da .haken li:nth-child(3) svg path{transition-delay:.24s}
.is-da .haken li:nth-child(4) svg path{transition-delay:.36s}

/* =========================================================================
   Header — über dem Hero unsichtbar, beim Scrollen helle Leiste
   ========================================================================= */
.kopfleiste{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .26s var(--ease),border-color .26s var(--ease),
             box-shadow .26s var(--ease),padding .26s var(--ease);
  padding:.85rem 0;
}
.kopfleiste.is-fest{
  background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);box-shadow:0 10px 30px rgba(35,52,83,.08);padding:.5rem 0;
}
.kopfleiste__in{display:flex;align-items:center;gap:1.5rem}
.marke{display:flex;align-items:center;flex:none;position:relative}
.marke img{height:58px;width:auto;transition:height .26s var(--ease),opacity .26s var(--ease)}
.marke .marke__dunkel{position:absolute;left:0;top:0;opacity:0}
.kopfleiste.is-fest .marke .marke__hell{opacity:0}
.kopfleiste.is-fest .marke .marke__dunkel{opacity:1}
.kopfleiste.is-fest .marke img{height:48px}

.nav{display:flex;gap:1.65rem;margin-left:auto}
.nav a{font:500 .93rem/1 var(--f-b);color:rgba(255,255,255,.88);position:relative;padding:.3rem 0;
  transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;
  background:var(--acc);transition:right .28s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.kopfleiste.is-fest .nav a{color:var(--txt-2)}
.kopfleiste.is-fest .nav a:hover{color:var(--txt)}

.kopf-tel{display:inline-flex;align-items:center;gap:.45rem;font:600 .93rem/1 var(--f-b);color:#fff;
  transition:color .26s var(--ease)}
.kopf-tel svg{width:16px;height:16px;color:var(--acc-3)}
.kopfleiste.is-fest .kopf-tel{color:var(--txt)}
.kopfleiste.is-fest .kopf-tel svg{color:var(--acc-2)}
.kopfleiste .btn--acc{padding:.72rem 1.1rem}

.kopf-mob{display:none;gap:.5rem;margin-left:auto}
.kopf-mob a{
  width:42px;height:42px;border-radius:var(--r-pille);display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.32);color:#fff;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .18s var(--spring);
}
.kopf-mob a svg{width:19px;height:19px}
.kopf-mob a:active{transform:scale(.93)}
.kopf-mob .m-tel{background:var(--acc);border-color:var(--acc);color:#fff}
.kopf-mob .m-wa{background:var(--wa);border-color:var(--wa);color:#06331A}

/* =========================================================================
   Hero — vollflächiges Bild, Content zweispaltig, Quiz rechts
   ========================================================================= */
.hero{position:relative;isolation:isolate;padding:clamp(8rem,12.5vw,10rem) 0 clamp(3.4rem,5vw,4.6rem);
  color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg picture,.hero__bg img{width:100%;height:100%}
.hero__bg img{object-fit:cover;object-position:58% 50%}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(21,31,50,.93) 0%,rgba(21,31,50,.76) 34%,
             rgba(21,31,50,.40) 60%,rgba(21,31,50,.52) 100%);
}
.hero__in{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:center}

.hero h1{
  font:600 .9375rem/1.45 var(--f-b);color:var(--acc-3);
  margin:0 0 .85rem;letter-spacing:0;
}
.hero__ansage{
  font:500 clamp(1.85rem,3.6vw,2.9rem)/1.08 var(--f-d);
  letter-spacing:-.012em;color:#fff;margin:0;text-wrap:balance;
}
.hero__ansage .a{display:block;color:var(--acc-3);position:relative}
.hero__txt{margin-top:1rem;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.8);
  max-width:29rem}
.hero .haken{margin-top:1.5rem;gap:.62rem;max-width:33rem}
.hero .haken li{color:rgba(255,255,255,.94);font-size:.95rem}

.sterne-zeile{
  display:flex;align-items:center;gap:.6rem;margin-top:1.35rem;flex-wrap:wrap;
  font-size:.9rem;color:rgba(255,255,255,.82);
}
.sterne{display:inline-flex;gap:2px}
.sterne svg{width:16px;height:16px;color:#F5B301}
.sterne-zeile b{color:#fff;font-weight:700}
.g-logo{width:18px;height:18px;flex:none}

.hero__btns{display:flex;gap:.75rem;margin-top:1.7rem;flex-wrap:wrap}

.hero__c > *{opacity:0;transform:translateY(10px);animation:heroRein .6s var(--ease) forwards}
.hero__c > :nth-child(1){animation-delay:.05s}
.hero__c > :nth-child(2){animation-delay:.14s}
.hero__c > :nth-child(3){animation-delay:.23s}
.hero__c > :nth-child(4){animation-delay:.32s}
.hero__c > :nth-child(5){animation-delay:.41s}
.hero__c > :nth-child(6){animation-delay:.5s}
.hero .quiz-scope{opacity:0;transform:translateY(12px);animation:heroRein .7s var(--ease) .45s forwards}
@keyframes heroRein{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero__c > *,.hero .quiz-scope{animation:none;opacity:1;transform:none}
}

/* =========================================================================
   Quiz-Formular (mehrfach mountbar: Hero, Kontakt, Modal)
   ========================================================================= */
.karte-form{
  position:relative;background:var(--paper);border-radius:var(--r-gross);
  padding:1.5rem 1.5rem 1.35rem;box-shadow:var(--sh-l);color:var(--txt);
}
.karte-form h2,.karte-form h3{color:var(--txt)}
.form__kopf{padding-right:4.6rem}
.form__kopf h3{font:600 1.3rem/1.15 var(--f-d);letter-spacing:-.012em}
.form__kopf p{margin-top:.3rem;font-size:.86rem;color:var(--txt-3)}

.stoerer{
  position:absolute;top:-14px;right:-10px;z-index:3;width:88px;height:88px;border-radius:50%;
  background:var(--acc);color:#fff;display:grid;place-content:center;text-align:center;
  transform:rotate(-11deg);box-shadow:0 8px 22px rgba(181,112,63,.34);
  font:700 .68rem/1.12 var(--f-b);padding:.3rem;border:2px solid #fff;
}
.stoerer b{display:block;font:600 1.3rem/1 var(--f-d);letter-spacing:-.02em;margin-bottom:.12rem}

.fortschritt{margin:1.05rem 0 1.1rem}
.fortschritt__z{display:flex;justify-content:space-between;font-size:.78rem;color:var(--txt-3);
  margin-bottom:.42rem;font-weight:500}
.fortschritt__b{height:5px;border-radius:var(--r-pille);background:var(--line);overflow:hidden}
.fortschritt__f{height:100%;width:25%;border-radius:var(--r-pille);background:var(--acc);
  transition:width .45s var(--ease)}

.schritt{display:none}
.schritt.is-an{display:block;animation:rein .34s var(--ease)}
@keyframes rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.schritt__f{font:600 1rem/1.35 var(--f-b);margin-bottom:.85rem;color:var(--txt)}

.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.picks--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.pick{
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-klein);
  padding:.7rem .45rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.45rem;
  cursor:pointer;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(35,52,83,.04);
  transition:border-color .22s var(--ease),transform .22s var(--spring),
             box-shadow .22s var(--ease),background .22s var(--ease);
}
.pick__ill{display:block;width:100%;max-width:78px}
.pick__ill svg{width:100%;height:auto;display:block;transition:transform .3s var(--ease)}
.pick__t{font:600 .78rem/1.2 var(--f-b);color:var(--txt);text-align:center;hyphens:auto;-webkit-hyphens:auto}
.pick--text{padding:.95rem .6rem}
.pick--text .pick__t{font-size:.9rem}
.pick--text .pick__s{font-size:.72rem;color:var(--txt-3);text-align:center;margin-top:-.2rem}
.pick:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--sh)}
.pick:hover .pick__ill svg{transform:scale(1.05)}
.pick.is-gewaehlt{border-color:var(--acc);background:#FBF5EF;box-shadow:0 0 0 3px rgba(181,112,63,.16)}
.pick.is-gewaehlt::after{
  content:"";position:absolute;top:6px;right:6px;width:17px;height:17px;border-radius:50%;
  background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

.feld{margin-bottom:.72rem}
.feld label{display:block;font:500 .82rem/1 var(--f-b);color:var(--txt-2);margin-bottom:.35rem}
.feld input,.feld textarea,.feld select{
  width:100%;padding:.75rem .85rem;border:1px solid var(--line-2);border-radius:var(--r-btn);
  background:var(--paper);transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(181,112,63,.16)}
.feld textarea{min-height:78px;resize:vertical}
.feld--zwei{display:grid;grid-template-columns:1fr 1fr;gap:.72rem}
.feld--zwei > div{margin:0}

.dsgvo{display:grid;grid-template-columns:18px 1fr;gap:.6rem;align-items:start;margin:.85rem 0 .1rem}
.dsgvo input{width:18px;height:18px;margin:.16rem 0 0;accent-color:var(--acc);flex:none}
.dsgvo label{font-size:.79rem;line-height:1.5;color:var(--txt-3)}
.dsgvo a{color:var(--acc-2);text-decoration:underline;text-underline-offset:2px}

.form__nav{display:flex;gap:.6rem;margin-top:1rem}
.form__nav .btn{flex:1}
.zurueck{display:none}
.zurueck.is-an{display:inline-flex;flex:0 0 auto;padding-inline:1rem}
.karte-form .btn--geist{background:transparent;color:var(--txt);border-color:var(--line-2)}
.karte-form .btn--geist:hover{border-color:var(--txt);background:rgba(35,52,83,.04)}

.trustline{margin-top:.9rem;text-align:center;font:600 .875rem/1.5 var(--f-b);color:var(--txt-2)}
.google-zeile{
  margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
  font-size:.84rem;color:var(--txt-3);
}
.google-zeile b{color:var(--txt);font-weight:700;font-size:.95rem}

.formstate{display:none;text-align:center;padding:1.6rem .5rem}
.formstate.is-an{display:block}
.formstate__ic{width:54px;height:54px;margin:0 auto .9rem;border-radius:50%;background:var(--gut);
  display:grid;place-items:center}
.formstate__ic svg{width:27px;height:27px;color:#fff}
.formstate h4{font:600 1.2rem/1.25 var(--f-d);letter-spacing:-.01em;margin-bottom:.45rem}
.formstate p{font-size:.92rem;color:var(--txt-2);max-width:32ch;margin-inline:auto}
.formfehler{display:none;margin-top:.7rem;font-size:.84rem;color:var(--schlecht);text-align:center}
.formfehler.is-an{display:block}

/* =========================================================================
   Bewertungs-Band
   ========================================================================= */
.g-pille{
  display:inline-flex;align-items:center;gap:.6rem;padding:.55rem .95rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pille);
  box-shadow:var(--sh);font-size:.9rem;color:var(--txt-2);
  margin-top:clamp(2rem,3.4vw,2.9rem);margin-bottom:0;
}
.g-pille b{font-weight:700;color:var(--txt);font-size:1.02rem}

.band{position:relative;margin-inline:calc(50% - 50vw);width:100vw;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.band__spur{display:flex;gap:1rem;width:max-content;animation:laufen 62s linear infinite}
.band:hover .band__spur{animation-play-state:paused}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--naht,8px)))}}
@media (prefers-reduced-motion:reduce){.band__spur{animation:none}}

.bew{
  width:min(23rem,78vw);flex:none;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:1.25rem 1.3rem 1.15rem;box-shadow:var(--sh);
  display:flex;flex-direction:column;
}
.bew__s{display:flex;gap:2px;margin-bottom:.7rem}
.bew__s svg{width:15px;height:15px;color:#F5B301}
.bew p{font-size:.93rem;line-height:1.56;color:var(--txt-2);flex:1}
.bew__f{display:flex;align-items:center;gap:.7rem;margin-top:1rem;padding-top:.85rem;
  border-top:1px solid var(--line)}
.bew__av{
  width:36px;height:36px;border-radius:var(--r-pille);flex:none;display:grid;place-items:center;
  background:var(--ink);color:var(--acc-3);font:700 .8rem/1 var(--f-b);letter-spacing:.02em;
}
.bew__m{flex:1;min-width:0}
.bew__m b{display:block;font:600 .88rem/1.3 var(--f-b);color:var(--txt)}
.bew__m span{font-size:.76rem;color:var(--txt-3)}

/* =========================================================================
   Leistungen — Boxen: Bild oben mit Titel im Bild, Absatz, genau drei Haken
   ========================================================================= */
.boxen{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.box{
  display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--sh);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.box:hover{transform:translateY(-3px);box-shadow:var(--sh-l);border-color:var(--line-2)}
.box__b{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}
.box__b img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.box:hover .box__b img{transform:scale(1.05)}
.box__b::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(21,31,50,.78) 0%,rgba(21,31,50,.25) 45%,transparent 70%)}
.box__b h3{
  position:absolute;left:1.15rem;right:1rem;bottom:1rem;z-index:2;color:#fff;
  font:600 1.28rem/1.2 var(--f-d);letter-spacing:-.008em;text-shadow:0 1px 10px rgba(21,31,50,.4);
}
.box__k{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1;gap:.55rem}
.box__k > p{font-size:.92rem;line-height:1.58;color:var(--txt-2)}
.box .haken{margin-top:.4rem;gap:.45rem}
.box .haken li{font-size:.88rem}
.box__cta{margin-top:auto;padding-top:.85rem;display:inline-flex;align-items:center;gap:.4rem;
  font:600 .88rem/1 var(--f-b);color:var(--acc-2)}
.box__cta svg{width:15px;height:15px;transition:transform .25s var(--spring)}
.box__cta:hover svg{transform:translateX(3px)}

/* =========================================================================
   Chat-Sektion (WhatsApp-Verlauf)
   ========================================================================= */
.chat-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,4.4vw,3.8rem);align-items:center}
.handy{
  position:relative;background:#1B1F26;border-radius:34px;padding:11px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.72),0 2px 5px rgba(0,0,0,.3);
  max-width:334px;margin-inline:auto;
}
.handy__scheibe{
  position:relative;background:#ECE5DD;border-radius:24px;overflow:hidden;height:582px;
  display:flex;flex-direction:column;
}
.handy__scheibe::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:.55;
  background-image:radial-gradient(rgba(0,0,0,.06) 1px,transparent 1px);background-size:15px 15px;
}
.chat__kopf{
  position:relative;z-index:2;display:flex;align-items:center;gap:.6rem;
  background:#075E54;color:#fff;padding:.62rem .8rem;flex:none;
}
.chat__av{width:34px;height:34px;border-radius:50%;background:#fff;flex:none;overflow:hidden;
  display:grid;place-items:center;padding:3px}
.chat__av img{width:100%;height:100%;object-fit:contain}
.chat__wer{flex:1;min-width:0}
.chat__wer b{display:block;font:600 .8rem/1.25 var(--f-b)}
.chat__wer span{display:flex;align-items:center;gap:.32rem;font-size:.66rem;color:rgba(255,255,255,.82)}
.chat__punkt{width:6px;height:6px;border-radius:50%;background:#4ADE80;flex:none}
.chat__kopf > svg{width:18px;height:18px;color:rgba(255,255,255,.9);flex:none}

.chat__lauf{position:relative;z-index:1;flex:1;overflow:hidden;padding:.7rem .6rem}
.chat__inner{display:flex;flex-direction:column;gap:.42rem;transition:transform .5s var(--ease)}
.chat__tag{align-self:center;background:rgba(255,255,255,.85);border-radius:6px;
  padding:.2rem .55rem;font:500 .64rem/1 var(--f-b);color:#54656F;margin-bottom:.2rem}
.blase{
  max-width:82%;padding:.45rem .6rem .5rem;border-radius:8px;position:relative;
  font-size:.775rem;line-height:1.42;color:#111B21;
  box-shadow:0 1px 1px rgba(0,0,0,.12);
  opacity:0;transform:translateY(9px);transition:opacity .34s var(--ease),transform .34s var(--ease);
}
.blase.is-da{opacity:1;transform:none}
.blase--ein{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.blase--aus{align-self:flex-end;background:#D9FDD3;border-top-right-radius:2px}
.blase b{font-weight:700}
.blase img{border-radius:5px;margin-bottom:.32rem;width:100%;height:auto}
.blase--foto{padding:.3rem .3rem .45rem;max-width:72%}
.blase--foto .blase__zeit{padding-right:.3rem}
.blase__zeit{display:flex;align-items:center;justify-content:flex-end;gap:.2rem;
  font-size:.6rem;color:#667781;margin-top:.16rem}
.blase__zeit svg{width:13px;height:13px;color:#53BDEB}
.blase--datei{display:flex;align-items:center;gap:.5rem;background:#D9FDD3;flex-wrap:wrap}
.blase--datei .dz{width:30px;height:30px;border-radius:5px;background:#fff;display:grid;
  place-items:center;flex:none}
.blase--datei .dz svg{width:16px;height:16px;color:#8696A0}
.blase--datei b{display:block;font-size:.74rem;overflow-wrap:anywhere}
.blase--datei small{font-size:.63rem;color:#667781}
.blase--datei .blase__zeit{width:100%}

.chat__arg{display:grid;gap:.95rem;margin-top:1.4rem}
.chat__arg li{display:grid;grid-template-columns:20px 1fr;gap:.7rem;align-items:start}
.chat__arg svg{width:20px;height:20px;color:var(--acc-3);margin-top:.15rem}
.chat__arg b{display:block;font:600 .96rem/1.35 var(--f-b);color:var(--on-dark)}
.chat__arg span{font-size:.9rem;line-height:1.55;color:var(--on-dark-2)}
.chat__btns{display:flex;gap:.7rem;margin-top:1.7rem;flex-wrap:wrap}

/* =========================================================================
   Vorteils-Bento — sieben Fotokacheln
   ========================================================================= */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:252px;gap:12px}
.btile{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;
  border-radius:var(--r);
}
.btile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .9s var(--ease)}
.btile:hover img{transform:scale(1.045)}
.btile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(21,31,50,.10) 0%,rgba(21,31,50,.34) 42%,rgba(21,31,50,.88) 100%);
}
.btile__t{padding:1.15rem 1.2rem 1.1rem;color:#fff;text-shadow:0 1px 12px rgba(21,31,50,.4)}
.btile__t h3{color:#fff;font:600 1.12rem/1.22 var(--f-d);letter-spacing:-.008em}
.btile__t p{margin-top:.4rem;font-size:.855rem;line-height:1.48;color:rgba(255,255,255,.86)}
.bt-gross{grid-column:span 2;grid-row:span 2}
.bt-gross .btile__t h3{font-size:clamp(1.3rem,1.5vw,1.66rem)}
.bt-gross .btile__t p{font-size:.95rem;max-width:38ch}
.bt-hoch{grid-column:span 1;grid-row:span 2}
.bt-breit{grid-column:span 2;grid-row:span 1}
.bt-gross .btile__t,.bt-breit .btile__t{padding:1.4rem 1.45rem 1.3rem}

/* =========================================================================
   Grundriss — isometrischer Plan, Räume anklickbar
   ========================================================================= */
.plan-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(1.6rem,3.4vw,3rem);
  align-items:center}
.plan-wrap{position:relative}
.plan{width:100%;height:auto;max-width:720px;margin-inline:auto;overflow:visible}
.plan polygon{stroke:var(--ink);stroke-width:.35;stroke-linejoin:round;stroke-opacity:.32;
  transition:fill .3s var(--ease)}
.plan .plan-boden{stroke-width:.5;cursor:pointer}
.plan .plan-boden.is-an{fill:var(--sand)}
.plan-label{font:600 17px var(--f-b);fill:var(--ink);letter-spacing:.02em;pointer-events:none}
.plan-punkt{cursor:pointer;outline:none}
.plan-stab{stroke:var(--acc);stroke-width:1.1;stroke-dasharray:2 2.4;opacity:.7}
.plan-ring{fill:none;stroke:var(--acc);stroke-width:1.2;opacity:.45;transform-origin:center;
  transform-box:fill-box}
.plan-kreis{fill:#fff;stroke:var(--acc);stroke-width:1.4;transition:fill .25s var(--ease)}
.plan-nr{font:700 18px var(--f-b);fill:var(--acc-2);pointer-events:none;transition:fill .25s var(--ease)}
.plan-punkt:hover .plan-kreis,.plan-punkt:focus-visible .plan-kreis{fill:var(--sand)}
.plan-punkt[aria-pressed="true"] .plan-kreis{fill:var(--acc)}
.plan-punkt[aria-pressed="true"] .plan-nr{fill:#fff}
.plan-punkt[aria-pressed="true"] .plan-ring{animation:planPuls 2.4s var(--ease) infinite}
@keyframes planPuls{0%{transform:scale(.7);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.plan-punkt[aria-pressed="true"] .plan-ring{animation:none}}

.plan-text{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);
  padding:1.6rem 1.65rem 1.5rem;box-shadow:var(--sh);
}
.plan-text__meta{font:600 .78rem/1 var(--f-b);color:var(--acc-2);letter-spacing:.02em}
.plan-text h3{font-size:1.3rem;margin-top:.55rem}
.plan-text p{margin-top:.6rem;font-size:.95rem;line-height:1.6;color:var(--txt-2)}
.plan-text .haken{margin-top:.9rem}
.plan-i{display:none}
.plan-i.is-an{display:block;animation:rein .3s var(--ease)}
.plan-liste{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.plan-liste button{
  border:1px solid var(--line-2);background:var(--paper);border-radius:var(--r-pille);
  padding:.42rem .75rem;font:600 .78rem/1 var(--f-b);color:var(--txt-2);cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.plan-liste button:hover{border-color:var(--txt);color:var(--txt)}
.plan-liste button.is-an{background:var(--ink);border-color:var(--ink);color:#fff}
.plan-hinweis{margin-top:1rem;font-size:.8rem;color:var(--txt-3)}

/* =========================================================================
   Vorher / Nachher — Regler, echte Kundenfotos
   ========================================================================= */
.vn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.vn{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-2);
  aspect-ratio:4/3;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  --p:50%;
}
.vn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* Das Nachher liegt oben und wird von links beschnitten — links bleibt Vorher */
.vn__nach{clip-path:inset(0 0 0 var(--p))}
.vn__griff{
  position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;
  box-shadow:0 0 0 1px rgba(21,31,50,.25);pointer-events:none;
}
.vn__griff::after{
  content:"";position:absolute;top:50%;left:50%;width:42px;height:42px;border-radius:50%;
  transform:translate(-50%,-50%);background:#fff;box-shadow:0 6px 18px rgba(21,31,50,.35);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23233453' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 3 12l6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:20px;
}
.vn input[type=range]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;
}
.vn input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.vn input[type=range]::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent}
.vn__l{
  position:absolute;top:.8rem;z-index:2;padding:.36rem .66rem;border-radius:var(--r-pille);
  font:700 .7rem/1 var(--f-b);letter-spacing:.08em;text-transform:uppercase;pointer-events:none;
  background:rgba(21,31,50,.55);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.vn__l--v{left:.8rem}
.vn__l--n{right:.8rem;background:var(--acc)}
.vn__t{margin-top:.7rem;font:600 .9rem/1.35 var(--f-b);color:var(--txt)}
.vn__t span{display:block;font:400 .8rem/1.4 var(--f-b);color:var(--txt-3);margin-top:.1rem}
.vn-fuss{margin-top:1.6rem;font-size:.8rem;line-height:1.55;color:var(--txt-3);max-width:70ch}

/* =========================================================================
   Ablauf — Bildkarten
   ========================================================================= */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.schrittk{position:relative;display:flex;flex-direction:column}
.schrittk__b{position:relative;aspect-ratio:4/3;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  background:var(--ink-2)}
.schrittk__b img{width:100%;height:100%;object-fit:cover}
.schrittk__k{
  background:var(--paper);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r) var(--r);padding:2.1rem 1.2rem 1.35rem;flex:1;
}
.schrittk__nr{
  position:absolute;left:1.2rem;top:0;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:var(--r-pille);background:var(--acc);color:#fff;
  display:grid;place-items:center;font:600 1.1rem/1 var(--f-d);
  box-shadow:0 6px 18px rgba(181,112,63,.34);
}
.schrittk__kw{position:relative}
.schrittk__kw::before{
  content:"";position:absolute;top:0;left:0;width:calc(100% + 1.4rem);height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 16px);
}
.schrittk:last-child .schrittk__kw::before{width:100%}
.schrittk h3{font-size:1.1rem}
.schrittk p{margin-top:.45rem;font-size:.9rem;line-height:1.56;color:var(--txt-2)}

/* =========================================================================
   Vergleich — zwei Karten, dazwischen ein "oder"-Kreis
   ========================================================================= */
.vgl{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:start;position:relative}
.vgl::before{
  content:"oder";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--acc-3);
  display:grid;place-items:center;font:500 .95rem/1 var(--f-d);box-shadow:0 8px 22px rgba(21,31,50,.3);
}
.vgl__k{border-radius:var(--r-gross);padding:1.7rem 1.6rem 1.6rem}
.vgl__wir{
  background:var(--paper);border:1px solid var(--acc);box-shadow:0 0 0 4px rgba(181,112,63,.10),var(--sh-l);
  position:relative;margin-top:-.9rem;
}
.vgl__wir::before{
  content:"Empfohlen";position:absolute;top:-13px;left:1.6rem;background:var(--acc);color:#fff;
  font:700 .7rem/1 var(--f-b);letter-spacing:.09em;text-transform:uppercase;
  padding:.42rem .7rem;border-radius:var(--r-pille);
}
.vgl__and{background:var(--paper-2);border:1px solid var(--line);filter:saturate(.55);margin-top:1.2rem}
.vgl__kopf{display:flex;align-items:center;gap:.75rem;padding-bottom:1.1rem;margin-bottom:1.1rem;
  border-bottom:1px solid var(--line)}
.vgl__logo{width:74px;flex:none;display:grid;place-items:center}
.vgl__logo img{width:100%;height:auto;object-fit:contain}
.vgl__kopf b{font:600 1.04rem/1.2 var(--f-d);letter-spacing:-.008em}
.vgl__kopf b span{display:block;font:400 .8rem/1.3 var(--f-b);color:var(--txt-3);letter-spacing:0;margin-top:.15rem}
.vgl__grau{width:46px;height:46px;border-radius:var(--r-pille);background:var(--line);flex:none;
  display:grid;place-items:center;color:var(--txt-3)}
.vgl__grau svg{width:22px;height:22px}
.vgl ul{display:grid;gap:.62rem}
.vgl li{display:grid;grid-template-columns:19px 1fr;gap:.65rem;align-items:start;
  font-size:.92rem;line-height:1.5}
.vgl li svg{width:19px;height:19px;margin-top:.13rem}
.vgl__wir li svg{color:var(--gut)}
.vgl__and li{color:var(--txt-3)}
.vgl__and li svg{color:var(--schlecht)}
.vgl__cta{margin-top:2rem;text-align:center}

/* =========================================================================
   Einblicke — zwei gegenläufige Bilder-Leisten
   ========================================================================= */
.marq{position:relative;margin-inline:calc(50% - 50vw);width:100vw;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)}
.marq + .marq{margin-top:.9rem}
.marq__spur{display:flex;gap:.9rem;width:max-content;animation:laufen 48s linear infinite}
.marq--rueck .marq__spur{animation-name:laufenRueck;animation-duration:54s}
@keyframes laufenRueck{from{transform:translateX(calc(-50% - var(--naht,8px)))}to{transform:translateX(0)}}
.marq:hover .marq__spur{animation-play-state:paused}
.marq__b{height:250px;width:auto;flex:none;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.marq__b img{height:100%;width:auto;display:block}
@media (prefers-reduced-motion:reduce){.marq__spur{animation:none}.marq{overflow-x:auto}}
.marq-cta{margin-top:2rem;text-align:center}
.marq-fuss{margin-top:1rem;text-align:center;font-size:.8rem;color:var(--txt-3)}

/* =========================================================================
   Einzugsgebiet
   ========================================================================= */
.gebiet{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:center}
.gebiet__karte{position:relative;margin:0 -14px}
.gebiet__karte img,.gebiet__karte svg{width:100%;height:auto}
.gebiet__karte::before,.gebiet__karte::after{
  content:"";position:absolute;left:0;right:0;height:14%;pointer-events:none;z-index:2}
.gebiet__karte::before{top:0;background:linear-gradient(to bottom,var(--paper-2),transparent)}
.gebiet__karte::after{bottom:0;background:linear-gradient(to top,var(--paper-2),transparent)}
.gebiet__btns{display:flex;gap:.75rem;margin-top:1.7rem;flex-wrap:wrap}

/* =========================================================================
   Kontakt
   ========================================================================= */
.kontakt{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.kontakt__bg{position:absolute;inset:0;z-index:-2}
.kontakt__bg img{width:100%;height:100%;object-fit:cover}
.kontakt__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(21,31,50,.95) 0%,rgba(21,31,50,.87) 46%,rgba(21,31,50,.72) 100%)}
.kontakt__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(2rem,4vw,3.6rem);align-items:center}

.ap{display:flex;align-items:center;gap:.9rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14)}
.ap img{width:58px;height:58px;border-radius:var(--r-pille);object-fit:cover;flex:none;background:#fff;
  border:1px solid rgba(255,255,255,.2);padding:5px}
.ap b{display:block;font:600 .95rem/1.3 var(--f-b);color:#fff}
.ap span{font-size:.8rem;color:var(--on-dark-2)}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-sec{position:relative;overflow:hidden}
.faq{max-width:50rem;margin-inline:auto;position:relative;z-index:1}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i:first-child{border-top:1px solid var(--line)}
.faq__f{
  width:100%;background:none;border:0;padding:1.25rem .4rem;display:flex;align-items:center;
  gap:1rem;cursor:pointer;text-align:left;font:600 1.02rem/1.4 var(--f-b);color:var(--txt);
}
.faq__f > span:not(.faq__ic){flex:1}
.faq__ic{width:26px;height:26px;flex:none;border-radius:var(--r-pille);background:var(--paper-2);
  display:grid;place-items:center;transition:background .24s var(--ease),transform .3s var(--spring)}
.faq__ic svg{width:14px;height:14px;color:var(--acc-2)}
.faq__i.is-auf .faq__ic{background:var(--acc);transform:rotate(45deg)}
.faq__i.is-auf .faq__ic svg{color:#fff}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.faq__i.is-auf .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{padding:0 3rem 1.35rem .4rem;font-size:.96rem;line-height:1.66;color:var(--txt-2)}

/* =========================================================================
   Footer
   ========================================================================= */
.fuss{background:var(--ink);color:var(--on-dark-2);padding:clamp(3rem,5vw,4.2rem) 0 1.6rem}
.fuss__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2.2rem}
.fuss h4{font:600 .74rem/1 var(--f-b);letter-spacing:.13em;text-transform:uppercase;
  color:var(--acc-3);margin-bottom:1rem}
.fuss ul{display:grid;gap:.55rem;font-size:.9rem}
.fuss a:hover{color:#fff}
.fuss__marke img{height:64px;width:auto;margin-bottom:1rem}
.fuss__marke p{font-size:.89rem;line-height:1.6;max-width:30ch}
.fuss__u{
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--dark-line);
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;justify-content:space-between;
  font-size:.82rem;
}
.fuss__u nav{display:flex;gap:1.4rem;flex-wrap:wrap}

/* =========================================================================
   Floating-Button, Pop-up, Modal
   ========================================================================= */
.fab{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;
  align-items:flex-end;gap:.55rem;pointer-events:none}
.fab__k{pointer-events:auto}
.fab.is-auf .fab__liste{pointer-events:auto}
.fab__reihe{display:flex;align-items:center;gap:.6rem}
.fab__blase{
  display:flex;align-items:center;gap:.2rem;pointer-events:auto;
  background:var(--ink);border:1px solid rgba(230,180,140,.42);border-radius:var(--r-pille);
  padding:.6rem .5rem .6rem .95rem;box-shadow:0 10px 30px rgba(21,31,50,.36);
  position:relative;max-width:min(15rem,calc(100vw - 7.5rem));
  opacity:0;transform:translateX(14px) scale(.94);transform-origin:right center;
  transition:opacity .38s var(--ease),transform .46s var(--spring);
}
.fab__blase.is-da{opacity:1;transform:none}
.fab__blase[hidden]{display:none}
.fab__blase::after{
  content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;
  background:var(--ink);border-right:1px solid rgba(230,180,140,.42);
  border-top:1px solid rgba(230,180,140,.42);
  transform:translateY(-50%) rotate(45deg);
}
.fab__blase-l{font:500 .8125rem/1.32 var(--f-b);color:var(--on-dark)}
.fab__blase-l b{color:var(--acc-3);font-weight:700}
.fab__blase-zu{
  flex:none;width:22px;height:22px;border:0;border-radius:50%;background:none;cursor:pointer;
  color:var(--on-dark-2);font-size:1.05rem;line-height:1;display:grid;place-items:center;
}
.fab__blase-zu:hover{background:rgba(255,255,255,.10);color:#fff}
.fab__k-zu{display:none}
.fab.is-auf .fab__k-auf{display:none}
.fab.is-auf .fab__k-zu{display:block}
.fab.hat-blase .fab__k::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--acc);opacity:0;animation:fabRing 2.6s var(--ease) infinite;
}
@keyframes fabRing{0%{transform:scale(.86);opacity:.55}70%{transform:scale(1.18);opacity:0}100%{transform:scale(1.18);opacity:0}}
@media (prefers-reduced-motion:reduce){.fab.hat-blase .fab__k::before{animation:none}}
.fab__liste{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s}
.fab.is-auf .fab__liste{opacity:1;visibility:visible;transform:none}
.fab__e{
  display:inline-flex;align-items:center;gap:.55rem;padding:.6rem .9rem;border-radius:var(--r-pille);
  background:var(--paper);color:var(--txt);box-shadow:var(--sh-l);font:600 .86rem/1 var(--f-b);
  border:1px solid var(--line);
}
.fab__e svg{width:17px;height:17px}
.fab__e--wa{background:var(--wa);color:#06331A;border-color:var(--wa)}
.fab__e--tel{background:var(--ink);color:#fff;border-color:var(--ink)}
.fab__k{
  position:relative;flex:none;
  width:54px;height:54px;border-radius:var(--r-pille);background:var(--acc);color:#fff;
  border:0;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 26px rgba(181,112,63,.4);
  transition:transform .24s var(--spring);
}
.fab__k svg{width:25px;height:25px;grid-area:1/1}
.fab__k:active{transform:scale(.94)}

.popup,.ovl{position:fixed;inset:0;z-index:105;display:none;place-items:center;padding:1.2rem;
  background:rgba(21,31,50,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.popup.is-auf,.ovl.is-auf{display:grid;animation:einblenden .3s var(--ease)}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.popup__k{
  position:relative;width:min(430px,100%);background:var(--paper);border-radius:var(--r-gross);
  overflow:visible;box-shadow:var(--sh-l);text-align:center;
  animation:hoch .38s var(--spring);
}
@keyframes hoch{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.popup__b{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-gross) var(--r-gross) 0 0}
.popup__b img{width:100%;height:100%;object-fit:cover}
.popup__b::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,31,50,.55),transparent 55%)}
.popup__badge{
  position:absolute;left:1rem;bottom:1rem;z-index:2;background:var(--sand);color:var(--acc-2);
  font:700 .72rem/1 var(--f-b);letter-spacing:.08em;text-transform:uppercase;
  padding:.45rem .7rem;border-radius:var(--r-pille);
}
.popup__zu,.ovl__zu{
  position:absolute;top:.7rem;right:.7rem;z-index:6;width:34px;height:34px;border:0;
  border-radius:var(--r-pille);background:rgba(255,255,255,.92);color:var(--txt);font-size:1.25rem;
  line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .3s var(--spring),background .2s var(--ease),color .2s var(--ease);
}
.popup__zu:hover,.ovl__zu:hover{background:var(--acc);color:#fff;transform:rotate(90deg)}
.popup__k > .popup__inhalt{padding:1.3rem 1.5rem 1.5rem}
.popup__k h3{font:600 1.36rem/1.16 var(--f-d);letter-spacing:-.01em}
.popup__k > .popup__inhalt > p{margin-top:.55rem;font-size:.92rem;line-height:1.58;color:var(--txt-2)}
.popup .haken{margin:1.1rem 0 1.25rem;text-align:left;display:inline-grid}
.popup__btns{display:grid;gap:.6rem}

.ovl__k{position:relative;width:min(560px,100%);max-height:92vh;overflow-y:auto;border-radius:var(--r-gross);
  animation:hoch .32s var(--spring)}
.ovl__k .karte-form{box-shadow:none}
.ovl__k .ovl__zu{top:.85rem;right:.85rem;background:var(--paper-2)}
.ovl__k .stoerer{right:3.4rem;top:-10px}

/* =========================================================================
   Reveal — 10-px-Regel
   ========================================================================= */
.rv{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.is-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .blase{opacity:1;transform:none}
}

/* =========================================================================
   Rechtsseiten und 404
   ========================================================================= */
.seitenkopf{background:var(--ink);color:#fff;padding:clamp(7.5rem,11vw,9.5rem) 0 clamp(2.6rem,4vw,3.4rem)}
.seitenkopf h1{font:500 clamp(1.9rem,4.2vw,2.9rem)/1.08 var(--f-d);letter-spacing:-.012em}
.seitenkopf p{margin-top:.7rem;color:var(--on-dark-2);font-size:.98rem}
.text-seite{max-width:48rem;margin-inline:auto}
.text-seite h2{font-size:clamp(1.3rem,2.5vw,1.65rem);margin:2.4rem 0 .8rem}
.text-seite h3{margin:1.6rem 0 .5rem;font-size:1.06rem}
.text-seite p,.text-seite li{font-size:.97rem;line-height:1.72;color:var(--txt-2)}
.text-seite p{margin-bottom:.9rem}
.text-seite ul{list-style:disc;padding-left:1.3rem;margin-bottom:1.1rem;display:grid;gap:.35rem}
.text-seite a{color:var(--acc-2);text-decoration:underline;text-underline-offset:2px}
.text-seite strong{color:var(--txt)}
.rechtsseite .kopfleiste{background:rgba(255,255,255,.93);border-bottom-color:var(--line)}

.vier{text-align:center;max-width:46rem;margin-inline:auto;position:relative}
.vier__z{font:500 clamp(6rem,18vw,11rem)/1 var(--f-d);letter-spacing:-.04em;
  color:var(--acc);opacity:.16;margin-bottom:-2rem}
.vier .btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.vier__liste{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:2.4rem;text-align:left}
.vier__liste a{display:block;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);box-shadow:var(--sh);font-size:.92rem;transition:border-color .2s var(--ease)}
.vier__liste a:hover{border-color:var(--acc)}
.vier__liste a b{display:block;font:600 .98rem/1.3 var(--f-d);letter-spacing:-.008em;margin-bottom:.15rem}
.vier__liste a span{color:var(--txt-3);font-size:.84rem}

/* =========================================================================
   Responsive — Overrides stehen bewusst NACH allen Basisregeln
   ========================================================================= */
@media (max-width:1100px){
  .fuss__in{grid-template-columns:1fr 1fr}
  .ablauf{grid-template-columns:1fr 1fr;gap:2.4rem 1.4rem}
  .schrittk__kw::before{display:none}
  .boxen{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr}
}

@media (max-width:980px){
  .nav,.kopf-tel,.kopfleiste .btn--acc{display:none}
  .kopf-mob{display:flex}
  .marke img{height:50px}
  .hero__in,.chat-grid,.gebiet,.kontakt__in{grid-template-columns:minmax(0,1fr)}
  .hero{padding-top:clamp(6.5rem,18vw,8rem)}
  .hero__bg img{object-position:50% 40%}
  .hero__bg::after{background:linear-gradient(180deg,rgba(21,31,50,.86) 0%,rgba(21,31,50,.74) 45%,rgba(21,31,50,.92) 100%)}
  .hero__txt,.hero .haken{max-width:none}
  .hero__txt{font-size:.86rem}
  .karte-form{max-width:480px;margin-inline:auto;width:100%}
  .hero__btns .btn{flex:1;min-width:180px}
  .chat-grid > .chat__inhalt{order:2}
  .chat-grid > .handy-sp{order:1}
  .gebiet > .gebiet__karte{order:1}
  .gebiet > .gebiet__inhalt{order:2}
  .vgl{grid-template-columns:1fr;gap:1.4rem}
  .vgl::before{display:none}
  .vgl__wir,.vgl__and{margin-top:0}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:230px}
  .bt-gross,.bt-breit{grid-column:span 2}
  .bt-hoch{grid-column:span 1;grid-row:span 2}
  .marq__b{height:200px}
  .deko__dach{width:min(80vw,460px);right:-24%;opacity:.05}
}

@media (max-width:760px){
  body{font-size:15.5px}
  .sec{padding:clamp(3.2rem,9vw,4.4rem) 0}
  .ablauf{grid-template-columns:1fr;gap:2.6rem}
  .boxen{grid-template-columns:1fr}
  .fuss__in{grid-template-columns:1fr;gap:1.8rem}
  .fuss__u{flex-direction:column;align-items:flex-start}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .btile{min-height:310px}
  .bt-gross{min-height:360px}
  .bt-gross,.bt-hoch,.bt-breit{grid-column:span 1;grid-row:span 1}
  .faq__a p{padding-right:.8rem}
  .hero__btns{flex-direction:column;align-items:stretch;text-align:center}
  .hero__btns .btn{width:100%}
  .stoerer{width:76px;height:76px;top:-12px;right:-6px;font-size:.62rem}
  .stoerer b{font-size:1.1rem}
  .form__kopf{padding-right:3.6rem}
  .marq__b{height:160px}
  .vier__liste{grid-template-columns:1fr}
  .vn-grid{grid-template-columns:1fr}
  .plan-label{font-size:24px}
  .plan-punkt-in{transform:scale(1.4)}
}

@media (max-width:520px){
  .hero__ansage{font-size:6.6vw}
  .btn{font-size:.9rem;padding:.82rem 1.05rem}
  .picks{grid-template-columns:1fr 1fr}
  .pick__ill{max-width:64px}
  .feld--zwei{grid-template-columns:1fr}
  .band{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
        mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
}

@media (max-width:360px){
  .btn{font-size:.84rem;padding:.78rem .9rem;gap:.45rem}
  .btn svg{width:15px;height:15px}
}