:root{--tf-black:#0b0f12;--tf-green:#1f7a4d;--tf-green-dark:#103f28;--tf-soft:#f6f7f4;--tf-border:#dfe5df}body.single-product div.product:has(> .tf-tc-gallery-slot){display:grid!important;grid-template-columns:minmax(407px,calc(62% - 113px)) minmax(380px,1fr)!important;gap:20px!important;align-items:start}body.single-product div.product:has(> .tf-tc-gallery-slot) > .summary{width:auto!important;float:none!important;margin:0!important;min-width:0}body.single-product div.product:has(> .tf-tc-gallery-slot) > .tf-tc-gallery-slot{width:100%!important;float:none!important;margin:0!important;grid-column:1;min-width:0}.tf-tc-gallery-slot{min-width:0}.tf-tc-hero{position:relative;width:100%;max-width:100%;justify-self:stretch;height:clamp(500px,45vw,650px);border-radius:24px;background:radial-gradient(circle at 58% 38%,#fff 0,#f7f9f5 42%,#eaf1e8 100%);border:1px solid var(--tf-border);overflow:hidden;box-shadow:0 20px 48px rgba(19,34,27,.12)}.tf-tc-stage{position:absolute;inset:58px 18px 46px;display:grid;place-items:center;perspective:1250px;overflow:hidden;cursor:grab}.tf-tc-stage:active{cursor:grabbing}.tf-tc-scene{width:100%;height:100%;display:grid;place-items:center;transform-style:preserve-3d}.tf-tc-cube{--w:410px;--h:330px;--d:235px;position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateX(var(--rx,-12deg)) rotateY(var(--ry,28deg)) scale(var(--zoom,.84));transition:width .22s,height .22s}.tf-face{position:absolute;box-sizing:border-box;border:3px solid rgba(7,10,12,.88);background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(190,222,222,.14) 48%,rgba(255,255,255,.33));box-shadow:inset 0 0 42px rgba(255,255,255,.36),inset 0 0 0 1px rgba(255,255,255,.75),0 10px 28px rgba(0,0,0,.06);backdrop-filter:blur(2px)}.tf-front,.tf-back{width:var(--w);height:var(--h);left:0;top:0}.tf-front{transform:translateZ(calc(var(--d)/2));background:linear-gradient(120deg,rgba(255,255,255,.6),rgba(185,222,222,.18) 48%,rgba(255,255,255,.38))}.tf-back{transform:rotateY(180deg) translateZ(calc(var(--d)/2));opacity:.42}.tf-left,.tf-right{width:var(--d);height:var(--h);left:calc((var(--w) - var(--d))/2);top:0}.tf-left{transform:rotateY(-90deg) translateZ(calc(var(--w)/2));opacity:.6}.tf-right{transform:rotateY(90deg) translateZ(calc(var(--w)/2));opacity:.6}.tf-top,.tf-bottom{width:var(--w);height:var(--d);left:0;top:calc((var(--h) - var(--d))/2)}.tf-top{transform:rotateX(90deg) translateZ(calc(var(--h)/2));opacity:.7}.tf-bottom{transform:rotateX(-90deg) translateZ(calc(var(--h)/2));opacity:.75;background:linear-gradient(90deg,rgba(230,237,230,.62),rgba(210,222,212,.36))}.tf-profile{position:absolute;background:linear-gradient(180deg,#050708,#1a2225);z-index:9;box-shadow:0 2px 5px rgba(0,0,0,.2)}.tf-profile.top{left:0;right:0;top:0;height:13px}.tf-profile.bottom{left:0;right:0;bottom:0;height:14px}.tf-profile.left{top:0;bottom:0;left:0;width:13px}.tf-profile.right{top:0;bottom:0;right:0;width:13px}.tf-door{position:absolute;top:31px;bottom:58px;width:49%;border:2px solid rgba(10,14,16,.72);background:linear-gradient(120deg,rgba(255,255,255,.24),rgba(255,255,255,.055));z-index:4}.tf-door.leftdoor{left:18px}.tf-door.rightdoor{right:18px}.tf-door-overlap{position:absolute;top:29px;bottom:56px;left:50%;width:5px;background:#101518;z-index:8;box-shadow:-7px 0 12px rgba(255,255,255,.18),7px 0 12px rgba(0,0,0,.08)}.tf-track{position:absolute;left:16px;right:16px;height:5px;background:#12191b;z-index:10;border-radius:8px}.tf-track.toptrack{top:26px}.tf-track.bottomtrack{bottom:52px}.tf-front-vent{position:absolute;left:22px;right:22px;bottom:24px;height:16px;border:1px solid rgba(0,0,0,.36);background:repeating-linear-gradient(90deg,rgba(16,22,24,.78) 0 2px,rgba(255,255,255,.22) 2px 8px);z-index:6;border-radius:2px}.tf-top-mesh{position:absolute;left:6%;right:6%;top:50%;width:auto;height:7%;transform:translateY(-50%);border:1px solid rgba(0,0,0,.48);background:repeating-linear-gradient(90deg,rgba(12,16,18,.6) 0 2px,rgba(255,255,255,.25) 2px 8px);border-radius:3px}.tf-floor-slope{position:absolute;left:10%;right:10%;top:50%;height:10%;background:linear-gradient(180deg,rgba(170,185,166,.22),rgba(225,231,219,.08));border-top:2px solid rgba(31,38,34,.22);border-bottom:1px solid rgba(255,255,255,.45);transform:skewX(-1deg)}.tf-small-trench{position:absolute;left:9%;bottom:20%;width:6.5%;height:5%;border:1px solid rgba(28,45,49,.28);background:rgba(100,157,166,.12);border-radius:2px}.tf-tc-toolbar{position:absolute;top:14px;right:14px;display:flex;gap:7px;z-index:8;background:rgba(31,122,77,.96);border:1px solid rgba(255,255,255,.28);box-shadow:0 12px 26px rgba(31,122,77,.22);border-radius:999px;padding:6px}.tf-tc-toolbar button{border:0;background:rgba(255,255,255,.92);color:var(--tf-green-dark);border-radius:999px;padding:7px 11px;font-size:13px;line-height:1;font-weight:850;cursor:pointer;min-width:42px;box-shadow:0 2px 6px rgba(0,0,0,.08)}.tf-tc-toolbar button:hover{background:#fff;transform:translateY(-1px)}.tf-tc-toolbar .tf-tool-icon{min-width:32px;padding:7px 9px;font-size:17px}.tf-tc-dim-labels{position:absolute;left:18px;right:18px;bottom:14px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.tf-tc-dim-labels span{background:rgba(255,255,255,.88);border:1px solid #d9e1d8;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800;color:#1d261f}.tf-tc-panel{background:#fff;border:1px solid var(--tf-border);border-radius:24px;padding:20px;box-shadow:0 18px 40px rgba(20,35,26,.08);max-width:460px}.tf-panel-head .tf-eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--tf-green);font-size:12px;font-weight:850}.tf-panel-head h2{font-size:25px;line-height:1.08;margin:6px 0 8px}.tf-panel-head p{margin:0 0 14px;color:#657066;font-size:14px}.tf-control{display:grid;grid-template-columns:1fr 74px;gap:8px;align-items:center;margin:13px 0}.tf-control label{grid-column:1 / -1;display:flex;justify-content:space-between;font-weight:750;font-size:14px}.tf-control input[type=range]{width:100%;accent-color:var(--tf-green);height:24px}.tf-control input[type=number]{border:1px solid #ccd6cc;border-radius:12px;padding:8px 7px;font-weight:800}.tf-price-card{margin-top:17px;background:#f4f8f1;border:1px solid #dfe7dc;border-radius:18px;padding:15px}.tf-price-card span{display:block;color:#647064;font-size:13px}.tf-price-card strong{display:block;font-size:30px;line-height:1.12;color:#111;margin:3px 0;min-height:34px}.tf-price-card small{color:#687368}.tf-add-cart{margin-top:13px;width:100%;border:0;border-radius:16px;background:#12351f;color:#fff;padding:15px 16px;font-size:15px;font-weight:850;cursor:pointer;box-shadow:0 12px 24px rgba(18,53,31,.22)}.tf-cart-note{margin-top:10px;font-weight:750;color:#1f7a4d}.tf-cart-note a{color:#103f28;text-decoration:underline}@media(max-width:900px){body.single-product div.product:has(> .tf-tc-gallery-slot){display:block!important}.tf-tc-hero{height:500px;max-width:100%}.tf-tc-panel{margin-top:18px;max-width:none}.tf-tc-cube{transform:rotateX(var(--rx,-12deg)) rotateY(var(--ry,24deg)) scale(calc(var(--zoom,.84)*.72))}.tf-tc-toolbar{left:14px;right:auto}}@media(max-width:480px){.tf-tc-hero{height:460px}.tf-tc-toolbar{transform:scale(.92);transform-origin:left top}.tf-tc-stage{inset:58px 10px 44px}.tf-tc-dim-labels span{font-size:11px;padding:6px 8px}}

body.single-product .tf-tc-gallery-slot,body.single-product .tf-tc-panel{box-sizing:border-box}body.single-product div.product:has(> .tf-tc-gallery-slot) > .summary .tf-tc-panel{display:block!important;clear:none!important}body.single-product div.product:has(> .tf-tc-gallery-slot) > .summary > .tf-tc-panel{margin-top:0!important}

/* v35 Rückwand-Optionen */
.tf-bg-options{margin:16px 0 6px;border:1px solid #dfe7dc;border-radius:18px;padding:12px;background:#fbfdf9}.tf-bg-title{font-weight:850;margin:0 0 10px;color:#172017;font-size:14px}.tf-bg-card{width:100%;display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;text-align:left;background:#fff;border:1px solid #dce5da;border-radius:14px;padding:9px;margin:8px 0;cursor:pointer;transition:.18s ease;color:#151a15}.tf-bg-card:hover{border-color:#8cbf74;box-shadow:0 8px 18px rgba(31,122,77,.08)}.tf-bg-card.active{border-color:#4f9d37;box-shadow:0 0 0 2px rgba(80,157,55,.16);background:#fbfff8}.tf-bg-card strong{font-size:12.5px;line-height:1.22}.tf-bg-card em{font-style:normal;color:#267237;font-weight:850;font-size:12px;white-space:nowrap}.tf-bg-thumb{width:58px;height:46px;border-radius:9px;border:1px solid #ccd6cc;box-shadow:inset 0 0 18px rgba(0,0,0,.16);overflow:hidden}.tf-bg-thumb.plain{background:linear-gradient(135deg,#5b351d,#2b1a11 70%),radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 30%)}.tf-bg-thumb.liane{background:radial-gradient(circle at 35% 40%,rgba(60,34,19,.8) 0 12%,transparent 13%),radial-gradient(circle at 70% 45%,rgba(27,66,30,.45) 0 9%,transparent 10%),linear-gradient(135deg,#6b3c22,#22140d)}.tf-bg-thumb.wood{background:radial-gradient(circle at 50% 40%,rgba(95,54,29,.95) 0 13%,transparent 14%),radial-gradient(circle at 72% 32%,rgba(35,82,31,.42) 0 10%,transparent 11%),radial-gradient(circle at 24% 62%,rgba(85,46,23,.8) 0 9%,transparent 10%),linear-gradient(135deg,#754226,#1f120b)}
.tf-backwall{position:absolute;left:8%;right:8%;top:9%;bottom:14%;border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,#684123,#26170e 75%);box-shadow:inset 0 10px 30px rgba(255,255,255,.1),inset 0 -18px 32px rgba(0,0,0,.32);z-index:1;overflow:hidden}.tf-backwall:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 18%,rgba(255,229,172,.18) 0 3%,transparent 4%),radial-gradient(circle at 68% 33%,rgba(0,0,0,.34) 0 8%,transparent 9%),radial-gradient(circle at 44% 63%,rgba(255,255,255,.1) 0 3%,transparent 4%),repeating-linear-gradient(18deg,rgba(255,255,255,.035) 0 3px,transparent 3px 13px);opacity:.7}.tf-bg-root,.tf-bg-branch{display:none;position:absolute;z-index:2;background:linear-gradient(90deg,#3b2315,#8a5a32 48%,#2d190d);box-shadow:0 4px 9px rgba(0,0,0,.24);border-radius:999px;transform-origin:left center}.tf-bg-root.r1{left:18%;top:18%;width:58%;height:9px;transform:rotate(54deg)}.tf-bg-root.r2{left:12%;top:58%;width:52%;height:8px;transform:rotate(-30deg)}.tf-bg-root.r3{left:45%;top:16%;width:42%;height:7px;transform:rotate(108deg)}.tf-bg-branch.b1{left:24%;top:38%;width:25%;height:5px;transform:rotate(-6deg)}.tf-bg-branch.b2{left:55%;top:45%;width:27%;height:5px;transform:rotate(32deg)}.tf-bg-branch.b3{left:34%;top:72%;width:22%;height:5px;transform:rotate(-44deg)}.tf-tc-cube[data-bg="liane"] .tf-bg-root.r1,.tf-tc-cube[data-bg="liane"] .tf-bg-root.r2,.tf-tc-cube[data-bg="liane"] .tf-bg-branch.b1{display:block}.tf-tc-cube[data-bg="wood"] .tf-bg-root,.tf-tc-cube[data-bg="wood"] .tf-bg-branch{display:block}.tf-tc-cube[data-bg="liane"] .tf-backwall:after,.tf-tc-cube[data-bg="wood"] .tf-backwall:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 64%,rgba(62,118,45,.28) 0 8%,transparent 9%),radial-gradient(circle at 72% 52%,rgba(58,125,48,.2) 0 7%,transparent 8%);z-index:3;pointer-events:none}.tf-tc-cube[data-bg="wood"] .tf-backwall{background:linear-gradient(145deg,#6c3b20,#20120a 72%)}

/* v39 Optionen: korrigierte Deckelgaze-Perspektive und dynamisch verteilte Beregnungsbohrungen */
.tf-option-section{margin:16px 0 6px;border:1px solid #dfe7dc;border-radius:18px;padding:12px;background:#fbfdf9}.tf-auto-field{display:grid;gap:3px;background:#fff;border:1px solid #dce5da;border-radius:14px;padding:10px;margin:8px 0}.tf-auto-field span{font-size:12px;color:#657066;font-weight:800}.tf-auto-field strong{font-size:14px;color:#172017}.tf-auto-field small{font-size:11px;color:#687368}.tf-check-row,.tf-select-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #dce5da;border-radius:14px;padding:10px;margin:8px 0;font-weight:750;font-size:13px;color:#172017}.tf-check-row{justify-content:flex-start}.tf-check-row input{width:18px;height:18px;accent-color:var(--tf-green)}.tf-select-row select{max-width:150px;border:1px solid #ccd6cc;border-radius:10px;padding:7px 9px;background:#fff;font-weight:800;color:#172017}.tf-top-mesh{transition:top .18s ease,opacity .18s ease,left .18s ease,right .18s ease}.tf-top-mesh-main{border-color:rgba(0,0,0,.58);box-shadow:0 2px 7px rgba(0,0,0,.12)}.tf-top-mesh-second{height:7%;background:repeating-linear-gradient(90deg,rgba(12,16,18,.55) 0 2px,rgba(255,255,255,.32) 2px 8px);border:1px dashed rgba(0,0,0,.58);box-shadow:0 2px 7px rgba(31,122,77,.14)}.tf-top-mesh.pos-front{top:76%}.tf-top-mesh.pos-middle{top:50%}.tf-top-mesh.pos-back{top:24%}.tf-drain-hole{position:absolute;bottom:22%;width:18px;height:18px;border-radius:999px;background:radial-gradient(circle at 42% 38%,rgba(255,255,255,.22) 0 14%,rgba(7,10,12,.92) 15% 70%,rgba(80,100,105,.55) 71% 100%);border:2px solid rgba(7,10,12,.76);box-shadow:0 2px 7px rgba(0,0,0,.24),inset 0 1px 2px rgba(255,255,255,.15);z-index:8;transition:left .18s ease,right .18s ease}.tf-drain-hole.pos-left{left:18%;right:auto;transform:none}.tf-drain-hole.pos-middle{left:50%;right:auto;transform:translateX(-50%)}.tf-drain-hole.pos-right{right:18%;left:auto;transform:none}.tf-drain-hole.pos-none{display:none}.tf-tc-cube[data-uv="yes"] .tf-top{background:linear-gradient(135deg,rgba(255,255,255,.66),rgba(200,235,255,.26) 48%,rgba(255,255,255,.42));box-shadow:inset 0 0 42px rgba(205,235,255,.46),inset 0 0 0 1px rgba(255,255,255,.8),0 10px 28px rgba(0,0,0,.06)}.tf-rain-holes{position:absolute;z-index:12;display:none;align-items:center;justify-content:space-between;pointer-events:none}.tf-rain-hole{display:block;width:12px;height:12px;border-radius:999px;background:radial-gradient(circle at 38% 34%,rgba(255,255,255,.46) 0 15%,rgba(24,90,130,.75) 16% 58%,rgba(7,18,26,.85) 59% 100%);border:1px solid rgba(6,18,24,.62);box-shadow:0 1px 5px rgba(0,0,0,.20)}.tf-rain-back{left:9%;right:9%;top:18%;height:24px;display:flex}.tf-rain-left,.tf-rain-right{left:10%;right:10%;top:18%;height:24px;display:flex}.tf-rain-top{left:8%;right:8%;top:14%;height:24px;display:flex}.tf-rain-holes[data-count="1"]{justify-content:center}.tf-rain-holes[data-count="2"],.tf-rain-holes[data-count="3"],.tf-rain-holes[data-count="4"]{justify-content:space-between}


/* v40: Beregnungsbohrungen immer vorne im Glasdeckel, gleichmäßig über die komplette Länge */
.tf-rain-top{left:6%;right:6%;top:76%;height:24px;display:flex;align-items:center;justify-content:space-between;}
.tf-rain-top[data-count="1"]{justify-content:center;}
.tf-rain-top[data-count="2"],.tf-rain-top[data-count="3"],.tf-rain-top[data-count="4"]{justify-content:space-between;}
.tf-rain-back,.tf-rain-left,.tf-rain-right{display:none!important;}


/* v41: Sicherheitsabstand zwischen vorderer Beregnungsbohrungsreihe und Deckelgaze.
   Die Beregnungsbohrungen bleiben vorne im Glasdeckel; die Gaze-Position "vorne" beginnt dahinter. */
.tf-rain-top{top:82%;}
.tf-top-mesh.pos-front{top:64%;}
.tf-top-mesh.pos-middle{top:45%;}
.tf-top-mesh.pos-back{top:24%;}
.tf-top-mesh{z-index:10;}
.tf-rain-holes{z-index:13;}


/* v43: Ablaufbohrung vorne im Boden, Beregnungsbohrungen vorne im Deckel, Gaze mit Abstand */
.tf-bottom .tf-drain-hole{top:18%;bottom:auto;z-index:14;}
.tf-bottom .tf-drain-hole.pos-left{left:18%;right:auto;transform:none;}
.tf-bottom .tf-drain-hole.pos-middle{left:50%;right:auto;transform:translateX(-50%);}
.tf-bottom .tf-drain-hole.pos-right{right:18%;left:auto;transform:none;}
.tf-rain-top{left:6%;right:6%;top:82%;height:24px;display:flex;align-items:center;justify-content:space-between;}
.tf-rain-top[data-count="1"]{justify-content:center;}
.tf-rain-top[data-count="2"],.tf-rain-top[data-count="3"],.tf-rain-top[data-count="4"]{justify-content:space-between;}
.tf-rain-back,.tf-rain-left,.tf-rain-right{display:none!important;}
.tf-top-mesh.pos-front{top:64%;}
.tf-top-mesh.pos-middle{top:45%;}
.tf-top-mesh.pos-back{top:24%;}
.tf-top-mesh{z-index:10;}
.tf-rain-holes{z-index:13;}


/* v45: Ablaufbohrung eindeutig vorne im Bodenbereich */
.tf-bottom .tf-drain-hole{top:82%!important;bottom:auto!important;z-index:14;}
.tf-bottom .tf-drain-hole.pos-left{left:18%!important;right:auto!important;transform:none!important;}
.tf-bottom .tf-drain-hole.pos-middle{left:50%!important;right:auto!important;transform:translate(-50%,-50%)!important;}
.tf-bottom .tf-drain-hole.pos-right{right:18%!important;left:auto!important;transform:none!important;}

/* v46: Ablaufbohrung wirklich vorne auf der Bodenfläche. */
.tf-bottom .tf-drain-hole{top:18%!important;bottom:auto!important;z-index:14;}
.tf-bottom .tf-drain-hole.pos-left{left:18%!important;right:auto!important;transform:none!important;}
.tf-bottom .tf-drain-hole.pos-middle{left:50%!important;right:auto!important;transform:translateX(-50%)!important;}
.tf-bottom .tf-drain-hole.pos-right{right:18%!important;left:auto!important;transform:none!important;}

/* v50 Rollback: Doppelboden-Elemente vollständig ausblenden; normale Vorschau bleibt erhalten. */
.tf-front-double-bottom,
.tf-front-slope-line,
.tf-side-double-bottom,
.tf-side-slope-line,
.tf-side-water-gap{display:none!important;}

/* v50 Ablaufbohrung: vorne auf der Bodenfläche. In der aktuellen 3D-Bodenfläche entspricht vorne der oberen Bodenkante. */
.tf-bottom .tf-drain-hole{top:18%!important;bottom:auto!important;z-index:20!important;}
.tf-bottom .tf-drain-hole.pos-left{left:18%!important;right:auto!important;transform:none!important;}
.tf-bottom .tf-drain-hole.pos-middle{left:50%!important;right:auto!important;transform:translateX(-50%)!important;}
.tf-bottom .tf-drain-hole.pos-right{right:18%!important;left:auto!important;transform:none!important;}

/* v55: Dendrobaten-Doppelboden / Wassergraben – korrekt am echten Boden.
   Aufbau aus Seitenansicht:
   - Wassergraben liegt direkt auf dem unteren Terrarienboden, nicht schwebend.
   - Hauptboden ist hinten höher und fällt mit ca. 3% nach vorne in den Wassergraben ab.
   - Der vordere Lüftungssteg steht ebenfalls auf dem Boden; Verhältnis Wassergraben ca. 4 cm, Steg ca. 7 cm.
   - Ablaufbohrung liegt vorne im Wassergrabenbereich. */
.tf-side-section{display:block!important;position:absolute!important;inset:0!important;pointer-events:none!important;z-index:32!important;overflow:hidden!important;}
.tf-side-section::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(5,8,9,.88);z-index:45;}
.tf-side-watergraben{display:block!important;position:absolute!important;bottom:0!important;width:22%!important;height:7%!important;box-sizing:border-box!important;background:linear-gradient(180deg,rgba(104,159,174,.30),rgba(67,119,135,.20))!important;border:2px solid rgba(5,9,11,.75)!important;border-bottom:0!important;border-radius:2px 2px 0 0!important;box-shadow:inset 0 2px 5px rgba(255,255,255,.22)!important;z-index:37!important;}
.tf-side-slope{display:block!important;position:absolute!important;height:3px!important;background:rgba(6,10,12,.78)!important;box-shadow:0 -1px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.14)!important;z-index:35!important;}
.tf-side-slope::before{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:linear-gradient(180deg,rgba(200,218,214,.20),rgba(150,180,176,.08));border-bottom:1px solid rgba(20,32,34,.28);clip-path:polygon(0 0,100% 42%,100% 100%,0 58%);}
.tf-side-frontsteg{display:block!important;position:absolute!important;bottom:0!important;width:15%!important;height:12%!important;box-sizing:border-box!important;background:linear-gradient(90deg,rgba(230,242,238,.42),rgba(128,160,154,.16))!important;border:2px solid rgba(5,9,11,.72)!important;border-bottom:0!important;border-radius:2px 2px 0 0!important;box-shadow:inset 0 0 8px rgba(255,255,255,.24)!important;z-index:38!important;}
.tf-side-frontsteg::after{content:"";position:absolute;left:8%;right:8%;bottom:18%;height:30%;background:repeating-linear-gradient(90deg,rgba(12,18,20,.78) 0 2px,rgba(255,255,255,.18) 2px 7px);border:1px solid rgba(0,0,0,.36);border-radius:2px;}
/* Rechte Seitenfläche: vorne ist rechts. Wassergraben und Frontsteg gehören rechts/vorne. */
.tf-right .tf-side-watergraben{right:0!important;left:auto!important;}
.tf-right .tf-side-frontsteg{right:22%!important;left:auto!important;}
.tf-right .tf-side-slope{left:6%!important;right:37%!important;bottom:7%!important;transform:rotate(2.1deg)!important;transform-origin:right bottom!important;}
/* Linke Seitenfläche gespiegelt: vorne ist links. */
.tf-left .tf-side-watergraben{left:0!important;right:auto!important;}
.tf-left .tf-side-frontsteg{left:22%!important;right:auto!important;}
.tf-left .tf-side-slope{left:37%!important;right:6%!important;bottom:7%!important;transform:rotate(-2.1deg)!important;transform-origin:left bottom!important;}
/* Der alte Bodenmarker darf nicht hinten wirken: liegende Boden-Bohrung ausblenden, Drain optisch vorne zeigen. */
.tf-bottom .tf-drain-hole{display:none!important;}
.tf-front-waterline{display:block!important;position:absolute!important;left:22px!important;right:22px!important;bottom:24px!important;height:16px!important;background:linear-gradient(180deg,rgba(108,160,174,.18),rgba(66,116,132,.10))!important;border-top:1px solid rgba(28,45,49,.32)!important;border-bottom:1px solid rgba(10,14,16,.20)!important;z-index:7!important;pointer-events:none!important;}
.tf-front .tf-drain-hole-front{position:absolute!important;top:auto!important;bottom:25px!important;width:18px!important;height:18px!important;z-index:26!important;}
.tf-front .tf-drain-hole-front.pos-left{left:24%!important;right:auto!important;transform:none!important;}
.tf-front .tf-drain-hole-front.pos-middle{left:50%!important;right:auto!important;transform:translateX(-50%)!important;}
.tf-front .tf-drain-hole-front.pos-right{right:24%!important;left:auto!important;transform:none!important;}
.tf-front .tf-drain-hole-front.pos-none{display:none!important;}
.tf-side-drain-hole{display:block!important;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;width:14px!important;height:14px!important;z-index:44!important;}
.tf-side-drain-hole.pos-none{display:none!important;}
/* Draufsicht/3D-Boden: Wassergraben als vorderer Streifen direkt an der Frontkante. */
.tf-bottom .tf-small-trench{display:block!important;left:7%!important;right:7%!important;top:auto!important;bottom:0!important;width:auto!important;height:7%!important;background:rgba(100,157,166,.15)!important;border:1px solid rgba(28,45,49,.26)!important;border-bottom:0!important;border-radius:2px 2px 0 0!important;z-index:12!important;}
.tf-bottom .tf-floor-slope{display:block!important;left:8%!important;right:8%!important;top:auto!important;bottom:7%!important;height:8%!important;background:linear-gradient(180deg,rgba(190,210,206,.18),rgba(130,160,156,.08))!important;border:0!important;border-bottom:2px solid rgba(10,18,18,.36)!important;transform:rotate(-.6deg)!important;transform-origin:center bottom!important;z-index:10!important;}


/* v56: Seitenansicht korrigiert – nicht die ganze Grafik neu bauen,
   sondern den Innenaufbau richtig herum einzeichnen.
   Reihenfolge von hinten nach vorne:
   1) schräger Doppelboden startet hinten höher,
   2) fällt ca. 3% nach vorne ab,
   3) fällt vorne in den Wassergraben ab,
   4) danach steigt es wieder zum niedrigen Lüftungs-/Gaze-Steg,
   5) dahinter/vorne sitzen die Frontscheiben.
   Der Wassergraben liegt direkt auf dem echten Terrarienboden. */
.tf-side-section{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:34!important;
  overflow:hidden!important;
}
.tf-side-section::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:4px;
  background:rgba(5,8,9,.88);
  z-index:60;
}
/* Beide Seitenflächen werden in derselben Leserichtung dargestellt: hinten links, vorne rechts. */
.tf-left .tf-side-watergraben,
.tf-right .tf-side-watergraben{
  display:block!important;
  position:absolute!important;
  left:auto!important;
  right:14%!important;
  bottom:0!important;
  width:18%!important;
  height:6.8%!important; /* ca. 4 cm bei 60 cm Höhe */
  box-sizing:border-box!important;
  background:linear-gradient(180deg,rgba(110,162,178,.34),rgba(70,122,140,.24))!important;
  border:2px solid rgba(5,9,11,.72)!important;
  border-bottom:0!important;
  border-radius:2px 2px 0 0!important;
  box-shadow:inset 0 2px 5px rgba(255,255,255,.25)!important;
  z-index:48!important;
}
.tf-left .tf-side-frontsteg,
.tf-right .tf-side-frontsteg{
  display:block!important;
  position:absolute!important;
  left:auto!important;
  right:0!important;
  bottom:0!important;
  width:14%!important;
  height:11.7%!important; /* ca. 7 cm bei 60 cm Höhe */
  box-sizing:border-box!important;
  background:linear-gradient(90deg,rgba(230,242,238,.44),rgba(128,160,154,.18))!important;
  border:2px solid rgba(5,9,11,.72)!important;
  border-bottom:0!important;
  border-radius:2px 2px 0 0!important;
  box-shadow:inset 0 0 8px rgba(255,255,255,.25)!important;
  z-index:50!important;
}
.tf-side-frontsteg::after{
  content:"";
  position:absolute;
  left:10%;right:10%;bottom:18%;
  height:32%;
  background:repeating-linear-gradient(90deg,rgba(12,18,20,.78) 0 2px,rgba(255,255,255,.18) 2px 7px)!important;
  border:1px solid rgba(0,0,0,.36);
  border-radius:2px;
}
/* Schräger Doppelboden: hinten links höher, vorne rechts niedriger am Wassergraben. */
.tf-left .tf-side-slope,
.tf-right .tf-side-slope{
  display:block!important;
  position:absolute!important;
  left:5%!important;
  right:32%!important;
  bottom:6.8%!important;
  height:15%!important;
  background:linear-gradient(180deg,rgba(205,222,218,.36),rgba(143,172,168,.16))!important;
  border-bottom:3px solid rgba(6,10,12,.76)!important;
  border-left:1px solid rgba(6,10,12,.28)!important;
  border-right:1px solid rgba(6,10,12,.28)!important;
  clip-path:polygon(0 28%,100% 70%,100% 100%,0 58%)!important;
  transform:none!important;
  z-index:42!important;
}
.tf-side-slope::before{display:none!important;content:none!important;}
/* Vertikaler Abfall vom schrägen Doppelboden in den Wassergraben. */
.tf-side-section::after{
  content:"";
  position:absolute;
  right:32%;
  bottom:0;
  width:3px;
  height:11.8%;
  background:rgba(5,9,11,.78);
  box-shadow:1px 0 0 rgba(255,255,255,.18);
  z-index:55;
}
/* Ablaufloch sitzt in der Seitenansicht im vorderen Wassergraben, direkt am Boden. */
.tf-side-drain-hole{
  display:block!important;
  position:absolute!important;
  left:50%!important;
  top:auto!important;
  bottom:18%!important;
  transform:translateX(-50%)!important;
  width:14px!important;
  height:14px!important;
  z-index:58!important;
}
.tf-side-drain-hole.pos-none{display:none!important;}
/* Frontansicht: Wassergraben bleibt unten an der Front; Ablauf links/mitte/rechts liegt im Graben. */
.tf-front-waterline{
  display:block!important;
  position:absolute!important;
  left:18px!important;
  right:18px!important;
  bottom:0!important;
  height:26px!important;
  background:linear-gradient(180deg,rgba(108,160,174,.24),rgba(66,116,132,.14))!important;
  border-top:1px solid rgba(28,45,49,.35)!important;
  border-bottom:0!important;
  z-index:7!important;
  pointer-events:none!important;
}
.tf-front .tf-drain-hole-front{
  position:absolute!important;
  top:auto!important;
  bottom:6px!important;
  width:18px!important;
  height:18px!important;
  z-index:26!important;
}
.tf-front .tf-drain-hole-front.pos-left{left:24%!important;right:auto!important;transform:none!important;}
.tf-front .tf-drain-hole-front.pos-middle{left:50%!important;right:auto!important;transform:translateX(-50%)!important;}
.tf-front .tf-drain-hole-front.pos-right{right:24%!important;left:auto!important;transform:none!important;}
.tf-front .tf-drain-hole-front.pos-none{display:none!important;}
/* 3D-Bodenfläche: alte Bodenbohrung ausblenden, damit sie nicht hinten wirkt. */
.tf-bottom .tf-drain-hole{display:none!important;}
.tf-bottom .tf-small-trench{
  display:block!important;
  left:7%!important;right:7%!important;
  top:auto!important;bottom:0!important;
  width:auto!important;height:6.8%!important;
  background:rgba(100,157,166,.16)!important;
  border:1px solid rgba(28,45,49,.28)!important;
  border-bottom:0!important;
  border-radius:2px 2px 0 0!important;
  z-index:12!important;
}
.tf-bottom .tf-floor-slope{
  display:block!important;
  left:8%!important;right:8%!important;
  top:auto!important;bottom:6.8%!important;
  height:7%!important;
  background:linear-gradient(180deg,rgba(190,210,206,.18),rgba(130,160,156,.08))!important;
  border:0!important;
  border-bottom:2px solid rgba(10,18,18,.38)!important;
  transform:rotate(.6deg)!important;
  transform-origin:center bottom!important;
  z-index:10!important;
}


/* v58: Gefälle um ca. 20% reduziert – hinten niedriger, sanfterer Verlauf. */
.tf-left .tf-side-slope,
.tf-right .tf-side-slope{
  height:12%!important;
  clip-path:polygon(0 34%,100% 68%,100% 100%,0 64%)!important;
}
.tf-bottom .tf-floor-slope{
  height:5.6%!important;
  transform:rotate(.38deg)!important;
}


/* v59: Seitenaufbau als klare Liniengrafik, rechte Seite korrekt gespiegelt.
   Keine Glasschatten/Flächenwirkung für Doppelboden/Wassergraben/Steg. */
.tf-left .tf-side-watergraben,
.tf-right .tf-side-watergraben,
.tf-left .tf-side-frontsteg,
.tf-right .tf-side-frontsteg,
.tf-left .tf-side-slope,
.tf-right .tf-side-slope{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.tf-left .tf-side-watergraben,
.tf-right .tf-side-watergraben{
  bottom:0!important;
  width:18%!important;
  height:6.8%!important;
  border:3px solid rgba(5,9,11,.92)!important;
  border-bottom:0!important;
  border-radius:0!important;
  z-index:58!important;
}
.tf-left .tf-side-frontsteg,
.tf-right .tf-side-frontsteg{
  bottom:0!important;
  width:14%!important;
  height:11.7%!important;
  border:3px solid rgba(5,9,11,.92)!important;
  border-bottom:0!important;
  border-radius:0!important;
  z-index:60!important;
}
.tf-side-frontsteg::after{
  background:repeating-linear-gradient(90deg,rgba(5,9,11,.9) 0 2px,transparent 2px 7px)!important;
  border:2px solid rgba(5,9,11,.84)!important;
  box-shadow:none!important;
}
.tf-left .tf-side-slope,
.tf-right .tf-side-slope{
  height:0!important;
  border:0!important;
  border-top:4px solid rgba(5,9,11,.95)!important;
  clip-path:none!important;
  z-index:56!important;
}
/* Linke Seitenfläche: vorne ist rechts. */
.tf-left .tf-side-frontsteg{left:auto!important;right:0!important;}
.tf-left .tf-side-watergraben{left:auto!important;right:14%!important;}
.tf-left .tf-side-slope{
  left:5%!important;
  right:32%!important;
  bottom:12.4%!important;
  transform:rotate(2.3deg)!important;
  transform-origin:right center!important;
}
.tf-left .tf-side-section::after{
  content:""!important;
  position:absolute!important;
  left:auto!important;
  right:32%!important;
  bottom:0!important;
  width:4px!important;
  height:12.4%!important;
  background:rgba(5,9,11,.95)!important;
  box-shadow:none!important;
  z-index:61!important;
}
/* Rechte Seitenfläche gespiegelt: vorne ist links. */
.tf-right .tf-side-frontsteg{left:0!important;right:auto!important;}
.tf-right .tf-side-watergraben{left:14%!important;right:auto!important;}
.tf-right .tf-side-slope{
  left:32%!important;
  right:5%!important;
  bottom:12.4%!important;
  transform:rotate(-2.3deg)!important;
  transform-origin:left center!important;
}
.tf-right .tf-side-section::after{
  content:""!important;
  position:absolute!important;
  left:32%!important;
  right:auto!important;
  bottom:0!important;
  width:4px!important;
  height:12.4%!important;
  background:rgba(5,9,11,.95)!important;
  box-shadow:none!important;
  z-index:61!important;
}
.tf-side-section::before{
  height:4px!important;
  background:rgba(5,9,11,.95)!important;
  box-shadow:none!important;
}
.tf-side-drain-hole{
  top:auto!important;
  bottom:18%!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  background:#05090b!important;
  border:2px solid #05090b!important;
  box-shadow:none!important;
}
.tf-front-waterline,
.tf-bottom .tf-small-trench,
.tf-bottom .tf-floor-slope{
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}
.tf-front-waterline{border-top:3px solid rgba(5,9,11,.88)!important;}
.tf-bottom .tf-small-trench{border:3px solid rgba(5,9,11,.82)!important;border-bottom:0!important;}
.tf-bottom .tf-floor-slope{border-bottom:4px solid rgba(5,9,11,.82)!important;}


/* ===== v68 FORCE OVERRIDE ===== */

/* BLAUE ELEMENTE ENTFERNEN */
[class*="drain"],
[class*="water"],
.tf-front-waterline,
.tf-drain-hole-front,
.tf-side-drain-hole{
    opacity:0 !important;
    visibility:hidden !important;
    display:none !important;
}

/* FRONTLÜFTUNG NICHT VERTIKAL */
.tf-front-vent{
    display:none !important;
}

/* LIEGENDE GAZE AUF DEM FRONTSTEG */
.tf-side-frontsteg{
    position:absolute !important;
    right:0 !important;
    bottom:0 !important;
    width:14% !important;
    height:11% !important;
    border:3px solid #111 !important;
    border-bottom:0 !important;
    background:transparent !important;
}

.tf-side-frontsteg:after{
    content:'' !important;
    position:absolute !important;
    left:8% !important;
    right:8% !important;
    top:8% !important;
    height:28% !important;
    background:
      repeating-linear-gradient(
        90deg,
        #111 0px,
        #111 2px,
        rgba(120,180,90,.25) 2px,
        rgba(120,180,90,.25) 6px
      ) !important;
    border:2px solid #111 !important;
    display:block !important;
}

/* RECHTE SEITE NICHT SPIEGELN */
.tf-right .tf-side-frontsteg{
    right:0 !important;
    left:auto !important;
}

.tf-right .tf-side-watergraben{
    right:14% !important;
    left:auto !important;
}

.tf-right .tf-side-slope{
    transform:rotate(2deg) !important;
    transform-origin:right center !important;
}

/* DOPPELBODEN NUR ALS LINIEN */
.tf-side-slope{
    background:transparent !important;
    border-top:4px solid #111 !important;
    box-shadow:none !important;
}



/* ===== v83 KÖRPER-KORREKTUR =====
   Logik: Das Terrarium bleibt ein 3D-Körper. Es wird nichts gespiegelt.
   - Frontbelüftung weg.
   - Blaue Markierungen/alte Zusatzbohrungen weg.
   - Ablaufbohrung exakt einmal: auf der Bodenplatte im vorderen Wassergrabenbereich.
   - Rechter markierter Steg: Glaskante + liegende feinmaschige Gaze ohne Farbe.
*/

/* alte/zusätzliche Bohrungsdarstellungen hart ausblenden */
.tf-front .tf-drain-hole-front,
.tf-left .tf-side-drain-hole,
.tf-right .tf-side-drain-hole{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

/* Frontbelüftung entfernen */
.tf-front-vent{display:none!important;visibility:hidden!important;opacity:0!important;}

/* Wassergraben vorne auf der Bodenplatte als schmaler Bereich; keine blaue Färbung */
.tf-bottom .tf-small-trench{
  display:block!important;
  position:absolute!important;
  left:7%!important;
  right:7%!important;
  top:auto!important;
  bottom:0!important;
  width:auto!important;
  height:7%!important;
  background:transparent!important;
  border:2px solid rgba(5,9,11,.78)!important;
  border-bottom:0!important;
  border-radius:2px 2px 0 0!important;
  z-index:18!important;
  box-shadow:none!important;
}

/* einzige aktive Ablaufbohrung: auf dieser vorderen Bodenplatte/Wassergraben-Zone */
.tf-bottom > .tf-drain-hole{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  position:absolute!important;
  top:auto!important;
  bottom:2.1%!important;
  width:18px!important;
  height:18px!important;
  border-radius:999px!important;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 28%, rgba(10,14,16,.92) 30% 62%, rgba(255,255,255,.2) 64% 100%)!important;
  border:2px solid rgba(7,10,12,.9)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.18)!important;
  z-index:60!important;
}
.tf-bottom > .tf-drain-hole.pos-left,
.tf-bottom > .tf-drain-hole.pos-middle,
.tf-bottom > .tf-drain-hole.pos-right{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
.tf-bottom > .tf-drain-hole.pos-left{left:18%!important;right:auto!important;transform:translate(-50%,50%)!important;}
.tf-bottom > .tf-drain-hole.pos-middle{left:50%!important;right:auto!important;transform:translate(-50%,50%)!important;}
.tf-bottom > .tf-drain-hole.pos-right{left:auto!important;right:18%!important;transform:translate(50%,50%)!important;}
.tf-bottom > .tf-drain-hole.pos-none{display:none!important;}

/* Seitenkörper: keine Spiegel-/Aufklappkorrekturen mehr erzwingen */
.tf-right .tf-side-section,
.tf-left .tf-side-section{transform:none!important;}

/* rechter innerer Steg aus der Vorgabe: roter Strich = Glaskante, grün = Gitter ohne Farbe */
.tf-right .tf-side-frontsteg{
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:auto!important;
  bottom:0!important;
  width:17%!important;
  height:33%!important;
  background:transparent!important;
  border:0!important;
  border-left:3px solid rgba(5,9,11,.88)!important; /* Glaskante statt rotem Strich */
  border-top:2px solid rgba(5,9,11,.55)!important;
  border-bottom:2px solid rgba(5,9,11,.55)!important;
  box-shadow:none!important;
  z-index:46!important;
}
.tf-right .tf-side-frontsteg::after{
  content:""!important;
  position:absolute!important;
  left:16%!important;
  right:6%!important;
  top:4%!important;
  bottom:4%!important;
  height:auto!important;
  border:1px solid rgba(5,9,11,.82)!important;
  background:
    repeating-linear-gradient(0deg, rgba(5,9,11,.72) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(5,9,11,.72) 0 1px, transparent 1px 4px)!important;
  border-radius:1px!important;
  display:block!important;
  opacity:.96!important;
}

/* linke Seite bleibt unverändert ohne zusätzliches Gitter */
.tf-left .tf-side-frontsteg::after{display:none!important;}

/* ===== v84 REBUILD: GRUNDGAZE 90° NACH HINTEN GEKLAPPT =====
   Basis: v83. Kein Neuaufbau ohne Inhalt.
   Ziel: Die bisherige/frontale Grundgaze bleibt an derselben X-Position,
   wird aber wie ein Körperteil um 90° nach hinten geklappt und liegt nun
   horizontal auf dem inneren Steg/Bodenbereich. Keine Farbfläche, nur Gitter.
*/

/* alte Front-/Steg-Gaze vollständig entfernen, damit sie nicht doppelt erscheint */
.tf-front-vent,
.tf-left .tf-side-frontsteg::after,
.tf-right .tf-side-frontsteg::after{
  display:none!important;
  content:none!important;
}

/* Seitenkörper nicht spiegeln/aufklappen */
.tf-left .tf-side-section,
.tf-right .tf-side-section{
  transform:none!important;
}

/* rechter Steg bleibt Körperkante/Glaskante, nicht Gitterfläche */
.tf-right .tf-side-frontsteg{
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:auto!important;
  bottom:0!important;
  width:17%!important;
  height:33%!important;
  background:transparent!important;
  border:0!important;
  border-left:3px solid rgba(5,9,11,.88)!important;
  border-top:2px solid rgba(5,9,11,.55)!important;
  border-bottom:2px solid rgba(5,9,11,.55)!important;
  box-shadow:none!important;
  z-index:46!important;
}

/* liegende Grundgaze: gleiche Position wie der rechte Innensteg,
   aber auf der Boden-/Stegfläche nach hinten geklappt */
.tf-right .tf-side-section::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:auto!important;
  bottom:33%!important;
  width:43%!important;
  height:15%!important;
  background:
    repeating-linear-gradient(0deg, rgba(5,9,11,.78) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(5,9,11,.78) 0 1px, transparent 1px 4px)!important;
  border:1px solid rgba(5,9,11,.86)!important;
  transform:skewY(-18deg)!important;
  transform-origin:left bottom!important;
  box-shadow:none!important;
  opacity:.98!important;
  z-index:62!important;
  pointer-events:none!important;
}

/* linke Seite bekommt kein zusätzliches Gitter */
.tf-left .tf-side-section::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:4px!important;
  background:rgba(5,9,11,.95)!important;
  border:0!important;
  transform:none!important;
  z-index:60!important;
}

/* Ablauf weiterhin nur einmal auf der vorderen Bodenplatte/Wassergraben-Zone */
.tf-front .tf-drain-hole-front,
.tf-left .tf-side-drain-hole,
.tf-right .tf-side-drain-hole{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.tf-bottom > .tf-drain-hole{
  top:auto!important;
  bottom:2.1%!important;
  width:18px!important;
  height:18px!important;
  border-radius:999px!important;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 28%, rgba(10,14,16,.92) 30% 62%, rgba(255,255,255,.2) 64% 100%)!important;
  border:2px solid rgba(7,10,12,.9)!important;
  z-index:70!important;
}


/* ===== v85 FINAL OVERRIDE: FRONTBELÜFTUNG AN ORIGINALPOSITION 90° NACH HINTEN GEKLAPPT =====
   Logik: Die ursprüngliche Frontbelüftung bleibt auf der Front-X-Position und auf derselben Höhe.
   Sie wird nicht auf die rechte Scheibe/Seitenfläche gesetzt, sondern als Körperteil nach hinten
   in die Tiefe geklappt. Rechte/linke Seitenscheiben bekommen keine Gaze.
*/
.tf-front{transform-style:preserve-3d!important;}

/* keine Gaze auf rechter oder linker Scheibe / keinem Seitensteg */
.tf-right .tf-side-section::before,
.tf-right .tf-side-frontsteg::after,
.tf-left .tf-side-section::before,
.tf-left .tf-side-frontsteg::after{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
}

/* Seitenkörper und Doppelboden nicht spiegeln oder neu ausrichten */
.tf-left .tf-side-section,
.tf-right .tf-side-section{
  transform:none!important;
}

/* Die Grundgaze ist die ehemalige Frontbelüftung: gleiche Stelle, nur um 90° nach hinten liegend. */
.tf-front-vent{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  bottom:24px!important;
  height:16px!important;
  width:auto!important;
  border:1px solid rgba(5,9,11,.88)!important;
  border-radius:2px!important;
  background:
    repeating-linear-gradient(0deg, rgba(5,9,11,.82) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(5,9,11,.82) 0 1px, transparent 1px 4px)!important;
  box-shadow:none!important;
  z-index:80!important;
  transform-origin:center bottom!important;
  transform:rotateX(90deg)!important;
  pointer-events:none!important;
}

/* Blaue Zusatz-/Seitenbohrungen bleiben entfernt; Ablauf nur auf vorderer Bodenplatte. */
.tf-front .tf-drain-hole-front,
.tf-left .tf-side-drain-hole,
.tf-right .tf-side-drain-hole{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.tf-bottom > .tf-drain-hole{
  top:auto!important;
  bottom:2.1%!important;
  z-index:90!important;
}


/* ===== v87: RECHTE SEITE ALS ECHTER 3D-KÖRPER, NICHT ALS 2D-KOPIE =====
   Wichtig:
   - Links war korrekt.
   - Rechts ist die gegenüberliegende Körperseite.
   - Deshalb darf rechts NICHT einfach die linke 2D-Position kopiert werden.
   - Vorderkante liegt auf der rechten Körperseite lokal links.
   - Alle Körper-Elemente rechts werden wieder vollständig angezeigt.
*/

/* Seitenflächen bleiben echte 3D-Flächen. Keine aufgeklappte/gespiegelte Zusatztransformation. */
.tf-left .tf-side-section,
.tf-right .tf-side-section{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  transform:none!important;
  pointer-events:none!important;
  overflow:hidden!important;
  z-index:32!important;
}

/* Gemeinsame Liniengrafik für beide Seiten */
.tf-left .tf-side-frontsteg,
.tf-right .tf-side-frontsteg,
.tf-left .tf-side-watergraben,
.tf-right .tf-side-watergraben,
.tf-left .tf-side-slope,
.tf-right .tf-side-slope{
  display:block!important;
  position:absolute!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Linke Seite bleibt wie bisher: vorne ist rechts. */
.tf-left .tf-side-frontsteg{
  left:auto!important;
  right:0!important;
  bottom:0!important;
  width:14%!important;
  height:11.7%!important;
  border:3px solid rgba(5,9,11,.92)!important;
  border-bottom:0!important;
  border-radius:0!important;
  z-index:60!important;
}
.tf-left .tf-side-watergraben{
  left:auto!important;
  right:14%!important;
  bottom:0!important;
  width:18%!important;
  height:6.8%!important;
  border:3px solid rgba(5,9,11,.92)!important;
  border-bottom:0!important;
  border-radius:0!important;
  z-index:58!important;
}
.tf-left .tf-side-slope{
  left:5%!important;
  right:32%!important;
  bottom:12.4%!important;
  height:0!important;
  border:0!important;
  border-top:4px solid rgba(5,9,11,.95)!important;
  clip-path:none!important;
  transform:rotate(2.3deg)!important;
  transform-origin:right center!important;
  z-index:56!important;
}
.tf-left .tf-side-section::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:auto!important;
  right:32%!important;
  bottom:0!important;
  width:4px!important;
  height:12.4%!important;
  background:rgba(5,9,11,.95)!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
  z-index:61!important;
}

/* Rechte Seite als gegenüberliegende Körperseite:
   vorne ist lokal links. Das ist keine fehlerhafte Spiegelung, sondern 3D-Körperlogik. */
.tf-right .tf-side-frontsteg{
  left:0!important;
  right:auto!important;
  bottom:0!important;
  width:14%!important;
  height:11.7%!important;
  border:3px solid rgba(5,9,11,.92)!important;
  border-bottom:0!important;
  border-radius:0!important;
  z-index:60!important;
}
.tf-right .tf-side-watergraben{
  left:14%!important;
  right:auto!important;
  bottom:0!important;
  width:18%!important;
  height:6.8%!important;
  border:3px solid rgba(5,9,11,.92)!important;
  border-bottom:0!important;
  border-radius:0!important;
  z-index:58!important;
}
.tf-right .tf-side-slope{
  left:32%!important;
  right:5%!important;
  bottom:12.4%!important;
  height:0!important;
  border:0!important;
  border-top:4px solid rgba(5,9,11,.95)!important;
  clip-path:none!important;
  transform:rotate(-2.3deg)!important;
  transform-origin:left center!important;
  z-index:56!important;
}
.tf-right .tf-side-section::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:32%!important;
  right:auto!important;
  bottom:0!important;
  width:4px!important;
  height:12.4%!important;
  background:rgba(5,9,11,.95)!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
  z-index:61!important;
}

/* Keine Seiten-Gaze: die Grundgaze bleibt ausschließlich die um 90° nach hinten geklappte Frontbelüftung. */
.tf-left .tf-side-frontsteg::after,
.tf-right .tf-side-frontsteg::after,
.tf-left .tf-side-section::before,
.tf-right .tf-side-section::before{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
}

/* Grundgaze: gleiche Originalposition der Frontbelüftung, nur liegend nach hinten geklappt. */
.tf-front{
  transform-style:preserve-3d!important;
}
.tf-front-vent{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  bottom:24px!important;
  height:16px!important;
  width:auto!important;
  border:1px solid rgba(5,9,11,.88)!important;
  border-radius:2px!important;
  background:
    repeating-linear-gradient(0deg, rgba(5,9,11,.82) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(5,9,11,.82) 0 1px, transparent 1px 4px)!important;
  box-shadow:none!important;
  z-index:80!important;
  transform-origin:center bottom!important;
  transform:rotateX(90deg)!important;
  pointer-events:none!important;
}

/* Ablaufbohrung nicht auf den Seiten duplizieren. */
.tf-front .tf-drain-hole-front,
.tf-left .tf-side-drain-hole,
.tf-right .tf-side-drain-hole{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.tf-bottom > .tf-drain-hole{
  top:auto!important;
  bottom:2.1%!important;
  z-index:90!important;
}


/* ===== v88 FINAL-FIX: echte Änderung sichtbar machen + rechter Körper korrekt =====
   Ursache der scheinbar nicht ausgeführten Änderung: Asset-Version stand noch auf 85.0.0.
   Diese ZIP setzt PHP/CSS/JS-Version auf 88.0.0 und erzwingt die rechte Körperseite.
*/

/* Grundgeometrie der 3D-Flächen NICHT zerstören */
.tf-left,
.tf-right{
  width:var(--d)!important;
  height:var(--h)!important;
  left:calc((var(--w) - var(--d))/2)!important;
  top:0!important;
  opacity:.6!important;
}
.tf-left{
  transform:rotateY(-90deg) translateZ(calc(var(--w)/2))!important;
}
.tf-right{
  transform:rotateY(90deg) translateZ(calc(var(--w)/2))!important;
}

/* Innenaufbau auf beiden Seiten sichtbar und vollständig */
.tf-left .tf-side-section,
.tf-right .tf-side-section{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  transform:none!important;
}

/* Gemeinsame Liniengrafik */
.tf-left .tf-side-watergraben,
.tf-right .tf-side-watergraben,
.tf-left .tf-side-frontsteg,
.tf-right .tf-side-frontsteg,
.tf-left .tf-side-slope,
.tf-right .tf-side-slope{
  display:block!important;
  position:absolute!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* LINKE SEITE: bestehende korrekte Logik */
.tf-left .tf-side-frontsteg{
  left:auto!important;
  right:0!important;
  bottom:0!important;
  width:14%!important;
  height:11.7%!important;
  border:3px solid #05090b!important;
  border-bottom:0!important;
  border-radius:0!important;
  z-index:60!important;
}
.tf-left .tf-side-watergraben{
  left:auto!important;
  right:14%!important;
  bottom:0!important;
  width:18%!important;
  height:6.8%!important;
  border:3px solid #05090b!important;
  border-bottom:0!important;
  border-radius:0!important;
  z-index:58!important;
}
.tf-left .tf-side-slope{
  left:5%!important;
  right:32%!important;
  bottom:12.4%!important;
  height:0!important;
  border:0!important;
  border-top:4px solid #05090b!important;
  clip-path:none!important;
  transform:rotate(2.3deg)!important;
  transform-origin:right center!important;
  z-index:56!important;
}
.tf-left .tf-side-section::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:auto!important;
  right:32%!important;
  bottom:0!important;
  width:4px!important;
  height:12.4%!important;
  background:#05090b!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
  z-index:61!important;
}

/* RECHTE SEITE: echte gegenüberliegende 3D-Seite.
   Physisch gleicher Aufbau wie links, aber lokale Vorderkante liegt hier links.
   Das ist die korrekte Körper-Logik beim Drehen, nicht eine flache 2D-Kopie. */
.tf-right .tf-side-frontsteg{
  left:0!important;
  right:auto!important;
  bottom:0!important;
  width:14%!important;
  height:11.7%!important;
  border:3px solid #05090b!important;
  border-bottom:0!important;
  border-radius:0!important;
  z-index:60!important;
}
.tf-right .tf-side-watergraben{
  left:14%!important;
  right:auto!important;
  bottom:0!important;
  width:18%!important;
  height:6.8%!important;
  border:3px solid #05090b!important;
  border-bottom:0!important;
  border-radius:0!important;
  z-index:58!important;
}
.tf-right .tf-side-slope{
  left:32%!important;
  right:5%!important;
  bottom:12.4%!important;
  height:0!important;
  border:0!important;
  border-top:4px solid #05090b!important;
  clip-path:none!important;
  transform:rotate(-2.3deg)!important;
  transform-origin:left center!important;
  z-index:56!important;
}
.tf-right .tf-side-section::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:32%!important;
  right:auto!important;
  bottom:0!important;
  width:4px!important;
  height:12.4%!important;
  background:#05090b!important;
  border:0!important;
  box-shadow:none!important;
  transform:none!important;
  z-index:61!important;
}

/* Keine falschen Gitter an Seitenscheiben */
.tf-left .tf-side-section::before,
.tf-right .tf-side-section::before,
.tf-left .tf-side-frontsteg::after,
.tf-right .tf-side-frontsteg::after{
  display:none!important;
  content:none!important;
  background:none!important;
  border:0!important;
}

/* Grundgaze: bleibt an Frontposition, fällt nur 90° nach hinten */
.tf-front{
  transform-style:preserve-3d!important;
}
.tf-front-vent{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  bottom:24px!important;
  height:16px!important;
  width:auto!important;
  border:1px solid #05090b!important;
  border-radius:2px!important;
  background:
    repeating-linear-gradient(0deg, #05090b 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, #05090b 0 1px, transparent 1px 4px)!important;
  box-shadow:none!important;
  z-index:80!important;
  transform-origin:center bottom!important;
  transform:rotateX(90deg)!important;
  pointer-events:none!important;
}

/* Ablaufbohrung nur einmal auf Bodenplatte im vorderen Wassergrabenbereich */
.tf-front .tf-drain-hole-front,
.tf-left .tf-side-drain-hole,
.tf-right .tf-side-drain-hole{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.tf-bottom > .tf-drain-hole{
  display:block!important;
  top:auto!important;
  bottom:2.1%!important;
  z-index:90!important;
}
.tf-bottom > .tf-drain-hole.pos-none{
  display:none!important;
}


/* ===== v95 FINAL: Zusatzlinien endgültig entfernen + Ablauf vorne fixieren =====
   Befehl:
   - Die zwei später ergänzten Zusatzlinien müssen weg.
   - Ablaufbohrung bleibt dauerhaft vorne auf der Bodenplatte im Wassergrabenbereich.
   - Keine Seiten-/Front-Duplikate der Ablaufbohrung.
*/

/* Die zwei falsch gesetzten Zusatzlinien wurden über ::before erzeugt.
   Diese werden hier hart deaktiviert. */
.tf-left .tf-side-section::before,
.tf-left .tf-side-frontsteg::before,
.tf-left .tf-side-watergraben::before{
  display:none!important;
  content:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Auch rechts keine solchen Zusatzlinien erzeugen. */
.tf-right .tf-side-section::before,
.tf-right .tf-side-frontsteg::before,
.tf-right .tf-side-watergraben::before{
  display:none!important;
  content:none!important;
  width:0!important;
  height:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Ablaufbohrung: nur eine Darstellung, auf der Bodenplatte vorne im Wassergrabenbereich. */
.tf-front .tf-drain-hole-front,
.tf-left .tf-side-drain-hole,
.tf-right .tf-side-drain-hole{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

/* Die echte Ablaufbohrung ist ausschließlich die Bohrung in .tf-bottom.
   In der aktuellen 3D-Perspektive ist vorne die untere Bodenkante. */
.tf-bottom > .tf-drain-hole{
  display:block!important;
  top:auto!important;
  bottom:2.1%!important;
  z-index:120!important;
}
.tf-bottom > .tf-drain-hole.pos-none{
  display:none!important;
}
.tf-bottom > .tf-drain-hole.pos-left{
  left:18%!important;
  right:auto!important;
  transform:none!important;
}
.tf-bottom > .tf-drain-hole.pos-middle{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}
.tf-bottom > .tf-drain-hole.pos-right{
  right:18%!important;
  left:auto!important;
  transform:none!important;
}


/* ===== v96 FINAL: Ablaufbohrung vorne auf der Bodenplatte =====
   Korrektur:
   - Vorne auf der Bodenplatte ist in dieser 3D-Darstellung die obere Bodenkante.
   - Die Ablaufbohrung darf NICHT hinten/unten sitzen.
   - Es bleibt exakt eine sichtbare Ablaufbohrung.
*/

/* alle falschen/duplizierten Ablaufbohrungen ausblenden */
.tf-front .tf-drain-hole-front,
.tf-left .tf-side-drain-hole,
.tf-right .tf-side-drain-hole{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}

/* einzige echte Ablaufbohrung: vorne auf der Bodenfläche */
.tf-bottom > .tf-drain-hole{
  display:block!important;
  top:18%!important;
  bottom:auto!important;
  z-index:130!important;
}

.tf-bottom > .tf-drain-hole.pos-none{
  display:none!important;
}

.tf-bottom > .tf-drain-hole.pos-left{
  left:18%!important;
  right:auto!important;
  transform:none!important;
}

.tf-bottom > .tf-drain-hole.pos-middle{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}

.tf-bottom > .tf-drain-hole.pos-right{
  right:18%!important;
  left:auto!important;
  transform:none!important;
}


/* ===== v97 GESETZ: Vorne/Hinten fest definiert =====
   Diese Regeln gelten ab jetzt dauerhaft:

   VORNE  = Frontscheibe / Türseite / Wassergraben-Seite.
   HINTEN = Rückwand / Rückwandstruktur-Seite.

   Für die 3D-Bodenfläche bedeutet das:
   - Die Ablaufbohrung sitzt vorne auf der Bodenplatte, direkt beim Wassergraben.
   - In dieser CSS-3D-Bodenfläche ist VORNE die obere Bodenkante.
   - Deshalb: top:18%, bottom:auto.
   - Die Ablaufbohrung darf nicht hinten/unten sitzen.
   - Es darf nur EINE Ablaufbohrung sichtbar sein.
*/

/* falsche/duplizierte Ablaufbohrungen immer ausblenden */
.tf-front .tf-drain-hole-front,
.tf-left .tf-side-drain-hole,
.tf-right .tf-side-drain-hole{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* einzige aktive Ablaufbohrung: Bodenplatte vorne beim Wassergraben */
.tf-bottom > .tf-drain-hole{
  display:block!important;
  top:18%!important;
  bottom:auto!important;
  z-index:150!important;
}

/* Auswahlpositionen links/mitte/rechts bleiben horizontal erhalten */
.tf-bottom > .tf-drain-hole.pos-left{
  left:18%!important;
  right:auto!important;
  transform:none!important;
}
.tf-bottom > .tf-drain-hole.pos-middle{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}
.tf-bottom > .tf-drain-hole.pos-right{
  right:18%!important;
  left:auto!important;
  transform:none!important;
}
.tf-bottom > .tf-drain-hole.pos-none{
  display:none!important;
}


/* ===== v98: Terravol-Grafiken und Terravol-Kalkulation aus separatem Calculator ===== */
.tf-bg-title{font-size:14px}
.tf-bg-thumb{
  background-size:cover!important;
  background-position:center!important;
}
.tf-bg-thumb.plain{background-image:url("terravol-plain_thumb.jpg")!important;}
.tf-bg-thumb.liane{background-image:url("terravol-liane_thumb.jpg")!important;}
.tf-bg-thumb.wood{background-image:url("terravol-roots_thumb.jpg")!important;}

.tf-backwall{
  background-size:cover!important;
  background-position:center!important;
}
.tf-tc-cube[data-bg="plain"] .tf-backwall{background-image:url("terravol-plain.jpg")!important;}
.tf-tc-cube[data-bg="liane"] .tf-backwall{background-image:url("terravol-liane.jpg")!important;}
.tf-tc-cube[data-bg="wood"] .tf-backwall{background-image:url("terravol-roots.jpg")!important;}
.tf-tc-cube[data-bg="plain"] .tf-backwall:before,
.tf-tc-cube[data-bg="liane"] .tf-backwall:before,
.tf-tc-cube[data-bg="wood"] .tf-backwall:before{
  opacity:.16!important;
}
.tf-tc-cube[data-bg="liane"] .tf-bg-root,
.tf-tc-cube[data-bg="liane"] .tf-bg-branch,
.tf-tc-cube[data-bg="wood"] .tf-bg-root,
.tf-tc-cube[data-bg="wood"] .tf-bg-branch{
  display:none!important;
}
.tf-bg-card em[data-tf-tv-price]{
  color:#267237;
  font-weight:900;
}


/* ===== v99: Terravol/TerraWall Rückwand vollflächig + Frontscheibe bei Hover transparent =====
   Vorgabe:
   - TerraWall/Terravol-Rückwand füllt die komplette Rückwand von links nach rechts.
   - Rückwand geht bis oben an die Kante.
   - Wenn der Nutzer auf die Grafik zeigt und eine TerraWall/Terravol gewählt ist,
     wird die Frontscheibe durchsichtig, damit die Rückwand sichtbar wird.
*/

/* Rückwandbild vollflächig bis zur Kante */
.tf-backwall{
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background-size:cover!important;
  background-position:center center!important;
  z-index:1!important;
}

/* Kanten/Profile bleiben über der vollflächigen Rückwand sichtbar */
.tf-back .tf-profile{
  z-index:8!important;
}

/* Frontscheibe bleibt normal, solange nicht über die Grafik gehovert wird */
.tf-front,
.tf-front .tf-door,
.tf-front .tf-door-overlap{
  transition:background .18s ease, opacity .18s ease, border-color .18s ease, box-shadow .18s ease!important;
}

/* Hover nur, wenn tatsächlich eine TerraWall/Terravol-Variante aktiv ist.
   Aktive Varianten: plain, liane, wood. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front{
  background:rgba(255,255,255,.06)!important;
  opacity:.34!important;
  box-shadow:none!important;
}

/* Tür-/Frontglasflächen auf Hover fast transparent machen, Linien aber erhalten */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-door-overlap,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-door-overlap,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-door-overlap{
  background:rgba(255,255,255,.03)!important;
  opacity:.28!important;
  box-shadow:none!important;
}

/* Rahmen/Kanten bleiben als Orientierung sichtbar */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-profile,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-profile,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-profile,
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-track,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-track,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-track{
  opacity:.62!important;
}

/* Die liegende Grundgaze und Ablaufbohrung bleiben trotz transparenter Front sichtbar */
.tf-tc-stage:hover .tf-front-vent,
.tf-tc-stage:hover .tf-bottom > .tf-drain-hole{
  opacity:1!important;
}


/* ===== v100: Rückwand nur bis doppelte Bodenplatte + Hover nur Frontscheiben + Option keine Rückwand =====
   Festlegung:
   - Terravol/TerraWall füllt links/rechts und bis oben.
   - Unten endet die Rückwand an der doppelten Bodenplatte, nicht am Glasboden.
   - Beim Hover werden nur die Frontscheiben/Türflächen transparent, nicht die komplette Front von unten bis oben.
   - Bei "Keine Rückwand" ist nur der Glaskörper sichtbar.
*/

/* Keine-Rückwand-Karte */
.tf-bg-thumb.none{
  background:
    linear-gradient(135deg,rgba(255,255,255,.75),rgba(230,238,238,.35)),
    repeating-linear-gradient(45deg,rgba(12,18,20,.18) 0 1px,transparent 1px 8px)!important;
}

/* Terravol-Rückwand endet unten an der doppelten Bodenplatte */
.tf-backwall{
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:12.4%!important;
  width:100%!important;
  height:auto!important;
  background-size:cover!important;
  background-position:center center!important;
}

/* Keine Rückwand: Rückwandfläche vollständig transparent, nur Glaskörper bleibt */
.tf-tc-cube[data-bg="none"] .tf-backwall{
  background:none!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
.tf-tc-cube[data-bg="none"] .tf-backwall:before,
.tf-tc-cube[data-bg="none"] .tf-backwall:after,
.tf-tc-cube[data-bg="none"] .tf-bg-root,
.tf-tc-cube[data-bg="none"] .tf-bg-branch{
  display:none!important;
  content:none!important;
}

/* v99-Front-Hover neutralisieren: nicht mehr die komplette Frontfläche transparent machen */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front,
.tf-tc-stage:hover .tf-tc-cube[data-bg="none"] .tf-front{
  opacity:1!important;
}

/* Nur die tatsächlichen Frontscheiben/Türflächen werden transparent */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-door-overlap,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-door-overlap,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-door-overlap{
  background:rgba(255,255,255,.02)!important;
  opacity:.14!important;
  box-shadow:none!important;
}

/* Bei keiner Rückwand kein besonderer Hover-Effekt nötig */
.tf-tc-stage:hover .tf-tc-cube[data-bg="none"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="none"] .tf-front .tf-door-overlap{
  opacity:1!important;
}


/* ===== v101: Frontscheiben bei Hover komplett öffnen, Terravol in Originalqualität sichtbar =====
   Vorgabe:
   - Nur wenn eine Terravol-Rückwand gewählt ist.
   - Beim Hover über die Grafik soll es wirken, als wäre vorne kein Glas davor.
   - Das Terravol-Bild soll nicht nur heller/schwächer, sondern real/ungefiltert sichtbar sein.
   - Rahmen, Führungsschienen, Gaze und Bohrungen bleiben als Orientierung sichtbar.
*/

/* Bei Terravol-Varianten wird die eigentliche Frontglasfläche vollständig transparent. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front{
  background:transparent!important;
  opacity:1!important;
  box-shadow:none!important;
}

/* Die Frontscheiben/Türflächen selbst verschwinden komplett. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-door-overlap,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-door-overlap,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-door-overlap{
  background:transparent!important;
  opacity:0!important;
  border-color:transparent!important;
  box-shadow:none!important;
}

/* Keine milchigen Overlays auf der Rückwand beim Hover. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-backwall,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-backwall,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-backwall{
  opacity:1!important;
  filter:none!important;
}

/* Rückwandbild selbst ohne zusätzliche Aufhellung/Abdunklung anzeigen. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-backwall:before,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-backwall:before,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-backwall:before,
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-backwall:after,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-backwall:after,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-backwall:after{
  opacity:0!important;
}

/* Orientierung bleibt: Rahmen, Schienen, Grundgaze und Ablaufbohrung bleiben sichtbar. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-profile,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-profile,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-profile,
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-track,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-track,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-track,
.tf-tc-stage:hover .tf-front-vent,
.tf-tc-stage:hover .tf-bottom > .tf-drain-hole{
  opacity:1!important;
  filter:none!important;
}

/* Bei "Keine Rückwand" kein Öffnungs-/Hovereffekt, weil keine Terravol sichtbar sein muss. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="none"] .tf-front{
  background:inherit!important;
  opacity:1!important;
}
.tf-tc-stage:hover .tf-tc-cube[data-bg="none"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="none"] .tf-front .tf-door-overlap{
  opacity:1!important;
  border-color:inherit!important;
}


/* ===== v103: Kein nach-vorne-Projizieren – echter freier Blick bis zur Rückwand =====
   Korrektur:
   - Das Terravol-Bild wird NICHT mehr in die Frontscheibe kopiert.
   - Es bleibt ausschließlich hinten auf der echten Rückwandfläche.
   - Beim Hover wird die Front wie geöffnet: Glas/Türen und milchige Front-Overlays verschwinden.
   - Die echte Rückwandfläche wird beim Hover mit voller Opacity und ohne Filter angezeigt.
*/

/* Sicherstellen: kein Direktbild/Pseudo-Bild auf der Front. */
.tf-tc-cube[data-bg="plain"] .tf-front::before,
.tf-tc-cube[data-bg="liane"] .tf-front::before,
.tf-tc-cube[data-bg="wood"] .tf-front::before,
.tf-tc-cube[data-bg="none"] .tf-front::before{
  display:none!important;
  content:none!important;
  background:none!important;
  background-image:none!important;
}

/* Rückwand bleibt der einzige Ort, an dem das Terravol-Bild liegt. */
.tf-tc-cube[data-bg="plain"] .tf-backwall,
.tf-tc-cube[data-bg="liane"] .tf-backwall,
.tf-tc-cube[data-bg="wood"] .tf-backwall{
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  background-size:cover!important;
  background-position:center center!important;
  image-rendering:auto!important;
}

/* Hover: Front wirklich öffnen, nicht milchig machen. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front{
  background:transparent!important;
  opacity:1!important;
  filter:none!important;
  box-shadow:none!important;
}

/* Nur die Glas-/Türflächen vollständig entfernen. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-door,
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-door-overlap,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-door-overlap,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-door-overlap{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Hover: echte Rückwand hinten maximal klar anzeigen. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-back,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-back,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-back{
  opacity:1!important;
  filter:none!important;
}

.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-backwall,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-backwall,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-backwall{
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Zusätzliche Rückwand-Overlays abschalten, damit kein Milchglas-/Schleier-Eindruck entsteht. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-backwall:before,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-backwall:before,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-backwall:before,
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-backwall:after,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-backwall:after,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-backwall:after{
  opacity:0!important;
  display:none!important;
}

/* Orientierung behalten: Rahmen/Profile/Schienen vorne bleiben sichtbar, aber kein Glas. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-profile,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-profile,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-profile,
.tf-tc-stage:hover .tf-tc-cube[data-bg="plain"] .tf-front .tf-track,
.tf-tc-stage:hover .tf-tc-cube[data-bg="liane"] .tf-front .tf-track,
.tf-tc-stage:hover .tf-tc-cube[data-bg="wood"] .tf-front .tf-track{
  display:block!important;
  visibility:visible!important;
  opacity:.95!important;
  filter:none!important;
  z-index:12!important;
}

/* Keine Rückwand: kein Öffnungseffekt für Terravol, Glaskörper bleibt normal. */
.tf-tc-stage:hover .tf-tc-cube[data-bg="none"] .tf-front,
.tf-tc-stage:hover .tf-tc-cube[data-bg="none"] .tf-back{
  opacity:1!important;
}


/* ===== v105: Deckelgaze dynamisch nach Terrarium-Maß =====
   Vorgabe:
   - Deckelgaze immer 10 cm breit darstellen.
   - Länge dynamisch entsprechend der Terrarium-Länge.
   - Darstellung basiert auf den gewählten Maßen.
*/

/* Grundwerte */
.tf-top-vent{
  position:absolute!important;
  overflow:hidden!important;
}

/* Die eigentliche Gaze */
.tf-top-vent::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(22,28,30,.92) 0 1px,
      transparent 1px 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(22,28,30,.92) 0 1px,
      transparent 1px 5px
    )!important;
  opacity:.95!important;
  pointer-events:none!important;
}

/* Dynamische Maße:
   10 cm Breite = feste prozentuale Tiefe im Deckel.
   Länge = komplette Terrarium-Länge minus Randprofile.
*/
.tf-top .tf-top-vent{
  left:4%!important;
  right:4%!important;
  top:6%!important;
  height:10%!important; /* entspricht der 10 cm Gaze-Breite */
  width:auto!important;
  border:1px solid rgba(15,20,22,.78)!important;
  background:rgba(0,0,0,.05)!important;
  z-index:18!important;
}

/* Bei kleinen Terrarien optisch sauber */
.tf-tc-cube.size-small .tf-top .tf-top-vent{
  top:7%!important;
  height:11%!important;
}

/* Bei großen Terrarien etwas flacher wegen Perspektive */
.tf-tc-cube.size-large .tf-top .tf-top-vent{
  top:5%!important;
  height:9%!important;
}


/* ===== v106: Deckelgaze doppelt so breit + komplett von links nach rechts =====
   Änderung:
   - Die Deckelgaze läuft jetzt durchgehend über die komplette Terrarium-Länge.
   - Die Gaze-Breite wurde gegenüber v105 verdoppelt.
*/

/* komplette Länge */
.tf-top .tf-top-vent{
  left:0!important;
  right:0!important;
  width:100%!important;

  /* doppelt so breit wie vorher */
  height:20%!important;

  top:0!important;

  border-left:0!important;
  border-right:0!important;

  z-index:18!important;
}

/* große Terrarien perspektivisch minimal anpassen */
.tf-tc-cube.size-large .tf-top .tf-top-vent{
  height:18%!important;
}

/* kleine Terrarien etwas kräftiger */
.tf-tc-cube.size-small .tf-top .tf-top-vent{
  height:22%!important;
}


/* ===== v107 FIX: echte Deckelgaze direkt auf der Top-Fläche überschreiben =====
   v106 griff nicht auf den realen Renderer.
   Jetzt wird die sichtbare Deckelgaze hart überschrieben.
*/

/* sichtbare Deckelgaze komplett links -> rechts */
.tf-top-vent,
.tf-top .tf-top-vent,
.tf-top-face .tf-top-vent{
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:none!important;

  /* doppelt so breit */
  height:22%!important;

  top:0!important;
  bottom:auto!important;

  margin:0!important;
  padding:0!important;

  border-left:0!important;
  border-right:0!important;

  z-index:50!important;
}

/* echtes Gitter über gesamte Länge */
.tf-top-vent::before,
.tf-top .tf-top-vent::before,
.tf-top-face .tf-top-vent::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(8,12,14,.95) 0 1px,
      transparent 1px 5px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(8,12,14,.95) 0 1px,
      transparent 1px 5px
    )!important;
  opacity:1!important;
}

/* keine alte schmale Variante mehr */
.tf-top-vent.small,
.tf-top-vent.narrow{
  width:100%!important;
  height:22%!important;
}


/* ===== v108 FINAL: echte Deckelgaze 10 cm breit und von Außenkante zu Außenkante =====
   Der reale Renderer nutzt .tf-top-mesh, nicht .tf-top-vent.
   Aktuell ca. 5 cm = height:7%.
   Ziel 10 cm = ungefähr doppelte Breite = height:14%.
   Länge: komplett von linker Außenkante bis rechter Außenkante = left:0/right:0/width:100%.
*/

.tf-top .tf-top-mesh,
.tf-face.tf-top .tf-top-mesh,
.tf-top-mesh.tf-top-mesh-main,
.tf-top-mesh.tf-top-mesh-second{
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:none!important;
  height:14%!important;
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
  box-sizing:border-box!important;
  z-index:55!important;
  background:
    repeating-linear-gradient(0deg, rgba(8,12,14,.92) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(8,12,14,.92) 0 1px, transparent 1px 5px)!important;
}

/* Positionen bleiben wählbar, aber die Gaze bleibt immer volle Länge */
.tf-top .tf-top-mesh.pos-front{top:76%!important;}
.tf-top .tf-top-mesh.pos-middle{top:50%!important;}
.tf-top .tf-top-mesh.pos-back{top:24%!important;}

/* zweite Gaze ebenfalls echte 10-cm-Breite, falls aktiviert */
.tf-top-mesh-second{
  height:14%!important;
}


/* v116 PDF download button */
.tf-download-pdf{
  margin-top:10px!important;
  background:#ffffff!important;
  color:#172017!important;
  border:1px solid #b9c9b6!important;
}
.tf-download-pdf:hover{
  border-color:#4f9d37!important;
  box-shadow:0 8px 18px rgba(31,122,77,.10)!important;
}


/* v117 PDF-Auftragsbutton */
.tf-download-pdf{
  letter-spacing:.01em!important;
}


/* ===== v122: Terrarium-Typ Auswahl ===== */
.tf-type-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.tf-type-card{
  border:1px solid #dce5da;
  background:#fff;
  border-radius:14px;
  padding:11px 10px;
  text-align:left;
  cursor:pointer;
  transition:.18s ease;
  color:#151a15;
}
.tf-type-card strong{
  display:block;
  font-size:13px;
  line-height:1.2;
}
.tf-type-card em{
  display:block;
  margin-top:3px;
  font-style:normal;
  color:#5b6658;
  font-size:11.5px;
}
.tf-type-card.active{
  border-color:#4f9d37;
  box-shadow:0 0 0 2px rgba(80,157,55,.16);
  background:#fbfff8;
}

/* Standard Terrarium: kein doppelter Boden/Wassergraben in der Grafik */
.tf-tc-cube[data-type="standard"] .tf-floor-slope,
.tf-tc-cube[data-type="standard"] .tf-small-trench,
.tf-tc-cube[data-type="standard"] .tf-front-waterline,
.tf-tc-cube[data-type="standard"] .tf-side-section,
.tf-tc-cube[data-type="standard"] .tf-side-frontsteg,
.tf-tc-cube[data-type="standard"] .tf-side-watergraben,
.tf-tc-cube[data-type="standard"] .tf-side-slope{
  display:none!important;
}

/* Standard Terrarium: Ablauf bleibt als Option auswählbar, aber ohne Doppelboden-Elemente */
.tf-tc-cube[data-type="standard"] .tf-bottom > .tf-drain-hole{
  top:18%!important;
  bottom:auto!important;
}

/* Standard Terrarium: TerraWall/Rückwand optisch bis unten planen */
.tf-tc-cube[data-type="standard"] .tf-backwall{
  bottom:0!important;
  height:100%!important;
}

/* Dendrobaten bleibt Start-/Standardansicht mit doppeltem Boden */
.tf-tc-cube[data-type="dendro"] .tf-backwall{
  bottom:12.4%!important;
}


/* ===== v123: Shop-passende Navigation / Auswahlfarben korrigiert =====
   Problem:
   - Aktive Terrarium-Typ Auswahl wurde zu dunkel/schwarz.
   - Schrift war bei "Dendrobaten Terrarium" teilweise nicht lesbar.
   - Hover/berührte Felder wurden schwarz.
   Lösung:
   - Aktive/hover Zustände in ToxFrogs-Grün + hellem Hintergrund.
   - Text bleibt immer dunkel und lesbar.
   - Keine schwarzen Touch-/Focus-Flächen mehr.
*/

.tf-tc-panel{
  --tf-shop-green:#83aa13;
  --tf-shop-green-dark:#5f8209;
  --tf-shop-green-soft:#f4f9e9;
  --tf-shop-border:#d8e6c4;
  --tf-shop-text:#151915;
}

/* Generelle Button-/Auswahl-Textlesbarkeit */
.tf-tc-panel button,
.tf-tc-panel .tf-type-card,
.tf-tc-panel .tf-bg-card{
  color:var(--tf-shop-text)!important;
  -webkit-tap-highlight-color:rgba(131,170,19,.16)!important;
}

/* Terrarium-Typ Karten */
.tf-type-card{
  background:#fff!important;
  border:1px solid var(--tf-shop-border)!important;
  color:var(--tf-shop-text)!important;
  box-shadow:none!important;
}

.tf-type-card strong,
.tf-type-card em{
  color:var(--tf-shop-text)!important;
}

.tf-type-card em{
  opacity:.72!important;
}

/* Aktiv: hellgrün statt schwarz, Schrift dunkel */
.tf-type-card.active,
.tf-type-card[aria-pressed="true"]{
  background:linear-gradient(180deg,#ffffff 0%,var(--tf-shop-green-soft) 100%)!important;
  border-color:var(--tf-shop-green)!important;
  box-shadow:0 0 0 2px rgba(131,170,19,.22)!important;
  color:var(--tf-shop-text)!important;
}

.tf-type-card.active strong,
.tf-type-card[aria-pressed="true"] strong{
  color:#111511!important;
}

.tf-type-card.active em,
.tf-type-card[aria-pressed="true"] em{
  color:var(--tf-shop-green-dark)!important;
  opacity:1!important;
}

/* Hover/Focus/Touch: nicht schwarz werden */
.tf-type-card:hover,
.tf-type-card:focus,
.tf-type-card:active,
.tf-bg-card:hover,
.tf-bg-card:focus,
.tf-bg-card:active{
  background:var(--tf-shop-green-soft)!important;
  border-color:var(--tf-shop-green)!important;
  color:var(--tf-shop-text)!important;
  outline:none!important;
  box-shadow:0 8px 18px rgba(131,170,19,.14)!important;
}

.tf-type-card:hover strong,
.tf-type-card:focus strong,
.tf-type-card:active strong,
.tf-type-card:hover em,
.tf-type-card:focus em,
.tf-type-card:active em,
.tf-bg-card:hover strong,
.tf-bg-card:focus strong,
.tf-bg-card:active strong,
.tf-bg-card:hover em,
.tf-bg-card:focus em,
.tf-bg-card:active em{
  color:var(--tf-shop-text)!important;
}

/* Rückwand-Karten ebenfalls shop-grün aktiv */
.tf-bg-card.active,
.tf-bg-card[aria-pressed="true"]{
  background:linear-gradient(180deg,#ffffff 0%,var(--tf-shop-green-soft) 100%)!important;
  border-color:var(--tf-shop-green)!important;
  box-shadow:0 0 0 2px rgba(131,170,19,.22)!important;
  color:var(--tf-shop-text)!important;
}

.tf-bg-card.active strong,
.tf-bg-card[aria-pressed="true"] strong{
  color:#111511!important;
}

.tf-bg-card.active em,
.tf-bg-card[aria-pressed="true"] em{
  color:var(--tf-shop-green-dark)!important;
}

/* Slider/Inputs: Focus im Shop-Grün statt schwarz */
.tf-control input[type="number"]:focus,
.tf-control input[type="text"]:focus,
.tf-select-row select:focus{
  border-color:var(--tf-shop-green)!important;
  box-shadow:0 0 0 2px rgba(131,170,19,.18)!important;
  outline:none!important;
}

.tf-control input[type="range"]{
  accent-color:var(--tf-shop-green)!important;
}

/* Add-to-cart und PDF Button sauber lesbar */
.tf-add-cart{
  background:var(--tf-shop-green)!important;
  color:#fff!important;
  border-color:var(--tf-shop-green)!important;
}

.tf-add-cart:hover,
.tf-add-cart:focus,
.tf-add-cart:active{
  background:var(--tf-shop-green-dark)!important;
  color:#fff!important;
  border-color:var(--tf-shop-green-dark)!important;
  box-shadow:0 10px 22px rgba(131,170,19,.22)!important;
}

.tf-download-pdf{
  background:#fff!important;
  color:var(--tf-shop-text)!important;
  border-color:var(--tf-shop-border)!important;
}

.tf-download-pdf:hover,
.tf-download-pdf:focus,
.tf-download-pdf:active{
  background:var(--tf-shop-green-soft)!important;
  color:var(--tf-shop-text)!important;
  border-color:var(--tf-shop-green)!important;
}

/* Mobile Touch: aktive Auswahl bleibt lesbar */
@media (hover:none){
  .tf-type-card:active,
  .tf-bg-card:active{
    background:var(--tf-shop-green-soft)!important;
    color:var(--tf-shop-text)!important;
  }
}


/* ===== v124 Safari/Mobil Control-Fallback ohne Grafik-/Layout-Umbau =====
   Zweck:
   - Fallback ohne :has(), weil Safari/Mobil hier sonst gelegentlich nur Teile des Produktlayouts trifft.
   - Native WooCommerce-Gallery bleibt auf Konfigurator-Produkten versteckt.
   - Panel/Controls bleiben sichtbar und bedienbar.
   - Stage bekommt eigene Touch-Fläche, Panel darf normal vertikal scrollen.
*/
/* Safari/Mobil-Fallback nur außerhalb Chrome-Desktop anwenden.
   Chrome bleibt damit auf dem ursprünglichen schnellen Layoutpfad. */
body.single-product.tf-tc-single-active:not(.tf-tc-is-chrome-desktop) div.product{
  display:grid!important;
  grid-template-columns:minmax(407px,calc(62% - 113px)) minmax(380px,1fr)!important;
  gap:20px!important;
  align-items:start!important;
}

body.single-product.tf-tc-single-active:not(.tf-tc-is-chrome-desktop) div.product > .tf-tc-gallery-slot{
  width:100%!important;
  float:none!important;
  margin:0!important;
  grid-column:1!important;
  min-width:0!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

body.single-product.tf-tc-single-active:not(.tf-tc-is-chrome-desktop) div.product > .summary{
  width:auto!important;
  float:none!important;
  margin:0!important;
  min-width:0!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

body.single-product.tf-tc-single-active:not(.tf-tc-is-chrome-desktop) .tf-tc-panel{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  -webkit-user-select:auto!important;
  user-select:auto!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}

body.single-product.tf-tc-single-active:not(.tf-tc-is-chrome-desktop) .tf-tc-panel input,
body.single-product.tf-tc-single-active:not(.tf-tc-is-chrome-desktop) .tf-tc-panel select,
body.single-product.tf-tc-single-active:not(.tf-tc-is-chrome-desktop) .tf-tc-panel button{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-user-select:auto!important;
  user-select:auto!important;
}

body.single-product.tf-tc-single-active:not(.tf-tc-is-chrome-desktop) .tf-tc-stage{
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}

@media(max-width:900px){
  body.single-product.tf-tc-single-active div.product{
    display:block!important;
  }
  body.single-product.tf-tc-single-active div.product > .summary{
    clear:both!important;
  }
  body.single-product.tf-tc-single-active .tf-tc-panel{
    margin-top:18px!important;
    max-width:none!important;
  }
}

@supports not selector(:has(*)){
  body.single-product.tf-tc-single-active div.product > .woocommerce-product-gallery{
    display:none!important;
  }
}