/* Rich-Text-Elemente: gemeinsam für Reader (.scene__text) und Editor (.ar-prose) */
.ar-prose blockquote,.scene__text blockquote{
  margin:0 0 1.2em;padding:.2em 0 .2em 1.4em;border-left:2px solid rgba(255,255,255,.4);
  font-style:italic;color:#e3e6ee;font-size:1.06em}
.ar-prose blockquote p,.scene__text blockquote p{margin:0 0 .6em}
.ar-prose blockquote p:last-child,.scene__text blockquote p:last-child{margin:0}

.ar-prose .ar-box,.scene__text .ar-box,
.ar-prose .ar-note,.scene__text .ar-note,
.ar-prose .ar-warn,.scene__text .ar-warn{
  border-radius:14px;padding:1.1em 1.4em;margin:0 0 1.2em;
  border:1px solid rgba(255,255,255,.16);background:rgba(10,12,18,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ar-prose .ar-note,.scene__text .ar-note{border-color:rgba(143,180,255,.45);background:rgba(20,34,66,.62)}
.ar-prose .ar-note::before,.scene__text .ar-note::before{content:"Hinweis";display:block;font:600 .68em/1 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#8fb4ff;margin-bottom:.8em}
.ar-prose .ar-warn,.scene__text .ar-warn{border-color:rgba(255,123,123,.5);background:rgba(66,18,18,.66)}
.ar-prose .ar-warn::before,.scene__text .ar-warn::before{content:"Warnung";display:block;font:600 .68em/1 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#ff9a9a;margin-bottom:.8em}
.ar-prose .ar-box p:last-child,.scene__text .ar-box p:last-child,
.ar-prose .ar-note p:last-child,.scene__text .ar-note p:last-child,
.ar-prose .ar-warn p:last-child,.scene__text .ar-warn p:last-child{margin-bottom:0}
.ar-prose .ar-box p,.scene__text .ar-box p,.ar-prose .ar-note p,.scene__text .ar-note p,.ar-prose .ar-warn p,.scene__text .ar-warn p{margin:0 0 .7em;font-size:.96em}

.ar-prose hr.ar-divider,.scene__text hr.ar-divider{
  border:0;height:1.6em;margin:.4em 0 1.4em;text-align:center;overflow:visible;position:relative}
.ar-prose hr.ar-divider::after,.scene__text hr.ar-divider::after{
  content:"✦  ✦  ✦";display:block;letter-spacing:.7em;color:rgba(255,255,255,.55);font-size:.8em;padding-left:.7em}

.ar-prose .ar-mark,.scene__text .ar-mark{
  background:linear-gradient(transparent 55%,rgba(242,201,76,.38) 55%);color:inherit;padding:0 .08em}

/* Sound-Marker: im Reader unsichtbar, im Editor als Chip */
.scene__text .ar-sfx{display:inline-block;width:0;height:1em;overflow:hidden;vertical-align:baseline}
.rt-area .ar-sfx{display:inline-block;width:auto;height:auto;margin:0 .15em;padding:.05em .55em;border-radius:99px;
  background:rgba(143,180,255,.16);border:1px solid rgba(143,180,255,.5);color:#bcd0ff;font:600 .72em/1.6 system-ui,sans-serif;vertical-align:middle;cursor:default;user-select:all}
.rt-area .ar-sfx::before{content:"🔊 " attr(data-label)}

/* ---------- Editor-UI ---------- */
.rt{border:1px solid var(--line,#262a33);border-radius:10px;background:#0e1014;margin:.3rem 0 1rem}
.rt-bar{display:flex;flex-wrap:wrap;gap:.2rem;align-items:center;padding:.4rem .5rem;border-bottom:1px solid var(--line,#262a33);background:#14171d;border-radius:10px 10px 0 0;position:sticky;top:0;z-index:5}
.rt-btn{font:600 .82rem system-ui,sans-serif;color:#d6dae3;background:transparent;border:1px solid transparent;border-radius:7px;padding:.28rem .55rem;cursor:pointer;min-width:2rem}
.rt-btn:hover{background:#20242d;border-color:#323847}
.rt-btn .mk{background:linear-gradient(transparent 50%,rgba(242,201,76,.5) 50%)}
.rt-color{border-bottom:3px solid #f2c94c;line-height:1}
.rt-sep{width:1px;height:1.3rem;background:#2b303b;margin:0 .25rem}
.rt-pop{position:absolute;z-index:20;margin-top:2.1rem;background:#171a21;border:1px solid #323847;border-radius:10px;padding:.5rem;box-shadow:0 14px 40px rgba(0,0,0,.55);min-width:12rem}
.rt-pop[hidden]{display:none}
.rt-colors{display:flex;gap:.35rem;flex-wrap:wrap;max-width:14rem}
.rt-sw{width:24px;height:24px;border-radius:50%;border:2px solid #323847;cursor:pointer;padding:0}
.rt-sw:hover{border-color:#fff}
.rt-item{display:block;width:100%;text-align:left;font:inherit;font-size:.9rem;color:#e7e9ee;background:transparent;border:0;border-radius:7px;padding:.45rem .6rem;cursor:pointer}
.rt-item:hover{background:#20242d}
.rt-empty{font-size:.82rem;color:#8a90a0;max-width:16rem;line-height:1.5}
.rt-area{min-height:11rem;max-height:60vh;overflow:auto;padding:1rem 1.2rem;color:#f1f2f5;font:400 1.08rem/1.75 Georgia,"Iowan Old Style",serif;outline:none}
.rt-area:empty::before,.rt-area:has(> p:only-child > br:only-child)::before{content:attr(data-placeholder);color:#5d6373;pointer-events:none;position:absolute}
.rt-area p{margin:0 0 1em}
.rt-area h2,.rt-area h3{font-family:system-ui,sans-serif;margin:0 0 .6em}
.rt-area a{color:#8fb4ff}
.rt-area a.ar-btn{display:inline-block;background:#f1f3f8;color:#07080b;text-decoration:none;padding:.5em 1.2em;border-radius:99px;font:600 .9rem system-ui,sans-serif}
.rt-area img{max-width:100%;border-radius:8px}
.rt-area:focus{box-shadow:inset 0 0 0 2px rgba(143,180,255,.35)}
.rt-mail .rt-area{background:#fff;color:#222}
.rt-mail .rt-area blockquote{color:#444;border-color:#8fb4ff}
.rt-mail .rt-area hr.ar-divider::after{color:#bbb}


/* ---------- Textmarker (Varianten) ----------
   Im Reader erscheinen sie animiert, sobald der Text ins Bild läuft (Klasse .in, gesetzt von reader.js). */
.ar-mark{--mc:242,201,76;--mi:.6}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark{background:none;padding:0;color:inherit}

/* Pinsel – weicher Farbstreifen, der sich über den Text zieht (Standard) */
:is(.ar-prose,.scene__text,.rt-area) .ar-mark:not([class*="ar-mark--"]),
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--brush{
  background:linear-gradient(100deg,rgba(139,184,255,0),rgba(139,184,255,.72) 3%,rgba(139,184,255,.5) 97%,rgba(139,184,255,0)) no-repeat 0 62%/100% 82%;
  padding:.02em .3em;margin:0 -.1em;border-radius:.35em .9em .45em .8em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  color:#fff;font-weight:500;transition:background-size 1.2s cubic-bezier(.2,.7,.2,1)}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark:not([class*="ar-mark--"]){background-image:linear-gradient(100deg,rgba(242,201,76,0),rgba(242,201,76,.7) 3%,rgba(242,201,76,.48) 97%,rgba(242,201,76,0))}

/* Leuchten – Neon-Schein um das Wort */
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--glow{color:#fff;text-shadow:0 0 .35em rgba(139,184,255,.95),0 0 .9em rgba(139,184,255,.7),0 0 1.8em rgba(110,150,255,.55);
  transition:text-shadow 1.4s ease,color 1.4s ease}

/* Unterstrich – kräftige Linie, die gezeichnet wird */
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--line{
  background:linear-gradient(90deg,#8BB8FF,#b99cff) no-repeat 0 100%/100% .14em;padding-bottom:.1em;color:#fff;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s cubic-bezier(.2,.7,.2,1)}

/* Verlauf – Schrift in Farbverlauf mit dezentem Schimmer */
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--gradient{
  background:linear-gradient(100deg,#8BB8FF,#c8a6ff 40%,#ff9ec7 70%,#8BB8FF) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;text-shadow:none;font-weight:600;animation:mkShimmer 7s linear infinite;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
@keyframes mkShimmer{to{background-position:220% 0}}

/* Eigener Marker – Art, Farbstopps/Verlauf (--gs1/--gsa/--gsb/--gsl, --mg), Stärke (--mi), Schrift (Inline-Style) */
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-bg{
  background:linear-gradient(var(--mg,100deg),var(--gsa)) no-repeat 0 62%/100% 82%;padding:.02em .3em;margin:0 -.1em;border-radius:.35em .9em .45em .8em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;color:#fff;transition:background-size 1.2s cubic-bezier(.2,.7,.2,1)}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-line{
  background:linear-gradient(90deg,var(--gsl)) no-repeat 0 100%/100% .14em;padding-bottom:.1em;color:#fff;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s cubic-bezier(.2,.7,.2,1)}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-glow{color:#fff;text-shadow:0 0 .35em rgba(var(--mc),var(--mi)),0 0 .9em rgba(var(--mc2,var(--mc)),calc(var(--mi) * .75)),0 0 1.8em rgba(var(--mc2,var(--mc)),calc(var(--mi) * .55));
  transition:text-shadow 1.4s ease}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-box{
  padding:.04em .45em;margin:0 .05em;border:1px solid rgba(var(--mc),calc(.35 + var(--mi) * .6));border-radius:.5em;color:#fff;
  background:linear-gradient(var(--mg,100deg),var(--gsb));-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-text{
  background:linear-gradient(var(--mg,100deg),var(--gs1)) 0 0/100% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;text-shadow:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));transition:opacity 1.2s ease}

/* Versatz-Schatten: harter Schlagschatten in Marker-Farbe (zweite Ebene = letzte Verlaufsfarbe) */
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-shadow{
  color:#fff;font-weight:800;letter-spacing:.01em;
  text-shadow:.06em .06em 0 rgb(var(--mc)),.12em .12em 0 rgb(var(--mc)),.18em .18em 0 rgba(var(--mc2,var(--mc)),.85);transition:text-shadow 1s cubic-bezier(.2,.7,.2,1)}
/* Farbblock: voller, deckender Block hinter dem Text, Schriftfarbe automatisch mit Kontrast */
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-block{
  background:linear-gradient(var(--mg,100deg),var(--gs1)) no-repeat 0 50%/100% 100%;color:var(--mtx,#0b0c10);text-shadow:none;font-weight:700;
  padding:.04em .32em;margin:0 -.08em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1s cubic-bezier(.2,.7,.2,1)}
/* Auswahlrahmen: wie ein markiertes Element im Design-Programm, mit Ziehpunkten an zwei Ecken */
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-select{
  position:relative;color:#fff;padding:.06em .3em;margin:0 .12em;border:1px solid rgba(var(--mc),.95);
  background:linear-gradient(var(--mg,100deg),var(--gsb));-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:opacity 1s ease,border-color 1s ease}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-select::before,
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-select::after{
  content:"";position:absolute;width:0;height:0;border:.3em solid transparent;transition:opacity .8s ease .3s}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-select::before{left:-.38em;top:-.52em;border-top:.46em solid rgb(var(--mc));border-bottom:0}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-select::after{right:-.38em;bottom:-.52em;border-bottom:.46em solid rgb(var(--mc));border-top:0}
/* Sticker: leicht gedrehtes Label mit Schatten */
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-sticker{
  display:inline-block;white-space:nowrap;background:linear-gradient(var(--mg,100deg),var(--gs1));color:var(--mtx,#0b0c10);text-shadow:none;font-weight:600;
  padding:.06em .65em .1em;margin:0 .2em;border-radius:99px;transform:rotate(-3deg);box-shadow:0 .25em .7em rgba(0,0,0,.45);
  transition:transform .9s cubic-bezier(.2,1.4,.3,1),opacity .6s ease}

/* Dauer-Animationen (nur eigener Marker) */
.ar-mark--n-pulse{animation:mkPulse 2.6s ease-in-out infinite}
@keyframes mkPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.55) saturate(1.25)}}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--c-text.ar-mark--n-shimmer{
  background:linear-gradient(var(--mg,100deg),rgb(var(--mc)),rgb(var(--mc2,var(--mc))),rgb(var(--mc))) 0 0/220% 100%;-webkit-background-clip:text;background-clip:text;animation:mkShimmer 5s linear infinite}
:is(.ar-prose,.scene__text,.rt-area) .ar-mark--n-shimmer:not(.ar-mark--c-text){animation:mkPulse 2.6s ease-in-out infinite}

/* Reader: Ausgangszustand vor dem Einblenden (nur wenn JS läuft; .ar-mark--still = ohne Animation) */
.mk-anim .scene__text :is(.ar-mark:not([class*="ar-mark--"]),.ar-mark--brush,.ar-mark--c-bg):not(.in):not(.ar-mark--still){background-size:0% 82%}
.mk-anim .scene__text :is(.ar-mark--line,.ar-mark--c-line):not(.in):not(.ar-mark--still){background-size:0% .14em}
.mk-anim .scene__text :is(.ar-mark--glow,.ar-mark--c-glow):not(.in):not(.ar-mark--still){text-shadow:none;color:inherit}
.mk-anim .scene__text :is(.ar-mark--c-box,.ar-mark--c-text,.ar-mark--c-select):not(.in):not(.ar-mark--still){opacity:0;border-color:transparent}
.mk-anim .scene__text .ar-mark--c-block:not(.in):not(.ar-mark--still){background-size:0% 100%}
.mk-anim .scene__text .ar-mark--c-shadow:not(.in):not(.ar-mark--still){text-shadow:0 0 0 transparent}
.mk-anim .scene__text .ar-mark--c-sticker:not(.in):not(.ar-mark--still){opacity:0;transform:rotate(-14deg) scale(.5)}
@media (prefers-reduced-motion:reduce){
  .ar-mark--gradient,.ar-mark--n-pulse,.ar-mark--n-shimmer{animation:none!important}
  :is(.ar-mark,.ar-mark--brush,.ar-mark--line,.ar-mark--glow,.ar-mark--c-bg,.ar-mark--c-line,.ar-mark--c-glow,.ar-mark--c-box){transition:none!important}
}

/* Editor: Marker-Auswahl */
.rt-marks{width:23rem;max-width:90vw;max-height:75vh;overflow:auto;display:grid;gap:.35rem}
.rt-marks .rt-presets{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.rt-marks .rt-item{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;background:#1b1f27}
.rt-marks .rt-item.wide{flex-direction:row;justify-content:space-between;align-items:center;background:transparent}
.rt-marks .rt-item small{font:600 .7rem system-ui;letter-spacing:.08em;text-transform:uppercase;color:#8a90a0}
.rt-marks .rt-item .pv{font:500 1.05rem Georgia,serif;color:#f1f2f5}
.rt-custom{border-top:1px solid #323847;margin-top:.3rem;padding-top:.6rem;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.rt-custom .full{grid-column:1/-1}
.rt-custom .grads{display:flex;gap:.4rem;flex-wrap:wrap}
.rt-custom .gsw{width:42px;height:22px;border-radius:7px;border:2px solid #323847;cursor:pointer;padding:0}
.rt-custom .gsw:hover{border-color:#fff}
.rt-custom[hidden] .x,.rt-custom .g2[hidden]{display:none}
.rt-custom label{display:grid;gap:.2rem;font:500 .78rem system-ui,sans-serif;color:#aab0be}
.rt-custom select,.rt-custom input[type=color]{width:100%;margin:0;padding:.3rem;background:#0e1014;color:#e6e8ee;border:1px solid #323847;border-radius:6px;font:inherit;height:2rem}
.rt-custom input[type=range]{width:100%;margin:0}
.rt-custom .row{display:flex;gap:.6rem;align-items:center}
.rt-custom .chk{display:flex;gap:.4rem;align-items:center}
.rt-custom[hidden]{display:none}

/* Verlaufs-Editor */
.rt-custom .gprev{height:1.5rem;border-radius:7px;border:1px solid #323847}
.rt-custom .stop{display:grid;grid-template-columns:2.2rem 1fr 1fr 1.4rem;gap:.4rem;align-items:center}
.rt-custom .stop input[type=color]{padding:0;height:1.8rem;width:2.2rem;border-radius:6px}
.rt-custom .stop .hue{height:.6rem;border-radius:99px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);-webkit-appearance:none;appearance:none}
.rt-custom .stop .hue::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #111}
.rt-custom .stop .hue::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #111}
.rt-custom .stop .x{background:none;border:0;color:#9aa0ae;cursor:pointer;font-size:1.1rem;padding:0}
.rt-custom .stop .x:hover{color:#ff8f8f}
.rt-custom .addstop{justify-self:start}
.rt-custom .lbl{font:500 .78rem system-ui,sans-serif;color:#aab0be}

/* Schriftgrößen für einzelne Wörter/Passagen */
:is(.ar-prose,.scene__text,.rt-area) .ar-sz{line-height:1.12}
:is(.ar-prose,.scene__text,.rt-area) .ar-sz--xs{font-size:.8em}
:is(.ar-prose,.scene__text,.rt-area) .ar-sz--l{font-size:1.35em}
:is(.ar-prose,.scene__text,.rt-area) .ar-sz--xl{font-size:1.9em}
:is(.ar-prose,.scene__text,.rt-area) .ar-sz--xxl{font-size:2.8em;letter-spacing:-.01em}
.rt-sizes{display:flex;flex-direction:column;gap:.2rem;min-width:10rem}
.rt-sizes button{text-align:left;background:none;border:0;color:inherit;padding:.3rem .6rem;border-radius:.4rem;cursor:pointer;font:inherit}
.rt-sizes button:hover{background:rgba(127,127,127,.18)}