/* =========================================================================
   Linnemeier · Ads-Landingpage „Fliesenleger“ (Lippstadt, Wadersloh)
   Liegt NACH styles.css und ergänzt nur. Basis: Badsanierungs-LP.
   Neue Bausteine: Fugenraster, Leistungs-Tabs, Fliesenfeld, Verlegemuster-
   Umschalter, Vergleichstabelle, Ablauf mit Nummernkreis, Renovierung,
   Referenz-Raster, Angebot. Keine Bibliothek.
   ========================================================================= */

.lp-hp{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.s-paper3{background:var(--paper-3)}

/* --- Deko: Kicker mit kleinem Fliesen-Quadrat, Fugenlinien als Raster ---- */
.lp .kicker{display:flex;align-items:center;gap:.55rem}
.lp .kopf--mitte .kicker{justify-content:center}
.lp .kicker::before{content:"";flex:none;width:11px;height:11px;border-radius:2px;background:currentColor;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.hat-fugen{isolation:isolate}
.fugen-deko{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:linear-gradient(var(--ink) 2px,transparent 2px),linear-gradient(90deg,var(--ink) 2px,transparent 2px);
  background-size:120px 120px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.schluss .fugen-deko{-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 72%);mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 72%)}

.txt-link{color:var(--acc-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.txt-link:hover{color:var(--txt)}
.txt-link svg{width:16px;height:16px;vertical-align:-3px}
.hero__weiter svg,.txt-link svg,.stimmen__alle svg,.schluss__links svg{display:inline-block}
.zugestaendnis{max-width:62ch;font-size:.98rem;line-height:1.6;color:var(--txt-2);padding-left:1rem;border-left:3px solid var(--acc)}
.schritt__hinweis{margin-top:.7rem;font-size:.8rem;line-height:1.45;color:var(--txt-2)}
.formstate__wa{margin-top:.7rem;font-size:.88rem}
.formstate__wa a{color:var(--acc-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* =========================================================================
   Hero — Desktop wie Startseite, Handy: Foto oben ohne Text, weicher Auslauf
   ========================================================================= */
.hero--lp .hero__ansage{font-size:clamp(2.1rem,3.6vw,3.3rem)}
.hero--lp .hero__ansage .a{text-wrap:balance}
.hero--lp .hero__bg::after{background:linear-gradient(90deg,rgba(20,20,19,.9) 0%,rgba(20,20,19,.74) 42%,rgba(20,20,19,.38) 100%)}
.hero__weiter{margin-top:1rem;font-size:.92rem}
.hero__weiter a{color:var(--acc-3);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hero__weiter a:hover{color:#fff}
.hero__weiter svg{width:16px;height:16px;vertical-align:-3px;margin-left:.15rem}
@media (max-width:980px){
  .kopfleiste--lp{background:rgba(255,255,255,.97);border-bottom-color:var(--line);box-shadow:0 8px 28px rgba(28,28,27,.07);padding:.5rem 0}
  .kopfleiste--lp .marke__hell{display:none}
  .kopfleiste--lp .marke__dunkel{display:block}
  .kopfleiste--lp .marke img{height:42px}
  .hero--lp{--kopf:58px;--bildh:min(100vw,560px);background:var(--ink);padding-top:calc(var(--kopf) + var(--bildh) - 4.5rem)}
  .hero--lp .hero__bg{inset:auto;top:var(--kopf);left:0;right:0;height:var(--bildh)}
  .hero--lp .hero__bg img{height:100%;object-position:50% 60%}
  .hero--lp .hero__bg::after{background:linear-gradient(180deg,rgba(28,28,27,0) 48%,rgba(28,28,27,.62) 74%,var(--ink) 97%)}
}
@media (max-width:520px){
  .hero--lp{--kopf:54px}
  .kopfleiste--lp .marke img{height:38px}
}

/* =========================================================================
   Marken — nur drei belegte Logos, ruhig und ohne Laufband (J-03)
   ========================================================================= */
.marken__fest{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(2rem,6vw,4.5rem)}
.marken__fest img{height:36px;width:auto;flex:none;filter:grayscale(1);opacity:.7;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.marken__fest img.ist-gross{height:60px}
.marken__fest img:hover{filter:none;opacity:1}

/* =========================================================================
   Leistungen als Tabs
   ========================================================================= */
.lf-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem}
.lf-tab{border:1px solid var(--line-2);background:var(--paper);border-radius:var(--r-pille);min-height:44px;padding:.62rem 1.1rem;
  font:600 .9rem/1 var(--f-b);color:var(--txt-2);cursor:pointer;white-space:nowrap;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),transform .18s var(--spring)}
.lf-tab:hover{border-color:var(--txt);color:var(--txt)}
.lf-tab:active{transform:scale(.97)}
.lf-tab.is-an,.lf-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.lf-panels{margin-top:1.2rem;background:var(--line);padding:2px;border-radius:var(--r-gross);box-shadow:var(--sh)}
.lf-panel{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;border-radius:calc(var(--r-gross) - 2px);overflow:hidden}
.lf-panel.is-an{display:grid;animation:lfEin .35s var(--e-soft)}
html:not(.js) .lf-panel{display:grid;margin-bottom:2px}
@keyframes lfEin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lf-panel__text{background:var(--paper);padding:clamp(1.5rem,3vw,2.4rem)}
.lf-panel__text h3{font:700 clamp(1.5rem,2.4vw,2rem)/1.02 var(--f-d);text-transform:uppercase;padding-top:.06em}
.lf-panel__text p{margin-top:.9rem;font-size:1rem;line-height:1.62;color:var(--txt-2)}
.lf-mehr{margin-top:.7rem}
.lf-panel__cta{margin-top:1.5rem}
.lf-panel__bilder{display:grid;gap:2px;background:var(--line);min-height:320px}
.lf-panel__bilder--zwei{grid-template-columns:1fr 1fr}
.lf-bild{margin:0;position:relative;overflow:hidden;background:var(--paper-3)}
.lf-bild img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}

/* =========================================================================
   Vorteile — Fliesenfeld 3 × 2, Fugen 2 px auf --line
   ========================================================================= */
.fliesenfeld{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line-2);padding:2px;border-radius:var(--r);margin-top:2.2rem;overflow:hidden}
.fliese{margin:0;background:var(--paper);padding:1.5rem 1.4rem 1.6rem;display:grid;align-content:start;gap:.8rem;min-height:190px;transition:background .25s var(--ease)}
.fliese:hover{background:#fff}
.fliese__q{width:22px;height:22px;border-radius:3px;background:var(--acc-soft);border:2px solid var(--acc)}
.fliese p{font-size:.97rem;line-height:1.55;color:var(--txt-2)}
.fliese p b{display:block;color:var(--txt);font:700 1.18rem/1.1 var(--f-d);text-transform:uppercase;padding-top:.06em;margin-bottom:.35rem}
.fliese--bild{padding:0;position:relative;overflow:hidden;min-height:190px}
.fliese--bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vorteile__fuss{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;margin-top:1.8rem}

/* =========================================================================
   WhatsApp — Foto-Nachricht als Zeichnung
   ========================================================================= */
.msg--foto svg.msg__zeichnung{width:180px;height:134px;border-radius:8px;display:block}

/* =========================================================================
   Verlegemuster — dunkle Bühne mit gezeichnetem Muster, Fugenachsen, Startpunkt
   ========================================================================= */
.muster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,4.6vw,4.4rem);align-items:center}
.muster__knoepfe{display:inline-grid;grid-template-columns:repeat(3,auto);gap:4px;margin-top:1.6rem;padding:4px;background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-pille)}
.muster__k{border:0;background:none;min-height:44px;padding:.62rem 1.05rem;border-radius:var(--r-pille);font:600 .9rem/1 var(--f-b);color:var(--txt-2);cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease)}
.muster__k:hover{color:var(--txt)}
.muster__k.is-an{background:var(--ink);color:#fff}
.muster__texte{margin-top:1rem;min-height:5.2em}
.muster__t{display:none;font-size:.98rem;line-height:1.6;color:var(--txt-2);max-width:54ch}
.muster__t.is-an{display:block;animation:lfEin .3s var(--e-soft)}
html:not(.js) .muster__t{display:block;margin-bottom:.6rem}
.muster__cta{margin-top:1.4rem}
.muster__buehne{position:relative;border-radius:var(--r-gross);overflow:hidden;background:var(--ink);box-shadow:var(--sh-l);aspect-ratio:4/3}
.muster__svg{display:block;width:100%;height:100%}
.mz{opacity:0;transition:opacity .45s var(--e-calm)}
.mz.is-an{opacity:1}
.mz__plan{opacity:.85}
.mz__start circle:last-child{transform-box:fill-box;transform-origin:center}
.muster__buehne.ist-neu .mz__plan path{stroke-dashoffset:0;animation:fugeZieh 1s var(--e-calm)}
@keyframes fugeZieh{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
.muster__buehne.ist-neu .mz__start circle:last-child{animation:startPuls .9s var(--e-soft)}
@keyframes startPuls{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:.55}}
.muster__chip{position:absolute;left:1rem;top:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .75rem;border-radius:var(--r-pille);
  background:rgba(20,20,19,.78);color:#fff;font:600 .78rem/1 var(--f-b);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.muster__chip i{width:9px;height:9px;border-radius:50%;background:var(--acc)}
.muster__fotos{position:absolute;right:1rem;bottom:1rem;width:min(34%,170px)}
.muster__foto{display:none;margin:0;border-radius:var(--r-klein);overflow:hidden;border:3px solid #fff;box-shadow:0 14px 30px rgba(0,0,0,.35);aspect-ratio:3/4;background:var(--paper-3)}
.muster__foto.is-an{display:block;animation:lfEin .35s var(--e-soft)}
.muster__foto img{width:100%;height:100%;object-fit:cover;display:block}

/* =========================================================================
   Bewertungen als Liste — links die Note (klebt), rechts die Stimmen
   ========================================================================= */
.stimmen__raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.stimmen__note{position:sticky;top:104px}
.stimmen__score{display:inline-grid;gap:.55rem;margin-top:1.6rem;justify-items:start;padding:1.2rem 1.4rem;border-radius:var(--r);
  background:var(--paper-2);border:1px solid var(--line);transition:border-color .2s var(--ease),transform .2s var(--spring)}
.stimmen__score:hover{border-color:var(--acc);transform:translateY(-2px)}
.stimmen__score > b{font:700 clamp(4.2rem,7vw,5.8rem)/.85 var(--f-d);color:var(--txt);padding-top:.06em}
.stimmen__score .sterne svg{width:22px;height:22px}
.stimmen__g{display:inline-flex;align-items:center;gap:.5rem;font:600 .9rem/1.2 var(--f-b);color:var(--txt-2)}
.stimme{margin:0;padding:1.45rem 0;border-top:1px solid var(--line)}
.stimme:last-of-type{border-bottom:1px solid var(--line)}
.stimme .sterne svg{width:15px;height:15px}
.stimme p{margin-top:.6rem;font-size:1.06rem;line-height:1.6;color:var(--txt)}
.stimme footer{margin-top:.7rem;font-size:.84rem;color:var(--txt-2)}
.stimme footer b{color:var(--txt);font-weight:600;margin-right:.55rem}
.stimme footer span{display:inline-block}
.stimmen__hinweis{display:flex;align-items:flex-start;gap:.6rem;margin-top:1.3rem;padding:.8rem 1rem;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--r-klein);font-size:.82rem;line-height:1.5;color:var(--txt-2)}
.stimmen__hinweis svg{width:18px;height:18px;flex:none;margin-top:.1rem;color:var(--acc-2)}
.stimmen__alle{margin-top:1rem}
.stimmen__alle a{color:var(--acc-2);font-weight:600;font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
.stimmen__alle a:hover{color:var(--txt)}
.stimmen__alle svg{width:16px;height:16px;vertical-align:-3px;margin-left:.15rem}

/* =========================================================================
   Vergleich — echte Tabelle mit Logospalte, Haken und grauen Kreuzen
   ========================================================================= */
.vt-rahmen{margin-top:2.2rem;background:var(--line);padding:2px;border-radius:var(--r-gross);box-shadow:var(--sh);overflow:hidden}
.vt{width:100%;border-collapse:separate;border-spacing:2px;background:var(--line);border-radius:calc(var(--r-gross) - 2px);overflow:hidden;table-layout:fixed}
.vt th,.vt td{background:var(--paper);padding:1rem 1.15rem;text-align:left;vertical-align:middle;font-size:.95rem;line-height:1.45}
.vt thead td{background:var(--paper-2)}
.vt thead th{font:600 .9rem/1.3 var(--f-b);color:var(--txt);vertical-align:bottom}
.vt thead th img{display:block;height:34px;width:auto;margin-bottom:.55rem}
.vt thead th.vt__wir{background:var(--acc-soft)}
.vt thead th.vt__and{background:var(--paper-3);color:var(--txt-2)}
.vt__grau{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-klein);background:var(--line);color:var(--txt-3);margin-bottom:.55rem}
.vt__grau svg{width:18px;height:18px}
.vt tbody th{font:700 1.02rem/1.15 var(--f-d);text-transform:uppercase;color:var(--txt);padding-top:1.1rem;width:22%}
.vt tbody td{display:table-cell}
.vt tbody td > span{display:inline}
.vt tbody td{position:relative;padding-left:2.9rem}
.vt__ic{position:absolute;left:1.1rem;top:1.05rem;width:20px;height:20px}
.vt__ic--ja{color:var(--gut)}
.vt__ic--nein{color:#9E9A90}
.vt__ic--frage{color:var(--txt-3)}
.vt td.vt__wir{color:var(--txt);font-weight:600;background:#FCFDF7}
.vt td.vt__and{color:var(--txt-2);background:var(--paper-2)}
.vgl__fuss{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;margin-top:1.8rem}

/* =========================================================================
   Ablauf — vier Boxen, Nummernkreis auf dem Rand
   ========================================================================= */
.ablauf{list-style:none;margin:2.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;counter-reset:none}
.abl{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:2.3rem 1.3rem 1.4rem;
  transition:border-color .22s var(--ease),transform .22s var(--spring),box-shadow .22s var(--ease)}
.abl:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--sh)}
.abl__nr{position:absolute;top:-22px;left:1.2rem;width:44px;height:44px;border-radius:50%;background:var(--acc);color:var(--acc-auf);
  display:grid;place-items:center;font:700 1.35rem/1 var(--f-d);padding-top:.08em;box-shadow:0 0 0 5px var(--paper)}
.abl h3{font:700 1.15rem/1.1 var(--f-d);text-transform:uppercase;padding-top:.06em;color:var(--txt)}
.abl p{margin-top:.6rem;font-size:.9rem;line-height:1.55;color:var(--txt-2)}
.ablauf__fuss{display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:center;justify-content:space-between;margin-top:2rem}

/* =========================================================================
   Renovierung — Bild links, Kriterien rechts
   ========================================================================= */
.renov{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,4.6vw,4.4rem);align-items:center}
.renov__bild{margin:0;position:relative}
.renov__bild img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-gross);box-shadow:var(--sh-l);display:block}
.renov__bild::after{content:"";position:absolute;right:-12px;bottom:-12px;width:42%;height:30%;z-index:-1;border-radius:var(--r);
  background-image:linear-gradient(var(--line-2) 2px,transparent 2px),linear-gradient(90deg,var(--line-2) 2px,transparent 2px);background-size:28px 28px}
.renov__text .haken li{font-size:.97rem}
.renov__schluss{margin-top:1.3rem;font-size:1rem;line-height:1.6;color:var(--txt-2);max-width:60ch}
.renov__cta{margin-top:1.5rem}

/* =========================================================================
   Referenzen — Raster 3 × 2 mit 2-px-Fugen
   ========================================================================= */
.refraster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line-2);padding:2px;border-radius:var(--r-gross);margin-top:2.4rem;overflow:hidden}
.refk{margin:0;position:relative;background:var(--paper-3);aspect-ratio:4/3;overflow:hidden}
.refk img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--e-calm)}
.refk:hover img{transform:scale(1.04)}
.refk figcaption{position:absolute;left:.7rem;bottom:.7rem;right:.7rem;width:max-content;max-width:calc(100% - 1.4rem);padding:.42rem .7rem;border-radius:var(--r-pille);
  background:rgba(255,255,255,.94);color:var(--txt);font:600 .8rem/1.25 var(--f-b);box-shadow:0 4px 14px rgba(0,0,0,.12)}

/* =========================================================================
   Kosten — das Angebot richtet sich auf, daneben die sechs Kostentreiber
   ========================================================================= */
.kosten__raster{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,4.6vw,4.4rem);align-items:center}
.ang-buehne{position:relative;perspective:1500px;padding:1.2rem .4rem}
.ang{position:relative;background:#fff;border:1px solid var(--line);border-radius:8px;padding:1.5rem 1.5rem 1.2rem;
  box-shadow:0 44px 80px -24px rgba(28,28,27,.32),0 2px 6px rgba(28,28,27,.06);
  transform-origin:50% 100%;transform:rotateX(26deg) rotateZ(-7deg) translateY(14px);transition:transform 1.3s var(--e-calm)}
.ang-buehne.is-da .ang{transform:rotateX(0) rotateZ(-2deg)}
@supports (animation-timeline:view()){
  .ang{transition:none;animation:angAuf linear both;animation-timeline:view();animation-range:entry 5% cover 42%}
  @keyframes angAuf{from{transform:rotateX(30deg) rotateZ(-8deg) translateY(24px)}to{transform:rotateX(0) rotateZ(-2deg)}}
}
.ang__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding-bottom:.95rem;border-bottom:2px solid var(--ink)}
.ang__kopf img{height:38px;width:auto}
.ang__kopf > span{text-align:right}
.ang__kopf b{display:block;font:700 1.45rem/1 var(--f-d);text-transform:uppercase;padding-top:.06em}
.ang__kopf span span{display:block;margin-top:.25rem;font-size:.68rem;color:var(--txt-2)}
.ang__betreff{margin:.85rem 0 .5rem;font:600 .78rem/1.4 var(--f-b);color:var(--txt-2)}
.ang__pos{list-style:none;margin:0;padding:0}
.ang__pos li{display:grid;grid-template-columns:24px minmax(0,1fr) 84px;gap:.55rem;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.75rem;line-height:1.3}
.ang__pos li > span:first-child{color:var(--txt-2);font-variant-numeric:tabular-nums}
.ang__pos i{display:block;justify-self:end;width:var(--w);height:7px;border-radius:4px;background:var(--paper-3)}
.ang__summe{display:grid;grid-template-columns:1fr 84px;align-items:center;padding:.6rem 0 .2rem;font:700 .8rem/1 var(--f-b)}
.ang__summe i{display:block;height:9px;border-radius:4px;background:var(--ink)}
.ang__fuss{margin-top:.8rem;font-size:.68rem;color:var(--txt-2)}
.ang__stempel{position:absolute;right:1.4rem;top:38%;transform:rotate(-11deg);border:2px solid var(--acc-2);color:var(--acc-2);
  font:700 1.05rem/1 var(--f-d);letter-spacing:.14em;text-transform:uppercase;padding:.36rem .6rem .3rem;border-radius:6px;opacity:.85;background:rgba(255,255,255,.7)}

.treiber{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.6rem}
.treiber__k{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:.85rem;row-gap:.2rem;align-items:start;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.05rem;
  transition:border-color .22s var(--ease),transform .22s var(--spring),box-shadow .22s var(--ease)}
.treiber__k:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--sh)}
.treiber__k svg{grid-row:span 2;width:40px;height:40px;padding:8px;border-radius:11px;background:var(--paper);border:1px solid var(--line);color:var(--acc-2)}
.treiber__k b{font:600 .95rem/1.3 var(--f-b);color:var(--txt)}
.treiber__k p{font-size:.84rem;line-height:1.5;color:var(--txt-2)}
.kosten__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.7rem}

/* =========================================================================
   Anfrage, Final-CTA
   ========================================================================= */
.kontakt__direkt{margin-top:1rem;font-size:.95rem;color:var(--on-dark-2)}
.kontakt__direkt a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.kontakt__direkt a:hover{color:var(--acc-3)}
.schluss{isolation:isolate}
.schluss__btns{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.schluss__links{list-style:none;padding:0;margin:1.6rem 0 0;display:flex;justify-content:center;flex-wrap:wrap;gap:.6rem 2rem}
.schluss__links a{color:var(--acc-2);font-weight:600;font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
.schluss__links a:hover{color:var(--txt)}
.schluss__links svg{width:16px;height:16px;vertical-align:-3px;margin-left:.15rem}

/* Kleine Hilfstexte mindestens 4,5 : 1 (Startseiten-Token txt-3 liegt bei 4,2) */
.lp .form__kopf p,.lp .fortschritt__z,.lp .google-zeile{color:var(--txt-2)}
.lp .chat__head b + span{color:#1A7A43}
.lp .chat__status > span > span,.lp .chat__tag{color:var(--txt-2)}

/* Liste direkt nach dem Einleitungsabsatz braucht Luft */
.lead + .haken{margin-top:1.3rem}

/* Endlosschleifen laufen nur, solange sie im Bild sind */
html.js [data-loop]:not(.loop-an) .marken__spur{animation-play-state:paused}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1100px){
  .ablauf{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem}
}

@media (max-width:980px){
  .stimmen__raster,.kosten__raster,.muster,.renov{grid-template-columns:minmax(0,1fr)}
  .stimmen__note{position:static}
  .kosten__raster{gap:1.6rem}
  .ang-buehne{max-width:520px;margin-inline:auto;width:100%;order:2}
  .kosten__text{order:1}
  .lf-panel{grid-template-columns:minmax(0,1fr)}
  .lf-panel__bilder{min-height:0;aspect-ratio:16/10;order:-1}
  .fliesenfeld{grid-template-columns:repeat(2,minmax(0,1fr))}
  .muster__buehne{order:2}
  .renov__bild{max-width:440px;width:100%;margin-inline:auto}
  .refraster{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .lf-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:0 16px .4rem;scrollbar-width:none;scroll-snap-type:x proximity}
  .lf-tabs::-webkit-scrollbar{display:none}
  .lf-tab{scroll-snap-align:start}
  .lf-panel__cta .btn,.vorteile__fuss .btn,.vgl__cta .btn,.ablauf__fuss .btn,.renov__cta .btn,.muster__cta .btn,.schluss__btns .btn{width:100%}
  .fliesenfeld{grid-template-columns:minmax(0,1fr)}
  .fliese{min-height:0}
  .fliese--bild{aspect-ratio:16/9}
  .muster__knoepfe{display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
  .muster__k{padding:.6rem .4rem;font-size:.84rem}
  .muster__fotos{width:34%;right:.7rem;bottom:.7rem}
  .muster__chip{left:.7rem;top:.7rem;font-size:.72rem}
  /* Vergleich: Tabelle wird zu Karten je Zeile */
  .vt-rahmen{background:none;padding:0;box-shadow:none;border-radius:0;overflow:visible}
  .vt,.vt tbody,.vt tr,.vt th,.vt td{display:block;width:100%}
  .vt{background:none;border-spacing:0}
  .vt thead{display:none}
  .vt tbody tr{background:var(--line);padding:2px;border-radius:var(--r);margin-bottom:.8rem;display:grid;gap:2px;overflow:hidden}
  .vt tbody th{width:auto;padding:.85rem 1rem .7rem;background:var(--paper)}
  .vt tbody td{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:.55rem;padding:.75rem 1rem}
  .vt tbody td::before{content:attr(data-label);grid-column:1 / -1;font:600 .72rem/1.3 var(--f-b);letter-spacing:.04em;text-transform:uppercase;color:var(--txt-2);margin-bottom:.3rem}
  .vt tbody td{padding-left:1rem}
  .vt__ic{position:static;margin:0}
  .ablauf{grid-template-columns:minmax(0,1fr);row-gap:2.1rem}
  .refraster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .refk figcaption{font-size:.72rem;left:.45rem;bottom:.45rem;right:.45rem;max-width:calc(100% - .9rem);border-radius:10px;width:auto}
  .treiber{grid-template-columns:1fr}
  .kosten__cta .btn{width:100%}
  .ang{padding:1.2rem 1.1rem 1rem}
  .ang__pos li{grid-template-columns:22px minmax(0,1fr) 60px;font-size:.7rem}
  .ang__summe{grid-template-columns:1fr 60px}
  .ang__stempel{right:.8rem;font-size:.9rem}
  .marken__fest{gap:1.6rem 2.4rem}
  .marken__fest img{height:30px}
  .marken__fest img.ist-gross{height:50px}
}

@media (max-width:420px){
  .lp .btn--lg{padding-inline:1rem;font-size:clamp(.88rem,4.2vw,1rem)}
  .ang-buehne{padding-inline:.7rem}
  .ang-buehne.is-da .ang{transform:rotateZ(-1deg)}
  .refraster{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================================
   Weniger Bewegung: Endzustand sofort, keine Schleifen
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .ang,.ang-buehne.is-da .ang{animation:none;transition:none;transform:rotateZ(-2deg)}
  .treiber__k,.stimmen__score,.abl,.lf-tab,.refk img,.mz,.fliese{transition:none}
  .lf-panel.is-an,.muster__t.is-an,.muster__foto.is-an{animation:none}
  .muster__buehne.ist-neu .mz__plan path,.muster__buehne.ist-neu .mz__start circle:last-child{animation:none}
  .refk:hover img{transform:none}
}

/* ---- R1-Messlauf: Korrekturen (23.10.2026) ---- */
/* H2 zweizeilig halten: lange Kopfzeilen bekommen mehr Breite bzw. etwas kleinere Schrift */
#vergleich .kopf--mitte,#referenzen .kopf--mitte,#los .kopf--mitte{max-width:58rem}
#bewertungen h2{font-size:clamp(1.5rem,2.55vw,2.1rem)}
#anfrage h2{font-size:clamp(1.55rem,2.9vw,2.3rem)}
#renovierung h2{font-size:clamp(1.6rem,3vw,2.5rem)}
@media (max-width:540px){
  #vergleich h2,#referenzen h2,#los h2,#anfrage h2,#renovierung h2,#gebiet h2{font-size:1.5rem}
}
/* Quiz-Kacheln: Beschriftung bleibt einzeilig */
.lp--fliesen .pick__t{font-size:.72rem;letter-spacing:-.005em}
/* Pop-up auf sehr schmalen Handys: Schließen-Knopf bleibt im Bild */
@media (max-width:360px){
  #lpPopup{padding:.7rem}
  #lpPopup .popup__inhalt{padding:1.1rem .85rem 1.2rem}
  #lpPopup .popup__btns .btn{padding-left:.8rem;padding-right:.8rem;font-size:.88rem}
}
/* Chat-Datumschip größer und dunkler */
.lp .chat__tag{font-size:.72rem;color:var(--txt)}
@media (max-width:400px){
  #anfrage h2{font-size:clamp(1.3rem,6.6vw,1.5rem)}
  .lp--fliesen .pick{padding-left:.3rem;padding-right:.3rem}
  .lp--fliesen .pick__t{font-size:.7rem;letter-spacing:-.01em}
}
/* Akzenttext auf Papier 3 etwas dunkler (gerenderter Kontrast lag bei 4,33:1) */
.s-paper3 .kicker,.s-paper3 h2 .a{color:#536815}