/* Leistungsseite Vinyl (leistungen/vinyl/) – ergänzt site.css Abschnitt 23 und leistungen.css. Redesign hell, 25.10.2026.
   Nur, was die Bausteine nicht abdecken:
     .vy-foot    Satz + Link unter den Optik-Tafeln
     .vy-schnitt Schnittzeichnungen als Kachel (Zeichnung mittig, Hinweis „Schema“ unten) · .vy-duo (zwei Schnitte)
     .vy-table   Spaltenbreiten der Vergleichstabelle
     .vq + .opt  „Vier Fragen zu Ihrem Raum“: Fragen als Kacheln, Antworten als Felder (wie der Aufmaß-Rechner),
                 Hinweise in der Papier-Kachel rechts per :has(); ohne :has() steht .vq__fallback           */

.vy-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 32px;}
.vy-foot p{max-width:60ch;}

/* Schnittzeichnungen */
.vy-schnitt{justify-content:space-between;}
.vy-schnitt svg{width:100%;max-width:460px;height:auto;margin:auto;overflow:visible;}
.vy-cap{font-size:var(--fs-small);line-height:1.4;color:var(--soft);}
.vy-duo .vy-schnitt{min-height:0;}

.vy-table thead th{width:41%;}

/* „Vier Fragen zu Ihrem Raum“ */
.vq__head{margin-bottom:16px;}
.vq__fallback{display:none;margin-top:8px;max-width:60ch;color:var(--soft);}
.vq__board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);align-items:stretch;}
.vq__q{grid-column:1 / 9;}
.vq__q--raum{grid-row:1;}
.vq__q--optik{grid-column:1 / 5;grid-row:2;}
.vq__q--heizung{grid-column:5 / 9;grid-row:2;}
.vq__q--boden{grid-row:3;}
.vq__legend{float:left;width:100%;margin-bottom:12px;font-weight:600;line-height:1.3;}  /* float: Legende bleibt in der Kachel */
.vq__out{grid-column:9 / 13;grid-row:1 / span 3;display:flex;flex-direction:column;gap:20px;}
.vq__out-h{margin-bottom:12px;font:600 var(--fs-lead)/1.2 var(--serif);letter-spacing:-.01em;}
.vq__empty{color:var(--on-paper-soft);}
.vq__hints{gap:10px;}
.vq__hints li{display:none;}
.vq__actions{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:auto;}
.vq__reset{min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;}
.vq__small{font-size:var(--fs-small);line-height:1.45;color:var(--on-paper-soft);}

/* Antwortfelder */
.opts{clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
.vq__q--boden .opts{grid-template-columns:repeat(5,minmax(0,1fr));}
.opt{position:relative;display:block;}
.opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;appearance:none;-webkit-appearance:none;cursor:pointer;}
.opt span{display:flex;align-items:center;justify-content:center;height:100%;min-height:56px;padding:10px 12px;background:var(--tile-3);
  font-weight:600;line-height:1.25;text-align:center;transition:background-color var(--t-hover) ease,color var(--t-hover) ease;}
.opt input:checked + span{background:var(--ink);color:#FFFFFF;}
.opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){.opt input:not(:checked):hover + span{background:var(--graphite);}}

.vq:has(.opt input:checked) .vq__empty{display:none;}
.vq:has([name="raum"][value="wohnen"]:checked) [data-q="raum-wohnen"],
.vq:has([name="raum"][value="kueche"]:checked) [data-q="raum-kueche"],
.vq:has([name="raum"][value="bad"]:checked) [data-q="raum-bad"],
.vq:has([name="raum"][value="flur"]:checked) [data-q="raum-flur"],
.vq:has([name="raum"][value="dach"]:checked) [data-q="raum-dach"],
.vq:has([name="raum"][value="gewerbe"]:checked) [data-q="raum-gewerbe"],
.vq:has([name="optik"][value="holz"]:checked) [data-q="optik-holz"],
.vq:has([name="optik"][value="stein"]:checked) [data-q="optik-stein"],
.vq:has([name="optik"][value="offen"]:checked) [data-q="optik-offen"],
.vq:has([name="heizung"][value="ja"]:checked) [data-q="heizung-ja"],
.vq:has([name="heizung"][value="unklar"]:checked) [data-q="heizung-unklar"],
.vq:has([name="boden"][value="estrich"]:checked) [data-q="boden-estrich"],
.vq:has([name="boden"][value="fliesen"]:checked) [data-q="boden-fliesen"],
.vq:has([name="boden"][value="altbelag"]:checked) [data-q="boden-altbelag"],
.vq:has([name="boden"][value="dielen"]:checked) [data-q="boden-dielen"],
.vq:has([name="boden"][value="unklar"]:checked) [data-q="boden-unklar"]{display:block;}
/* Ohne :has(): Hinweisfläche aus, stattdessen der Satz unter der Überschrift */
@supports not selector(:has(a)){
  .vq__live{display:none;}
  .vq__fallback{display:block;}
}

/* Tablet: Fragen untereinander (Optik und Heizung nebeneinander), Hinweise darunter */
@media (max-width:1099px){
  .vy-intro{grid-column:1 / -1;min-height:0;}
  .vq__q,.vq__q--raum,.vq__q--boden,.vq__out{grid-column:1 / -1;grid-row:auto;}
  .vq__q--optik{grid-column:1 / 7;grid-row:auto;}
  .vq__q--heizung{grid-column:7 / 13;grid-row:auto;}
  .vq__out{min-height:240px;}
}
/* Handy: eine Spalte, Antworten zu zweit bzw. zu dritt */
@media (max-width:599px){
  .vy-foot{display:block;}
  .vy-foot .link{display:inline-block;margin-top:12px;}
  .vq__q--optik,.vq__q--heizung{grid-column:1 / -1;}
  .vq__q{padding:16px;}
  .opts,.vq__q--boden .opts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vq__q--optik .opts,.vq__q--heizung .opts{grid-template-columns:repeat(3,minmax(0,1fr));}
  .vq__q--boden .opts > :last-child{grid-column:1 / -1;}
  .opt span{padding:8px 10px;}
  .vq__actions .btn{width:100%;}
}