/* LIGHT · the same site in daylight. Nothing about the layout changes; the ground turns pale, the ink
   turns deep, and the canvases get their darker teal from theme.js. Only colour lives in here. */
/* the page ground must equal the OUTER colour of #bangVoid: the light pool is only 100vh tall, and
   wherever it ends the body shows through. In the dark scheme both are near black, so the seam is
   invisible; in the light scheme a pale body under a dark gradient edge drew a hard horizon across
   every section. */
html[data-theme="light"],body[data-theme="light"]{ background:#47534f; }
body[data-theme="light"]{ color:#102923; }

/* the tree: the stem and the brackets are drawn by CSS, the crown by canvas */
body[data-theme="light"] .tree summary{ color:#102923!important; }
body[data-theme="light"] .tree details.act:hover summary,
body[data-theme="light"] .tree details.act:focus-within summary{ color:#00251e!important; text-shadow:0 0 16px rgba(7,83,70,.35); }
body[data-theme="light"] .tree details.act summary::before,
body[data-theme="light"] .tree details.act summary::after{ border-color:rgba(0,84,69,.75)!important; }
/* die Klammern sind der linke und rechte Rand von .tree details und standen auf var(--line), dem
   Mint der dunklen Krone. Sie tragen jetzt genau die Farbe ihrer Schrift, nicht heller */
body[data-theme="light"] .tree details{ border-left-color:#102923; border-right-color:#102923; }
body[data-theme="light"] .tree details:hover,
body[data-theme="light"] .tree details[open]{ border-left-color:#00251e; border-right-color:#00251e; }

/* overlays: the dark drop shadow that keeps text legible on black would smear on a pale ground */
body[data-theme="light"] .about-line,body[data-theme="light"] .parts-line{ text-shadow:none!important; }
body[data-theme="light"] .about-line .al-title,body[data-theme="light"] .parts-line .al-title{ color:#001a13; }
body[data-theme="light"] .about-line .al-h{ color:#001a13; }
body[data-theme="light"] .about-line .al-t{ color:rgba(0,84,69,.95); }
body[data-theme="light"] .about-line p,body[data-theme="light"] .parts-line p{ color:rgba(16,41,35,.86); }
body[data-theme="light"] .about-line .al-k,body[data-theme="light"] .parts-line .al-k{ color:rgba(0,84,69,.9); }
body[data-theme="light"] .about-line .al-lang,body[data-theme="light"] .about-line .al-lang button,
body[data-theme="light"] .parts-line .al-lang,body[data-theme="light"] .parts-line .al-lang button{ color:rgba(0,84,69,.75); }
body[data-theme="light"] .about-line .al-lang button.on,body[data-theme="light"] .parts-line .al-lang button.on{ color:#001a13; }
body[data-theme="light"] #aboutLine .al-nav{ color:rgba(0,66,54,.92); }
body[data-theme="light"] #aboutLine .al-nav b{ color:#001a13; }
body[data-theme="light"] #aboutLine .al-next{ color:rgba(0,55,45,.95); }
body[data-theme="light"] #aboutLine .al-next:hover{ color:#001a13; }
body[data-theme="light"] .about-line .al-sec + .al-sec{ border-top-color:rgba(0,84,69,.22); }
body[data-theme="light"] .parts-line .pl-nav{ color:rgba(0,55,45,.95); }
body[data-theme="light"] .parts-line .pl-nav b{ color:#001a13; }

/* NODES */
body[data-theme="light"] .nodes-line .md-word{ color:rgba(0,90,74,.8); }
body[data-theme="light"] .nodes-line .md-word.on{ color:#001a13; text-shadow:none; }
body[data-theme="light"] .nodes-line .al-k{ color:rgba(0,84,69,.95); }
body[data-theme="light"] .nodes-line .md-name{ color:#001a13; }
body[data-theme="light"] .nodes-line .md-col.on .md-name{ color:#000f0b; text-shadow:none; }
body[data-theme="light"] .nodes-line .md-form{ color:rgba(0,84,69,.85); }
body[data-theme="light"] .nodes-line .md-r{ color:rgba(16,41,35,.9); border-top-color:rgba(0,84,69,.2); }
body[data-theme="light"] .nodes-line .md-r b{ color:rgba(0,66,54,.92); }
body[data-theme="light"] .nodes-line .md-price{ color:#001a13; }
body[data-theme="light"] .nodes-line .md-cta{ border-color:rgba(0,84,69,.5); color:#001a13; }
body[data-theme="light"] .nodes-line .md-col.on .md-cta,body[data-theme="light"] .nodes-line .md-cta:hover{ border-color:#00251e; color:#000f0b; }
body[data-theme="light"] .nodes-line .md-shot{ background:linear-gradient(180deg,rgba(0,84,69,.07) 0%,rgba(0,84,69,.025) 58%,rgba(0,0,0,0) 100%); box-shadow:inset 0 0 0 1px rgba(0,84,69,.14); }
body[data-theme="light"] .nodes-line .md-col.on .md-shot,body[data-theme="light"] .nodes-line .md-col:hover .md-shot{ background:linear-gradient(180deg,rgba(0,84,69,.13) 0%,rgba(0,84,69,.05) 58%,rgba(0,0,0,0) 100%); box-shadow:inset 0 0 0 1px rgba(0,84,69,.32); }
body[data-theme="light"] .nodes-line .md-col.on,body[data-theme="light"] .nodes-line .md-col:hover{ border-color:rgba(0,84,69,.3); background:rgba(0,84,69,.05); }
body[data-theme="light"] #nodesNote p{ color:rgba(16,41,35,.55); }

/* ORDER */
body[data-theme="light"] .ts-ov#ovOrder{ background:#47534f; }
body[data-theme="light"] .shop2-info{ color:#102923; }
body[data-theme="light"] .shop2-title{ color:#001a13; }
body[data-theme="light"] .shop2-title-sub{ color:rgba(16,41,35,.62); }
body[data-theme="light"] .shop2-sub{ color:rgba(0,84,69,.95)!important; }
body[data-theme="light"] .shop2-price .now{ color:rgba(0,26,19,.95)!important; text-shadow:none!important; }
body[data-theme="light"] .shop2-price .shop2-monthly{ color:rgba(16,41,35,.6)!important; }
body[data-theme="light"] .shop2-meta{ color:rgba(16,41,35,.9); }
body[data-theme="light"] .shop-cta{ border-color:rgba(0,84,69,.55); color:#001a13; }
body[data-theme="light"] .shop-cta:hover{ border-color:#00251e; }
body[data-theme="light"] .shop2-models .sm-opt{ border-color:rgba(0,84,69,.35); color:rgba(16,41,35,.7); }
/* die gewählte Pille ist eine Aussparung: helle Schrift auf dunklem Grün, nicht der Randton */
body[data-theme="light"] .shop2-models .sm-opt.on{ background:#005445; border-color:#005445; color:#e8ecea; }
body[data-theme="light"] .chip,body[data-theme="light"] .details-drop summary{ border-color:rgba(0,84,69,.35); color:#102923; }
body[data-theme="light"] .shop2-args li{ color:rgba(16,41,35,.85); }
body[data-theme="light"] .rl-line{ color:#001a13; }

/* these five carry the dark scheme's ink through rules that outrank a plain body[data-theme] —
   an id in the selector, or a colour written into the funnel layer. In daylight they were mint on
   paper, between 1.04 and 1.09 : 1. */
body[data-theme="light"] .ts-ov#ovOrder .shop2-title-sub{ color:rgba(16,41,35,.62)!important; }
body[data-theme="light"] .shop2-args li b,body[data-theme="light"] .shop2-args b{ color:#001a13!important; }
body[data-theme="light"] .motif-body{ color:rgba(16,41,35,.78)!important; border-left-color:rgba(0,84,69,.28)!important; }
body[data-theme="light"] .rl-word,body[data-theme="light"] .rl-line .rl-word{ color:#00584a!important; }
body[data-theme="light"] .rl-word .rl-scr{ color:rgba(0,84,69,.55)!important; }
body[data-theme="light"] .ts-ov-close{ border-color:rgba(0,84,69,.4)!important; background:rgba(233,238,236,.82)!important; color:#102923!important; }
body[data-theme="light"] .ts-ov-close:hover{ border-color:#00251e!important; color:#000f0b!important; }
/* secondary labels sat between 2.48 and 2.84 : 1 — readable on black, thin on paper */
body[data-theme="light"] .about-line .al-lang button,body[data-theme="light"] .parts-line .al-lang button,
body[data-theme="light"] .nodes-line .al-lang button,body[data-theme="light"] .al-lang,
body[data-theme="light"] .nodes-line .al-lang,body[data-theme="light"] .nodes-line .al-lang span,
body[data-theme="light"] #aboutLine .al-count,body[data-theme="light"] #aboutLine .al-hint{ color:rgba(0,66,54,.9); }
body[data-theme="light"] .nodes-line .md-form{ color:rgba(0,70,57,.95); }

/* the corner × and the deck × */
body[data-theme="light"] .ov-close,body[data-theme="light"] .parts-line .pl-close,
body[data-theme="light"] .ts-ov-close{
  border-color:rgba(0,84,69,.26)!important; background:rgba(233,238,236,.5)!important; color:rgba(16,41,35,.6)!important; }
body[data-theme="light"] .ov-close:hover,body[data-theme="light"] .parts-line .pl-close:hover,
body[data-theme="light"] .ts-ov-close:hover{ border-color:#00251e!important; color:#000f0b!important; background:rgba(233,238,236,.85)!important; }
body[data-theme="light"] .ov-close:hover,body[data-theme="light"] .parts-line .pl-close:hover{ color:#000f0b; border-color:#00251e; }

/* footer · unter dem Horizont ist der Grund in BEIDEN Schemata dunkel, die Schrift dort gehört also
   nicht zur Tinte der hellen Seite, sondern zum Himmel darüber: sie trägt dessen Grundton */
body[data-theme="light"] #rootLegal a,body[data-theme="light"] #rootLegal .rleg{
  color:rgba(230,235,233,.92)!important; text-shadow:0 0 10px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.6)!important; }
body[data-theme="light"] #rootLegal a:hover,body[data-theme="light"] #rootLegal .rleg:hover{ color:#f4f7f6!important; }
body[data-theme="light"] .roots-title{ color:rgba(230,235,233,.9)!important; }
body[data-theme="light"] #rootNodes,body[data-theme="light"] #rootNodes *{ color:rgba(230,235,233,.88)!important; }

/* ── the switch: the customer's two lights, one small mark at the top of the LANDING page. The cut is
   horizontal, bright above and dark below; hovering a half moves the horizon into that half, so the
   choice is visible before it is made. It steps away as soon as any section is open. ── */
.theme-switch{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:14;
  width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer; line-height:0;
  opacity:.62; transition:opacity .45s ease,width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1); }
.theme-switch:hover{ opacity:1; width:38px; height:38px; }
.theme-switch svg{ width:100%; height:100%; display:block; overflow:visible; }
.theme-switch .ts-l,.theme-switch .ts-cut{ transition:transform .42s cubic-bezier(.16,1,.3,1); }
.theme-switch .ts-half{ cursor:pointer; }
.theme-switch .ts-l{ fill:#4fe3c1; }
.theme-switch .ts-d{ fill:#0a3228; }
.theme-switch .ts-cut{ stroke:#03130f; stroke-width:7; stroke-linecap:butt; }
/* Es gibt je Modus nur EINE Möglichkeit, also zeigt die Berührung genau diese eine: im Dunklen
   wächst die helle Hälfte, im Hellen die dunkle. Welche Hälfte man berührt, spielt keine Rolle. */
.theme-switch:hover .ts-l,.theme-switch:hover .ts-cut{ transform:translateY(28px); }
body[data-theme="light"] .theme-switch:hover .ts-l,
body[data-theme="light"] .theme-switch:hover .ts-cut{ transform:translateY(-28px); }
.ts-ring{ stroke:none; }
body[data-theme="light"] .theme-switch .ts-l{ fill:#eef2f0; }
body[data-theme="light"] .theme-switch .ts-d{ fill:#0d1a16; }
body[data-theme="light"] .theme-switch .ts-cut{ stroke:#dfe6e3; }
body[data-theme="light"] .theme-switch .ts-ring{ stroke:rgba(0,60,49,.5); stroke-width:5; }
body[data-theme="light"] .theme-switch{ opacity:.62; }
/* the choice belongs to the landing page; inside a section it would only compete with the content */
body.about-open .theme-switch,body.nodes-open .theme-switch,
body.parts-open .theme-switch,body.shop-open .theme-switch{ opacity:0!important; pointer-events:none; }
@media(max-width:640px){ .theme-switch{ width:22px; height:22px; top:10px; } .theme-switch:hover{ width:30px; height:30px; } }

/* the ground under the roots, restored and deepened: it starts below the sky and sinks with depth,
   the same reading as the dark scheme's band */
body[data-theme="light"] .tree-section{ background:transparent; }
/* Der Schriftzug, aus dem die Krone beim Laden entsteht: auf hellem Grund war er bei 12 %
   praktisch nicht zu sehen. */
body[data-theme="light"] .gothic-title{ --wm-color:rgba(0,58,47,.30); }
body[data-theme="light"] .nodes-line .md-col.on .md-r,
body[data-theme="light"] .nodes-line .md-col:hover .md-r{ color:rgba(0,26,19,.96); }
body[data-theme="light"] .nodes-line .md-col.on .md-name,
body[data-theme="light"] .nodes-line .md-col:hover .md-name{ color:#000f0b; text-shadow:none; }

/* in a section the ground must go completely: the light scheme's band is dark, so even 12 % of it
   draws a horizon across the page — in the dark scheme band and page are both near black, so the
   same 12 % is invisible */
body[data-theme="light"].nodes-open .roots-section,
body[data-theme="light"].parts-open .roots-section,
body[data-theme="light"].shop-open .roots-section{ opacity:0!important; }
/* ABOUT ist die Ausnahme: dort tritt der ganze Baum zurueck, die Wurzeln gehoeren dazu und
   verkleinern sich mit. Der BODEN aber nicht — er wuerde als heller Kasten mitschrumpfen und
   ringsum den dunklen Seitenrumpf freilegen. Also bleibt hier nur der Himmel, durchgehend. */
body[data-theme="light"].about-open .roots-section{ opacity:1!important; }

/* ── the change of light is a DISSOLVE, not a cut. Both grounds are on the page at once: the element
   keeps painting the dark one, a ::before layer carries the light one and trades opacity with it over
   0.9 s. (::after is taken — funnel.css fades the roots to black with it.) The crown cannot be
   interpolated the same way: its two schemes use opposite blend modes, and neither mode can draw the
   other's ink on a half-way ground, so the canvas dips out, changes its light at the midpoint where
   the ground is neutral and nothing is committed either way, and comes back. ── */
#bangVoid::before,.roots-section::before{ content:''; position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity .9s cubic-bezier(.25,.46,.45,.94); }
/* wie im Dunklen: die letzten Prozent laufen auf genau den Seitengrund aus, sonst steht bei breiten,
   flachen Fenstern ein Balken zwischen Lichtkegel und Wurzeln */
#bangVoid::before{ background:linear-gradient(to bottom, rgba(71,83,79,0) 88%, #47534f 100%), radial-gradient(ellipse 112% 78% at 50% 40%, #e8ecea 0%, #c3cdc9 34%, #7c8884 62%, #47534f 100%); }
.roots-section::before{ z-index:0; background:linear-gradient(to bottom,#222c29 0%,#202a27 8%,#19221f 24%,#121917 50%,#0d1312 75%,#090d0c 100%); }
body[data-theme="light"] #bangVoid::before,body[data-theme="light"] .roots-section::before{ opacity:1; }
html,body{ transition:background-color .9s cubic-bezier(.25,.46,.45,.94); }
@media (prefers-reduced-motion:reduce){
  #bangVoid::before,.roots-section::before,html,body,#canvasStage > canvas,#rootCanvas{ transition-duration:.2s; } }

/* Die Welle gehört der Krone; der Grund überblendet einfach — aber im selben Takt, sonst stünde die
   noch nicht gewechselte Hälfte der Krone auf dem falschen Grund. tree.js schreibt den Fortschritt
   der Welle als --ts-cross, hier ist er die Deckkraft der hellen Schicht. */
body.ts-wave #bangVoid::before,body.ts-wave .roots-section::before{
  opacity:var(--ts-cross,0)!important; transition:none!important; }

/* ── Gemessene Ausfälle im hellen Schema, behoben ───────────────────────────────────────────────
   Eine dunkle Tinte auf hellem Grund verliert durch Deckkraft weit mehr als eine helle auf
   schwarzem: 0,34 lässt dort zwei Drittel des Grundes durch und löscht die Schrift fast. Die
   nicht gewählte Spalte stand deshalb bei 1,2–1,6 : 1 — auf der Seite, auf der zwischen drei
   Produkten entschieden wird. Zurückgenommen wird jetzt das Bild der Node, nicht der Wert. */
body[data-theme="light"] .nodes-line .md-col.dim{ opacity:.9!important; }
body[data-theme="light"] .nodes-line .md-col.dim .md-shot{ opacity:.28; }
/* NODES war die einzige Ansicht, die die Krone gar nicht zurücknimmt — im Hellen standen die drei
   Spalten damit direkt auf der voll getuschten Zeichnung. Dasselbe Mittel wie bei PARTS, nur hier. */
body[data-theme="light"].nodes-open #canvasStage > canvas{ opacity:.42!important;
  transition:opacity 1.1s cubic-bezier(.25,.46,.45,.94); }

/* ── ABOUT im hellen Schema: der Text liegt UNTER dem Horizont, auf dunklem Grund ──────────────
   Dort trägt er die Tinte des Himmels, nicht die des Bodens — sonst steht Dunkel auf Dunkel und
   man liest nichts. Der Titel steht über dem Horizont und bleibt dunkel. */
body[data-theme="light"].about-open #aboutLine .al-sec .al-h{ color:rgba(238,247,243,.97); }
body[data-theme="light"].about-open #aboutLine .al-sec .al-t{ color:rgba(212,234,227,.92); }
body[data-theme="light"].about-open #aboutLine .al-sec p{ color:rgba(226,241,236,.94); }
body[data-theme="light"].about-open #aboutLine .al-next{ color:rgba(205,236,228,.7); }
body[data-theme="light"].about-open #aboutLine .al-next:hover{ color:#fff; }
body[data-theme="light"].about-open #aboutLine .al-sec + .al-sec{ border-top-color:rgba(205,236,228,.2); }