/* =============================================================================
   tischlerei-haas-tf001 · tf001.css — funnel-lokales Layout (Builder-Rekonstruktion
   des Funnel-Tunnel-Originals info.tischlereihaas.at/kueche, Variante A, gemessen
   2026-09-08 bei 1860/375 px — snapshot/kueche/spec-desktop.json + spec-mobile.json).
   Farben/Fonts/Komponenten kommen aus dem CI-Kit (assets/kit/, Byte-gleich zum Router-
   Master); HIER stehen nur Geometrie, Sektionsrhythmus und die dunkle Flaechenlogik des
   Originals (Navy/Black-Wechsel, Lime als Akzent). Nichts davon ins Kit — Kit-Gate.
   ============================================================================= */

/* ---- Dunkle Seite (Original: Navy #0b121e / Black #070d16) ---------------------- */
/* Seitenweite Hintergrund-Ebene wie im Original (Funnel-Tunnel legt ein Page-Background-Image ueber die volle Hoehe;
   hier neutral/transparent, damit die Grafik-Bilanz des Klon-Checks dieselbe Ebene zaehlt). */
body{ background:var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'/%3E") repeat; color:#fff; }
.th-section{ padding-block:clamp(48px,3.8vw,70px); }
.th-section--black{ background:var(--c-primary-dark); }
.th-wrap{ width:100%; max-width:1160px; margin-inline:auto; padding-inline:clamp(19px,2.2vw,20px); }
.th-narrow{ max-width:900px; }

/* ---- Typografie-Rollen (px aus der Messung: Hero-H1 43/400, H2 34/400, Eyebrow 26/700,
        Body 20/400, Trust-Zahl 26/700, Labels 16, FAQ 16, Footer 15; Mobil: H1 24, Body 18) */
.th-eyebrow{ display:block; font:var(--fw-bold) 26px/1.2 var(--font-head);
  color:var(--c-accent); text-transform:uppercase; margin:0 0 56px; }
.th-eyebrow::after{ content:""; display:block; width:88px; height:4px; background:var(--c-accent); margin-top:18px; }
.th-eyebrow--center{ text-align:center; }
.th-eyebrow--center::after{ margin-inline:auto; }
.th-h1{ font:var(--fw-normal) 43px/1.18 var(--font-head); color:#fff; margin:0 0 22px; text-transform:uppercase; letter-spacing:.01em; }
.th-h2{ font:var(--fw-normal) 34px/1.2 var(--font-head); color:#fff; margin:0 0 28px; text-transform:uppercase; letter-spacing:0; }
.th-p.th-p--tight{ margin-bottom:0; }
.th-cta .th-eyebrow{ margin-bottom:28px; }
@media (max-width:767px){ .th-section.th-ablauf{ padding-top:78px; padding-bottom:2px; } .th-section.th-cta{ padding-top:0; } .th-section.th-ueber{ padding-top:56px; } .th-section.th-problem{ padding-top:0; } .th-section.th-faq-sec{ padding-top:0; } }
.th-ueber{ padding-top:calc(clamp(48px,3.8vw,70px) + 47px); }
.th-ueber .th-eyebrow{ margin-bottom:28px; }
.th-ablauf{ padding-top:calc(clamp(48px,3.8vw,70px) + 27px); }
.th-h2--bold{ font-weight:var(--fw-bold); }
@media (max-width:767px){ .th-h2--mobileleft{ text-align:left; } }
.th-h2--center{ text-align:center; }
.th-lime{ color:var(--c-accent); }
.th-p{ font-size:20px; line-height:1.5; color:#fff; margin:0 0 30px; }
.th-p:last-child{ margin-bottom:0; }
.th-p--soft{ color:#e1e1e1; }
.th-label{ font-size:16px; line-height:1.5; color:#e1e1e1; text-transform:uppercase; }

/* ---- CTA-Button des Originals: Lime, 20/700, 15x30 Padding, 0 Radius, Pfeil rechts ---- */
.th-btn{ display:inline-flex; align-items:center; gap:22px; background:var(--c-accent); color:var(--c-on-accent);
  font:var(--fw-bold) 20px/1.1 var(--font-head); padding:15px 30px; border:0; border-radius:0; text-decoration:none;
  transition:background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.th-btn:hover{ background:var(--c-accent-hover); transform:translateY(-1px); }
.th-btn .arr{ font-size:1.15em; line-height:1; }

/* ---- Hero: Bild 500x500 links (x350), Text rechts ab x853; Mobil: Bild oben, Text darunter ---- */
.th-hero{ padding:48px 0 32px; }
.th-hero__grid{ display:grid; grid-template-columns:500px minmax(0,1fr); column-gap:3px; align-items:center; margin-left:-30px; }
.th-hero__img{ width:500px; height:500px; object-fit:cover; display:block; }
.th-hero__text{ padding-top:0; }
.th-hero .th-p{ margin-bottom:38px; max-width:602px; }
@media (max-width:1023px){
  .th-hero{ padding-top:0; }
  .th-hero .th-btn{ margin-left:26px; }
  .th-hero__grid{ grid-template-columns:1fr; margin:0 -19px; }
  .th-hero__img{ width:calc(100% + 8px); height:auto; aspect-ratio:1/1; margin-left:-4px; }
  .th-hero__text{ padding:34px 29px 0; text-align:left; }
  .th-hero .th-p{ margin-bottom:20px; }
}

/* ---- Trustbar: 3 Spalten (x380/743/1117), Zahl 26/700 Lime + kurzer Lime-Strich, Label 16 ---- */
.th-trust{ display:grid; grid-template-columns:363px 374px minmax(0,1fr); gap:0; }
.th-trustbar{ padding-top:64px; }
@media (max-width:767px){ .th-section{ padding-block:36px; } .th-section.th-trustbar{ padding-top:40px; } }
.th-trust__num{ font:var(--fw-bold) 26px/1.25 var(--font-head); color:var(--c-accent); margin:0; }
.th-trust__num sup{ font-size:.6em; line-height:0; }
.th-trust__dash{ width:36px; height:2px; background:var(--c-accent); margin:22px 0 28px; }
@media (max-width:767px){ .th-trust{ grid-template-columns:1fr; gap:40px; } }

/* ---- Symptom-Karten: 2x2, Lime-Rahmen, Ziffer + zentrierter Text ---- */
.th-cards2{ display:grid; grid-template-columns:repeat(2,1fr); gap:38px 44px; margin-top:40px; }
.th-card{ border:1px solid var(--c-accent); padding:40px 41px 44px; text-align:center; }
.th-card__num{ display:block; font:var(--fw-bold) 26px/1 var(--font-head); color:var(--c-accent); margin:0 0 26px; }
@media (max-width:767px){ .th-cards2{ grid-template-columns:1fr; gap:48px; } .th-card{ padding:36px 17px 30px; } }

/* ---- Zweispalter Text + Bild (Problem: Bild 579x386 rechts; Ueber-uns: Bild 698x466 links) ---- */
.th-split{ display:grid; grid-template-columns:572px minmax(0,1fr); column-gap:0; align-items:start; }
.th-split__img{ width:100%; height:auto; display:block; }
.th-split__media--wide .th-split__img{ width:579px; max-width:none; margin-left:-14px; }
.th-split--imgleft{ grid-template-columns:495px minmax(0,1fr); column-gap:0; }
.th-portrait__clip{ width:495px; height:466px; overflow:hidden; }
.th-portrait__clip .th-split__img{ width:698px; height:466px; max-width:none; margin-left:-106px; }
.th-split--imgleft > div:last-child{ padding-top:7px; }
.th-portrait{ position:relative; }
.th-portrait__cap{ position:absolute; left:51px; bottom:-75px; background:var(--c-primary-dark); border:1px solid rgba(255,255,255,.08);
  padding:20px 26px; min-width:240px; }
.th-portrait__name{ font:var(--fw-bold) 21px/1.3 var(--font-head); color:var(--c-accent); text-transform:uppercase; }
.th-portrait__role{ font-size:15px; color:var(--c-accent); }
@media (max-width:1023px){
  .th-split, .th-split--imgleft{ grid-template-columns:1fr; row-gap:34px; }
  .th-split__img{ width:calc(100% + 38px); margin-left:-19px; max-width:none; }
  .th-split__media--wide .th-split__img{ width:calc(100% + 38px); margin-left:-19px; }
  .th-portrait__clip{ width:auto; height:auto; overflow:visible; }
  .th-portrait__clip .th-split__img{ width:498px; height:auto; margin-left:-62px; }
  .th-split--imgleft > div:last-child{ padding-top:0; }
  .th-portrait__cap{ position:static; margin:-2px 0 0 37px; }
}

/* ---- Versprechen-Box: Lime-Rahmen, kleine Lime-Eyebrow (16), Haekchen-Liste ---- */
.th-promise{ border:1px solid var(--c-accent); padding:40px 34px; margin-top:120px; }
.th-promise__title{ font:var(--fw-normal) 16px/1.4 var(--font-head); color:var(--c-accent); text-transform:uppercase; margin:0 0 24px; }
.th-promise ul{ list-style:none; margin:0; padding:0; }
.th-promise li{ position:relative; padding-left:35px; font-size:20px; line-height:1.5; margin-bottom:22px; }
.th-promise li:last-child{ margin-bottom:0; }
.th-promise li::before{ content:""; position:absolute; left:0; top:.45em; width:14px; height:8px;
  border-left:2px solid var(--c-accent); border-bottom:2px solid var(--c-accent); transform:rotate(-45deg); }
@media (max-width:1023px){ .th-promise{ margin-top:86px; padding:28px 22px; } }

/* ---- Ablauf: grosse Schritt-1-Karte, Zwischenzeile mit Linien, 3 Karten ---- */
.th-step1{ border:1px solid var(--c-accent); padding:44px 45px 48px; margin-top:44px; }
.th-step1__label{ font-size:20px; color:var(--c-accent); text-transform:uppercase; margin:0 0 30px; }
.th-step1__row{ display:grid; grid-template-columns:105px minmax(0,1fr); column-gap:0; align-items:start; }
.th-step1__row > div:last-child{ max-width:843px; }
.th-step1__num{ font:var(--fw-bold) 64px/1 var(--font-head); color:var(--c-accent); }
.th-step1__title{ font:var(--fw-normal) 26px/1.3 var(--font-head); color:#fff; text-transform:uppercase; margin:0 0 22px; }
.th-divider{ display:flex; align-items:center; gap:24px; margin:60px 0 56px; color:var(--c-accent); font-size:16px; text-transform:uppercase; text-align:center; }
.th-divider::before,.th-divider::after{ content:""; flex:1; height:1px; background:rgba(185,211,70,.35); }
.th-cards3{ display:grid; grid-template-columns:360px 360px 360px; column-gap:25px; }
.th-card3{ border:1px solid var(--c-accent); padding:24px 23px 34px; }
.th-card3__num{ font:var(--fw-bold) 34px/1 var(--font-head); color:var(--c-accent); margin:0 0 26px; }
.th-card3__title{ font:var(--fw-normal) 26px/1.3 var(--font-head); color:#fff; text-transform:uppercase; margin:0 0 18px; }
@media (max-width:1023px){ .th-cards3{ grid-template-columns:1fr; } .th-card3{ padding:20px 7px 88px; } .th-step1{ padding:28px 13px 34px; } .th-step1__row{ grid-template-columns:1fr; row-gap:30px; } .th-divider{ margin:120px 0 125px; } }

/* ---- CTA-Ende: alles zentriert, Unterzeile 15 Versalien ---- */
.th-cta{ text-align:center; }
.th-cta .th-h2{ margin-bottom:40px; }
.th-cta__sub{ font-size:15px; text-transform:uppercase; color:#fff; margin:30px 0 0; letter-spacing:.02em; }

/* ---- Testimonials: 3 Karten, grosses Lime-Anfuehrungszeichen, Name in Lime ---- */
.th-quote{ border:1px solid var(--c-accent); padding:30px 23px 34px; display:flex; flex-direction:column; }
.th-quote__mark{ font:var(--fw-bold) 54px/1 var(--font-head); color:var(--c-accent); margin:0 0 20px; }
.th-quote__name{ font-size:20px; color:var(--c-accent); text-transform:uppercase; margin:50px 0 0; }
@media (max-width:1023px){ .th-quote{ padding:40px 7px 59px; } .th-quote .th-p, .th-quote--first .th-p{ max-width:none; } }
.th-quote .th-p{ margin-bottom:0; max-width:282px; }
.th-quote--first .th-p{ max-width:300px; }

/* ---- Galerie-Streifen: 6 Kacheln 309x232 (Original: CSS-Hintergruende in einem Slider),
        Mobil eine Kachel 374x281 je Ansicht — Scroll-Snap statt Slider-JS ---- */
.th-gallery-sec{ padding-block:48px; }
@media (max-width:767px){ .th-gallery-sec{ padding-block:0; } }
.th-gallery{ display:flex; gap:1px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.th-gallery__tile{ flex:0 0 calc(100% / 6); aspect-ratio:309 / 232; background-size:cover; background-position:center; scroll-snap-align:start; }
@media (max-width:767px){ .th-gallery__tile{ flex:0 0 100%; aspect-ratio:auto; height:281px; } }

/* ---- FAQ: native details, Frage 16 Versalien weiss, Lime-Chevron, Antwort gedimmt ---- */
.th-faq{ max-width:1060px; margin-inline:auto; }
@media (max-width:767px){ .th-faq{ padding-inline:31px; } }
.th-faq__item{ border-bottom:1px solid rgba(255,255,255,.14); }
.th-faq__q{ width:100%; background:none; border:0; cursor:pointer; display:flex; align-items:center; gap:25px; padding:22px 8px 22px 0; text-align:left;
  font:var(--fw-normal) 16px/1.5 var(--font-head); color:#fff; text-transform:uppercase; }
.th-faq__q::before{ content:""; width:9px; height:9px; border-right:2px solid var(--c-accent); border-bottom:2px solid var(--c-accent);
  transform:rotate(45deg); flex:0 0 auto; transition:transform var(--dur) var(--ease); margin-top:-4px; }
.th-faq__item.is-open .th-faq__q::before{ transform:rotate(-135deg); margin-top:4px; }
.th-faq__a{ height:0; overflow:hidden; }
.th-faq__item.is-open .th-faq__a{ height:auto; }
.th-faq__inner{ margin-top:10px; padding:0 0 24px; font-size:16px; line-height:1.6; color:var(--c-on-dark-muted); }

/* ---- Mobil-Typografie (Original bei 375: H1 24, H2 22, Body 18, Eyebrow/Trust-Zahl 20; Desktop-Werte
        bleiben bis 767px hinunter fix — der Builder skaliert Schrift nicht mit der Breite, gemessen 1860 = 1280) */
@media (max-width:767px){
  .th-h1{ font-size:24px; } .th-h2{ font-size:22px; } .th-p, .th-promise li, .th-step1__label, .th-quote__name{ font-size:18px; }
  .th-eyebrow, .th-trust__num, .th-step1__title, .th-card3__title{ font-size:20px; }
  .th-danke .th-h1{ font-size:22px; }
}

/* ---- Sticky-Mobile-CTA (Agentur-Standard, nur mobil; eckig wie der Original-Button) ---- */
.sticky-cta.btn{ border-radius:0; }

/* ---- Scroll-Fade (Agentur-Standard, funnel-rueckgrat): aeusserste Bloecke jeder Sektion,
        Hero und Abschluss-CTA ausgenommen ---- */
@keyframes scroll-fade{ from{ opacity:.10; } to{ opacity:1; } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    main > section:not([data-lp-section="hero"]):not([data-lp-section="cta-ende"]) > *{
      animation:scroll-fade linear both; animation-timeline:view(); animation-range:cover 0% cover 45%;
    }
  }
}

/* ---- Unterseiten (Quiz/Danke/DQ): zentrierter Logo-Header auf Dunkel ---- */
.th-header{ display:flex; justify-content:center; padding:26px 20px 10px; }
.th-header img{ height:44px; width:auto; }

/* ---- Quiz auf Dunkel: Original-Overlay = Lime-Optionen mit dunklem Text, Frage weiss ---- */
.quiz-shell{ width:100%; max-width:640px; margin-inline:auto; padding:var(--sp-6) var(--gutter) var(--sp-8); }
.quiz-shell .quiz__steps{ color:#fff; }
.quiz-shell .quiz__progress{ background:rgba(255,255,255,.12); }
.quiz-shell .quiz-lead{ color:#fff; text-transform:uppercase; font-size:clamp(17px,1.1vw,20px); max-width:38rem; }
.quiz-shell .quiz-lead strong{ font-weight:var(--fw-bold); }
.quiz-shell .quiz__question{ color:#fff; font-weight:var(--fw-normal); }
.quiz-shell .quiz__opt{ background:var(--c-accent); color:#303030; border-color:var(--c-primary); font-size:18px; font-weight:var(--fw-normal); }
.quiz-shell .quiz__opt:hover{ background:var(--c-accent-hover); border-color:var(--c-accent-hover); }
.quiz-shell .quiz__opt[aria-checked="true"]{ background:var(--c-accent-hover); border-color:#fff; color:var(--c-on-accent); }
.quiz-shell .field > label{ color:#fff; }
.quiz-shell .check{ color:#fff; }
.quiz-shell .check a{ color:var(--c-accent); }
.quiz-shell .quiz-back{ color:#fff; }
.req{ color:var(--c-accent); }
.tel-row{ display:flex; gap:var(--sp-2); }
.tel-row .tel-cc{ flex:0 0 auto; width:auto; padding:0 var(--sp-2); border:1.5px solid var(--c-border-strong);
  background:#fff; font:inherit; color:var(--c-text); min-height:var(--tap-min); }
.tel-row input{ flex:1 1 auto; min-width:0; }
.quiz-shell .field__error{ color:#ff8a80; }

/* ---- Danke: Text links (x380, ~350 breit), Bild 506x338 rechts (x952) ---- */
.th-danke{ display:grid; grid-template-columns:minmax(0,1fr) 506px; column-gap:40px; align-items:start; padding-block:100px 160px; }
.th-danke .th-h1{ font-size:34px; margin-bottom:26px; }
.th-danke .th-p{ max-width:360px; }
.th-danke__img{ width:100%; height:auto; display:block; margin-top:32px; }
@media (max-width:1023px){ .th-danke{ grid-template-columns:1fr; padding-block:40px 80px; row-gap:30px; } .th-danke .th-p{ max-width:none; } .th-danke__img{ margin-top:0; } }

/* Danke-H1 mobil (nach der Desktop-Regel, damit sie gewinnt) */
@media (max-width:767px){ .th-danke .th-h1{ font-size:22px; } }