/* ============================================================
   VOGT & SOHN BAU — Interaktive Module & Animationen
   ============================================================ */

/* ---------- SCROLL-REVEAL ---------- */
/* Ohne JavaScript bleibt der Inhalt sichtbar (Fallback via .js-Klasse am <html>) */
html:not(.js) [data-reveal],
html:not(.js) [data-stagger]>*{opacity:1 !important;transform:none !important;filter:none !important;clip-path:none !important}
[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  filter:blur(6px);
  transition:opacity .95s var(--e-soft),transform 1.05s var(--e-soft),filter .8s var(--e-out);
  will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:none;filter:blur(0)}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="scale"]{transform:scale(.93);filter:blur(8px)}
[data-reveal="clip"]{
  opacity:1;transform:none;filter:none;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s var(--e-soft);
}
[data-reveal="clip"].is-visible{clip-path:inset(0 0 0 0)}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.40s}
[data-reveal-delay="6"]{transition-delay:.48s}
[data-stagger]>*{
  opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--e-soft),transform .95s var(--e-soft);
}
[data-stagger].is-visible>*{opacity:1;transform:none}
[data-stagger].is-visible>*:nth-child(1){transition-delay:.04s}
[data-stagger].is-visible>*:nth-child(2){transition-delay:.12s}
[data-stagger].is-visible>*:nth-child(3){transition-delay:.20s}
[data-stagger].is-visible>*:nth-child(4){transition-delay:.28s}
[data-stagger].is-visible>*:nth-child(5){transition-delay:.36s}
[data-stagger].is-visible>*:nth-child(6){transition-delay:.44s}
[data-stagger].is-visible>*:nth-child(7){transition-delay:.52s}
[data-stagger].is-visible>*:nth-child(8){transition-delay:.60s}
[data-stagger].is-visible>*:nth-child(n+9){transition-delay:.68s}

/* Zeichen-Reveal für Headlines */
.split-w{display:inline-block;overflow:hidden;vertical-align:top}
.split-w>span{display:inline-block;transform:translateY(102%);transition:transform .95s var(--e-soft)}
.is-visible .split-w>span{transform:none}

/* Parallax */
[data-parallax]{will-change:transform}

/* ---------- KOSTENRECHNER ---------- */
.calc{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(1.5rem,1rem + 2.4vw,2.5rem);align-items:start;
}
.calc__main{
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--r-xl);box-shadow:var(--sh-md);overflow:hidden;
}
.calc__bar{padding:1.35rem clamp(1.35rem,1rem + 1.4vw,2.1rem);border-bottom:1px solid var(--line-soft);background:var(--cream)}
.calc__track{display:flex;align-items:center;gap:.4rem}
.calc__dot{
  flex:1;display:flex;flex-direction:column;gap:.55rem;position:relative;
}
.calc__dot-b{height:.36rem;border-radius:99px;background:var(--sand-2);overflow:hidden}
.calc__dot-b::after{
  content:"";display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .65s var(--e-soft);
}
.calc__dot.is-done .calc__dot-b::after,.calc__dot.is-current .calc__dot-b::after{width:100%}
.calc__dot-l{font-size:var(--fs-2xs);color:var(--muted-2);font-weight:600;letter-spacing:.03em;transition:color .4s}
.calc__dot.is-current .calc__dot-l,.calc__dot.is-done .calc__dot-l{color:var(--accent-3)}
@media (max-width:640px){.calc__dot-l{display:none}}

.calc__body{padding:clamp(1.35rem,1rem + 1.6vw,2.4rem);min-height:24rem}
.calc__step{display:none}
.calc__step.is-active{display:block;animation:step-in .55s var(--e-soft)}
@keyframes step-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.calc__step h3{margin-bottom:.5rem}
.calc__step>.lead{margin-bottom:1.75rem;font-size:var(--fs-sm);max-width:52ch}
.calc__foot{
  padding:1.25rem clamp(1.35rem,1rem + 1.4vw,2.1rem);
  border-top:1px solid var(--line-soft);background:var(--cream);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}
.calc__back{
  display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);
  font-weight:600;color:var(--muted);transition:color var(--t-fast);
}
.calc__back:hover{color:var(--ink)}
.calc__back svg{width:1rem;height:1rem;stroke:currentColor;fill:none;stroke-width:2;transition:transform .4s var(--e-out)}
.calc__back:hover svg{transform:translateX(-3px)}
.calc__back[hidden]{visibility:hidden}

/* Ergebnis-Panel */
.calc__side{
  position:sticky;top:calc(var(--nav-h) + 1.5rem);
  background:linear-gradient(155deg,var(--deep),var(--deep-2));
  border-radius:var(--r-xl);padding:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  color:#A9C0CE;box-shadow:var(--sh-lg);overflow:hidden;position:sticky;isolation:isolate;
}
.calc__side::before{
  content:"";position:absolute;z-index:-1;width:20rem;height:20rem;right:-7rem;top:-9rem;
  border-radius:50%;background:radial-gradient(circle,rgba(224,123,57,.4),transparent 66%);filter:blur(40px);
}
.calc__side h4{color:#fff;font-size:var(--fs-md);margin-bottom:.35rem}
.calc__side>p{font-size:var(--fs-2xs);color:#7E9DAE;margin-bottom:1.5rem}
.calc__sum{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:clamp(2rem,1.5rem + 2.2vw,2.9rem);color:#fff;
  line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:.15rem;
}
.calc__sum small{font-size:.42em;color:var(--accent);font-weight:600}
.calc__range{font-size:var(--fs-2xs);color:#7E9DAE;margin-top:.5rem}
.calc__list{margin-top:1.6rem;padding-top:1.35rem;border-top:1px solid rgba(255,255,255,.11);display:grid;gap:.72rem}
.calc__list li{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-xs);align-items:baseline}
.calc__list span{color:#7E9DAE}
.calc__list b{color:#fff;font-weight:600;text-align:right}
.calc__list li.is-empty b{color:#4E6E80;font-weight:400}
.calc__disc{
  margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid rgba(255,255,255,.11);
  font-size:var(--fs-2xs);color:#5E7C8D;line-height:1.55;
}
@media (max-width:1000px){
  .calc{grid-template-columns:1fr}
  .calc__side{position:static}
}

/* Zusammenfassung / Ergebnis */
.result{display:grid;gap:1.1rem}
.result__row{
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:.95rem 1.15rem;background:var(--cream);border-radius:var(--r-sm);
  border:1px solid var(--line-soft);font-size:var(--fs-sm);
}
.result__row span{color:var(--muted)}
.result__row b{color:var(--ink);text-align:right}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:.35rem;padding:.35rem;background:var(--sand);border-radius:var(--r-pill);
  overflow-x:auto;scrollbar-width:none;max-width:max-content}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:.62rem 1.25rem;border-radius:var(--r-pill);font-size:var(--fs-sm);
  font-weight:600;color:var(--muted);white-space:nowrap;
  transition:all .4s var(--e-out);
}
.tab:hover{color:var(--ink)}
.tab.is-active{background:var(--paper);color:var(--ink);box-shadow:var(--sh-sm)}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:fade-in .5s var(--e-out)}
@keyframes fade-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- VERGLEICHSTABELLE ---------- */
.ctable{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--paper);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-soft);box-shadow:var(--sh-sm);font-size:var(--fs-sm);
}
.ctable th,.ctable td{padding:1rem 1.2rem;text-align:left;border-bottom:1px solid var(--line-soft)}
.ctable thead th{background:var(--deep);color:#fff;font-weight:600;font-size:var(--fs-xs);
  letter-spacing:.04em;border-bottom:0}
.ctable thead th:not(:first-child){text-align:center}
.ctable tbody th{font-weight:600;color:var(--ink);width:34%}
.ctable td{text-align:center;color:var(--muted)}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.ctable tbody tr:hover th,.ctable tbody tr:hover td{background:var(--cream)}
.ctable .yes{color:var(--mint);font-weight:600}
.ctable .no{color:var(--muted-2)}
.ctable-wrap{overflow-x:auto;border-radius:var(--r-lg);-webkit-overflow-scrolling:touch}

/* ---------- KONTAKT ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.75rem,1rem + 3vw,3.5rem);align-items:start}
@media (max-width:940px){.contact-grid{grid-template-columns:1fr}}
.ccard{
  display:flex;gap:1rem;padding:1.35rem;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  transition:all .45s var(--e-out);
}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--sand-2)}
.ccard__ico{
  width:2.9rem;height:2.9rem;flex:none;border-radius:.9rem;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-3);
  transition:all .45s var(--e-out);
}
.ccard:hover .ccard__ico{background:var(--accent);color:#fff;transform:rotate(-7deg)}
.ccard__ico svg{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ccard h4{font-size:var(--fs-sm);margin-bottom:.28rem}
.ccard p,.ccard a{font-size:var(--fs-sm);color:var(--muted);line-height:1.55}
.ccard a:hover{color:var(--accent-2)}

.map{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:16/10;background:var(--sand-2);border:1px solid var(--line-soft);
  box-shadow:var(--sh-sm);
}
.map svg{width:100%;height:100%;display:block}
.map__pin{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;
}
.map__pin-b{
  background:var(--paper);padding:.7rem 1rem;border-radius:var(--r-sm);
  box-shadow:var(--sh-lg);font-size:var(--fs-xs);font-weight:600;color:var(--ink);
  white-space:nowrap;margin-bottom:.5rem;
}
.map__pin-b span{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-2xs)}
.map__pin-d{
  width:1.15rem;height:1.15rem;border-radius:99px;background:var(--accent);
  border:3px solid #fff;box-shadow:0 4px 14px -2px rgba(224,123,57,.8);
  position:relative;
}
.map__pin-d::after{
  content:"";position:absolute;inset:-.55rem;border-radius:99px;
  border:2px solid var(--accent);opacity:0;
  animation:ping 2.4s var(--e-out) infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.7);opacity:0}}

/* Öffnungszeiten */
.hours{display:grid;gap:.1rem}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.62rem .1rem;
  font-size:var(--fs-sm);border-bottom:1px solid var(--line-soft)}
.hours li:last-child{border-bottom:0}
.hours span{color:var(--muted)}
.hours b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.hours li.is-now{background:var(--mint-soft);margin-inline:-.6rem;padding-inline:.6rem;border-radius:var(--r-xs)}
.hours li.is-now b{color:var(--mint)}

/* ---------- 404 ---------- */
.e404{min-height:70vh;display:grid;place-items:center;text-align:center;padding-block:var(--sp-10)}
.e404__n{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(7rem,5rem + 14vw,16rem);line-height:.82;letter-spacing:-.06em;
  background:linear-gradient(150deg,var(--accent),var(--deep) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:1.5rem;
}

/* ---------- ZERTIFIKATE / LOGOS ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden}
.logos div{
  background:var(--paper);padding:1.6rem 1rem;display:grid;place-items:center;
  transition:background .4s var(--e-out);text-align:center;
}
.logos div:hover{background:var(--cream)}
.logos b{
  font-family:'Bricolage Grotesque',sans-serif;font-size:var(--fs-sm);
  color:var(--ink-2);letter-spacing:-.02em;line-height:1.3;
}
.logos small{display:block;font-size:var(--fs-2xs);color:var(--muted-2);margin-top:.25rem;font-weight:400}

/* ---------- SPLIT-FEATURE ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,1.2rem + 3.5vw,4.5rem);align-items:center}
.split--rev>*:first-child{order:2}
.split--aside{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr)}
.split--article{grid-template-columns:minmax(0,.68fr) minmax(0,.32fr)}
.split--top{align-items:start}
@media (max-width:1000px){
  .split--aside,.split--article{grid-template-columns:1fr;gap:2.25rem}
}
@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:2.25rem}
  .split--rev>*:first-child{order:0}
}
.split__vis{position:relative}
.split__vis .media{border-radius:var(--r-xl);box-shadow:var(--sh-lg)}
.split__badge{
  position:absolute;right:-1rem;bottom:-1rem;z-index:2;
  background:var(--paper);border-radius:var(--r-md);padding:1.1rem 1.35rem;
  box-shadow:var(--sh-xl);border:1px solid var(--line-soft);
  display:flex;align-items:center;gap:.9rem;
}
.split__badge-n{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:var(--fs-xl);
  color:var(--accent);line-height:1;letter-spacing:-.04em;
}
.split__badge-l{font-size:var(--fs-2xs);color:var(--muted);line-height:1.35;max-width:9rem}
@media (max-width:560px){.split__badge{right:.5rem;bottom:-.75rem;padding:.85rem 1rem}}

/* Deko-Ecke */
.corner{position:absolute;width:4.5rem;height:4.5rem;pointer-events:none;opacity:.5}
.corner--tl{top:-1px;left:-1px;border-top:2px solid var(--accent);border-left:2px solid var(--accent);border-radius:var(--r-lg) 0 0 0}
.corner--br{bottom:-1px;right:-1px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);border-radius:0 0 var(--r-lg) 0}

/* ---------- LEISTUNGS-INDEX (Sticky-Liste) ---------- */
.svc-index{border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1fr) auto;
  gap:clamp(1rem,.5rem + 2vw,2.5rem);align-items:center;
  padding:clamp(1.5rem,1.2rem + 1.6vw,2.4rem) .5rem;
  border-bottom:1px solid var(--line);position:relative;
  transition:padding-left .5s var(--e-soft);
}
.svc-row::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,var(--accent-soft),transparent);
  opacity:0;transition:opacity .5s var(--e-out);
}
.svc-row:hover{padding-left:1.35rem}
.svc-row:hover::before{opacity:1}
.svc-row__n{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:var(--fs-lg);
  color:var(--sand-2);letter-spacing:-.04em;transition:color .4s var(--e-out);
}
.svc-row:hover .svc-row__n{color:var(--accent)}
.svc-row h3{font-size:var(--fs-lg);transition:color .4s var(--e-out)}
.svc-row:hover h3{color:var(--accent-3)}
.svc-row p{font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.svc-row__go{
  width:2.9rem;height:2.9rem;border-radius:99px;flex:none;
  background:var(--sand);color:var(--ink);display:grid;place-items:center;
  transition:all .5s var(--e-spring);
}
.svc-row:hover .svc-row__go{background:var(--accent);color:#fff;transform:rotate(-45deg) scale(1.08)}
.svc-row__go svg{width:1.1rem;height:1.1rem;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .svc-row{grid-template-columns:3rem minmax(0,1fr) auto;gap:1.15rem}
  .svc-row p{grid-column:2 / -1}
}

/* ---------- NOISE-OVERLAY (fixiert, GPU-schonend) ---------- */
.noise{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- COOKIE-BANNER (Demo) ---------- */
.cookie{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:110;
  max-width:24rem;margin-left:auto;margin-right:1rem;
  background:rgba(255,255,255,.96);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-xl);padding:1.35rem 1.5rem;
  transform:translateY(140%);transition:transform .7s var(--e-spring);
}
.cookie.is-shown{transform:none}
.cookie h5{font-size:var(--fs-sm);margin-bottom:.4rem}
@media (max-width:560px){.cookie{margin-right:auto;max-width:none}}
.cookie p{font-size:var(--fs-xs);color:var(--muted);line-height:1.6;margin-bottom:1.15rem}
.cookie__acts{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie__acts .btn{flex:1;justify-content:center;min-width:8rem}

/* Warnhinweis im Rechner */
.calc-warn{
  display:none;align-items:center;gap:.6rem;margin-top:1.2rem;
  padding:.8rem 1rem;border-radius:var(--r-sm);
  background:rgba(180,52,42,.08);border:1px solid rgba(180,52,42,.22);
  color:var(--danger);font-size:var(--fs-xs);font-weight:500;
}
.calc-warn.is-shown{display:flex;animation:shake .4s var(--e-out)}
.calc-warn svg{width:1rem;height:1rem;flex:none;stroke:currentColor;fill:none;stroke-width:2}
.calc__slider-out{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:var(--fs-xl);color:var(--ink);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}
.calc__slider-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.9rem}
.calc__slider-scale{display:flex;justify-content:space-between;font-size:var(--fs-2xs);color:var(--muted-2);margin-top:.5rem}
.calc__next[hidden]{display:none}