/* =========================================================================
   Linnemeier · Ads-Landingpage „Kleine Sanitärarbeiten“
   Liegt NACH styles.css und ergänzt nur. Hero, Bewertungen und Hilfsregeln
   aus lp-komplettbad.css (Badsanierungs-LP) übernommen, Rest neu.
   ========================================================================= */

.lp-hp{display:none}
.vh{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.s-soft{background:var(--acc-soft)}
.mitte-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.8rem,3vw,2.6rem)}

/* --- Hero (aus der Badsanierungs-LP) ------------------------------------ */
.hero--lp .hero__ansage{font-size:clamp(2.1rem,3.6vw,3.3rem)}
.hero--lp .hero__ansage .a{text-wrap:balance}
@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% 50%}
  .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}
}

/* --- Formular-Ergänzungen ---------------------------------------------- */
.feld__hinweis{display:flex;align-items:center;gap:.45rem;margin-top:.45rem;font-size:.82rem;line-height:1.4;color:var(--txt-2)}
.feld__hinweis svg{width:16px;height:16px;flex:none;color:#1A9E4B}
.feld__hinweis a{color:var(--txt);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.form__fuss{margin-top:.55rem;font-size:.8rem;line-height:1.45;color:var(--txt-2);text-align:center}
.formstate__wa{margin-top:1.1rem}
.lp-form .picks .pick__t{hyphens:auto}

/* --- Vertrauensleiste --------------------------------------------------- */
.vtr{background:var(--paper);border-bottom:1px solid var(--line)}
.vtr__liste{list-style:none;margin:0;padding:1.05rem 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem 1.9rem}
.vtr__liste li{display:flex;align-items:center;gap:.5rem;font-size:.9rem;line-height:1.35;color:var(--txt-2)}
.vtr__liste li b{color:var(--txt);font-weight:700}
.vtr__liste svg{width:20px;height:20px;flex:none;color:var(--acc-2)}
.vtr__liste a{color:var(--txt);font-weight:600}
.vtr__liste a:hover{color:var(--acc-2)}

/* --- Problem-Wähler ----------------------------------------------------- */
.pw{max-width:980px;margin-inline:auto}
.pw__kacheln{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.6rem}
.pw__k{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:44px;padding:.9rem .5rem .85rem;border-radius:var(--r);
  background:var(--paper);border:1.5px solid var(--line);cursor:pointer;font:600 .9rem/1.25 var(--f-b);color:var(--txt);text-align:center;
  transition:border-color .2s var(--ease),transform .25s var(--spring),box-shadow .2s var(--ease),background .2s var(--ease)}
.pw__k:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:var(--sh)}
.pw__k.is-an{border-color:var(--acc);background:#fff;box-shadow:0 0 0 3px rgba(162,192,53,.28)}
.pw__ill{display:block;width:72px;height:57px}
.pw__ill svg{width:100%;height:100%}
.pw__antworten{margin-top:1rem}
.pw__a{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);padding:1.4rem 1.6rem;box-shadow:var(--sh);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.4rem 1.6rem;align-items:center}
.pw__h{grid-column:1 / -1;font:700 1.35rem/1 var(--f-d);text-transform:uppercase;padding-top:.06em}
.pw__a p{color:var(--txt-2);line-height:1.6}
.pw__a p b{color:var(--txt)}
.pw__a p a{color:var(--acc-2);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pw__a + .pw__a{margin-top:.8rem}
html.js .pw__a:not(.is-an){display:none}
html.js .pw__a + .pw__a{margin-top:0}

/* --- Leistungen: Schemazeichnung im Akkordeon --------------------------- */
.lz__schema{object-position:50% 30%}
.lz__bg.lz__schema{filter:brightness(.8)}

/* --- Silikonfugen -------------------------------------------------------- */
.sil{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.8rem,4.5vw,4.5rem);align-items:center}
.sil__bild{position:relative;border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--sh);aspect-ratio:4/5;background:var(--ink-2)}
.sil__bild img{width:100%;height:100%;object-fit:cover}
.sil__p{margin-top:1rem;color:var(--txt-2);line-height:1.62;max-width:60ch}
.sil__p b{color:var(--txt)}
.sil__text .haken{margin-top:1.3rem}
.sil__satz{margin-top:1.2rem;font:700 1.3rem/1.1 var(--f-d);text-transform:uppercase;color:var(--acc-2);padding-top:.06em}
.sil__btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* --- Vergleich ----------------------------------------------------------- */
.abw{max-width:1060px;margin-inline:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-gross);box-shadow:var(--sh);overflow:hidden}
.abw__t{width:100%;border-collapse:collapse;font-size:.94rem;line-height:1.4}
.abw__t th,.abw__t td{padding:1rem 1.1rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line)}
.abw__t tbody tr:last-child th,.abw__t tbody tr:last-child td{border-bottom:0}
.abw__t thead th{font:600 .9rem/1.3 var(--f-b);color:var(--txt-2);background:var(--paper-2)}
.abw__t thead th.abw__wir{background:var(--acc-soft)}
.abw__t thead img{height:40px;width:auto}
.abw__t tbody th{font-weight:600;color:var(--txt);width:26%}
.abw__t td{color:var(--txt-2)}
.abw__t td.abw__wir{background:rgba(241,246,223,.55);color:var(--txt);font-weight:600}
.abw__ic{display:inline-flex;vertical-align:-4px;margin-right:.5rem}
.abw__ic svg{width:20px;height:20px}
.abw__ic--ja svg{color:var(--acc-2)}
.abw__ic--nein svg,.abw__ic--teils svg{color:#8A8984}

/* --- Bewertungen (aus der Badsanierungs-LP) ----------------------------- */
.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-child{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}

/* --- Ablauf ohne Bilder -------------------------------------------------- */
.ablauf--ohne{padding-top:23px}
.ablauf--ohne .schrittk__k{border-top:1px solid var(--line);border-radius:var(--r)}

/* --- Vorbereiten --------------------------------------------------------- */
.vb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.vb__k{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.4rem}
.vb__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-klein);background:var(--acc-soft);color:var(--acc-2);margin-bottom:1rem}
.vb__ic svg{width:26px;height:26px}
.vb__k p{margin-top:.5rem;font-size:.93rem;line-height:1.58;color:var(--txt-2)}

/* --- Einzugsgebiet ------------------------------------------------------- */
.gebiet__p{margin-top:.9rem;color:var(--txt-2);line-height:1.6;max-width:56ch}
#gebiet .gebiet__karte::before{background:linear-gradient(to bottom,var(--paper-2),transparent)}
#gebiet .gebiet__karte::after{background:linear-gradient(to top,var(--paper-2),transparent)}

/* --- FAQ-Zeile und Schluss ---------------------------------------------- */
.faq__mehr{margin-top:1.6rem;text-align:center;color:var(--txt-2)}
.faq__mehr a{color:var(--txt);font-weight:700;white-space:nowrap}
.faq__mehr a:hover{color:var(--acc-2)}
.schluss__links{list-style:none;margin:2rem auto 0;padding:0;display:grid;gap:.6rem;justify-items:center;text-align:center}
.schluss__links li{font-size:.95rem;color:var(--txt-2)}
.schluss__links a{display:inline-flex;align-items:center;gap:.4rem;color:var(--txt);font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:44px}
.schluss__links a svg{width:16px;height:16px;color:var(--acc-2)}
.schluss__links a:hover{color:var(--acc-2)}

/* --- Kontrast kleiner Hilfstexte (aus der Badsanierungs-LP) ------------- */
.lp .form__kopf p,.lp .fortschritt__z,.lp .google-zeile{color:var(--txt-2)}
.lp .chat__status > span > span,.lp .chat__tag{color:var(--txt-2)}
.lead + .haken{margin-top:1.3rem}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:980px){
  .stimmen__raster,.sil{grid-template-columns:minmax(0,1fr)}
  .stimmen__note{position:static}
  .pw__kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sil__bild{max-width:440px;width:100%;margin-inline:auto;aspect-ratio:4/3}
  .vb{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .vtr__liste{justify-content:flex-start;flex-direction:column;gap:.55rem;padding:1rem 0}
  .pw__a{grid-template-columns:minmax(0,1fr);padding:1.2rem 1.1rem}
  .pw__a .btn{width:100%}
  .abw{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
  .abw__t,.abw__t tbody,.abw__t tr,.abw__t th,.abw__t td{display:block;width:100%}
  .abw__t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .abw__t tr{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);margin-bottom:.8rem;overflow:hidden;box-shadow:var(--sh)}
  .abw__t tbody th{width:auto;background:var(--paper-2);padding:.85rem 1rem}
  .abw__t td{padding:.7rem 1rem;border-bottom:1px solid var(--line)}
  .abw__t td::before{content:attr(data-l);display:block;font-size:.75rem;font-weight:600;color:var(--txt-2);margin-bottom:.2rem}
  .abw__t td.abw__wir::before{color:var(--acc-2)}
  .abw__t tr td:last-child{border-bottom:0}
  .sil__btns .btn,.mitte-btns .btn{width:100%}
}
@media (max-width:520px){
  .pw__kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .lp .btn--lg{padding-inline:1rem;font-size:clamp(.88rem,4.2vw,1rem)}
}

/* =========================================================================
   Messlauf R1: Knöpfe einzeilig, H2 höchstens zwei Zeilen, Popup-Rand
   ========================================================================= */
/* Quiz-Auswahl als Zeilen-Kacheln (Bild links, Text rechts): die Antworten
   passen so in eine Zeile, ohne den Wortlaut zu kürzen */
.lp-form{container:lpform / inline-size}
.lp-form .picks{grid-template-columns:minmax(0,1fr);gap:.5rem}
.lp-form .pick{flex-direction:row;justify-content:flex-start;align-items:center;gap:.7rem;min-height:54px;padding:.4rem 1.9rem .4rem .55rem}
.lp-form .pick__ill{width:52px;max-width:52px;flex:none}
.lp-form .pick__t{text-align:left;hyphens:manual;-webkit-hyphens:manual;white-space:nowrap}
.lp-form .pick.is-gewaehlt::after{top:50%;right:.55rem;margin-top:-8.5px}
@container lpform (min-width:520px){
  .lp-form .picks:has(> .pick:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Problem-Wähler: 3 × 2 statt 6 nebeneinander, am Handy als Zeilen */
.pw__kacheln{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){
  .pw__kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .pw__kacheln{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .pw__k{flex-direction:row;justify-content:flex-start;gap:.8rem;padding:.5rem .9rem .5rem .6rem;text-align:left}
  .pw__ill{width:56px;height:44px;flex:none}
}
/* H2: lange zweite Zeilen in schmalen Spalten */
@media (min-width:1200px){
  #gebiet h2,#anfrage h2{font-size:min(3.3vw,2.5rem)}
  .stimmen__note h2{font-size:min(3.3vw,2.35rem)}
}
@media (max-width:420px){
  .hero--lp .hero__ansage{font-size:min(8.2vw,2.1rem)}
  #anfrage h2{font-size:min(7.6vw,1.75rem)}
}
/* Tippflächen am Handy: Kopf-Knöpfe, Fußlinks, Kontaktlinks */
@media (max-width:760px){
  .m-tel,.m-wa{min-height:44px}
  .m-wa{min-width:44px}
  .ap__p a{display:inline-block;padding-block:.8rem}
}
/* Hinweisfenster am kleinen Handy: Schließknopf bleibt im Bild */
.popup__k{min-width:0}
@media (max-width:380px){
  .ovl{padding:.75rem}
  .popup__inhalt{padding:1.1rem .9rem 1.2rem}
  .popup__btns .btn{padding-inline:.8rem;font-size:.92rem}
}

/* =========================================================================
   Weniger Bewegung
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .pw__k,.stimmen__score{transition:none}
  .pw__k:hover{transform:none}
}