/* OPTIMaiX: immer Schwarz mit Orange, unabhängig von Palette und Farbschema */
.opai-gruss,.opai,.opai-start,.opai-formel{--o-bg:#0A0B0F;--o-fl:#15161c;--o-tx:#F4F4F6;--o-tx2:#b9bcc6;--o-or:#FE6303;--o-li:#ffffff1f;color:var(--o-tx);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.reaktor-gross,.reaktor-klein{position:relative;display:block;border-radius:50%}
.reaktor-gross canvas.rk,.reaktor-klein canvas.rk{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s}
.echt canvas.rk{opacity:1}.echt .rk-flach{opacity:0}
.rk-flach{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFB27A,#FE6303 55%,#5a1f00);box-shadow:0 0 30px #FE630366;transition:opacity .5s}

/* Begrüßung mitten im Bild */
.opai-gruss{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:#05060899;backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.opai-gruss.offen{opacity:1}
.og-karte{width:min(520px,100%);background:var(--o-bg);border:1px solid var(--o-li);border-radius:26px;padding:22px 24px 22px;box-shadow:0 40px 90px -30px #000,0 0 0 1px #FE630322,0 0 80px -30px #FE630366;
 transform:translateY(24px) scale(.94);transition:transform .55s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.opai-gruss.offen .og-karte{transform:none}
.og-karte::before{z-index:0;content:"";position:absolute;inset:-40% -20% auto;height:70%;background:radial-gradient(closest-side,#FE630333,transparent);pointer-events:none}
.og-reaktor{width:min(180px,40vw);height:min(180px,40vw);margin:-4px auto 6px}
.opai-gruss.offen .og-reaktor{animation:schweben 5s ease-in-out 1}
@keyframes schweben{0%{transform:translateY(8px) scale(.9);opacity:0}30%{transform:none;opacity:1}100%{transform:none}}

.og-spr{margin-left:auto;width:auto;min-height:34px;padding:4px 8px;background:#ffffff12;color:var(--o-tx);border:1px solid var(--o-li);border-radius:8px;font-size:13px}.og-spr option{color:#111}
.og-ton,.og-x{background:none;border:0;color:var(--o-tx);font-size:20px;cursor:pointer;min-width:40px;min-height:40px;border-radius:10px}.og-x{margin-left:auto}.og-spr+.og-ton{margin-left:0}
.og-text{font-size:clamp(17px,2.2vw,19px);line-height:1.55;margin:12px 0 18px;min-height:5.5em;position:relative}
.og-knoepfe{display:flex;flex-wrap:wrap;gap:10px;position:relative}
.og-erst,.og-zweit,.og-link{min-height:48px;border-radius:999px;padding:0 22px;font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.og-erst{background:var(--o-or);color:#fff;border:0}.og-zweit{background:transparent;color:var(--o-tx);border:1.5px solid #ffffff40}.og-link{background:none;border:0;color:var(--o-tx2);text-decoration:underline;padding:0 8px}
.og-erst:focus-visible,.og-zweit:focus-visible,.og-link:focus-visible,.opai button:focus-visible{outline:2px solid var(--o-or);outline-offset:2px}

/* Tourfenster mit Verzeichnis, am Handy als Pille */
.opai{position:fixed;right:18px;bottom:18px;z-index:55;width:min(420px,calc(100vw - 24px));display:none}
.opai.laeuft{display:block}
.op-pille{display:none}
.op-inhalt{background:#0A0B0Ff2;border:1px solid var(--o-li);border-radius:22px;padding:14px 16px;box-shadow:0 30px 70px -24px #000d;backdrop-filter:blur(14px)}
.op-kopf{display:flex;align-items:center;gap:10px}.op-kopf b{color:var(--o-or);letter-spacing:.05em}.op-tourname{font-size:12.5px;color:var(--o-tx2)}
.op-rk2,.op-rk{width:36px;height:36px;flex:0 0 36px}
.op-vz-k,.op-x{background:#ffffff10;border:1px solid var(--o-li);color:var(--o-tx);min-width:40px;min-height:40px;border-radius:12px;cursor:pointer;font-size:17px}.op-vz-k{margin-left:auto}
.op-vz{list-style:none;margin:10px 0 0;padding:6px;max-height:min(40vh,320px);overflow:auto;background:#ffffff08;border-radius:14px;display:grid;gap:2px;counter-reset:v}
.op-vz li{counter-increment:v}.op-vz button{width:100%;text-align:left;background:none;border:0;color:var(--o-tx2);font:inherit;font-size:14px;padding:8px 10px;border-radius:10px;cursor:pointer;min-height:40px}
.op-vz button::before{content:counter(v) ". ";color:var(--o-or);font-weight:700}.op-vz button[aria-current]{background:#FE630322;color:var(--o-tx)}
.op-text{font-size:16px;line-height:1.55;margin:12px 0;min-height:4.8em}
.op-steuer{display:flex;gap:8px;align-items:center}.op-steuer button{min-width:44px;min-height:42px;border-radius:12px;border:1px solid var(--o-li);background:#ffffff10;color:var(--o-tx);font-size:17px;cursor:pointer}
.op-n{margin-left:auto;font-size:12.5px;color:var(--o-tx2)}
.opai[dir="rtl"] .op-n{margin-left:0;margin-right:auto}.opai[dir="rtl"] .op-vz-k{margin-left:0;margin-right:auto}.opai[dir="rtl"] .op-vz button{text-align:right}
@media (max-width:700px){
 .opai{left:50%;right:auto;transform:translateX(-50%);bottom:12px;width:calc(100vw - 16px)}
 .op-pille{display:flex;align-items:center;gap:10px;margin:0 auto;background:var(--o-bg);color:var(--o-tx);border:1px solid #FE630366;border-radius:999px;padding:6px 16px 6px 6px;font:inherit;font-weight:650;font-size:14px;box-shadow:0 14px 30px -12px #000c;max-width:100%;cursor:pointer}
 .op-pt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .op-inhalt{display:none;margin-bottom:8px}.opai.auf .op-inhalt{display:block}.opai.auf .op-pille{display:none}
 .op-inhalt{max-height:70dvh;overflow:auto}}

/* Startknopf */
.opai-start{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:10px;border:1px solid #FE630355;border-radius:999px;padding:6px 16px 6px 6px;background:#0A0B0Fe6;font:inherit;font-weight:700;cursor:pointer;box-shadow:0 14px 30px -12px #000a;backdrop-filter:blur(10px)}
.opai-start b{color:var(--o-tx);letter-spacing:.04em}.opai-start .reaktor-klein{width:34px;height:34px}
.opai.laeuft~.opai-start,body:has(.opai.laeuft) .opai-start{display:none}
@media (max-width:700px){.opai-start{right:12px;bottom:12px}}

/* Formel der Entstehung */
.opai-formel{position:fixed;left:50%;top:50%;z-index:58;transform:translate(-50%,-46%);width:min(760px,calc(100vw - 24px));background:var(--o-bg);border:1px solid #FE630355;border-radius:24px;padding:18px 20px;box-shadow:0 40px 90px -30px #000;opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.opai-formel.an{opacity:1;transform:translate(-50%,-50%)}
.opai-formel p{margin:0 0 12px;font:600 13px/1.4 ui-monospace,Menlo,monospace;color:var(--o-or)}
.opai-formel ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.opai-formel li{background:#ffffff0c;border:1px solid var(--o-li);border-radius:14px;padding:10px;display:grid;gap:4px;opacity:0;transform:translateY(10px)}
.opai-formel.an li{animation:stufe .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(.3s + var(--i) * .9s)}
@keyframes stufe{to{opacity:1;transform:none;border-color:#FE6303aa}}
.opai-formel small{color:var(--o-tx2);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}.opai-formel b{font-size:14px;line-height:1.3}
@media (max-width:700px){.opai-formel ol{grid-template-columns:repeat(2,minmax(0,1fr))}.opai-formel{top:40%}}

/* Hervorhebung und Tippbeispiel */
.tour-fokus{outline:3px solid #FE6303;outline-offset:6px;border-radius:14px;transition:outline-color .3s}
.tour-tippt::placeholder{color:#FE6303;opacity:1}
@media (prefers-reduced-motion:reduce){.og-karte,.opai-formel,.opai-gruss{transition:none}.opai-gruss.offen .og-reaktor{animation:none}.opai-formel.an li{animation:none;opacity:1;transform:none}}
@media print{.opai,.opai-start,.opai-gruss,.opai-formel{display:none}}

/* Platine hinter Begrüßung und Tourfenster, Schrift wie in OX */
.op-platine{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;border-radius:inherit}
.og-karte>*:not(.op-platine),.op-inhalt>*:not(.op-platine){position:relative;z-index:1}
.op-inhalt{position:relative;overflow:hidden}
.og-text span,.op-text span{color:#ffffff59;transition:color .18s}.og-text span.g,.op-text span.g{color:var(--o-tx)}
.og-fort,.op-fort{height:3px;background:#ffffff1a;border-radius:3px;overflow:hidden;margin:-6px 0 14px}.og-fort i,.op-fort i{display:block;height:100%;background:var(--o-or);transform:scaleX(0);transform-origin:left}
.op-kapitel{margin:8px 0 0;font-size:12.5px;color:var(--o-or);font-weight:650}
.og-karte{background:radial-gradient(120% 80% at 50% 0%,#14151b,#0A0B0F 60%)}

/* Begrüßung: Sprache oben links, Schließen oben rechts, Abspielen und Ton */
.og-oben{display:flex;justify-content:space-between;align-items:center;margin:-8px -10px 0}
.og-oben .og-spr{margin:0}.og-oben .og-x{margin:0;font-size:26px}
.og-name{text-align:center;margin:2px 0 0;color:var(--o-or);font-weight:800;letter-spacing:.08em}
.og-leiste{display:flex;align-items:center;gap:10px;margin:-6px 0 16px}.og-leiste .og-fort{flex:1;margin:0}
.og-play,.og-leiste .og-ton{min-width:44px;min-height:40px;border-radius:12px;border:1px solid var(--o-li);background:#ffffff10;color:var(--o-tx);font-size:17px;cursor:pointer}
.og-leiste .og-ton{margin:0}
.og-text{text-align:left}
/* Wanderndes Fenster: legt sich neben die erklärte Stelle, markiert sie und gleitet zur nächsten (Noah 05.11.2026) */
.opai.wandert{right:auto;bottom:auto;transition:left .6s cubic-bezier(.22,1,.36,1),top .6s cubic-bezier(.22,1,.36,1)}
.tour-fokus{outline:3px solid #FE6303;outline-offset:6px;border-radius:14px;animation:tour-puls 1.6s ease-in-out infinite;position:relative;z-index:1}
@keyframes tour-puls{0%,100%{box-shadow:0 0 0 0 #FE630355}50%{box-shadow:0 0 0 10px #FE630300,0 0 34px 4px #FE630340}}
.opai-formel.im-fenster{position:static;transform:none;width:auto;margin:10px 0 0;padding:12px;border-radius:16px;opacity:0;transition:opacity .3s}
.opai-formel.im-fenster.an{opacity:1;transform:none}
.opai-formel.im-fenster ol{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (prefers-reduced-motion:reduce){.opai.wandert{transition:none}.tour-fokus{animation:none}}
.opai.wandert{width:340px}
.opai.wandert .op-inhalt{max-height:calc(100vh - 24px);overflow:auto;padding:12px 14px}
.opai.wandert .op-text{font-size:15px;min-height:3.6em;margin:8px 0}
.opai.wandert .opai-formel.im-fenster{padding:10px}.opai.wandert .opai-formel.im-fenster p{font-size:11.5px;margin-bottom:8px}
.opai.wandert .opai-formel.im-fenster li{padding:7px 8px}.opai.wandert .opai-formel.im-fenster b{font-size:12.5px}