/* Beispielseiten (eine Analyse in drei Formaten), Kaufvorteile (einzelne Symbole) und Kacheln "Alles auf einen Blick" (siehe showcase.js).
   Ruhezustand = fertige Grafik. Beim Darueberfahren (.live) wird das Symbol bzw. die Kachel groesser und die Grafik baut sich neu auf:
   Keyframes mit "from"-Zustand, Endzustand ist immer der normale CSS-Wert. Kein Inline-Style (CSP: style-src 'self'). */

/* ================================================================ Beispielseiten: eine Analyse, drei Formate */
.ex-lead { margin: var(--s2) 0 var(--s6); max-width: 60ch; color: var(--on-dark-muted); font-size: 1.0625rem; }
.ex-prog { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin: 0 0 var(--s7); padding: 0; }
.ex-prog li { position: relative; display: grid; gap: 3px; padding-top: 14px; cursor: pointer; opacity: .42; transition: opacity 500ms var(--ease); }
.ex-prog li:hover { opacity: .8; }
.ex-prog li.on { opacity: 1; }
.ex-prog .bars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ex-prog .bars i { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); overflow: hidden; position: relative; }
.ex-prog .bars i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan), #9ADBF4); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease); }
.ex-prog li.on .bars i::after { transform: scaleX(1); }
.ex-prog li.on .bars i:nth-child(2)::after { transition-delay: 200ms; }
.ex-prog b { margin-top: 8px; font-size: 1rem; color: #fff; font-weight: 600; }
.ex-prog small { color: var(--on-dark-muted); font-size: .8125rem; }

.ex-pane { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 4vw, 56px); padding: 0 0 var(--s5); }
.ex-pane[hidden] { display: none; }
.ex-pane .ex-card { flex: 0 1 46%; min-width: 0; display: block; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; cursor: zoom-in; animation: card-in 900ms var(--ease) both; }
.ex-pane .ex-card:nth-child(2) { margin-top: 56px; animation-delay: 160ms; }
.ex-pane.portrait .ex-card { flex-basis: 33%; }
.ex-pane .ex-card img { border-radius: 10px; box-shadow: 0 40px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .1); transition: transform 600ms var(--ease), box-shadow 600ms var(--ease); }
.ex-pane .ex-card:hover { transform: none; box-shadow: none; }
.ex-pane .ex-card:hover img { transform: translateY(-8px) scale(1.025); box-shadow: 0 56px 100px rgba(0, 0, 0, .55), 0 0 0 1px rgba(154, 219, 244, .45), 0 0 60px rgba(63, 167, 214, .25); }
@keyframes card-in { from { opacity: 0; transform: translateY(40px) scale(.94); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.ex-card .cap { display: flex; align-items: baseline; gap: 10px; justify-content: center; padding: 14px 8px 4px; border: 0; background: none; color: var(--on-dark-muted); font-size: .875rem; }
.ex-card .cap em { font: 600 .75rem var(--font-mono); font-style: normal; color: var(--cyan); letter-spacing: .08em; }
.ex-card:hover .cap { color: #fff; }

/* ================================================================ Kaufvorteile: Symbole */
.perk { overflow: visible; }
.perk:hover { transform: none; box-shadow: var(--shadow-1); }
.sym { position: relative; margin-top: auto; transform-origin: 50% 100%; transition: transform 520ms var(--ease), box-shadow 520ms var(--ease); }
.sym:hover, .sym.live { transform: scale(1.12); z-index: 8; }
.sym-dash:hover, .sym-dash.live { transform: scale(1.05); }
html .perk-small .sym { cursor: default; }

/* Dashboard */
.sym-dash { display: flex; gap: 10px; padding: 12px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.sym-dash.live { box-shadow: inset 0 0 0 1px var(--line), 0 26px 56px rgba(15, 27, 45, .22); background: #fff; }
.md-side { width: 34px; display: grid; gap: 8px; align-content: start; padding-top: 4px; }
.md-side i { height: 8px; border-radius: 4px; background: var(--line); }
.md-side i:first-child { background: var(--accent); }
.md-main { flex: 1; display: grid; gap: 10px; min-width: 0; }
.md-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.md-kpis span { background: #fff; border-radius: 9px; padding: 7px 9px; box-shadow: inset 0 0 0 1px var(--line); }
.md-kpis small { display: block; font-size: .625rem; color: var(--muted); }
.md-kpis b { display: block; font: 700 1.2rem/1.15 var(--font); color: var(--accent); }
.md-kpis b em { font-style: normal; }
.md-mid { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 10px; align-items: end; }
.md-chart { display: flex; align-items: flex-end; gap: 6px; height: 74px; padding-top: 14px; border-bottom: 1px solid var(--line); }
.md-chart i { position: relative; flex: 1; height: 30%; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--accent), var(--cyan)); transform-origin: bottom; }
.md-chart i:nth-child(2) { height: 46%; } .md-chart i:nth-child(3) { height: 38%; } .md-chart i:nth-child(4) { height: 62%; }
.md-chart i:nth-child(5) { height: 54%; } .md-chart i:nth-child(6) { height: 78%; } .md-chart i:nth-child(7) { height: 94%; }
.md-chart u { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); padding-bottom: 2px; font: 700 .625rem var(--font-mono); color: var(--accent-strong); text-decoration: none; opacity: 0; transition: opacity 300ms var(--ease) 500ms; }
.sym-dash.live .md-chart u { opacity: 1; }
.md-ring { width: 76px; height: 76px; }
.md-ring circle { fill: none; stroke-width: 8; transform: rotate(-90deg); transform-origin: 32px 32px; }
.md-ring .r0 { stroke: var(--line); }
.md-ring .r1 { stroke: var(--accent); stroke-dasharray: 72 28; }
.md-ring .r2 { stroke: var(--cyan); stroke-dasharray: 20 80; stroke-dashoffset: -75; }
.md-ring text { font: 700 13px var(--font); fill: var(--ink); }
.md-list { display: grid; gap: 5px; }
.md-list span { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: #fff; font-size: .6875rem; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); }
.md-list em { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.md-list s { margin-left: auto; width: 74px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.md-list s i { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--ok); transform-origin: left; }
.md-list span:last-child s i { width: 64%; background: var(--accent); }
.md-list u { text-decoration: none; padding: 1px 9px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-weight: 600; min-width: 46px; text-align: center; }
.md-list span:last-child em { background: var(--accent); animation: ping-s 1.4s ease-in-out infinite; }
.md-list span:last-child u { background: var(--accent-soft); color: var(--accent-strong); }
.sym-dash.live .md-chart i { animation: grow-y 780ms var(--ease) backwards; }
.sym-dash.live .md-chart i:nth-child(2) { animation-delay: 70ms; } .sym-dash.live .md-chart i:nth-child(3) { animation-delay: 140ms; } .sym-dash.live .md-chart i:nth-child(4) { animation-delay: 210ms; }
.sym-dash.live .md-chart i:nth-child(5) { animation-delay: 280ms; } .sym-dash.live .md-chart i:nth-child(6) { animation-delay: 350ms; } .sym-dash.live .md-chart i:nth-child(7) { animation-delay: 420ms; }
.sym-dash.live .md-ring .r1 { animation: ring-1 1100ms var(--ease) 150ms backwards; }
.sym-dash.live .md-ring .r2 { animation: ring-2 1100ms var(--ease) 500ms backwards; }
.sym-dash.live .md-kpis span { animation: pop-in 520ms var(--ease) backwards; }
.sym-dash.live .md-kpis span:nth-child(2) { animation-delay: 90ms; } .sym-dash.live .md-kpis span:nth-child(3) { animation-delay: 180ms; }
.sym-dash.live .md-list span { animation: slide-in-l 520ms var(--ease) backwards; }
.sym-dash.live .md-list span:nth-child(1) { animation-delay: 300ms; } .sym-dash.live .md-list span:nth-child(2) { animation-delay: 400ms; } .sym-dash.live .md-list span:nth-child(3) { animation-delay: 500ms; }
.sym-dash.live .md-list s i { animation: grow-x 900ms var(--ease) 500ms backwards; }
@keyframes ring-1 { from { stroke-dasharray: 0 100; } }
@keyframes ring-2 { from { stroke-dasharray: 0 100; } }

/* Unbegrenzte Aufbewahrung */
.sym-vault { height: 200px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: radial-gradient(circle at 50% 40%, var(--accent-soft), transparent 70%); }
.sym-vault.live { box-shadow: 0 24px 54px rgba(27, 95, 209, .26); background: radial-gradient(circle at 50% 40%, #D6E5FB, #F3F7FE 75%); }
.sym-vault .inf { font: 700 8rem/1 var(--font); background: linear-gradient(135deg, var(--accent), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: inf-pulse 4s ease-in-out infinite alternate; }
.sym-vault.live .inf { animation: inf-pop 900ms var(--ease) both; }
@keyframes inf-pulse { from { transform: scale(.94); } to { transform: scale(1.06); } }
@keyframes inf-pop { 0% { transform: scale(.55) rotate(-14deg); opacity: .2; } 60% { transform: scale(1.14) rotate(3deg); opacity: 1; } 100% { transform: scale(1.06); } }
.orb { position: absolute; left: 50%; top: 46%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--accent); animation: orbit 7s linear infinite; }
.orb.o2 { background: var(--cyan); animation-duration: 9s; animation-delay: -3s; width: 8px; height: 8px; }
.orb.o3 { background: var(--indigo); animation-duration: 11s; animation-delay: -6s; width: 7px; height: 7px; }
.sym-vault.live .orb { animation-duration: 2.4s; }
.sym-vault.live .orb.o2 { animation-duration: 3.2s; } .sym-vault.live .orb.o3 { animation-duration: 4s; }
@keyframes orbit { from { transform: rotate(0deg) translateX(120px) scaleY(.4); } to { transform: rotate(360deg) translateX(120px) scaleY(.4); } }
.vfiles { position: absolute; bottom: 12px; display: flex; gap: 8px; }
.vfiles b { width: 22px; height: 28px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent), 0 4px 10px rgba(27, 95, 209, .2); animation: file-up 3s ease-in-out infinite; }
.vfiles b:nth-child(2) { animation-delay: .3s; } .vfiles b:nth-child(3) { animation-delay: .6s; } .vfiles b:nth-child(4) { animation-delay: .9s; } .vfiles b:nth-child(5) { animation-delay: 1.2s; }
.sym-vault.live .vfiles b { animation: file-drop 700ms var(--ease) backwards, file-up 3s ease-in-out 900ms infinite; }
.sym-vault.live .vfiles b:nth-child(2) { animation-delay: 90ms, 900ms; } .sym-vault.live .vfiles b:nth-child(3) { animation-delay: 180ms, 900ms; }
.sym-vault.live .vfiles b:nth-child(4) { animation-delay: 270ms, 900ms; } .sym-vault.live .vfiles b:nth-child(5) { animation-delay: 360ms, 900ms; }
@keyframes file-up { 0%, 100% { transform: translateY(6px); opacity: .7; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes file-drop { from { transform: translateY(-120px) scale(.6); opacity: 0; } }

/* Token verfallen nicht */
.sym-cal { padding: 4px 0 0; }
.cal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cal-grid i { position: relative; height: 30px; border-radius: 8px; background: var(--accent-soft); }
.cal-grid i::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ok); font-weight: 700; }
.sym-cal.live .cal-grid i { animation: cal-fill 520ms var(--ease) backwards; }
.sym-cal.live .cal-grid i::after { animation: tick-pop 520ms var(--ease) backwards; }
.cal-grid i:nth-child(1), .cal-grid i:nth-child(1)::after { animation-delay: 0ms !important; } .cal-grid i:nth-child(2), .cal-grid i:nth-child(2)::after { animation-delay: 80ms !important; }
.cal-grid i:nth-child(3), .cal-grid i:nth-child(3)::after { animation-delay: 160ms !important; } .cal-grid i:nth-child(4), .cal-grid i:nth-child(4)::after { animation-delay: 240ms !important; }
.cal-grid i:nth-child(5), .cal-grid i:nth-child(5)::after { animation-delay: 320ms !important; } .cal-grid i:nth-child(6), .cal-grid i:nth-child(6)::after { animation-delay: 400ms !important; }
.cal-grid i:nth-child(7), .cal-grid i:nth-child(7)::after { animation-delay: 480ms !important; } .cal-grid i:nth-child(8), .cal-grid i:nth-child(8)::after { animation-delay: 560ms !important; }
.cal-grid i:nth-child(9), .cal-grid i:nth-child(9)::after { animation-delay: 640ms !important; } .cal-grid i:nth-child(10), .cal-grid i:nth-child(10)::after { animation-delay: 720ms !important; }
.cal-grid i:nth-child(11), .cal-grid i:nth-child(11)::after { animation-delay: 800ms !important; } .cal-grid i:nth-child(12), .cal-grid i:nth-child(12)::after { animation-delay: 880ms !important; }
@keyframes cal-fill { from { background: var(--line); transform: scale(.7); } }
@keyframes tick-pop { from { opacity: 0; transform: scale(.2); } }
.cal-tag { display: block; margin-top: 10px; font-size: .8125rem; font-weight: 600; color: var(--muted); }
.cal-tag em { font-style: normal; font-family: var(--font-mono); color: var(--accent); }

/* Pakete */
.sym-coins { display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; height: 118px; padding-top: 4px; }
.stack { position: relative; display: flex; flex-direction: column-reverse; align-items: center; width: 54px; padding-bottom: 28px; }
.stack i { width: 34px; height: 9px; margin-top: -3px; border-radius: 50%; background: radial-gradient(ellipse at 35% 30%, #7fb2f6, var(--accent)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4), 0 2px 3px rgba(27, 95, 209, .35); }
.stack b { position: absolute; bottom: 0; padding: 2px 11px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font: 700 .8125rem var(--font-mono); }
.stack.s25 i { background: radial-gradient(ellipse at 35% 30%, #7fd6ef, var(--cyan)); }
.stack.s10 i { background: radial-gradient(ellipse at 35% 30%, #8aa0f7, var(--indigo)); }
.sym-coins.live .stack i { animation: coin-drop 520ms var(--ease) backwards; }
.sym-coins.live .stack i:nth-child(1) { animation-delay: 0ms; } .sym-coins.live .stack i:nth-child(2) { animation-delay: 60ms; } .sym-coins.live .stack i:nth-child(3) { animation-delay: 120ms; }
.sym-coins.live .stack i:nth-child(4) { animation-delay: 180ms; } .sym-coins.live .stack i:nth-child(5) { animation-delay: 240ms; } .sym-coins.live .stack i:nth-child(6) { animation-delay: 300ms; }
.sym-coins.live .stack i:nth-child(7) { animation-delay: 360ms; } .sym-coins.live .stack i:nth-child(8) { animation-delay: 420ms; } .sym-coins.live .stack i:nth-child(9) { animation-delay: 480ms; }
.sym-coins.live .stack i:nth-child(10) { animation-delay: 540ms; } .sym-coins.live .stack i:nth-child(11) { animation-delay: 600ms; } .sym-coins.live .stack i:nth-child(12) { animation-delay: 660ms; }
@keyframes coin-drop { from { transform: translateY(-70px) scale(.7); opacity: 0; } 70% { transform: translateY(2px); } }
.sym-coins.live .stack b { animation: pop-in 500ms var(--ease) 200ms backwards; }

/* Rueckbuchung */
.sym-refund { height: 74px; display: flex; align-items: center; gap: 14px; transform-origin: 0 50%; }
.sym-refund svg { width: 52px; height: 52px; flex: none; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sym-refund.live svg { animation: spin-back 900ms var(--ease) both; }
@keyframes spin-back { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.rf-plus { font: 700 2.1rem/1 var(--font); color: var(--ok); }
.rf-plus em { font-style: normal; }
.sym-refund.live .rf-plus { animation: plus-pop 700ms var(--ease) 250ms both; }
@keyframes plus-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); } }
.rf-tag { padding: 4px 12px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: .75rem; font-weight: 700; opacity: .0; transform: translateX(-10px); transition: opacity 400ms var(--ease) 300ms, transform 400ms var(--ease) 300ms; }
.sym-refund.live .rf-tag { opacity: 1; transform: none; }

/* ================================================================ Kacheln: Hover vergroessert in Ort und Stelle */
.bento { align-items: stretch; }
.tile { min-height: 340px; cursor: default; }
.tile::after { height: 3px; }
html.js .tile[data-tile] { transition: opacity var(--t-slow) var(--ease), transform 520ms var(--ease), box-shadow 520ms var(--ease), border-color 520ms var(--ease); }
html.js .tile[data-tile].reveal.in:hover, html.js .tile[data-tile].live { transform: scale(1.07); z-index: 9; border-color: var(--accent); box-shadow: 0 34px 80px rgba(20, 73, 168, .28), 0 0 0 1px var(--accent); }
html.js .tile.tile-kpi.reveal.in:hover, html.js .tile.tile-kpi.live, html.js .tile.tile-macro.reveal.in:hover, html.js .tile.tile-macro.live { transform: scale(1.045); }
.tile:focus-visible { outline: none; box-shadow: var(--ring); }
.t-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.t-head p { margin-bottom: var(--s3); }
.t-pill { flex: none; padding: 5px 12px; border-radius: var(--r-pill); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.t-pill.up { background: var(--ok-soft); color: var(--ok); }
.t-pill em { font-style: normal; }
.tile.live .t-pill { animation: pop-in 560ms var(--ease) 600ms backwards; }

/* Fundamentaldaten */
.k-chart { position: relative; margin-top: auto; padding-top: 10px; }
.k-cap { position: absolute; left: 0; top: -4px; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.k-grid { position: absolute; left: 0; right: 0; top: 24px; height: 150px; display: grid; align-content: space-between; pointer-events: none; }
.k-grid u { display: block; height: 1px; background: var(--line); }
.k-bars { position: relative; display: flex; gap: 14px; height: 150px; margin: 24px 0 26px; }
.kb { position: relative; flex: 1; height: 100%; --bh: 27%; }
.kb:nth-child(2) { --bh: 51%; } .kb:nth-child(3) { --bh: 69%; } .kb:nth-child(4) { --bh: 70%; } .kb:nth-child(5) { --bh: 85%; } .kb:nth-child(6) { --bh: 99%; }
.kb i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bh); border-radius: 9px 9px 3px 3px; background: linear-gradient(180deg, var(--accent), var(--cyan)); transform-origin: bottom; }
.kb.proj i { background: repeating-linear-gradient(135deg, rgba(27, 95, 209, .85) 0 6px, rgba(63, 167, 214, .55) 6px 12px); }
.kv { position: absolute; left: 50%; bottom: calc(var(--bh) + 6px); transform: translateX(-50%); font: 700 .6875rem var(--font-mono); color: var(--muted); white-space: nowrap; transition: color 300ms var(--ease); }
.kv em { font-style: normal; }
.kb small { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: .6875rem; color: var(--muted); }
.tile.live .kv { color: var(--accent-strong); }
.tile.live .kb i { animation: grow-y 900ms var(--ease) backwards; }
.tile.live .kb:nth-child(2) i { animation-delay: 80ms; } .tile.live .kb:nth-child(3) i { animation-delay: 160ms; } .tile.live .kb:nth-child(4) i { animation-delay: 240ms; }
.tile.live .kb:nth-child(5) i { animation-delay: 320ms; } .tile.live .kb:nth-child(6) i { animation-delay: 400ms; }
.tile.live .kb .kv { animation: rise-in 600ms var(--ease) backwards; }
.tile.live .kb:nth-child(2) .kv { animation-delay: 80ms; } .tile.live .kb:nth-child(3) .kv { animation-delay: 160ms; } .tile.live .kb:nth-child(4) .kv { animation-delay: 240ms; }
.tile.live .kb:nth-child(5) .kv { animation-delay: 320ms; } .tile.live .kb:nth-child(6) .kv { animation-delay: 400ms; }

/* Umsatzallokation */
.d-wrap { position: relative; width: 140px; height: 140px; margin: 2px auto 10px; }
.viz-donut { width: 100%; height: 100%; margin: 0; animation: none; transition: none; }
.viz-donut circle { fill: none; stroke-width: 15; transform: rotate(-90deg); transform-origin: 60px 60px; }
.viz-donut .d0 { stroke: var(--line); }
.viz-donut .d1 { stroke: var(--accent); stroke-dasharray: 39.8 60.2; stroke-dashoffset: 0; }
.viz-donut .d2 { stroke: var(--cyan); stroke-dasharray: 25.8 74.2; stroke-dashoffset: -41; }
.viz-donut .d3 { stroke: var(--indigo); stroke-dasharray: 22.8 77.2; stroke-dashoffset: -68; }
.viz-donut .d4 { stroke: #A9B6CE; stroke-dasharray: 6.8 93.2; stroke-dashoffset: -92; }
.tile.live .viz-donut { animation: donut-spin 1300ms var(--ease) both; }
.tile.live .viz-donut .d1 { animation: seg-1 1000ms var(--ease) backwards; }
.tile.live .viz-donut .d2 { animation: seg-2 1000ms var(--ease) 180ms backwards; }
.tile.live .viz-donut .d3 { animation: seg-3 1000ms var(--ease) 360ms backwards; }
.tile.live .viz-donut .d4 { animation: seg-4 1000ms var(--ease) 540ms backwards; }
@keyframes donut-spin { from { transform: rotate(-90deg); } to { transform: rotate(0deg); } }
@keyframes seg-1 { from { stroke-dasharray: 0 100; } } @keyframes seg-2 { from { stroke-dasharray: 0 100; } }
@keyframes seg-3 { from { stroke-dasharray: 0 100; } } @keyframes seg-4 { from { stroke-dasharray: 0 100; } }
.d-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.d-center b { font: 700 1.5rem var(--font); letter-spacing: -.03em; color: var(--ink); }
.d-center em { font-style: normal; }
.d-center small { font-size: .6875rem; color: var(--muted); }
.d-leg { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .75rem; color: var(--muted); }
.d-leg li { display: flex; align-items: center; gap: 8px; }
.d-leg i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.d-leg .c1 { background: var(--accent); } .d-leg .c2 { background: var(--cyan); } .d-leg .c3 { background: var(--indigo); } .d-leg .c4 { background: #A9B6CE; }
.d-leg b { margin-left: auto; color: var(--ink); font-family: var(--font-mono); }
.d-leg em { font-style: normal; }
.tile.live .d-leg li { animation: slide-in-l 520ms var(--ease) backwards; }
.tile.live .d-leg li:nth-child(1) { animation-delay: 250ms; } .tile.live .d-leg li:nth-child(2) { animation-delay: 350ms; } .tile.live .d-leg li:nth-child(3) { animation-delay: 450ms; } .tile.live .d-leg li:nth-child(4) { animation-delay: 550ms; }

/* Peers und Analysten */
.p-rows { margin-top: auto; display: grid; gap: 8px; }
.p-cap { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pr { display: grid; grid-template-columns: 62px minmax(0, 1fr) 34px; align-items: center; gap: 8px; font-size: .75rem; color: var(--muted); }
.pr > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr s { display: block; height: 10px; border-radius: 5px; background: var(--neutral-soft); overflow: hidden; }
.pr s i { display: block; height: 100%; width: 81%; border-radius: 5px; background: #B6C3DA; transform-origin: left; }
.pr:nth-of-type(2) s i { width: 100%; } .pr:nth-of-type(3) s i { width: 88%; } .pr:nth-of-type(4) s i { width: 71%; }
.pr.me { color: var(--ink); font-weight: 700; }
.pr.me s i { background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.pr b { text-align: right; font: 700 .75rem var(--font-mono); color: var(--ink); }
.pr em { font-style: normal; }
.p-stack { display: flex; height: 24px; margin-top: 4px; border-radius: 8px; overflow: hidden; font-size: .625rem; font-weight: 700; color: #fff; }
.p-stack span { display: flex; align-items: center; padding: 0 8px; white-space: nowrap; transform-origin: left; }
.p-stack b { margin-right: 3px; font: inherit; }
.p-stack .g { flex: 12; background: var(--ok); } .p-stack .m { flex: 8; background: #D79A1F; } .p-stack .r { flex: 2; background: var(--err); justify-content: center; padding: 0; }
.tile.live .pr s i { animation: grow-x 900ms var(--ease) backwards; }
.tile.live .pr:nth-of-type(2) s i { animation-delay: 100ms; } .tile.live .pr:nth-of-type(3) s i { animation-delay: 200ms; } .tile.live .pr:nth-of-type(4) s i { animation-delay: 300ms; }
.tile.live .p-stack span { animation: grow-x 800ms var(--ease) 450ms backwards; }
.tile.live .p-stack .m { animation-delay: 560ms; } .tile.live .p-stack .r { animation-delay: 670ms; }

/* Makro-Wirkungsleiste */
.m-grid { margin-top: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.mf { position: relative; display: grid; gap: 6px; padding: 12px 10px 10px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.mf .mg { justify-self: start; min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); display: grid; place-items: center; font-size: .6875rem; font-weight: 700; }
.mf.up .mg { background: var(--ok-soft); color: var(--ok); } .mf.neu .mg { background: var(--neutral-soft); color: var(--neutral-ink); } .mf.nb .mg { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.mf b { font-size: .875rem; }
.mm { display: flex; gap: 3px; }
.mm i { flex: 1; height: 8px; border-radius: 3px; background: #DCE2EC; }
.mm i:nth-child(-n+2) { background: #F0D5D2; } .mm i:nth-child(n+4) { background: #CDE9DD; }
.mm i.on { transform: scaleY(1.7); background: var(--accent); box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(27, 95, 209, .5); }
.mf.up .mm i.on { background: var(--ok); box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(12, 122, 87, .5); }
.mf.neu .mm i.on { background: var(--neutral-ink); box-shadow: 0 0 0 2px #fff; }
.mf small { font-size: .6875rem; color: var(--muted); line-height: 1.25; }
.mf small em { font-style: normal; font-weight: 700; color: var(--ink); }
.tile.live .mf { animation: pop-in 560ms var(--ease) backwards; }
.tile.live .mf:nth-child(2) { animation-delay: 90ms; } .tile.live .mf:nth-child(3) { animation-delay: 180ms; } .tile.live .mf:nth-child(4) { animation-delay: 270ms; } .tile.live .mf:nth-child(5) { animation-delay: 360ms; }
.tile.live .mm i { animation: cell-in 420ms var(--ease) backwards; }
.tile.live .mf:nth-child(1) .mm i { animation-delay: 250ms; } .tile.live .mf:nth-child(2) .mm i { animation-delay: 340ms; } .tile.live .mf:nth-child(3) .mm i { animation-delay: 430ms; }
.tile.live .mf:nth-child(4) .mm i { animation-delay: 520ms; } .tile.live .mf:nth-child(5) .mm i { animation-delay: 610ms; }
.tile.live .mm i.on { animation: cell-on 700ms var(--ease) 700ms backwards; }
@keyframes cell-in { from { opacity: 0; transform: scaleY(.2); } }
@keyframes cell-on { 0% { transform: scaleY(1); } 55% { transform: scaleY(2.3); } 100% { transform: scaleY(1.7); } }

/* Unternehmensgeschichte */
.h-list { position: relative; margin: auto 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.h-list::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--cyan)); transform-origin: top; }
.h-list li { position: relative; display: grid; grid-template-columns: 16px 42px minmax(0, 1fr); align-items: center; gap: 8px; font-size: .8125rem; }
.h-list i { width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 3px var(--accent); position: relative; z-index: 1; }
.h-list b { font: 700 .8125rem var(--font-mono); color: var(--ink); }
.h-list span { color: var(--muted); }
.h-list .turn i { box-shadow: inset 0 0 0 3px var(--err); } .h-list .turn span { color: var(--err); font-weight: 600; }
.h-list .now i { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .h-list .now span { color: var(--ok); font-weight: 600; }
.tile.live .h-list::before { animation: grow-y-top 1100ms var(--ease) backwards; }
.tile.live .h-list li { animation: slide-in-l 520ms var(--ease) backwards; }
.tile.live .h-list i { animation: pop-in 520ms var(--ease) backwards; }
.tile.live .h-list li:nth-child(1), .tile.live .h-list li:nth-child(1) i { animation-delay: 150ms; } .tile.live .h-list li:nth-child(2), .tile.live .h-list li:nth-child(2) i { animation-delay: 400ms; }
.tile.live .h-list li:nth-child(3), .tile.live .h-list li:nth-child(3) i { animation-delay: 650ms; } .tile.live .h-list li:nth-child(4), .tile.live .h-list li:nth-child(4) i { animation-delay: 900ms; }
.tile.live .h-list .now i { animation: pop-in 520ms var(--ease) 900ms backwards, ping-ring 1.6s ease-out 1.5s infinite; }
@keyframes ping-ring { 0% { box-shadow: 0 0 0 0 rgba(12, 122, 87, .5); } 100% { box-shadow: 0 0 0 10px rgba(12, 122, 87, 0); } }
@keyframes grow-y-top { from { transform: scaleY(0); } }

/* Quellen */
.s-list { margin-top: auto; display: grid; gap: 8px; }
.sr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: .75rem; font-weight: 600; }
.sr i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); color: #fff; font-size: .6875rem; font-style: normal; }
.sr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr u { text-decoration: none; padding: 1px 9px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: .6875rem; }
.sr.gap { background: #FFF8EC; box-shadow: inset 0 0 0 1px #F3D9A6; }
.sr.gap i { background: #D79A1F; } .sr.gap u { background: #FBE9C5; color: var(--warn); }
.tile.live .sr { animation: slide-in-l 560ms var(--ease) backwards; }
.tile.live .sr:nth-child(1) { animation-delay: 80ms; } .tile.live .sr:nth-child(2) { animation-delay: 230ms; } .tile.live .sr:nth-child(3) { animation-delay: 380ms; } .tile.live .sr:nth-child(4) { animation-delay: 530ms; }
.tile.live .sr i { animation: pop-in 480ms var(--ease) backwards; }
.tile.live .sr:nth-child(1) i { animation-delay: 240ms; } .tile.live .sr:nth-child(2) i { animation-delay: 390ms; } .tile.live .sr:nth-child(3) i { animation-delay: 540ms; } .tile.live .sr:nth-child(4) i { animation-delay: 690ms; }

/* gemeinsame Bausteine */
@keyframes ping-s { 50% { transform: scale(1.6); opacity: .5; } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.55); } }
@keyframes rise-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes slide-in-l { from { opacity: 0; transform: translateX(-16px); } }

@media (max-width: 900px) {
}
@media (max-width: 640px) {
  .ex-pane { flex-direction: column; align-items: center; } .ex-pane .ex-card, .ex-pane.portrait .ex-card { flex-basis: auto; width: 100%; max-width: 420px; } .ex-pane .ex-card:nth-child(2) { margin-top: 0; }
  .ex-prog { gap: var(--s3); } .ex-prog small { display: none; }
  .kb { --bh: 27%; } .k-bars { gap: 8px; }
  .md-mid { grid-template-columns: 1fr; } .md-ring { display: none; }
  .orb { display: none; }
}

/* ================================================================ Ruhezustand (Skelett) und starke Hervorhebung beim Hover */
.sym, .tile .k-chart, .tile .d-wrap, .tile .d-leg, .tile .p-rows, .tile .m-grid, .tile .h-list, .tile .s-list { transition: filter 600ms var(--ease), opacity 600ms var(--ease), transform 520ms var(--ease), box-shadow 520ms var(--ease); }
.sym:not(.live) { filter: grayscale(1); opacity: .7; }
.tile:not(.live) .k-chart, .tile:not(.live) .d-wrap, .tile:not(.live) .d-leg, .tile:not(.live) .p-rows, .tile:not(.live) .m-grid, .tile:not(.live) .h-list, .tile:not(.live) .s-list { filter: grayscale(1); opacity: .6; }
.sym:not(.live) .md-kpis b, .sym:not(.live) .md-chart u, .sym:not(.live) .md-ring text, .sym:not(.live) .stack b, .sym:not(.live) .rf-plus, .sym:not(.live) .cal-tag, .sym:not(.live) .rf-tag { opacity: 0; }
.sym .md-kpis b, .sym .md-ring text, .sym .stack b, .sym .rf-plus, .sym .cal-tag { transition: opacity 500ms var(--ease) 300ms; }
.sym:not(.live) .md-chart i { transform: scaleY(.2); }
.sym .md-chart i { transition: transform 700ms var(--ease); }
.sym:not(.live) .md-ring .r1, .sym:not(.live) .md-ring .r2 { stroke-dasharray: 0 100; }
.sym .md-ring .r1, .sym .md-ring .r2 { transition: stroke-dasharray 900ms var(--ease); }
.sym:not(.live) .md-list s i { transform: scaleX(.1); }
.sym .md-list s i { transition: transform 800ms var(--ease); }
.sym:not(.live) .cal-grid i::after { opacity: 0; }
.sym:not(.live) .vfiles, .sym:not(.live) .orb { opacity: 0; }
.sym:not(.live) .stack i:nth-child(n+3) { opacity: 0; }
.tile:not(.live) .kv, .tile:not(.live) .t-pill, .tile:not(.live) .d-center b, .tile:not(.live) .d-leg b, .tile:not(.live) .pr b, .tile:not(.live) .p-stack, .tile:not(.live) .mf small, .tile:not(.live) .sr u, .tile:not(.live) .h-list span { opacity: 0; }
.tile .kv, .tile .t-pill, .tile .d-center b, .tile .d-leg b, .tile .pr b, .tile .p-stack, .tile .mf small, .tile .sr u, .tile .h-list span { transition: opacity 500ms var(--ease) 350ms; }
.tile:not(.live) .kb i { transform: scaleY(.16); }
.tile .kb i { transition: transform 700ms var(--ease); }
.tile:not(.live) .pr s i { transform: scaleX(.07); }
.tile .pr s i { transition: transform 800ms var(--ease); }
.tile:not(.live) .mm i.on { transform: none; box-shadow: none; }
.tile:not(.live) .h-list::before { transform: scaleY(.12); }
.tile .h-list::before { transition: transform 900ms var(--ease); }
.tile:not(.live) .sr i { transform: scale(.7); }

/* Hervorhebung: das Objekt waechst deutlich, bekommt Rahmen und Schein, der Rest tritt zurueck */
html.js .tile[data-tile].reveal.in:hover, html.js .tile[data-tile].live { transform: scale(1.09); border-color: var(--accent); box-shadow: 0 40px 90px rgba(20, 73, 168, .34), 0 0 0 2px var(--accent), 0 0 50px rgba(63, 167, 214, .28); background: linear-gradient(170deg, #fff, #F3F8FF); }
html.js .tile.tile-kpi.reveal.in:hover, html.js .tile.tile-kpi.live, html.js .tile.tile-macro.reveal.in:hover, html.js .tile.tile-macro.live { transform: scale(1.05); }
html.js .bento:has(.tile.live) .tile[data-tile]:not(.live) { opacity: .45; filter: saturate(.5); transform: scale(.975); }
.tile.live h3 { color: var(--accent-strong); }
.tile h3 { transition: color 400ms var(--ease); }
.sym.live { transform: scale(1.16); box-shadow: 0 0 0 2px var(--accent), 0 30px 70px rgba(20, 73, 168, .32), 0 0 50px rgba(63, 167, 214, .3); border-radius: 16px; background-color: #fff; }
.sym-dash.live { transform: scale(1.07); }
.perk-grid:has(.sym.live) .perk:not(:has(.sym.live)) { opacity: .5; }
.perk { transition: opacity 500ms var(--ease); }

/* Die drei kleinen Vorteile: der ganze Block ist die Buehne. Er hebt sich leicht, das Symbol waechst IN seinem Platz vom kleinen Ruhezustand auf volle Groesse
   (nichts ragt ueber den Block hinaus, die Schrift bleibt unveraendert). */
.perk-small .sym { min-height: 124px; transform: scale(.7); transform-origin: 50% 100%; }
.perk-small .sym.live { transform: scale(1); box-shadow: none; background: none; }
.perk-small .sym-refund { transform-origin: 0 100%; }
.perk-small { transition: opacity 500ms var(--ease), transform 520ms var(--ease), box-shadow 520ms var(--ease), border-color 520ms var(--ease); }
html.js .perk-small.reveal.in:hover { transform: scale(1.035); z-index: 6; border-color: var(--accent); box-shadow: 0 30px 70px rgba(20, 73, 168, .26), 0 0 0 2px var(--accent), 0 0 44px rgba(63, 167, 214, .22); background: linear-gradient(170deg, #fff, #F3F8FF); }