/* ==========================================================================
   teppich.css – nur leistungen/teppich/ (Kopf: css: leistungen, teppich). Ruhiger, heller Kachel-Stil.
   Bausteine stehen in site.css Abschnitt 23; hier nur, was sie nicht abdecken: die statischen Zeichnungen
   (Draufsicht Bahn/Fliese, Flor-Querschnitte, Schnitt des Aufbaus, Treppenkante) und zwei Kachel-Innenleben.
   Keine Animationen. Farben der Zeichnungen stehen als Attribute im SVG (Tinte #1D1A17, Stein- und Sandtöne).
   ========================================================================== */

/* Was Teppich nicht mag: Graphit-Kachel, Titel links, Kennwerte rechts */
.tp-no{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:16px var(--j);align-items:start;min-height:0;}
.tp-no .tile__name{font-size:var(--fs-say);line-height:1.1;letter-spacing:-.02em;}

/* Bahnenware / Teppichfliesen: die Draufsicht füllt die Bildkachel */
.tp-forms .choice__pic{aspect-ratio:16 / 10;}
.tp-plan__svg{position:absolute;inset:0;width:100%;height:100%;}
.tp-plan__label{position:absolute;left:0;top:0;z-index:1;padding:8px 12px;background:var(--bg);font-size:var(--fs-small);font-weight:600;line-height:1.3;}
.tp-plan__label--seam{left:auto;top:auto;right:0;bottom:calc(26.7% + 2px);}   /* über der Naht (y 220 von 300) */

/* Florwahl: Querschnitt steht auf dem unteren Kachelrand. Alle vier im selben Maßstab: gleiche viewBox und feste
   Höhe; der Flor ist ein Muster und darf seitlich angeschnitten werden. */
.tp-flor .choice__pic,.choice.is-live.tp-flor .choice__pic{
  --flor-h:clamp(200px,22vw,320px);overflow:clip;aspect-ratio:auto;min-height:calc(var(--flor-h) + 40px);padding:0;
}
.tp-flor__svg{position:absolute;left:50%;bottom:0;width:auto;max-width:none;height:var(--flor-h);translate:-50% 0;}

/* Kleine Zeilen in Kacheln */
.tp-small{font-size:var(--fs-small);line-height:1.45;}
.tile .tp-small{color:var(--on-paper-soft);}

/* Schnitt des Aufbaus (Kachel neben dem Untergrund-Hinweis) */
.tp-iso{align-items:center;justify-content:center;padding:clamp(20px,2.4vw,36px) var(--pad) 60px;}
.tp-iso__svg{width:100%;max-width:640px;height:auto;}

/* Treppe: Untersatz aus zwei Absätzen; Kantenlösungen als Zeichnung + Text auf Graphit */
.tp-two{display:grid;gap:12px;}
.tp-edges .tile__say{max-width:12ch;}
.tp-edges .tile__end{display:grid;gap:14px;justify-items:start;}
.tp-edge{gap:12px;}
.tp-edge__svg{width:100%;max-width:420px;height:auto;margin:0 auto 12px;}

/* Tablet: Titel über den Kennwerten; Kanten-Brett: Titelkachel über den beiden Zeichnungen */
@media (max-width:1099px){
  .tp-no{grid-template-columns:1fr;}
  .tp-edges > .tile--paper{grid-column:1 / -1;min-height:0;}
  .tp-edges .tile__say{max-width:none;}
}
/* Handy */
@media (max-width:599px){
  .tp-flor .choice__pic,.choice.is-live.tp-flor .choice__pic{--flor-h:150px;min-height:174px;}
  .choice.is-live.tp-flor .switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
  .tp-iso{padding:16px 12px 56px;}
}