@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Manrope:wght@300;400;500;600&display=swap');
:root{color-scheme:dark;--bg:#060b14;--text:#e5e9ec;--dim:#a4b4c1;--gold:#e1b985;--line:rgba(168,203,216,.2)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 65% 20%,#122438 0,transparent 55%),var(--bg);color:var(--text);font:14px/1.7 Manrope,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}a{color:inherit}.grain{position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")} .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,5vw,76px);border-bottom:1px solid var(--line);position:relative;z-index:2}.brand{text-decoration:none;font-size:11px;letter-spacing:.18em}.brand em{font-style:normal;color:var(--gold)}.infinity{font-size:26px;color:var(--gold);vertical-align:middle;margin-right:10px}.top-center,.back,.eyebrow{font-size:10px;letter-spacing:.22em;color:var(--gold)}.back{text-decoration:none}.intro{max-width:1080px;margin:0 auto;padding:clamp(50px,8vw,108px) 24px 48px}.intro h1,.ending h2{font:300 clamp(42px,6vw,82px)/1.05 'Cormorant Garamond',Georgia,serif;letter-spacing:-.015em;margin:20px 0}.intro h1 em,.ending h2 em{color:var(--gold);font-weight:300}.intro-text{color:var(--dim);max-width:620px;font-size:15px}.experience{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(310px,.8fr);max-width:1400px;margin:auto;min-height:640px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stage{min-height:630px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,rgba(33,71,97,.18),transparent 60%)}canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.stage-caption{position:absolute;bottom:25px;left:30px;color:#b4c6ce;font-size:10px;letter-spacing:.23em}.stage-overlay{position:absolute;top:28px;left:30px;color:#d9c7ab;font:italic 25px 'Cormorant Garamond',serif;max-width:80%;opacity:.85;pointer-events:none}.stage-overlay p{margin:0}.controls{border-left:1px solid var(--line);padding:clamp(24px,4vw,58px);background:rgba(7,13,23,.72)}h2{font:400 39px/1.15 'Cormorant Garamond',Georgia,serif;margin:10px 0}.subtle,.disclaimer{color:var(--dim)}.traits{display:grid;gap:16px;margin:30px 0}.trait label{display:flex;justify-content:space-between;gap:12px;margin-bottom:6px}.trait label span{font-size:12px}.trait output{color:var(--gold);font-variant-numeric:tabular-nums}.trait input{width:100%;accent-color:#d8b58d}.trait small{display:block;color:var(--dim);font-size:11px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}button,.import-label{border:1px solid rgba(200,214,223,.26);border-radius:2px;background:rgba(255,255,255,.03);color:var(--text);padding:11px 15px;transition:background .2s}button:hover,.import-label:hover,button:focus-visible,.import-label:focus-visible{background:rgba(222,181,124,.13);outline:1px solid var(--gold)}button.primary{border-color:var(--gold);color:#f3d5ad}.question{border-top:1px solid var(--line);margin-top:30px;padding-top:22px;font:italic 24px/1.2 'Cormorant Garamond',Georgia,serif}.disclaimer{font-size:11px;margin-top:25px}.memory{max-width:1200px;margin:0 auto;padding:90px 24px;display:grid;grid-template-columns:1fr 1fr;gap:40px 80px}.memory p{color:var(--dim)}.memory-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}.memory-actions label:not(.import-label){font-size:11px;letter-spacing:.13em}.memory-actions input{background:#0c1723;border:1px solid var(--line);padding:13px;color:white}.memory-actions .import-label{text-align:center;cursor:pointer}.memory-actions #status{min-height:24px;font-size:12px;color:var(--gold)}.saved{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.saved-item{border:1px solid var(--line);padding:17px;background:rgba(19,34,47,.45)}.saved-item strong{font:400 26px 'Cormorant Garamond',serif}.saved-item p{font-size:11px}.saved-item button{margin:4px 6px 0 0;font-size:11px}.ending{text-align:center;padding:100px 20px 150px;max-width:900px;margin:auto}.ending>p{color:var(--dim)}.ending h2{font-size:clamp(36px,5vw,63px);margin:30px 0}.ending a{display:inline-block;margin-top:28px;color:var(--gold);text-decoration:none}@media(max-width:900px){.top-center{display:none}.experience{grid-template-columns:1fr}.stage{height:min(68vh,610px);min-height:390px}.controls{border-left:0;border-top:1px solid var(--line)}.memory{grid-template-columns:1fr}.saved{grid-column:auto}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Ursprung 5.9.1 – vertiefte Gestaltung und erinnerte Begegnungen */
.deep-controls{border:1px solid var(--line);padding:15px;margin-top:20px;background:rgba(135,170,196,.035)}.deep-controls summary{cursor:pointer;color:var(--gold);letter-spacing:.04em}.deep-controls summary span{font-size:11px;color:var(--dim)}.deep-controls .traits{margin:15px 0 0}.encounter-controls{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}.encounter-controls p{font-size:12px;color:var(--dim)}#encounter-state{color:#e9c8a1;font-size:14px}#memory-trace{font-style:italic}#remember{font-size:12px}.stage{isolation:isolate}


/* 5.9.2 – Gestaltungsatelier. Nur Bühne und Bedienfeld; persönlicher Kosmos bleibt unberührt. */
.experience{grid-template-columns:minmax(0,1.12fr) minmax(410px,1fr);min-height:0;align-items:stretch}
.experience .stage{height:clamp(450px,58vh,590px);min-height:450px}
.experience .controls{min-width:0;padding:24px clamp(22px,2.4vw,40px);display:flex;flex-direction:column}
.experience .controls h2{font-size:32px;margin:3px 0}
.experience .controls .atelier-lead{font-size:12px;margin:5px 0 12px}
.atelier-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 14px}
.atelier-tab{font-size:13px;padding:10px 7px;white-space:nowrap;border-radius:4px}
.atelier-tab.is-active{background:rgba(225,185,133,.18);border-color:var(--gold);color:#f7d8ae}
.atelier-panel{min-height:245px}
.atelier-panel[hidden]{display:none!important}
.panel-hint{font-size:12px;color:var(--dim);margin:0 0 10px}
.experience .controls .deep-controls{border:0;padding:0;margin:0;background:none}
.experience .controls .traits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 18px;margin:7px 0 0}
.experience .controls .trait{min-width:0}
.experience .controls .trait label{margin-bottom:2px;line-height:1.35}
.experience .controls .trait label span{font-size:12px}
.experience .controls .trait input{margin:2px 0;min-height:20px}
.experience .controls .trait small{font-size:10px;line-height:1.3}
.experience .controls .actions{margin-top:14px;gap:7px}
.experience .controls .actions button{padding:9px 11px;font-size:12px}
.experience .controls .question{margin-top:13px;padding-top:10px;font-size:19px}
.experience .controls .disclaimer{margin:8px 0 0;font-size:10px}
.experience .controls .encounter-controls{margin:0;border:0;padding:0}
.experience .controls .encounter-controls p{margin:7px 0}
.experience .controls .encounter-controls #remember{margin-top:7px}
@media(max-width:980px){.experience{grid-template-columns:1fr}.experience .stage{height:clamp(340px,48vh,500px);min-height:340px}.experience .controls{border-left:0;border-top:1px solid var(--line)}.atelier-panel{min-height:0}}
@media(max-width:480px){.experience .controls{padding:20px 16px}.experience .controls .traits{gap:12px}.experience .controls .trait small{font-size:10px}.experience .stage{height:340px;min-height:340px}}

/* 5.9.4: Die Bühne bleibt unverändert; der Bildinhalt nutzt mehr Fläche.
   Die Namensgebung erfolgt ausschließlich im Persönlichen Kosmos. */
.experience .stage .stage-overlay { display:none; }
.experience .stage .stage-caption {
  bottom: 11px;
  left: 20px;
  right: 20px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .10em;
  text-align: center;
  pointer-events: none;
}

/* 5.9.5 – Diskrete Grundformen, großzügige Bedienung */
.experience .controls .shape-control { grid-column: 1 / -1; }
.shape-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px; }
.shape-choice { padding:11px 6px; font-size:13px; border-radius:4px; }
.shape-choice[aria-pressed="true"] { border-color:var(--gold); background:rgba(225,185,133,.20); color:#f9d9aa; }
@media(max-width:480px){ .shape-choices{gap:5px} .shape-choice{font-size:12px;padding:10px 4px} }

/* 5.11.0 – Entscheidungskern: optionale Beobachtung, kein neuer Hauptreiter */
.decision-panel{margin-top:15px;padding:17px;border:1px solid rgba(180,210,220,.2);background:rgba(21,37,53,.30)}
.decision-panel .eyebrow{margin:0 0 10px}
.decision-current{color:#e5c18d;font:19px/1.35 Georgia,serif;margin:0 0 8px}
.decision-reason{color:#c3d0d7;font-size:12px;line-height:1.6}
.decision-panel summary{cursor:pointer;color:#b5d4df;font-size:12px;margin:12px 0;min-height:28px}
.decision-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(45px,1fr) 28px;gap:9px;align-items:center;margin:8px 0;font-size:11px;color:#c5d3dc}
.decision-track{height:5px;background:rgba(170,198,216,.15);overflow:hidden}
.decision-fill{height:100%;background:linear-gradient(90deg,#70abb6,#e6bd8b);transition:width .5s ease}
.decision-note{font-size:11px;line-height:1.5;color:#9faebc}

/* 5.11.1 – Kompaktes Begegnungsatelier, ohne Änderungen an der Bühne
   oder am Persönlichen Kosmos. */
#panel-encounter { min-height:0; }
#panel-encounter .encounter-controls { display:grid; gap:7px; align-content:start; }
#panel-encounter .encounter-controls > * { min-width:0; }
.encounter-heading,.mind-head { display:flex;align-items:center;gap:9px; }
.encounter-heading .eyebrow,.mind-head .eyebrow { margin:0!important; }
.help-wrap { position:relative;display:inline-flex;align-items:center; }
.help-button { width:23px;height:23px;min-width:23px;padding:0!important;border-radius:50%;line-height:1;
 font-size:12px!important;color:var(--gold);border-color:rgba(225,185,133,.55); }
.help-tip { display:none;position:absolute;z-index:20;top:calc(100% + 9px);left:0;
 width:min(290px,78vw);padding:12px 14px;background:#152638;border:1px solid rgba(225,185,133,.5);
 box-shadow:0 12px 28px rgba(0,0,0,.55);font-size:12px;line-height:1.55;color:#e4eaf0;letter-spacing:normal; }
.help-wrap:hover .help-tip,.help-wrap:focus-within .help-tip { display:block; }
#panel-encounter #encounter-state { margin:0;font-size:13px;line-height:1.4; }
.memory-quick { display:flex;gap:8px;align-items:center; }
#panel-encounter #remember { margin:0;padding:7px 11px;font-size:12px; }
#panel-encounter #memory-trace { margin:0;font-size:11px;line-height:1.3;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis; }
.encounter-feedback { margin:0!important;font-size:11px!important;color:var(--gold)!important;line-height:1.4; }
.encounter-feedback:empty { display:none; }
#panel-encounter .mind-panel { margin:3px 0 0;padding:11px 13px; }
#panel-encounter #mind-summary { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:5px;margin-top:8px; }
#panel-encounter .mind-meter { display:grid;grid-template-columns:1fr;gap:2px;margin:0; }
#panel-encounter .mind-meter span { font-size:10px;line-height:1.25; }
#panel-encounter .mind-meter-track { height:4px; }
#panel-encounter .mind-counter { margin:9px 0 0;font-size:10px;line-height:1.3; }
#panel-encounter .mind-detail { margin-top:5px; }
#panel-encounter .mind-detail summary { font-size:11px;color:#b5d4df;cursor:pointer; }
#panel-encounter .mind-narrative { font-size:13px;line-height:1.4;margin:6px 0 0; }
#panel-encounter .decision-panel { margin:3px 0 0;padding:10px 13px; }
#panel-encounter .decision-panel .eyebrow { margin:0 0 4px; }
#panel-encounter .decision-current { font-size:16px;line-height:1.3;margin:0; }
#panel-encounter .decision-reason { margin:3px 0!important;font-size:11px;line-height:1.35; }
#panel-encounter .decision-panel summary { margin:4px 0;min-height:0; }
#panel-encounter .decision-row { margin:4px 0; }
#panel-encounter .decision-note { margin:6px 0 0; }
@media(max-width:480px){
 #panel-encounter #mind-summary { gap:8px 12px; }
 .help-tip { left:auto;right:-12px; }
}

/* 5.11.2 – Alle Live-Zustände und Entscheidungen sichtbar, ohne redundante Texte */
#panel-encounter .encounter-controls { gap:8px; }
#panel-encounter .mind-panel { margin-top:4px;padding:13px 14px; }
#panel-encounter #mind-summary { display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px; }
#panel-encounter .mind-meter { display:grid;grid-template-columns:18px minmax(0,1fr) 38px;gap:10px;align-items:center;margin:0; }
#panel-encounter .mind-meter span { font-size:12px;color:#d7e1e6;line-height:1.1; }
#panel-encounter .mind-meter .mind-value { font-size:11px;color:#d9b98c;text-align:right;font-variant-numeric:tabular-nums; }
#panel-encounter .mind-meter-track { height:7px;border-radius:6px; }
#panel-encounter .mind-meter-fill { border-radius:6px; }
#panel-encounter .mind-counter { margin:11px 0 3px;font-size:11px; }
#panel-encounter .mind-narrative { display:block;margin:4px 0 0;font-size:13px;line-height:1.4;color:#c9d6df; }
#panel-encounter .memory-save-note { font-size:11px;line-height:1.45;color:#aebdc8;margin:0; }
#panel-encounter #memory-trace { white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45; }
#panel-encounter .decision-panel { padding:13px 14px;margin-top:4px; }
#panel-encounter .decision-current { display:block;font-size:19px;margin:4px 0 5px; }
#panel-encounter .decision-reason { display:block;font-size:12px;line-height:1.5;margin:0 0 5px!important; }
#panel-encounter .help-tip { width:min(350px,80vw);max-height:55vh;overflow:auto; }
@media (max-width:480px){#panel-encounter .mind-meter{gap:7px}#panel-encounter .mind-panel{padding:12px}}

/* 5.11.3 – Einheitliche Atelierüberschrift, sichtbare Live-Balken,
   kein doppelter Speichern-Hinweis. Kein Eingriff in die Simulationslogik. */
.experience .controls .atelier-title {
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(20px,2.15vw,27px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.012em;
  margin:0 0 7px;
  white-space:nowrap;
}
.experience .controls .atelier-title span {color:var(--gold);font:inherit;}
.experience .controls .atelier-lead {margin:0 0 7px;font-size:11px;line-height:1.35;}
.experience .controls .atelier-tabs {margin:6px 0 10px;}
.experience .controls .atelier-tab {padding:7px 6px;}
#panel-encounter .encounter-controls {gap:5px;}
#panel-encounter #encounter-state {font-size:12px;line-height:1.3;margin:0;}
#panel-encounter #memory-trace {font-size:11px;line-height:1.3;margin:0;}
#panel-encounter .memory-save-note {font-size:10px;line-height:1.35;margin:0;}
#panel-encounter .mind-panel {padding:9px 12px;margin:2px 0 0;}
#panel-encounter #mind-summary {display:grid!important;grid-template-columns:1fr!important;gap:5px;margin-top:7px;}
#panel-encounter .mind-meter {display:grid!important;grid-template-columns:16px minmax(0,1fr) 35px!important;gap:8px;align-items:center;min-height:12px;}
#panel-encounter .mind-meter span {font-size:10px;line-height:1.1;}
#panel-encounter .mind-meter-track {display:block!important;width:100%;height:7px;min-width:0;background:rgba(184,205,217,.26);border-radius:8px;overflow:hidden;}
#panel-encounter .mind-meter-fill {display:block!important;height:100%;min-width:2px;background:linear-gradient(90deg,#6b9eaf,#dfb987);border-radius:8px;transition:width .35s ease;}
#panel-encounter .mind-counter {margin:6px 0 0;font-size:10px;line-height:1.25;}
#panel-encounter .mind-narrative {margin:2px 0 0;font-size:11px;line-height:1.3;}
#panel-encounter .decision-panel {padding:9px 12px;margin:2px 0 0;}
#panel-encounter .decision-current {font-size:17px;line-height:1.15;margin:3px 0;}
#panel-encounter .decision-reason {font-size:11px;line-height:1.3;margin:2px 0!important;}
#panel-encounter .decision-panel summary {font-size:11px;min-height:0;margin:4px 0 0;}
.experience .controls .actions {margin-top:9px;}
.experience .controls .actions button {padding:7px 9px;}
.experience .controls .question {margin-top:8px;padding-top:7px;font-size:17px;}
.experience .controls .disclaimer {margin:5px 0 0;font-size:9px;}
@media(max-width:600px){.experience .controls .atelier-title{font-size:clamp(17px,4.3vw,24px);white-space:normal;}}