/* dynaxity.css — the one stylesheet of the dynaxity.world pages
   Herkunft-Chat: dynaxity.world (Würfelstudie, 27.–28.09.2026)
   Model: story.dynaxity.world vers/v1 (section head, watermark numeral, folio,
   measured 28.09.) and the landing body of dynactic.academy (dyn-*, demo 27.09.).
   NO colour value lives here: every colour is a variable, and the variables are
   written by the build from data/rahmen.json and dyos gesicht/vorlage.json.
   The frame (keys, panels, signature) is dyos-style.js and not styled here. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{min-height:100vh;color:var(--tinte);background-color:var(--grund);background-image:var(--grundbild);background-attachment:fixed;
  font:400 17px/1.68 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root{--serif:"Lora",Georgia,serif;--sans:"DM Sans",system-ui,-apple-system,sans-serif;--hand:"Caveat",cursive;
  --ecke:18px;--mass:66ch;--maxw:1240px;--rand:clamp(22px,6vw,118px);--kurve:cubic-bezier(.22,.61,.36,1)}

/* ── backgrounds: cube and world, fixed behind everything ── */
.dx-hinter{position:fixed;inset:0;z-index:0;pointer-events:none}
.dx-wuerfel{transition:opacity 1.2s var(--kurve)}
.dx-wuerfel[data-weg="1"]{opacity:0}
.dx-welt{opacity:0;transition:opacity 1.6s var(--kurve)}
.dx-welt[data-da="1"]{opacity:1}
main{position:relative;z-index:1;display:block}
.dx-koerper{max-width:var(--maxw);margin:0 auto;padding:0 var(--rand)}

/* ── hero ── */
.dx-held{min-height:min(100vh,980px);display:flex;flex-direction:column;justify-content:center;padding:clamp(120px,19vh,214px) 0 clamp(46px,7vh,74px)}
.dx-marke{display:flex;align-items:center;gap:14px;margin:0 0 30px}
.dx-marke svg{width:52px;height:52px;flex:0 0 auto}
.dx-wortmarke{font:700 30px/1 var(--hand);letter-spacing:.5px;color:var(--tinte);white-space:nowrap}
.dx-wortmarke .dx-a{color:var(--rot);font-size:1.08em}
.dx-wortmarke .dx-bereich{color:var(--gedaempft)}
.dx-augenbraue{display:flex;align-items:center;gap:11px;margin:0 0 26px;font:400 12px/1 var(--sans);letter-spacing:2.2px;text-transform:uppercase;color:var(--leise)}
.dx-augenbraue i{display:block;width:26px;height:1px;background:var(--rot);flex:0 0 auto}
.dx-titel{margin:0;font-family:var(--s-titel-familie);font-weight:var(--s-titel-gewicht);font-variation-settings:"opsz" var(--s-titel-opsz);font-size:var(--s-titel-groesse);line-height:var(--s-titel-zeile);letter-spacing:var(--s-titel-laufweite);color:var(--s-titel-farbe);text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,250,240,.55),0 -1px 0 rgba(31,27,22,.03)}
.dx-titel .dx-zeile{display:block}
.dx-rot{color:var(--rot)}
.dx-titel .dx-rot{color:var(--s-titel-rot-farbe);font-style:var(--s-titel-rot-stil)}

/* ── introduction and its footnote ── */
.dx-einleitung{padding:0 0 clamp(64px,10vh,116px)}
.dx-einleitung p{max-width:var(--s-vorspann-mass);margin:0 0 1em;font-family:var(--s-vorspann-familie);font-style:var(--s-vorspann-stil);font-weight:var(--s-vorspann-gewicht);font-size:var(--s-vorspann-groesse);line-height:var(--s-vorspann-zeile);color:var(--s-vorspann-farbe)}
.dx-einleitung .dx-fussnote,.dx-fussnote{max-width:62ch;margin:28px 0 0;padding-top:14px;border-top:1px solid var(--linie);font:400 13.5px/1.6 var(--sans);color:var(--leise)}
.dx-fussnote::before{content:"";display:inline-block;width:18px;height:1px;background:var(--rot);vertical-align:middle;margin-right:10px;opacity:.7}

/* ── chapters, story scheme ── */
.dx-kapitel{position:relative;padding:clamp(80px,12vh,130px) 0}
.dx-wasserzeichen{position:absolute;top:clamp(40px,7vh,60px);right:0;font:italic 600 clamp(8rem,18vw,16rem)/.7 var(--serif);color:var(--tinte);opacity:.035;pointer-events:none;user-select:none}
@media (max-width:880px){.dx-wasserzeichen{display:none}}
.dx-kopf{display:grid;grid-template-columns:1fr 2fr;gap:80px;align-items:baseline;margin:0 0 clamp(40px,7vh,84px);position:relative}
@media (max-width:880px){.dx-kopf{grid-template-columns:1fr;gap:24px}}
.dx-kopf h2{margin:0;font:500 clamp(2.4rem,4.4vw,3.6rem)/1.16 var(--serif);letter-spacing:-.02em;color:var(--stark)}
.dx-meta{font-size:13px;line-height:1.6;letter-spacing:.02em;color:var(--leise)}
.dx-etikett{display:inline-flex;align-items:center;gap:14px;margin:0 0 18px;font:500 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--rot)}
.dx-etikett::before{content:"";width:28px;height:1px;background:var(--rot)}
.dx-etikett .dx-num{color:var(--gedaempft);font-feature-settings:"tnum"}
.dx-text p{max-width:var(--mass);margin:0 0 1.1em;font-size:var(--s-absatz-groesse);line-height:var(--s-absatz-zeile);color:var(--s-absatz-farbe)}
.dx-text em,.dx-fussnote em{font-style:italic}
.dx-herkunft{max-width:var(--mass);margin:0 0 2em;padding:0 0 0 18px;border-left:2px solid var(--rot);font:400 16px/1.7 var(--sans);color:var(--text)}

/* ── inner cube with axes (stage 1), generated SVG ── */
.dx-innen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin:clamp(24px,4vh,48px) 0 0}
@media (max-width:880px){.dx-innen{grid-template-columns:1fr}}
.dx-innen svg{width:100%;max-width:520px;height:auto;display:block}
.dx-achsen{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.dx-achsen li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:baseline}
.dx-achsen .dx-ax{font:500 12px/20px ui-monospace,Menlo,monospace;color:var(--still)}
.dx-achsen b{display:block;font:400 22px/1.2 var(--serif);color:var(--stark)}
.dx-achsen span.dx-stufen{display:block;margin-top:4px;font-size:14.5px;color:var(--text)}
.dx-achsen span.dx-stufen i{font-style:normal;color:var(--still);padding:0 .45em}

/* ── doors (head page): fields as on dynactic.academy ── */
.dx-band{margin:0 0 clamp(64px,10vh,116px)}
.dx-bandkopf{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:0 0 26px;border-bottom:1px solid var(--linie);padding-bottom:14px}
.dx-bandtitel{margin:0;font:400 12px/1 var(--sans);letter-spacing:2.2px;text-transform:uppercase;color:var(--still)}
.dx-bandzahl{font:400 12px/1 var(--sans);letter-spacing:1.4px;color:var(--still)}
.dx-gitter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:980px){.dx-gitter{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.dx-gitter{grid-template-columns:1fr}}
.dx-feld{position:relative;display:flex;flex-direction:column;min-height:170px;padding:22px 22px 20px;border:1px solid var(--linie);border-radius:var(--ecke);
  background:var(--feld);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:inherit;text-decoration:none;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(60,50,38,.06),0 1px 2px rgba(60,50,38,.09),0 5px 12px -3px rgba(60,50,38,.13),0 14px 30px -10px rgba(60,50,38,.17);
  transition:background 240ms,border-color 240ms,transform 320ms var(--kurve),box-shadow 320ms var(--kurve)}
.dx-feld::after{content:"";position:absolute;left:22px;bottom:0;height:1px;width:0;background:var(--rot);transition:width 380ms var(--kurve)}
.dx-feld:hover,.dx-feld:focus-visible{background:var(--feldhoch);transform:translateY(-3px)}
.dx-feld:hover::after,.dx-feld:focus-visible::after{width:calc(100% - 44px)}
.dx-feld:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
.dx-feldkopf{display:flex;align-items:center;gap:12px}
.dx-feldkopf svg{width:40px;height:40px;flex:0 0 auto}
.dx-feldkopf .dx-wortmarke{font-size:21px;white-space:normal;line-height:1.05}
.dx-feldkopf .dx-wortmarke .dx-bereich{white-space:nowrap}
.dx-kurz{margin:14px 0 0;font:400 11.5px/1.5 var(--sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--still)}
.dx-host{margin-top:auto;padding-top:14px;font:400 12px/1 var(--sans);color:var(--leise)}

/* ── Verbund: three addresses (glosses visible, the large form of the demo) ── */
.dx-verbund{display:flex;flex-wrap:wrap;gap:26px 44px;margin:clamp(56px,9vh,104px) 0 0;padding-top:clamp(30px,5vh,46px);border-top:1px solid var(--linie)}
.dx-vglied{display:flex;flex-direction:column;gap:7px;max-width:28ch;color:inherit;text-decoration:none}
.dx-vbegriff{font:400 11px/1 var(--sans);letter-spacing:2.2px;text-transform:uppercase;color:var(--stark)}
.dx-vhost{font:400 12.5px/1 var(--sans);color:var(--leise);border-bottom:1px solid transparent;padding-bottom:3px;align-self:flex-start}
.dx-vglosse{font:400 14.5px/1.55 var(--sans);color:var(--leise)}
a.dx-vglied:hover .dx-vhost{border-bottom-color:var(--rot)}
a.dx-vglied:hover .dx-vbegriff,.dx-vglied[aria-current] .dx-vbegriff{color:var(--rot)}
.dx-vglied[aria-current] .dx-vhost{opacity:.62}
.dx-fuss{padding:clamp(40px,7vh,72px) 0 clamp(120px,18vh,200px)}

/* ── folio: side marker like story (04-folio.js), labels from data attributes ── */
.dx-folio{position:fixed;right:30px;top:50%;z-index:30;display:flex;align-items:center;gap:14px;font:italic 400 12px/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;
  color:var(--leise);writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);opacity:0;transition:opacity .6s var(--kurve);pointer-events:none;user-select:none}
.dx-folio[data-da="1"]{opacity:.8}
.dx-folio .dx-num{color:var(--rot);font-weight:600;font-feature-settings:"tnum"}
@media (max-width:1200px){.dx-folio{display:none}}

/* ── preview build only (out/_vorschau): drafts and writing orders made visible ── */
[data-vorschau] [data-status="entwurf"]{outline:1px dashed rgba(230,57,70,.35);outline-offset:6px}
.dx-luecke{display:inline-block;padding:2px 8px;border:1px dashed var(--still);border-radius:6px;font:500 11px/1.5 ui-monospace,Menlo,monospace;color:var(--still);background:rgba(255,255,255,.35)}

.dx-still{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.dx-feld,.dx-wuerfel,.dx-welt,.dx-folio{transition:none}.dx-feld:hover{transform:none}}