/* Marketing-Website: Effekte und Simulationen. Jede Animation gehört zu einem Inhalt (Bestand, Steuer, Zahlung ...).
   Grundregel: Der Grundzustand ohne Animation ist der fertige Zustand. Animationen laufen nur mit .js und .go (Skript),
   bei "Reduzierte Bewegung" bleibt der fertige Zustand stehen. Nur transform und opacity werden animiert. */

/* ---------- Seitenübergänge und Lesefortschritt ---------- */
@view-transition { navigation: auto; }
.nav { view-transition-name: kopf; }
::view-transition-old(root) { animation: .18s ease both vt-aus; }
::view-transition-new(root) { animation: .32s cubic-bezier(.16, 1, .3, 1) both vt-ein; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@keyframes vt-aus { to { opacity: 0; } }
@keyframes vt-ein { from { opacity: 0; transform: translateY(10px); } }

.progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; background: var(--dot); transform: scaleX(0); transform-origin: left; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .progress { animation: lesen linear both; animation-timeline: scroll(root); }
}
@keyframes lesen { to { transform: scaleX(1); } }

/* ---------- Menü mit Dropdowns ---------- */
.nav-l { align-items: center; }
.nav-l details.mm { position: relative; }
.nav-l details.mm > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; font-weight: 550; font-size: 15px; color: var(--top-muted); cursor: pointer; transition: color .2s, background .2s; }
.nav-l details.mm > summary::-webkit-details-marker { display: none; }
.nav-l details.mm > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s; }
.nav-l details.mm[open] > summary, .nav-l details.mm > summary:hover { color: var(--top-ink); background: var(--top-field); }
.nav-l details.mm[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.mm-panel { position: absolute; left: 0; top: calc(100% + 10px); z-index: 50; width: min(620px, 92vw); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 10px; background: var(--top-field); border: 1px solid var(--top-line); border-radius: 16px; animation: mm-ein .24s cubic-bezier(.16, 1, .3, 1); }
.mm-panel.eng { width: min(340px, 92vw); grid-template-columns: minmax(0, 1fr); }
.mm-panel a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; text-decoration: none; color: var(--top-ink); font-weight: 600; font-size: 15px; transition: background .2s; }
.mm-panel a small { color: var(--top-muted); font-weight: 400; font-size: 13.5px; line-height: 1.35; }
.mm-panel a:hover, .mm-panel a[aria-current] { background: var(--top-line); }
@keyframes mm-ein { from { opacity: 0; transform: translateY(-8px); } }
@media (max-width: 960px) { .nav-l { display: none; } }

/* ---------- Einblenden mit Staffelung ---------- */
.js .rv { transition-delay: var(--d, 0s); }
.cards > :nth-child(2), .fk > :nth-child(2), .usp > :nth-child(2), .begr > :nth-child(2) { --d: .08s; }
.cards > :nth-child(3), .fk > :nth-child(3), .usp > :nth-child(3), .begr > :nth-child(3) { --d: .16s; }
.cards > :nth-child(4), .fk > :nth-child(4), .usp > :nth-child(4), .begr > :nth-child(4) { --d: .24s; }
.cards > :nth-child(5) { --d: .32s; } .cards > :nth-child(6) { --d: .40s; } .cards > :nth-child(n+7) { --d: .48s; }
.js .tile.rv.in, .js .card.rv.in { transition-delay: var(--d, 0s), var(--d, 0s), 0s; }
.js .tile.rv.in:hover, .js .card.rv.in:hover { transition-delay: 0s; }

/* Lichtkante an Verlinkungskarten, folgt dem Zeiger */
a.card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(31, 107, 79, .13), transparent 62%); opacity: 0; transition: opacity .25s; pointer-events: none; }
a.card:hover::before { opacity: 1; }
.cards.dkc a.card::before { background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(91, 196, 154, .16), transparent 62%); }

/* ---------- FAQ: sanftes Aufklappen ---------- */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .35s cubic-bezier(.16, 1, .3, 1), content-visibility .35s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* ---------- Kennzahlen: Linie zeichnet sich, Zahl zählt (Skript) ---------- */
.fk > div { position: relative; border-top: 0; }
.fk > div::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: left; }
.dk .fk > div::before { background: var(--dot); }
.js .fk > div::before { transform: scaleX(0); transition: transform .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }
.js .fk.in > div::before { transform: none; }

/* ---------- Ablauf: Schritte leuchten nacheinander auf ---------- */
.flow > li:nth-child(1) { --k: 0; } .flow > li:nth-child(2) { --k: 1; } .flow > li:nth-child(3) { --k: 2; } .flow > li:nth-child(4) { --k: 3; } .flow > li:nth-child(5) { --k: 4; }
.js .flow > li { opacity: .35; transform: translateY(10px); transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--k) * .22s); }
.js .flow > li::before { transition: transform .5s cubic-bezier(.16, 1, .3, 1) calc(var(--k) * .22s + .1s); transform: scale(.6); }
.js .flow.in > li { opacity: 1; transform: none; }
.js .flow.in > li::before { transform: none; }
.js .flow > li:not(:last-child)::after { opacity: 0; transition: opacity .4s ease calc(var(--k) * .22s + .25s); }
.js .flow.in > li:not(:last-child)::after { opacity: 1; }

/* ---------- Szenario: Zeitleiste füllt sich Zeile für Zeile ---------- */
.szen li:nth-child(1) { --k: 0; } .szen li:nth-child(2) { --k: 1; } .szen li:nth-child(3) { --k: 2; } .szen li:nth-child(4) { --k: 3; } .szen li:nth-child(5) { --k: 4; }
.js .szen li { opacity: .25; transform: translateX(-14px); transition: opacity .55s ease, transform .6s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--k) * .3s); }
.js .szen.in li { opacity: 1; transform: none; }
.js .szen time { transition: color .4s ease calc(var(--k) * .3s + .2s); color: var(--muted); }
.js .szen.in time { color: var(--accent); }
.js .dk .szen.in time { color: var(--dot); }

/* ---------- Gegenüberstellung: Kreuze erlöschen, Haken zeichnen sich ---------- */
.gegen .lst li:nth-child(1) { --k: 0; } .gegen .lst li:nth-child(2) { --k: 1; } .gegen .lst li:nth-child(3) { --k: 2; } .gegen .lst li:nth-child(4) { --k: 3; } .gegen .lst li:nth-child(5) { --k: 4; }
.js .gegen .lst svg path { stroke-dasharray: 32; stroke-dashoffset: 32; transition: stroke-dashoffset .6s ease calc(var(--k) * .15s + .3s); }
.js .gegen.in .lst svg path { stroke-dashoffset: 0; }
.js .gegen > div:first-child .lst li span { transition: color .6s ease calc(var(--k) * .15s + .6s), text-decoration-color .6s ease; }
.js .gegen.in > div:first-child .lst li span { color: var(--muted); }

/* ---------- Tabellen: Zeilen laufen ein ---------- */
.js .panel.rv tbody tr { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .5s cubic-bezier(.16, 1, .3, 1); }
.js .panel.rv.in tbody tr { opacity: 1; transform: none; }
.panel tbody tr:nth-child(1) { transition-delay: .1s !important; } .panel tbody tr:nth-child(2) { transition-delay: .17s !important; } .panel tbody tr:nth-child(3) { transition-delay: .24s !important; } .panel tbody tr:nth-child(4) { transition-delay: .31s !important; } .panel tbody tr:nth-child(5) { transition-delay: .38s !important; } .panel tbody tr:nth-child(n+6) { transition-delay: .45s !important; }
.panel tbody tr { transition: background .2s; } .panel tbody tr:hover td { background: var(--bg); }

/* ================= Simulationen und Szenen ================= */
.sim { background: var(--surface); }
.sim .btn.ghost { color: var(--ink); border-color: var(--line-strong); }
.sim-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; }

/* 1. Bestand zum Ausprobieren (Funktion Live-Bestand) */
.sb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sb-name b { font: 650 18px var(--disp); letter-spacing: -.02em; }
.sb-name span { margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.sb-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sb-status .dt { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); transition: background .3s; }
.sb-status[data-status="low"] .dt { background: var(--warn); }
.sb-status[data-status="out"] .dt { background: var(--out); }
.sb-stock { display: flex; align-items: baseline; gap: 14px; margin: 20px 0 12px; }
.sb-num { display: inline-block; min-width: 1.1ch; font: 600 64px/1 var(--mono); letter-spacing: -.04em; font-feature-settings: 'zero'; }
.sb-num.tick { animation: sb-tick .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes sb-tick { from { transform: translateY(-18px); opacity: 0; } }
.sb-lab { font-size: 14px; color: var(--muted); }
.sb-bar { height: 12px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.sb-bar i { display: block; height: 100%; border-radius: 4px; background: var(--ok); transition: width .55s cubic-bezier(.16, 1, .3, 1), background .3s; }
[data-s="low"] .sb-bar i { background: var(--warn); }
[data-s="out"] .sb-bar i { background: var(--out); }
.sb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sim .btn.sb { min-height: 44px; padding: 10px 16px; font-size: 14.5px; }
.sim .btn.sb:disabled { opacity: .4; cursor: not-allowed; }
.sb-reset { min-height: 44px; padding: 0 10px; background: none; border: 0; color: var(--muted); text-decoration: underline; font: inherit; font-size: 14.5px; cursor: pointer; }
.sb-log { list-style: none; padding: 0; margin: 14px 0 0; font: 500 13.5px/1.5 var(--mono); color: var(--muted); min-height: 5.5em; }
.sb-log li { padding: 6px 0; border-top: 1px dashed var(--line-strong); animation: sb-log .4s ease; }
@keyframes sb-log { from { opacity: 0; transform: translateY(-6px); } }

/* 2. Kundengruppen: Händler- und Privatansicht */
.gs-tabs { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1.5px solid var(--line-strong); border-radius: 10px; }
.gs-tabs::before { content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); background: var(--ink); border-radius: 7px; transition: transform .38s cubic-bezier(.16, 1, .3, 1); }
[data-gruppe="privat"] .gs-tabs::before { transform: translateX(100%); }
.gs-tabs button { position: relative; z-index: 1; min-height: 40px; padding: 0 20px; border: 0; background: none; border-radius: 7px; color: var(--ink); font: 650 14px 'Funnel Sans Variable', system-ui, sans-serif; cursor: pointer; transition: color .25s; }
.gs-tabs button[aria-pressed="true"] { color: var(--bg); }
.gs-view { display: grid; margin-top: 18px; }
.gs-view > div { grid-area: 1 / 1; transition: opacity .38s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
[data-gruppe="haendler"] .gs-p { opacity: 0; transform: translateY(10px); pointer-events: none; }
[data-gruppe="privat"] .gs-h { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.gs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 15px; }
.gs-row b { font: 600 18px/1 var(--mono); }
.gs-row small { color: var(--muted); font: 400 13px 'Funnel Sans Variable', system-ui, sans-serif; margin-left: 6px; }
.gs-zahl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.gs-row > span:last-child { white-space: nowrap; }
.gs-zahl .tag { color: var(--ink); }

/* 3. Lexware: Weg einer Bestellung (Szene) */
.lx-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); align-items: center; }
.lx-node { display: grid; gap: 4px; padding: 14px; border: 1.5px solid var(--accent); border-radius: 12px; background: #e1f2eb; }
.lx-node b { font: 650 16px/1.2 var(--disp); }
.lx-node em { font: 600 12.5px/1.2 'Funnel Sans Variable', system-ui, sans-serif; font-style: normal; color: var(--ok); }
.lx-line { position: relative; height: 2px; background: var(--line); overflow: hidden; }
.lx-line i { position: absolute; inset: 0; background: var(--accent); }
.go .n1 { animation: lx-n1 9s linear infinite; } .go .n2 { animation: lx-n2 9s linear infinite; } .go .n3 { animation: lx-n3 9s linear infinite; }
.go .l1 i { animation: lx-l1 9s linear infinite; } .go .l2 i { animation: lx-l2 9s linear infinite; }
@keyframes lx-n1 { 0%, 3% { border-color: var(--line); background: var(--bg); } 7%, 88% { border-color: var(--accent); background: #e1f2eb; } 94%, 100% { border-color: var(--line); background: var(--bg); } }
@keyframes lx-n2 { 0%, 24% { border-color: var(--line); background: var(--bg); } 29%, 88% { border-color: var(--accent); background: #e1f2eb; } 94%, 100% { border-color: var(--line); background: var(--bg); } }
@keyframes lx-n3 { 0%, 46% { border-color: var(--line); background: var(--bg); } 51%, 88% { border-color: var(--accent); background: #e1f2eb; } 94%, 100% { border-color: var(--line); background: var(--bg); } }
@keyframes lx-l1 { 0%, 8% { transform: scaleX(0); transform-origin: left; } 22%, 88% { transform: scaleX(1); transform-origin: left; } 94%, 100% { transform: scaleX(0); transform-origin: left; } }
@keyframes lx-l2 { 0%, 30% { transform: scaleX(0); transform-origin: left; } 44%, 88% { transform: scaleX(1); transform-origin: left; } 94%, 100% { transform: scaleX(0); transform-origin: left; } }
@media (max-width: 600px) { .lx-row { grid-template-columns: minmax(0, 1fr); gap: 0; } .lx-line { width: 2px; height: 22px; margin-left: 24px; } }

/* 4. Steuer: Positionen ordnen sich ihrer Steuerart zu */
.so { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; container-type: inline-size; }
.so-col { display: grid; grid-auto-rows: var(--zeile, 52px); gap: 10px; }
.so-item, .so-b { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-radius: 10px; font-size: 13px; line-height: 1.2; }
.so-item { position: relative; z-index: 2; width: 56%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 49px; padding: 0 10px; background: var(--surface); border: 1.5px solid var(--ink); transform: translate(calc(50cqw + 10px), var(--dy, 0px)); }
.so-b { border: 1.5px dashed var(--line-strong); background: var(--bg); }
.so-b { flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; text-align: right; }
.so-b b { font: 600 12px/1.2 var(--mono); color: var(--muted); text-align: right; }
.go .so-item { animation: so-fly 1.1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--k) * .55s + .3s); }
.go .so-b { animation: so-lit .7s ease both; animation-delay: calc(var(--k) * .55s + 1s); }
@keyframes so-fly { from { transform: none; } }
@keyframes so-lit { from { background: var(--bg); border-color: var(--line-strong); } }
.so-b { background: #e1f2eb; border-style: solid; border-color: var(--accent); }
.so .i1 { --k: 0; --dy: calc(var(--zeile, 52px) + 10px); } .so .i2 { --k: 1; --dy: calc(var(--zeile, 52px) + 10px); } .so .i3 { --k: 2; --dy: calc(-2 * (var(--zeile, 52px) + 10px)); }
.so .b1 { --k: 2; } .so .b2 { --k: 0; } .so .b3 { --k: 1; }

/* 5. Zahlung: derselbe Warenkorb mit Anbieter und per Überweisung */
.gb-lane { margin-bottom: 18px; }
.gb-lane h3 { font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.gb-track { position: relative; container-type: inline-size; height: 64px; display: flex; align-items: center; justify-content: space-between; }
.gb-track::before { content: ''; position: absolute; left: 70px; right: 70px; top: 50%; border-top: 2px dashed var(--line-strong); }
.gb-node { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 48px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--bg); font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; }
.gb-node.mid { position: absolute; left: calc(50% - 36px); }
.gb-node.sie { border-color: var(--accent); background: #e1f2eb; font: 600 14px/1.2 var(--mono); }
.gb-coin { position: absolute; z-index: 3; left: 10px; top: 4px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--bg); font: 600 13px/1 var(--mono); transform: translateX(calc(100cqw - 150px)); }
.gb-coin span { grid-area: 1 / 1; }
.gb-coin .zwei { opacity: 0; }
.lane-a .gb-coin .eins { opacity: 0; } .lane-a .gb-coin .zwei { opacity: 1; }
.gb-fee { position: absolute; z-index: 2; left: calc(50% - 30px); top: 0; padding: 3px 8px; border-radius: 6px; background: #fbe9e7; color: #b3261e; font: 600 12.5px/1.4 var(--mono); opacity: 0; transform: translateY(0); }
.go .lane-a .gb-coin { animation: gb-a 7s cubic-bezier(.45, 0, .2, 1) infinite; }
.go .lane-a .gb-coin .eins { animation: gb-eins 7s linear infinite; } .go .lane-a .gb-coin .zwei { animation: gb-zwei 7s linear infinite; }
.go .lane-a .gb-fee { animation: gb-fee 7s ease infinite; }
.go .lane-b .gb-coin { animation: gb-b 7s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes gb-a { 0%, 8% { transform: translateX(0); opacity: 1; } 38%, 46% { transform: translateX(calc(50cqw - 38px)); opacity: 1; } 76% { transform: translateX(calc(100cqw - 150px)); opacity: 1; } 86%, 100% { transform: translateX(calc(100cqw - 150px)); opacity: 0; } }
@keyframes gb-eins { 0%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes gb-zwei { 0%, 44% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes gb-fee { 0%, 42% { opacity: 0; transform: translateY(0); } 48% { opacity: 1; transform: translateY(0); } 70%, 100% { opacity: 0; transform: translateY(-26px); } }
@keyframes gb-b { 0%, 8% { transform: translateX(0); opacity: 1; } 70% { transform: translateX(calc(100cqw - 150px)); opacity: 1; } 82%, 100% { transform: translateX(calc(100cqw - 150px)); opacity: 0; } }

/* 6. Vorbestellung: Kontingent wird gekürzt, die jüngsten Bestellungen sind nicht gedeckt */
.kc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; }
.kc i { position: relative; height: 40px; border-radius: 6px; background: var(--ok); }
.kc i:nth-child(n+11) { background: transparent; border: 1.5px dashed var(--line-strong); opacity: .35; }
.kc i:nth-child(n+9):nth-child(-n+10)::after { content: ''; position: absolute; inset: 0; border-radius: 6px; background: #b3261e; }
.kc-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.kc-leg span { display: inline-flex; align-items: center; gap: 7px; }
.kc-leg span::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--ok); }
.kc-leg .rot::before { background: #b3261e; }
.kc-t { display: grid; margin-bottom: 14px; font: 600 15px/1.3 var(--mono); }
.kc-t span { grid-area: 1 / 1; }
.kc-t .vor { opacity: 0; }
.go .kc i:nth-child(n+11) { animation: kc-ghost 10s linear infinite; }
.go .kc i:nth-child(n+9):nth-child(-n+10)::after { animation: kc-rot 10s linear infinite; }
.go .kc i:nth-child(1) { animation-name: kc-f1; } .go .kc i:nth-child(2) { animation-name: kc-f2; } .go .kc i:nth-child(3) { animation-name: kc-f3; } .go .kc i:nth-child(4) { animation-name: kc-f4; } .go .kc i:nth-child(5) { animation-name: kc-f5; } .go .kc i:nth-child(6) { animation-name: kc-f6; } .go .kc i:nth-child(7) { animation-name: kc-f7; } .go .kc i:nth-child(8) { animation-name: kc-f8; } .go .kc i:nth-child(9) { animation-name: kc-f9; } .go .kc i:nth-child(10) { animation-name: kc-f10; }
.go .kc-t .vor { animation: kc-vor 10s linear infinite; } .go .kc-t .nach { animation: kc-nach 10s linear infinite; }
@keyframes kc-f1 { 0%, 2% { background-color: transparent; } 5%, 90% { background-color: var(--ok); } 96%, 100% { background-color: transparent; } }
@keyframes kc-f2 { 0%, 5% { background-color: transparent; } 8%, 90% { background-color: var(--ok); } 96%, 100% { background-color: transparent; } }
@keyframes kc-f3 { 0%, 8% { background-color: transparent; } 11%, 90% { background-color: var(--ok); } 96%, 100% { background-color: transparent; } }
@keyframes kc-f4 { 0%, 11% { background-color: transparent; } 14%, 90% { background-color: var(--ok); } 96%, 100% { background-color: transparent; } }
@keyframes kc-f5 { 0%, 14% { background-color: transparent; } 17%, 90% { background-color: var(--ok); } 96%, 100% { background-color: transparent; } }
@keyframes kc-f6 { 0%, 17% { background-color: transparent; } 20%, 90% { background-color: var(--ok); } 96%, 100% { background-color: transparent; } }
@keyframes kc-f7 { 0%, 20% { background-color: transparent; } 23%, 90% { background-color: var(--ok); } 96%, 100% { background-color: transparent; } }
@keyframes kc-f8 { 0%, 23% { background-color: transparent; } 26%, 90% { background-color: var(--ok); } 96%, 100% { background-color: transparent; } }
@keyframes kc-f9 { 0%, 26% { background-color: transparent; } 29%, 90% { background-color: var(--ok); } 96%, 100% { background-color: transparent; } }
@keyframes kc-f10 { 0%, 29% { background-color: transparent; } 32%, 90% { background-color: var(--ok); } 96%, 100% { background-color: transparent; } }
@keyframes kc-rot { 0%, 52% { opacity: 0; } 58%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes kc-ghost { 0%, 50% { opacity: 1; } 58%, 90% { opacity: .35; } 96%, 100% { opacity: 1; } }
@keyframes kc-vor { 0%, 48% { opacity: 1; } 54%, 92% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes kc-nach { 0%, 48% { opacity: 0; } 54%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
.kc-t .vor { opacity: 0; } .kc-t .nach { opacity: 1; }

/* 7. Händler-Freigabe: Registrierung, Klick, Freigabe, erste Bestellung */
.fg { position: relative; }
.fg-card { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.fg-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fg-top b { font: 650 18px/1.2 var(--disp); }
.fg-chip { display: grid; font: 600 12.5px/1.4 'Funnel Sans Variable', system-ui, sans-serif; }
.fg-chip span { grid-area: 1 / 1; padding: 3px 8px; border-radius: 6px; text-align: center; }
.fg-chip .neu { background: #fbeed2; color: #7a4700; opacity: 0; } .fg-chip .ok { background: #e1f2eb; color: var(--ok); }
.fg-meta { font: 500 13.5px/1.5 var(--mono); color: var(--muted); margin-top: 6px; }
.fg-btns { display: flex; gap: 10px; margin-top: 14px; }
.fg-btns .btn { min-height: 44px; padding: 10px 18px; }
.fg-toast { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 10px; background: #e1f2eb; font-size: 14.5px; font-weight: 600; }
.fg-cursor { position: absolute; z-index: 3; left: 18px; top: 128px; width: 22px; height: 22px; color: var(--ink); opacity: 0; }
.go .fg-chip .neu { animation: fg-neu 10s linear infinite; } .go .fg-chip .ok { animation: fg-ok 10s linear infinite; }
.go .fg-btns .primar { animation: fg-press 10s linear infinite; }
.go .fg-toast { animation: fg-toast 10s ease infinite; }
.go .fg-cursor { animation: fg-cur 10s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes fg-neu { 0%, 4% { opacity: 0; } 8%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes fg-ok { 0%, 38% { opacity: 0; } 42%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes fg-press { 0%, 34% { transform: none; } 37% { transform: scale(.94); } 40%, 100% { transform: none; } }
@keyframes fg-toast { 0%, 50% { opacity: 0; transform: translateY(10px); } 58%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes fg-cur { 0%, 10% { opacity: 0; transform: translate(120px, 40px); } 14% { opacity: 1; transform: translate(120px, 40px); } 32%, 40% { opacity: 1; transform: translate(0, 0); } 46%, 100% { opacity: 0; transform: translate(0, 0); } }

/* 8. Trading-Card-Shop: Karten werden ausgespielt, Neigung folgt dem Zeiger */
.dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; perspective: 900px; }
.dc { position: relative; aspect-ratio: 5 / 7; transform: none; }
.dc-in { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 12px 10px; border-radius: 12px; color: #fff; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 8px), var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.dc-in b { font: 700 clamp(20px, 2.4vw, 30px)/1 var(--disp); letter-spacing: -.02em; }
.dc-in span { font: 600 11.5px/1.3 var(--mono); }
.dc-in small { font: 500 11px/1.3 'Funnel Sans Variable', system-ui, sans-serif; opacity: .85; }
.js .tile:not(.go) .dc { opacity: 0; transform: translate(calc((1 - var(--i)) * (100% + 10px)), 0) rotate(calc((var(--i) - 3) * 5deg)); }
.js .tile.go .dc { transition: transform .8s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .1s), opacity .3s ease calc(var(--i) * .1s); }
.dl .dc:nth-child(1) { --i: 1; } .dl .dc:nth-child(2) { --i: 2; } .dl .dc:nth-child(3) { --i: 3; } .dl .dc:nth-child(4) { --i: 4; } .dl .dc:nth-child(5) { --i: 5; }
@media (max-width: 560px) { .dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dl .dc:nth-child(n+4) { display: none; } }

/* 9. Festpreis-Bausteine auf der Startseite: je ein eigener Effekt */
.usp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.u { display: grid; grid-template-rows: 150px auto; gap: 16px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.u-v { display: grid; place-items: center; border-bottom: 1px dashed var(--line-strong); padding-bottom: 14px; }
.u h3 { font: 650 20px/1.2 var(--disp); letter-spacing: -.02em; margin: 0 0 6px; }
.u p { color: var(--muted); font-size: 15.5px; }
/* a) Balken wachsen mit dem Umsatz, die Festpreis-Linie bleibt */
.ub { position: relative; display: flex; align-items: flex-end; gap: 7px; width: 100%; height: 100px; }
.ub i { flex: 1; border-radius: 4px 4px 0 0; background: #e5a64a; height: var(--h); transform-origin: bottom; }
.ub::after { content: ''; position: absolute; left: 0; right: 0; bottom: 38px; height: 2.5px; background: var(--accent); transform-origin: left; }
.ub i:nth-child(1) { --h: 14%; } .ub i:nth-child(2) { --h: 24%; } .ub i:nth-child(3) { --h: 38%; } .ub i:nth-child(4) { --h: 52%; } .ub i:nth-child(5) { --h: 70%; } .ub i:nth-child(6) { --h: 92%; }
.js .u:not(.in) .ub i { transform: scaleY(0); } .js .u.in .ub i { transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.js .u.in .ub i:nth-child(2) { transition-delay: .1s; } .js .u.in .ub i:nth-child(3) { transition-delay: .2s; } .js .u.in .ub i:nth-child(4) { transition-delay: .3s; } .js .u.in .ub i:nth-child(5) { transition-delay: .4s; } .js .u.in .ub i:nth-child(6) { transition-delay: .5s; }
.js .u:not(.in) .ub::after { transform: scaleX(0); } .js .u.in .ub::after { transition: transform 1s cubic-bezier(.16, 1, .3, 1) .7s; }
/* b) Provision zählt auf null (Skript) */
.u-null { font: 600 clamp(48px, 5vw, 64px)/1 var(--mono); letter-spacing: -.04em; font-feature-settings: 'zero'; color: var(--accent); }
/* c) Gebühr löst sich vom Preis */
.u-preis { position: relative; display: grid; place-items: center; width: 130px; height: 70px; border: 1.5px solid var(--ink); border-radius: 10px; font: 600 28px/1 var(--mono); background: var(--bg); }
.u-preis em { position: absolute; right: -14px; top: -14px; padding: 3px 8px; border-radius: 6px; background: #fbe9e7; color: #b3261e; font: 600 12.5px/1.4 var(--mono); font-style: normal; opacity: 0; }
.go .u-preis em, .u.in .u-preis em { animation: u-fee 4.5s ease infinite; }
@keyframes u-fee { 0%, 12% { opacity: 0; transform: translate(-10px, 16px) scale(.8); } 24% { opacity: 1; transform: none; } 55% { opacity: 1; transform: translate(6px, -4px); } 80%, 100% { opacity: 0; transform: translate(26px, -40px) rotate(8deg); } }
/* d) eigene Adresse wird getippt */
.u-url { padding: 10px 14px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--bg); font: 500 15px/1.4 var(--mono); }
@media (max-width: 1100px) { .usp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .usp { grid-template-columns: minmax(0, 1fr); } .u { grid-template-rows: 130px auto; } }

/* ---------- Seiten für Orientierung ---------- */
.az { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 0; padding: 0; list-style: none; }
.az a { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; text-decoration: none; font: 600 14px var(--mono); transition: background .2s, color .2s; }
.az a:hover { background: var(--ink); color: var(--bg); }
.glos { margin: 36px 0 0; display: grid; gap: 0; max-width: 860px; }
.glos > div { padding: 22px 0; border-top: 1px dashed var(--line-strong); scroll-margin-top: 96px; }
.glos dt { font: 650 22px/1.2 var(--disp); letter-spacing: -.02em; }
.glos dd { margin: 8px 0 0; color: var(--muted); font-size: 17px; max-width: 68ch; }
.glos dd a { color: var(--accent); font-weight: 600; }
.glos > div:target { background: var(--surface); padding-inline: 16px; border-radius: 12px; }
.grp { margin-top: 44px; }
.grp h2 { font: 700 clamp(24px, 3vw, 32px)/1.1 var(--disp); letter-spacing: -.03em; margin: 0 0 12px; }
.uebs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px 40px; margin-top: 40px; }
.uebs ul { display: grid; gap: 2px; }
.uebs h2 { font: 650 20px/1.2 var(--disp); letter-spacing: -.02em; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.uebs a { display: block; padding: 8px 0; text-decoration: none; border-bottom: 1px dashed var(--line); font-weight: 550; }
.uebs a small { display: block; color: var(--muted); font-weight: 400; font-size: 14px; }
.uebs a:hover { color: var(--accent); }
.kk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; margin-top: 44px; }
.kk > div { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.kk h3 { font: 650 20px/1.2 var(--disp); letter-spacing: -.02em; margin: 0 0 8px; }
.kk p { color: var(--muted); }
.kk a { color: var(--accent); font-weight: 650; }
.c9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .cards.c9 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards.c9 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .cards.c9 { grid-template-columns: minmax(0, 1fr); } .cards.c9 > :last-child { grid-column: auto; } }
.cards.c3 .u-nichts { display: none; }
.fcols { grid-template-columns: minmax(0, 1.2fr) repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .fcols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fcols > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 760px) { .fcols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fcols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Reduzierte Bewegung: fertiger Zustand ---------- */
@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
  .js .flow > li, .js .szen li, .js .panel.rv tbody tr, .js .tile:not(.go) .dc, .js .u:not(.in) .ub i { opacity: 1; transform: none; }
  .js .fk > div::before, .js .u:not(.in) .ub::after { transform: none; }
  .js .gegen .lst svg path { stroke-dashoffset: 0; }
  .go .gb-coin, .go .kc i, .go .fg-cursor, .go .so-item { animation: none !important; }
}

/* ---------- weitere Szenen ---------- */
/* Handy: Antippen legt in den Warenkorb */
.hd { width: min(100%, 280px); margin: 0 auto; border: 1.5px solid var(--ink); border-radius: 28px; padding: 14px 12px 0; background: var(--bg); overflow: hidden; }
.hd-top { display: flex; justify-content: space-between; font: 600 12px/1 var(--mono); color: var(--muted); padding: 2px 6px 10px; }
.hd-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 34px; gap: 10px; align-items: center; padding: 8px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.hd-row i { width: 38px; height: 38px; border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .15) 0 2px, transparent 2px 6px), var(--c); }
.hd-row b { display: block; font: 650 14px/1.2 var(--disp); } .hd-row small { color: var(--muted); font-size: 12px; }
.hd-plus { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; font: 600 18px/1 var(--mono); }
.hd-bar { position: relative; display: grid; margin: 8px -12px 0; padding: 12px 16px; background: var(--top); color: var(--top-ink); }
.hd-bar span { grid-area: 1 / 1; font: 600 14px/1.2 var(--mono); }
.hd-bar .leer { color: var(--top-muted); opacity: 0; } .hd-bar .voll { opacity: 1; }
.go .hd-plus { animation: hd-tap 8s ease infinite; }
.go .hd-bar .leer { animation: hd-leer 8s linear infinite; } .go .hd-bar .voll { animation: hd-voll 8s linear infinite; }
@keyframes hd-tap { 0%, 30% { transform: scale(1); box-shadow: 0 0 0 0 rgba(31, 107, 79, 0); } 34% { transform: scale(.82); box-shadow: 0 0 0 0 rgba(31, 107, 79, .5); } 46% { transform: scale(1); box-shadow: 0 0 0 14px rgba(31, 107, 79, 0); } 100% { transform: scale(1); } }
@keyframes hd-leer { 0%, 30% { opacity: 1; } 36%, 90% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes hd-voll { 0%, 30% { opacity: 0; } 36%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* Dashboard: neue Bestellungen laufen ein, Zähler "zu packen" steigt */
.db { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.db-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--top); color: var(--top-ink); font: 600 13px/1 var(--mono); }
.db-n { display: inline-grid; min-width: 26px; height: 22px; place-items: center; padding: 0 7px; border-radius: 6px; background: var(--dot); color: #06231a; }
.db-n span { grid-area: 1 / 1; } .db-n .n1, .db-n .n2 { opacity: 0; } .db-n .n3 { opacity: 1; }
.db-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); font: 500 13.5px/1.2 var(--mono); }
.db-row em { margin-left: auto; font: 600 12px/1 'Funnel Sans Variable', system-ui, sans-serif; font-style: normal; padding: 4px 8px; border-radius: 6px; background: #fbeed2; color: #7a4700; }
.db-row.ok em { background: #e1f2eb; color: var(--ok); }
.go .db-row.neu1 { animation: db-flash 9s ease infinite; } .go .db-row.neu2 { animation: db-flash2 9s ease infinite; }
.go .db-n .n1 { animation: db-n1 9s linear infinite; } .go .db-n .n2 { animation: db-n2 9s linear infinite; } .go .db-n .n3 { animation: db-n3 9s linear infinite; }
@keyframes db-flash { 0%, 8% { background: transparent; transform: translateY(-8px); opacity: .2; } 14% { background: #e1f2eb; transform: none; opacity: 1; } 40%, 100% { background: transparent; transform: none; opacity: 1; } }
@keyframes db-flash2 { 0%, 38% { background: transparent; transform: translateY(-8px); opacity: .2; } 44% { background: #e1f2eb; transform: none; opacity: 1; } 70%, 100% { background: transparent; transform: none; opacity: 1; } }
@keyframes db-n1 { 0%, 10% { opacity: 1; } 12%, 100% { opacity: 0; } }
@keyframes db-n2 { 0%, 10% { opacity: 0; } 12%, 40% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes db-n3 { 0%, 40% { opacity: 0; } 42%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* Marke: Name, Logo und Adresse wechseln, der Rahmen bleibt */
.mk { display: grid; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.mk > div { grid-area: 1 / 1; display: grid; gap: 12px; align-content: start; }
.mk-url { padding: 5px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font: 500 13.5px/1.5 var(--mono); color: var(--muted); }
.mk-brand { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; background: var(--top); color: var(--top-ink); }
.mk-brand i { width: 34px; height: 34px; border-radius: 8px; background: var(--c); }
.mk-brand b { font: 700 22px/1 var(--disp); letter-spacing: -.03em; }
.mk-brand b::after { content: ''; display: inline-block; width: .26em; height: .26em; margin-left: .08em; background: var(--dot); border-radius: 50%; }
.mk-line { height: 38px; background: linear-gradient(var(--line) 0 0) 0 6px / 72% 10px no-repeat, linear-gradient(var(--line) 0 0) 0 24px / 46% 10px no-repeat; }
.mk > div:nth-child(2), .mk > div:nth-child(3) { opacity: 0; }
.go .mk > div:nth-child(1) { animation: mk-1 9s ease infinite; } .go .mk > div:nth-child(2) { animation: mk-2 9s ease infinite; } .go .mk > div:nth-child(3) { animation: mk-3 9s ease infinite; }
@keyframes mk-1 { 0%, 28% { opacity: 1; transform: none; } 33%, 95% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes mk-2 { 0%, 30% { opacity: 0; transform: translateY(8px); } 36%, 61% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes mk-3 { 0%, 63% { opacity: 0; transform: translateY(8px); } 69%, 94% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } }

/* Versandlabel wird gedruckt */
.lb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: center; }
.lb-form { display: grid; gap: 8px; }
.lb-form div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 14px; }
.lb-form b { font: 600 14px/1.3 var(--mono); }
.lb-sheet { position: relative; padding: 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fffef9; font: 600 11.5px/1.5 var(--mono); transform-origin: top; }
.lb-sheet .bars { height: 52px; margin-top: 10px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px); }
.go .lb-sheet { animation: lb-druck 7s cubic-bezier(.3, .7, .2, 1) infinite; }
@keyframes lb-druck { 0%, 6% { transform: scaleY(0); opacity: 0; } 30% { transform: scaleY(1); opacity: 1; } 88% { transform: scaleY(1); opacity: 1; } 96%, 100% { transform: scaleY(1) translateY(10px); opacity: 0; } }
@media (max-width: 560px) { .lb { grid-template-columns: minmax(0, 1fr); } }

/* Einrichtung: Punkte werden nacheinander abgehakt */
.ei { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ei li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: 15px; font-weight: 550; }
.ei li::before { content: ''; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.ei li small { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 13px; }
.ei-bar { height: 8px; margin: 14px 0 0; border-radius: 4px; background: var(--raised); overflow: hidden; }
.ei-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.go .ei li { animation: ei-row 1s ease both; animation-delay: calc(var(--k) * .45s); }
.go .ei li::before { animation: ei-haken .5s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--k) * .45s + .25s); }
.go .ei-bar i { animation: ei-bar 3s cubic-bezier(.45, 0, .2, 1) both; }
.ei li:nth-child(1) { --k: 0; } .ei li:nth-child(2) { --k: 1; } .ei li:nth-child(3) { --k: 2; } .ei li:nth-child(4) { --k: 3; } .ei li:nth-child(5) { --k: 4; } .ei li:nth-child(6) { --k: 5; }
@keyframes ei-row { from { opacity: .35; transform: translateX(-10px); } }
@keyframes ei-haken { from { transform: scale(0); } }
@keyframes ei-bar { from { transform: scaleX(0); } }

/* Sicherheit: eine Abfrage von Händler A kommt nie an die Daten von Händler B */
.tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.tr-box { position: relative; padding: 14px; border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--bg); }
.tr-box h3 { font: 650 15px/1.2 var(--disp); margin: 0 0 10px; }
.tr-box i { display: block; height: 10px; margin-bottom: 7px; border-radius: 3px; background: var(--raised); }
.tr-box i:nth-of-type(2) { width: 70%; } .tr-box i:nth-of-type(3) { width: 85%; }
.tr-sonde { position: absolute; left: calc(50% - 112px); top: 52px; z-index: 2; padding: 5px 10px; border-radius: 6px; background: var(--ink); color: var(--bg); font: 600 12px/1.3 var(--mono); }
.tr-stop { position: absolute; left: calc(50% - 30px); top: 12px; z-index: 3; padding: 4px 8px; border-radius: 6px; background: #fbe9e7; color: #b3261e; font: 700 12px/1.3 var(--mono); opacity: 1; }
.tr-box.b::before { content: ''; position: absolute; inset: -1.5px; border-radius: 12px; border: 2px solid #b3261e; opacity: 0; pointer-events: none; }
.go .tr-sonde { animation: tr-sonde 6s cubic-bezier(.45, 0, .2, 1) infinite; }
.go .tr-stop { animation: tr-stop 6s ease infinite; }
.go .tr-box.b::before { animation: tr-rand 6s ease infinite; }
@keyframes tr-sonde { 0%, 10% { transform: translateX(0); opacity: 1; } 42% { transform: translateX(122px); } 52% { transform: translateX(100px); } 60%, 85% { transform: translateX(0); opacity: 1; } 95%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes tr-stop { 0%, 40% { opacity: 0; transform: scale(.8); } 46%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; } }
@keyframes tr-rand { 0%, 40% { opacity: 0; } 46%, 66% { opacity: 1; } 76%, 100% { opacity: 0; } }

/* Visuals in zweispaltigen Abschnitten behalten ihren Innenabstand */
.two .vis.tile { padding: clamp(20px, 2.4vw, 30px); }

.so-col.l .so-gh { border: 1.5px dashed var(--line-strong); border-radius: 10px; opacity: .55; }
.so-col.l .g1, .so-col.l .i1 { grid-area: 1 / 1; } .so-col.l .g2, .so-col.l .i2 { grid-area: 2 / 1; } .so-col.l .g3, .so-col.l .i3 { grid-area: 3 / 1; }
.so-col.l .so-item { width: 56%; }
/* Schmal (Handy): Kärtchen und Fachbeschriftung passen nicht nebeneinander. Fach höher, Beschriftung oben, Kärtchen landet darunter in voller Breite */
@container (max-width: 420px) {
  .so-col { --zeile: 92px; }
  .so-b { justify-content: flex-start; padding-top: 8px; }
  .so-col.l .so-item { width: calc(100% - 12px); align-self: end; margin: 0 6px 6px; line-height: 39px; }
}

/* Fokus im dunklen Kopf sichtbar; Pause-Schalter und angehaltene Animationen */
.nav { --focus: var(--dot); }
.stopp { min-height: 44px; padding: 0 12px; background: none; border: 1px solid var(--top-line); border-radius: 10px; color: var(--top-muted); font: 550 13.5px 'Funnel Sans Variable', system-ui, sans-serif; cursor: pointer; }
.stopp:hover { color: var(--top-ink); border-color: var(--top-muted); }
.still *, .still *::before, .still *::after { animation-play-state: paused !important; }

/* Kleinunternehmer: die USt-Zeile wird gestrichen, der Hinweis rückt nach */
.ku { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.ku-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 600 13px/1.2 var(--mono); color: var(--muted); }
.ku-head b { padding: 3px 8px; border-radius: 6px; background: var(--surface); font-weight: 600; }
.ku-row { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; line-height: 1.3; }
.ku-row b { font: 600 14px/1.3 var(--mono); }
.ku-ust { color: var(--muted); }
.ku-ust > * { opacity: .45; }
.ku-ust::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--ink); transform-origin: left; }
.ku-sum { border-top: 1.5px solid var(--ink); font-weight: 650; }
.ku-hint { max-width: none; margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: #e1f2eb; border: 1px solid var(--accent); font-size: 13px; line-height: 1.4; }
.go .ku-ust > * { animation: ku-dim .5s ease both .6s; }
.go .ku-ust::after { animation: ku-strike .6s cubic-bezier(.16, 1, .3, 1) both 1s; }
.go .ku-hint { animation: ku-hint .7s cubic-bezier(.16, 1, .3, 1) both 1.5s; }
@keyframes ku-dim { from { opacity: 1; } }
@keyframes ku-strike { from { transform: scaleX(0); } }
@keyframes ku-hint { from { opacity: 0; transform: translateY(10px); } }

/* OSS: gleicher Endpreis, der Steueranteil wächst je nach Land */
.os { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); container-type: inline-size; }
.os-price { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.os-price b { font: 700 24px/1 var(--mono); color: var(--ink); letter-spacing: -.02em; }
.os-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.os-row .c { font: 700 13px/1 var(--mono); }
.os-row .bar { display: flex; height: 28px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-strong); }
.os-row .n { flex: 1; background: var(--surface); }
.os-row .u { width: var(--w); background: var(--accent); transform-origin: right; }
.os-row .t { display: grid; justify-items: end; gap: 2px; min-width: 92px; font: 650 13px/1.2 var(--mono); }
.os-row .t b { font-weight: 500; font-size: 12px; color: var(--muted); }
.go .os-row { animation: os-row .6s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--k) * .4s + .2s); }
.go .os-row .u { animation: os-u .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--k) * .4s + .6s); }
@keyframes os-row { from { opacity: 0; transform: translateY(8px); } }
@keyframes os-u { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .go .ku-ust > *, .go .ku-ust::after, .go .ku-hint, .go .os-row, .go .os-row .u { animation: none !important; }
}