/* Textseiten: FAQ, Impressum, Datenschutz, Widerruf, Ueber uns.
   Dunkler Kopf ohne Foto, darunter eine Lesespalte von hoechstens 76
   Zeichen. Kruemelpfad, Knopfzeile und Abschlussband kommen aus basis.css. */

/* ---------- Kopf ---------- */
.text-kopf{background:var(--stage);color:var(--on-dark);
  padding-top:calc(var(--header-h) + var(--s9));padding-bottom:var(--s8)}
.text-kopf h1{max-width:18ch}
.text-kopf p{margin-top:var(--s4);max-width:42ch;color:var(--on-dark-2);
  font-size:var(--text-lead);line-height:var(--text-lead--line-height)}

/* ---------- Lesespalte ---------- */
.lese{padding-block:var(--pad-section)}
/* 46ch sind in Einer Grotesk rund 73 Zeichen je Zeile (Sichtung 08.09.:
   56ch ergaben 89). */
.lese .shell>*{max-width:46ch}
.lese h2{margin-top:var(--s8)}
.lese .shell>h2:first-child{margin-top:0}
.lese h3{font-family:var(--f-body);font-weight:700;font-size:var(--text-lead);
  line-height:var(--text-lead--line-height);margin-top:var(--s6)}
.lese p{margin-top:var(--s4);color:var(--ink-2)}
.lese ul{margin-top:var(--s4);display:grid;gap:var(--s2)}
.lese li{padding-left:1.2em;position:relative;color:var(--ink-2)}
.lese li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.lese a{text-decoration:underline;text-underline-offset:3px}
.lese a:hover{color:var(--accent-strong)}
.lese address{font-style:normal;margin-top:var(--s4);color:var(--ink-2)}
.lese .stand{margin-top:var(--s8);font-size:var(--text-small);color:var(--ink-2)}
/* Registerdaten und Kontakt als Begriff-Wert-Paare, ohne Doppelpunkte */
.lese dl{margin-top:var(--s4);display:grid;grid-template-columns:auto 1fr;
  column-gap:var(--s5);row-gap:var(--s2)}
.lese dt{font-weight:700;white-space:nowrap}
.lese dd{color:var(--ink-2)}
/* Schalter fuer den Widerspruch gegen die Reichweitenmessung */
.lese .messung{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.lese .messung .btn{min-height:44px}
/* Widerrufsformular als abgesetzter Block zum Kopieren */
.lese .formblock{margin-top:var(--s5);padding:var(--s5) var(--s6);background:var(--surface);
  border-radius:var(--radius)}
.lese .formblock p{margin-top:var(--s3)}
.lese .formblock p:first-child{margin-top:0}
@media (max-width:640px){
  .lese dl{grid-template-columns:1fr;row-gap:var(--s1)}
  .lese dd{margin-bottom:var(--s3)}
}

/* ---------- FAQ als Aufklappliste ----------
   Natives details/summary, damit die Antworten ohne Skript aufgehen und
   Suchmaschinen den ganzen Text sehen. Die Trennlinien gehoeren zur
   Liste, nicht zur Zierde. */
.faq-liste{max-width:48ch}
.faq-eintrag{border-top:1px solid var(--line)}
.faq-eintrag:last-child{border-bottom:1px solid var(--line)}
.faq-eintrag summary{list-style:none;cursor:pointer;display:flex;
  justify-content:space-between;align-items:center;gap:var(--s5);
  padding-block:var(--s5);min-height:44px;
  font-family:var(--f-body);font-weight:700;font-size:var(--text-lead);
  line-height:var(--text-lead--line-height);color:var(--ink)}
.faq-eintrag summary::-webkit-details-marker{display:none}
/* Pfeil aus zwei Kanten, dreht sich beim Oeffnen */
.faq-eintrag summary::after{content:"";flex:none;width:12px;height:12px;margin-right:6px;
  border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);
  transform:rotate(45deg) translateY(-3px);
  transition:transform var(--dur-fast) var(--ease-out)}
.faq-eintrag[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq-eintrag summary:hover{color:var(--accent-strong)}
.faq-antwort{padding-bottom:var(--s6);max-width:44ch}
.faq-antwort p{color:var(--ink-2)}
.faq-antwort p + p{margin-top:var(--s4)}
.faq-antwort ul{margin-top:var(--s4);display:grid;gap:var(--s2)}
.faq-antwort li{padding-left:1.2em;position:relative;color:var(--ink-2)}
.faq-antwort li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.faq-antwort .hinweis{margin-top:var(--s5);padding:var(--s4) var(--s5);
  background:var(--surface);border-radius:var(--radius)}

/* ---------- Vorher/Nachher-Schieber (Sanierung) ----------
   Das Element dieser Seite: derselbe Raum, ein Regler zieht das Nachher
   ueber das Vorher. Das Nachher-Bild liegt unten, das Vorher-Bild darueber
   wird mit clip-path auf --pos begrenzt. Der Range liegt unsichtbar ueber
   der ganzen Flaeche und nimmt Maus, Finger und Tastatur entgegen; der
   sichtbare Griff folgt ihm nur. */
.wandel{padding-block:var(--pad-section);background:var(--surface)}
.wandel h2{max-width:20ch}
.vergleich{--pos:50%;position:relative;margin-top:var(--s7);aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;background:var(--ph-maker);
  user-select:none;-webkit-user-select:none;touch-action:none}
.vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vg-vor{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.vg-griff{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;translate:-50% 0;
  background:var(--on-dark);pointer-events:none;z-index:2}
.vg-griff svg{position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:48px;height:48px;padding:12px;border-radius:50%;
  background:var(--surface);color:var(--ink);box-shadow:0 2px 12px var(--scrim)}
.vg-etikett{position:absolute;top:var(--s4);z-index:2;pointer-events:none;
  padding:6px 12px;border-radius:var(--radius-s);
  background:oklch(var(--flor) / .72);color:var(--on-dark);
  font-size:var(--text-meta);font-weight:700;letter-spacing:.04em}
.vg-etikett-vor{left:var(--s4)}
.vg-etikett-nach{right:var(--s4)}
.vg-regler{position:absolute;inset:0;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;z-index:3;appearance:none;background:transparent}
.vg-regler::-webkit-slider-thumb{appearance:none;width:48px;height:100%}
.vg-regler::-moz-range-thumb{width:48px;height:100%;border:0;background:transparent}
.vergleich:has(.vg-regler:focus-visible){outline:3px solid var(--accent-strong);outline-offset:3px}
.vergleich.zieht .vg-griff svg{background:var(--accent);color:var(--ink)}

/* Das dritte Foto (waehrend der Verlegung) mit den Bildtexten daneben */
.wandel-reihe{margin-top:var(--s6);display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.wandel-reihe figure{margin:0}
.wandel-reihe img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);background:var(--ph-maker);display:block}
.wandel-reihe figcaption,.wandel-text p{margin-top:var(--s3);font-size:var(--text-small);
  line-height:var(--text-small--line-height);color:var(--ink-2);max-width:42ch}
.wandel-reihe figcaption b,.wandel-text b{color:var(--ink);font-weight:700;margin-right:var(--s2)}
.wandel-text{padding-top:var(--s2)}
.wandel-text p{margin-top:var(--s4)}
.wandel-text p:first-child{margin-top:0}

/* ---------- Vorteile: Ueberschrift links, Merkmalsliste rechts ---------- */
.vorteile{padding-block:var(--pad-section)}
.vorteile .shell{display:grid;grid-template-columns:1fr 2fr;gap:var(--s9);align-items:start}
.vorteile h2{max-width:16ch}
.vorteile p{margin-top:var(--s4);max-width:34ch;color:var(--ink-2)}
.vorteile .merkmale{margin-top:0}

@media (max-width:1023px){
  .vorteile .shell{grid-template-columns:1fr;gap:var(--s6)}
  .wandel-reihe{grid-template-columns:1fr;gap:var(--s5)}
  .wandel-text{padding-top:0}
}
@media (max-width:760px){
  .vergleich{aspect-ratio:4/3;margin-top:var(--s5)}
  .vg-griff svg{width:44px;height:44px;padding:10px}
}
@media (prefers-reduced-motion:reduce){
  .vergleich.zieht .vg-griff svg{background:var(--surface);color:var(--ink)}
}
@media (max-width:760px){
  .wandel,.vorteile{padding-block:var(--s8)}
}
@media (prefers-reduced-motion:reduce){
  .faq-eintrag summary::after{transition:none}
}
@media (max-width:760px){
  .text-kopf{padding-top:calc(var(--header-h) + var(--s7));padding-bottom:var(--s6)}
  .lese{padding-block:var(--s8)}
  .faq-eintrag summary{padding-block:var(--s4);font-size:var(--text-body)}
}