/* Becken und Technik, neue Gestaltung (Vorschau 9.11.2026). Nur diese Seite (body.bt-neu).
   Texte unveraendert; Kreislauf-Animation unveraendert (Markup/JS live), nur in heller Karte. */
.bt-neu{--bt-bg:#F7F2E8;--bt-navy:#122E4D;--bt-rost:#A3421D;--bt-sand:#E9DFCC;--bt-flaeche:#EFE7D8;--bt-rand:#E4DCCB;--bt-r:24px;--bt-abst:96px;background:var(--bt-bg)}
.bt-neu .ts-seite{color:var(--bt-navy)}
.bt-neu .ts-seite .wrap{max-width:1216px}

/* Ueberschriften */
.bt-neu .ts-titel{font-family:Figtree,sans-serif;font-weight:800;font-size:clamp(2.6rem,5.6vw,4.25rem);line-height:1.02;letter-spacing:-.03em;max-width:19ch;margin:.5rem 0 1.4rem}
.bt-neu .ts-seite h2.t2,.bt-neu .abschluss h2.t1{font-family:Figtree,sans-serif;font-weight:800;font-size:clamp(2rem,3.6vw,2.75rem);line-height:1.08;letter-spacing:-.025em;color:var(--bt-navy);max-width:22ch}
.bt-neu .abschluss h2.t1{color:#fff;max-width:none}
.bt-neu .ts-seite .label{font:600 12px/1.2 Figtree,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.bt-neu .ts-seite h3{font-family:Figtree,sans-serif;font-weight:800;letter-spacing:-.015em}

/* Abstaende */
.bt-neu .ts-seite .sek,.bt-neu .ts-seite .sektion{padding-top:var(--bt-abst);padding-bottom:0}
.bt-neu .ts-seite #haeufige-fragen{padding-top:var(--bt-abst);padding-bottom:var(--bt-abst);margin-top:var(--bt-abst)}
.bt-neu .abschluss{padding:var(--bt-abst) 0}

/* Einstieg: breiter, groesser, kein Bild */
.bt-neu .ts-kopf{padding:150px 0 0;background:transparent}
.bt-neu .ts-lead{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.6;max-width:40rem;color:#2B4460}

/* Technikraum */
.bt-neu .ts-raum-in{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px}
.bt-neu .ts-raum-bild img{border-radius:var(--bt-r);aspect-ratio:4/3;object-fit:cover}
.bt-neu .ts-raum-text p{font-size:1.06rem;line-height:1.65;max-width:30rem}
.bt-neu .ts-raum .fb-reihe-3{gap:16px;margin-top:16px}
.bt-neu .ts-raum .bild-rahmen{border-radius:var(--bt-r);aspect-ratio:3/2;background:var(--bt-flaeche)}
.bt-neu .ts-raum .bild-rahmen img{width:100%;height:100%;object-fit:cover;display:block}
.bt-neu .ts-raum .bild-rahmen::after{content:none}

/* Kreislauf: Animation in heller Karte, Legende darunter, Schritt-Raster */
.bt-neu .kl-intro{max-width:38rem;line-height:1.6}
.bt-neu .kl{margin-top:2rem}
.bt-neu .kl-steuer{border-color:var(--bt-rand)}
.bt-neu .kl-bild{background:#FBF8F2;border:1px solid var(--bt-rand);border-radius:var(--bt-r);padding:1.5rem 1.75rem 1.4rem;box-shadow:none}
.bt-neu .kl-leg{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bt-rand)}
.bt-neu .kl-leg-titel{font:700 12px/1.2 Figtree,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .4rem}
.bt-neu .kl-legende{border-top:0;padding-top:0;margin-top:.5rem;grid-template-columns:1fr 1fr;gap:1.5rem}
.bt-neu .kl-seite{margin-top:1rem}
.bt-neu .kl-liste{gap:12px}
.bt-neu .kl-schritt{background:#fff;border:1px solid var(--bt-rand);border-radius:16px;padding:.85rem 1rem;min-height:68px;font-weight:700}
.bt-neu .kl-schritt:hover{border-color:var(--bt-navy)}
.bt-neu .kl-schritt i{width:30px;min-width:30px;height:30px;border-width:1.5px;font-weight:700}
.bt-neu .kl-schritt[aria-pressed=true]{background:var(--bt-navy);border-color:var(--bt-navy);color:#fff}

/* Bauteil fuer Bauteil */
.bt-neu .ts-intro{max-width:36rem;line-height:1.6}
.bt-neu .ts-liste{gap:24px;margin-top:2rem}
.bt-neu .ts-karte{grid-template-columns:54% 1fr;border:1px solid var(--bt-rand);border-radius:var(--bt-r);background:#fff;min-height:420px}
.bt-neu .ts-karte:nth-child(even){grid-template-columns:1fr 54%}
.bt-neu .ts-foto{background:var(--bt-flaeche)}
.bt-neu .ts-foto img{object-fit:cover}
.bt-neu .ts-foto-frei{align-items:center;justify-content:center;padding:2rem}
.bt-neu .ts-foto-frei picture,.bt-neu .ts-foto-frei>img{flex:none}
.bt-neu .ts-foto-frei>img{width:100%;height:auto;max-width:440px;object-fit:contain}
.bt-neu .ts-text{padding:2.5rem 2.25rem}
.bt-neu .ts-text h3{font-size:clamp(1.5rem,2.2vw,1.85rem);line-height:1.15;margin:.9rem 0 .7rem;color:var(--bt-navy)}
.bt-neu .ts-fkt{line-height:1.65}
.bt-neu .ts-kopfzeile{display:flex;align-items:center;gap:10px;margin:0}
.bt-neu .ts-nr{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 4px;border:1.5px solid var(--bt-navy);border-radius:999px;font-weight:700;font-size:.9rem;background:#fff;color:var(--bt-navy)}
.bt-neu .ts-text .kl-werte{border-top:1px solid var(--bt-rand);padding-top:1rem;margin-top:1.1rem}
.bt-neu .ts-mehr{border-top:1px solid var(--bt-rand);margin-top:1rem}
.bt-neu .ts-mehr>summary{font-weight:700}
/* 5b: Dosieranlage + App nebeneinander */
.bt-neu .ts-foto-duo{gap:14px}
.bt-neu .ts-duo{display:flex;align-items:center;justify-content:center;gap:28px;width:100%}
.bt-neu .ts-duo-geraet{flex:0 0 34%}
.bt-neu .ts-duo-app{flex:0 0 56%}
.bt-neu .ts-duo img{display:block;width:100%;height:auto;object-fit:contain}
.bt-neu .ts-duo-app img{border-radius:14px;box-shadow:0 18px 36px -18px rgba(18,46,77,.55)}
.bt-neu .ts-foto-duo figcaption{position:static;background:none;padding:0;font-size:.85rem;font-weight:600;color:#55606E;text-align:center;margin-left:38%}

/* Haeufige Fragen */
.bt-neu #haeufige-fragen{background:var(--bt-sand)}
.bt-neu #haeufige-fragen .faq{max-width:680px;margin-top:32px;border-top:1px solid rgba(18,46,77,.16)}
.bt-neu #haeufige-fragen .faq-eintrag{border-bottom:1px solid rgba(18,46,77,.16)}
.bt-neu #haeufige-fragen .faq-frage{font-family:Figtree,sans-serif;font-weight:700;font-size:1.12rem}
.bt-neu #haeufige-fragen .faq-zeichen{width:14px;height:14px}
.bt-neu #haeufige-fragen .faq-zeichen::before,.bt-neu #haeufige-fragen .faq-zeichen::after{width:14px;top:6px;height:1.6px}

/* Naechster Schritt */
.bt-neu .abschluss{background:var(--bt-navy)}
.bt-neu .abschluss-aktionen{gap:12px;margin-top:32px}
.bt-neu .abschluss-aktionen>a{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;font:700 15px/1 Figtree,sans-serif;text-decoration:none;white-space:nowrap}
.bt-neu .abschluss-aktionen>a.btn{background:var(--bt-rost);border:1.5px solid var(--bt-rost);color:#fff}
.bt-neu .abschluss-aktionen>a.btn:hover{background:#8A3617;border-color:#8A3617}
.bt-neu .abschluss-aktionen>a.tl{border:1.5px solid rgba(246,241,232,.55);color:#fff;background:transparent}
.bt-neu .abschluss-aktionen>a.tl:hover{background:rgba(246,241,232,.1);border-color:#fff}
.bt-neu .abschluss-aktionen>a.tl .tl-pf,.bt-neu .abschluss-aktionen>a.tl::after{display:none}

.bt-neu .abschluss-bestand{max-width:820px}

/* Tablet */
@media (max-width:1099px){
 .bt-neu{--bt-abst:80px}
 .bt-neu .ts-karte,.bt-neu .ts-karte:nth-child(even){grid-template-columns:1fr 1fr}
 .bt-neu .ts-text{padding:2rem 1.75rem}
}
/* Handy: Karten untereinander, Bild oben */
@media (max-width:899px){
 .bt-neu .ts-karte,.bt-neu .ts-karte:nth-child(even){grid-template-columns:1fr;min-height:0}
 .bt-neu .ts-karte .ts-foto,.bt-neu .ts-karte:nth-child(even) .ts-foto{order:0;aspect-ratio:4/3}
 .bt-neu .ts-karte .ts-foto-duo{aspect-ratio:auto}
 .bt-neu .ts-karte .ts-text{order:1}
 .bt-neu .kl-legende{grid-template-columns:1fr;gap:.8rem}
}
@media (max-width:767px){
 .bt-neu{--bt-abst:64px}
 .bt-neu .ts-kopf{padding-top:112px}
 .bt-neu .ts-titel{font-size:clamp(2.4rem,11vw,3rem)}
 .bt-neu .ts-seite h2.t2,.bt-neu .abschluss h2.t1{font-size:clamp(1.85rem,8vw,2.2rem)}
 .bt-neu .ts-raum-in{grid-template-columns:1fr;gap:24px}
 .bt-neu .ts-raum .fb-reihe-3{grid-template-columns:1fr;gap:12px}
 .bt-neu .kl-bild{padding:1rem .75rem;border-radius:18px}
 .bt-neu .ts-text{padding:1.5rem 1.25rem 1.25rem}
 .bt-neu .ts-foto-frei{padding:1.25rem}
 .bt-neu .ts-duo{gap:14px}
 .bt-neu .ts-foto-duo figcaption{margin-left:0}
 .bt-neu .kl-liste{gap:8px}
 .bt-neu .kl-schritt{padding:.55rem .6rem;min-height:52px;gap:.2rem .5rem;border-radius:14px}
 .bt-neu .kl-schritt i{width:26px;min-width:26px;height:26px}
 .bt-neu .abschluss-aktionen{flex-direction:column;align-items:stretch}
 .bt-neu .abschluss-aktionen>a{width:100%}
}
.bt-neu .ts-raum .bild-rahmen{padding:0!important;height:auto!important}
.bt-neu .ts-raum .bild-rahmen>img,.bt-neu .ts-raum .bild-rahmen>picture,.bt-neu .ts-raum .bild-rahmen>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0}
.bt-neu .ts-raum .bild-rahmen .herstellerfoto{z-index:2}
.bt-neu .ts-raum .bild-rahmen img{scale:1.06}

/* 9.11.2026 v5: 5b Dosieranlage groesser (nur diese Karte) */
.bt-neu #bauteil-6 .ts-foto-duo{padding:1.25rem 1.5rem}
.bt-neu #bauteil-6 .ts-duo{gap:16px}
.bt-neu #bauteil-6 .ts-duo-geraet{flex:0 0 44%}
.bt-neu #bauteil-6 .ts-duo-app{flex:0 0 52%}
.bt-neu #bauteil-6 .ts-foto-duo figcaption{margin-left:48%}
@media (max-width:767px){.bt-neu #bauteil-6 .ts-foto-duo{padding:1rem}.bt-neu #bauteil-6 .ts-duo{gap:10px}.bt-neu #bauteil-6 .ts-foto-duo figcaption{margin-left:0}}