/* ===== Seite «Neuer Pool»: Ergänzungen zu start.css (Startseite B unverändert) ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Menü: aktive Seite */
.menue-nav .tl.aktiv{border-bottom-color:var(--navy)}
.mobilpanel-nav a[aria-current]{color:var(--terra)}

/* Kopfbild */
.brotkrume{font-size:14px;color:rgba(255,255,255,.82);margin-bottom:16px}
.brotkrume a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.brotkrume a:hover{border-bottom-color:#fff}
.hero-unter{font-size:20px;line-height:1.5;margin-top:24px;color:#fff;max-width:560px}
.hero-unter+.hero-fakt{margin-top:8px;font-size:17px}
.btn-hell{border:1.5px solid rgba(246,241,232,.85);color:var(--creme);background:transparent}
.btn-hell:hover{background:var(--creme);color:var(--navy)}
.hero-aktionen{gap:16px}
.js .hero .brotkrume,.js .hero .hero-unter{opacity:0;transition:opacity 600ms var(--kurve)}
.js .hero.geladen .brotkrume{opacity:1;transition-delay:120ms}
.js .hero.geladen .hero-unter{opacity:1;transition-delay:240ms}

/* Wünsche: 4 Tafeln, Mehrfachwahl */
.wunsch{font:inherit;text-align:left;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.wunsch .tafel-satz{width:300px}
.wunsch-haken{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;
  border:1.5px solid rgba(246,241,232,.8);color:var(--navy);background:rgba(18,46,77,.15);display:flex;align-items:center;justify-content:center;
  transition:background-color var(--t-hover) var(--kurve),border-color var(--t-hover) var(--kurve)}
.wunsch-haken svg{width:20px;height:20px;opacity:0;transition:opacity var(--t-hover) var(--kurve)}
.wunsch[aria-pressed="true"] .wunsch-haken{background:var(--creme);border-color:var(--creme)}
.wunsch[aria-pressed="true"] .wunsch-haken svg{opacity:1}
.wunsch::after{content:"";position:absolute;inset:0;border:2px solid var(--creme);border-radius:4px;opacity:0;pointer-events:none;transition:opacity var(--t-hover) var(--kurve)}
.wunsch[aria-pressed="true"]::after{opacity:1}
.wunsch:focus-visible{outline:2px solid var(--navy);outline-offset:4px}

.ergebnis{margin-top:var(--block);min-height:24px}
.ergebnis-titel{font-family:"Satoshi",sans-serif;font-weight:700;font-size:24px;line-height:1.2;color:var(--navy)}
.ergebnis-karten{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:24px}
.ergebnis-karte a{display:flex;flex-direction:column;gap:4px;height:100%;padding:24px;background:#fff;border:1px solid var(--linie);border-radius:4px;
  text-decoration:none;color:var(--text);transition:border-color var(--t-hover) var(--kurve)}
.ergebnis-karte a:hover{border-color:var(--navy)}
.ergebnis-karte b{font-family:"Satoshi",sans-serif;font-weight:700;font-size:20px;color:var(--navy)}
.ergebnis-karte span{font-size:15px;color:var(--schiefer)}
.ergebnis-auch{margin-top:16px}
.ergebnis-aktionen{display:flex;align-items:center;gap:32px;margin-top:32px;flex-wrap:wrap}
.ergebnis-voll{animation:ergebnisEin 350ms var(--kurve)}
@keyframes ergebnisEin{from{opacity:0}to{opacity:1}}

/* Bauarten: gleiche Tafeln, niedriger */
.sektion-bauarten{padding-top:calc(var(--sektion) / 2)}
.tafeln-niedrig{height:480px;min-height:0}
.tafel-kenn{margin-top:12px;font-size:14px;color:rgba(246,241,232,.85)}
.herstellerfoto{position:absolute;top:16px;right:16px;z-index:2;width:24px;height:24px;border-radius:50%;background:rgba(18,46,77,.55);color:var(--creme);
  font:600 13px/24px "Satoshi",sans-serif;text-align:center;cursor:help}
.vergleich{margin-top:32px}
.vergleich summary{cursor:pointer;list-style:none;display:inline-block}
.vergleich summary::-webkit-details-marker{display:none}
.vergleich summary::after{content:" +";}
.vergleich[open] summary::after{content:" –"}
.vergleich-tabelle{margin-top:24px;overflow-x:auto}
.vergleich table{width:100%;border-collapse:collapse;font-size:15px;min-width:720px}
.vergleich th,.vergleich td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-bottom:1px solid var(--linie)}
.vergleich thead th{font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--schiefer)}
.vergleich tbody th{font-family:"Satoshi",sans-serif;font-weight:700;color:var(--navy)}

/* Optionen */
.sektion-optionen{padding-top:calc(var(--sektion) / 2)}
.coverseal-reihe{margin-top:var(--block)}
.coverseal-reihe .t2{margin-top:16px;margin-bottom:24px}
.kacheln-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:var(--block)}
.option .t3{margin-top:0}
.option .text{font-size:16px}

/* Ablauf: ruhige Schrittliste */
.schritte{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px var(--gap);margin-top:var(--block)}
.schritt-bild{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.schritt-bild picture,.schritt-bild img{width:100%;height:100%;display:block;object-fit:cover}
.schritt-nr{margin-top:16px;font-family:"Satoshi",sans-serif;font-weight:500;font-size:14px;letter-spacing:.08em;color:var(--schiefer);font-variant-numeric:tabular-nums}
.schritt-titel{margin-top:4px;font-family:"Satoshi",sans-serif;font-weight:700;font-size:20px;line-height:1.2;color:var(--navy)}
.schritt-text{margin-top:8px;font-size:15px;line-height:1.5;color:var(--text);text-wrap:pretty}
.ablauf-mehr{margin-top:var(--block)}
#ablauf .kopf-zweispaltig .kopf-intro{max-width:460px}

/* Kundenstimme: dezenter Platzhalter */
.stimme-platz{padding:96px 0}
.stimme-folgt{margin-top:16px;font-family:"Satoshi",sans-serif;font-weight:500;font-size:24px;color:var(--schiefer)}

/* FAQ */
.faq{margin-top:48px;max-width:880px;border-top:1px solid var(--linie)}
.faq-eintrag{border-bottom:1px solid var(--linie)}
.faq-eintrag summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0}
.faq-eintrag summary::-webkit-details-marker{display:none}
.faq-frage{font-family:"Satoshi",sans-serif;font-weight:700;font-size:20px;line-height:1.3;color:var(--navy)}
.faq-zeichen{position:relative;flex:none;width:16px;height:16px}
.faq-zeichen::before,.faq-zeichen::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:var(--navy);transition:transform 300ms var(--kurve)}
.faq-zeichen::after{transform:rotate(90deg)}
.faq-eintrag[open] .faq-zeichen::after{transform:rotate(0)}
.faq-antwort{padding:0 0 24px}
.faq-eintrag[open] .faq-antwort{animation:ergebnisEin 300ms var(--kurve)}
.faq-eintrag summary:hover .faq-frage{color:var(--terra-dunkel)}

/* Ratgeber */
.ratgeber-reihe{grid-template-columns:6fr 6fr}
.ratgeber-reihe .t2{margin-top:16px;margin-bottom:24px}
.ratgeber-form{margin-top:32px;max-width:520px}
.ratgeber-zeile{display:flex;gap:8px}
.ratgeber-zeile input{flex:1;min-width:0;height:48px;padding:0 16px;border:1.5px solid var(--linie);border-radius:6px;background:#fff;font:inherit;font-size:16px;color:var(--text)}
.ratgeber-zeile input:focus-visible{outline:2px solid var(--navy);outline-offset:1px}
.ratgeber-haken{display:flex;gap:12px;align-items:flex-start;margin-top:16px;font-size:15px;line-height:1.5;cursor:pointer}
.ratgeber-haken input{width:18px;height:18px;margin-top:2px;accent-color:var(--navy);flex:none}
.ratgeber-hinweis{margin-top:12px;min-height:21px}

/* Tablet */
@media (max-width:1023px){
  .kacheln-4,.schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ergebnis-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wunsch .tafel-satz{width:240px}
}
/* Handy: ruhig, 2×2 */
@media (max-width:767px){
  .hero-unter{font-size:18px;margin-top:16px}
  .hero-unter+.hero-fakt{font-size:15px}
  .brotkrume{margin-bottom:12px;font-size:13px}
  .hero-aktionen{gap:12px;margin-top:24px}
  .hero-aktionen .btn{padding:0 18px}
  .tafeln-4{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .tafeln-4 .weg-tafel{aspect-ratio:4/5}
  .tafeln-4 .tafel-inhalt{left:14px;right:14px;bottom:14px}
  .tafeln-4 .t3{font-size:18px;white-space:normal}
  .tafeln-4 .tafel-satz{display:none}
  .tafeln-4 .tafel-link{margin-top:8px;font-size:14px}
  .wunsch-haken{top:12px;right:12px;width:30px;height:30px}
  .tafeln-niedrig{height:auto}
  .tafeln-niedrig .weg-tafel{aspect-ratio:4/3}
  .tafeln-niedrig .tafel-satz{display:none}
  .ergebnis-karten{grid-template-columns:1fr;gap:12px}
  .ergebnis-karte a{padding:16px 20px}
  .kacheln-4{grid-template-columns:1fr 1fr;gap:24px 12px}
  .option .t3{font-size:18px}
  .option .text{font-size:15px}
  .option .tl{display:none}
  .kachel.option .bild-rahmen{margin-bottom:16px}
  .schritte{grid-template-columns:1fr 1fr;gap:28px 12px}
  .schritt-titel{font-size:17px}
  .schritt-text{font-size:14px}
  .stimme-platz{padding:64px 0}
  .ratgeber-reihe{grid-template-columns:1fr}
  .ratgeber-zeile{flex-direction:column}
  .faq-frage{font-size:18px}
  .faq-eintrag summary{padding:20px 0}
}
@media (prefers-reduced-motion:reduce){.ergebnis-voll,.faq-eintrag[open] .faq-antwort{animation:none}}

/* ===== Korrekturrunde Juroren (10.10., 22 Uhr) ===== */
.hero-region{font-size:17px;line-height:1.5;margin-top:8px;color:rgba(255,255,255,.9);max-width:560px}
.hero-region+.hero-fakt{margin-top:8px;font-size:17px}
.js .hero .hero-region{opacity:0;transition:opacity 600ms var(--kurve)}
.js .hero.geladen .hero-region{opacity:1;transition-delay:260ms}
.sektion-bauarten{padding-bottom:calc(var(--sektion) / 2)}
#technik{padding-top:calc(var(--sektion) / 2)}
@media (max-width:767px){.hero-region,.hero-region+.hero-fakt{font-size:15px}}
@media (prefers-reduced-motion:reduce){.js .hero .hero-region{opacity:1}}
.ergebnis-voll{animation:none}

/* ===== Gman 11.10., 00:15: Wunsch-Kacheln niedriger, Ergebnis im selben Bildschirm ===== */
.tafeln-4{height:280px;min-height:0;margin-top:32px}
.tafeln-4 .tafel-inhalt{left:24px;right:24px;bottom:24px}
.tafeln-4 .tafel-link{margin-top:10px}
.tafeln-4 .wunsch-haken{top:16px;right:16px;width:32px;height:32px}
.ergebnis{margin-top:32px}
.ergebnis-karten{margin-top:16px}
.ergebnis-karte a{padding:20px 24px}
.ergebnis-auch{margin-top:12px}
.ergebnis-aktionen{margin-top:24px}
@media (max-width:767px){
  .tafeln-4{height:auto;margin-top:24px}
  .tafeln-4 .weg-tafel{aspect-ratio:4/3}
  .tafeln-4 .tafel-inhalt{left:12px;right:12px;bottom:10px}
  .tafeln-4 .t3{font-size:16px}
  .tafeln-4 .tafel-link{margin-top:4px;font-size:13px}
  .tafeln-4 .wunsch-haken{top:8px;right:8px;width:26px;height:26px}
  .tafeln-4 .wunsch-haken svg{width:16px;height:16px}
  .ergebnis{margin-top:24px}
}

/* ===== Gman 11.10.: Abdeckung allgemein (drei Arten), Coverseal leicht hervorgehoben ===== */
.abdeckung-kopf{margin-top:var(--block)}
.abdeckung-kopf .t2{margin-top:16px}
.kacheln-3.abdeckungen{margin-top:32px}
.abdeckung .bild-rahmen{position:relative}
.empfehlung{position:absolute;left:16px;top:16px;z-index:1;background:var(--creme);color:var(--navy);
  font-family:"Satoshi",sans-serif;font-weight:600;font-size:13px;letter-spacing:.02em;padding:6px 12px;border-radius:4px}
.abdeckung .text{font-size:16px}
@media (max-width:767px){
  .kacheln-3.abdeckungen{gap:32px}
  .abdeckung .tl{display:none}
}

.pk-ohne-seite{display:block;cursor:default}.pk-ohne-seite:hover img,.pk-ohne-seite:hover .pk-bild img{transform:none}