/* ============================================================
   Cube-Produktseite (Template template-cube.php)
   Abgeleitet aus assets/css/pergola.css (ki-team/out/pergola-20260921/
   shop-paket/theme/assets/css/pergola.css, Stand 21.09.2026) -- Klassen,
   Tokens, Kaufbox, Montage-Kachel und Sticky-Leiste sind bei Pergola und
   Cube identisch (beides TD-PDP-Stil). Nur die Kacheln-Spaltenzahl fuer
   die Eindeckung (3 statt 2 Farben) ist neu (.opt-g2 fuer die Farbe).
   Kopf/Fuss (.tdr-*) kommen ueber get_header()/get_footer() aus dem Theme
   selbst und stehen deshalb NICHT hier drin.

   HINWEIS ZUR ZUSAMMENLEGUNG: pergola.css und cube.css sind bis auf die
   Kachel-Spaltenzahl (.opt-g3 vs. .opt-g2) und den Wegfall der LED-/Wind-/
   Schnee-Badges wortgleich. Beide Dateien liessen sich zu einer gemeinsamen
   "td-pdp-konfigurator.css" zusammenlegen (:root-Tokens, .pdp-*, .opt-*,
   .td-montage-*, .wiz-slider-* sind bereits produktneutral); Pergola- und
   Cube-Template wuerden dann dieselbe Datei einbinden. Nicht in diesem
   Auftrag umgesetzt, um die Pergola-Dateien nicht anzufassen.

   Die Design-Tokens (:root) werden hier zur Sicherheit erneut deklariert,
   siehe pergola.css fuer die Begruendung.
   ============================================================ */
:root{
  --navy-950:#0f1b2f; --navy-800:#0e2f50; --navy-700:#16406b;
  --navy-100:#dbe5ef; --navy-50:#eef3f8;
  --teal-700:#006d84; --teal-600:#008497; --teal-400:#2fb0c0;
  --teal-100:#d4eef2; --teal-50:#ecf7f9;
  --gray-700:#3d4c5c; --gray-500:#66778a; --gray-400:#8e9cab;
  --gray-300:#c2ccd6; --gray-200:#dde4ea; --gray-100:#eef1f4; --gray-50:#f8f8f8;
  --text-heading:var(--navy-950); --text-body:var(--gray-700); --text-muted:var(--gray-500);
  --text-link:var(--teal-700);
  --surface-subtle:var(--gray-50);
  --action-primary:var(--navy-800); --action-primary-hover:var(--navy-700);
  --action-accent:var(--teal-600); --action-accent-hover:var(--teal-700);
  --border-default:var(--gray-200); --border-strong:var(--gray-300);
  --font-sans:'Archivo','Helvetica Neue',Arial,-apple-system,BlinkMacSystemFont,sans-serif;
  --content-max:1280px;
  --radius-m:12px; --radius-l:16px; --radius-xl:24px; --radius-pill:999px; --radius:14px; --radius-sm:10px; --radius-xs:8px;
  --shadow-card:0 1px 2px rgba(15,27,47,.06),0 8px 24px rgba(15,27,47,.07);
  --shadow-button:0 1px 2px rgba(15,27,47,.18);
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:140ms; --dur-base:220ms;
  --tracking-kicker:.12em; --tracking-tight:-.015em;
}
.tdp-wrap{max-width:var(--content-max);margin:0 auto;padding:0 32px}
@media (max-width:700px){.tdp-wrap{padding:0 16px}}

/* ── Hero (Navy-Flaeche, exakt wie auf den Dach-PDPs) ────────────── */
.pdp-hero{position:relative;min-height:200px;background:var(--navy-950);display:flex;align-items:flex-end;overflow:hidden}
.pdp-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(104deg,#0f1b2f 0%,#0f1b2f 40%,#123a5c 74%,#0a5a6c 100%)}
.pdp-hero-inner{position:relative;z-index:1;padding:28px 32px 26px;max-width:var(--content-max);margin:0 auto;width:100%}
.pdp-hero-breadcrumb{font:500 12.5px/1.3 var(--font-sans);margin-bottom:8px}
.pdp-hero-breadcrumb a{color:rgba(255,255,255,.6);text-decoration:none}
.pdp-hero-breadcrumb a:hover{color:#fff}
.pdp-hero-breadcrumb span{color:rgba(255,255,255,.35);padding:0 5px}
.pdp-hero-title{font:800 clamp(24px,3vw,34px)/1.15 var(--font-sans);letter-spacing:var(--tracking-tight);color:#fff;margin:0 0 10px}
.pdp-hero-tags{display:flex;gap:8px;flex-wrap:wrap}
.pdp-hero-tag{padding:7px 13px;border-radius:var(--radius-pill);font:600 12.5px/1.2 var(--font-sans);background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28)}

/* ── Info-Streifen ────────────────────────────────────────────── */
.pdp-strip{background:#fff;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default)}
.pdp-strip .tdp-wrap{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.pdp-strip-item{color:var(--text-body);font:500 13.5px/1.3 var(--font-sans);padding:4px 18px;white-space:nowrap;display:flex;align-items:center;gap:7px}
.pdp-strip-sep{width:1px;height:16px;background:var(--border-default);flex-shrink:0}
@media (max-width:700px){.pdp-strip .tdp-wrap{justify-content:flex-start;overflow-x:auto}.pdp-strip-sep{display:none}}

/* ── Layout ───────────────────────────────────────────────────── */
.pdp{padding-top:32px}
.pdp-top{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.pdp-left{position:sticky;top:16px}
@media (max-width:1000px){.pdp-top{grid-template-columns:1fr;gap:24px}.pdp-left{position:static}}

/* ── Galerie: echtes Bild mit Platzhalter-Fallback bei onerror ───── */
.pdp-img-wrap{border-radius:var(--radius-xl);border:1px solid var(--border-default);background:var(--navy-50);overflow:hidden;position:relative;aspect-ratio:4/3}
.pdp-img-wrap svg{width:100%;height:100%;display:block}
.pdp-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-img-kennzeichnung{position:absolute;left:12px;bottom:12px;background:rgba(15,27,47,.82);color:#fff;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:8px}
.pdp-thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px}
.pdp-thumb{width:100%;aspect-ratio:4/3;border-radius:var(--radius-m);border:2px solid var(--border-default);padding:0;overflow:hidden;background:var(--navy-50);cursor:pointer}
@media (max-width:420px){.pdp-thumbs{gap:6px}}
.pdp-thumb{position:relative}
.pdp-thumb.on{border-color:var(--action-accent)}
.pdp-thumb svg,.pdp-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.pdp-thumb-kennzeichnung{position:absolute;left:3px;right:3px;bottom:3px;background:rgba(15,27,47,.82);color:#fff;font-size:8.5px;font-weight:600;padding:2px 4px;border-radius:5px;line-height:1.2;text-align:center}
.pdp-bilder-hinweis{margin:8px 2px 0;font-size:12px;color:var(--text-muted)}
.pdp-features{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.pdp-feature{display:flex;align-items:center;gap:10px;padding:12px;background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-m)}
.pdp-feature-icon{flex:none;display:flex}
.pdp-feature-text strong{display:block;font:600 13.5px/1.3 var(--font-sans);color:var(--text-heading)}
.pdp-feature-text span{display:block;font-size:11.5px;color:var(--text-muted);margin-top:1px}
@media (max-width:700px){.pdp-features{grid-template-columns:1fr}}

/* ── Kaufbox ──────────────────────────────────────────────────── */
.pdp-right{display:flex;flex-direction:column;gap:16px}
.pdp-buybox{background:#fff;border:1px solid var(--border-default);border-radius:var(--radius-l);padding:26px 26px 24px}
.pdp-buybox-head{margin-bottom:16px}
.pdp-buybox-label{color:var(--action-accent);font:700 12px/1.2 var(--font-sans);letter-spacing:var(--tracking-kicker);text-transform:uppercase;margin:0 0 4px}
.pdp-buybox-title{color:var(--text-heading);font:800 26px/1.2 var(--font-sans);letter-spacing:var(--tracking-tight);margin:0 0 6px}
.pdp-buybox-sub{color:var(--text-muted);font-size:14px;margin:0}

.pdp-gruppe{margin:0 0 16px}
.pdp-gruppe h2{font:700 12.5px/1.2 var(--font-sans);text-transform:uppercase;letter-spacing:.05em;color:var(--text-heading);margin:0 0 8px}
.pdp-gruppe h2 small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted)}
.opt-grid{display:grid;gap:8px}
.opt-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt-tile{border:1.5px solid var(--border-default);background:#fff;border-radius:var(--radius-m);padding:.55rem .4rem;font:600 13.5px/1.2 var(--font-sans);color:var(--text-heading);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.opt-tile:hover{border-color:var(--border-strong)}
.opt-tile[aria-pressed="true"]{border-color:var(--action-accent);background:var(--teal-50);color:var(--teal-700);font-weight:700}
.opt-dot{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.2);flex:none}

.pdp-buybox-price{border-top:1px solid var(--border-default);border-bottom:0;background:none;padding:16px 0 4px;margin:4px 0 0}
.pdp-buybox-price-main{color:var(--text-heading);font:800 34px/1 var(--font-sans)}
.pdp-buybox-price-meta{color:var(--text-muted);font-size:12px;margin-top:8px;line-height:1.5}
.pdp-buybox-specs{border-top:1px solid var(--border-default);margin-top:14px;display:flex;flex-direction:column;margin-bottom:18px}
.pdp-buybox-spec{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid var(--gray-100);font-size:14px}
.pdp-buybox-spec:last-child{border-bottom:none}
.pdp-buybox-spec-label{color:var(--text-muted)}
.pdp-buybox-spec-val{color:var(--text-heading);font-weight:700}
a.pdp-cart-btn{display:block;width:100%;border:none;padding:16px 24px;background:var(--action-accent);color:#fff;border-radius:var(--radius-m);font:600 17px/1.2 var(--font-sans);cursor:pointer;text-align:center;box-shadow:var(--shadow-button);transition:background var(--dur-fast) var(--ease-out);margin-bottom:14px;text-decoration:none}
a.pdp-cart-btn:hover{background:var(--action-accent-hover)}
.pdp-buybox-trust{display:flex;flex-direction:column;gap:6px}
.pdp-buybox-trust span{font-size:13px;color:var(--text-muted);font-weight:600;display:flex;align-items:center;gap:7px}

/* ── Zusatzoptionen / Montage-Bereich ─────────────────────────── */
.pdp-addons-full{margin-top:48px;padding-top:36px;border-top:1px solid var(--border-default)}
.pdp-addons-title{border-top:2px solid var(--navy-950);padding-top:16px;color:var(--text-heading);font:800 clamp(22px,2.4vw,28px)/1.2 var(--font-sans);letter-spacing:var(--tracking-tight);margin:0 0 6px}
.pdp-addons-sub{color:var(--text-muted);font-size:14px;margin:0 0 22px}
.pdp-addons-grid{display:grid;grid-template-columns:1fr;gap:16px}

/* ── Montage-Kachel: identisch zu pergola.css / td-montage-preis.php
     (td_montage_addon_karte) uebernommen ──────────────────────── */
.td-montage-zelle{grid-column:1/-1;display:block}
.td-montage-block{margin-top:14px}
.td-montage-karte{position:relative;display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:0;align-items:stretch;text-align:left;cursor:pointer;background:#fff;overflow:hidden;border:2px solid var(--action-accent);border-radius:var(--radius-l);box-shadow:var(--shadow-card);transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.td-montage-karte:hover{border-color:var(--action-accent-hover)}
.td-montage-karte.selected,.td-montage-karte:has(.td-montage-cb:checked){background:var(--teal-50)}
.td-montage-karte .td-montage-bild{min-height:170px;display:flex;align-items:center;justify-content:center;padding:18px;background:linear-gradient(104deg,#0f1b2f 0%,#0f1b2f 42%,#123a5c 76%,#0a5a6c 100%);color:rgba(255,255,255,.72)}
.td-montage-karte .td-montage-skizze{width:100%;height:auto;max-height:190px;display:block}
.td-montage-karte-text{display:flex;flex-direction:column;padding:0}
.td-montage-karte .pdp-addon-card-header{padding:16px 20px 0;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.td-montage-karte .pdp-addon-card-header>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.td-montage-badge{background:var(--navy-950);color:#fff;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap}
.td-montage-karte h3.td-montage-karte-titel{margin:0 20px 6px;font:800 20px/1.25 var(--font-sans);color:var(--text-heading);letter-spacing:-.01em}
.td-montage-karte p{margin:0 20px 12px;font-size:13.5px;line-height:1.55;color:var(--text-body)}
.td-montage-karte-features{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:0 20px;margin-bottom:14px}
.td-montage-karte-features span{font-size:12.5px;font-weight:600;color:var(--text-heading)}
.td-montage-karte-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding:12px 20px 16px;border-top:1px solid var(--border-default)}
.td-montage-karte-preis{font:800 22px/1 var(--font-sans);color:var(--text-heading)}
.td-montage-schalter{display:flex;align-items:center;gap:10px}
.td-montage-schalter-spur{flex:0 0 auto;width:48px;height:28px;border-radius:999px;background:var(--gray-300);position:relative;transition:background-color var(--dur-fast)}
.td-montage-schalter-knopf{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,27,47,.35);transition:transform var(--dur-fast)}
.td-montage-schalter-text{font-size:13.5px;font-weight:700;color:var(--text-muted)}
.td-montage-schalter-ja{display:none}
.td-montage-karte.selected .td-montage-schalter-spur,.td-montage-karte:has(.td-montage-cb:checked) .td-montage-schalter-spur{background:var(--action-accent)}
.td-montage-karte.selected .td-montage-schalter-knopf,.td-montage-karte:has(.td-montage-cb:checked) .td-montage-schalter-knopf{transform:translateX(20px)}
.td-montage-karte.selected .td-montage-schalter-nein,.td-montage-karte:has(.td-montage-cb:checked) .td-montage-schalter-nein{display:none}
.td-montage-karte.selected .td-montage-schalter-ja,.td-montage-karte:has(.td-montage-cb:checked) .td-montage-schalter-ja{display:inline;color:var(--action-accent)}
.td-montage-cb{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.td-montage-karte:focus-within{outline:2px solid var(--action-accent);outline-offset:2px}
.td-montage-details{margin:10px 2px 0;font-size:12.5px;color:var(--text-muted)}
.td-montage-details>summary{cursor:pointer;font-weight:600;padding:6px 0}
.td-montage-details-body{padding:4px 0 2px;line-height:1.55}
.td-montage-details-body p{margin:0 0 8px}
@media (max-width:700px){.td-montage-karte{grid-template-columns:1fr}}

/* ── Sticky-Leiste (mobile, id="tdp-sticky-cta"). Umbenannt am 22.09.2026
   (wie Pergola, Prelive-Fund 21.09.2026): mu-plugins/td-sticky-cta.php
   druckt seitenUNABHAENGIG per wp_footer() IMMER eine eigene Leiste mit
   der ID "td-sticky-cta" (Default-Modus "Jetzt konfigurieren", weil die
   Cube-Seite kein is_product() ist). Zwei Elemente mit identischer ID
   ueberlagerten sich sonst. Fix ausschliesslich in dieser Datei + im
   Template (Div-ID) + der Regel weiter unten, die NUR auf dieser Seite
   die Theme-Leiste ausblendet. td-sticky-cta.php/header.php bleiben
   unangetastet. */
#tdp-sticky-cta{display:none}
@media (max-width:900px){
  #tdp-sticky-cta{display:flex;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:9990;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.97);backdrop-filter:saturate(1.4) blur(6px);border-top:1px solid var(--border-default);box-shadow:0 -4px 18px rgba(15,27,47,.10)}
  body.page-template-template-cube{padding-bottom:64px}
}
#tdp-sticky-cta a{min-height:48px;border-radius:12px;text-decoration:none;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center}
#tdp-sticky-cta .td-sticky-call{width:48px;min-width:48px;border:2px solid var(--teal-700);color:var(--teal-700);background:#fff}
#tdp-sticky-cta .td-sticky-konf{flex:1;gap:8px;padding:0 14px;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--teal-600) 0%,var(--teal-700) 100%);box-shadow:0 2px 10px rgba(0,132,151,.35)}

/* Theme-weite Leiste (mu-plugins/td-sticky-cta.php, ebenfalls id="td-sticky-cta") NUR auf
   dieser Seite ausblenden, damit ausschliesslich #tdp-sticky-cta mit "Jetzt bestellen"
   sichtbar ist. Betrifft keine andere Seite, mu-plugin/header.php bleiben unveraendert. */
body.page-template-template-cube #td-sticky-cta{display:none!important}

/* WhatsApp-Blase (mu-plugins/td-whatsapp-button.php, .td-wa-wrap) ueberlappte bei der
   Pergola-Seite (gleiches Layout) die Kaufbox/den Preis -- gleiche vorbeugende Korrektur
   hier, Datei des mu-plugins bleibt unveraendert. */
body.page-template-template-cube .td-wa-wrap{bottom:132px!important}
@media (max-width:900px){
  body.page-template-template-cube .td-wa-wrap{bottom:96px!important}
}

/* Schieberegler: identisch zu pergola.css / td/konfigurator.css uebernommen */
.wiz-slider-group{display:flex;flex-direction:column;gap:8px;--wiz-thumb:22px}
.wiz-slider-header{display:flex;justify-content:space-between;align-items:baseline}
.wiz-slider-header label{font:700 12.5px/1.2 var(--font-sans);text-transform:uppercase;letter-spacing:.05em;color:var(--text-heading)}
.wiz-slider-header label small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted)}
.wiz-slider-val{font:800 17px/1.2 var(--font-sans);color:var(--teal-700)}
.wiz-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:8px 0;border-radius:999px;background:linear-gradient(to right,var(--teal-600) var(--fill,50%),var(--gray-200) var(--fill,50%));outline:none;touch-action:pan-y}
.wiz-slider:focus-visible{box-shadow:0 0 0 3px rgba(0,132,151,.25)}
.wiz-slider::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:var(--wiz-thumb);height:var(--wiz-thumb);border-radius:50%;background:#fff;border:2px solid var(--teal-600);box-shadow:0 1px 4px rgba(15,27,47,.25);cursor:pointer}
.wiz-slider::-moz-range-thumb{box-sizing:border-box;width:var(--wiz-thumb);height:var(--wiz-thumb);border-radius:50%;background:#fff;border:2px solid var(--teal-600);cursor:pointer}
.wiz-slider-ticks{display:flex;justify-content:space-between;margin:0 calc(var(--wiz-thumb)/2);font:500 10.5px/1 var(--font-sans);color:var(--gray-400)}
.wiz-slider-ticks>span{flex:0 0 0;width:0;display:flex;justify-content:center;white-space:nowrap;cursor:pointer}
.wiz-slider-ticks>span.on{color:var(--teal-700);font-weight:700}
@media (max-width:700px){.wiz-slider-group{--wiz-thumb:30px}.wiz-slider{height:8px;margin:12px 0}}
@media (max-width:400px){.wiz-slider-ticks{font-size:9.5px}}
[hidden]{display:none!important}