/* =========================================================================
   Linnemeier Fliesenfachgeschäft — One-Pager
   Design-Rezept "Werkstück": Bricolage Grotesque (schmal, schwer, versal) für
   die großen Grade, Figtree für den Text. Tinte und Limette aus dem Logo,
   warmes Papier als Grund. Genau eine Akzentfarbe.
   ========================================================================= */

/* --- Schriften (lokal, kein CDN) ---------------------------------------- */
@font-face{font-family:'Bricolage';src:url('../fonts/bricolage-grotesque-cond-500-800.woff2') format('woff2');
  font-weight:500 800;font-style:normal;font-display:swap}
@font-face{font-family:'Figtree';src:url('../fonts/figtree-400-700.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap}

/* --- Marken-Werte -------------------------------------------------------- */
:root{
  --ink:#1C1C1B;          /* Logo-Schwarz */
  --ink-2:#262625;
  --ink-3:#33332F;        /* Karten auf dunkel */
  --paper:#FFFFFF;
  --paper-2:#F7F6F2;      /* warmes Papier, 97 % Helligkeit */
  --paper-3:#EFEDE7;
  --line:#E6E4DE;
  --line-2:#CFCCC3;
  --txt:#1C1C1B;
  --txt-2:#4F4F4B;
  --txt-3:#7C7B75;
  --acc:#A2C035;          /* Limette — Knöpfe, ein Wort, Icons */
  --acc-2:#5C7318;        /* Limette dunkel — Text auf hellem Grund (4,9:1) */
  --acc-3:#C3DD5C;        /* Limette hell — auf dunklem Grund */
  --acc-soft:#F1F6DF;
  --acc-auf:#1C1C1B;      /* Schrift auf der Limettenfläche */
  --on-dark:#F4F3EF;
  --on-dark-2:#B3B2AB;
  --dark-line:rgba(255,255,255,.11);
  --gut:#3E8E4E;
  --schlecht:#C0392B;
  --wa:#25D366;

  --f-d:'Bricolage',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-b:'Figtree',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(28,28,27,.04), 0 14px 32px rgba(28,28,27,.06);
  --sh-l:0 2px 4px rgba(28,28,27,.05), 0 28px 60px rgba(28,28,27,.09);
  --sh-acc:0 10px 26px rgba(162,192,53,.30);

  --ease:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.22,1,.36,1);
  --e-calm:cubic-bezier(.25,1,.3,1);
  --e-out:cubic-bezier(.22,1,.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;
}
@supports (animation-timing-function: linear(0,1)){
  :root{
    --e-soft:linear(0,.0492,.1613,.2979,.4356,.5617,.6701,.759,.8294,.8833,.9233,.9521,.9721,.9857,.9944,.9996,1.0026,1.0039,1.0043,1.0042,1.0037,1.0031,1.0025,1);
    --e-calm:linear(0,.1012,.28,.4507,.5905,.6983,.779,.8387,.8824,.9143,.9376,.9546,.967,.976,.9825,.9873,.9907,.9933,.9951,.9964,.9974,.9981,.9986,1);
  }
}

/* --- 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-2);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{margin:0;padding:0}
p,li{text-wrap:pretty}
ul{list-style:none}
:focus-visible{outline:2px solid var(--acc-2);outline-offset:3px;border-radius:4px}
.s-dark :focus-visible,.hero :focus-visible,.kontakt :focus-visible{outline-color:var(--acc)}

.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}
.sec--eng{padding:clamp(2.6rem,4.5vw,3.8rem) 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}

/* Deko: leiser Schein in Limette, ein feines Fliesenraster in hellen 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(162,192,53,.13) 0%,rgba(162,192,53,0) 68%);
  top:-16rem;right:-14rem;
}
.deko--links::before{right:auto;left:-16rem;top:auto;bottom:-18rem}
.deko__raster{
  position:absolute;inset:0;opacity:.6;
  background-image:linear-gradient(rgba(28,28,27,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(28,28,27,.07) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse 55% 55% at 78% 25%,#000 0%,transparent 70%);
  mask-image:radial-gradient(ellipse 55% 55% at 78% 25%,#000 0%,transparent 70%);
}
.s-dark .deko__raster{
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
}

/* Logo-Wasserzeichen: nur das Emblem, angeschnitten am rechten Rand */
.hat-wz{position:relative;overflow:hidden;isolation:isolate}
.hat-wz::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-6%;top:50%;transform:translateY(-50%) rotate(8deg);
  width:min(40vw,560px);aspect-ratio:562/600;
  background:url("../logo/emblem.png") center / contain no-repeat;opacity:.05;
}
.s-dark.hat-wz::before{opacity:.07;filter:brightness(0) invert(1)}
@media (max-width:900px){.hat-wz::before{width:min(80vw,420px);right:-24%;opacity:.045}}

/* --- 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,.hero .kicker{color:var(--acc-3)}

.t-d,h2,.h2{
  font:700 clamp(1.75rem,3.3vw,2.7rem)/.98 var(--f-d);
  text-transform:uppercase;letter-spacing:.004em;padding-top:.06em;
  color:var(--txt);text-wrap:balance;
}
.s-dark h2,.s-dark .h2,.kontakt h2{color:var(--on-dark)}
h2 .z{display:block}                       /* erste Zeile */
h2 .a{display:block;color:var(--acc-2)}    /* farbiger Teil, eigene Zeile */
.s-dark h2 .a,.kontakt h2 .a{color:var(--acc)}

h3{font:600 1.12rem/1.3 var(--f-b);color:var(--txt);letter-spacing:-.012em;text-wrap:balance}
.hero h1{text-wrap:balance}
.s-dark h3,.kontakt h3{color:var(--on-dark)}

.lead{font-size:1.04rem;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:46rem;margin-bottom:clamp(2.2rem,3.6vw,3.1rem)}
.kopf--mitte{margin-inline:auto;text-align:center}
.kopf--mitte .lead{margin-inline:auto}

/* --- Buttons: 10 px, deutlich eckiger als die Karten --------------------- */
.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 .95rem/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}
@media (hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn:active{transform:scale(.975)}
.btn--acc{background:var(--acc);color:var(--acc-auf)}
.btn--acc:hover{background:#B4D24A}
.btn--ink{background:var(--ink);color:#fff}
.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(28,28,27,.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--lg{padding:1rem 1.6rem;font-size:1rem}

/* --- Haken-Listen mit gezeichnetem Häkchen ------------------------------- */
.haken{display:grid;gap:.6rem}
.haken li{display:grid;grid-template-columns:22px 1fr;gap:.66rem;align-items:start;font-size:.95rem;line-height:1.5}
.ck{width:22px;height:22px;margin-top:.08rem}
.ck path{fill:none;stroke:var(--acc-2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .7s var(--e-calm) var(--ck-d,0ms)}
.is-da .ck path,.no-rv .ck path,.is-on .ck path{stroke-dashoffset:0}
.haken li:nth-child(1) .ck{--ck-d:80ms}.haken li:nth-child(2) .ck{--ck-d:230ms}
.haken li:nth-child(3) .ck{--ck-d:380ms}.haken li:nth-child(4) .ck{--ck-d:530ms}
.haken li:nth-child(5) .ck{--ck-d:680ms}.haken li:nth-child(6) .ck{--ck-d:830ms}
.s-dark .ck path,.hero .ck path,.kontakt .ck path,.lz .ck path,.btile .ck path{stroke:var(--acc)}

/* =========================================================================
   Kopfleiste — transparent über dem Hero, fest beim Scrollen
   ========================================================================= */
.kopfleiste{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:transparent;border-bottom:1px solid transparent;padding:.9rem 0;
  transition:background .26s var(--ease),border-color .26s var(--ease),
             box-shadow .26s var(--ease),padding .26s var(--ease);
}
.kopfleiste.is-fest{
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--line);box-shadow:0 8px 28px rgba(28,28,27,.07);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:52px;width:auto;transition:height .26s var(--ease)}
.marke .marke__dunkel{display:none}
.kopfleiste.is-fest .marke img{height:42px}
.kopfleiste.is-fest .marke__hell{display:none}
.kopfleiste.is-fest .marke__dunkel{display:block}

.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:2px;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 .2s var(--ease)}
.kopf-tel svg{width:16px;height:16px;color:var(--acc)}
.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:var(--acc-auf)}
.kopf-mob .m-wa{background:var(--wa);border-color:var(--wa);color:#06331A}

/* =========================================================================
   Hero — vollflächiges Bild, Content zweispaltig (Variante B)
   ========================================================================= */
.hero{position:relative;isolation:isolate;padding:clamp(7.4rem,12vw,9.6rem) 0 clamp(3.4rem,5vw,4.6rem);color:#fff;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:60% 45%}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(20,20,19,.90) 0%,rgba(20,20,19,.72) 40%,rgba(20,20,19,.36) 66%,rgba(20,20,19,.5) 100%);
}
.hero__in{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);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 .9rem;letter-spacing:0;text-transform:none}
.hero__ansage{font:700 clamp(2.4rem,5.2vw,4.3rem)/.95 var(--f-d);text-transform:uppercase;letter-spacing:.004em;padding-top:.06em;color:#fff;margin:0}
.hero__ansage .a{display:block;color:var(--acc)}
.hero__txt{margin-top:1rem;font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.82);max-width:30rem}
.hero .haken{margin-top:1.4rem;gap:.6rem;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.3rem;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}

/* =========================================================================
   Quiz-Formular (dreimal gemountet: 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,.karte-form h4{color:var(--txt)}
.form__kopf{padding-right:4.8rem}
.form__kopf h3{font:700 1.5rem/1 var(--f-d);text-transform:uppercase;letter-spacing:.004em;padding-top:.06em}
.form__kopf p{margin-top:.35rem;font-size:.86rem;color:var(--txt-3)}

/* Störer: drei Zeilen, mittig über Flex, leicht gedreht */
.stoerer{
  position:absolute;top:-16px;right:-12px;z-index:3;width:104px;height:104px;border-radius:50%;
  background:var(--acc);color:var(--acc-auf);display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;transform:rotate(-11deg);box-shadow:var(--sh-acc);padding:.4rem;
}
.stoerer__k{font:600 .68rem/1.1 var(--f-b)}
.stoerer__gr{display:block;font:700 1.35rem/1 var(--f-d);text-transform:uppercase;white-space:nowrap;margin:.12rem 0}

.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(--e-soft)}

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

/* Illustrierte Auswahlkarten */
.picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
.picks--vier{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;
  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:80px}
.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: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:var(--acc-soft);box-shadow:0 0 0 3px rgba(162,192,53,.22)}
.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='%231C1C1B' 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-2);box-shadow:0 0 0 3px rgba(162,192,53,.22)}
.feld input.ist-falsch{border-color:var(--schlecht);animation:ruetteln .38s var(--ease)}
@keyframes ruetteln{0%,100%{transform:translateX(0)}22%{transform:translateX(-4px)}45%{transform:translateX(4px)}68%{transform:translateX(-2px)}86%{transform:translateX(2px)}}
.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-2);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}
/* Die Formularkarte ist eine helle Insel — Gegen-Scope NACH den Dunkel-Regeln */
.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(28,28,27,.04)}
.karte-form .ck path{stroke:var(--acc-2)}
.senden.ist-busy{opacity:.75;pointer-events:none}

.formfehler{display:none;margin-top:.8rem;padding:.7rem .9rem;border-radius:var(--r-btn);background:#FCEBE8;color:#8E2A1F;font-size:.86rem;line-height:1.45}
.formfehler.is-an{display:block}

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

.formstate{display:none;text-align:center;padding:1.6rem .6rem}
.formstate.is-an{display:block;animation:rein .4s var(--e-soft)}
.formstate__ic{width:58px;height:58px;border-radius:50%;background:var(--acc);color:var(--acc-auf);display:grid;place-items:center;margin:0 auto 1rem}
.formstate__ic svg{width:28px;height:28px}
.formstate h4{font:700 1.5rem/1 var(--f-d);text-transform:uppercase;padding-top:.06em}
.formstate p{margin-top:.6rem;font-size:.94rem;color:var(--txt-2)}

/* =========================================================================
   Bewertungs-Band — direkt nach dem Hero
   ========================================================================= */
.band__kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:1.6rem}
.band__kopf h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.g-pille{display:inline-flex;align-items:center;gap:.6rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pille);
  padding:.6rem 1rem;font:600 .92rem/1 var(--f-b);box-shadow:var(--sh);white-space:nowrap}
.g-pille .g-logo{width:20px;height:20px}
.g-pille .sterne svg{width:15px;height:15px}
.g-pille b{font-size:1rem}
.band{position:relative;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:16px;width:max-content;animation:band 62s linear infinite}
.band:hover .band__spur{animation-play-state:paused}
@keyframes band{to{transform:translateX(calc(-50% - var(--naht,8px)))}}
.bew{width:min(380px,84vw);flex:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.35rem 1.35rem 1.15rem;
  display:flex;flex-direction:column;gap:.8rem;position:relative}
.bew .sterne svg{width:15px;height:15px}
.bew p{font-size:.93rem;line-height:1.58;color:var(--txt-2);flex:1}
.bew__wer{display:flex;align-items:center;gap:.7rem}
.bew__av{width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--acc);display:grid;place-items:center;font:700 .82rem/1 var(--f-b);flex:none}
.bew__wer b{display:block;font:600 .88rem/1.25 var(--f-b);color:var(--txt)}
.bew__wer span{font-size:.78rem;color:var(--txt-3)}
.bew .g-logo{position:absolute;right:1.1rem;bottom:1.1rem;width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.band__spur{animation:none;overflow-x:auto}}

/* =========================================================================
   Leistungen — Ziehharmonika (waagerecht, mobil senkrecht)
   ========================================================================= */
.lz{display:flex;gap:12px;height:clamp(460px,46vw,580px)}
.lz__p{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--r);isolation:isolate;
  background:var(--ink-2);cursor:pointer;
  transition:flex-grow .6s var(--e-out);
}
.lz__p.is-on{flex-grow:3.4;cursor:default}
.lz__bg,.lz__bg2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .6s var(--e-out),filter .6s var(--e-out),transform .9s var(--e-out)}
.lz__bg{z-index:-3;filter:grayscale(.35) brightness(.62)}
.lz__p:hover .lz__bg{filter:grayscale(.1) brightness(.8)}
.lz__bg2{z-index:-2;opacity:0;transform:scale(1.06)}
.lz__p.is-on .lz__bg2{opacity:1;transform:none}
.lz__p.is-on .lz__bg{filter:grayscale(.35) brightness(.62)}
.lz__p::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,20,19,.5) 0%,rgba(20,20,19,.12) 30%,rgba(20,20,19,.82) 72%,rgba(20,20,19,.94) 100%);
  opacity:0;transition:opacity .5s var(--e-out);
}
.lz__p.is-on::after{opacity:1}
.lz__kurz{
  position:absolute;left:1.15rem;bottom:1.35rem;z-index:2;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:700 clamp(1.25rem,1rem + .9vw,1.8rem)/1 var(--f-d);text-transform:uppercase;letter-spacing:.03em;
  color:rgba(255,255,255,.94);white-space:nowrap;
  transition:opacity .35s var(--e-out);
}
.lz__p.is-on .lz__kurz{opacity:0}
.lz__bar{display:none}
.lz__c{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(1.4rem,1rem + 1.2vw,2rem);
  display:flex;flex-direction:column;gap:.75rem;color:#fff;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s var(--e-out) .1s,transform .5s var(--e-out) .1s;
}
.lz__p.is-on .lz__c{opacity:1;transform:none;pointer-events:auto}
.lz__c h3{color:#fff;font:700 clamp(1.4rem,1.1rem + 1vw,1.9rem)/1 var(--f-d);text-transform:uppercase;letter-spacing:.006em;padding-top:.06em;margin:0}
.lz__c > p{font-size:.9375rem;line-height:1.55;color:rgba(255,255,255,.82);margin:0;max-width:40ch}
.lz__c .haken{gap:.45rem;margin-top:.15rem}
.lz__c .haken li{color:rgba(255,255,255,.88);font-size:.875rem}
.lz__go{
  display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;margin-top:.4rem;
  padding:.7rem .75rem .7rem 1.15rem;border-radius:var(--r-pille);
  border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);backdrop-filter:blur(8px);
  font:600 .875rem/1 var(--f-b);color:#fff;white-space:nowrap;cursor:pointer;
  transition:background .22s var(--e-out),border-color .22s var(--e-out),color .22s var(--e-out);
}
.lz__go:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-auf)}
.lz__go i{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}
.lz__go:hover i{background:rgba(28,28,27,.16)}
.lz__go i svg{width:14px;height:14px}
.lz__p.is-on::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

@media (max-width:1000px){
  .lz{display:flex;flex-direction:column;gap:12px;height:auto}
  .lz__p{flex:none;height:84px;border-radius:16px;cursor:pointer;transition:height .55s var(--e-out)}
  .lz__p.is-on{height:clamp(430px,116vw,560px);cursor:default}
  .lz__p.is-on::before{border-radius:16px}
  .lz__kurz{display:none}
  .lz__bar{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    position:absolute;inset:0;z-index:3;padding:0 1.15rem 0 1.25rem;
    transition:opacity .3s var(--e-out);
  }
  .lz__bar > span{font:700 clamp(1.15rem,1rem + 1vw,1.45rem)/1 var(--f-d);text-transform:uppercase;letter-spacing:.008em;color:#fff}
  .lz__bar svg{width:22px;height:22px;flex:none;color:rgba(255,255,255,.85)}
  .lz__p.is-on .lz__bar{opacity:0;pointer-events:none}
  .lz__bg{filter:grayscale(.25) brightness(.5)}
  .lz__p:hover .lz__bg{filter:grayscale(.25) brightness(.5)}
  .lz__p.is-on .lz__bg{filter:grayscale(.35) brightness(.62)}
  .lz__p::after{opacity:1}
  .lz__c{padding:1.35rem}
}

/* =========================================================================
   WhatsApp — Handy mit laufendem Verlauf
   ========================================================================= */
.wa{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
.wa__stage{position:relative;display:flex;justify-content:center;padding-block:1rem}
.phone{
  position:relative;width:min(100%,344px);border-radius:38px;background:var(--ink-3);
  border:1px solid rgba(255,255,255,.14);padding:9px;
  box-shadow:0 2px 6px rgba(0,0,0,.2),0 30px 60px rgba(0,0,0,.4);
}
.phone__in{border-radius:30px;overflow:hidden;background:#EFEAE2;display:flex;flex-direction:column}
.phone__notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:74px;height:5px;border-radius:5px;background:rgba(255,255,255,.2);z-index:3}
.chat__head{display:flex;align-items:center;gap:.6rem;padding:1.5rem .9rem .7rem;background:#fff;border-bottom:1px solid var(--line)}
.chat__av{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none;overflow:hidden;padding:4px}
.chat__av img{width:100%;height:100%;object-fit:contain}
.chat__head b{display:block;font:600 .8125rem/1.25 var(--f-b);color:var(--ink);letter-spacing:-.012em}
.chat__head b + span{display:flex;align-items:center;gap:.3rem;font-size:.6875rem;color:#22A45D}
.chat__head b + span::before{content:"";width:6px;height:6px;border-radius:50%;background:#22A45D}
.chat__head > svg{width:16px;height:16px;margin-left:auto;color:var(--txt-3)}
.chat__body{background:#EFEAE2;background-image:radial-gradient(rgba(28,28,27,.06) 1px,transparent 1px);background-size:14px 14px;height:clamp(300px,30vw,392px);overflow:hidden}
.chat__flow{padding:.85rem .8rem 1rem;display:grid;gap:.5rem;align-content:start;transition:transform .55s var(--e-soft);will-change:transform}
.chat__tag{justify-self:center;background:rgba(255,255,255,.85);color:var(--txt-3);font-size:.62rem;padding:.25rem .6rem;border-radius:var(--r-pille);margin-bottom:.2rem}
.msg{max-width:84%;padding:.55rem .7rem;border-radius:12px;font-size:.76rem;line-height:1.45;position:relative;opacity:0;transform:translateY(8px)}
.wa__stage.is-schritt .msg{display:none}
.wa__stage.is-schritt .msg.is-da{display:block;animation:blaseAuf .5s var(--e-soft) forwards}
.wa__stage.is-in .chat__status{animation:blaseAuf .5s var(--e-soft) forwards;animation-delay:calc(.3s + var(--i,0) * 1.05s)}
@keyframes blaseAuf{to{opacity:1;transform:none}}
.msg time{display:block;margin-top:.2rem;font-size:.56rem;color:var(--txt-3);text-align:right}
.msg--in{justify-self:start;background:#fff;color:var(--txt);border-top-left-radius:3px;box-shadow:0 1px 1px rgba(28,28,27,.06)}
.msg--out{justify-self:end;background:#D9FDD3;color:#12291B;border-top-right-radius:3px;box-shadow:0 1px 1px rgba(28,28,27,.06)}
.msg--out time{color:#4F7A5C}
.msg--out time::after{content:" ✓✓";color:#34B7F1;letter-spacing:-.06em}
.msg--foto{padding:.35rem .35rem .3rem;max-width:none;width:max-content}
.msg--foto img{width:180px;height:134px;object-fit:cover;border-radius:8px;display:block}
.chat__status{
  display:flex;align-items:center;gap:.65rem;margin:.2rem .8rem .1rem;padding:.7rem .8rem;
  border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);
  opacity:0;transform:translateY(8px);
}
.chat__haken{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#22A45D;color:#fff}
.chat__haken svg{width:14px;height:14px}
.chat__status b{display:block;font:600 .76rem/1.3 var(--f-b);color:var(--ink);letter-spacing:-.012em}
.chat__status > span > span{display:block;margin-top:1px;font-size:.68rem;color:var(--txt-3)}
.chat__foot{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem .85rem;background:#EFEAE2}
.chat__bar{flex:1;height:30px;border-radius:15px;background:#fff;box-shadow:0 1px 1px rgba(28,28,27,.06)}
.chat__send{width:30px;height:30px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none;color:#fff}
.chat__send svg{width:14px;height:14px}
.wa__copy .haken{margin-top:1.4rem}
.wa__copy .haken li b{display:block;font-weight:600;color:var(--on-dark)}
.wa__copy .haken li span{display:block;font-size:.9rem;color:var(--on-dark-2)}
.wa__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

/* =========================================================================
   Vorteile — Bento aus 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;border-radius:var(--r);overflow:hidden;background:var(--ink-2);color:#fff}
.btile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .9s var(--e-calm)}
.btile:hover img{transform:scale(1.04)}
.btile::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,20,19,.10) 0%,rgba(20,20,19,.34) 42%,rgba(20,20,19,.88) 100%)}
.btile-txt{padding:1.4rem 1.4rem 1.3rem;text-shadow:0 1px 12px rgba(20,20,19,.35)}
.btile-txt h3{color:#fff;font:700 1.55rem/1 var(--f-d);text-transform:uppercase;letter-spacing:.006em;padding-top:.06em}
.btile-txt p{margin-top:.45rem;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.86);max-width:40ch}
.btile-txt .haken{margin-top:.7rem;gap:.35rem}
.btile-txt .haken li{color:rgba(255,255,255,.9);font-size:.86rem}
.bt-gross{grid-column:span 2;grid-row:span 2}
.bt-hoch{grid-row:span 2}
.bt-breit{grid-column:span 2}
.bt-gross .btile-txt h3{font-size:clamp(1.8rem,2.4vw,2.4rem)}
.bt-klein .btile-txt{padding:1.1rem 1.15rem 1rem}
.bt-klein .btile-txt h3{font-size:1.2rem}
.bt-klein .btile-txt p{font-size:.84rem;margin-top:.3rem}

/* =========================================================================
   Bodenaufbau — Schnittzeichnung mit Schichten
   ========================================================================= */
.aufbau{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,4vw,3.6rem);align-items:center}
.schnitt{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);padding:1.4rem;box-shadow:var(--sh)}
.schnitt svg{width:100%;height:auto;display:block}
.schnitt [data-schicht]{transition:opacity .35s var(--ease)}
.schnitt.is-fokus [data-schicht]:not(.is-on){opacity:.5}
.schnitt [data-schicht].is-on .kante{stroke:var(--acc-2);stroke-width:3;stroke-dasharray:6 4;animation:kante 1.2s linear infinite}
@keyframes kante{to{stroke-dashoffset:-20}}
.schnitt__hinweis{margin-top:.8rem;font-size:.78rem;color:var(--txt-3);text-align:center}
.schichten{display:grid;gap:.5rem}
.schicht{display:grid;grid-template-columns:34px 1fr;gap:.9rem;align-items:start;text-align:left;width:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-klein);padding:.85rem 1rem;cursor:pointer;
  transition:border-color .22s var(--ease),background .22s var(--ease),transform .22s var(--spring)}
.schicht:hover{border-color:var(--acc);transform:translateX(3px)}
.schicht.is-on{border-color:var(--acc);background:var(--acc-soft)}
.schicht__nr{width:34px;height:34px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;font:700 1rem/1 var(--f-d);color:var(--txt-2);border:1px solid var(--line)}
.schicht.is-on .schicht__nr{background:var(--acc);color:var(--acc-auf);border-color:var(--acc)}
.schicht b{display:block;font:600 .95rem/1.3 var(--f-b);color:var(--txt)}
.schicht__t{display:block;font-size:.86rem;line-height:1.5;color:var(--txt-2);margin-top:.15rem}
.schicht:not(.is-on) .schicht__t{display:none}

/* =========================================================================
   Vorausgedacht — Foto mit Hotspots
   ========================================================================= */
.hot{position:relative;border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--sh-l);background:var(--ink-2)}
.hot > img{width:100%;height:auto;display:block}
.hot__p{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:0;cursor:pointer;
  background:var(--acc);color:var(--acc-auf);font:700 .9rem/1 var(--f-d);display:grid;place-items:center;
  box-shadow:0 0 0 4px rgba(255,255,255,.55),0 6px 16px rgba(20,20,19,.3);transition:transform .25s var(--spring),background .2s var(--ease)}
.hot__p::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(162,192,53,.9);opacity:0;animation:fabRing 2.6s var(--ease) infinite}
.hot__p:hover,.hot__p.is-on{transform:scale(1.12);background:#fff;color:var(--ink)}
.hot__p.is-on::before{animation:none;opacity:1;border-color:#fff}
.hot__karte{grid-area:karte;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;box-shadow:var(--sh);color:var(--txt);min-height:9.5rem}
.hot__karte .nr{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--acc);color:var(--acc-auf);font:700 .82rem/1 var(--f-d);margin-bottom:.5rem}
.hot__karte b{display:block;font:600 1rem/1.3 var(--f-b);color:var(--txt)}
.hot__karte p{margin-top:.35rem;font-size:.88rem;line-height:1.5;color:var(--txt-2)}
.hot__liste{display:none}
.vor{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"text bild" "karte bild";gap:1.2rem clamp(2rem,4vw,3.6rem);align-items:center}
.vor__text{grid-area:text}
.vor > .hot{grid-area:bild}

/* =========================================================================
   Ablauf — vier Bildkarten, Nummer auf der Kante
   ========================================================================= */
.ablauf{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;--luecke:1.4rem}
.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;right:1.2rem;top:0;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:var(--r-pille);
  background:var(--acc);color:var(--acc-auf);display:grid;place-items:center;font:700 1.25rem/1 var(--f-d);box-shadow:var(--sh-acc)}
.schrittk__kw{position:relative}
.schrittk__kw::before{content:"";position:absolute;top:0;right:100%;width:var(--luecke);height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 16px);
  transform:scaleX(0);transform-origin:right center;transition:transform 1.1s var(--e-calm) .2s}
.schrittk.is-da .schrittk__kw::before{transform:scaleX(1)}
.schrittk:first-child .schrittk__kw::before{display:none}
.schrittk h3{font:700 1.4rem/1 var(--f-d);text-transform:uppercase;letter-spacing:.006em;padding-top:.06em;padding-right:2.8rem}
.schrittk p{margin-top:.5rem;font-size:.9rem;line-height:1.56;color:var(--txt-2);text-wrap:balance}

/* =========================================================================
   Vergleich
   ========================================================================= */
.vgl{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start;position:relative}
.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(162,192,53,.12),var(--sh-l);position:relative;margin-top:-.9rem}
.vgl__wir::before{content:"Empfohlen";position:absolute;top:-13px;left:1.6rem;background:var(--acc);color:var(--acc-auf);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-3);border:1px solid var(--line);filter:saturate(.5)}
.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{flex:none;display:grid;place-items:center;height:52px}
.vgl__logo img{height:52px;width:auto}
.vgl__kopf b{font:700 1.3rem/1 var(--f-d);text-transform:uppercase;letter-spacing:.006em;padding-top:.06em}
.vgl__kopf b span{display:block;font:400 .8rem/1.3 var(--f-b);text-transform:none;letter-spacing:0;color:var(--txt-3);margin-top:.25rem}
.vgl__grau{width:52px;height:52px;border-radius:var(--r-klein);background:var(--line);flex:none;display:grid;place-items:center;color:var(--txt-3)}
.vgl__grau svg{width:24px;height:24px}
.vgl ul{display:grid;gap:.62rem}
.vgl li{display:grid;grid-template-columns:20px 1fr;gap:.65rem;align-items:start;font-size:.92rem;line-height:1.5}
.vgl li svg{width:20px;height:20px;margin-top:.1rem}
.vgl__wir .ck path{stroke:var(--gut)}
.vgl__and li{color:var(--txt-3)}
.vgl__and li svg{color:var(--schlecht)}
.vgl__cta{margin-top:2rem;text-align:center}

/* =========================================================================
   Referenzen — zwei gegenläufige Bilderleisten
   ========================================================================= */
.ref{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)}
.ref__reihe{display:flex;gap:14px;width:max-content;--gap:14px;animation:refLauf 58s linear infinite}
.ref__reihe + .ref__reihe{margin-top:14px;animation-direction:reverse;animation-duration:66s}
.ref:hover .ref__reihe{animation-play-state:paused}
@keyframes refLauf{to{transform:translateX(calc(-50% - var(--gap) / 2))}}
.ref__reihe img{height:260px;width:auto;border-radius:var(--r-klein);object-fit:cover;flex:none}
.ref__cta{text-align:center;margin-top:2rem}
@media (prefers-reduced-motion:reduce){.ref__reihe{animation:none}.ref{overflow-x:auto}}

/* =========================================================================
   Über uns — Familienbetrieb
   ========================================================================= */
.ueber{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,4vw,3.6rem);align-items:center}
.ueber__fakten{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.6rem}
.fakt{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-klein);padding:1rem 1.1rem}
.fakt b{display:block;font:700 1.9rem/1 var(--f-d);color:var(--acc-2);text-transform:uppercase}
.fakt span{display:block;margin-top:.3rem;font-size:.86rem;line-height:1.4;color:var(--txt-2)}
.ueber__bild{position:relative}
.ueber__bild img{width:100%;height:auto;border-radius:var(--r-gross);box-shadow:var(--sh-l)}
.siegel{position:absolute;left:-1rem;bottom:-1.2rem;background:var(--paper);border-radius:var(--r);padding:.9rem 1rem;box-shadow:var(--sh-l);display:flex;align-items:center;gap:.8rem;max-width:min(20rem,90%)}
.siegel img{height:56px;width:auto}
.siegel b{display:block;font:600 .84rem/1.3 var(--f-b);color:var(--txt)}
.siegel span{font-size:.76rem;color:var(--txt-3);line-height:1.35}
.karriere{margin-top:1.8rem;padding:1rem 1.2rem;border-left:3px solid var(--acc);background:var(--paper);border-radius:0 var(--r-klein) var(--r-klein) 0;font-size:.9rem;color:var(--txt-2)}
.karriere a{color:var(--acc-2);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* =========================================================================
   Einzugsgebiet — Karte ohne Kasten
   ========================================================================= */
.gebiet{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,3.6rem);align-items:center}
#gebiet{overflow-x:clip}
.gebiet__karte{position:relative;margin:0 auto;width:min(100%,560px)}
.gebiet__karte img{width:100%;height:auto;display:block}
.gebiet__karte::before,.gebiet__karte::after{content:"";position:absolute;left:0;right:0;height:12%;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}
.gebiet__hinweis{margin-top:.9rem;font-size:.82rem;color:var(--txt-3);text-align:center}

/* =========================================================================
   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(20,20,19,.95) 0%,rgba(20,20,19,.86) 46%,rgba(20,20,19,.72) 100%)}
.kontakt__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(2rem,4vw,3.6rem);align-items:center}
.kontakt .haken li{color:rgba(255,255,255,.92)}
.ap{display:grid;gap:.9rem;margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14)}
.ap__l{font:600 .72rem/1 var(--f-b);letter-spacing:.13em;text-transform:uppercase;color:var(--acc-3)}
.ap__reihe{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.4rem}
.ap__p{display:flex;align-items:flex-start;gap:.7rem}
.ap__p svg{width:20px;height:20px;color:var(--acc);flex:none;margin-top:.1rem}
.ap__p b{display:block;font:600 .9rem/1.3 var(--f-b);color:#fff}
.ap__p span{font-size:.8rem;color:var(--on-dark-2);line-height:1.45}
.ap__p a:hover{color:#fff}

/* =========================================================================
   FAQ
   ========================================================================= */
.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:var(--acc-auf)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--e-calm)}
.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.4fr 1fr 1.1fr 1.1fr;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:56px;width:auto;margin-bottom:1rem}
.fuss__marke p{font-size:.89rem;line-height:1.6;max-width:32ch}
.fuss__siegel{margin-top:1.1rem;height:44px;width:auto;background:#fff;border-radius:8px;padding:4px 6px}
.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(--paper);border:1px solid var(--line);border-radius:var(--r-pille);
  padding:.6rem .5rem .6rem .95rem;box-shadow:var(--sh-l);position:relative;max-width:min(16rem,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(--paper);border-right:1px solid var(--line);border-top:1px solid var(--line);transform:translateY(-50%) rotate(45deg)}
.fab__blase-l{font:500 .8125rem/1.32 var(--f-b);color:var(--txt)}
.fab__blase-l b{color:var(--acc-2);font-weight:700}
.fab__blase-zu{flex:none;width:22px;height:22px;border:0;border-radius:50%;background:none;cursor:pointer;color:var(--txt-3);font-size:1.05rem;line-height:1;display:grid;place-items:center}
.fab__blase-zu:hover{background:var(--paper-2);color:var(--txt)}
.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,.hot__p::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:56px;height:56px;border-radius:var(--r-pille);background:var(--acc);color:var(--acc-auf);border:0;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 10px 26px rgba(162,192,53,.45);transition:transform .24s var(--spring)}
.fab__k svg{width:26px;height:26px;grid-area:1/1}
.fab__k:active{transform:scale(.94)}

.ovl{position:fixed;inset:0;z-index:105;display:none;place-items:center;padding:1.2rem;background:rgba(20,20,19,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.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(180deg,rgba(20,20,19,0) 40%,rgba(20,20,19,.55) 100%)}
.popup__badge{position:absolute;left:1rem;bottom:1rem;z-index:2;background:var(--acc);color:var(--acc-auf);font:700 .72rem/1 var(--f-b);letter-spacing:.08em;text-transform:uppercase;padding:.45rem .7rem;border-radius:var(--r-pille)}
.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(--ink);font-size:1.25rem;
  line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.35);transition:transform .3s var(--spring),background .2s var(--ease)}
.ovl__zu:hover{background:var(--acc);transform:rotate(90deg)}
.popup__inhalt{padding:1.3rem 1.5rem 1.5rem}
.popup__k h3{font:700 1.7rem/1 var(--f-d);text-transform:uppercase;letter-spacing:.006em;padding-top:.06em}
.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}

.modal__k{position:relative;width:min(560px,100%);max-height:92vh;overflow-y:auto;border-radius:var(--r-gross);animation:hoch .32s var(--spring)}
.modal__k .karte-form{box-shadow:none}
.modal__k .ovl__zu{top:.9rem;right:.9rem;background:var(--paper-2);color:var(--txt);box-shadow:none;border:1px solid var(--line)}
.modal__k .ovl__zu:hover{background:var(--acc);color:var(--acc-auf)}
.modal__k .stoerer{right:3.6rem;top:-10px}
body.ist-gesperrt{overflow:hidden}

/* =========================================================================
   Reveal — 10-px-Regel, einmalig
   ========================================================================= */
html.js .rv{opacity:0;transform:translateY(10px);transition:opacity .5s var(--e-soft),transform .5s var(--e-soft)}
html.js .rv.is-da{opacity:1;transform:none}
.rv-g > .rv:nth-child(2){transition-delay:80ms}.rv-g > .rv:nth-child(3){transition-delay:160ms}
.rv-g > .rv:nth-child(4){transition-delay:240ms}.rv-g > .rv:nth-child(5){transition-delay:320ms}
.rv-g > .rv:nth-child(6){transition-delay:400ms}.rv-g > .rv:nth-child(7){transition-delay:480ms}.rv-g > .rv:nth-child(8){transition-delay:560ms}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .msg{opacity:1;transform:none}
  .ck path{stroke-dashoffset:0;transition:none}
  .schrittk__kw::before{transform:none;transition:none}
  .schnitt [data-schicht].is-on .kante{animation:none}
}
@media (max-width:700px){html.js .rv{transform:translateY(6px)}}
html:not(.js) .ck path{stroke-dashoffset:0}
html:not(.js) .schrittk__kw::before{transform:none}
html:not(.js) .lz__p:not(.is-on) .lz__c{opacity:1;transform:none}

/* =========================================================================
   Rechtsseiten
   ========================================================================= */
.seitenkopf{background:var(--ink);color:#fff;padding:clamp(7rem,11vw,9rem) 0 clamp(2.6rem,4vw,3.4rem)}
.seitenkopf h1{font:700 clamp(2.2rem,4.6vw,3.4rem)/.96 var(--f-d);text-transform:uppercase;letter-spacing:.004em;padding-top:.06em}
.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.35rem,2.6vw,1.75rem);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 .marke__hell{display:none}
.rechtsseite .kopfleiste .marke__dunkel{display:block}

/* 404 */
.nix{text-align:center;padding:clamp(3rem,6vw,5rem) 0}
.nix__zahl{font:700 clamp(6rem,18vw,12rem)/1 var(--f-d);color:var(--acc);opacity:.25}
.nix h2{margin-top:-.4em}
.nix__btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1.6rem}
.nix__liste{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:2.4rem;text-align:left}
.nix__liste a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-klein);padding:.9rem 1rem;font-weight:600;transition:border-color .2s var(--ease)}
.nix__liste a:hover{border-color:var(--acc)}
.nix__liste a span{display:block;font-weight:400;font-size:.84rem;color:var(--txt-3);margin-top:.15rem}

/* =========================================================================
   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}
}

@media (max-width:980px){
  .nav,.kopf-tel,.kopfleiste .btn--acc{display:none}
  .kopf-mob{display:flex}
  .hero__in,.wa,.aufbau,.vor,.ueber,.gebiet,.kontakt__in{grid-template-columns:1fr}
  .hero{padding-top:clamp(6.5rem,18vw,8rem)}
  .hero__bg img{object-position:50% 40%}
  .hero__bg::after{background:linear-gradient(180deg,rgba(20,20,19,.84) 0%,rgba(20,20,19,.72) 45%,rgba(20,20,19,.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}
  /* Handy zuerst, danach der Text */
  .wa > .wa__copy{order:2}
  .wa > .wa__stage{order:1}
  .gebiet > .gebiet__karte{order:1}
  .gebiet > .gebiet__inhalt{order:2}
  .gebiet__karte{width:min(100%,420px)}
  .vor{grid-template-areas:"bild" "karte" "text";gap:1rem}
  .hot__karte{min-height:0;margin-bottom:.8rem}
  .hot__p{width:30px;height:30px;margin:-15px 0 0 -15px;font-size:.8rem}
  .aufbau > .schnitt{order:1}
  .aufbau > .aufbau__text{order:2}
  .ueber__bild{margin-top:1.6rem}
  .siegel{left:.6rem;bottom:-.9rem}
  .vgl{grid-template-columns:1fr}
  .vgl__wir{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}
  .ref__reihe img{height:200px}
}

@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}
  .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:300px}
  .bt-gross{min-height:360px}
  .bt-gross,.bt-hoch,.bt-breit{grid-column:span 1;grid-row:span 1}
  .bt-hoch{min-height:400px}
  .faq__a p{padding-right:.8rem}
  .hero__btns{flex-direction:column;align-items:stretch;text-align:center}
  .hero__btns .btn{width:100%}
  .stoerer{width:88px;height:88px;top:-12px;right:-6px}
  .stoerer__k{font-size:.6rem}
  .stoerer__gr{font-size:1.1rem}
  .form__kopf{padding-right:3.8rem}
  .ap__reihe{grid-template-columns:1fr}
  .ueber__fakten{grid-template-columns:1fr 1fr;gap:.7rem}
  .fakt b{font-size:1.6rem}
  .ref__reihe img{height:160px}
  .nix__liste{grid-template-columns:1fr}
  .wa__cta .btn{width:100%}
  .band__kopf{flex-direction:column;align-items:flex-start}
}

@media (max-width:520px){
  .lz__c .haken li,.btile-txt .haken li{font-size:.8rem}
  .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)}
  .g-pille{font-size:.84rem;padding:.5rem .8rem}
  .marke img{height:44px}
  .kopfleiste.is-fest .marke img{height:38px}
  .schicht{grid-template-columns:30px 1fr;gap:.7rem;padding:.75rem .85rem}
  .schicht__nr{width:30px;height:30px;font-size:.9rem}
}