/* ==========================================================================
   treppen.css – nur leistungen/treppen/ (Kopf: css: leistungen, treppen). Ruhiger, heller Kachel-Stil.
   Bausteine stehen in site.css Abschnitt 23; hier nur: statischer Stufen-Schnitt, Bildausschnitte der
   Treppenformen, Verwandte-Seiten-Brett mit vier Einträgen und der Treppen-Steckbrief (Formular).
   Keine Animationen.
   ========================================================================== */

/* Was an jeder Stufe stimmen muss: Schnittzeichnung in der Bildkachel */
.tr-schnitt{display:flex;align-items:center;justify-content:center;padding:var(--pad) var(--pad) 64px;}
.tr-schnitt__svg{width:100%;max-width:540px;height:auto;}

/* Treppenformen: drei Tafeln nebeneinander, Bildausschnitte wie bisher */
.tr-forms .choice__panels{grid-template-columns:repeat(3,minmax(0,1fr));}
.tr-forms .choice__body{min-height:0;}
/* treppe-weiss: Hund oben und Pflanze unten rechts fallen aus dem Bild (Copy-Deck Punkt 8) */
.tr-forms__weiss img{scale:1.7;transform-origin:41% 100%;}
/* treppe-eiche: nur oben links (offene Treppe auf Stahlwange); dasselbe Foto steht ganz im Seitenkopf */
.tr-forms__offen img{object-position:0 0;scale:2;transform-origin:0 0;}

/* Vergleichstabelle: Spaltenköpfe gleich breit */
.tr-table{table-layout:fixed;}
.tr-table tbody th{width:16%;}

/* Verwandte Seiten: vier Einträge – das Foto steht drei Reihen hoch, rechts drei Kacheln */
.tr-related > li:has(.related__pic){grid-row:span 3;}

/* Treppen-Steckbrief --------------------------------------------------------------------------------
   Links Angaben als Kacheln (Form breit, Bauart + Stufen nebeneinander, Belag breit), rechts Ergebnis-Kachel. */
.sb{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--j);align-items:start;}
.sb__in{grid-column:1 / 9;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--j);min-width:0;}
.sb__group{display:flex;flex-direction:column;gap:14px;min-width:0;}
.sb__group--wide{grid-column:1 / -1;}
.sb__legend{display:block;float:left;width:100%;margin-bottom:2px;font:600 var(--fs-lead)/1.2 var(--serif);letter-spacing:-.01em;}
/* Auswahl: gefüllte Felder, gewählt = Sand + Quadrat in Tinte */
.sb__forms{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;}
.sb__chips{display:flex;flex-wrap:wrap;gap:6px;}
.sb__opt{position:relative;display:block;}
.sb__opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;appearance:none;-webkit-appearance:none;cursor:pointer;}
.sb__opt label{display:flex;align-items:center;gap:10px;min-height:52px;height:100%;padding:12px 16px;background:var(--bg);font-weight:500;line-height:1.3;
  transition:background-color var(--t-hover) ease,transform var(--t-press) var(--ease-out);}
.sb__opt label::before{content:"";flex:none;width:10px;height:10px;background:var(--tile-3);}
.sb__opt input:checked + label{background:var(--paper);color:var(--on-paper);font-weight:600;}
.sb__opt input:checked + label::before{background:var(--ink);}
.sb__opt input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px;}
.sb__opt input:active + label{transform:scale(.98);}
@media (hover:hover) and (pointer:fine){.sb__opt input:not(:checked):hover + label{background:var(--tile);}}
/* Form-Felder mit Draufsicht */
.sb__opt--pic label{flex-direction:column;align-items:stretch;gap:12px;padding:14px 12px 16px;font-size:var(--fs-small);}
.sb__opt--pic label::before{position:absolute;top:12px;left:12px;}
.tv{width:100%;max-width:84px;height:auto;margin-inline:auto;}
.tv rect,.tv polygon{fill:var(--graphite);stroke:var(--bg);stroke-width:1.2;}
.tv .tv__core{fill:var(--graphite-3);}
.tv .tv__run{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.sb__opt input:checked + label .tv rect,.sb__opt input:checked + label .tv polygon{fill:#B8834A;stroke:var(--paper);}
/* Stufenzahl: Zähler wie im Aufmaß-Rechner (site.css 15) */
.sb__stepper{max-width:300px;}
.sb__stepper .num__field input{text-align:center;-moz-appearance:textfield;appearance:textfield;}
.sb__stepper .num__field input::-webkit-outer-spin-button,.sb__stepper .num__field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.sb__hint{font-size:var(--fs-small);line-height:1.45;color:var(--soft);max-width:44ch;}
/* Ergebnis-Kachel */
.sb__out{grid-column:9 / 13;position:sticky;top:calc(var(--hdr) + var(--j));min-width:0;}
.sb__card{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.4vw,36px);}
.sb__k{font-size:var(--fs-small);font-weight:600;color:var(--on-paper-soft);}
.sb__res{display:grid;gap:8px;padding-bottom:6px;}
.sb__line{font:600 var(--fs-lead)/1.25 var(--serif);letter-spacing:-.01em;}
.sb__photos{gap:6px;}
.sb__small{font-size:var(--fs-small);line-height:1.45;color:var(--on-paper-soft);}
.sb__actions{display:grid;gap:4px;justify-items:start;margin-top:6px;}
.sb__actions .btn{width:100%;margin-bottom:8px;}
.sb__link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.28em;}
.sb__link svg{width:20px;height:20px;flex:none;}

/* Tablet ------------------------------------------------------------------------------------------- */
@media (max-width:1099px){
  .tr-forms .choice__panels{grid-template-columns:1fr;}
  .tr-forms .choice__panel{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;}
  .tr-forms .choice__pic{aspect-ratio:4 / 3;}
  .tr-table th,.tr-table td{padding:12px 14px;hyphens:auto;overflow-wrap:break-word;}
  .tr-related > li:has(.related__pic){grid-row:auto;}
  .tr-related > li:last-child:nth-child(even){grid-column:1 / -1;}
  .sb__in,.sb__out{grid-column:1 / -1;}
  .sb__out{position:static;}
  .sb__forms{grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* Handy -------------------------------------------------------------------------------------------- */
@media (max-width:599px){
  .tr-schnitt{aspect-ratio:auto !important;padding:16px 12px 56px;}
  .tr-forms .choice__panel{display:flex;flex-direction:column;}
  .tr-table tbody th{width:auto;}
  .tr-table{table-layout:auto;}
  .sb{display:flex;flex-direction:column;}
  .sb__in{display:flex;flex-direction:column;}
  .sb__forms{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sb__forms > :last-child{grid-column:1 / -1;}
  .sb__forms > :last-child label{flex-direction:row;align-items:center;}
  .sb__forms > :last-child .tv{width:64px;margin:0;flex:none;}
  .sb__chips .sb__opt{flex:1 1 auto;}
  .sb__stepper{max-width:none;}
}