/* ============================================================
   SocieKey — gemeinsame Styles (Mitgliederbereich + Extras)
   Farbwelt: night #060402 · panel #14100B · line #2A2118
             amber #F0A04B · gold #FFD27A · copper #C77B4F
   ============================================================ */

body { background: #060402; }
::selection { background: #F0A04B; color: #060402; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Sidebar ---------- */
#sidebar { transition: width .3s ease, transform .3s ease; }
#content { transition: margin-left .3s ease; }
.nav-label { transition: opacity .2s ease; white-space: nowrap; }
.sidebar-collapsed .nav-label, .sidebar-collapsed .brand-full { opacity: 0; pointer-events: none; }
.key-cue { width: 0; opacity: 0; transform: translateX(-8px); overflow: hidden; flex-shrink: 0;
  color: #F0A04B; transition: width .35s ease, opacity .35s ease, transform .35s ease; }
.nav-item:hover .key-cue, .nav-item.active .key-cue { width: 1.5rem; opacity: 1; transform: none; }
.sidebar-collapsed .key-cue { width: 0 !important; opacity: 0 !important; }

/* Menüpunkte: Grundzeile. Parents sind Buttons — Button-Defaults zurücksetzen. */
.nav-item { border-left: 3px solid transparent; }
.nav-parent { background: none; border: 0; border-left: 3px solid transparent; cursor: pointer;
  font: inherit; color: inherit; }

/* Aktiver Punkt: unmissverständlich — Amber-Balken + Füllung + helle Schrift */
.nav-item.active {
  color: #F5EFE6; border-left-color: #F0A04B;
  background: linear-gradient(90deg, rgba(240,160,75,.16), rgba(240,160,75,.04) 65%, transparent);
}
.nav-item.active > svg:first-of-type { color: #FFD27A; filter: drop-shadow(0 0 7px rgba(240,160,75,.65)); }
/* Elternpunkt, dessen Unterseite gerade aktiv ist */
.nav-parent.parent-active { color: #F5EFE6; border-left-color: rgba(240,160,75,.5); background: rgba(42,33,24,.22); }
.nav-parent.parent-active > svg:first-of-type { color: #FFD27A; }
.nav-chev { margin-left: auto; flex-shrink: 0; transition: transform .3s ease; color: #8A5A2B; }
.nav-parent.open .nav-chev { transform: rotate(180deg); color: #F0A04B; }
.sidebar-collapsed .nav-chev { opacity: 0; }

/* Untermenü: klappt smooth in der Zeile auf (max-height wird per JS gesetzt) */
.nav-sub { overflow: hidden; max-height: 0; transition: max-height .34s cubic-bezier(.4,0,.2,1); }
.nav-sub a { position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .55rem 1rem .55rem 3.35rem; font-size: 13px; color: #B0A392;
  border-left: 3px solid transparent; transition: color .2s ease, background .2s ease; }
/* Verbindungslinie zum Elternpunkt */
.nav-sub::before { content: ""; position: absolute; left: 2.05rem; top: .2rem; bottom: .55rem;
  width: 1px; background: linear-gradient(#2A2118, rgba(42,33,24,0)); }
.nav-sub a::before { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #2A2118; flex-shrink: 0; transition: background .2s ease, box-shadow .2s ease; z-index: 1; }
.nav-sub a:hover { color: #F5EFE6; background: rgba(42,33,24,.35); }
.nav-sub a:hover::before { background: #8A5A2B; }
.nav-sub a.active { color: #FFD27A; border-left-color: #F0A04B;
  background: linear-gradient(90deg, rgba(240,160,75,.12), transparent 70%); }
.nav-sub a.active::before { background: #F0A04B; box-shadow: 0 0 8px rgba(240,160,75,.9); }
.sidebar-collapsed .nav-sub { max-height: 0 !important; }
.nav-sub .nav-label { transition: opacity .2s ease; }

/* ---------- Fortschritt: dezent glühende Balken ----------
   Ein ruhiger Glüh-Puls, ein langsamer Schimmer-Lauf und eine
   warme Spitze — sichtbar lebendig, nie unruhig. */
.bar { background: #2A2118; border-radius: 9999px; overflow: hidden; position: relative; }
.bar > i { display: block; height: 100%; border-radius: 9999px; position: relative;
  background: linear-gradient(90deg, #8A5A2B, #F0A04B 60%, #FFD27A);
  transition: width 1.1s cubic-bezier(.25,.7,.3,1);
  box-shadow: 0 0 8px rgba(240,160,75,.35), 0 0 18px rgba(240,160,75,.14);
  animation: barGlow 3.6s ease-in-out infinite; }
.bar > i::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,236,200,.55) 50%, transparent 70%);
  background-size: 240% 100%; background-position: 130% 0; opacity: .5;
  animation: barSheen 5.2s ease-in-out infinite; }
.bar > i::before { content: ""; position: absolute; right: -2px; top: 50%; width: 12px; height: 12px;
  transform: translateY(-50%); border-radius: 9999px; pointer-events: none;
  background: radial-gradient(circle, rgba(255,225,170,.9), rgba(240,160,75,0) 70%); }
@keyframes barGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(240,160,75,.35), 0 0 18px rgba(240,160,75,.14); }
  50%      { box-shadow: 0 0 13px rgba(240,160,75,.6), 0 0 30px rgba(240,160,75,.26); } }
@keyframes barSheen {
  0%       { background-position: 130% 0; }
  55%,100% { background-position: -110% 0; } }

/* Hero-Variante: dominanter, glüht stärker und SPRÜHT an der Spitze */
.bar-hero { background: #201810; box-shadow: inset 0 1px 4px rgba(0,0,0,.6), 0 0 0 1px rgba(240,160,75,.18); }
.bar-hero > i { animation: barGlowHero 2.6s ease-in-out infinite; overflow: visible; }
.bar-hero > i::after { opacity: .75; animation-duration: 3.6s; }
@keyframes barGlowHero {
  0%, 100% { box-shadow: 0 0 12px rgba(240,160,75,.55), 0 0 30px rgba(240,160,75,.25); }
  50%      { box-shadow: 0 0 20px rgba(255,190,100,.85), 0 0 48px rgba(240,160,75,.4); } }
.bar-funken { position: absolute; right: 0; top: 50%; width: 0; height: 0; pointer-events: none; }
.bar-funken b { position: absolute; left: 0; top: 0; width: 4px; height: 4px; border-radius: 50%;
  background: #FFE2AA; box-shadow: 0 0 8px rgba(255,190,90,.95);
  opacity: 0; animation: funkenFlug var(--fd, 1.9s) ease-out infinite; animation-delay: var(--fw, 0s); }
@keyframes funkenFlug {
  0%   { transform: translate(-2px, -2px) scale(1); opacity: 0; }
  10%  { opacity: .95; }
  100% { transform: translate(var(--fx, 18px), var(--fy, -14px)) scale(.25); opacity: 0; } }

/* Dashboard: Karten anfassen und anordnen */
[data-card] { touch-action: manipulation; }
[data-card] .drag-grip { position: absolute; top: .6rem; right: .75rem; color: #5c5142;
  opacity: 0; transition: opacity .25s ease, color .25s ease; cursor: grab;
  font-size: 15px; letter-spacing: 1px; line-height: 1; }
[data-card]:hover .drag-grip { opacity: .9; }
[data-card]:hover .drag-grip:hover { color: #F0A04B; }
[data-card].dragging { opacity: .55; outline: 2px dashed rgba(240,160,75,.7); outline-offset: 3px;
  transform: scale(.985); z-index: 20; }
[data-card].drop-target { outline: 2px solid rgba(240,160,75,.55); outline-offset: 3px; }

/* Gradient-Text für große Zahlen */
.grad { background: linear-gradient(92deg, #F0A04B 10%, #FFD27A 55%, #F6E7C9);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Shine-Karten (Belohnung/Premium) */
.shine { position: relative; overflow: hidden; }
.shine::after { content: ""; position: absolute; inset: -150% auto auto -60%;
  width: 45%; height: 400%; transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255,210,122,.14), transparent);
  transition: left .8s ease; left: -60%; }
.shine:hover::after { left: 130%; }

/* Tier-Akzente */
.tier { border-top: 3px solid var(--tc, #F0A04B); }
.t-copper { --tc: #C77B4F; } .t-amber { --tc: #F0A04B; }
.t-gold { --tc: #FFD27A; } .t-plat { --tc: #F6E7C9; }

/* Aufgaben */
.task { transition: border-color .3s ease; }
.task.done { border-color: rgba(240,160,75,.4); }
.task.done .task-label { color: #8A5A2B; text-decoration: line-through; }
.checkbox { width: 1.35rem; height: 1.35rem; border: 1.5px solid #2A2118; border-radius: 6px;
  display: grid; place-items: center; color: transparent; flex-shrink: 0;
  transition: all .3s ease; cursor: pointer; background: #060402; }
.task.done .checkbox { background: #F0A04B; border-color: #F0A04B; color: #060402; }

/* Pfad-Knoten */
.node { transition: box-shadow .4s ease; }
.node.done { background: #F0A04B; color: #060402; }
.node.current { background: #14100B; color: #F0A04B; border-color: #F0A04B;
  animation: nodepulse 3s ease-in-out infinite; }
.node.locked { background: #0D0A06; color: #5c5142; }
@keyframes nodepulse { 0%,100% { box-shadow: 0 0 18px rgba(240,160,75,.3); } 50% { box-shadow: 0 0 34px rgba(240,160,75,.6); } }

/* Toast */
#toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60;
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform .4s ease, opacity .4s ease; }
#toast.show { transform: none; opacity: 1; }

.badgeitem { transition: transform .3s ease, box-shadow .3s ease; }
.badgeitem.earned:hover { transform: translateY(-3px); box-shadow: 0 8px 40px rgba(240,160,75,.25); }
.badgeitem.locked { filter: grayscale(.4); opacity: .55; }

input[type=range] { accent-color: #F0A04B; }

/* ---------- Prestige-Medaillen (Edelmetall-Stufen) ---------- */
.medal {
  width: 72px; height: 72px; border-radius: 9999px;
  display: grid; place-items: center; position: relative; margin: 0 auto;
  box-shadow: inset 0 3px 7px rgba(255,255,255,.5), inset 0 -7px 12px rgba(0,0,0,.5),
              0 0 0 3px var(--ring), 0 10px 30px var(--glowc);
  transition: transform .35s ease, box-shadow .35s ease;
}
.medal-gold   { background: radial-gradient(circle at 32% 26%, #FFF3C9, #FFD27A 38%, #D4AF37 64%, #8F6B1F 90%);
                --ring: rgba(212,175,55,.55); --glowc: rgba(212,175,55,.38); color: #3d2c05; }
.medal-silver { background: radial-gradient(circle at 32% 26%, #FFFFFF, #DDE3EA 40%, #9AA6B4 68%, #5C6673 92%);
                --ring: rgba(154,166,180,.5); --glowc: rgba(154,166,180,.3); color: #232b33; }
.medal-bronze { background: radial-gradient(circle at 32% 26%, #FFDDBE, #D89A6A 40%, #A05C33 70%, #5E3419 92%);
                --ring: rgba(199,123,79,.5); --glowc: rgba(199,123,79,.32); color: #3a1d0c; }
.medal-locked { background: radial-gradient(circle at 32% 26%, #1C1712, #0D0A06 72%);
                --ring: rgba(42,33,24,.9); --glowc: transparent; color: #5c5142; }
.badgeitem.earned:hover .medal { transform: scale(1.07) rotate(-2deg); }
.medal-xl { width: 116px; height: 116px; }

/* ---------- Anker-Ziffern: große Kontur-Zahlen als Blickfang ---------- */
.anchor-num {
  position: absolute; top: -1.2rem; right: 0; line-height: 1; pointer-events: none;
  font-family: Orbitron, sans-serif; font-weight: 900;
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  color: transparent; -webkit-text-stroke: 1.5px rgba(240,160,75,.22);
}

/* ---------- Schmiede: Fokus-Ring + Verdunkelung ---------- */
.ring-track { stroke: #2A2118; }
.ring-fill  { stroke: url(#ringGrad); stroke-linecap: round;
              transition: stroke-dashoffset 1s linear; }
body.forging .dimmable { opacity: .18; pointer-events: none; filter: saturate(.4); transition: opacity .6s ease; }
.dimmable { transition: opacity .6s ease; }
.signal-slot.filled { border-color: rgba(240,160,75,.5); box-shadow: 0 0 30px rgba(240,160,75,.12); }

/* ---------- Ehrenhalle: epische Rang-Stufen ---------- */
.tiercard { position: relative; border-radius: 14px; overflow: hidden; padding: 2rem 1.25rem 1.5rem;
            text-align: center; border: 1px solid #2A2118; }
.tiercard.current { box-shadow: 0 0 0 2px rgba(240,160,75,.6), 0 0 70px rgba(240,160,75,.25); }
.tc-bronze  { background: radial-gradient(circle at 50% 92%, rgba(255,110,40,.28), transparent 55%),
              linear-gradient(180deg, #171009, #0A0503); border-color: #5E3419; }
.tc-silver  { background: radial-gradient(circle at 50% 15%, rgba(150,185,220,.16), transparent 55%),
              linear-gradient(180deg, #0D1319, #05080C); border-color: #3A4652; }
.tc-gold    { background: radial-gradient(circle at 50% 95%, rgba(255,170,50,.4), transparent 60%),
              radial-gradient(circle at 50% 40%, rgba(255,205,110,.14), transparent 55%),
              linear-gradient(180deg, #1A1206, #0B0602); border-color: #8F6B1F; }
.tc-platin  { background: radial-gradient(circle at 78% 8%, rgba(200,225,255,.16), transparent 45%),
              linear-gradient(180deg, #0B1017, #04070B); border-color: #55616E; }
.tc-diamant { background:
              radial-gradient(circle at 30% 25%, rgba(150,120,255,.14), transparent 45%),
              radial-gradient(circle at 72% 70%, rgba(80,200,255,.12), transparent 45%),
              linear-gradient(180deg, #0B0812, #040308); border-color: #4A4460; }
.tc-astra   { background:
              radial-gradient(circle at 50% 10%, rgba(255,190,90,.22), transparent 50%),
              radial-gradient(circle at 22% 80%, rgba(140,90,255,.16), transparent 45%),
              radial-gradient(circle at 80% 75%, rgba(255,120,60,.14), transparent 45%),
              linear-gradient(180deg, #140B14, #070308); border-color: #8F6B1F; }

.estar { width: 104px; height: 104px; margin: 0 auto 1rem; position: relative; }
.estar svg { width: 100%; height: 100%; }
.tc-gold .estar   { filter: drop-shadow(0 0 16px rgba(255,175,60,.75)); animation: flamebreath 2.8s ease-in-out infinite; }
.tc-bronze .estar { filter: drop-shadow(0 0 10px rgba(255,120,40,.4)); }
.tc-silver .estar { filter: drop-shadow(0 0 10px rgba(160,195,230,.4)); }
.tc-platin .estar { filter: drop-shadow(0 0 12px rgba(190,220,255,.5)); animation: stormflicker 6s linear infinite; }
.tc-diamant .estar{ filter: drop-shadow(0 0 14px rgba(160,190,255,.55)); animation: prismshift 9s linear infinite; }
.tc-astra .estar  { filter: drop-shadow(0 0 18px rgba(255,190,90,.7)); animation: flamebreath 3.4s ease-in-out infinite; }
@keyframes flamebreath { 0%,100% { filter: drop-shadow(0 0 12px rgba(255,175,60,.55)); }
                         50%     { filter: drop-shadow(0 0 26px rgba(255,200,110,.95)); } }
@keyframes stormflicker { 0%,88%,100% { filter: drop-shadow(0 0 12px rgba(190,220,255,.5)); }
                          90%,94% { filter: drop-shadow(0 0 26px rgba(230,245,255,.95)); }
                          92%     { filter: drop-shadow(0 0 8px rgba(190,220,255,.3)); } }
@keyframes prismshift { from { filter: drop-shadow(0 0 14px rgba(160,190,255,.55)) hue-rotate(0deg); }
                        to   { filter: drop-shadow(0 0 14px rgba(160,190,255,.55)) hue-rotate(360deg); } }
.tiercard.locked .estar { filter: grayscale(.85) brightness(.55); animation: none; }
.tiercard.locked { opacity: .62; }
.tiercard:hover:not(.locked) { transform: translateY(-4px); transition: transform .35s ease; }

/* ---------- Badge-Embleme (echte, freigestellte PNGs) ----------
   Bronze … Master. Die Grafiken haben produktionsbedingt einen hellen
   Saum. Zwei Tricks lassen ihn verschwinden statt auffallen:
   (1) ein WARMER ORANGE-POOL hinter dem Badge — dunkel am Rand der Karte,
       nach innen hell-orange. Der weiße Saum liegt dann in Licht, nicht
       im Kontrast, und liest sich als Leuchten.
   (2) beim Darüberfahren wächst das Badge (3D) und glüht auf. */
.badge-slot { position: relative; width: 88px; height: 88px; margin: 0 auto .5rem;
  display: grid; place-items: center; transition: transform .35s ease; }
/* äußerer, weicher Orange-Hof */
.badge-slot::before { content: ""; position: absolute; inset: -32%; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,190,95,.50) 0%, rgba(240,150,55,.30) 34%, rgba(200,110,40,.12) 55%, transparent 72%);
  filter: blur(11px); pointer-events: none; transition: opacity .35s ease, filter .35s ease; }
/* innerer, hellerer Kern direkt hinter dem Badge (kaschiert die Kante) */
.badge-slot::after { content: ""; position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,214,150,.45) 0%, rgba(255,180,90,.16) 45%, transparent 70%);
  pointer-events: none; transition: opacity .35s ease; }
.badge-emblem { position: relative; z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 5px 13px rgba(0,0,0,.55)); transition: filter .35s ease, transform .35s ease; }
.badge-slot.badge-xl { width: 128px; height: 128px; }
.badge-locked::before, .badge-locked::after { opacity: .12; }
.badge-locked .badge-emblem { filter: grayscale(.92) brightness(.42) drop-shadow(0 4px 10px rgba(0,0,0,.6)); opacity: .58; }

/* 3D-Hover: Badge wächst, glüht auf, Pool intensiviert */
.ach:hover .badge-slot, .tiercard:hover:not(.locked) .badge-slot { transform: scale(1.09) translateY(-2px); }
.ach:hover .badge-emblem, .tiercard:hover:not(.locked) .badge-emblem {
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,185,85,.9)); }
.ach:hover .badge-slot::before, .tiercard:hover:not(.locked) .badge-slot::before {
  opacity: 1; filter: blur(15px); }

/* Achievement-Karte: dezenter Hover-Lift + laufender Schimmer bei erreichten */
.ach { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ach:hover { transform: translateY(-3px); box-shadow: 0 12px 38px rgba(240,160,75,.2); border-color: rgba(240,160,75,.5); }
.ach-shine { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ach-shine::after { content: ""; position: absolute; top: -60%; left: -30%; width: 40%; height: 220%;
  transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,220,150,.10), transparent);
  animation: achShine 6s ease-in-out infinite; }
@keyframes achShine { 0% { left: -30%; } 55%, 100% { left: 130%; } }

/* ---------- Rang-Bilder: weiche Einbettung freigestellter PNGs ----------
   Die Original-Grafiken haben helle Ränder vom Freistellen. Drei Schichten
   kaschieren das: (1) JS entfernt Weiß mit weicher Alpha-Rampe,
   (2) ein warmer Glow-Hof hinter dem Bild lässt Restkanten als Lichtsaum
   wirken, (3) drop-shadow in Stufenfarbe schließt die Silhouette. */
.rang-bild { position: relative; width: 104px; height: 104px; margin: 0 auto 1rem;
             display: grid; place-items: center; }
.rang-bild::before { content: ""; position: absolute; inset: -16%; border-radius: 50%;
  background: radial-gradient(circle, var(--rglow, rgba(240,160,75,.34)) 0%, transparent 66%);
  filter: blur(8px); pointer-events: none; }
.rang-bild img, .rang-bild canvas { position: relative; max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.6)) drop-shadow(0 0 12px var(--rglow, rgba(240,160,75,.3))); }
.tc-bronze  .rang-bild { --rglow: rgba(230,120,60,.32); }
.tc-silver  .rang-bild { --rglow: rgba(175,200,230,.3); }
.tc-gold    .rang-bild { --rglow: rgba(255,185,70,.42); }
.tc-platin  .rang-bild { --rglow: rgba(200,225,255,.34); }
.tc-diamant .rang-bild { --rglow: rgba(150,190,255,.38); }
.tc-astra   .rang-bild { --rglow: rgba(255,190,90,.44); }
.tiercard.locked .rang-bild img, .tiercard.locked .rang-bild canvas {
  filter: grayscale(.85) brightness(.55) drop-shadow(0 6px 16px rgba(0,0,0,.6)); }
.tiercard.locked .rang-bild::before { opacity: .25; }
.rang-bild.rang-xl { width: 148px; height: 148px; }

/* ---------- Glut-Kalender: Wochenraster, Blöcke, Sperrzonen ---------- */
.cal-week { display: grid; grid-template-columns: 3.25rem repeat(7, minmax(0, 1fr)); }
.cal-hourlabel { font-size: 10px; color: #8A5A2B; text-align: right; padding-right: .5rem;
  transform: translateY(-.55em); font-family: 'Space Mono', monospace; }
.cal-col { position: relative; border-left: 1px solid #1C1610; }
.cal-col.is-today { background: rgba(240,160,75,.035); }
.cal-hline { position: absolute; left: 0; right: 0; border-top: 1px solid #17110B; pointer-events: none; }
.cal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(240,160,75,.85);
  z-index: 5; pointer-events: none; }
.cal-now::before { content: ""; position: absolute; left: -3px; top: -3.5px; width: 7px; height: 7px;
  border-radius: 50%; background: #F0A04B; box-shadow: 0 0 10px rgba(240,160,75,.9); }
.cal-ev { position: absolute; left: 3px; right: 3px; border-radius: 8px; padding: .3rem .5rem;
  font-size: 11px; line-height: 1.25; overflow: hidden; cursor: pointer; z-index: 3;
  border: 1px solid rgba(240,160,75,.45);
  background: linear-gradient(180deg, rgba(240,160,75,.16), rgba(240,160,75,.07)), #14100B;
  color: #F5EFE6; transition: box-shadow .25s ease, border-color .25s ease; }
.cal-ev:hover { border-color: #F0A04B; box-shadow: 0 0 18px rgba(240,160,75,.25); z-index: 6; }
/* Zonen (Fokus/Sperr) sind Hintergrund-Bänder: immer HINTER Terminen,
   fangen keine Maus ab — so bleiben davor gelegte Termine sichtbar & klickbar. */
.cal-ev[data-zone] { z-index: 1; pointer-events: none; }
.cal-ev .ev-time { font-family: 'Space Mono', monospace; font-size: 9px; color: #F0A04B; display: block; }
.cal-ev.ev-fokus { border-color: rgba(255,210,122,.55);
  background: linear-gradient(180deg, rgba(255,210,122,.2), rgba(240,160,75,.08)), #171106;
  box-shadow: inset 0 0 22px rgba(255,210,122,.08); }
.cal-ev.ev-fokus .ev-time { color: #FFD27A; }
.cal-ev.ev-sperr { border-color: rgba(176,163,146,.35); color: #B0A392; cursor: default;
  background: repeating-linear-gradient(135deg, rgba(176,163,146,.10) 0 6px, rgba(176,163,146,.03) 6px 12px), #0D0A06; }
.cal-ev.ev-sperr .ev-time { color: #B0A392; }
.cal-ev.ev-done { opacity: .55; }
.cal-ev.ev-done .ev-title { text-decoration: line-through; }
.cal-slot-hint { position: absolute; left: 3px; right: 3px; border-radius: 8px; z-index: 2;
  border: 1px dashed rgba(240,160,75,.55); background: rgba(240,160,75,.08); pointer-events: none; }
.cal-col.droppable { background: rgba(240,160,75,.05); cursor: copy; }
.planbox-item { cursor: grab; }
.planbox-item.is-picked { border-color: #F0A04B; box-shadow: 0 0 20px rgba(240,160,75,.3); }
.cal-day-head { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase; text-align: center; padding: .5rem 0; color: #B0A392; }
.cal-day-head.is-today { color: #F0A04B; }
.cal-day-head .d-num { display: block; font-family: Orbitron, sans-serif; font-size: 15px; letter-spacing: 0; }

/* Monats-Glutkarte */
.glut-day { position: relative; padding: .45rem 0; border-radius: 8px; cursor: default; }
.glut-day.hat-glut { color: #F0A04B; text-shadow: 0 0 12px rgba(240,160,75,.65); }
.glut-day.ist-heute { border: 1px solid #F0A04B; color: #F0A04B; }
.glut-day.hat-plan::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px;
  border-radius: 50%; background: #FFD27A; transform: translateX(-50%); }

/* ---------- Sektionen lebendiger: Ornamente + wechselnde Tönungen ---------- */
.orna { display: flex; align-items: center; gap: 1rem; margin: 0 auto; max-width: 16rem;
  color: rgba(240,160,75,.5); }
.orna::before, .orna::after { content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,160,75,.4)); }
.orna::after { background: linear-gradient(90deg, rgba(240,160,75,.4), transparent); }
.sec-tint-copper { background:
  radial-gradient(ellipse 80% 60% at 15% 0%, rgba(199,123,79,.07), transparent 60%), transparent; }
.sec-tint-gold { background:
  radial-gradient(ellipse 80% 60% at 85% 0%, rgba(255,210,122,.06), transparent 60%), transparent; }
.sec-tint-plat { background:
  radial-gradient(ellipse 70% 50% at 50% 100%, rgba(246,231,201,.05), transparent 60%), transparent; }

/* Glut-Funken (sehr dezent, JS-gesteuert) */
.embers { position: absolute; inset: 0; pointer-events: none; opacity: .5; }

/* ---------- Geflipptes Theme: Hell/Gold mit dunkler Schrift ----------
   Für ruhige Unterseiten (Impressum, Datenschutz): Pergament statt Nacht. */
body.theme-light { background: #F1E6CC; color: #4A3B27; }
body.theme-light::selection, body.theme-light ::selection { background: #8F6B1F; color: #F6E7C9; }
.theme-light .lp-panel { background: #FAF3E1; border-color: #D9C69C; }
.theme-light .lp-line { border-color: #D9C69C; }
.theme-light .lp-head { color: #1F1408; }
.theme-light .lp-accent { color: #8F6B1F; }
.theme-light .lp-muted { color: #8A7654; }
.theme-light a.lp-link { color: #8F6B1F; text-decoration: underline; text-underline-offset: 3px; }
.theme-light a.lp-link:hover { color: #6E5217; }
.theme-light .orna { color: rgba(143,107,31,.6); }
.theme-light .orna::before { background: linear-gradient(90deg, transparent, rgba(143,107,31,.45)); }
.theme-light .orna::after { background: linear-gradient(90deg, rgba(143,107,31,.45), transparent); }
.theme-light .platzhalter { background: rgba(143,107,31,.12); border: 1px dashed rgba(143,107,31,.5);
  border-radius: 6px; padding: 0 .35rem; font-weight: 500; color: #6E5217; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .bar > i, #toast { transition: none; }
  .bar > i, .bar > i::after { animation: none; }
  .bar-funken b { animation: none; }
  .nav-sub { transition: none; }
  .ach-shine { animation: none; }
  .node.current { animation: none; }
  .shine::after { display: none; }
  .tc-gold .estar, .tc-platin .estar, .tc-diamant .estar, .tc-astra .estar { animation: none; }
  .tiercard:hover:not(.locked) { transform: none; }
  .embers { display: none; }
  html { scroll-behavior: auto; }
}