/* METAMOR Orb: Lichtbegleiter über der Seite (orb.js). Farben aus den Seiten-Tokens (basis.css). */
/* Eigenständig: gilt auch auf Seiten ohne basis.css (z. B. im Shop) */
.orb-schicht [hidden] { display: none !important; }
.orb-schicht { position: fixed; inset: 0; z-index: 60; pointer-events: none; --orb-flaeche: color-mix(in srgb, var(--nacht-1) 94%, transparent); }
.orb { position: absolute; left: 0; top: 0; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; pointer-events: auto; will-change: transform; -webkit-tap-highlight-color: transparent; }
.orb canvas { position: absolute; left: -28px; top: -28px; width: 112px; height: 112px; max-width: none; pointer-events: none; }
.orb:focus-visible { outline: 2px solid var(--glut); outline-offset: 2px; }
.klein .orb { width: 28px; height: 28px; margin: 14px; }
.klein .orb canvas { left: -42px; top: -42px; }
.orb-spur { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #fff6e0 0 30%, var(--gold) 55%, transparent 72%); }

.orb-hinweis { position: absolute; left: 0; top: 0; width: max-content; max-width: 260px; padding: 7px 12px; border-radius: 14px; background: var(--orb-flaeche); box-shadow: inset 0 0 0 1px var(--rand-deko), 0 10px 30px -12px rgba(0, 0, 0, .7);
  color: var(--tinte); font: 500 13px/1.3 var(--text); opacity: 0; transition: opacity 300ms var(--kurve); }
.orb-hinweis.da { opacity: 1; }
.offen .orb-hinweis, .klein .orb-hinweis { opacity: 0 !important; }

.orb-blase { position: absolute; right: 16px; bottom: 16px; width: min(372px, calc(100vw - 24px)); max-height: min(calc(100vh - 140px), 580px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto; overflow: hidden;
  pointer-events: auto; border-radius: var(--r-gross); background: var(--orb-flaeche); color: var(--tinte); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--rand-deko), inset 0 1px 0 rgba(244, 238, 229, .06), 0 28px 70px -24px rgba(0, 0, 0, .85); animation: orb-auf 260ms var(--kurve); }
@keyframes orb-auf { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.orb-kopf { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px 16px; border-bottom: 1px solid var(--rand-deko); }
.orb-kopf > div { display: grid; flex: 1; gap: 1px; }
.orb-kopf b { font: 700 18px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.orb-stufe { font: 500 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.orb-zu, .orb-weg { min-width: 36px; min-height: 36px; padding: 4px 10px; border: 0; border-radius: var(--r-klein); background: transparent; color: var(--tinte-2); font: 500 13px var(--text); cursor: pointer; }
.orb-zu { font-size: 22px; line-height: 1; }
.orb-zu:hover, .orb-weg:hover { background: var(--nacht-3); color: var(--tinte); }

.orb-verlauf { display: grid; align-content: start; gap: 10px; padding: 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.orb-msg { display: grid; gap: 8px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--nacht-2); font-size: 15px; line-height: 1.5; animation: orb-auf 300ms var(--kurve); }
.orb-msg p { margin: 0; }
.orb-msg.du { justify-self: end; max-width: 85%; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--gold) 16%, var(--nacht-2)); }
.orb-art { justify-self: start; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-3); }
.orb-notiz { font-size: 13px; color: var(--tinte-3); }
.orb-quelle { font-size: 13px; color: var(--tinte-3); }
.orb-quelle button { padding: 0; border: 0; background: none; color: var(--gold); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.orb-aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.orb-aktion { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 12px; border: 0; border-radius: var(--r-klein); background: var(--glut); color: var(--glut-tinte); font: 600 13px/1.2 var(--text); text-decoration: none; cursor: pointer; }
.orb-aktion.leise { background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 1px var(--rand-bedien); }
.orb-einwilligung { box-shadow: inset 0 0 0 1px var(--gold); }
.orb-denkt { grid-auto-flow: column; justify-content: start; gap: 5px; }
.orb-denkt i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: orb-denkt 900ms ease-in-out infinite; }
.orb-denkt i:nth-child(2) { animation-delay: 150ms; } .orb-denkt i:nth-child(3) { animation-delay: 300ms; }
@keyframes orb-denkt { 50% { opacity: .25; transform: translateY(-3px); } }

.orb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; }
.orb-chip { min-height: 32px; padding: 5px 11px; border: 1px solid var(--rand-bedien); border-radius: 999px; background: transparent; color: var(--tinte-2); font: 500 13px/1.2 var(--text); cursor: pointer; text-align: left; }
.orb-chip:hover { color: var(--tinte); border-color: var(--gold); }
.orb-chip.haupt { border-color: var(--gold); color: var(--tinte); }
.orb-frage { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rand-deko); }
.orb-frage input { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rand-bedien); border-radius: var(--r-klein); background: var(--nacht-2); color: var(--tinte); font: 400 16px var(--text); }
.orb-frage button { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-klein); background: var(--glut); color: var(--glut-tinte); font: 600 14px var(--text); cursor: pointer; }
.orb-fuss { margin: 0; padding: 0 16px 12px; font-size: 12px; line-height: 1.4; color: var(--tinte-3); }

/* Rundgang: kompakt, und auf die freie Seite gerückt */
.tour .orb-chips, .tour .orb-frage, .tour .orb-fuss { display: none; }
.tour .orb-verlauf { max-height: 36vh; }
.orb-blase.links { right: auto; left: 16px; }

/* Hervorhebung des erklärten Elements */
.orb-fokus { outline: 2px solid color-mix(in srgb, var(--gold) 80%, transparent); outline-offset: 6px; border-radius: 6px; animation: orb-fokus 3200ms var(--kurve) forwards; }
@keyframes orb-fokus { 0% { outline-color: transparent; outline-offset: 18px; } 15% { outline-color: var(--gold); outline-offset: 6px; } 80% { outline-color: var(--gold); } 100% { outline-color: transparent; } }

/* Handy: Antwortfeld als Blatt von unten */
@media (max-width: 699px) {
  .orb-blase { left: 8px; right: 8px; width: auto; max-height: 64vh; }
}
@media (prefers-reduced-motion: reduce) { .orb-blase, .orb-msg { animation: none; } .orb-fokus { animation: none; } }