/* PROJEKT TYRV — gemeinsame Interaktions-Erweiterungen für alle Fallakten-Seiten */

/* 1) Lesefortschritt: seitliche Kapitel-Punkte für diese eine Fallakte */
.fallakte-progress-nav{position:fixed;top:50%;right:18px;transform:translateY(-50%);z-index:850;display:flex;flex-direction:column;gap:11px}
.fallakte-progress-nav a{display:block;width:9px;height:9px;border-radius:50%;background:rgba(16,20,22,.18);position:relative;text-decoration:none;transition:.2s ease}
.fallakte-progress-nav a:before{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink,#101416);background:#fff;padding:5px 10px;border-radius:999px;box-shadow:0 8px 22px rgba(0,0,0,.14);opacity:0;pointer-events:none;transition:opacity .2s ease}
.fallakte-progress-nav a:hover{background:rgba(247,146,57,.55)}
.fallakte-progress-nav a:hover:before{opacity:1}
.fallakte-progress-nav a.active{background:var(--orange,#f79239);transform:scale(1.35)}
@media(max-width:1100px){.fallakte-progress-nav{display:none}}

/* 2) Akkordeon-Zeitstrahl: Details erst per Klick */
.timeline-item h3{position:relative;padding-right:34px;cursor:pointer;user-select:none}
.timeline-item h3:focus-visible{outline:2px solid var(--orange,#f79239);outline-offset:4px}
.timeline-item h3:after{content:"+";position:absolute;right:0;top:-4px;font-size:26px;font-weight:400;color:var(--orange,#f79239);transition:transform .25s ease;line-height:1}
.timeline-item.tl-open h3:after{content:"–"}
.timeline-item p{max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .3s ease;margin:0}
.timeline-item.tl-open p{max-height:640px;opacity:1}
.timeline-item .source-tag{max-height:0;overflow:hidden;opacity:0;display:block;transition:max-height .4s ease,opacity .3s ease,margin .3s ease;margin-top:0}
.timeline-item.tl-open .source-tag{max-height:60px;opacity:1;margin-top:12px}

/* 3) Cursor-Spotlight ("Hinsehen-Modus") */
.spotlight-toggle{position:fixed;left:18px;bottom:18px;z-index:950;padding:11px 18px;border-radius:999px;border:1px solid rgba(16,20,22,.16);background:#fff;font:inherit;font-size:.72rem;font-weight:800;letter-spacing:.05em;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,.14);transition:.2s ease}
.spotlight-toggle:hover{transform:translateY(-2px)}
.spotlight-toggle[aria-pressed="true"]{background:var(--orange,#f79239);color:#151515;border-color:var(--orange,#f79239)}
.spotlight-overlay{position:fixed;inset:0;z-index:930;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(circle 190px at var(--sx,50%) var(--sy,50%),transparent 0%,transparent 55%,rgba(5,8,10,.90) 100%)}
body.spotlight-active .spotlight-overlay{opacity:1}
@media(max-width:700px){.spotlight-toggle{left:12px;bottom:12px;font-size:.64rem;padding:9px 14px}.spotlight-overlay{background:radial-gradient(circle 130px at var(--sx,50%) var(--sy,50%),transparent 0%,transparent 55%,rgba(5,8,10,.90) 100%)}}

/* 4) Digitale Kerze */
.candle-section{max-width:var(--max,1320px);margin:0 auto;padding:70px 6vw 90px;text-align:center}
.candle-widget{display:inline-flex;flex-direction:column;align-items:center;gap:16px}
.candle-btn{display:inline-flex;flex-direction:column;align-items:center;gap:10px;border:1px solid var(--line,rgba(16,20,22,.16));background:#fff;padding:28px 36px;border-radius:24px;cursor:pointer;transition:.25s ease;font:inherit}
.candle-btn:hover{transform:translateY(-3px);box-shadow:0 22px 55px rgba(0,0,0,.10)}
.candle-flame{fill:rgba(16,20,22,.32);transition:.3s ease}
.candle-btn.lit{cursor:default;border-color:rgba(247,146,57,.5);background:linear-gradient(180deg,#fff,#fff7ee)}
.candle-btn.lit:hover{transform:none}
.candle-btn.lit .candle-flame{fill:var(--orange,#f79239);filter:drop-shadow(0 0 12px rgba(247,146,57,.65));animation:candleFlicker 2.2s ease-in-out infinite}
@keyframes candleFlicker{0%,100%{transform:scale(1) rotate(0deg)}25%{transform:scale(1.06) rotate(-2deg)}50%{transform:scale(.97) rotate(1deg)}75%{transform:scale(1.04) rotate(-1deg)}}
.candle-label{font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.candle-count{margin:0;color:var(--muted,#777970);font-size:.86rem}
@media(prefers-reduced-motion:reduce){.candle-btn.lit .candle-flame{animation:none}}

/* Ember-Partikel beim Anzünden */
.candle-btn{position:relative;overflow:visible}
.ember{position:absolute;left:50%;top:30%;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#ffd79a,var(--orange,#f79239));pointer-events:none;opacity:1;animation:emberRise 1.4s ease-out forwards}
@keyframes emberRise{0%{transform:translate(-50%,0) scale(1);opacity:1}100%{transform:translate(calc(-50% + var(--ex,0px)),-70px) scale(.2);opacity:0}}

/* Fall teilen */
.share-btn{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:10px 18px;border-radius:999px;border:1px solid var(--line,rgba(16,20,22,.16));background:#fff;font:inherit;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink,#101416);cursor:pointer;transition:.2s ease}
.share-btn:hover{border-color:var(--orange,#f79239);color:var(--orange,#f79239);transform:translateY(-2px)}
.share-btn.copied{border-color:var(--teal,#167c78);color:var(--teal,#167c78)}