:root {
  color-scheme: dark;

  --bg:            #0b0b0d;
  --bg-2:          #151517;
  --surface:       #1a1a1d;
  --surface-2:     #1f1f23;
  --inset:         #232327;

  --line:          rgba(255,255,255,.09);
  --line-strong:   rgba(255,255,255,.17);

  --text:          #f5f5f7;
  --text-2:        rgba(235,235,245,.62);
  --text-3:        rgba(235,235,245,.52);

  --accent:        #c9a869;
  --accent-soft:   rgba(201,168,105,.15);
  --accent-press:  #dcbe83;
  --stufe:         #6ea8d8;
  --stufe-soft:    rgba(110,168,216,.16);
  --green:         #30d158;
  --green-soft:    rgba(48,209,88,.16);
  --orange:        #ff9f0a;
  --orange-soft:   rgba(255,159,10,.16);
  --red:           #ff453a;
  --red-soft:      rgba(255,69,58,.16);
  --gelb:          #e3b341;
  --gelb-soft:     rgba(227,179,65,.16);

  --zweit:         color-mix(in srgb, var(--accent) 44%, var(--text-3));
  --zweit-soft:    color-mix(in srgb, var(--accent) 15%, transparent);

  --pf-vinted:     #2b8d97;
  --pf-ebay:       var(--accent);
  --pf-klein:      #57a05e;
  --pf-track:      rgba(255,255,255,.055);
  --pf-vinted-text: #3fb6c0;

  --auf-red:       #2b0705;

  --auf-accent:      #241a08;
  --auf-green:       #05230f;

  --wx-bild-deckkraft: .92;
  --wx-bild-filter:    none;
  --wx-glanzlicht:     rgba(255,255,255,.34);

  --breite:    1280px;
  --breit-oeffentlich: 1400px;

  --radius-s:  9px;
  --radius:    14px;
  --radius-l:  20px;
  --radius-xl: 28px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 2px 8px rgba(0,0,0,.45), 0 16px 34px -14px rgba(0,0,0,.7);
  --shadow-3: 0 30px 80px -20px rgba(0,0,0,.8);
  --shadow-lift: 0 6px 14px rgba(0,0,0,.4), 0 24px 48px -20px rgba(0,0,0,.75);

  --topbar-h: 84px;
  --kopf-h: 76px;
  --kontobreite: 296px;
  --nav-zeit: .52s;
  --nav-kurve: cubic-bezier(.25, .5, .25, 1);
  --nav-w: 286px;
  --ease: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --fenster-auf: 340ms;
  --fenster-zu: 200ms;
  --fenster-kurve: cubic-bezier(.16, 1, .3, 1);
  --fenster-kurve-zu: cubic-bezier(.4, 0, .8, 1);
}

body.rechtsseite { --nav-w: 0px; }
body.anmeldeseite { --nav-w: 0px; }

:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #f5f5f7;
  --bg-2:          #ffffff;
  --surface:       #ffffff;
  --surface-2:     #fafafc;
  --inset:         #f0f0f3;

  --line:          rgba(0,0,0,.07);
  --line-strong:   rgba(0,0,0,.13);

  --text:          #1d1d1f;
  --text-2:        #4f4f55;
  --text-3:        #626268;

  --accent:        #7d5f22;
  --accent-soft:   rgba(125,95,34,.12);
  --accent-press:  #63481a;
  --stufe:         #285f88;
  --stufe-soft:    rgba(40,95,136,.12);
  --green:         #116b31;
  --green-soft:    rgba(17,107,49,.12);
  --orange:        #8c4c00;
  --orange-soft:   rgba(140,76,0,.12);
  --red:           #c20013;
  --red-soft:      rgba(194,0,19,.11);
  --gelb:          #8a6100;
  --gelb-soft:     rgba(138,97,0,.11);

  --pf-vinted:     #0e6b74;
  --pf-ebay:       var(--accent);
  --pf-klein:      #3d7a44;
  --pf-track:      rgba(0,0,0,.07);
  --pf-vinted-text: var(--pf-vinted);

  --auf-red:       #ffffff;

  --auf-accent:    #ffffff;
  --auf-green:     #ffffff;

  --wx-bild-deckkraft: .34;
  --wx-bild-filter:    saturate(.75) brightness(1.45) contrast(.8);

  --ueberlagerung-grund: rgba(28,28,30,.32);

  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --shadow-2: 0 2px 6px rgba(0,0,0,.05), 0 12px 28px -12px rgba(0,0,0,.14);
  --shadow-3: 0 24px 70px -20px rgba(0,0,0,.28);
  --shadow-lift: 0 4px 10px rgba(0,0,0,.06), 0 20px 40px -18px rgba(0,0,0,.22);
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }
input[type="file"][hidden] {
  display: block !important;
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
  opacity: 0; pointer-events: none;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  font-weight: 650;
  letter-spacing: -.022em;
}
h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.03em; }
h2 { font-size: 17px; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:where(a) { color: var(--accent); }

::selection { background: var(--accent); color: var(--auf-accent); }

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

.mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; font-size: .92em; }
.hint { color: var(--text-2); font-size: 13px; }
.hint.pad { padding: 0 20px 4px; }
.lede { margin: 6px 0 0; color: var(--text-2); font-size: 15px; }

.topbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: 1440px; margin: 0 auto; height: 100%;
  padding: 0 24px;
  display: flex; align-items: center; gap: 20px;
}

.brand { display: flex; align-items: center; gap: 10px; flex: none; }

.brand-rund {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: url("/static/zeichen-rund.png") center/cover no-repeat;
  background-image: image-set(url("/static/zeichen-rund.webp") type("image/webp"),
                              url("/static/zeichen-rund.png") type("image/png"));
  box-shadow: var(--shadow-1);
}
:root[data-theme="light"] .brand-rund {
  background-image: url("/static/zeichen-rund-hell.png");
  background-image: image-set(url("/static/zeichen-rund-hell.webp") type("image/webp"),
                              url("/static/zeichen-rund-hell.png") type("image/png"));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.brand-wort { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-wort b {
  font-size: 13px; font-weight: 700; line-height: 1.1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.brand-wort i {
  font-style: normal; font-size: 9px; font-weight: 600; line-height: 1.2;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-3); white-space: nowrap;
}
@media (max-width: 560px) {
  .topbar .brand { gap: 8px; }
  .topbar .brand-rund { width: 30px; height: 30px; }
  .topbar .brand-wort b { font-size: 11.5px; letter-spacing: .12em; }
  .topbar .brand-wort i { font-size: 8px; letter-spacing: .18em; }
}
@media (max-width: 340px) { .topbar .brand-wort { display: none; } }

.marke-v {
  display: block; width: 100%; height: 100%;
  background: url("/static/zeichen.png") center/contain no-repeat;
}
:root[data-theme="light"] .marke-v {
  background-image: url("/static/zeichen-hell.png");
}

.segmented {
  position: relative;
  margin-left: auto;
  display: flex; gap: 2px; padding: 4px;
  background: var(--inset);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.seg-gleiter {
  position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: transform .32s var(--ease-out), width .32s var(--ease-out);
}
.seg {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; color: var(--text-2);
  padding: 10px 22px; border-radius: var(--radius); cursor: pointer;
  font-size: 15px; font-weight: 600; font-family: inherit;
  transition: color .2s;
}
.seg-zeichen {
  font-size: 12px; opacity: .55;
  transition: opacity .25s, transform .35s var(--ease-out);
}
.seg:hover { color: var(--text); }
.seg:hover .seg-zeichen { opacity: .8; }
.seg.on .seg-zeichen {
  opacity: 1; color: var(--accent);
  transform: rotate(360deg) scale(1.15);
}
.seg.on { background: transparent; color: var(--text); font-weight: 700; }

.btn.vinted, .btn.ebay {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px; white-space: nowrap;
  line-height: 1; text-decoration: none;
}
.vinted-punkt, .ebay-punkt { flex: none; }

.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.kopf-titel { min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.kopf-titel h2 {
  font-size: 17px; font-weight: 650; white-space: nowrap;
  animation: titelRein .3s var(--ease-out);
}
.kopf-titel .hint {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes titelRein { from { opacity: 0; transform: translateY(4px); } }
@media (max-width: 900px) { .kopf-titel .hint { display: none; } }

.btn.vinted {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none;
  background: color-mix(in srgb, #09b1ba 16%, transparent);
  border-color: color-mix(in srgb, #09b1ba 38%, transparent);
  color: color-mix(in srgb, #09b1ba 82%, var(--text));
}
.btn.vinted:hover { background: color-mix(in srgb, #09b1ba 26%, transparent); }
.vinted-punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: #09b1ba; flex: none;
}
.ch-zurueck { display: none; align-items: center; gap: 6px; margin-bottom: 10px; }

@media (max-width: 700px) { .btn.vinted span:not(.vinted-punkt) { display: none; } }

.ladeschirm {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: #08080a;
  transition: opacity .55s var(--ease-out), visibility .55s;
}
:root[data-theme="light"] .ladeschirm { background: #ffffff; }
.ladeschirm.weg { opacity: 0; visibility: hidden; pointer-events: none; }
.ladeschirm.weg .ls-mitte { transform: scale(1.06); }

.ladeschirm::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 34% at 50% 44%,
              rgba(201,168,105,.16), transparent 70%);
  animation: lsSchein 3.4s ease-in-out infinite;
}
@keyframes lsSchein { 50% { opacity: .45; } }
:root[data-theme="light"] .ladeschirm::before {
  background: radial-gradient(46% 34% at 50% 44%,
              rgba(201,168,105,.22), transparent 72%);
}

.ls-mitte {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 30px;
  transition: transform .55s var(--ease-out);
}

.ls-logo {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  animation: lsRein .7s var(--ease-out) both,
             lsPuls 2.4s 0.7s ease-in-out infinite;
}
.ls-zeichen {
  width: min(132px, 34vw); aspect-ratio: 1; border-radius: 50%;
  background: url("/static/zeichen-rund.png") center/cover no-repeat;
  background-image: image-set(url("/static/zeichen-rund.webp") type("image/webp"),
                              url("/static/zeichen-rund.png") type("image/png"));
  box-shadow: 0 0 0 1px rgba(201, 168, 105, .35),
              0 18px 50px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] .ls-zeichen {
  background-image: url("/static/zeichen-rund-hell.png");
  background-image: image-set(url("/static/zeichen-rund-hell.webp") type("image/webp"),
                              url("/static/zeichen-rund-hell.png") type("image/png"));
  box-shadow: 0 0 0 1px rgba(147, 113, 44, .30),
              0 14px 40px rgba(0, 0, 0, .12);
}
.ls-wort {
  font-size: clamp(20px, 6vw, 27px); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); line-height: 1;
  text-indent: .2em;
}
.ls-claim {
  font-size: clamp(9px, 2.6vw, 11px); font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--text-3); line-height: 1; margin-top: -6px;
  text-indent: .34em;
}
@keyframes lsRein {
  from { opacity: 0; transform: scale(.9); filter: blur(6px); }
}
@keyframes lsPuls {
  0%, 100% { opacity: .72; transform: scale(.97); }
  50%      { opacity: 1;   transform: scale(1.03);
             filter: drop-shadow(0 4px 34px rgba(201,168,105,.5)); }
}
:root[data-theme="light"] .ls-logo {
  animation-name: lsRein, lsPulsHell;
}
@keyframes lsPulsHell {
  0%, 100% { opacity: .82; transform: scale(.97); }
  50%      { opacity: 1;   transform: scale(1.03);
             filter: drop-shadow(0 6px 26px rgba(120, 92, 34, .22)); }
}

.ls-linie {
  width: 190px; height: 1px;
  background: rgba(255,255,255,.10);
  overflow: hidden; position: relative;
  animation: lsRein .7s .3s var(--ease-out) both;
}
.ls-linie i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, #c9a869 50%, transparent);
  transform: scaleX(0);
  animation: lsLinie 1.6s var(--ease-out) infinite;
}
@keyframes lsLinie {
  0%   { transform: scaleX(0);   opacity: 0; }
  40%  { transform: scaleX(1);   opacity: 1; }
  100% { transform: scaleX(1);   opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ladeschirm::before, .ls-logo, .ls-linie, .ls-linie i { animation: none; }
  .ls-logo { opacity: 1; transform: none; }
  .ls-linie i { transform: scaleX(1); opacity: 1; }
  :root { --nav-zeit: 0s; }
}

.seitenleiste {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 65;
  width: var(--nav-w);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--bg-2), var(--surface));
  border-right: 1px solid var(--line);
  transition: width var(--nav-zeit) var(--nav-kurve),
              transform var(--nav-zeit) var(--nav-kurve);
}
.seitenleiste::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px;
  background: linear-gradient(180deg, transparent,
              color-mix(in srgb, var(--accent) 45%, transparent) 30%,
              color-mix(in srgb, var(--accent) 20%, transparent) 70%, transparent);
  pointer-events: none;
}

.sl-kopf {
  display: flex; align-items: center; gap: 8px;
  height: var(--topbar-h); flex: none;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--line);
}
.sl-kopf .brand { text-decoration: none; flex: 1; overflow: hidden; }

@media (max-width: 900px) {
}

.sl-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  padding: 16px 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent;
}
.sl-nav::-webkit-scrollbar { width: 10px; }
.sl-nav::-webkit-scrollbar-track { background: transparent; }
.sl-nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 16%, transparent);
  border: 3px solid transparent; background-clip: padding-box;
  border-radius: 999px;
}
.sl-nav::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--text) 28%, transparent);
  background-clip: padding-box;
}

.sl-gruppe {
  margin: 0 0 8px; padding: 0 10px;
  color: var(--text-3); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.sl-gruppe + .sl-liste + .sl-gruppe { margin-top: 14px; }

.sl-liste {
  position: relative; display: grid; gap: 2px;
  grid-template-columns: minmax(0, 1fr);
}
.sl-gleiter {
  position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 0;
  border-radius: var(--radius);
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 22%, transparent),
              color-mix(in srgb, var(--accent) 9%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  opacity: 0;
  transition: transform .32s var(--ease-out), opacity .2s;
}
.sl-gleiter.da { opacity: 1; }
.sl-gleiter::before {
  content: ""; position: absolute; left: -1px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.sl-eintrag {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-width: 0; padding: 10px 12px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: var(--text-2);
  font-size: 14px; font-weight: 550; font-family: inherit;
  text-align: left; text-decoration: none; white-space: nowrap;
  transition: color .18s, background .18s;
}
.sl-eintrag:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.sl-eintrag.on { color: var(--text); font-weight: 650; background: transparent; }

.ikonen { position: absolute; width: 0; height: 0; overflow: hidden; }

.sl-icon {
  flex: none; width: 20px; height: 20px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .58;
  transition: opacity .2s, transform .32s var(--ease-out), color .2s;
}
span.sl-icon { display: grid; place-items: center; stroke: none; }

.sl-eintrag:hover .sl-icon { opacity: .9; }
.sl-eintrag.on .sl-icon { opacity: 1; color: var(--accent); transform: scale(1.1); }

.sl-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.sl-zahl {
  flex: none; min-width: 22px; padding: 1px 6px; border-radius: 999px;
  background: var(--inset); color: var(--text-2);
  font-size: 11px; font-weight: 650; text-align: center;
  font-variant-numeric: tabular-nums;
}
.sl-eintrag.on .sl-zahl { background: var(--accent-soft); color: var(--accent); }

.sl-glocke {
  flex: none; order: 0;
  display: grid; place-items: center; position: relative;
  width: 20px; height: 20px;
  margin-left: auto; margin-right: 10px;
  color: var(--accent);
}
.sl-glocke:has(+ .sl-marke)::before {
  content: ""; position: absolute; right: -10px; top: 3px; bottom: 3px;
  width: 1px; background: var(--line);
}
.sl-glocke svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 50% 20%;      /* aufgehaengt, nicht in der Mitte */
}

@keyframes sl-laeuten {
    0% { transform: rotate(0deg); }
   15% { transform: rotate(-12deg); }
   32% { transform: rotate(10deg); }
   50% { transform: rotate(-7deg); }
   68% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
@keyframes sl-schein {
    0% { opacity: .5; transform: scale(.55); }
   70% { opacity: 0;  transform: scale(2); }
  100% { opacity: 0;  transform: scale(2); }
}
.sl-glocke.laeutet svg {
  animation: sl-laeuten 600ms cubic-bezier(.36, .07, .19, .97);
}
.sl-glocke.laeutet::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 65%, transparent),
              0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: sl-schein 700ms ease-out;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sl-glocke.laeutet svg, .sl-glocke.laeutet::after { animation: none; }
  .sl-glocke.laeutet::after { content: none; }
}

.sl-marke {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2.5px 7px 2px; border-radius: 999px;
  font-size: 9px; font-weight: 700; line-height: 1;
  letter-spacing: .07em; text-transform: uppercase;
}
.sl-marke.pro {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
.sl-marke.credits {
  padding: 1px 6px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-size: 11px; letter-spacing: 0;
}
.sl-eintrag.on .sl-marke.pro { background: var(--accent); color: var(--auf-accent); }
:root[data-theme="light"] .sl-marke.pro,
:root[data-theme="light"] .sl-marke.credits { color: var(--accent-press); }
:root[data-theme="light"] .sl-eintrag.on .sl-marke.pro { color: var(--auf-accent); }
.sl-marke.discord {
  background: #5865F2; color: #fff;
  letter-spacing: .05em; padding-right: 6.5px;
}

.sl-pfeil { flex: none; color: var(--text-3); font-size: 11px; transition: transform .16s, color .16s; }
.sl-eintrag.extern:hover .sl-pfeil { color: var(--accent); transform: translate(2px, -2px); }

.sl-punkt {
  display: block; width: 8px; height: 8px; border-radius: 50%;
}
.sl-punkt.vinted { background: #09b1ba; box-shadow: 0 0 0 3px color-mix(in srgb, #09b1ba 20%, transparent); }
.sl-punkt.ebay   { background: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 20%, transparent); }
.sl-punkt.discord { background: #5865f2; box-shadow: 0 0 0 3px color-mix(in srgb, #5865f2 20%, transparent); }

.sl-fuss {
  flex: none; padding: 10px 12px 14px;
  border-top: 1px solid var(--line);
  display: grid; gap: 6px;
}
.sl-eintrag.klein { padding: 8px 12px; font-size: 13px; }

.sl-konto {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font-family: inherit; text-align: left;
  transition: border-color .16s, background .16s;
}
.sl-konto:hover { border-color: var(--line-strong); background: var(--surface-2); }

.sl-avatar {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-s);
  display: grid; place-items: center;
  background: linear-gradient(145deg,
              color-mix(in srgb, var(--accent) 85%, #fff),
              color-mix(in srgb, var(--accent) 70%, #000));
  color: var(--auf-accent); font-size: 12px; font-weight: 750; letter-spacing: .02em;
}
.sl-konto-text { flex: 1; min-width: 0; line-height: 1.25; }
.sl-konto-text strong {
  display: block; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-konto-text .hint { font-size: 11px; }
.sl-konto .sl-pfeil { transition: transform .2s; }
.sl-konto[aria-expanded="true"] .sl-pfeil { transform: rotate(180deg); }

.inhalt {
  position: relative; z-index: 1;
  margin-left: var(--nav-w);
  min-height: 100vh;
  display: flex; flex-direction: column;
  transition: margin-left var(--nav-zeit) var(--nav-kurve);
}
.inhalt > .tab.on { flex: 1 0 auto; }
.inhalt > .fusszeile { margin-top: auto; }

.tab.on { animation: seiteRein .3s var(--ease-out); }
@keyframes seiteRein { from { opacity: 0; } }

.nav-knopf {
  display: none;
  width: 40px; height: 40px; flex: none; padding: 0;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--text-2); cursor: pointer;
  place-items: center;
  transition: background .16s, color .16s;
}
.nav-knopf svg { width: 20px; height: 20px; display: block; }
.nav-knopf:hover { background: var(--surface-2); color: var(--text); }
.nav-schleier {
  position: fixed; inset: 0; z-index: 64;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: fade .2s var(--ease-out);
}

@media (min-width: 901px) and (max-width: 1180px) {
  body, body.nav-schmal { --nav-w: 74px; }
  .seitenleiste { width: 74px; }

  .sl-text, .sl-zahl, .sl-marke, .sl-pfeil,
  .sl-konto-text, .brand-wort, .sl-gruppe > span { display: none; }
  .sl-gruppe {
    height: 1px; margin: 0 10px 10px; padding: 0;
    background: var(--line);
  }
  .sl-eintrag, .sl-konto { justify-content: center; padding-left: 0; padding-right: 0; }
  .sl-kopf { padding: 0 10px; justify-content: center; }
  .sl-kopf .brand { flex: none; }
  .sl-klapp { display: none; }
  .sl-nav { scrollbar-gutter: auto; padding-left: 8px; padding-right: 8px; }
}

@media (max-width: 900px) {
  body, body.nav-schmal { --nav-w: 0px; }
  .seitenleiste { width: 250px; transform: translateX(-100%); box-shadow: var(--shadow-3); }
  body.nav-offen .seitenleiste { transform: none; }
  .nav-knopf { display: grid; }
  .sl-klapp { display: none; }
}
@media (min-width: 901px) { .nav-schleier { display: none !important; } }

.btn {
  border: 1px solid transparent;
  background: var(--inset);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius-s);
  font-size: 13px; font-weight: 550;
  white-space: nowrap;
  transition: background .16s, transform .12s var(--ease), box-shadow .16s, opacity .16s;
}
.btn:hover { background: color-mix(in srgb, var(--inset) 70%, var(--text) 6%); }
.btn:active { transform: scale(.97); }
a.btn, a.btn:hover, a.btn:focus-visible { text-decoration: none; }

.btn.primary {
  background: var(--accent); color: var(--auf-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.10),
              0 4px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn.primary:hover { background: var(--accent-press); }

.btn.ghost { background: transparent; border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--inset); }

.btn.icon { padding: 8px 10px; font-size: 15px; line-height: 1; }
.btn.big { padding: 10px 22px; font-size: 15px; border-radius: var(--radius); }
.mini {
  border: 1px solid var(--line-strong); background: transparent; color: var(--text-2);
  padding: 2px 8px; border-radius: var(--radius-s); font-size: 11px; font-weight: 550;
  transition: color .14s, background .14s, border-color .14s;
}
.mini:hover { color: var(--text); background: var(--inset); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.tab { display: none; }
.tab.on { display: block; }

.page {
  max-width: 1440px; margin: 0 auto;
  padding: 30px 24px 96px;
}
@media (max-width: 1180px) { .page { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 620px)  { .page { padding: 20px 12px 72px; } }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 24px;
  flex-wrap: wrap;
}

.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 0 0 30px;
  margin-bottom: 26px;
  background:
    radial-gradient(120% 150% at 100% 0%, var(--accent-soft) 0%, transparent 55%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}

.hero-banner {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-xl);
}

.hero-inner { position: relative; z-index: 2; padding: 30px 32px 0; }
.hero h1 { font-size: 30px; }
.hero .lede { max-width: 64ch; }
.hero-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.hero-tat { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .hero-tat { width: 100%; }
  .hero-tat .btn { flex: 1; justify-content: center; }
}

.todo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.todo-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  transition: transform .12s var(--ease), box-shadow .16s, border-color .16s;
}
.todo-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); border-color: var(--accent); }
.todo-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.todo-chip.warn .dot { background: var(--orange); }
.todo-chip.good .dot { background: var(--green); }
.todo-chip b { font-weight: 650; font-variant-numeric: tabular-nums; }

.anspruch {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 10px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3);
}
.anspruch-punkt {
  flex: none; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
}
.anspruch-teil.zwei { color: var(--text-2); }

.gruss-name { color: var(--accent); }

.kpis {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin-bottom: 24px;
}
.kpi {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-1);
  transition: transform .16s var(--ease), box-shadow .2s;
}
.kpi { cursor: default; }
.kpi:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.kpi.haupt:hover { border-color: var(--accent); }

.kpi:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.kpi.haupt {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 9%, var(--surface)),
    color-mix(in srgb, var(--accent) 3%, var(--surface)));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
              var(--shadow-1);
}
.kpi.haupt .k-label { color: var(--accent); }
.kpi.haupt .k-sub.warn { color: var(--orange); font-weight: 650; }

.kpi.green  .k-value { color: var(--green); }
.kpi.orange .k-value { color: var(--orange); }
.kpi.red    .k-value { color: var(--red); }

.k-kopf { display: flex; align-items: center; gap: 10px; }
.k-bild {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
}
.k-bild svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.kpi.haupt .k-bild {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
}

.k-label {
  color: var(--text-2); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.k-kopf + .k-value { margin-top: 12px; }
.k-value {
  margin-top: 8px;
  font-size: 30px; font-weight: 620; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Segoe UI Variable Display", system-ui, sans-serif;
}
.k-sub { margin-top: 2px; color: var(--text-3); font-size: 12px; }
.kpis.big .k-value { font-size: 30px; }

@media (max-width: 560px) {
  .kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
  .kpi { padding: 14px 13px 12px; }
  .k-bild { width: 28px; height: 28px; border-radius: 9px; }
  .k-bild svg { width: 15px; height: 15px; }
  .k-kopf { gap: 8px; flex-wrap: nowrap; }
  .k-label { min-width: 0; letter-spacing: .035em; }
  .k-value, .kpis.big .k-value { font-size: 24px; margin-top: 6px; }
  .k-kopf + .k-value { margin-top: 9px; }
}
@media (max-width: 400px) {
  .k-value, .kpis.big .k-value { font-size: 21px; }
}

.toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 20px;
}

.searchwrap { position: relative; flex: 1 1 300px; max-width: 420px; }
.searchicon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: 15px; pointer-events: none;
}
#q {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 8px 14px 8px 36px;
  font-size: 14px;
  transition: border-color .16s, box-shadow .16s;
}
#q::placeholder { color: var(--text-3); }
#q:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  transition: color .16s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease);
}
.pill:hover { color: var(--text); border-color: var(--text-3); }
.pill.on {
  background: var(--accent); color: var(--auf-accent);
  border-color: var(--accent);
}

.grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.hint.nur-lokal { max-width: 46ch; text-align: right; line-height: 1.5; }
.nl-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
.nl-link:hover { text-decoration: underline; }

.sperrschicht {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px;
  width: min(100%, 460px); margin: 4px auto;
  min-height: 190px; padding: 34px 26px; text-align: center;
  border-radius: var(--radius);
  background: var(--inset);
  border: 1px dashed var(--line-strong);
}
.sp-zeichen {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent); font-size: 20px;
}

.sp-zeichen.laeuft {
  animation: sanduhr 4.5s var(--ease, ease-in-out) infinite;
}
@keyframes sanduhr {
  0%, 62%   { transform: rotate(0deg); }
  74%, 100% { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-zeichen.laeuft { animation: none; }
}
.sp-titel { margin: 0; font-size: 15px; font-weight: 650; color: var(--text); }
.sp-text {
  margin: 0; max-width: 46ch;
  color: var(--text-2); font-size: 13px; line-height: 1.6;
}
.sp-text b { color: var(--text); }
.sperrschicht .btn { margin-top: 4px; }

.sperrschicht.klein { min-height: 0; padding: 24px 20px; }

.sperrschicht .sp-text { max-width: 48ch; }

.kosten-marke {
  display: inline-block; vertical-align: middle;
  margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 650; letter-spacing: .01em;
  white-space: nowrap;
}

.gut-marke {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 650; white-space: nowrap;
  vertical-align: middle;
}
.gut-marke i { font-style: normal; font-size: 10px; opacity: .85; }
.vas-kosten .gut-marke { background: none; padding: 0; }

.auto-knopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lw-preis { display: inline-flex; align-items: center; flex: none; }

.sl-logo {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  object-fit: cover; display: block;
}
.sl-eintrag.sl-kanal { align-items: center; }
.sl-eintrag.sl-kanal .sl-pfeil { margin-left: auto; }

.sl-klapp {
  border: 0; background: none; font-family: inherit;
  display: flex; align-items: center; gap: 5px; width: 100%;
  cursor: pointer; text-align: left;
  transition: color .16s;
}
.sl-klapp:hover { color: var(--text-2); }
.sl-klapp-pfeil {
  flex: none; width: 12px; height: 12px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--ease-out);
}
.sl-klapp.zu .sl-klapp-pfeil { transform: rotate(-90deg); }

.sl-kanal-text {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
}
.sl-kanal-text .sl-text { flex: none; }
.sl-status { font-size: 10.5px; font-weight: 600; line-height: 1.2; }
.sl-status.gut   { color: var(--green); }
.sl-status.offen { color: var(--text-3); }

.re-spalten {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  gap: 20px; align-items: start;
}
.re-links, .re-rechts { min-width: 0; display: grid; gap: 20px; }
.re-links > .panel, .re-rechts > .panel { margin: 0; }
@media (max-width: 1100px) {
  .re-spalten { grid-template-columns: 1fr; }
}

.re-chip {
  display: inline-grid; place-items: center; margin-left: 8px;
  min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 700; vertical-align: 2px;
}

.re-tabelle { padding: 0 0 6px; overflow-x: auto; }
.re-kopfzeile, .re-zeile {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: minmax(200px, 2.2fr) 130px 110px 90px 130px;
  padding: 10px 20px; min-width: 720px;
}
.re-kopfzeile {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.re-zeile { border-bottom: 1px solid var(--line); }
.re-zeile:last-child { border-bottom: 0; }
.re-zeile:hover { background: var(--inset); }

.re-artikel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.re-bild {
  flex: none; width: 44px; height: 44px; border-radius: 9px;
  object-fit: cover; border: 1px solid var(--line); background: var(--inset);
}
span.re-bild.leer {
  display: grid; place-items: center; color: var(--text-3); font-size: 15px;
}
.re-artikel-text { min-width: 0; display: grid; gap: 1px; }
.re-artikel-text b {
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.re-artikel-text span {
  font-size: 11.5px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.re-plattform {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px;
}
.re-seit { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.re-seit b { font-size: 13px; font-weight: 600; }
.re-seit span { font-size: 11px; color: var(--text-3); }
.re-status {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 650;
  background: var(--surface); color: var(--text-3);
  border: 1px solid var(--line);
}
.re-status.gut {
  background: var(--green-soft); color: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
}
.re-status.warn { background: var(--orange-soft); color: var(--orange); }
.re-tat { text-align: right; }
.re-fuss { padding-bottom: 12px; }

.re-einstellungen { display: grid; gap: 18px; }
.re-schalter-zeile {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
}
.re-schalter-text { display: grid; gap: 3px; }
.re-schalter-text b { font-size: 13.5px; }
.re-schalter-text .hint { line-height: 1.5; }

.re-schalter { position: relative; flex: none; width: 38px; height: 22px; }
.re-schalter input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.re-schalter i {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--inset); border: 1px solid var(--line-strong);
  transition: background .18s, border-color .18s;
}
.re-schalter i::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-3);
  transition: transform .18s var(--ease-out), background .18s;
}
.re-schalter input:checked + i {
  background: var(--accent); border-color: var(--accent);
}
.re-schalter input:checked + i::after {
  transform: translateX(16px); background: var(--auf-accent);
}
.re-schalter input:focus-visible + i {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.re-feld { display: grid; gap: 7px; }
.re-feld > span:not(.hint) {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
.re-feld .hint { line-height: 1.5; text-transform: none; letter-spacing: 0; }
.re-plattformen { display: grid; gap: 8px; }
.re-plattformen label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer;
}
.re-plattformen input {
  width: 15px; height: 15px; accent-color: var(--accent);
}
.re-fakten { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.re-fakten li {
  position: relative; padding-left: 22px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
}
.re-fakten li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700;
}
.re-hinweis {
  padding: 10px 12px; border-radius: var(--radius-s);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--accent-soft);
  font-size: 12px; color: var(--text-2); line-height: 1.55;
}
.re-hinweis b { display: block; color: var(--accent); margin-bottom: 2px; }

.stimmen-panel { padding-bottom: 4px; }

.st-app-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 16px 20px 0;
}
.st-app-note .st-basis { margin-left: 4px; }
.st-kopf { padding: 30px 24px 4px; text-align: center; }
.st-titel {
  margin: 0 0 14px; font-size: clamp(20px, 2.6vw, 30px); font-weight: 750;
  letter-spacing: -.01em;
}
.st-note {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.st-wert { font-size: 24px; font-weight: 750; color: var(--text); }
.st-von { color: var(--text-3); font-size: 15px; }
.st-sterne { display: inline-flex; gap: 2px; margin-left: 6px; }
.st-basis { margin: 0; color: var(--text-3); font-size: 13px; }
.st-basis b { color: var(--text-2); }

.st-sterne i, .st-karte-sterne i {
  display: inline-block;
  color: var(--accent); font-size: 17px; font-style: normal;
  line-height: 1;
}
.st-sterne i.leer, .st-karte-sterne i.leer {
  color: color-mix(in srgb, var(--accent) 26%, transparent);
}

.st-bahn-huelle {
  position: relative; padding: 18px 24px 24px;
  display: flex; flex-direction: column;
}
.st-bahn-huelle > .st-bahn { flex: 1 1 auto; }
.st-bahn {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
  align-items: stretch;
}
.st-bahn::-webkit-scrollbar { display: none; }

.st-karte {
  flex: 0 0 clamp(300px, 34vw, 420px);
  scroll-snap-align: start;
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 30px 28px 26px; border-radius: var(--radius-l); font-size: 1.02rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg,
                    color-mix(in srgb, var(--text) 5%, transparent),
                    transparent 46%),
    var(--surface-2);
  transition: border-color .2s, transform .18s var(--ease);
}
.st-karte:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  transform: translateY(-2px);
}
.st-karte::before { content: none; }
.st-karte.leer { flex: 1 1 100%; background: var(--inset); }
.st-karte.leer::before { content: none; }
.st-karte-sterne { display: flex; gap: 2px; }
.st-karte-titel {
  margin: 0; font-size: 15px; font-weight: 650; color: var(--text);
}
.st-text { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.62; }
.st-wer {
  margin: auto 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.st-wer span {
  display: block; margin-top: 2px;
  font-weight: 400; font-size: 11px; color: var(--text-3);
}

.st-verteilung {
  width: 100%; display: grid; gap: 5px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}
.st-zeile-v {
  display: grid; grid-template-columns: 30px 1fr 16px;
  align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.st-vn { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }
.st-vn i { font-style: normal; color: var(--accent); font-size: 10px; }
.st-balken {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--text-3) 18%, transparent);
}
.st-balken i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent);
  transition: width .5s var(--ease-out);
}
.st-vz { text-align: right; }

.st-kopfzahl {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.st-geprueft {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 9px 3px 7px; border-radius: 999px;
  background: var(--green-soft); color: var(--green);
  font-size: 10.5px; font-weight: 650; letter-spacing: .02em;
}
.st-geprueft svg { width: 12px; height: 12px; }

.st-fuss {
  display: grid; grid-template-columns: 34px 1fr auto;
  align-items: center; gap: 10px;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.st-fuss .st-wer {
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.st-bild {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 11px;
  font-style: normal; font-size: 12px; font-weight: 750; letter-spacing: .02em;
}
.st-bild.t0 { background: color-mix(in srgb, var(--accent) 17%, transparent); color: var(--accent); }
.st-bild.t1 { background: color-mix(in srgb, var(--green)  17%, transparent); color: var(--green); }
.st-bild.t2 { background: color-mix(in srgb, var(--text-2) 17%, transparent); color: var(--text-2); }
.st-bild.t3 { background: color-mix(in srgb, var(--orange) 17%, transparent); color: var(--orange); }
.st-bild.t4 { background: color-mix(in srgb, var(--stufe)  17%, transparent); color: var(--stufe); }
.st-datum {
  font-size: 11px; color: var(--text-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.st-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-1);
}
.st-pfeil:hover { background: var(--surface-2); }
.st-pfeil.links { left: 6px; }
.st-pfeil.rechts { right: 6px; }

@media (max-width: 640px) {
  .st-bahn-huelle { padding-left: 16px; padding-right: 16px; }
  .st-karte { flex-basis: 84vw; }
  .st-pfeil { display: none; }      /* auf dem Telefon wischt man */
}

.ul-kasten.schmal { max-width: 460px; }
.fr-text {
  margin: 0 0 4px; color: var(--text-2); font-size: 14px; line-height: 1.6;
}
.fr-text b { color: var(--text); }
.fr-details {
  margin: 14px 0 4px; padding: 10px 14px;
  border-radius: var(--radius); background: var(--inset);
  border: 1px solid var(--line);
  color: var(--text-2); font-size: 13px; line-height: 1.55;
}

.dc-code {
  margin: 2px 0 12px; padding: 12px 14px; text-align: center;
  border-radius: var(--radius); cursor: pointer;
  background: var(--surface); border: 1px dashed var(--line-strong);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 20px; font-weight: 700; letter-spacing: .14em;
  color: var(--text);
}
.dc-code:hover { border-color: var(--accent); color: var(--accent); }
.dc-schritte { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 4px; }
.dc-schritte b { color: var(--text); }

.dc-regeln { margin: 0; }
.dc-regeln > summary {
  padding: 2px 0; cursor: pointer; font-weight: 600; color: var(--text);
}
.dc-regeln > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dc-regeln[open] > summary { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.dc-regeln .dc-regel { padding: 10px 0 0; }
.dc-regeln .dc-regel:last-child { padding-bottom: 2px; }
.dc-regeln .dc-regel > b { color: var(--text); font-size: 13.5px; }
.dc-regeln ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.dc-regeln li { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.dc-regeln li b { color: var(--text); }
.dc-regeln[open] { max-height: 42vh; overflow-y: auto; padding-right: 6px; }

.btn.gefahr-voll {
  background: var(--red); border-color: var(--red);
  color: var(--auf-red); font-weight: 650;
}
.btn.gefahr-voll:hover:not(:disabled) {
  background: color-mix(in srgb, var(--red) 86%, #000);
  border-color: color-mix(in srgb, var(--red) 86%, #000);
}

.grid + .panel { margin-top: 32px; }

.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  cursor: pointer;
  transition: transform .2s var(--ease-out);
}
.card:active { transform: scale(.985); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

#grid[data-rein] { opacity: 1; transform: none; transition: none; }
.card.inv-ein {
  animation: invEin .6s var(--ease-out) backwards;
  animation-delay: calc(var(--inv-i, 0) * 40ms);
}
@keyframes invEin {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
}

.thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  background: var(--inset);
  overflow: hidden;
  isolation: isolate;
}
.thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--ease-out), opacity .3s var(--ease-out);
}
.card:hover .thumb img { transform: scale(1.045); }
.thumb .c-lage { opacity: 0; }
.card:hover .thumb .c-lage.an { opacity: 1; }
.thumb .noimg {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 8px;
  color: var(--text-3); font-size: 12px;
}
.thumb .noimg .stb-i { width: 34px; height: 34px; opacity: .7; }

.badge {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 650; line-height: 1.3;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line);
  color: var(--text);
}
.c-punkt {
  position: relative; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3);
}
.badge.online .c-punkt { background: var(--green); }
.badge.reserviert .c-punkt { background: var(--orange); }
.badge.verkauft .c-punkt,
.badge.versendet .c-punkt,
.badge.zugestellt .c-punkt { background: var(--accent); }
.badge.retoure .c-punkt { background: var(--red); }
.badge.online .c-punkt::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; background: inherit;
  animation: invPuls 2.6s ease-out infinite;
}
@keyframes invPuls {
  from { transform: scale(1); opacity: .6; }
  70%, to { transform: scale(2.9); opacity: 0; }
}

.shots {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--line);
  color: var(--text-2);
  transition: opacity .2s var(--ease-out);
}
.shots .stb-i { width: 12px; height: 12px; }
.card:hover .shots { opacity: 0; }

.c-unten {
  position: absolute; inset: auto 0 0; z-index: 2;
  display: flex; flex-direction: column; gap: 9px;
  padding: 44px 12px 12px;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.4) 55%, transparent);
  color: #fff;
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s var(--ease-out), transform .4s var(--ease-out);
  pointer-events: none;
}
.card:hover .c-unten { opacity: 1; transform: none; }
.c-striche { display: flex; gap: 4px; }
.c-striche i {
  flex: 1; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.32);
}
.c-striche i.an { background: #fff; }
.c-bildtitel {
  font-size: 12px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (hover: none) {
  .c-unten { display: none; }
  .card:hover .shots { opacity: 1; }
  .card:hover .thumb img { transform: none; }
}

.grid .inv-gruppe {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 0; padding: 0 2px;
  min-width: 0;
}
.grid .inv-gruppe:first-child { margin-top: 0; }
.inv-gruppe-punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--text-3);
  box-shadow: 0 0 0 4px var(--inset);
}
.inv-gruppe.online .inv-gruppe-punkt { background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.inv-gruppe.reserviert .inv-gruppe-punkt { background: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.inv-gruppe.fertig .inv-gruppe-punkt { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.inv-gruppe-name {
  min-width: 0;
  font-size: 14px; font-weight: 650; letter-spacing: -.01em;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inv-gruppe-zahl {
  flex: none;
  font-size: 11.5px; font-weight: 650; color: var(--text-2);
  padding: 1px 8px; border-radius: 999px; background: var(--inset);
  font-variant-numeric: tabular-nums;
}
.inv-gruppe-logo { width: 16px; height: 16px; flex: none; }
.inv-gruppe::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
  margin-left: 4px; transform-origin: left center;
}
.inv-gruppe.inv-ein {
  animation: invKopf .5s var(--ease-out) backwards;
  animation-delay: calc(var(--inv-i, 0) * 40ms);
}
.inv-gruppe.inv-ein::after {
  animation: invStrich .9s var(--ease-out) backwards;
  animation-delay: calc(var(--inv-i, 0) * 40ms + 120ms);
}
@keyframes invKopf { from { opacity: 0; transform: translateX(-8px); } }
@keyframes invStrich { from { transform: scaleX(0); } }

.cardbody {
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 8px 4px;
  text-align: left;
}
.c-kopfzeile {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.c-namen { min-width: 0; }
.c-brand {
  font-weight: 650; font-size: 15px; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-name {
  margin-top: 1px; color: var(--text-2); font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-preisspalte {
  flex: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
}
.c-price {
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.c-price.none { font-size: 12px; font-weight: 550; color: var(--text-3); }
.c-size {
  max-width: 90px;
  padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--inset);
  color: var(--text-2); font-size: 11.5px; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-eck {
  font-size: 12px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.flag {
  display: inline-block;
  padding: 2px 8px 2px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 650; line-height: 1.5;
  background: var(--inset); color: var(--text-2);
}
.flag::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 5px; height: 5px; margin: -2px 5px 0 0; border-radius: 50%;
  background: currentColor;
}
.flag.warn { background: var(--orange-soft); color: var(--orange); }
.flag.crit { background: var(--red-soft); color: var(--red); }

.c-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; padding-top: 8px;
}
.c-fuss .c-plattformen { margin-left: 0; gap: 5px; }
.c-fuss .c-plattform-logo { width: 16px; height: 16px; }
.c-tat {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--inset);
  color: var(--text-2); font-size: 12px; font-weight: 650;
}
.c-tat span { font-size: 11px; }
.card:hover .c-tat { background: var(--accent); color: var(--auf-accent); }
.grid.waehlen .c-tat { display: none; }

@media (prefers-reduced-motion: reduce) {
  .card.inv-ein, .inv-gruppe.inv-ein, .inv-gruppe.inv-ein::after,
  .badge.online .c-punkt::after { animation: none; }
  .thumb img, .c-unten, .shots { transition: none; }
  .card:hover .thumb img { transform: none; }
}

.leermeldung, .leer2 {
  grid-column: 1 / -1;
  padding: 64px 20px; text-align: center; color: var(--text-2);
}
.leer2 { padding: 26px; }

.panel .leermeldung { padding: 34px 20px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: border-color .22s;
}
.panel:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--text) 3%, transparent), transparent);
}
.panel-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px 0;
}
.panel-zeile + .ranking { margin-top: 10px; }
#labelBilanz { margin: 12px 20px 16px; }

.panel-inhalt { padding: 14px 20px 18px; }
.panel-inhalt > .panel-zeile { padding-left: 0; padding-right: 0; }
.panel-inhalt .hint + .hint { margin-top: 6px; }

.mitschnitt-liste {
  margin-top: 12px; max-height: 340px; overflow: auto;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--inset);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.55; white-space: pre;
  color: var(--text-2);
}
.mitschnitt-liste b { color: var(--accent); font-weight: 700; }
.druckgruppe {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius-s, 10px);
  background: var(--inset); overflow: hidden;
  flex: 0 0 auto;
}
.druckgruppe > * { border-radius: 0; border: 0; }
.druckgruppe > * + * { border-left: 1px solid var(--line); }
.kopf-knoepfe .druckgruppe select.mini,
.druckgruppe select.mini {
  padding: 8px 10px; background: transparent;
  color: var(--text); font-size: 12px;
  font-variant-numeric: tabular-nums;
  border: 0; border-radius: 0;
}
.druckgruppe > *:first-child { border-left: 0; }
.druckgruppe .btn { padding: 8px 12px; font-size: 12px; }
.druckgruppe .btn:not(.ghost) { background: var(--accent); color: var(--auf-accent); }

.kopf-knoepfe select.mini {
  padding: 6px 10px; border-radius: var(--radius-s, 8px);
  border: 1px solid var(--line); background: var(--inset);
  color: var(--text); font-size: 12px;
}
.panel-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.two-col { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.two-col > .panel { margin-bottom: 0; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.automatik {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  gap: 18px; flex-wrap: wrap;
  padding: 20px 24px; margin-bottom: 16px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.auto-text { flex: 1; min-width: 220px; }
.auto-text h2 { font-size: 17px; }
.auto-text .hint { margin-top: 4px; }

.automatik-paar { align-items: stretch; }
.automatik-paar .automatik { margin-bottom: 0; height: 100%; }
@media (min-width: 861px) {
  .automatik-paar .automatik { flex-wrap: wrap; align-content: flex-start; }
  .automatik-paar .auto-text { min-width: 140px; }
  .automatik-paar .btn.big { width: 100%; margin-top: 2px; }
}

.auto-stand {
  margin: 4px 0 0;
  font-size: 13px; font-weight: 650; color: var(--text);
}
.automatik.bereit   .auto-stand { color: var(--green); }
.automatik.wartet   .auto-stand { color: var(--accent); }
.automatik.gesperrt .auto-stand { color: var(--orange); }

.auto-was {
  margin: 8px 0 0; max-width: 62ch;
  color: var(--text-2); font-size: 13px; line-height: 1.5;
}

.schritt {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; margin-right: 8px;
  border-radius: var(--radius-s);
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700;
  vertical-align: 2px;
}

.paket {
  display: inline-block; vertical-align: 3px;
  margin-left: 8px; padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  color: var(--text-2);
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.paket.standard {
  background: color-mix(in srgb, var(--stufe) 20%, transparent);
  color: var(--stufe);
}
.paket.premium, .paket.pro {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

.automatik.kommt { border-style: dashed; opacity: .78; }
.automatik.kommt .auto-icon { background: var(--inset); color: var(--text-3); }

.page-head.zwischen { margin: 34px 0 16px; align-items: center; }
.abschnitt { font-size: 20px; }

.dropzone.laedt { opacity: .6; pointer-events: none; }

.auto-icon {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius);
  font-size: 17px; line-height: 1;
  background: var(--inset); color: var(--text-3);
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}

.automatik.wartet {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background:
    radial-gradient(110% 200% at 0% 0%, var(--accent-soft), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-2), 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.automatik.wartet .auto-icon { background: var(--accent); color: var(--auf-accent); }

.automatik.laeuft {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}
.automatik.laeuft .auto-icon {
  background: var(--accent-soft); color: var(--accent);
  animation: pulsieren 1.5s var(--ease) infinite;
}
@keyframes pulsieren { 50% { opacity: .45; transform: scale(.93); } }

.automatik.laeuft::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: wandern 1.4s linear infinite;
}
@keyframes wandern { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.automatik.gesperrt { opacity: .78; }
.automatik.gesperrt .auto-icon { background: var(--orange-soft); color: var(--orange); }
.automatik.bereit .auto-icon { background: var(--green-soft); color: var(--green); }

.btn.primary.glow:not([disabled]) {
  box-shadow: 0 1px 2px rgba(0,0,0,.12),
              0 6px 20px -6px color-mix(in srgb, var(--accent) 85%, transparent),
              0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: atmen 2.6s var(--ease) infinite;
}
@keyframes atmen {
  50% { box-shadow: 0 1px 2px rgba(0,0,0,.12),
                    0 8px 26px -6px color-mix(in srgb, var(--accent) 90%, transparent),
                    0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.logbox {
  max-height: 260px; overflow: auto;
  padding: 14px 20px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.75;
  color: var(--text-2);
}
.logbox .fertig { color: var(--green); }
.logbox .fehler { color: var(--red); }
.logbox .gruppe { color: var(--text); font-weight: 600; }

.ranking { padding: 6px 0; }
.rank-row, .r-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
}
.rank-row:last-child, .r-row:last-child { border-bottom: 0; }
.r-bild {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 8px; object-fit: cover;
  border: 1px solid var(--line); background: var(--inset);
}
span.r-bild.leer {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 16px;
}
.verkauf-neu {
  display: flex; flex-direction: column; gap: 8px;
  margin: 14px 20px 18px; padding: 12px 14px;
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.verkauf-neu .vn-titel { font-size: 13px; }
.verkauf-neu .vn-zeile { display: flex; gap: 8px; flex-wrap: wrap; }
.verkauf-neu input {
  flex: 1 1 120px; min-width: 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--inset); color: var(--text); font-size: 13px;
}
.verkauf-neu input:focus { outline: 1px solid var(--accent); }
.r-main { flex: 1; min-width: 0; }
.r-name {
  font-weight: 550; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-sub { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.r-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.r-val.green { color: var(--green); }
.r-val.orange { color: var(--orange); }
.r-main { min-width: 0; }
.rank-row input.r-datum, .r-row input.r-datum {
  flex: 0 0 auto; width: 148px; min-width: 148px;
  padding: 6px 8px; font-size: 13px;
}
.r-datum.leer { border-color: color-mix(in srgb, var(--orange) 55%, transparent); }
.r-val { flex: 0 0 auto; min-width: 68px; text-align: right; }
.r-del {
  flex: none; border: 0; background: transparent; color: var(--text-3);
  padding: 4px 8px; border-radius: var(--radius-s); font-size: 15px; line-height: 1;
}
.r-del:hover { background: var(--red-soft); color: var(--red); }

.rank-bar {
  flex: 1; height: 7px; border-radius: 999px;
  background: var(--inset); overflow: hidden;
}
.rank-bar .bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent),
              color-mix(in srgb, var(--accent) 55%, #fff));
}

.chartbox { position: relative; padding: 24px 20px 14px; }

.lc { position: relative; }
.lc-feld { position: relative; height: 244px; }

.lc-marke {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px solid var(--line);
  pointer-events: none;
}
.lc-marke span {
  position: absolute; left: 0; bottom: 3px;
  font-size: 10px; color: var(--text-3); letter-spacing: .2px;
}
.lc-marke.null { border-top-color: var(--text-3); }
.lc-marke.null span { color: var(--text-2); font-weight: 600; }

.lc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lc-kurve {
  fill: none; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.lc-kurve.umsatz { stroke: var(--accent); }
.lc-kurve.gewinn { stroke: var(--stufe); }

.lc-svg {
  clip-path: inset(-6px 100% -6px 0);
  animation: lcWischen 1s var(--ease-out) .1s forwards;
}
@keyframes lcWischen { to { clip-path: inset(-6px 0 -6px 0); } }

.lc-spalten { position: absolute; inset: 0; display: flex; }
.lc-spalte { flex: 1; position: relative; padding: 0; min-width: 0; }

.lc-punkt {
  position: absolute; left: 50%; width: 9px; height: 9px;
  margin: 0 0 -4.4px -4.4px; border-radius: 50%;
  background: var(--surface); border: 2.25px solid var(--accent);
  opacity: 0; transform: scale(.4);
  transition: transform .18s var(--ease-out), opacity .18s;
  animation: lcPunkt .3s var(--ease-out) forwards;
  animation-delay: calc(.16s + var(--i, 0) * .075s);
}
.lc-punkt.gewinn { border-color: var(--stufe); }
@keyframes lcPunkt { to { opacity: 1; transform: scale(1); } }

.lc-spalte.still .lc-punkt { animation: none; opacity: 0; }
.lc-spalte.still:hover .lc-punkt { opacity: .55; }

.lc-fuehrung {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  margin-left: -.4px; background: var(--text-3);
  opacity: 0; transition: opacity .16s;
}
.lc-spalte:hover .lc-fuehrung { opacity: .45; }
.lc-spalte:hover .lc-punkt { transform: scale(1.5); opacity: 1; }

.lc-tip {
  position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong);
  padding: 6px 10px; border-radius: var(--radius-s); font-size: 11px; font-weight: 600;
  line-height: 1.55; text-align: center; white-space: nowrap;
  pointer-events: none; z-index: 4; box-shadow: var(--shadow-2);
  animation: fade .14s var(--ease-out);
}
.lc-tip.unten { top: auto; bottom: 2px; }
.lc-tip[hidden] { display: none; }

.lc-tip { text-align: left; padding: 8px 12px; min-width: 168px; }
.lc-tip-monat {
  display: block; margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--bg-2) 22%, transparent);
  font-size: 12px;
}
.lc-tip-zeile {
  display: flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: 11px; line-height: 1.9;
}
.lc-tip-zeile b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.lc-tip-punkt {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
}
.lc-tip-punkt.umsatz { background: var(--accent); }
.lc-tip-punkt.gewinn { background: var(--stufe); }
.lc-tip-hoch, .lc-tip-runter, .lc-tip-gleich {
  flex: none; margin-left: 6px; padding: 1px 4px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.lc-tip-hoch   { background: color-mix(in srgb, var(--green) 26%, transparent); }
.lc-tip-runter { background: color-mix(in srgb, var(--orange) 26%, transparent); }
.lc-tip-gleich { background: color-mix(in srgb, var(--bg-2) 16%, transparent); opacity: .7; }
.lc-tip-fuss {
  display: block; margin-top: 4px; padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--bg-2) 22%, transparent);
  font-size: 10px; font-weight: 500; opacity: .75;
}

.lc-spalte:hover .lc-fuehrung { opacity: .6; }

.lc-monate { display: flex; padding-top: 8px; }
.lc-monate span {
  flex: 1; text-align: center;
  color: var(--text-3); font-size: 11px;
}
.lc-monate span.now { color: var(--accent); font-weight: 650; }

.legende {
  display: flex; gap: 18px; justify-content: center;
  padding-top: 6px; color: var(--text-2); font-size: 12px;
}
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.pkt { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.pkt.umsatz { background: var(--accent); }
.pkt.gewinn { background: var(--stufe); }

.table-scroll { overflow: auto; max-height: min(62vh, 620px); }

.liste { width: 100%; border-collapse: collapse; font-size: 13px; }
.liste th, .liste td {
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--line);
}
.liste td { white-space: normal; overflow-wrap: anywhere; }
.liste th, .liste td.n, .liste th.n, .liste .stat { white-space: nowrap; }

.liste th {
  color: var(--text-2); font-size: 11px; font-weight: 600;
  letter-spacing: .045em; text-transform: uppercase;
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  box-shadow: inset 0 -1px 0 var(--line);
}
.liste td.n, .liste th.n { text-align: right; font-variant-numeric: tabular-nums; }
.liste tbody tr:hover { background: var(--surface-2); }
.liste tr:last-child td { border-bottom: 0; }
.liste .summe td { font-weight: 650; border-top: 1.5px solid var(--line-strong); }

.field { margin-bottom: 14px; }
.labelrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.field label, .group-title {
  color: var(--text-2); font-size: 11px; font-weight: 600;
  letter-spacing: .045em; text-transform: uppercase;
}
.field .sub { display: block; margin-top: 4px; color: var(--text-3); font-size: 11px; }

input[type=text], input[type=number], input[type=date], input[type=search],
input[type=url], input[type=datetime-local],
select, textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  font-size: 14px;
  transition: border-color .16s, box-shadow .16s;
}
textarea { resize: vertical; line-height: 1.65; min-height: 90px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
select:hover { border-color: var(--line-strong); }

input[type=date]::-webkit-calendar-picker-indicator {
  opacity: .45;
  cursor: pointer;
  transition: opacity .16s;
}
input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
:root:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }
}

input[type=number] { appearance: textfield; -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { appearance: none; margin: 0; }

.fieldgrid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.fieldgrid .field { margin-bottom: 0; }
.fieldgrid.three { grid-template-columns: 1fr 1fr 1fr; }
.fieldgrid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .fieldgrid.four { grid-template-columns: 1fr 1fr; } }

.group { padding: 18px 0; border-bottom: 1px solid var(--line); }
.group:last-child { border-bottom: 0; }
.group-title { display: block; margin-bottom: 12px; }

.ausgabe-form {
  display: grid; gap: 10px;
  grid-template-columns: 150px 170px 1fr 120px auto;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.aufgabe-form {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: flex-end;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.aufgabe-form > input, .aufgabe-form > select, .aufgabe-form > .aw-feld {
  min-width: 0; flex: 1 1 130px;
}
.aufgabe-form > input[type="text"] { flex: 2 1 170px; }
.aufgabe-form > .btn { flex: 0 0 auto; }

.rank-row.erledigt .r-name { text-decoration: line-through; color: var(--text-3); }
.rank-row.erledigt .r-sub { opacity: .6; }
@media (max-width: 900px) { .ausgabe-form { grid-template-columns: 1fr 1fr; } }

.jahrwahl { width: auto; min-width: 110px; }

.overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  will-change: opacity;
  animation: schleier-auf var(--fenster-zu) var(--fenster-kurve) both;
}

.overlay.zu {
  animation: schleier-zu var(--fenster-zu) var(--fenster-kurve-zu) forwards;
}

.inspector {
  position: fixed; top: 50%; left: 50%; z-index: 71;
  width: min(1280px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  max-height: calc(100svh - 48px);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform, opacity;
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow: hidden;                 /* damit der Radius auch oben greift */
  animation: fenster-auf-mitte var(--fenster-auf) var(--fenster-kurve) both;
}
.inspector.zu {
  animation: fenster-zu-mitte var(--fenster-zu) var(--fenster-kurve-zu) forwards;
}

@keyframes fenster-auf-mitte {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.965); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fenster-zu-mitte {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(.975); }
}

@media (prefers-reduced-motion: reduce) {
  .overlay, .inspector, .overlay.zu, .inspector.zu { animation: none; }
}

.insp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.insp-title h2 { font-size: 17px; }
.path {
  display: block; margin-top: 2px;
  color: var(--text-3); font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  word-break: break-all;
}
.insp-body {
  flex: 1; overflow-y: auto; padding: 18px 22px 24px;
}
@media (max-width: 640px) {
  .inspector {
    width: calc(100vw - 16px); max-height: calc(100vh - 16px);
    width: calc(100vw - 16px); max-height: calc(100svh - 16px);
    border-radius: 14px;
  }
  .insp-body { padding: 12px 14px 18px; }
}
.insp-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.savehint { color: var(--text-3); font-size: 12px; }

.btn.gefahr {
  color: color-mix(in srgb, var(--orange) 80%, var(--text-2));
  border-color: transparent;
}
.btn.gefahr:hover:not(:disabled) {
  color: var(--orange); background: var(--orange-soft);
  border-color: color-mix(in srgb, var(--orange) 35%, transparent);
}
.savehint.up { color: var(--green); }

.shots-strip {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 16px 0 12px;
  scroll-snap-type: x mandatory;
}
.shot-item {
  position: relative; flex: none;
  width: 128px; aspect-ratio: 4/5;
  border-radius: var(--radius); overflow: hidden;
  background: var(--inset);
  border: 1px solid var(--line);
  scroll-snap-align: start;
}
.shot-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-tools {
  position: absolute; inset: auto 0 0 0;
  display: flex; gap: 4px; justify-content: center;
  padding: 6px;
  background: linear-gradient(to top, rgba(0,0,0,.66), transparent);
  opacity: 0; transition: opacity .18s;
}
.shot-item:hover .shot-tools { opacity: 1; }
@media (hover: none) { .shot-tools { opacity: 1; } }
.shot-btn.weg:hover { background: var(--orange); color: #fff; }
.shot-btn {
  border: 0; border-radius: var(--radius-s);
  background: rgba(255,255,255,.92); color: #111;
  padding: 2px 8px; font-size: 11px; font-weight: 600;
}
.shot-btn:hover { background: #fff; }

.sellbox {
  padding: 14px 16px; margin-top: 6px;
  border-radius: var(--radius);
  background: var(--green-soft);
  border: 1px solid color-mix(in srgb, var(--green) 26%, transparent);
}
.pricehint { color: var(--text-3); font-size: 11px; margin-top: 4px; }

.stb-kopf {
  display: grid; grid-template-columns: 184px minmax(0, 1fr);
  gap: 16px 26px; align-items: center;
  padding: 2px 0 22px;
}
.stb-i { width: 20px; height: 20px; flex: none; display: block; }
.stb-i.gross { width: 34px; height: 34px; }

.stb-stapel {
  position: relative; display: block; flex: none;
  width: 184px; height: 200px; padding: 0; margin: 0;
  border: 0; border-radius: 18px; background: none;
  color: inherit; font: inherit; cursor: pointer;
}
.stb-blatt {
  position: absolute; left: 26px; top: 12px;
  width: 132px; height: 165px;
  border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--inset);
  object-fit: cover;
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .65);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.stb-blatt.hinten-1 { transform: translate(-15px, 5px) rotate(-7deg); opacity: .62; }
.stb-blatt.hinten-2 { transform: translate(15px, 3px) rotate(6deg); opacity: .42; }
.stb-stapel:hover .stb-blatt.hinten-1 { transform: translate(-23px, 2px) rotate(-11deg); }
.stb-stapel:hover .stb-blatt.hinten-2 { transform: translate(23px, 0) rotate(10deg); }
.stb-stapel:hover .stb-blatt.oben { transform: translateY(-4px); }
.stb-anzahl {
  position: absolute; right: 34px; bottom: 31px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--bg-2) 84%, transparent);
  color: var(--text); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.stb-anzahl .stb-i { width: 13px; height: 13px; }

.stb-stapel.leer .stb-blatt {
  border: 1.5px dashed var(--line-strong); box-shadow: none;
}
.stb-stapel.leer .stb-blatt.hinten-1,
.stb-stapel.leer .stb-blatt.hinten-2 { background: none; opacity: .6; }
.stb-stapel.leer .stb-blatt.oben {
  display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 10px; text-align: center;
  color: var(--text-3); font-size: 12px; line-height: 1.35;
}
.stb-stapel.leer .stb-blatt.oben b { color: var(--accent); font-weight: 600; }
.stb-stapel.leer:hover .stb-blatt.oben { border-color: var(--accent); }

.stb-mitte { min-width: 0; display: grid; gap: 20px; }
.stb-schild { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.stb-preis { display: grid; gap: 4px; min-width: 96px; }
.stb-preis b {
  color: var(--text); font-size: 30px; line-height: 1; font-weight: 700;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
.stb-preis b.leer {
  color: var(--text-3); font-size: 17px; font-weight: 600;
  letter-spacing: 0; line-height: 1.25;
}
.stb-preis span { color: var(--text-3); font-size: 11px; }
.stb-fakten {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  margin: 0; padding: 0 0 0 28px; list-style: none;
  border-left: 1px dashed var(--line-strong); min-width: 0;
}
.stb-fakten li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px; row-gap: 1px; align-items: center; min-width: 0;
}
.stb-fakt-zeichen {
  grid-row: span 2; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--inset); color: var(--text-2);
}
.stb-fakt-zeichen .stb-i { width: 18px; height: 18px; }
.stb-fakt-name { color: var(--text-3); font-size: 11px; line-height: 1.2; }
.stb-fakten b {
  max-width: 18ch; color: var(--text);
  font-size: 14px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stb-fakten b.leer { color: var(--text-3); font-weight: 500; }

.stb-lauf { position: relative; }
.stb-linie {
  position: absolute; top: 17px; left: 17px; right: 17px;
  height: 2px; border-radius: 2px; background: var(--line-strong);
  overflow: hidden;
}
.stb-fuell {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--green);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.stb-weg {
  position: relative;
  display: flex; justify-content: space-between;
  margin: 0; padding: 0; list-style: none;
}
.stb-weg li {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: none; width: 34px; text-align: center; white-space: nowrap;
  color: var(--text-3); font-size: 11.5px; line-height: 1.2;
}
.stb-station {
  position: relative; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--bg-2); color: var(--text-3);
}
.stb-station .stb-i { width: 17px; height: 17px; }
.stb-weg li.vorbei { color: var(--text-2); }
.stb-weg li.vorbei .stb-station {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  background: linear-gradient(var(--green-soft), var(--green-soft)), var(--bg-2);
  color: var(--green);
}
.stb-weg li.jetzt { color: var(--text); font-weight: 600; }
.stb-weg li.jetzt .stb-station {
  border-color: var(--accent); background: var(--accent); color: var(--auf-accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.stb-station::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0; pointer-events: none;
}
.stb-wo { display: flex; justify-content: center; gap: 4px; margin-top: 1px; }
.stb-wo img { width: 16px; height: 16px; border-radius: 4px; display: block; }

.stb-offen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px;
}
.stb-offen-wort { color: var(--text-3); margin-right: 2px; }
.stb-luecke {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft); color: var(--text);
  font: inherit; font-size: 12px; cursor: pointer;
}
.stb-luecke::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.stb-luecke:hover { border-color: var(--accent); }
.stb-bereit {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--green); font-weight: 600;
}
.stb-bereit .stb-i { width: 16px; height: 16px; }

.stb-kopf.ein .stb-blatt.oben { animation: stb-oben .42s cubic-bezier(.2, .7, .2, 1); }
.stb-kopf.ein .stb-blatt.hinten-1 {
  animation: stb-faechern .6s cubic-bezier(.2, .7, .2, 1) .12s backwards;
}
.stb-kopf.ein .stb-blatt.hinten-2 {
  animation: stb-faechern .6s cubic-bezier(.2, .7, .2, 1) .18s backwards;
}
.stb-kopf.ein .stb-fuell { animation: stb-fuellen .8s cubic-bezier(.2, .7, .2, 1) .3s backwards; }
.stb-kopf.ein .stb-weg li.jetzt .stb-station::after { animation: stb-puls 1.3s ease-out 1s 2; }
@keyframes stb-oben { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes stb-faechern { from { transform: none; } }
@keyframes stb-fuellen { from { transform: scaleX(0); } }
@keyframes stb-puls {
  from { opacity: .75; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.75); }
}
.stb-tafel:not([hidden]) { animation: stb-tafel .22s ease-out; }
@keyframes stb-tafel { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .stb-kopf.ein .stb-blatt.oben, .stb-kopf.ein .stb-blatt.hinten-1,
  .stb-kopf.ein .stb-blatt.hinten-2, .stb-kopf.ein .stb-fuell,
  .stb-kopf.ein .stb-weg li.jetzt .stb-station::after,
  .stb-tafel:not([hidden]) { animation: none; }
  .stb-blatt, .stb-fuell { transition: none; }
}

.stb-reiter {
  display: flex; gap: 6px; margin: 0 0 20px; padding: 4px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  overflow-x: auto; scrollbar-width: none;
}
.stb-reiter::-webkit-scrollbar { display: none; }
.stb-tab {
  flex: 1 1 0; min-width: max-content;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 14px; border: 0; border-radius: calc(var(--radius) - 5px);
  background: transparent; color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.stb-tab:hover { color: var(--text); background: var(--inset); }
.stb-tab.an {
  color: var(--text); background: var(--inset);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}
.stb-kreis {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--inset); color: var(--text-2);
}
.stb-tab.an .stb-kreis { background: var(--accent-soft); color: var(--accent); }
.stb-kreis .stb-i { width: 17px; height: 17px; }
.stb-zahl {
  display: none; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.stb-zahl.offen { display: inline-grid; background: var(--accent); color: var(--auf-accent); }
.stb-n { text-box: trim-both cap alphabetic; }
.stb-zahl.fertig { display: inline-grid; padding: 0; color: var(--green); }
.stb-zahl.fertig .stb-i { width: 14px; height: 14px; }
.stb-tab:focus-visible, .stb-luecke:focus-visible, .stb-paket:focus-visible,
.stb-fuer-wahl:focus-visible, .stb-stapel:focus-visible, .stb-foto-leer:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.stb-tafel[hidden] { display: none; }
.stb-zwei {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: 0 26px; align-items: start;
}
.stb-spalte { min-width: 0; display: flex; flex-direction: column; }
.stb-tafel > .stb-spalte > .group:first-child,
.stb-angaben > .group { padding-top: 0; }
.stb-angaben > .group {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: 0 26px; align-items: start; border-bottom: 0;
}
.stb-angaben > .group > .group-title { grid-column: 1 / -1; }
.stb-angaben > .group > #vqArtikel { grid-column: 1; grid-row: 2 / span 6; }
.stb-angaben > .group > .field,
.stb-angaben > .group > #vqPaket { grid-column: 2; }
@media (max-width: 1100px) {
  .stb-zwei { grid-template-columns: minmax(0, 1fr); }
  .stb-angaben > .group { grid-template-columns: minmax(0, 1fr); }
  .stb-angaben > .group > #vqArtikel { grid-column: 1; grid-row: auto; }
  .stb-angaben > .group > .field,
  .stb-angaben > .group > #vqPaket { grid-column: 1; }
}

#stbTafel-fotos .shots-strip {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; padding: 0 0 14px; overflow: visible; scroll-snap-type: none;
}
#stbTafel-fotos .shot-item { width: auto; }
.stb-foto-leer {
  display: grid; justify-items: center; gap: 8px;
  margin-bottom: 14px; padding: 44px 20px; text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-l);
  color: var(--text-2); cursor: pointer;
}
.stb-foto-leer .stb-i { color: var(--accent); }
.stb-foto-leer b { color: var(--text); font-size: 15px; }
.stb-foto-leer span { max-width: 46ch; color: var(--text-3); font-size: 12px; }
.stb-foto-leer:hover { border-color: var(--accent); }

.field .stb-label {
  color: var(--text-2); font-size: 11px; font-weight: 600;
  letter-spacing: .045em; text-transform: uppercase;
}

.stb-pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stb-paket {
  display: grid; justify-items: start; align-content: start; gap: 4px;
  padding: 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text-2); font: inherit;
}
.stb-paket .stb-paketbild { width: 30px; height: 30px; margin-bottom: 4px; }
.stb-paket b { color: var(--text); font-size: 13px; }
.stb-paket span { color: var(--text-3); font-size: 11px; line-height: 1.35; }
.stb-paket:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.stb-paket.an { border-color: var(--accent); background: var(--accent-soft); }
.stb-paket.an .stb-paketbild { color: var(--accent); }

.stb-fuer-feld { grid-column: 1 / -1; }
.stb-fuer { display: flex; flex-wrap: wrap; gap: 6px; }
.stb-fuer-wahl {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px 7px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-2); font: inherit; font-size: 13px;
}
.stb-fuer-wahl .stb-i { width: 17px; height: 17px; }
.stb-fuer-wahl:hover { color: var(--text); }
.stb-fuer-wahl.an {
  border-color: var(--accent); background: var(--accent-soft); color: var(--text);
}
.stb-fuer-wahl.an .stb-i { color: var(--accent); }

.kb-feld {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 0 12px; padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface);
}
.kb-jetzt { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kb-kreis {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.kb-kreis .stb-i { width: 18px; height: 18px; }
.kb-feld.gewaehlt .kb-kreis { background: var(--green-soft); color: var(--green); }
.kb-feld.fehlt .kb-kreis { background: var(--orange-soft); color: var(--orange); }
.kb-text { display: grid; gap: 1px; min-width: 0; }
.kb-text b { font-size: 14px; font-weight: 650; color: var(--text); line-height: 1.3; }
.kb-text b.leer { color: var(--orange); }
.kb-text small {
  font-size: 12px; color: var(--text-3); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-tafel {
  grid-column: 1 / -1; display: grid; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
}
.kb-tafel[hidden] { display: none; }
.kb-suche {
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg-2);
}
.kb-suche .stb-i { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.kb-suche input {
  flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: 0;
  background: transparent; color: var(--text); font: inherit; font-size: 14px;
}
.kb-suche input:focus { box-shadow: none; }
.kb-suche:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.kb-krumen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px;
  font-size: 12.5px; color: var(--text-3);
}
.kb-krume {
  padding: 3px 5px; border: 0; border-radius: 6px; background: none;
  color: var(--text-2); font: inherit; cursor: pointer;
}
.kb-krume:last-of-type { color: var(--text); font-weight: 650; }
.kb-krume:hover { background: var(--surface-2); color: var(--text); }
.kb-krume:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.kb-liste {
  list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--line); border-radius: 10px; overscroll-behavior: contain;
}
.kb-liste li + li { border-top: 1px solid var(--line); }
.kb-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 10px 12px; border: 0; background: none; cursor: pointer;
  color: var(--text); font: inherit; font-size: 14px; text-align: left;
}
.kb-zeile:hover { background: var(--surface-2); }
.kb-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kb-zeile.an { font-weight: 650; }
.kb-name { display: grid; gap: 2px; min-width: 0; }
.kb-name small { font-size: 12px; font-weight: 400; color: var(--text-3); }
.kb-pfeil { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.kb-punkt {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
}
.kb-zeile.an .kb-punkt {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 3.5px, transparent 4px);
}
.kb-nichts { padding: 14px 12px; font-size: 13px; color: var(--text-3); }
.kb-fuss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0; font-size: 12px; color: var(--text-3);
}
.kb-fuss span:only-child { margin-left: auto; }
@media (prefers-reduced-motion: no-preference) {
  .kb-tafel:not([hidden]) { animation: kb-auf .18s ease-out; }
}
@keyframes kb-auf { from { opacity: 0; transform: translateY(-4px); } }

#stbTafel-anzeigen .pf-wahl {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  margin: 0 0 14px; padding: 0; border: 0;
}
#stbTafel-anzeigen .cx-tab {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px; row-gap: 4px; align-items: center; text-align: left;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 650;
  transition: none;
}
#stbTafel-anzeigen .cx-tab-logo {
  grid-row: span 2; width: 32px; height: 32px; border-radius: 9px;
  margin: 0; vertical-align: 0;
}
#stbTafel-anzeigen .cx-tab-name { line-height: 1.2; }
#stbTafel-anzeigen .cx-tab .pf-stand {
  justify-self: start; margin: 0; padding: 1px 8px; font-size: 11px;
}
#stbTafel-anzeigen .pf-stand:empty { display: none; }
#stbTafel-anzeigen .cx-tab:hover { border-color: var(--line-strong); }
#stbTafel-anzeigen .cx-tab.on {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--text); font-weight: 650;
}
#stbTafel-anzeigen .cx-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#stbTafel-anzeigen .pf-kopf { display: none; }
#stbTafel-anzeigen .pf-block { margin: 0; border-color: var(--line-strong); }
#stbTafel-anzeigen .pf-inhalt { border-top: 0; padding: 6px 20px 20px; }
.pf-spalten {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 0 30px; align-items: start;
}
.pf-text, .pf-rand { min-width: 0; }

#stbTafel-crosslisting > .group { padding-top: 0; border-bottom: 0; }
#stbTafel-crosslisting .vassist { max-width: 940px; margin-bottom: 0; padding: 18px 20px; }
#stbTafel-crosslisting .cx-karten {
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 6px 0 16px;
}
#stbTafel-crosslisting .cx-karte { padding: 14px; gap: 12px; }
#stbTafel-crosslisting .cx-zeichen { width: 42px; height: 42px; border-radius: 12px; }
#stbTafel-crosslisting .cx-logo { width: 26px; height: 26px; border-radius: 6px; }
#stbTafel-crosslisting .cx-name { font-size: 14px; }
.va-weiter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

@media (max-width: 900px) {
  .pf-spalten { grid-template-columns: minmax(0, 1fr); }
  #stbTafel-crosslisting .cx-karten { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .stb-kopf { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
  .stb-mitte { display: contents; }
  .stb-lauf, .stb-offen { grid-column: 1 / -1; }
  .stb-stapel { width: 124px; height: 140px; }
  .stb-blatt { left: 18px; top: 10px; width: 88px; height: 110px; border-radius: 12px; }
  .stb-anzahl { right: 24px; bottom: 26px; }
  .stb-schild { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stb-preis b { font-size: 24px; }
  .stb-fakten {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px;
    padding-left: 0; border-left: 0; width: 100%;
  }
  .stb-fakt-zeichen { width: 28px; height: 28px; }
  .stb-fakt-zeichen .stb-i { width: 15px; height: 15px; }
  .stb-fakten b { max-width: none; font-size: 13px; }
  .stb-station { width: 30px; height: 30px; }
  .stb-station .stb-i { width: 15px; height: 15px; }
  .stb-linie { top: 15px; left: 15px; right: 15px; }
  .stb-weg li { width: 30px; font-size: 10.5px; }
  .stb-pakete { grid-template-columns: minmax(0, 1fr); }
  .stb-paket { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .stb-paket .stb-paketbild { grid-row: span 2; margin: 0; }
  .stb-reiter { gap: 2px; }
  .stb-tab {
    position: relative; min-width: 0; flex-direction: column; gap: 5px;
    padding: 8px 2px; font-size: 11px;
  }
  .stb-tab .stb-zahl { position: absolute; top: 4px; left: calc(50% + 8px); }
  #stbTafel-anzeigen .pf-wahl { gap: 6px; }
  #stbTafel-anzeigen .cx-tab {
    grid-template-columns: minmax(0, 1fr); justify-items: center;
    text-align: center; padding: 10px 6px; font-size: 12px;
  }
  #stbTafel-anzeigen .cx-tab-logo { grid-row: auto; width: 28px; height: 28px; }
  #stbTafel-anzeigen .cx-tab .pf-stand {
    justify-self: center; font-size: 10px; white-space: normal; text-align: center;
  }
  #stbTafel-anzeigen .pf-inhalt { padding: 4px 14px 16px; }
}
.warnzeile {
  padding: 10px 14px; border-radius: var(--radius-s);
  background: var(--orange-soft); color: var(--orange);
  font-size: 12px; margin-bottom: 12px;
}
.warnzeile.gross {
  padding: 14px 18px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
  font-size: 13px; line-height: 1.55; margin-bottom: 20px;
}
.warnzeile.gross strong { color: var(--text); }
.warnzeile.ruhig {
  background: var(--inset); color: var(--text-2);
  border: 1px solid var(--line);
}

.titel-marke {
  position: absolute; top: 7px; left: 7px;
  padding: 2px 6px; border-radius: var(--radius-s);
  font-size: 10px; font-weight: 650;
  background: var(--accent); color: var(--auf-accent);
}

.ki-marke {
  position: absolute; top: 7px; right: 7px;
  padding: 2px 6px; border-radius: var(--radius-s);
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  background: var(--accent); color: var(--auf-accent);
}

.stat {
  display: inline-block;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--inset); color: var(--text-2);
}
.stat.online     { background: var(--green-soft);  color: var(--green); }
.stat.reserviert { background: var(--orange-soft); color: var(--orange); }
.stat.verkauft,
.stat.versendet,
.stat.zugestellt { background: var(--accent-soft); color: var(--accent); }

.euer { padding: 4px 20px 8px; }
.euer .r-row { padding-left: 0; padding-right: 0; }
.euer .ergebnis td, .liste tr.ergebnis td {
  font-weight: 700; border-top: 1.5px solid var(--line-strong);
}
.euer table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.euer td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.euer td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.euer tr.gruppe td {
  padding: 18px 10px 6px; border-bottom: 2px solid var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.euer tr.summe td {
  font-weight: 700; background: var(--inset);
  border-top: 2px solid var(--line-strong); border-bottom: 0;
}
.euer tr.ergebnis td {
  font-size: 16px; color: var(--accent); background: var(--accent-soft);
  border-top: 3px double var(--accent); border-bottom: 0; padding: 12px 10px;
}
.euer tr.ergebnis td.minus { color: var(--red); }
.euer .warnzeile {
  margin: 10px 0 4px; padding: 10px 14px; border-radius: var(--radius-s);
  background: var(--orange-soft); color: var(--orange); font-size: 13px;
}

.vk-offen {
  margin: 12px 16px 4px; padding: 12px 14px 8px;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--orange) 45%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 8%, transparent);
}
.vo-kopf { display: grid; gap: 2px; margin: 0 0 10px; }
.vo-kopf b { font-size: 14px; color: var(--orange); }
.vo-kopf span { font-size: 12.5px; color: var(--text-3); }
.vo-zeile {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 150px 120px 120px auto;
  gap: 10px; align-items: center; padding: 8px 0;
  border-top: 1px solid var(--line);
}
.vo-zeile .r-bild { width: 44px; height: 44px; border-radius: var(--radius-s); object-fit: cover; }
.vo-zeile .r-bild.leer { display: grid; place-items: center; background: var(--inset); color: var(--text-3); }
.vo-feld { display: grid; gap: 3px; }
.vo-feld span { font-size: 10.5px; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.vo-feld input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 6px 8px; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: var(--inset); color: var(--text);
}
.vo-feld input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.vo-mehr { padding: 8px 0 2px; font-size: 12px; color: var(--text-3); }
@media (max-width: 900px) {
  .vo-zeile { grid-template-columns: 44px minmax(0, 1fr); }
  .vo-zeile .vo-feld, .vo-zeile .btn { grid-column: 2; }
}

.ab-oben {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
  gap: 18px; padding: 14px 20px 16px; border-bottom: 1px solid var(--line);
}
.ab-links, .ab-rechts { display: grid; gap: 8px; align-content: start; }
.ab-titel {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.ab-oben .ausgabe-form {
  padding: 0; border: 0; grid-template-columns: 1fr 1fr;
}
.ab-oben .ausgabe-form #agText { grid-column: 1 / -1; }
.ab-oben .ausgabe-form button { justify-self: start; }
.ab-marke {
  flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px;
  color: var(--orange); background: var(--orange-soft);
}
.rank-row.ohne-beleg .r-name::after {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--orange); margin-left: 8px; vertical-align: 2px;
}
@media (max-width: 900px) { .ab-oben { grid-template-columns: 1fr; } }
.datei {
  margin-top: 10px; padding: 10px 14px;
  border-radius: var(--radius-s);
  background: var(--green-soft); color: var(--green);
  font-size: 12px;
}

.ul-kasten.afhilfe { max-width: 620px; }
.afhilfe-lauf { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.afhilfe-warum { margin: 0 0 12px; }
.afhilfe-notiz {
  margin: 0 0 16px; padding: 10px 13px; border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--text-3);
  font-size: 12.5px; line-height: 1.55;
}
.afhilfe-uber {
  margin: 0 0 10px; color: var(--text-2);
  font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.afhilfe-schritte {
  list-style: none; counter-reset: afh; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.afhilfe-schritte li {
  counter-increment: afh; position: relative; padding-left: 34px;
}
.afhilfe-schritte li::before {
  content: counter(afh);
  position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 750;
}

.afz {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: auto auto 1fr auto auto;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .15s, background .15s;
}
.afz + .afz { margin-top: 8px; }
.afz:hover { border-color: var(--accent-soft); background: var(--surface-2); }
.afz.erledigt { opacity: .5; }
.afz.erledigt .afz-name { text-decoration: line-through; }

.afz-bild {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
}
.afz-bild svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.afz-text { min-width: 0; }
.afz-name { font-weight: 600; font-size: 14px; color: var(--text); }
.afz-notiz {
  margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--text-3);
}
.afz-rechts {
  display: grid; justify-items: end; gap: 4px; text-align: right;
}
.afz-kat {
  display: inline-block;
  padding: 2px 9px; border-radius: 999px;
  background: var(--inset);
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
}
.afz .r-del .stb-i { width: 14px; height: 14px; display: block; }
.afz.wird-erledigt .af-haken { animation: afzHaken .38s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes afzHaken { 45% { transform: scale(1.28); } }
.afz.wird-erledigt .afz-name span {
  background: linear-gradient(currentColor, currentColor) 0 58% / 0% 1.5px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  animation: afzStrich .34s ease-out .08s forwards;
}
@keyframes afzStrich { to { background-size: 100% 1.5px; } }
.afz.wird-erledigt { animation: afzLeiser .4s ease-out .3s forwards; }
@keyframes afzLeiser { to { opacity: .5; } }
.afz-datum { font-size: 12px; color: var(--text-3); }
.afz.spaet .afz-datum { color: var(--red); font-weight: 600; }
.afz.spaet .afz-bild {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
}
.afz-tat { flex: none; white-space: nowrap; }

@media (max-width: 720px) {
  .afz { grid-template-columns: auto auto 1fr; row-gap: 8px; }
  .afz-rechts { grid-column: 2 / -1; justify-items: start; text-align: left;
                grid-auto-flow: column; gap: 10px; }
  .afz-tat { grid-column: 2 / -1; justify-self: start; }
}

.sk-weit {
  display: grid; gap: 14px; margin: 4px 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.skw-karte {
  padding: 18px; border-radius: var(--radius-l);
  border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; gap: 10px;
}
.skw-karte.gold { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.skw-kopf { display: flex; align-items: baseline; justify-content: space-between;
            gap: 10px; }
.skw-kopf b { font-size: 15px; }
.skw-preis { font-size: 13px; color: var(--accent); font-weight: 700;
             font-variant-numeric: tabular-nums; }
.skw-preis i { font-style: normal; color: var(--text-3); font-weight: 500; }
.skw-menge {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.skw-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.skw-liste li { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.skw-liste b {
  display: inline-block; min-width: 2.4em;
  color: var(--accent); font-size: 17px; font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.skw-liste i { display: block; margin-left: 2.4em;
               font-style: normal; font-size: 11.5px; color: var(--text-3); }
.skw-oder, .skw-frei { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.skw-frei { margin: 0; }
.skw-frei b { color: var(--accent); font-weight: 700; }

.sk-tafel-huelle { overflow-x: auto; margin: 4px 0 10px; }
@media (min-width: 720px) {
  .sk-tafel-huelle { overflow: visible; }
}
.sk-tafel {
  min-width: 620px;
  border: 1px solid var(--line); border-radius: var(--radius-l);
  background: var(--surface); overflow: hidden;
}
.skt-reihe {
  display: grid; grid-template-columns: minmax(200px, 1.5fr) repeat(3, minmax(120px, 1fr));
  border-top: 1px solid var(--line);
}
.skt-reihe:first-child { border-top: 0; }
.skt-zelle { padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.skt-was b { font-size: 14px; font-weight: 650; }
.skt-was i { font-style: normal; font-size: 12px; color: var(--text-3); margin-top: 2px; }
.skt-kopf { background: var(--inset); }
.skt-kopf .skt-was {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); justify-content: flex-end;
}
.skt-paket { align-items: center; text-align: center; gap: 2px; }
.skt-paket b { font-size: 15px; }
.skt-preis { font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.skt-preis i { font-style: normal; font-weight: 500; color: var(--text-3); }
.skt-menge { font-style: normal; font-size: 11px; color: var(--text-3); }
.skt-zahl { align-items: center; text-align: center; }
.skt-zahl b { font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.skt-strich { font-size: 20px; color: var(--text-3); }
.skt-nur-pro { font-size: 12px; font-weight: 600; color: var(--text-3); }
.skt-zelle.gold { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.skt-kopf .skt-zelle.gold { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.skt-zahl.gold b { color: var(--accent); }
.skt-beispiel { background: var(--inset); }
.skt-beispiel .skt-was b { color: var(--accent); }
.skt-passt { display: grid; gap: 2px; font-size: 13px; font-weight: 700; }
.skt-passt i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-3); }
.skt-passt.ja { color: var(--green); }
.skt-passt.nein { color: var(--orange); }
.skt-passt.nachladen { color: var(--text-3); font-weight: 600; font-size: 12px; }
.skt-fuss { margin: 10px 0 18px; font-size: 12.5px; color: var(--text-3); line-height: 1.55; }
.skt-fuss b { color: var(--accent); }

.sk-einzeln { margin-bottom: 14px; }
.sk-einzeln summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-3);
  padding: 6px 0; list-style-position: inside;
}
.sk-einzeln summary:hover { color: var(--accent); }

.toast {
  position: fixed; left: 50%; bottom: 30px; z-index: 90;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 13px;
  max-width: min(620px, calc(100vw - 40px));
  padding: 15px 18px 16px; border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  animation: toastin .3s var(--ease-out);
}
@keyframes toastin { from { transform: translate(-50%, 14px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

.toast.geht { animation: toastraus .22s var(--ease) forwards; }
@keyframes toastraus {
  to { transform: translate(-50%, 10px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .toast.geht { animation: none; opacity: 0; }
}

.toast-uhr {
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: 100%; transform-origin: left;
  background: var(--accent); opacity: .55;
  animation: toastuhr linear forwards;
}
@keyframes toastuhr { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast:hover .toast-uhr { animation-play-state: paused; }
.toast.fehler .toast-uhr { background: var(--red); }
.toast.gut .toast-uhr { background: var(--green); }

.toast-zeichen {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: var(--radius-s);
  background: var(--accent-soft); color: var(--accent);
  font-size: 15px; font-weight: 700; line-height: 1;
}
.toast-text {
  margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 500;
}
.toast-text b { font-weight: 700; color: var(--text); }
.toast-hilfe {
  flex: none; border: 1px solid var(--accent); background: transparent;
  color: var(--accent); border-radius: 999px; padding: 4px 12px;
  font-size: 11.5px; font-weight: 650; cursor: pointer;
  transition: background .16s;
}
.toast-hilfe:hover { background: var(--accent-soft); }

.toast-weg {
  flex: none; margin: -2px -4px 0 4px;
  width: 24px; height: 24px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--text-3);
  font: inherit; font-size: 13px; cursor: pointer;
}
.toast-weg:hover { background: var(--inset); color: var(--text); }

.toast.lang { text-align: left; align-items: flex-start; padding: 16px 18px 17px; }
.toast.lang .toast-text { font-size: 14px; }
.toast.fehler .toast-zeichen { background: var(--red-soft); color: var(--red); }
.toast.gut .toast-zeichen { background: var(--green-soft); color: var(--green); }

.foto-leiste {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 16px;
}
.foto-leiste .hint { font-size: 11px; }

.crop-lage {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(6px);
  animation: cropauf .16s var(--ease-out);
}
@keyframes cropauf { from { opacity: 0; } }

.crop-fenster {
  display: flex; flex-direction: column; gap: 14px;
  max-width: min(860px, 92vw); max-height: 92vh;
  padding: 18px; border-radius: var(--radius-xl);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.crop-kopf { display: flex; align-items: center; gap: 12px; }
.crop-kopf .hint { flex: 1; font-size: 12px; }

.crop-buehne {
  position: relative; overflow: hidden; min-height: 0;
  display: grid; place-items: center;
  border-radius: var(--radius); background: var(--inset);
  cursor: crosshair; touch-action: none; user-select: none;
}

.crop-flaeche {
  position: relative;
  line-height: 0;
  max-width: 100%;
}
.crop-buehne img {
  display: block; max-width: 100%; max-height: 62vh;
  margin: 0 auto; -webkit-user-drag: none;
}

.crop-leinwand {
  display: block; max-width: 100%; max-height: 62vh;
  margin: 0 auto; -webkit-user-drag: none;
}

.crop-gitter {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(to right,  rgba(0,0,0,.22) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.22) 1px, transparent 1px);
  background-size:
    33.333% 100%, 100% 33.333%,
    33.333% 100%, 100% 33.333%;
  background-position: 0 0, 0 0, 1px 0, 0 1px;
  mix-blend-mode: normal;
}

.crop-modus {
  display: flex; gap: 6px; padding: 10px 2px 0;
}
.crop-modus-knopf {
  all: unset; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 13px;
  color: var(--text-2);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.crop-modus-knopf:hover { color: var(--text); border-color: var(--accent); }
.crop-modus-knopf.ist-an {
  background: var(--accent); border-color: var(--accent);
  color: var(--auf-accent); font-weight: 600;
}
.crop-modus-knopf:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.crop-schieber {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 2px 0;
}
.crop-schieber .hint {
  flex: 1 1 auto; font-variant-numeric: tabular-nums; font-size: 12px;
}

.crop-regler {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px 2px;
}
.crop-regler label {
  flex: none; font-size: 13px; font-weight: 600;
  color: var(--text-2);
}
.crop-regler input[type="range"] {
  flex: 1 1 auto; min-width: 0; accent-color: var(--accent);
  cursor: pointer;
}
.crop-regler output {
  flex: none; min-width: 4.2em; text-align: right;
  font-variant-numeric: tabular-nums; font-size: 13px;
  color: var(--text, inherit);
}
.crop-rahmen {
  position: absolute; left: 0; top: 0; pointer-events: none;
  border: 2px solid var(--accent);
  will-change: transform;
}

.crop-dunkel {
  position: absolute; inset: 0; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
}

.crop-rahmen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.42) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.42) 1px, transparent 1px);
  background-size: 33.34% 33.34%;
  background-position: -1px -1px;
}

.crop-rahmen::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 14px 3px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 0 / 3px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 14px 3px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 3px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 14px 3px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 3px 14px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 14px 3px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 3px 14px no-repeat;
}
.crop-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crop-fuss .hint { flex: 1 1 140px; font-variant-numeric: tabular-nums; }

.ab {
  display: inline-block; margin-left: 8px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.ab.gut  { background: var(--green-soft);  color: var(--green); }
.ab.nah  { background: var(--accent-soft); color: var(--accent); }
.ab.weit { background: var(--orange-soft); color: var(--orange); }

.r-zitat {
  margin-top: 4px; color: var(--text-2); font-size: 12px;
  font-style: italic; overflow-wrap: anywhere;
}

.vassist {
  margin-bottom: 18px; padding: 14px;
  border-radius: var(--radius-l);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
}
.va-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.va-kopf strong { font-size: 13px; }
.va-kopf .hint { margin-left: auto; font-size: 11px; }
.va-punkt {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none;
}
.va-schritte { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.va-schritte .btn { flex: 1 1 auto; text-align: center; }
.vassist .btn.big { width: 100%; padding: 10px 18px; font-size: 14px; }

.va-sperre {
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--orange-soft); color: var(--orange);
  font-size: 12px; font-weight: 550;
}
.va-sperre code {
  display: block; margin-top: 4px; font-size: 12px;
  color: var(--text); font-weight: 400;
}

.va-hand { margin-top: 12px; }
.va-hand summary {
  cursor: pointer; color: var(--text-3); font-size: 12px;
  padding: 4px 0; user-select: none;
}
.va-hand summary:hover { color: var(--text-2); }
.va-hand[open] summary { margin-bottom: 10px; }

.va-felder { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.va-label {
  width: 100%; color: var(--text-2); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px;
}
.chip-copy {
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font-size: 12px; font-weight: 550;
  font-family: inherit;
  transition: background .16s, border-color .16s, color .16s;
}
.chip-copy:hover { border-color: var(--accent); color: var(--accent); }
.chip-copy.kopiert {
  background: var(--green-soft); border-color: var(--green); color: var(--green);
}
.chip-copy.kopiert::after { content: " ✓"; }
.va-fuss { margin: 12px 0 0; font-size: 11px; }

.beleg-oben {
  display: grid; grid-template-columns: 1fr 220px; gap: 16px;
  align-items: stretch; margin-bottom: 16px;
}
@media (max-width: 860px) { .beleg-oben { grid-template-columns: 1fr; } }

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  min-height: 132px; padding: 20px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-l);
  background: var(--inset); cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s var(--ease-out);
}
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.drueber {
  border-color: var(--accent); background: var(--accent-soft);
  border-style: solid; transform: scale(1.008);
}
.dropzone.gesperrt { cursor: not-allowed; opacity: .62; }
.dropzone.gesperrt:hover { border-color: var(--line-strong); background: var(--inset); }
.dz-icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  margin-bottom: 4px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.dz-icon svg { width: 22px; height: 22px; }
.dz-titel { font-weight: 600; font-size: 14px; }
.dz-sub   { color: var(--text-3); font-size: 12px; }

.beleg-jahr {
  display: flex; flex-direction: column; justify-content: center;
  padding: 18px; border-radius: var(--radius-l);
  background: var(--surface-2); border: 1px solid var(--line);
}
.bj-zahl  { font-size: 24px; font-weight: 700; letter-spacing: -.02em;
            font-variant-numeric: tabular-nums; }
.bj-label { color: var(--text-2); font-size: 12px; margin-top: 2px; }
.bj-sub   { color: var(--text-3); font-size: 11px; margin-top: 6px; }
.bj-warn  { color: var(--orange); font-size: 11px; margin-top: 8px; font-weight: 600; }

.beleg-pruefung:not(:empty) { display: grid; gap: 14px; margin-bottom: 18px; }

.beleg-karte {
  display: grid; grid-template-columns: 132px 1fr; gap: 16px;
  padding: 14px; border-radius: var(--radius-l);
  border: 1px solid var(--accent); background: var(--surface-2);
  animation: belegrein .24s var(--ease-out);
}
@keyframes belegrein { from { opacity: 0; transform: translateY(6px); } }
.beleg-karte.laeuft, .beleg-karte.fehler { grid-template-columns: 1fr; }
.beleg-karte.fehler { border-color: var(--orange); }

.bk-vorschau {
  display: block; aspect-ratio: 3/4; border-radius: var(--radius);
  overflow: hidden; background: var(--inset); border: 1px solid var(--line);
}
.bk-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-pdf {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-weight: 700; font-size: 15px; color: var(--text-3); letter-spacing: .06em;
}

.bk-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bk-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bk-kopf strong { font-size: 14px; overflow-wrap: anywhere; }
.bk-sicher { color: var(--text-3); font-size: 11px; margin-left: auto; white-space: nowrap; }
.bk-sicher.schwach { color: var(--orange); font-weight: 600; }

.bk-warnungen { display: flex; flex-wrap: wrap; gap: 6px; }
.warnchip {
  padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--orange-soft); color: var(--orange);
}
.warnchip.info { background: var(--accent-soft); color: var(--accent); font-weight: 500; }

.bk-felder {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.bk-felder .weit { grid-column: 1 / -1; }
.bk-felder label {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--text-2); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.bk-felder input, .bk-felder select { width: 100%; min-width: 0; }

.bk-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-fuss .hint { flex: 1 1 220px; font-size: 11px; }
.bk-laden { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; }

.spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: dreh .7s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

.btn.mini { padding: 4px 10px; font-size: 11px; }

.anmeldeseite { min-height: 100vh; display: grid; place-items: center; overflow: hidden; }

.an-hintergrund { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.an-blase {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
  animation: schweben 26s ease-in-out infinite;
}
.an-blase.b1 { width: 46vw; height: 46vw; left: -12vw; top: -10vw; background: var(--accent); }
.an-blase.b2 { width: 38vw; height: 38vw; right: -10vw; bottom: -12vw;
               background: var(--green); animation-delay: -9s; }
.an-blase.b3 { width: 28vw; height: 28vw; left: 45%; top: 55%;
               background: var(--orange); animation-delay: -17s; opacity: .35; }
@keyframes schweben {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(4vw, -3vh) scale(1.08); }
  66%      { transform: translate(-3vw, 4vh) scale(.95); }
}

.an-mitte { position: relative; z-index: 1; padding: 24px; width: min(430px, 92vw); }
.an-karte {
  padding: 30px 28px 26px; border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(22px) saturate(150%);
  animation: karteRein .5s var(--ease-out) both;
}
@keyframes karteRein { from { opacity: 0; transform: translateY(16px) scale(.98); } }

.an-marke { display: flex; align-items: center; gap: 10px; }
.an-marke { display: flex; align-items: center; gap: 11px; }
.an-marke .brand-rund { width: 38px; height: 38px; }
.bw-marke { justify-content: center; margin-bottom: 22px; }
.an-claim { margin: 6px 0 20px; color: var(--text-3); font-size: 11px;
            letter-spacing: .1em; text-transform: uppercase; }

.an-schalter { display: flex; gap: 4px; padding: 4px; margin-bottom: 18px;
               border-radius: 999px; background: var(--inset); }
.an-tab { flex: 1; padding: 8px; border: 0; border-radius: 999px; cursor: pointer;
          background: transparent; color: var(--text-2); font: inherit; font-size: 13px;
          transition: background .18s, color .18s; }
.an-tab.on { background: var(--surface); color: var(--text); font-weight: 600;
             box-shadow: var(--shadow-1); }

.an-feld { display: block; margin-bottom: 12px; }
.an-feld span { display: block; margin-bottom: 4px; color: var(--text-2);
                font-size: 11px; font-weight: 600; letter-spacing: .04em;
                text-transform: uppercase; }
.an-feld input { width: 100%; }
.an-fehler { margin: 4px 0 12px; padding: 8px 12px; border-radius: var(--radius);
             background: var(--orange-soft); color: var(--orange);
             font-size: 12px; font-weight: 550;
             animation: ruckeln .3s; }
@keyframes ruckeln { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.an-hinweis { margin: 14px 0 0; color: var(--text-3); font-size: 11px; text-align: center; }

.an-merken {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 4px;
  color: var(--text-2); font-size: 13px; cursor: pointer;
  user-select: none;
}
.an-merken input {
  width: 17px; height: 17px; flex: none;
  accent-color: var(--accent); cursor: pointer;
}
.an-merken:hover { color: var(--text); }

.an-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 2px 0 4px;
}
.an-zeile .an-merken { margin: 0; }
.an-vergessen {
  color: var(--text-3); font-size: 12px; text-decoration: none;
  white-space: nowrap;
}
.an-vergessen:hover { color: var(--accent); text-decoration: underline; }

.an-nochmal {
  display: block; margin: -6px 0 12px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--accent); font: inherit; font-size: 12px; font-weight: 550;
  text-decoration: underline; text-underline-offset: 3px;
}
.an-nochmal:hover { color: var(--text); }
.an-nochmal:disabled { color: var(--text-3); cursor: default; text-decoration: none; }

.an-falle {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

.tagesspruch {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--text-3);
  font-size: 13px; font-style: italic; line-height: 1.5;
  max-width: 52ch;
}
.tagesspruch span {
  display: inline-block;
  animation: spruchRein .7s .35s var(--ease-out) both;
}
@keyframes spruchRein {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: none; }
}

.kk-eintrag.gefahr { color: color-mix(in srgb, var(--orange) 80%, var(--text-2)); }
.kk-eintrag.gefahr:hover { color: var(--orange); background: var(--orange-soft); }

.kanal-gitter {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.kanal-karte.lesen {
  padding: 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--inset);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .18s;
}
.kanal-karte.lesen:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.kanal-karte.lesen .kk-kopf { display: flex; align-items: center; gap: 8px; }
.kanal-karte.lesen .kk-name { font-weight: 600; flex: 1; }
.kanal-karte.lesen .kk-wer { color: var(--text-2); font-size: 13px; }
.kanal-karte.lesen .btn { align-self: flex-start; }

.kk-lampe, .kv-lampe {
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid var(--line); background: transparent; color: var(--text-3);
}
.kk-lampe.an, .kv-lampe.an {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: var(--green-soft);
}
.kv-lampe:not(.an) {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 45%, transparent);
  background: var(--red-soft);
}
.kv-lampe { cursor: pointer; font-family: inherit; transition: filter .18s; }
.kv-lampe:hover { filter: brightness(1.25); }

.kanal-karte.aus { opacity: .62; }
.kanal-karte.aus:hover { opacity: 1; }

.kk-fehlt {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 4px 20px 18px; padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--accent-soft);
}
.kk-fehlt-zeichen {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent); font-size: 17px;
}
.kk-fehlt > div { flex: 1 1 240px; min-width: 0; }
.kk-fehlt b { display: block; color: var(--text); font-size: 14px; }
.kk-fehlt span:not(.kk-fehlt-zeichen) {
  display: block; margin-top: 2px;
  color: var(--text-2); font-size: 12px; line-height: 1.55;
}

.kv-karte {
  padding: 14px; margin-bottom: 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--inset);
  transition: opacity .18s;
}
.kv-karte.aus { opacity: .55; }
.kv-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.kv-name { font-weight: 600; flex: 1; }
.kv-weg {
  border: 0; background: none; cursor: pointer;
  color: var(--text-3); font-size: 15px; line-height: 1;
  padding: 2px 4px; border-radius: var(--radius-s);
}
.kv-weg:hover { color: var(--orange); background: var(--orange-soft); }

.kf-neu { display: flex; gap: 8px; margin-top: 6px; }
.kf-neu input { flex: 1; }

.sl-avatar { position: relative; overflow: hidden; }
.sl-avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.pf-kopf {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
}
.pf-bild {
  position: relative; flex: none;
  width: 78px; height: 78px; border-radius: 50%;
  overflow: hidden;
  background: var(--inset);
  border: 1px solid var(--line);
  display: grid; place-items: center;
}
.pf-bild img { position: absolute; inset: 0; width: 100%; height: 100%;
               object-fit: cover; }
.pf-platzhalter { font-size: 24px; font-weight: 600; color: var(--text-3); }

.pf-wer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-wer strong { font-size: 15px; }
.pf-bildknoepfe { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.pf-bildknoepfe label { cursor: pointer; }

.pf-trenner { height: 1px; margin: 24px 0 18px; background: var(--line); }
.pf-abschnitt { margin: 0 0 14px; font-size: 14px; }

:root { --wartung-h: 34px; }

.wartungsbalken {
  position: fixed; inset: 0 0 auto 0;
  z-index: 68;
  height: var(--wartung-h);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--accent) 14%, #17140d);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  backdrop-filter: blur(10px);
}

.wartungsbalken::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
  animation: wartungPuls 2s ease-out infinite;
}
@keyframes wartungPuls {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.wartungsbalken button {
  flex: none;
  padding: 2px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: transparent; color: inherit;
  font: inherit; font-size: 12px; cursor: pointer;
  transition: background .18s, border-color .18s;
}
.wartungsbalken button:hover {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
}

body.hat-wartungsbalken { padding-top: var(--wartung-h); }
body.hat-wartungsbalken .seitenleiste,
body.hat-wartungsbalken .inspector,
body.hat-wartungsbalken .rand { top: var(--wartung-h); }

@media (max-width: 620px) {
  :root { --wartung-h: 30px; }
  .wartungsbalken { font-size: 11px; gap: 8px; }
  .wartungsbalken span { overflow: hidden; text-overflow: ellipsis;
                         white-space: nowrap; }
}

.wartungsseite {
  min-height: 100vh; display: grid; place-items: center;
  overflow: hidden; text-align: center;
}
.wa-buehne {
  position: relative; z-index: 1;
  width: min(460px, 92vw); padding: 24px;
  animation: waRein .6s var(--ease-out) both;
}
@keyframes waRein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.wa-marke {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-bottom: 22px;
}
.wa-marke .brand-rund.gross { width: 46px; height: 46px; }
.wa-marke .brand-wort b { font-size: 15px; }

.wa-linie {
  display: block; width: 190px; height: 1px; margin: 0 auto 26px;
  background: rgba(255,255,255,.10);
  overflow: hidden; position: relative;
}
.wa-linie i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
  transform: scaleX(0);
  animation: lsLinie 1.6s var(--ease-out) infinite;
}

.wa-titel {
  margin: 0 0 12px; font-size: 30px; line-height: 1.2; letter-spacing: -.01em;
}
.wa-text {
  margin: 0 auto 30px; max-width: 34ch;
  color: var(--text-2); font-size: 14px; line-height: 1.65;
  white-space: pre-line;          /* ein eigener Text darf Absaetze haben */
}

.wa-tuer { margin: 0 auto; max-width: 330px; text-align: left; }
.wa-tuer summary {
  list-style: none; cursor: pointer; text-align: center;
  padding: 8px; border-radius: 999px;
  color: var(--text-3); font-size: 12px; font-weight: 550;
  transition: color .18s, background .18s;
}
.wa-tuer summary::-webkit-details-marker { display: none; }
.wa-tuer summary:hover { color: var(--text); background: var(--inset); }
.wa-tuer[open] summary { color: var(--text-2); margin-bottom: 14px; }

.wa-form {
  padding: 18px 18px 16px; border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(140%);
  animation: waRein .35s var(--ease-out) both;
}

.wartungsseite .an-fuss { margin-top: 26px; }

.neu-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .neu-paar { grid-template-columns: 1fr; } }
#neuForm .an-feld { margin-bottom: 10px; }
#neuForm .ul-fuss { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

.beta-block {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
}
.beta-kopf h3 { margin: 0 0 4px; font-size: 15px; font-weight: 650; }
.beta-kopf p { margin: 0 0 12px; color: var(--text-2); font-size: 13px; max-width: 62ch; }
.beta-neu { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.beta-neu input {
  flex: 1 1 240px; min-width: 0;
  padding: 8px 12px; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: var(--inset); color: var(--text);
  font-size: 13px;
}
.beta-zeile {
  display: grid; grid-template-columns: auto 1fr auto auto auto;
  align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line);
  font-size: 13px;
}
@media (max-width: 620px) {
  .beta-zeile { grid-template-columns: auto 1fr; }
  .beta-zeile .beta-stand { grid-column: 1 / -1; }
}
.beta-zeile.weg { opacity: .78; }
.beta-kuerzel {
  font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  letter-spacing: .08em; color: var(--accent);
  background: var(--inset); border-radius: var(--radius-s); padding: 2px 8px;
}
.beta-wofuer { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-stand { color: var(--text-3); font-size: 12px; }

.beta-code {
  margin: 4px 0 16px; padding: 10px 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-s);
  background: var(--inset);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 17px; font-weight: 600; letter-spacing: .18em;
  text-align: center; color: var(--accent);
}

.an-breit { display: block; width: 100%; text-align: center; }

.an-post-titel { margin: 4px 0 10px; font-size: 20px; font-weight: 700;
                 letter-spacing: -.01em; }
.an-post-text {
  margin: 0 0 14px; color: var(--text-2);
  font-size: 13px; line-height: 1.55;
}
.an-post-text strong { color: var(--text); }
.an-post-text.leise { color: var(--text-3); font-size: 12px; }
.an-hinweis a { color: var(--text-3); }
.an-hinweis a:hover { color: var(--text); }

.page.schmal { max-width: 980px; }

.werkzeug { display: grid; gap: 14px; padding: 4px 20px 18px; }

#bwAuftrag, .wz-feld {
  width: 100%;
  background: var(--inset);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px; line-height: 1.55;
  resize: vertical;
  transition: border-color .16s, box-shadow .16s;
}
#bwAuftrag::placeholder, .wz-feld::placeholder { color: var(--text-3); }
#bwAuftrag:focus, .wz-feld:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.eingang-rat {
  margin: 14px 16px 16px; padding: 12px 16px;
  border-radius: var(--radius); background: var(--inset);
  display: grid; gap: 6px; font-size: 13px;
}
.eingang-rat b { font-size: 12.5px; color: var(--text-2); }
.eingang-rat ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.eingang-rat li { display: flex; align-items: baseline; gap: 7px; color: var(--text); }
.eingang-rat li::before {
  content: "✓\FE0E"; font-size: 11px; font-weight: 800; color: var(--accent);
}
.eingang-rat em { font-style: normal; font-weight: 600; }
.eingang-rat .hint { font-size: 12px; }

.eingang-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px; padding: 14px 16px 16px;
}
.el-kachel {
  position: relative; margin: 0; display: grid; gap: 4px;
  border-radius: var(--radius-s); overflow: hidden;
  background: var(--inset); border: 1px solid var(--line);
}
.el-kachel img, .el-roh {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
}
.el-roh {
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; color: var(--text-3);
}
.el-kachel figcaption {
  font-size: 10.5px; color: var(--text-3); padding: 0 8px 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.el-weg {
  all: unset; position: absolute; top: 5px; right: 5px; cursor: pointer;
  width: 22px; height: 22px; border-radius: 50%; text-align: center;
  line-height: 22px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-2); border: 1px solid var(--line);
  transition: background .14s, color .14s, border-color .14s;
}
.el-weg:hover { background: var(--red); color: #fff; border-color: var(--red); }
.el-weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.el-weg:disabled { opacity: .5; cursor: default; }

.auto-hinweis-feld { flex-basis: 100%; display: grid; gap: 6px; }
.auto-hinweis-feld textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 56px;
  font: inherit; font-size: 13px; line-height: 1.45; padding: 8px 10px;
  border-radius: var(--radius-s); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
}
.auto-hinweis-feld textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.auto-hinweis-feld .auto-klein { color: var(--green); font-size: 12px; min-height: 1em; }

.dropzone.klein { min-height: 96px; padding: 16px; }
.dropzone.klein .dz-icon { width: 36px; height: 36px; }
.dropzone.klein .dz-icon svg { width: 18px; height: 18px; }
.dropzone.klein .dz-titel { font-size: 13px; }

.bw-vorlage {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface-2);
}
.bw-vorlage img {
  width: 58px; height: 72px; flex: none;
  object-fit: cover; border-radius: var(--radius-s);
  border: 1px solid var(--line);
}
.bw-vorlage-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bw-vorlage-text strong {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wz-zeile {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.wz-zeile .wz-feld { flex: 1 1 260px; width: auto; }

.wz-hinweis { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }

.wz-ergebnis {
  display: grid; gap: 12px;
  margin: 4px 20px 20px; padding: 18px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface-2);
  animation: bwRein .4s var(--ease-out);
}
@media (min-width: 900px) {
  #lwErgebnis {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  #lwErgebnis > .lw-feld:nth-child(2),   /* Beschreibung */
  #lwErgebnis > .wz-aktionen { grid-column: 1 / -1; }
}
#bwWahl { display: grid; grid-template-columns: 1fr; gap: 16px; }
#bwWahl .bw-zeile { display: grid; gap: 8px; }
.bw-frage {
  color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.pillreihe { display: flex; gap: 6px; flex-wrap: wrap; }
.bw-felder { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bw-felder select { flex: 1 1 220px; width: auto; }

.bw-vorlagen {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.bw-slot { display: grid; gap: 6px; align-content: start; }
.bw-slot-titel {
  display: flex; align-items: baseline; gap: 6px;
  color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.bw-slot-titel em {
  font-style: normal; font-weight: 500; letter-spacing: 0;
  text-transform: none; opacity: .75;
}

.bw-ziele {
  display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.bw-ziel {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--inset);
  font-size: 13px; cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.bw-ziel:hover { border-color: var(--text-3); }
.bw-ziel:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--text);
}
.bw-ziel.aus { opacity: .45; cursor: not-allowed; }
.bw-ziel.aus:hover { border-color: var(--line); }
.bw-ziel input { width: 15px; height: 15px; accent-color: var(--accent); flex: none; }

.bw-stufen { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .bw-stufen { display: grid; grid-template-columns: 1fr; }
  .pill.stufe { justify-items: start; }
}
.pill.stufe {
  display: grid; gap: 2px; justify-items: start;
  padding: 8px 14px; height: auto; line-height: 1.3; text-align: left;
}
.pill.stufe strong { font-size: 13px; font-weight: 700; }
.pill.stufe small { font-size: 11px; opacity: .8; font-weight: 500; }

.bw-preis {
  margin-right: auto;
  color: var(--text-2); font-size: 13px; font-weight: 600;
}
.bw-preis.leer { color: var(--text-3); font-weight: 500; }

.schalter {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-2); font-size: 13px; cursor: pointer;
}
.schalter input {
  flex: none;
  width: 15px; height: 15px; accent-color: var(--accent);
}

@media (hover: none) {
  .schalter input { width: 24px; height: 24px; }
  .schalter { min-height: 40px; }
}
#bwWahl.nur-eigen .bw-zeile:not(.bw-eigen) { opacity: .45; pointer-events: none; }

.bw-tafel {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.bw-bild { margin: 0; display: grid; gap: 8px; }
.bw-bild img {
  display: block; width: 100%; max-height: 58vh; object-fit: contain;
  border-radius: var(--radius);
  background: var(--inset);
  box-shadow: var(--shadow-2);
}
.bw-bild figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; font-weight: 600;
}
.bw-bild figcaption a { text-decoration: none; }
.wz-aktionen { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wz-aktionen .btn { text-decoration: none; }

.lw-vorschau {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
}
.lw-vorschau:empty { display: none; }
.lw-bild {
  position: relative; aspect-ratio: 4/5;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--inset);
}
.lw-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lw-weg {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 11px; line-height: 1;
  opacity: 0; transition: opacity .16s, background .16s;
}
.lw-bild:hover .lw-weg { opacity: 1; }
.lw-weg:hover { background: var(--red); }
@media (hover: none) { .lw-weg { opacity: 1; } }

.lw-feld {
  padding: 16px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
}
.lw-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
  color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.lw-wert { font-size: 14px; line-height: 1.55; white-space: pre-wrap; }

.lw-wert.lang {
  max-height: 44vh; overflow-y: auto;
  padding: 14px 16px;
  border-radius: var(--radius-s);
  background: var(--inset);
  font-size: 13px; line-height: 1.75;
  font-variant-ligatures: none;
  scrollbar-width: thin;
}
.lw-wert.lang::-webkit-scrollbar { width: 8px; }
.lw-wert.lang::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 4px;
}

.lw-sub { margin-top: 8px; color: var(--text-3); font-size: 12px; line-height: 1.5; }

#lwTitel { font-size: 15px; font-weight: 600; line-height: 1.45; }
#lwPreis { font-size: 24px; font-weight: 650; letter-spacing: -.02em;
           font-variant-numeric: tabular-nums; }

.lw-daten { display: grid; gap: 6px; }
.lw-zeile {
  display: grid; grid-template-columns: 128px 1fr; gap: 12px;
  align-items: baseline;
}
.lw-name {
  color: var(--text-3); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.lw-inhalt { font-size: 14px; line-height: 1.5; }
@media (max-width: 620px) {
  .lw-zeile { grid-template-columns: 1fr; gap: 1px; }
}

.lw-warnung {
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--radius-s);
  background: var(--orange-soft);
  color: var(--text); font-size: 13px; line-height: 1.5;
}
.lw-warnung b { color: var(--orange); }

.panel.verweis .r-name { font-size: 14px; }

.spiel {
  display: grid; gap: 12px;
  margin: 4px 20px 20px; padding: 16px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface-2);
  animation: bwRein .35s var(--ease-out);
}

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.sj-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sj-stand {
  display: grid; align-items: center;
  grid-template-columns: auto 1fr; gap: 0 10px;
  grid-template-areas: "marke label" "marke wert";
}
.sj-stand.rechts {
  text-align: right;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label marke" "wert marke";
}
.sj-marke {
  grid-area: marke;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px;
}
.sj-marke svg { width: 19px; height: 19px; }
.sj-marke.geld  { background: var(--green-soft);  color: var(--green); }
.sj-marke.pokal { background: var(--accent-soft); color: var(--accent); }
.sj-label {
  grid-area: label;
  color: var(--text-3); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.sj-stand b {
  grid-area: wert;
  font-size: 20px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sj-stand.rechts b { color: var(--accent); }

.sj-start::before { content: "\25B6\FE0E"; font-size: .82em; margin-right: 7px; }

.sj-brett {
  position: relative;
  width: 100%; max-width: 480px; margin: 0 auto;
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--inset);
  overflow: hidden;
}
.sj-leinwand { width: 100%; height: 100%; display: block; touch-action: none; }

.sj-schleier {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center; gap: 10px;
  padding: 22px; text-align: center;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transition: opacity .25s, visibility .25s;
}
.sj-schleier.weg { opacity: 0; visibility: hidden; }
.sj-titel { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.sj-text { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.sj-text b { color: var(--accent); }
.sj-tasten { margin: 2px 0 0; color: var(--text-3); font-size: 11px; }
.sj-fuss { margin: 0; color: var(--text-3); font-size: 11px; text-align: center; }

.sj-kette { display: grid; justify-items: center; gap: 1px; }
.sj-multi {
  font-size: 17px; font-weight: 700; letter-spacing: -.02em;
  color: var(--text-3); transition: color .15s, transform .15s;
  font-variant-numeric: tabular-nums;
}
.sj-multi.aktiv { color: var(--text); transform: scale(1.08); }
.sj-multi.gold {
  color: var(--accent);
  text-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  transform: scale(1.2);
}
.sj-kettenzahl {
  color: var(--text-3); font-size: 10px; white-space: nowrap;
  font-weight: 600; letter-spacing: .02em;
}

.sj-leben {
  position: absolute; top: 9px; left: 11px;
  display: flex; gap: 2px; font-size: 15px; line-height: 1;
  pointer-events: none;
}
.sj-leben span { color: #d4635a; transition: color .2s, opacity .2s; }
.sj-leben span.leer { color: var(--text-3); opacity: .32; }

.sj-liste {
  margin: 12px auto 0; max-width: 480px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--inset); overflow: hidden;
}
.sj-listenkopf {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--line);
  color: var(--text-3); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.sj-listenkopf span { letter-spacing: 0; text-transform: none; font-weight: 600; }
.sj-platz {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 10px;
  padding: 6px 12px; font-size: 13px;
}
.sj-platz + .sj-platz { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.sj-platz.ich { background: var(--accent-soft); }
.sj-platz.ich .sj-wer { font-weight: 650; color: var(--text); }
.sj-platz.eigen { border-top: 1px dashed var(--line); }
.sj-kranz { font-size: 15px; text-align: center; color: var(--text-3); }
.sj-wer { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sj-wert { color: var(--accent); font-weight: 650; font-variant-numeric: tabular-nums; }
.sj-noch { padding: 8px 12px; color: var(--text-3); font-size: 12px; }

.wz-warten {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 20px 0; padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: var(--accent-soft);
  font-size: 13px;
}
.wz-warten .dreher {
  width: 15px; height: 15px; flex: none;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: dreh .8s linear infinite;
}

.guthaben-karten {
  display: grid; gap: 14px; padding: 16px 20px 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.gh-karte {
  position: relative;
  display: grid; justify-items: center; gap: 2px;
  padding: 26px 20px 20px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg,
                    color-mix(in srgb, var(--text) 4%, transparent),
                    transparent 40%),
    var(--surface-2);
  text-align: center;
  transition: transform .18s var(--ease), border-color .2s, box-shadow .2s;
}
.gh-karte:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: var(--shadow-2);
}
.gh-karte.beliebt {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 44%),
    var(--surface-2);
}
.gh-karte.beliebt::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.gh-marke {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  padding: 2px 10px; border-radius: 999px;
  background: var(--accent); color: var(--auf-accent);
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
.gh-menge {
  font-size: 40px; font-weight: 700; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; line-height: 1;
  background: linear-gradient(180deg, var(--text), var(--text-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gh-einheit {
  color: var(--text-3); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.gh-preis { margin-top: 10px; font-size: 20px; font-weight: 650; }
.gh-je { color: var(--text-3); font-size: 12px; margin-bottom: 14px; }
.gh-karte .btn { width: 100%; }

.gh-balken {
  height: 12px; margin: 6px 20px 18px;
  border-radius: 999px; overflow: hidden;
  background: var(--inset);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
.gh-balken:empty { display: none; }
.gb-fuellung {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent),
              color-mix(in srgb, var(--accent) 55%, #fff));
  transition: width .4s var(--ease-out);
}

.kz-kopf, .kz-zeile {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) 62px repeat(3, minmax(74px, auto));
  gap: 8px; padding: 10px 20px;
}
.kz-kopf {
  padding-top: 14px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text-3); font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.kz-kopf span:not(:first-child) { text-align: center; }
.kz-zeile { border-bottom: 1px solid var(--line); }
.kz-zeile:last-of-type { border-bottom: 0; }
.kz-zeile:hover { background: var(--surface-2); }

.kz-gruppe {
  padding: 16px 20px 6px;
  color: var(--text-3); font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.kz-gruppe:first-of-type { padding-top: 12px; }

.kz-preis {
  text-align: center; font-variant-numeric: tabular-nums;
  font-weight: 650; color: var(--accent);
}
.kz-wert {
  text-align: center; font-variant-numeric: tabular-nums;
  color: var(--text-2); font-size: 14px;
}
.kz-wert b { font-weight: 650; color: var(--text); }
.kz-mal { margin-left: 1px; color: var(--text-3); font-size: 11px; }
.kz-leer { color: var(--text-3); }
.kz-ja { color: var(--stufe); font-weight: 700; }
.kz-fuss {
  margin: 0; padding: 14px 20px 18px;
  color: var(--text-3); font-size: 12px; line-height: 1.6;
}

@media (max-width: 720px) {
  .kz-kopf, .kz-zeile { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(58px, auto)); }
  .kz-kopf span:nth-child(2), .kz-preis { display: none; }
}

.ranking.scrollbar {
  position: relative;
  max-height: 460px; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent);
}
.ranking.scrollbar::-webkit-scrollbar { width: 8px; }
.ranking.scrollbar::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
}
.ranking.scrollbar::-webkit-scrollbar-track { background: transparent; }
.ranking.scrollbar:not(:hover) { scrollbar-color: transparent transparent; }

.r-val.plus { color: var(--green); }

.abo-karten {
  display: grid; gap: 14px; padding: 16px 20px 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: stretch;
}
.abo-karte {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 18px 18px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.abo-karte.top {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background:
    radial-gradient(130% 130% at 100% 0%, var(--accent-soft), transparent 62%),
    var(--surface-2);
}
.abo-karte.mitte, .preis-karte.standard {
  border-color: color-mix(in srgb, var(--stufe) 50%, var(--line));
  background:
    linear-gradient(160deg,
                    color-mix(in srgb, var(--stufe) 13%, transparent),
                    transparent 58%),
    var(--surface-2);
  box-shadow: inset 3px 0 0 var(--stufe);
}
.abo-karte.mitte .abo-preis,
.preis-karte.standard .pk-preis b { color: var(--stufe); }

.abo-karte.jetzt {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.abo-marke {
  position: absolute; top: -9px; left: 18px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--green); color: var(--auf-green);
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.abo-name { font-size: 15px; font-weight: 700; }
.abo-preis {
  font-size: 30px; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.abo-preis span { font-size: 13px; font-weight: 500; color: var(--text-2); }

.abo-liste { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.abo-liste li {
  position: relative; padding-left: 22px;
  color: var(--text-2); font-size: 13px; line-height: 1.45;
}
.abo-liste li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--accent); font-weight: 700;
}
.abo-liste li b { color: var(--text); }
.abo-liste li.aus { color: var(--text-3); }
.abo-liste li.aus::before { content: "–"; color: var(--text-3); }

.abo-text { margin: 4px 0 12px; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.abo-karte .btn { margin-top: auto; width: 100%; }

.statusband {
  display: flex; gap: 2px; height: 12px;
  margin: 4px 20px 16px; border-radius: 999px; overflow: hidden;
}
.statusband span {
  min-width: 3px; border-radius: 3px;
  transition: opacity .16s;
}
.statusband span:hover { opacity: .75; }

.snk {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: auto 1fr auto auto;
  padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
}
.snk + .snk { margin-top: 8px; }
.snk-bild {
  width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
  background: var(--inset);
}
.snk-bild.leer {
  display: grid; place-items: center; color: var(--text-3); font-size: 16px;
}
.snk-text { min-width: 0; }
.snk-name { font-weight: 600; font-size: 14px; color: var(--text); }
.snk-unter { margin-top: 2px; font-size: 12px; color: var(--text-3); }
.snk-preis {
  display: flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.snk-alt { color: var(--text-3); text-decoration: line-through; font-size: 13px; }
.snk-neu { color: var(--accent); font-weight: 700; font-size: 15px; }
.snk-proz {
  padding: 1px 6px; border-radius: 5px;
  background: var(--inset); color: var(--text-2);
  font-size: 11px; font-weight: 650;
}
.snk-tat { white-space: nowrap; }
.senken-fuss {
  margin: 12px 20px 16px; color: var(--text-3);
  font-size: 12px; line-height: 1.55;
}
@media (max-width: 720px) {
  .snk { grid-template-columns: auto 1fr; row-gap: 8px; }
  .snk-preis, .snk-tat { grid-column: 2; justify-self: start; }
}

.re-ring {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 18px; padding: 14px 18px;
  border-radius: var(--radius-l); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
.ivs-ring { margin: 0 0 14px; }
.ivs-leiste {
  display: flex; margin: 0 0 14px; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.ivs-leiste .hint { margin: 0; }
.ivs-zeile { align-items: center; }
.ivs-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ivs-zwei > .aw-feld { min-width: 0; width: auto; }
.re-ring-svg { width: 56px; height: 56px; flex: none; transform: rotate(-90deg); }
.re-ring-grund { fill: none; stroke: var(--inset); stroke-width: 6; }
.re-ring-lauf {
  fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset .6s var(--ease);
}
.re-ring-text { display: grid; gap: 3px; min-width: 0; }
.re-ring-text b { font-size: 14px; }
.re-ring-text span { font-size: 12.5px; color: var(--text-3);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .re-ring-lauf { transition: none; } }
.sl-eintrag.laeuft .sl-text::after {
  content: ""; display: inline-block; margin-left: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: reRingPuls 1.4s ease-in-out infinite;
}
@keyframes reRingPuls { 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) {
  .sl-eintrag.laeuft .sl-text::after { animation: none; }
}

.nt-bild {
  display: block; max-width: 220px; max-height: 260px; width: auto;
  margin: 0 auto 14px; border-radius: var(--radius-s);
  border: 1px solid var(--line); object-fit: contain;
  background: var(--inset);
}

.nt-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 4px 0 6px;
}
.nt-chips-wort { font-style: normal; font-size: 11px; color: var(--text-3);
                 margin-right: 2px; }
.nt-chip {
  all: unset; box-sizing: border-box; cursor: pointer;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--text-2);
  font-size: 12px; transition: border-color .14s, color .14s, background .14s;
}
.nt-chip:hover { border-color: var(--accent); color: var(--text); }
.nt-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nt-chip.an {
  background: var(--accent-soft); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.bs-uber {
  margin: 14px 20px 6px; color: var(--text-2);
  font-size: 11px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.bs-uber:first-child { margin-top: 0; }
.bs-fuss {
  margin: 8px 20px 0; color: var(--text-3);
  font-size: 12px; line-height: 1.5;
}
.bs-fuss b { color: var(--text-2); }

.st-punkt {
  display: inline-block; vertical-align: middle;
  width: 9px; height: 9px; border-radius: 50%;
  margin: -2px 8px 0 0;
}
.st-Entwurf     { background: var(--text-3); }
.st-Online      { background: var(--accent); }
.st-Reserviert  { background: var(--orange); }
.st-Verkauft    { background: var(--green); }
.st-Versendet   {
  background: transparent;
  box-shadow: inset 0 0 0 2.5px var(--green);
}
.st-Zugestellt  { background: color-mix(in srgb, var(--green) 60%, var(--text-3)); }
.st-Sonstige    { background: var(--line-strong); }

.bereichseite { overflow: auto; align-content: center; padding: 40px 0; }
.an-mitte.weit { max-width: 900px; width: 100%; }

.bw-kopf { text-align: center; margin-bottom: 30px; }
.bw-kopf h1 { font-size: 30px; animation: anspruchRein .5s var(--ease-out) both; }
.bw-kopf .lede { animation: anspruchRein .5s .1s var(--ease-out) both; }

.bw-wahl {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.bw-karte {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 26px 24px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 58%),
    linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow-2);
  color: var(--text); text-decoration: none;
  animation: bwRein .5s var(--ease-out) both;
  transition: transform .2s var(--ease), box-shadow .22s, border-color .22s;
}
.bw-karte.zwei { animation-delay: .09s; }
.bw-karte:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: var(--shadow-lift);
}
@keyframes bwRein { from { opacity: 0; transform: translateY(18px); } }

.bw-karte::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--zweit));
}
.bw-karte.zwei::after {
  background: linear-gradient(90deg, var(--zweit), var(--accent));
}

.bw-zeichen {
  width: 42px; height: 42px; margin-bottom: 6px;
  display: grid; place-items: center;
  border-radius: var(--radius); background: var(--accent-soft);
  color: var(--accent); font-size: 17px;
}
.bw-karte h2 { font-size: 20px; }
.bw-karte p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }

.bw-zahlen, .bw-marke {
  margin-top: 2px;
  color: var(--text-3); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.bw-marke {
  align-self: flex-start;
  padding: 2px 8px; border-radius: 999px;
  background: var(--zweit-soft);
  color: var(--zweit); font-weight: 600;
}

.bw-los {
  margin-top: auto; padding-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 14px; font-weight: 600;
}
.bw-los i { font-style: normal; transition: transform .18s var(--ease); }
.bw-karte:hover .bw-los i { transform: translateX(4px); }

.bw-karte.bald { cursor: default; opacity: .72; }
.bw-karte.bald:hover {
  transform: none; box-shadow: var(--shadow-2); border-color: var(--line);
}
.bw-karte.bald .bw-zeichen {
  background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-3);
}
.bw-los.grau { color: var(--text-3); }

.bw-nachsatz { margin: 26px 0 0; text-align: center; font-size: 13px; }
.bw-nachsatz a { color: var(--text-2); text-decoration: none; }
.bw-nachsatz a:hover { color: var(--accent); text-decoration: underline; }

.rand {
  position: fixed; top: 0; bottom: 0; width: 3px; z-index: 0;
  pointer-events: none; overflow: hidden;
  background: var(--line);
}
.rand.links  { left: var(--nav-w); }
.rand.rechts { right: 0; }
.rand span {
  position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--accent) 45%, transparent),
              var(--accent));
  transform: scaleY(var(--gelesen, 0)); transform-origin: top;
}

.spruch {
  margin: 12px 0 0; min-height: 1.4em;
  color: var(--text-2); font-size: 14px; font-style: italic;
}
.spruch span {
  display: inline-block;
  background: linear-gradient(90deg, var(--text-2) 0%, var(--accent) 45%,
                              var(--green) 60%, var(--text-2) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: spruchRein .7s var(--ease-out) both, spruchGlanz 9s linear 1s infinite;
}
@keyframes spruchRein { from { opacity: 0; transform: translateY(8px); } }
@keyframes spruchGlanz { to { background-position: -260% 0; } }

.btn.ebay {
  background: color-mix(in srgb, var(--orange-soft) 70%, var(--surface));
  border-color: color-mix(in srgb, var(--orange) 45%, var(--line));
  color: var(--orange); font-weight: 650;
}
.btn.ebay:hover { border-color: var(--orange); }
.ebay-punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 22%, transparent);
}

.konto-menue { position: relative; }
.konto-klappe {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 66;
  min-width: 268px; padding: 6px;
  border-radius: var(--radius-l); background: var(--surface);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-2);
  transform-origin: bottom center;
  animation: klappeRein .26s var(--ease-out) both;
}
@keyframes klappeRein {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
}

.konto-klappe > * {
  animation: kkRein .24s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * .025s);
}
@keyframes kkRein { from { opacity: 0; transform: translateY(7px); } }
.kk-kopf { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); }
.kk-kopf strong { display: block; font-size: 13px; }
.topbar-actions .kk-person { display: none; }
@media (max-width: 720px) {
  .topbar-actions .kk-person { display: flex; }
}
.kk-person {
  display: flex; align-items: center; gap: 11px;
  margin: 2px 2px 8px; padding: 11px 12px;
  border-radius: var(--radius);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, transparent),
    color-mix(in srgb, var(--accent) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.kk-person .sl-avatar.gross {
  width: 44px; height: 44px; font-size: 15px; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent),
              color-mix(in srgb, var(--accent) 72%, #000));
  color: #fff;
}
.kk-person .sl-avatar.gross img { border-radius: 50%; }
.kk-person .kk-pfeil {
  margin-left: auto; color: var(--accent); font-size: 15px;
  align-self: center; cursor: pointer; line-height: 1;
  transition: transform .2s var(--ease-out);
}
.topbar-actions .sl-konto .sl-pfeil {
  transition: transform .2s var(--ease-out); transform: rotate(180deg);
}
.topbar-actions .konto-menue.auf .sl-pfeil { transform: rotate(0deg); }
.kk-person-text { min-width: 0; }
.kk-person-text strong {
  display: block; font-size: 13.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kk-person-text span { font-size: 11.5px; color: var(--text-2); }

.kk-eintrag {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; margin-top: 2px;
  border: 0; border-radius: var(--radius); cursor: pointer;
  background: transparent; color: var(--text); font: inherit;
  font-size: 13px; text-align: left;
  transition: background .12s, padding-left .12s;
}
.kk-eintrag > span:first-of-type { flex: 1; min-width: 0; }
.kk-eintrag.mit-schalter > span:first-of-type,
.kk-eintrag > span:first-of-type { white-space: nowrap; }
.kk-schalter { white-space: nowrap; }
.kk-zeichen {
  width: 30px; height: 30px; flex: none; padding: 7px;
  box-sizing: border-box; border-radius: 9px;
  background: var(--inset); color: var(--text-2);
  transition: color .12s, background .12s;
}
.kk-eintrag { text-decoration: none; color: var(--text); }
.kk-eintrag:hover, .kk-eintrag:focus-visible { text-decoration: none; }
.kk-eintrag:hover { background: var(--surface-2); }
.kk-eintrag:hover .kk-zeichen {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.kk-gefahrzone {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.kk-gefahrzone .kk-eintrag.gefahr {
  background: var(--red-soft); color: var(--red);
  border-radius: 11px; margin-top: 0;
}
.kk-gefahrzone .kk-eintrag.gefahr:hover {
  background: color-mix(in srgb, var(--red) 18%, transparent);
}
.kk-gefahrzone .kk-eintrag.gefahr .kk-zeichen {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
}

.kk-gruppe {
  margin: 6px 0; padding-top: 6px; border-top: 1px solid var(--line);
}
.kk-gruppe.erste { border-top: 0; padding-top: 0; margin-top: 0; }
.kk-titel {
  display: block; padding: 4px 10px 6px;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.kk-eintrag.mit-schalter {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.kk-schalter {
  flex: none; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  font-size: 11px; color: var(--text-3);
}
.kk-ordner {
  display: block; padding: 4px 10px 2px;
  color: var(--text-3); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kk-schalter.an {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); font-weight: 600;
}

.abo-tafel {
  position: relative; overflow: hidden;
  max-width: 780px; margin: 0 auto 18px;
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-strong);
}
.at-glanz {
  position: absolute; top: -170px; right: -110px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,105,.20) 0%, transparent 68%);
  pointer-events: none;
}
.at-inhalt { position: relative; padding: 36px 34px 30px; }

.at-zeichen {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: var(--radius-l); background: var(--accent-soft);
  border: 1px solid rgba(201,168,105,.30);
  color: var(--accent); font-size: 20px;
}
.at-marke {
  display: inline-block; margin-bottom: 8px; padding: 2px 10px;
  border-radius: 999px; background: var(--accent); color: var(--auf-accent);
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.abo-tafel h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.02em; }
.at-lede { margin: 0 0 20px; color: var(--text-2); font-size: 15px; line-height: 1.6; }

.at-liste { margin: 0 0 26px; padding: 0; list-style: none; }
.at-liste li {
  position: relative; padding: 6px 0 6px 26px;
  color: var(--text); font-size: 13px; line-height: 1.5;
}
.at-liste li::before {
  content: ""; position: absolute; left: 6px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

.at-fuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.at-knopf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--auf-accent);
  font: inherit; font-size: 14px; font-weight: 600;
  transition: background .16s var(--ease-out), transform .12s;
}
.at-knopf:hover { background: var(--accent-press); }
.at-knopf:active { transform: translateY(1px); }
.at-knopf i { font-style: normal; transition: transform .16s var(--ease-out); }
.at-knopf:hover i { transform: translateX(3px); }
.at-neben { color: var(--text-3); font-size: 12px; }

.at-klein {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 12px; line-height: 1.65;
}
.at-klein strong { color: var(--text-2); }

@media (max-width: 620px) { .at-inhalt { padding: 30px 22px 26px; } }

.ueberlagerung {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: var(--ueberlagerung-grund, rgba(0,0,0,.62));
  backdrop-filter: blur(3px);
  will-change: opacity;
  animation: schleier-auf var(--fenster-zu) var(--fenster-kurve) both;
}
.ul-kasten {
  width: min(620px, 100%); max-height: 88vh; overflow-y: auto;
  padding: 22px 24px 20px; border-radius: var(--radius-l);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-3);
  will-change: transform, opacity;
  animation: fenster-auf var(--fenster-auf) var(--fenster-kurve) both;
}

@keyframes fenster-auf {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes fenster-zu {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(.975); }
}
@keyframes schleier-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes schleier-zu  { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ueberlagerung, .ul-kasten { animation: none; }
}
.ul-kopf { display: flex; align-items: center; justify-content: space-between; }
.ul-kopf h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.ul-zu {
  flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--surface-2); color: var(--text-2); cursor: pointer; font-size: 13px;
}
.ul-zu:hover { background: var(--inset); color: var(--text); }
.ul-lede { margin: 8px 0 18px; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.ul-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-strong);
}

.bt-form label { display: block; margin-bottom: 10px; font-size: 12px; color: var(--text-2); }

.bt-form input:not([type=checkbox]):not([type=radio]),
.bt-form textarea,
.bt-form select {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border-radius: var(--radius-s); border: 1px solid var(--line-strong);
  background: var(--inset); color: var(--text); font: inherit; font-size: 13px;
}
.bt-form textarea { resize: vertical; min-height: 62px; line-height: 1.5; }
.bt-form input:focus, .bt-form textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
.bt-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.bt-zeile.schmal { grid-template-columns: 90px 1fr 1fr; }
.bt-hilfe { display: block; margin-top: 4px; color: var(--text-3); font-size: 11px; line-height: 1.45; }
.bt-trenner {
  margin: 16px 0 12px; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
}
.bt-haken { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.bt-haken input { flex: none; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--accent); }
.bt-haken strong { display: block; color: var(--text); font-size: 13px; }
.bt-stand { color: var(--text-3); font-size: 11px; }

@media (max-width: 620px) {
  .bt-zeile, .bt-zeile.schmal { grid-template-columns: 1fr; }
}

.eb-stand {
  --eb-farbe: var(--text-3);
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--inset);
}
.eb-stand[data-lage="verbunden"] { --eb-farbe: var(--green); }
.eb-stand[data-lage="offen"]     { --eb-farbe: var(--accent); }
.eb-stand[data-lage="fehlt"]     { --eb-farbe: var(--orange); }
.eb-stand[data-lage="verbunden"],
.eb-stand[data-lage="offen"],
.eb-stand[data-lage="fehlt"] {
  border-color: color-mix(in srgb, var(--eb-farbe) 38%, transparent);
  background: color-mix(in srgb, var(--eb-farbe) 9%, var(--inset));
}
.eb-punkt {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--eb-farbe);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--eb-farbe) 18%, transparent);
}
.eb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eb-text strong { font-size: 14px; color: var(--text); }
.eb-text span { font-size: 12px; color: var(--text-2); }

.eb-punkte {
  margin: 0 0 14px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 7px;
}
.eb-punkte li {
  position: relative; padding-left: 20px;
  font-size: 12.5px; color: var(--text-2);
}
.eb-punkte li::before {
  content: ""; position: absolute; left: 3px; top: 4px;
  width: 8px; height: 4px; border: 1.6px solid var(--accent);
  border-top: 0; border-right: 0; transform: rotate(-45deg);
}
.eb-schalter {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 14px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--inset);
  cursor: pointer;
}
.eb-schalter input {
  flex: none; margin-top: 2px; width: 16px; height: 16px;
  accent-color: var(--accent);
}
.eb-schalter strong { display: block; font-size: 13px; color: var(--text); }
.eb-klein { display: block; font-size: 11.5px; color: var(--text-2);
            line-height: 1.5; }

.eb-portal {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 0 12px; padding: 11px 13px;
  border: 1px dashed var(--line-strong); border-radius: 12px;
}
.eb-portal > b { font-size: 12.5px; color: var(--text); }
.eb-portal label {
  display: flex; flex-direction: column; gap: 4px; margin-top: 4px;
  font-size: 11px; color: var(--text-3);
}
.eb-portal input {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--inset); color: var(--text);
  font-size: 11.5px; font-family: ui-monospace, "SFMono-Regular", monospace;
}

.eb-hinweis {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12px; color: var(--text-2); line-height: 1.55;
}
.eb-welt {
  margin-right: auto; font-size: 11px; color: var(--text-3);
  letter-spacing: .04em; text-transform: uppercase;
}

.ebm-felder { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.ebm-feld { display: flex; flex-direction: column; gap: 6px; }
.ebm-name { font-size: 12.5px; color: var(--text); }
.ebm-name i { color: var(--text-3); font-style: normal; }
.ebm-feld .aw-feld { width: 100%; }

.auto-hinweis-schalter {
  display: flex; gap: 10px; align-items: flex-start; flex-basis: 100%;
  margin-top: 10px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--inset);
  cursor: pointer;
}
.auto-hinweis-schalter input {
  flex: none; margin-top: 2px; width: 16px; height: 16px;
  accent-color: var(--accent);
}
.auto-hinweis-schalter strong {
  display: block; font-size: 13px; color: var(--text);
}
.auto-klein {
  display: block; font-size: 11.5px; color: var(--text-2); line-height: 1.55;
}
.auto-klein b { color: var(--text); font-weight: 600; }

.re-auffrischen { display: flex; flex-direction: column; gap: 10px; }
.re-haken {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--inset); cursor: pointer;
}
.re-haken input {
  flex: none; margin-top: 2px; width: 16px; height: 16px;
  accent-color: var(--accent);
}
.re-haken strong { display: block; font-size: 13px; color: var(--text); }
.re-klein {
  display: block; font-size: 11.5px; color: var(--text-2); line-height: 1.5;
}
.re-klein b { color: var(--accent); font-weight: 600; }

.pw-karten { margin-top: 0; }

.eb-liste {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.eb-zeile {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface);
}
.eb-zeile.neu { border-left: 3px solid var(--accent); }
.eb-haupt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.eb-haupt b { font-size: 13.5px; color: var(--text); }
.eb-haupt span { font-size: 12px; color: var(--text-2); }
.eb-neben {
  display: flex; align-items: center; gap: 10px; flex: none;
  font-size: 11.5px; color: var(--text-3);
}
.eb-neben a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.eb-neben a:hover { text-decoration: underline; }
.eb-weg { color: var(--green); }
.eb-nr {
  width: 168px; padding: 6px 9px; font-size: 12px;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--inset); color: var(--text);
}
@media (max-width: 620px) {
  .eb-neben { width: 100%; justify-content: space-between; }
  .eb-nr { flex: 1; width: auto; }
}

.dl-panel { border-color: var(--accent); }
.dl-inhalt {
  display: grid; grid-template-columns: 1fr minmax(280px, 340px);
  gap: 28px; align-items: start; padding: 22px 24px 6px;
}
.dl-text h2 { margin: 0 0 8px; }
.dl-fakten { margin: 14px 0 0; padding-left: 18px; color: var(--text-2); }
.dl-fakten li { margin: 6px 0; font-size: 13px; line-height: 1.55; }

.dl-kasten {
  padding: 16px; border-radius: var(--radius-l);
  background: var(--surface-2); border: 1px solid var(--line);
}
.dl-knopf {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--accent); color: var(--auf-accent); text-decoration: none;
  font-size: 14px; transition: background .16s var(--ease-out), transform .12s;
}
.dl-knopf:hover { background: var(--accent-press); }
.dl-knopf:active { transform: translateY(1px); }
.dl-knopf strong { display: block; font-size: 15px; }
.dl-pfeil {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,0,0,.16); font-size: 15px; font-weight: 700;
}
.dl-meta { display: block; margin-top: 2px; font-size: 12px; opacity: .72; }
.dl-stand {
  margin: 10px 2px 0; color: var(--text-3); font-size: 12px; text-align: center;
}

.dl-summe { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.dl-summe summary {
  cursor: pointer; color: var(--text-2); font-size: 12px; list-style: none;
}
.dl-summe summary::-webkit-details-marker { display: none; }
.dl-summe summary::before { content: "▸ "; color: var(--text-3); }
.dl-summe[open] summary::before { content: "▾ "; }
.dl-summe p { margin: 8px 0 6px; color: var(--text-3); font-size: 12px; }
.dl-befehl, .dl-hash {
  display: block; padding: 6px 8px; margin-bottom: 6px;
  border-radius: var(--radius-s); background: var(--inset);
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px; color: var(--text-2);
  overflow-wrap: anywhere; word-break: break-all;
}
.dl-hash { color: var(--accent); user-select: all; }

@media (max-width: 780px) {
  .dl-inhalt { grid-template-columns: 1fr; gap: 18px; }
}

.plattform-marke, .art-marke {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: var(--radius-s);
  font-size: 14px; font-weight: 700;
}
.plattform-marke.vinted { background: var(--green-soft);  color: var(--green); }
.plattform-marke.ebay   { background: var(--orange-soft); color: var(--orange); }
.art-marke.favorit   { background: var(--orange-soft); color: var(--orange); }
.art-marke.bewertung { background: #d4a94e26;          color: #d9b45e; }
.art-marke.verkauf   { background: var(--green-soft);  color: var(--green); }
.art-marke.nachricht { background: var(--accent-soft); color: var(--accent); }

.kanal {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
}
.kanal.vinted { background: var(--green-soft);  color: var(--green); }
.kanal.ebay   { background: var(--orange-soft); color: var(--orange); }

#neuigkeitenListe {
  max-height: 340px; overflow-y: auto;
  scrollbar-width: thin;
  padding-left: 12px; margin-left: -12px;
}

.rank-row.bu-notiz { padding-top: 6px; padding-bottom: 6px; }
.rank-row.bu-notiz .r-name {
  font-weight: 450; font-size: 12px; color: var(--text-3);
  white-space: normal;
}
.rank-row.bu-notiz .r-sub { font-size: 11px; opacity: .75; }

.rank-row.neu { position: relative; }
.rank-row.neu::before {
  content: ""; position: absolute; left: -10px; top: 50%; translate: 0 -50%;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: pochen 2.2s ease-in-out infinite;
}
@keyframes pochen { 50% { opacity: .25; transform: scale(1.5); } }

.kpi { animation: kpiRein .45s var(--ease-out) both; }
.kpi:nth-child(2) { animation-delay: .07s; }
.kpi:nth-child(3) { animation-delay: .14s; }
.kpi:nth-child(4) { animation-delay: .21s; }
.kpi:nth-child(5) { animation-delay: .28s; }
@keyframes kpiRein {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .tab.on, [data-rein], .kpi, .lc-svg, .lc-punkt,
  .topbar-actions .konto-klappe { animation-name: none; }
  .konto-klappe, .konto-klappe > * {
    animation: none !important;
    opacity: 1; transform: none;
  }
  .lc-svg { clip-path: none; }
  .lc-punkt { transform: scale(1); }
}

.verkaufsmeldung {
  position: fixed; right: 24px; bottom: 24px; z-index: 140;
  width: min(340px, calc(100vw - 48px));
  padding: 16px 18px 16px;
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--green);
  box-shadow: 0 18px 44px -12px color-mix(in srgb, var(--green) 45%, transparent),
              var(--shadow-2);
  overflow: hidden;
  animation: vmRein .42s var(--ease-out) both;
}
.verkaufsmeldung.raus { animation: vmRaus .3s ease-in forwards; }
@keyframes vmRein { from { opacity: 0; transform: translateY(26px) scale(.94); } }
@keyframes vmRaus { to  { opacity: 0; transform: translateX(26px) scale(.96); } }

.verkaufsmeldung::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%,
              color-mix(in srgb, var(--green) 26%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: vmSchimmer 1.5s .3s ease-out;
}
@keyframes vmSchimmer { to { transform: translateX(100%); } }

.vm-zu {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  width: 24px; height: 24px; border: 0; border-radius: var(--radius-s); cursor: pointer;
  background: transparent; color: var(--text-3); font-size: 13px;
}
.vm-zu:hover { background: var(--surface-2); color: var(--text); }

.vm-gluck {
  color: var(--green); font-size: 12px; font-weight: 800;
  letter-spacing: .16em; margin-bottom: 4px;
  animation: vmPochen 1.1s ease-out 2;
}
@keyframes vmPochen { 40% { transform: scale(1.06); } }

.vm-text { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.vm-text b { color: var(--text); }
.vm-preis { color: var(--green); font-size: 15px; }

.vm-konfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.vm-konfetti i {
  position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px;
  opacity: 0; animation: vmFallen 2.4s ease-in forwards;
}
.vm-konfetti i:nth-child(1) { left:  8%; background: var(--green);  animation-delay: .05s; }
.vm-konfetti i:nth-child(2) { left: 21%; background: var(--accent); animation-delay: .28s; }
.vm-konfetti i:nth-child(3) { left: 34%; background: #d9b45e;       animation-delay: .12s; }
.vm-konfetti i:nth-child(4) { left: 47%; background: var(--green);  animation-delay: .40s; }
.vm-konfetti i:nth-child(5) { left: 60%; background: var(--orange); animation-delay: .20s; }
.vm-konfetti i:nth-child(6) { left: 73%; background: var(--accent); animation-delay: .50s; }
.vm-konfetti i:nth-child(7) { left: 86%; background: #d9b45e;       animation-delay: .34s; }
.vm-konfetti i:nth-child(8) { left: 94%; background: var(--green);  animation-delay: .60s; }
@keyframes vmFallen {
  0%   { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(150px) rotate(420deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vm-konfetti, .verkaufsmeldung::after { display: none; }
}

.ck-fenster {
  border: 0; padding: 0; background: none; color: inherit;
  max-width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  overflow: visible;
}
.ck-fenster::backdrop {
  background: rgba(6, 6, 8, .58);
  backdrop-filter: saturate(140%) blur(7px);
  -webkit-backdrop-filter: saturate(140%) blur(7px);
}
:root[data-theme="light"] .ck-fenster::backdrop {
  background: rgba(20, 20, 24, .38);
}

.ck-karte {
  display: flex; flex-direction: column;
  max-height: calc(100svh - 32px);
  border-radius: var(--radius-l);
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
  animation: ckRein .34s var(--ease-out);
  overflow: hidden;
}
@keyframes ckRein {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
}
.ck-fenster.weg { opacity: 0; transition: opacity .24s var(--ease-out); }

.ck-kopf {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--bg-2));
}
.ck-emblem {
  flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 6%, transparent);
}
.ck-emblem svg { width: 26px; height: 26px; }
.ck-kopf-text { flex: 1 1 auto; min-width: 0; }
.ck-karte h2 {
  margin: 0 0 6px; font-size: 23px; line-height: 1.2;
  letter-spacing: -.02em; color: var(--text); text-wrap: balance;
}
.ck-karte h2 span { color: var(--accent); }
.ck-kopf-text p {
  margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55;
}
.ck-zu {
  flex: none; width: 32px; height: 32px; margin: -4px -6px 0 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: none; color: var(--text-3); font-size: 15px;
  transition: color .15s, background .15s;
}
.ck-zu:hover { color: var(--text); background: var(--inset); }

.ck-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 14px 26px 0;
}
.ck-mehr, .ck-lesen {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; padding: 0;
  font: inherit; font-size: 13px; color: var(--accent);
  text-decoration: none;
}
.ck-mehr:hover, .ck-lesen:hover { text-decoration: underline; }
.ck-lesen { text-decoration: underline; text-underline-offset: 3px; }

.ck-karten {
  display: grid; gap: 10px;
  padding: 12px 26px 0;
  overflow-y: auto;
}
.ck-karten[hidden] { display: none; }
.ck-karte-zeile {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .18s;
}
.ck-karte-zeile.an { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.ck-kachel {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--radius);
  color: var(--accent);
  background: var(--inset);
  border: 1px solid var(--line);
}
.ck-kachel svg { width: 19px; height: 19px; }
.ck-karte-text { flex: 1 1 auto; min-width: 0; }
.ck-karte-text h3 {
  margin: 0 0 4px; font-size: 15px; font-weight: 650; color: var(--text);
}
.ck-karte-text p {
  margin: 0 0 8px; color: var(--text-2); font-size: 12.5px; line-height: 1.55;
}
.ck-marke {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3); background: var(--inset);
  border: 1px solid var(--line);
}
.ck-karte-zeile.an .ck-marke {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.ck-schalter {
  flex: none; position: relative; margin-top: 2px;
  width: 46px; height: 26px; padding: 0;
  border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--inset);
  transition: background .2s var(--ease-out), border-color .2s;
}
.ck-knauf {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--text-3);
  transition: transform .2s var(--ease-out), background .2s;
}
.ck-schalter[aria-checked="true"] {
  background: var(--accent); border-color: var(--accent);
}
.ck-schalter[aria-checked="true"] .ck-knauf {
  transform: translateX(20px); background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.ck-schalter:disabled { cursor: default; opacity: .75; }
.ck-schalter:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ck-knoepfe {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 18px 26px;
}
.ck-knoepfe .btn { justify-content: center; }
.ck-alle i { margin-left: 6px; transition: transform .16s var(--ease-out); }
.ck-alle:hover i { transform: translateX(3px); }

.ck-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
  padding: 13px 26px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: 11.5px; color: var(--text-3);
}
.ck-sicher { display: inline-flex; align-items: center; gap: 7px; }
.ck-sicher svg { width: 14px; height: 14px; color: var(--green); flex: none; }
.ck-fuss-wege { display: flex; gap: 14px; flex-wrap: wrap; }
.ck-fuss-wege a { color: var(--text-3); text-decoration: none; }
.ck-fuss-wege a:hover { color: var(--accent); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .ck-karte { animation: none; }
  .ck-knauf, .ck-schalter, .ck-alle i { transition: none; }
}

@media (max-width: 480px) {
  .ck-kopf { padding: 20px 18px 16px; gap: 12px; }
  .ck-leiste, .ck-karten, .ck-knoepfe, .ck-fuss { padding-left: 18px; padding-right: 18px; }
  .ck-emblem { width: 44px; height: 44px; }
  .ck-emblem svg { width: 22px; height: 22px; }
  .ck-karte h2 { font-size: 19px; }
  .ck-knoepfe { grid-template-columns: 1fr; }
  .ck-karte-zeile { padding: 12px 13px; gap: 11px; }
  .ck-kachel { width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .ck-karte { animation: none; }
  .ck-fenster.weg { transition: none; }
}

.fusszeile {
  position: relative; z-index: 1;
  margin-top: 40px; padding: 26px 0 34px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.fz-inner {
  max-width: var(--breite); margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  color: var(--text-3); font-size: 12px;
}
.fz-inner nav {
  display: flex; gap: 18px; flex-wrap: wrap;
  align-items: center; margin-left: auto;
}
.fz-inner a { color: var(--text-2); text-decoration: none; }
.fz-inner a:hover { color: var(--accent); text-decoration: underline; }

.fz-siegel {
  display: inline-flex; align-items: center;
  transition: opacity .18s var(--ease-out);
}
.fz-siegel:hover { opacity: .82; text-decoration: none; }
@media (hover: none) { .fz-siegel { min-height: 44px; } }
.fz-siegel img { display: block; height: 28px; width: auto; }

.fz-liebe {
  max-width: var(--breite); margin: 16px auto 0;
  padding: 14px 28px 0; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--text-3); font-size: 12px;
}
.fz-herz {
  width: 13px; height: 13px; flex: none;
  fill: #e0555f;
}
.fz-liebe-wort {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.an-fuss {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin-top: 18px; font-size: 11px;
}
.an-fuss a { color: var(--text-3); text-decoration: none; }
.an-fuss a:hover { color: var(--text); text-decoration: underline; }

.marke {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 650; white-space: nowrap;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  color: var(--text-2);
}
.marke.gut    { background: var(--green-soft);  color: var(--green); }
.marke.arbeit { background: var(--orange-soft); color: var(--orange); }
.marke.offen  { background: var(--accent-soft); color: var(--accent); }

.beta-marke {
  display: inline-block; vertical-align: 7px;
  margin-left: 12px; padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

.lede.zwei { margin-top: 10px; color: var(--text-3); font-size: 14px; }

.merkmale {
  display: grid; gap: 16px; padding: 4px 20px 20px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.merkmal {
  padding: 20px 20px 18px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: transform .18s var(--ease), border-color .2s, box-shadow .2s;
}
.merkmal:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: var(--shadow-2);
}
.mk-zeichen {
  display: inline-grid; place-items: center;
  min-width: 40px; height: 40px; padding: 0 10px; margin-bottom: 12px;
  border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  font-size: 15px; font-weight: 700; white-space: nowrap;
}
.merkmal h3 { margin: 0 0 6px; font-size: 15px; font-weight: 650; }
.merkmal p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }

.ablauf {
  margin: 0; padding: 6px 20px 22px 20px;
  list-style: none;
  counter-reset: schritt;
}
.ablauf li {
  position: relative;
  counter-increment: schritt;
  padding: 0 0 22px 52px;
}
.ablauf li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ablauf li::after {
  content: ""; position: absolute; left: 16px; top: 36px; bottom: 4px;
  width: 1px; background: var(--line);
}
.ablauf li:last-child { padding-bottom: 0; }
.ablauf li:last-child::after { display: none; }
.ablauf h3 { margin: 4px 0 4px; font-size: 15px; font-weight: 650; }
.ablauf p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.6; max-width: 74ch; }
.ablauf em { color: var(--accent); font-style: normal; font-weight: 600; }

.preis-karten {
  display: grid; gap: 16px; padding: 4px 20px 18px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: stretch;
}
.preis-karte {
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.preis-karte.zusatz {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background:
    linear-gradient(160deg,
                    color-mix(in srgb, var(--accent) 15%, transparent),
                    transparent 58%),
    var(--surface-2);
  box-shadow: inset 3px 0 0 var(--accent);
}
.preis-karte.zusatz .pk-preis b { color: var(--accent); }

.pk-kopf { display: grid; gap: 4px; margin-bottom: 16px; }
.pk-name { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pk-marke {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.pk-preis { display: flex; align-items: baseline; gap: 6px; }
.pk-preis b {
  font-size: 30px; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.pk-preis span { color: var(--text-2); font-size: 13px; }
.pk-spaeter { color: var(--text-3); font-size: 12px; }

.pk-liste { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pk-liste li {
  position: relative; padding-left: 24px;
  color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.pk-liste li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--accent); font-size: 13px; font-weight: 700;
}
.pk-liste li strong { color: var(--text); font-weight: 650; }
.pk-liste li.gruppe {
  padding-left: 0; margin-top: 4px;
  color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.pk-liste li.gruppe::before { content: none; }
.pk-liste li.bald::before { content: "○"; color: var(--text-3); }

.pk-fuss {
  margin: auto 0 0; padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 12px; line-height: 1.5;
}

.stimmen {
  display: grid; gap: 14px; padding: 4px 20px 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.stimme {
  position: relative; margin: 0; padding: 22px 22px 18px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line); background: var(--surface-2);
}
.stimme.leer { border-style: dashed; }
.stimme-zeichen {
  position: absolute; top: 6px; right: 16px;
  color: var(--accent); opacity: .3;
  font-size: 46px; line-height: 1;
}
.stimme blockquote {
  margin: 0 0 14px; padding: 0; max-width: 62ch;
  color: var(--text); font-size: 15px; line-height: 1.62;
}
.stimme p { margin: 0 0 12px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.stimme-wer {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  color: var(--text-3); font-size: 12px;
}
.stimme-wer b { color: var(--text-2); font-weight: 600; }
.stimme-wer time { margin-left: auto; font-variant-numeric: tabular-nums; }

.stern { color: var(--line-strong); font-size: 15px; letter-spacing: 1px; }
.stern.voll { color: var(--accent); }
.stimme-sterne { margin-bottom: 10px; }

.stimmen-schnitt {
  display: flex; align-items: center; gap: 16px;
  margin: 0 20px 4px; padding: 16px 20px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line); background: var(--inset);
}
.ss-zahl { display: flex; align-items: baseline; gap: 4px; }
.ss-zahl b {
  font-size: 30px; font-weight: 700; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.ss-zahl span { color: var(--text-3); font-size: 13px; }
.ss-rechts { display: grid; gap: 2px; }
.ss-sterne .stern { font-size: 17px; }
.ss-anzahl { color: var(--text-3); font-size: 12px; }

.bwt-body { display: grid; gap: 14px; padding: 4px 20px 20px; }
.bwt-lede { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.bwt-form { display: grid; gap: 16px; }
.bwt-form textarea { width: 100%; }

.sterne-wahl { display: flex; gap: 4px; }
.stern-knopf {
  padding: 2px 4px; border: none; background: none; cursor: pointer;
  color: var(--line-strong); font-size: 30px; line-height: 1;
  transition: color .12s var(--ease), transform .12s var(--ease);
}
.stern-knopf:hover { transform: scale(1.14); }
.stern-knopf.voll { color: var(--accent); }
.sterne-wahl:has(.stern-knopf:hover) .stern-knopf { color: var(--accent); }
.sterne-wahl .stern-knopf:hover ~ .stern-knopf { color: var(--line-strong); }

.sterne-wahl { display: inline-flex; gap: 0; }
.stern-knopf { padding: 4px 6px; }

#bwtVerwaltenListe { display: grid; gap: 12px; padding: 0 20px 20px; }
.bv-zeile {
  display: grid; gap: 10px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2);
}
.bv-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bv-sterne .stern { font-size: 14px; }
.bv-konto { margin-left: auto; color: var(--text-3); font-size: 12px; }
.bv-text {
  margin: 0; color: var(--text); font-size: 14px; line-height: 1.6;
  padding-left: 12px; border-left: 2px solid var(--line-strong);
}
.bv-fuss {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  color: var(--text-3); font-size: 12px;
}
.bv-wer b { color: var(--text-2); }
.bv-knoepfe { margin-left: auto; display: flex; gap: 8px; }

.kauf-posten {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 0 20px 8px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--inset);
}
.kauf-posten > div { display: grid; gap: 2px; }
.kauf-posten b { color: var(--text); font-size: 15px; }
.kauf-posten span { color: var(--text-3); font-size: 12px; }
.kauf-preis {
  color: var(--accent); font-size: 20px; font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kauf-ust { margin: 0 20px 16px; color: var(--text-3); font-size: 12px; }
.kauf-test { color: var(--orange); }

.kauf-haken {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 20px 12px; padding: 12px 14px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2); font-size: 13px; line-height: 1.55; cursor: pointer;
}
.kauf-haken:hover { border-color: var(--text-3); }
.kauf-haken:has(input:checked) { border-color: var(--accent); }
.kauf-haken input {
  width: 17px; height: 17px; flex: none; margin-top: 1px;
  accent-color: var(--accent); cursor: pointer;
}
.kauf-haken b { color: var(--text); }
.kauf-haken a { color: var(--accent); }
.kauf-recht {
  margin: 0 20px 18px; color: var(--text-3);
  font-size: 12px; line-height: 1.6;
}
.kauf-recht a { color: var(--text-2); }

.stimmen-einladung {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 4px 20px 12px; padding: 16px 20px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2);
}
.stimmen-einladung > div { flex: 1 1 260px; display: grid; gap: 2px; }
.stimmen-einladung b { color: var(--text); font-size: 14px; }
.stimmen-einladung span { color: var(--text-2); font-size: 13px; line-height: 1.55; }
.stimmen-einladung em {
  font-style: normal; color: var(--accent); font-weight: 600;
  white-space: nowrap;
}
.stimmen-einladung .btn { text-decoration: none; flex: none; }

.stimmen-pruefung {
  margin: 0 20px 20px; padding: 12px 16px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--inset);
}
.stimmen-pruefung summary {
  cursor: pointer; color: var(--text-2); font-size: 13px; font-weight: 600;
}
.stimmen-pruefung summary::marker { color: var(--text-3); }
.stimmen-pruefung p {
  margin: 10px 0 0; color: var(--text-3); font-size: 12px; line-height: 1.6;
}

.faq { padding: 0 20px 18px; display: grid; gap: 2px; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details:last-child { border-bottom: 0; }
.faq summary {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px; cursor: pointer;
  font-size: 14px; font-weight: 600;
  list-style: none;
  transition: color .16s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; margin-left: auto;
  color: var(--accent); font-size: 17px; font-weight: 400; line-height: 1;
  transition: transform .22s var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq details > p {
  margin: 0 0 14px; padding-right: 34px;
  color: var(--text-2); font-size: 13px; line-height: 1.62;
  animation: faqRein .24s var(--ease-out);
}
.faq details > p + p { margin-top: -6px; }
.faq details a { color: var(--accent); }
@keyframes faqRein { from { opacity: 0; transform: translateY(-4px); } }

.rechtsseite .topbar-inner .brand { text-decoration: none; }
.rechtsseite .seg { text-decoration: none; display: inline-flex; align-items: center; }
.rechtsseite .seg.on { background: var(--surface); box-shadow: var(--shadow-1); }

.rechtstext { max-width: 780px; padding-bottom: 20px; }
.rechtstext h1 { margin-bottom: 22px; }
.rechtstext h2 {
  margin: 38px 0 12px; font-size: 20px; font-weight: 650;
  color: var(--text); letter-spacing: -.02em;
}
.rechtstext h2::before {
  content: ""; display: block; width: 26px; height: 2px; border-radius: 2px;
  margin-bottom: 12px; background: var(--accent); opacity: .75;
}
.rechtstext p, .rechtstext li {
  color: var(--text-2); font-size: 15px; line-height: 1.74;
}
.rechtstext > p { max-width: 66ch; }
.rechtstext ul { margin: 10px 0 0 20px; display: grid; gap: 8px; max-width: 66ch; }
.rechtstext h3 { margin: 26px 0 8px; font-size: 15px; letter-spacing: -.01em; }
.rechtstext a { color: var(--accent); }

.rt-kanzlei {
  max-width: 66ch;
  color: var(--text); font-size: 15px; line-height: 1.74;
  overflow-wrap: anywhere;
}
.rt-kanzlei div + div { margin-top: 18px; }
.rt-kanzlei a { color: var(--accent); }

.rechtstext .rt-kanzlei h1 {
  margin: 0 0 6px; font-size: 20px; line-height: 1.3;
  letter-spacing: -.01em; color: var(--text);
}
.rechtstext .rt-kanzlei h2 {
  margin: 30px 0 8px; font-size: 17px; line-height: 1.35; color: var(--text);
}
.rechtstext .rt-kanzlei h3 {
  margin: 22px 0 6px; font-size: 15px; font-weight: 650; color: var(--text);
}
.rechtstext .rt-kanzlei ul, .rechtstext .rt-kanzlei ol {
  margin: 8px 0 8px 20px;
}
.rechtstext .rt-kanzlei li { margin: 4px 0; }
.rechtstext .rt-kanzlei p { margin: 8px 0; }

.rt-kanzlei [style*="float"] { float: none !important; margin-left: 0 !important; }
.rt-kanzlei [id^="itkanzlei"] { margin-top: 2.4em !important; opacity: .75; }

.rt-kanzlei-stand { margin-top: 28px; }
.rechtstext code {
  padding: 1px 4px; border-radius: 5px; background: var(--inset);
  font-size: 12px; color: var(--text);
}
.rechtstext .stand {
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 12px;
}
.luecke {
  padding: 1px 8px; border-radius: 5px;
  background: var(--orange-soft); color: var(--orange);
  font-size: 13px; font-style: italic;
}

.rechtstext h3 {
  margin: 20px 0 6px; font-size: 13px; font-weight: 650;
  color: var(--text-2);
}
.rechtstext ol { margin: 8px 0 0 18px; display: grid; gap: 4px; }
.rechtstext ol li { color: inherit; }

.rechtstext .anmerkung,
.sx .anmerkung {
  color: var(--text-3); font-size: 13px;
  padding-left: 12px; border-left: 2px solid var(--line);
}
.sx .anmerkung { margin: 14px 0 0; }
.rechtstext .einzug { padding-left: 18px; }

.kasten {
  margin: 14px 0; padding: 14px 16px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2); font-size: 13px; line-height: 1.6;
}
.kasten b { color: var(--text); }
.kasten.warnung { border-color: var(--orange); background: var(--orange-soft); }
.kasten.hinweis { border-color: var(--accent); background: var(--accent-soft); }
.kasten ol, .kasten ul { margin: 8px 0 0 18px; display: grid; gap: 4px; }

.rt-tabelle {
  width: 100%; margin: 12px 0; border-collapse: collapse;
  font-size: 13px;
}
.rt-tabelle th, .rt-tabelle td {
  padding: 8px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
  color: var(--text-2); line-height: 1.5;
}
.rt-tabelle th {
  color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.rt-tabelle td:first-child { color: var(--text); }
.rt-tabelle tr:last-child td { border-bottom: none; }

.fz-zahlung {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: var(--breite); margin: 18px auto 0;
  padding: 16px 28px 0; border-top: 1px solid var(--line);
}
.fz-za-reihe {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}

.fz-za {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 34px; padding: 4px 6px;
  border-radius: var(--radius-s); background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.fz-za img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; display: block;
}
.fz-za.nurtext {
  width: auto; min-width: 52px; padding: 6px 10px;
  background: var(--inset); border: 1px solid var(--line-strong);
  box-shadow: none;
  color: var(--text-2); font-size: 11px; font-weight: 600;
  white-space: nowrap;
}
.fz-za-titel {
  color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  flex-basis: 100%;
}
.fz-za-fuss {
  flex-basis: 100%; margin-top: 4px;
  color: var(--text-3); font-size: 11px;
}
@media (max-width: 640px) {
  .fz-zahlung { padding-left: 18px; padding-right: 18px; }
}

.rechtstext .an-feld { margin-bottom: 16px; }
.rechtstext .an-feld textarea,
.rechtstext .an-feld input { width: 100%; }
.rechtstext .an-feld .leise { text-transform: none; letter-spacing: 0;
                              font-weight: 500; color: var(--text-3); }

.kd-gruppe {
  margin: 0 0 16px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--inset);
}
.kd-gruppe legend {
  padding: 0 6px; color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.kd-wahl {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 6px 0; cursor: pointer;
  color: var(--text-2); font-size: 13px; line-height: 1.55;
}
.kd-wahl input { margin-top: 2px; flex: 0 0 auto; }
.kd-wahl b { color: var(--text); }

#kdTabelle th { width: 38%; }

.widerruf-formular {
  margin: 14px 0; padding: 22px 24px;
  border-radius: var(--radius); border: 1px dashed var(--line-strong);
  background: var(--inset);
}
.widerruf-formular p { margin: 0 0 4px; }
.widerruf-formular p + p { margin-top: 14px; }
.widerruf-formular .feld {
  margin: 2px 0 0; color: var(--text-3);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px; letter-spacing: -.5px; overflow: hidden;
}
.hinweis-kasten {
  margin-bottom: 24px; padding: 12px 14px;
  border-radius: var(--radius); border: 1px solid var(--orange);
  background: var(--orange-soft); color: var(--text);
  font-size: 13px; line-height: 1.55;
}

@media (max-width: 720px) {
  .beleg-karte { grid-template-columns: 1fr; }
  .bk-vorschau { aspect-ratio: 16/9; }
  .page { padding: 22px 16px 80px; }
  .topbar-inner { padding: 0 16px; gap: 12px; }
  .hero { padding: 0 0 20px; }
  .hero-inner { padding: 4px 18px 0; }
  .hero h1 { font-size: 24px; }
  .automatik { padding: 16px 18px; gap: 14px; }
  .automatik .btn.big { width: 100%; }
  h1 { font-size: 24px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .fieldgrid, .fieldgrid.three { grid-template-columns: 1fr; }
  #syncBtn { display: none; }
  .inspector { width: 100vw; }
}

.bw-marke.dein { border-color: var(--accent); color: var(--accent); }

.bw-laden {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  width: min(920px, 100%); margin: 26px auto 0;
}
.bl-text {
  padding: 20px 22px; border-radius: var(--radius-l);
  background: var(--surface); border: 1px solid var(--line);
}
.bl-text h3 { margin: 10px 0 6px; font-size: 15px; }
.bl-text p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.bl-marke {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.bl-marke.reship { background: var(--zweit-soft); color: var(--zweit); }
.bl-bald {
  display: inline-block; margin-top: 12px; color: var(--text-3); font-size: 11px;
}

@media (max-width: 760px) { .bw-laden { grid-template-columns: 1fr; } }

.bw-abschnitt {
  width: min(920px, 100%); margin: 0 auto 10px;
  color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.bw-abschnitt.zwei { margin-top: 30px; }

.bw-kanaele {
  width: min(920px, 100%); margin: 16px auto 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.bw-kanal-titel {
  color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-right: 4px;
}
.bw-kanal {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text); text-decoration: none; font-size: 13px;
  transition: border-color .15s, transform .15s;
}
.bw-kanal:hover { border-color: var(--accent); transform: translateY(-1px); }
.bw-kanal b { font-weight: 600; }
.bw-kanal span { color: var(--text-3); font-size: 12px; }
.bw-kanal i { font-style: normal; color: var(--text-3); font-size: 11px; }

.ul-kasten.breit { width: min(880px, 100%); }

.sl-eintrag.bald {
  opacity: .45; cursor: default;
  display: flex; align-items: center;
}
.sl-eintrag.bald:hover { background: transparent; }
.sl-marke.bald {
  background: var(--inset); color: var(--text-3);
  border: 1px solid var(--line);
}

#kontenListe {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-items: start;
}
#kontenListe .ka-neu { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }

.kanal-karte {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2);
  min-width: 0;                      /* sonst sprengt ein langer Link das Raster */
}
.kk-kopf { display: flex; align-items: center; gap: 8px; }
.kk-name { font-weight: 600; font-size: 14px; }
.kk-weg {
  margin-left: auto; padding: 2px 6px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--text-3); cursor: pointer;
  opacity: 0; transition: opacity .14s, color .14s;
}
.kanal-karte:hover .kk-weg, .kk-weg:focus { opacity: 1; }
@media (hover: none) { .kk-weg { opacity: 1; } }
.kk-weg:hover { color: var(--red, #ff453a); }

.kk-zeile { display: block; min-width: 0; }
.kk-zeile > span {
  display: block; margin-bottom: 2px;
  color: var(--text-3); font-size: 10px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.ka-feld {
  display: block; width: 100%; padding: 6px 8px;
  border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--inset); color: var(--text-2);
  font: inherit; font-size: 12px;
  text-overflow: ellipsis;           /* langer Link wird gekürzt, nicht breit */
}
.ka-feld:hover { border-color: var(--line-strong); }
.ka-feld:focus {
  border-color: var(--accent); color: var(--text); outline: none;
}
.ka-feld::placeholder { color: var(--text-3); }
.ka-link { font-size: 11px; }

.kk-fuss { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.kk-hinweis { color: var(--text-3); font-size: 11px; }

.kk-kanal {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 12px; color: var(--text-2);
}
.kk-kanal.aus { opacity: .45; }
.kk-kanal-name { font-weight: 600; color: var(--text); }
.kk-kanal-wer {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--text-3);
}
.kk-kanal-stand { font-size: 10px; color: var(--text-3); }
.kk-kanal:not(.aus) .kk-kanal-stand { color: var(--green); }
.kk-eintrag.klein { font-size: 12px; padding-top: 4px; padding-bottom: 4px; }

.hebt-sich { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .3s; }

.neues {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 18px; padding: 14px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  animation: neuesRein .45s var(--ease-out) both;
}
@keyframes neuesRein {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.neues-text { flex: 1; min-width: 0; }
.neues h2 {
  margin: 0 0 2px; font-size: 12px; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.neues p { margin: 0; font-size: 14px; color: var(--text-2); }
.neues p strong { color: var(--text); font-weight: 650; }
.neues-wert { color: var(--green); font-weight: 600; }

.neues-weg {
  flex: none; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.neues-weg:hover {
  color: var(--text); border-color: var(--text-3);
  background: var(--inset);
}

@media (max-width: 640px) {
  .neues { flex-direction: column; align-items: flex-start; gap: 10px; }
  .neues-weg { align-self: stretch; text-align: center; }
}

.label-zeile { cursor: pointer; user-select: none; }
.label-zeile:hover { background: var(--inset); }
.lb-haken { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.lb-fertig { color: var(--green); font-size: 14px; width: 16px; flex: none; }
.kopf-knoepfe {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  min-width: 0;
}
.page-head > * { min-width: 0; }

@media (max-width: 640px) {
  .page-head {
    flex-direction: column; align-items: stretch; gap: 14px;
    flex-wrap: nowrap;
  }
  .kopf-knoepfe .btn { flex: 1 1 auto; }
}

.rw-link {
  padding: 6px 8px; border-radius: 999px;
  color: var(--text-3); text-decoration: none; font-size: 13px;
  transition: color .16s, background .16s;
}
.rw-link:hover { color: var(--text); background: var(--surface-2); }
.rw-link.on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }

.rw-zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2); text-decoration: none; font-size: 13px;
}
.rw-zurueck:hover { color: var(--text); }
.rw-zurueck i { font-style: normal; transition: transform .16s var(--ease-out); }
.rw-zurueck:hover i { transform: translateX(3px); }

@media (max-width: 640px) {
  .rw-nav { gap: 0; }
  .rw-link { padding: 6px 10px; font-size: 12px; }
}

.lf-seite { max-width: 1080px; }
.lf-seite.schmal { max-width: 780px; }

[data-rein] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
[data-rein].da { opacity: 1; transform: none; }

.lf-hero { position: relative; padding: 26px 0 40px; }
.lf-hero-glanz {
  position: absolute; left: -12%; top: -28%; width: 62%; height: 150%;
  pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%);
  filter: blur(18px);
  animation: lfAtmen 9s ease-in-out infinite;
}
@keyframes lfAtmen {
  50% { transform: translate(4%, 3%) scale(1.08); opacity: .78; }
}

.lf-auge {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.lf-auge a { color: inherit; text-decoration: none; }
.lf-auge a:hover { text-decoration: underline; }
.lf-auge span { color: var(--text-3); }

.lf-hero h1 {
  margin: 0 0 16px; font-size: clamp(34px, 6vw, 62px);
  line-height: 1.04; letter-spacing: -.035em; font-weight: 700;
}
.lf-hero h1 em {
  font-style: normal;
  display: inline-block; padding-bottom: .12em; margin-bottom: -.12em;
  background: linear-gradient(100deg, var(--accent),
              color-mix(in srgb, var(--accent) 55%, #fff) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lf-hero .lede {
  max-width: 54ch; margin: 0; font-size: clamp(15px, 1.4vw, 17.5px);
  line-height: 1.62; color: var(--text-2);
}

.lf-zahlen { display: flex; gap: 40px; margin-top: 30px; flex-wrap: wrap; }
.lf-zahlen div { display: grid; gap: 2px; }
.lf-zahlen b {
  font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;   /* springt beim Hochzählen nicht */
}
.lf-zahlen span {
  color: var(--text-3); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
}

.lf-hinweis {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 0 32px; padding: 14px 18px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--inset);
  color: var(--text-2); font-size: 13px; line-height: 1.6;
}
.lf-hinweis.klein { margin: 22px 0 34px; font-size: 12px; padding: 12px 16px; }
.lf-hinweis b { color: var(--text); }
.lf-hinweis-zeichen {
  flex: none; width: 30px; height: 30px; border-radius: var(--radius-s);
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text-3); font-size: 15px; font-weight: 700;
}
.lf-stand { display: block; margin-top: 4px; color: var(--text-3); font-size: 12px; }

.lf-sprung {
  position: sticky; top: var(--kopf-h); z-index: 30;
  margin: 0 0 46px; padding: 10px 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.lf-sprung-bahn {
  display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px,
                                      #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18px,
                              #000 calc(100% - 18px), transparent);
}
.lf-sprung-bahn::-webkit-scrollbar { display: none; }
.lf-sprung a {
  flex: none; padding: 6px 14px; border-radius: 999px;
  color: var(--text-3); text-decoration: none; font-size: 12px;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.lf-sprung a:hover { color: var(--text); background: var(--surface-2); }
.lf-sprung a.dran {
  background: var(--accent-soft); color: var(--accent); font-weight: 620;
}

.lf-rubrik { margin-bottom: 56px; }
.lf-rubrik-kopf { display: flex; gap: 16px; align-items: baseline; margin-bottom: 18px; }
.lf-nummer {
  flex: none; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-3); font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.lf-rubrik-kopf h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.02em; }
.lf-rubrik-kopf p { margin: 0; max-width: 62ch; color: var(--text-2); font-size: 13px; }

.lf-karten {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
}
.lf-karte {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px 22px 16px; border-radius: var(--radius-l);
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color .22s, transform .22s var(--ease-out), box-shadow .22s;
  transition-delay: calc(var(--k, 0) * 40ms);
}
.lf-rubrik[data-rein] .lf-karte {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease-out) calc(var(--k, 0) * 70ms),
              transform .5s var(--ease-out) calc(var(--k, 0) * 70ms),
              border-color .22s, box-shadow .22s;
}
.lf-rubrik[data-rein].da .lf-karte { opacity: 1; transform: none; }

.lf-karte:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-3px); box-shadow: var(--shadow-lift);
}
.lf-karte-glanz {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 30%,
    color-mix(in srgb, var(--accent) 9%, transparent) 50%, transparent 70%);
  transform: translateX(-60%);
  transition: opacity .3s, transform .6s var(--ease-out);
}
.lf-karte:hover .lf-karte-glanz { opacity: 1; transform: translateX(60%); }

.lf-karte-titel { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.lf-karte-lede { flex: 1; color: var(--text-2); font-size: 13px; line-height: 1.58; }
.lf-karte-fuss {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px; color: var(--text-3); font-size: 12px;
}
.lf-karte-fuss i { font-style: normal; transition: transform .22s var(--ease-out); }
.lf-karte:hover .lf-karte-fuss { color: var(--accent); }
.lf-karte:hover .lf-karte-fuss i { transform: translateX(4px); }

.lf-schluss {
  margin: 20px 0 40px; padding: 40px 36px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 130% at 100% 0%,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    var(--surface);
  text-align: center;
}
.lf-schluss h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.02em; }
.lf-schluss p {
  margin: 0 auto 20px; max-width: 52ch;
  color: var(--text-2); font-size: 14px; line-height: 1.6;
}

.lf-artikel-kopf { margin-bottom: 4px; }
.lf-text h1 {
  margin: 0 0 12px; font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.08; letter-spacing: -.03em;
}
.lf-text .lede { margin: 0 0 10px; max-width: 58ch; font-size: 17px;
                 line-height: 1.58; color: var(--text-2); }
.lf-meta { display: flex; gap: 8px; margin: 0; color: var(--text-3); font-size: 12px; }

.lf-text > p, .lf-text > ul, .lf-text > ol { max-width: 66ch; }
.lf-text > p { margin: 0 0 16px; color: var(--text-2); font-size: 15px; line-height: 1.74; }
.lf-text h2 {
  margin: 38px 0 12px; font-size: 20px; letter-spacing: -.02em;
}
.lf-text h2::before {
  content: ""; display: block; width: 26px; height: 2px; border-radius: 2px;
  margin-bottom: 12px; background: var(--accent); opacity: .75;
}

.lf-liste, .lf-schritte { margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.lf-liste { list-style: none; }
.lf-liste li, .lf-schritte li { color: var(--text-2); font-size: 15px; line-height: 1.66; }
.lf-liste li { position: relative; padding-left: 22px; }
.lf-liste li::before {
  content: ""; position: absolute; left: 3px; top: .66em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .7;
}
.lf-schritte { counter-reset: lf; list-style: none; }
.lf-schritte li { position: relative; padding-left: 38px; counter-increment: lf; }
.lf-schritte li::before {
  content: counter(lf); position: absolute; left: 0; top: -1px;
  width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700;
}

.lf-kasten {
  position: relative; max-width: 66ch; margin: 26px 0;
  padding: 18px 20px 16px 22px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); overflow: hidden;
}
.lf-kasten::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.lf-kasten p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.66; }
.lf-kasten-marke {
  display: block; margin-bottom: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.lf-kasten.merke::before { background: var(--stufe); }
.lf-kasten.merke .lf-kasten-marke { color: var(--stufe); }
.lf-kasten.achtung::before { background: var(--orange); }
.lf-kasten.achtung .lf-kasten-marke { color: var(--orange); }

.lf-tabelle-huelle {
  max-width: 100%; overflow-x: auto; margin: 24px 0;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.lf-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.lf-tabelle th, .lf-tabelle td {
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.lf-tabelle th {
  background: var(--inset); color: var(--text-3);
  font-size: 11px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.lf-tabelle td { color: var(--text-2); line-height: 1.55; }
.lf-tabelle tr:last-child td { border-bottom: 0; }

.lf-weiter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
}
.lf-weiter-karte {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color .2s, transform .2s var(--ease-out);
}
.lf-weiter-karte:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-2px);
}
.lf-weiter-karte.rechts { text-align: right; }
.lf-weiter-auge {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
}
.lf-weiter-karte:hover .lf-weiter-auge { color: var(--accent); }
.lf-weiter-auge i { font-style: normal; display: inline-block;
                    transition: transform .2s var(--ease-out); }
.lf-weiter-karte:hover .lf-weiter-auge i { transform: translateX(-3px); }
.lf-weiter-karte.rechts:hover .lf-weiter-auge i { transform: translateX(3px); }
.lf-weiter-titel { font-size: 14px; font-weight: 620; }

@media (max-width: 560px) {
  .lf-weiter { grid-template-columns: 1fr; }
  .lf-weiter-karte.rechts { text-align: left; }
  .lf-zahlen { gap: 26px; }
  .lf-schluss { padding: 30px 22px; }
  .lf-rubrik-kopf { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-rein], .lf-rubrik[data-rein] .lf-karte {
    opacity: 1; transform: none; transition: none;
  }
  .lf-hero-glanz { animation: none; }
  .lf-karte-glanz { display: none; }
}

.einladung {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  width: min(370px, calc(100vw - 32px));
  padding: 20px 22px 16px;
  border-radius: var(--radius-l);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-3);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .26s var(--ease-out), transform .26s var(--ease-out);
}
.einladung.da { opacity: 1; transform: none; }

.ein-zu {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: var(--inset); color: var(--text-3); cursor: pointer; font-size: 11px;
}
.ein-zu:hover { background: var(--surface-2); color: var(--text); }

.ein-auge {
  margin: 0 0 4px; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.ein-titel { margin: 0 0 6px; font-size: 17px; letter-spacing: -.015em; }
.ein-text { margin: 0 0 14px; color: var(--text-2); font-size: 13px; line-height: 1.6; }

.ein-pakete { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ein-paket {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 12px 10px; border-radius: var(--radius-s);
  background: var(--inset); border: 1px solid transparent;
  text-decoration: none; color: inherit;
  transition: border-color .16s, background .16s;
}
.ein-paket:hover { border-color: var(--line-strong); background: var(--surface-2); }
.ein-paket.hoch { background: var(--accent-soft); }
.ein-paket.hoch:hover { border-color: var(--accent); }
.ein-paket-name { font-size: 13px; font-weight: 700; }
.ein-paket.hoch .ein-paket-name { color: var(--accent); }
.ein-paket-preis { font-size: 17px; font-weight: 660; letter-spacing: -.02em; }
.ein-paket-preis i { font-style: normal; font-size: 11px; font-weight: 500; color: var(--text-3); }
.ein-paket-was { color: var(--text-3); font-size: 11px; line-height: 1.4; }

.ein-fuss { margin: 12px 0 0; color: var(--text-3); font-size: 11px; }
.ein-fuss a { color: var(--text-2); }

@media (max-width: 480px) {
  .einladung { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .einladung { transition: none; }
}

.wn-kasten { width: min(560px, 100%); padding: 0; overflow: hidden; }
.wn-zu { position: absolute; top: 16px; right: 16px; z-index: 2; }

.wn-kopf {
  padding: 30px 30px 24px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 100% at 0% 0%,
      color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%);
}
.wn-auge {
  display: block; margin-bottom: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}
.wn-kopf h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.wn-kopf p { margin: 2px 0 0; color: var(--text-3); font-size: 13px; }

.wn-lauf {
  max-height: min(52vh, 420px); overflow-y: auto;
  padding: 4px 30px 8px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.wn-lauf::-webkit-scrollbar { width: 8px; }
.wn-lauf::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.wn-stand { padding: 22px 0 4px; }
.wn-stand + .wn-stand { border-top: 1px solid var(--line); }
.wn-stand-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}
.wn-stand-kopf h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.wn-stand-kopf time { flex: none; color: var(--text-3); font-size: 12px; }

.wn-gruppe { margin-bottom: 18px; }
.wn-gruppe:last-child { margin-bottom: 4px; }

.wn-art {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.wn-art::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.wn-gruppe.neu     .wn-art { color: var(--accent); }
.wn-gruppe.besser  .wn-art { color: var(--stufe); }
.wn-gruppe.behoben .wn-art { color: var(--green); }

.wn-gruppe ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.wn-gruppe li {
  position: relative; padding-left: 14px;
  color: var(--text-2); font-size: 13px; line-height: 1.62;
  max-width: 62ch;
}
.wn-gruppe li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 5px; height: 1.5px; border-radius: 2px;
  background: var(--text-3); opacity: .6;
}

.wn-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 30px 18px;
  border-top: 1px solid var(--line);
  background: var(--inset);
}
.wn-aus {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-3); font: inherit; font-size: 12px;
}
.wn-aus:hover { color: var(--text-2); text-decoration: underline; }

@media (max-width: 520px) {
  .wn-kopf { padding: 24px 20px 20px; }
  .wn-lauf { padding-left: 20px; padding-right: 20px; }
  .wn-fuss { padding: 14px 20px 16px; }
  .wn-stand-kopf { flex-direction: column; gap: 2px; }
}

.fo-leiste {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 16px;
}

.fo-rubriken { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.fo-rubrik {
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-2); font: inherit; font-size: 12px;
  transition: background .16s, color .16s, border-color .16s;
}
.fo-rubrik:hover { color: var(--text); border-color: var(--line-strong); }
.fo-rubrik.on {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); font-weight: 600;
}

.fo-sortierung { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--inset); }
.fo-schalter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-2); font: inherit; font-size: 12px;
  transition: background .16s, color .16s;
}
.fo-schalter svg { width: 15px; height: 15px; flex: none; }
.fo-schalter.on { background: var(--surface); color: var(--text); font-weight: 600; }
.fo-schalter[data-sortierung="regung"].on { color: var(--accent); }
.fo-schalter#foGefolgt { margin-left: 4px; border-left: 1px solid var(--line); border-radius: 0 999px 999px 0; }
.fo-schalter#foGefolgt.on { background: var(--accent-soft); color: var(--accent); }

.fo-liste-panel { padding: 8px; }
.fo-zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 14px;
  border: 1px solid transparent; cursor: pointer;
  transition: background .16s, border-color .16s;
}
.fo-zeile:hover { background: var(--surface-2); border-color: var(--line-strong); }
.fo-zeile + .fo-zeile { margin-top: 4px; }
.fo-zeile.versteckt { opacity: .55; }

.fo-zeile-mitte { flex: 1; min-width: 0; display: grid; gap: 6px; }
.fo-titelzeile { display: flex; align-items: center; gap: 9px; min-width: 0; }

.fo-neu {
  flex: none; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}

.fo-stimme {
  flex: none; display: flex; flex-direction: column; align-items: center;
  gap: 3px; min-width: 44px;
}

.fo-rechts {
  flex: none; display: flex; align-items: center; gap: 12px;
}
.fo-koepfe { display: flex; align-items: center; }
.fo-kopf + .fo-kopf { margin-left: -9px; }
.fo-kopf .fo-avatar {
  width: 26px; height: 26px; font-size: 11px;
  border: 2px solid var(--surface);
}
.fo-regung {
  color: var(--text-3); font-size: 11.5px; white-space: nowrap;
  min-width: 82px; text-align: right;
}

.fo-nadel {
  all: unset; flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  color: var(--text-3); opacity: .45;
  transition: color .15s, opacity .15s, background .15s;
}
button.fo-nadel { cursor: pointer; }
button.fo-nadel:hover { opacity: 1; color: var(--text); background: var(--inset); }
button.fo-nadel:focus-visible { outline: 2px solid var(--accent); }
.fo-nadel.fest { color: var(--accent); opacity: 1; }
.fo-nadel svg { width: 16px; height: 16px; }

.fo-zeile.angeheftet {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
.fo-zeile.angeheftet:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.fo-leerkarte {
  display: grid; justify-items: center; gap: 6px;
  margin-top: 10px; padding: 26px 20px;
  border-radius: 14px; border: 1px dashed var(--line-strong);
  text-align: center;
}
.fo-leer-zeichen { color: var(--text-3); }
.fo-leer-zeichen svg { width: 34px; height: 34px; }
.fo-leerkarte b { font-size: 15px; font-weight: 650; }
.fo-leerkarte span { color: var(--text-3); font-size: 12.5px; }
.fo-leerkarte .btn { margin-top: 8px; }

.fo-kopf { display: flex; align-items: center; gap: 14px; }
.fo-marke {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
}
.fo-marke svg { width: 23px; height: 23px; }
.fo-kopf-text { flex: 1; min-width: 0; }

.fo-kopf .kopf-knoepfe { gap: 10px; }
.fo-kopf .kopf-knoepfe .btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 20px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600;
}
.fo-kopf .kopf-knoepfe .btn.ghost { border-color: var(--line-strong); }
.fo-knopf-icon { width: 17px; height: 17px; flex: none; }

body.im-forum #flieger { display: none; }
#tab-forum {
  background:
    radial-gradient(70% 42% at 18% 0%,
      color-mix(in srgb, var(--accent) 5%, transparent), transparent 68%),
    radial-gradient(60% 40% at 88% 12%,
      color-mix(in srgb, var(--stufe) 4%, transparent), transparent 70%);
}
.fo-titel {
  font-size: 15px; font-weight: 620; color: var(--text); text-decoration: none;
  letter-spacing: -.01em;
}
.fo-titel:hover { color: var(--accent); }

.fo-sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  color: var(--text-3); font-size: 12px;
}
.fo-rubrik-marke {
  padding: 2px 8px; border-radius: 999px;
  background: var(--inset); color: var(--text-2); font-size: 11px; font-weight: 600;
}
.fo-weg {
  padding: 2px 8px; border-radius: 999px;
  background: var(--orange-soft); color: var(--orange); font-size: 11px; font-weight: 600;
}

.fo-person {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-2); font: inherit; font-size: 12px;
}
.fo-person:hover { color: var(--accent); }
.fo-person.gross { font-size: 13px; font-weight: 600; color: var(--text); }

.fo-schild {
  flex: none; padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.fo-schild.rolle { background: var(--accent-soft); color: var(--accent); }
.fo-schild.abo.hoch {
  background: var(--zweit-soft);
  color: var(--zweit);
}
.fo-schild.abo.mittel {
  background: color-mix(in srgb, var(--stufe) 16%, transparent);
  color: var(--stufe);
}
.fo-schild.abo.still {
  background: transparent; color: var(--text-3); font-weight: 600;
  padding-left: 0; padding-right: 0;
}

.fo-wer { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fo-profil-schilder { display: flex; gap: 6px; margin: 4px 0 2px; }

.fo-avatar {
  flex: none; width: 22px; height: 22px; padding: 0; box-sizing: border-box;
  border-radius: 50%; overflow: hidden;
  object-fit: cover; background: var(--inset);
}
.fo-avatar.ohne {
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700;
}
.fo-person.gross .fo-avatar { width: 30px; height: 30px; font-size: 13px; }
.fo-profil-kopf .fo-avatar { flex: none; }

.fo-daumen {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 42px; padding: 4px 6px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  color: var(--text-3); font: inherit; font-size: 11px;
  transition: color .16s, border-color .16s, background .16s;
}
.fo-daumen:hover { color: var(--text); border-color: var(--line-strong); }
.fo-daumen.an {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
}
.fo-daumen-zahl { font-size: 15px; font-weight: 700; }
.fo-stimme .fo-daumen {
  min-width: 0; padding: 2px 8px; border-color: transparent; font-size: 12px;
}
.fo-stimme .fo-daumen:hover { border-color: var(--line-strong); }
.fo-daumen.breit {
  flex-direction: row; gap: 6px; min-width: 0; padding: 6px 14px;
  font-size: 12px;
}

.fo-antwortzahl {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-3); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fo-antwortzahl svg { width: 15px; height: 15px; }

.fo-zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--text-2); font: inherit; font-size: 13px;
}
.fo-zurueck:hover { color: var(--accent); }

.fo-haupt { padding: 24px 26px 20px; }
.fo-haupt-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.fo-haupt-titel { margin: 0 0 14px; font-size: 20px; letter-spacing: -.02em; }
.fo-zeit { color: var(--text-3); font-size: 12px; }

.fo-kopfzeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.fo-kopf-aktionen { display: flex; gap: 8px; }
.fo-mini {
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: transparent;
  color: var(--text-3); font: inherit; font-size: 11px;
}
.fo-mini:hover { color: var(--text); border-color: var(--line-strong); }
.fo-mini.gefahr:hover { color: var(--orange); border-color: var(--orange); }

.fo-text {
  color: var(--text-2); font-size: 14px; line-height: 1.68;
  max-width: 68ch; overflow-wrap: anywhere;
}
.fo-grund {
  margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--orange-soft); color: var(--orange);
  font-size: 12px; line-height: 1.55;
}
.fo-grund b { color: inherit; }

.fo-haupt-fuss {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}

.fo-antworten-titel { margin: 28px 0 12px; font-size: 15px; }
.fo-antworten { display: grid; gap: 10px; }
.fo-antwort { padding: 18px 22px 14px; }
.fo-antwort.versteckt { opacity: .55; }
.fo-antwort-fuss {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
}

.fo-schreiben { margin-top: 18px; padding: 20px 22px 18px; }
.fo-schreiben label { display: block; margin-bottom: 6px; color: var(--text-2); font-size: 12px; }
.fo-schreiben textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--inset); color: var(--text);
  font: inherit; font-size: 14px; line-height: 1.6; resize: vertical;
}
.fo-schreiben textarea:focus { outline: none; border-color: var(--accent); }
.fo-schreiben-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px; flex-wrap: wrap;
}

.fo-feld { display: block; margin-bottom: 14px; }
.fo-feld > span {
  display: block; margin-bottom: 6px; color: var(--text-2); font-size: 12px;
}
.fo-feld > span em { color: var(--text-3); font-style: normal; font-size: 11px; }
.fo-feld input, .fo-feld select, .fo-feld textarea {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--inset); color: var(--text);
  font: inherit; font-size: 14px; line-height: 1.55;
}
.fo-feld textarea { resize: vertical; }
.fo-feld input:focus, .fo-feld select:focus, .fo-feld textarea:focus {
  outline: none; border-color: var(--accent);
}

.fo-profil { padding-top: 26px; }
.fo-profil-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fo-profil-kopf .fo-avatar { width: 52px; height: 52px; font-size: 20px; }
.fo-profil-kopf h2 { margin: 0; font-size: 17px; }
.fo-profil-kopf p { margin: 2px 0 0; }
.fo-profil-text { margin: 0 0 16px; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.fo-profil-zahlen {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.fo-profil-zahlen div { display: grid; gap: 2px; text-align: center; }
.fo-profil-zahlen b { font-size: 17px; font-weight: 660; letter-spacing: -.02em; }
.fo-profil-zahlen span { color: var(--text-3); font-size: 11px; }

.fo-meldung {
  padding: 16px 18px; margin-top: 12px;
  border-radius: var(--radius); border: 1px solid var(--line); background: var(--inset);
}
.fo-meldung-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.fo-meldung-grund {
  padding: 2px 8px; border-radius: 999px;
  background: var(--orange-soft); color: var(--orange);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.fo-meldung-betreff { margin: 0 0 4px; font-size: 14px; font-weight: 620; }
.fo-meldung-auszug {
  margin: 0 0 10px; color: var(--text-2); font-size: 12px; line-height: 1.55;
  max-height: 5.2em; overflow: hidden;
}
.fo-meldung-dazu { margin: 0 0 10px; color: var(--text-2); font-size: 12px; }
.fo-meldung-grundfeld {
  width: 100%; margin-bottom: 10px; padding: 8px 12px;
  border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.fo-meldung-grundfeld:focus { outline: none; border-color: var(--accent); }

#foMeldungenBtn.dringend {
  border-color: var(--orange); color: var(--orange);
}

@media (max-width: 700px) {
  .fo-leiste { flex-direction: column; align-items: stretch; }
  .fo-sortierung { overflow-x: auto; }
  .fo-profil-zahlen { grid-template-columns: repeat(2, 1fr); }
  .fo-haupt, .fo-antwort, .fo-schreiben { padding-left: 16px; padding-right: 16px; }
}

.dl-bald {
  padding: 26px 28px;
  background:
    radial-gradient(120% 140% at 100% 0%,
      color-mix(in srgb, var(--stufe) 11%, transparent), transparent 62%),
    var(--surface);
}
.dl-bald-inhalt { display: flex; gap: 18px; align-items: flex-start; }
.dl-bald-zeichen {
  flex: none; width: 46px; height: 46px; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--inset); border: 1px solid var(--line);
  color: var(--stufe);
}
.dl-bald-marke {
  display: inline-block; margin-bottom: 6px; padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stufe) 16%, transparent);
  color: var(--stufe);
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
}
.dl-bald h2 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.02em; }
.dl-bald .lede { margin: 0 0 10px; max-width: 62ch; font-size: 14px; line-height: 1.62; }
.dl-bald-warum {
  margin: 0; max-width: 62ch;
  color: var(--text-3); font-size: 12px; line-height: 1.55;
}

@media (max-width: 560px) {
  .dl-bald { padding: 20px 18px; }
  .dl-bald-inhalt { flex-direction: column; gap: 12px; }
}

.rw-nav {
  display: flex; align-items: center; gap: 2px;
  min-width: 0; overflow-x: auto;
  scrollbar-width: none;
}
.rw-nav::-webkit-scrollbar { display: none; }
.rw-nav .rw-link { white-space: nowrap; }

.rw-teiler {
  flex: none; width: 1px; height: 16px; margin: 0 4px;
  background: var(--line);
}

@media (max-width: 860px) {
  .rw-teiler { margin: 0 4px; }
  .topbar-actions .rw-zurueck { white-space: nowrap; }
}

.hero-puls {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 16px 0 0; padding: 4px 12px 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 26%, transparent);
  color: var(--text-2); font-size: 12px;
}
.hero-puls-punkt {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent);
  animation: pulsSchlag 2.4s ease-out infinite;
}
@keyframes pulsSchlag {
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-puls-punkt { animation: none; }
}

.page-head { position: relative; isolation: isolate; }
.page-head::before {
  content: ""; position: absolute; z-index: -1;
  left: -60px; top: -70px; width: 420px; height: 260px;
  max-width: calc(100% + 60px);
  pointer-events: none;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%);
  filter: blur(16px);
  animation: lfAtmen 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-head::before { animation: none; }
}
@media (max-width: 640px) {
  .page-head::before { transform-origin: right center; animation-name: lfAtmenSchmal; }
}
@keyframes lfAtmenSchmal {
  50% { transform: translate(-4%, 3%) scale(1.08); opacity: .78; }
}

.panel.klickbar { position: relative; overflow: hidden; }
.panel.klickbar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transform: translateX(-60%);
  background: linear-gradient(115deg, transparent 30%,
    color-mix(in srgb, var(--accent) 8%, transparent) 50%, transparent 70%);
  transition: opacity .3s, transform .6s var(--ease-out);
}
.panel.klickbar:hover::after { opacity: 1; transform: translateX(60%); }

.fz-inner nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }

.kt-fenster { transition: none; }
.kt-fehler {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--orange-soft); color: var(--orange);
  font-size: 12px; line-height: 1.5;
}
.kt-fehler[hidden] { display: none; }

.kt-fertig { padding: 16px 4px 8px; text-align: center; }
.kt-haken {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--green-soft); color: var(--green); font-size: 24px;
}
.kt-fertig h2 { margin: 0 0 6px; font-size: 20px; }
.kt-fertig p { margin: 0 0 20px; color: var(--text-2); font-size: 14px; }

.rt-hero { padding: 18px 0 22px; }
.rt-hero h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.025em; }
.rechtstext .lf-hero-glanz { left: -8%; top: -40%; width: 52%; height: 170%; }

html { scroll-padding-top: calc(max(var(--topbar-h), var(--kopf-h)) + 34px); }

.rechtstext h2, .lf-rubrik, .lf-text h2,
.panel, .tab > .page > h2, .tab [id] { scroll-margin-top: 0; }

.kanal-karte.vorn { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.kk-vorn {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.kanal-karte.vorn .kv-lampe { margin-left: 8px; }
.kk-fuss { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.kf-hinweis {
  margin: 10px 2px 0; color: var(--text-3);
  font-size: 12px; line-height: 1.6;
}
.kf-hinweis b { color: var(--text-2); }

.kv-anmeldung {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}
.kv-lage { font-size: 12px; font-weight: 600; }
.kv-lage.gut  { color: var(--green); }
.kv-lage.offen { color: var(--text-3); }

.hh-summe { margin-top: 10px; }
.hh-summe span {
  display: block; margin-bottom: 2px;
  color: var(--text-3); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.hh-summe code {
  display: block; padding: 6px 8px; border-radius: var(--radius-s);
  background: var(--inset); color: var(--text-2);
  font-size: 11px; line-height: 1.5; word-break: break-all;
}

.sl-eintrag.gesperrt          { opacity: .62; }
.sl-eintrag.gesperrt:hover    { opacity: .85; }
.sl-eintrag.gesperrt .sl-text { color: var(--text-3); }

.sl-schloss {
  flex: none; margin-left: auto;
  display: grid; place-items: center;
  width: 18px; height: 18px;
  font-size: 10px; line-height: 1;
  opacity: .75;
}
.sl-eintrag .sl-marke + .sl-schloss,
.sl-eintrag .sl-zahl + .sl-schloss { margin-left: 4px; }

.kk-zugang {
  display: inline-block; margin-left: 8px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  vertical-align: 1px;
}
.kk-zugang.gut   { background: var(--green-soft);  color: var(--green); }
.kk-zugang.offen { background: var(--orange-soft); color: var(--orange); }

.art-marke.angebot { background: var(--green-soft); color: var(--green); }

.nk-mehr { margin: 10px 0 2px; }

.chat-flaeche {
  display: grid; gap: 20px;
  grid-template-columns: minmax(240px, 340px) 1fr;
  align-items: start;
}
@media (max-width: 900px) {
  .chat-flaeche { grid-template-columns: 1fr; }
}
.chat-flaeche.einspaltig { grid-template-columns: 1fr; }

.chat-liste #chListe { max-height: 62vh; overflow-y: auto; }
.chat-verlauf { display: flex; flex-direction: column; }

.ch-zeile { cursor: pointer; }
.ch-zeile:hover  { background: var(--inset); }
.ch-zeile.offen  { background: var(--accent-soft); }
.ch-zeile.offen .r-name { color: var(--accent); }

.ch-verlauf {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 240px; max-height: 56vh; overflow-y: auto;
  padding: 4px 2px;
}

.ch-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}

.sl-zugang {
  flex: none; margin-left: auto;
  font-size: 9px; line-height: 1;
  display: grid; place-items: center;
  width: 14px; height: 14px;
}
.sl-zugang.gut   { color: var(--green); }
.sl-zugang.offen { color: var(--orange); }
.sl-eintrag.extern .sl-zugang { margin-right: 2px; }

.sl-eintrag.ohne-link { cursor: default; }
.sl-eintrag.ohne-link:hover { background: none; }

.ch-fuss {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.ch-fuss textarea {
  width: 100%; resize: vertical; min-height: 52px;
  padding: 8px 10px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--inset); color: var(--text);
  font: inherit; font-size: 13px; line-height: 1.5;
}
.ch-fuss textarea:focus {
  outline: none; border-color: var(--accent);
  background: var(--surface);
}
.ch-fuss-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.ch-fuss-knoepfe { display: flex; gap: 8px; flex: none; }

.ang-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.kf-konto {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--inset);
}
.kf-konto-text {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}
.kf-konto select {
  border: 0; background: none; color: var(--text);
  font: inherit; font-size: 13px; padding: 2px 4px;
  cursor: pointer; max-width: 180px;
}
.kf-konto select:focus { outline: none; }

.shop-marke {
  display: inline-block; margin-left: 8px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  vertical-align: 1px;
}

.melder {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  width: min(370px, calc(100vw - 36px));
  pointer-events: none;                 /* die Karten selbst sind klickbar */
}
.melde-karte {
  pointer-events: auto;
  position: relative; overflow: hidden;
  width: 100%;
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: start; gap: 12px;
  padding: 13px 10px 14px 13px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgb(0 0 0 / .34);
  animation: meldeRein .42s cubic-bezier(.2, .9, .25, 1.12) both;
}
:root[data-theme="light"] .melde-karte { box-shadow: 0 16px 36px rgb(0 0 0 / .13); }
@keyframes meldeRein {
  from { opacity: 0; transform: translateX(28px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.melde-karte.geht { animation: meldeRaus .2s ease-in both; }
@keyframes meldeRaus {
  to { opacity: 0; transform: translateX(24px) scale(.97); }
}
.melde-karte.klickbar { cursor: pointer; }
.melde-karte.klickbar:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.melde-bild {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
}
.melde-bild > .stb-i { width: 19px; height: 19px; }
.melde-bild.person {
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--text);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 34%, var(--surface)),
    color-mix(in srgb, var(--accent) 12%, var(--surface)));
}
.melde-art {
  position: absolute; right: -3px; bottom: -3px;
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface);
  box-shadow: 0 0 0 2px var(--surface);
  color: var(--accent);
}
.melde-art .stb-i { width: 11px; height: 11px; stroke-width: 2; }
.melde-art img { width: 13px; height: 13px; border-radius: 3px; object-fit: contain; }
.melde-karte.verkauf .melde-bild { color: var(--green); background: var(--green-soft); }
.melde-karte.verkauf .melde-bild::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px; border-radius: 50%;
  box-shadow: 0 -23px var(--green), 16px -16px var(--accent), 23px 0 var(--green),
              16px 16px var(--accent), 0 23px var(--green), -16px 16px var(--accent),
              -23px 0 var(--green), -16px -16px var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: meldeFunken .85s cubic-bezier(.2, .7, .3, 1) .28s both;
}
@keyframes meldeFunken {
  from { opacity: 1; transform: scale(.35); }
  55% { opacity: 1; }
  to { opacity: 0; transform: scale(1.3); }
}

.melde-text {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  min-width: 0; padding-top: 1px;
}
.melde-text strong {
  font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--text);
}
.melde-zeile {
  max-width: 100%;
  font-size: 12.5px; line-height: 1.4; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.melde-blase {
  max-width: 100%;
  padding: 7px 11px;
  border-radius: 4px 14px 14px 14px;
  background: var(--inset);
  font-size: 13px; line-height: 1.4; color: var(--text);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.melde-tat {
  font-style: normal;
  font-size: 12px; font-weight: 650; color: var(--accent);
}
.melde-weg {
  display: grid; place-items: center;
  width: 28px; height: 28px; margin: -5px -3px 0 0;
  border: 0; border-radius: 8px; background: none;
  color: var(--text-3); cursor: pointer;
}
.melde-weg .stb-i { width: 15px; height: 15px; }
.melde-weg:hover { color: var(--text); background: var(--surface-2); }
.melde-weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.melde-uhr {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  transform-origin: left;
  animation: meldeUhr 9s linear both;
}
.melde-karte:hover .melde-uhr { animation-play-state: paused; }
@keyframes meldeUhr {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (max-width: 560px) {
  .melder { left: 12px; right: 12px; bottom: 12px; width: auto; }
}

.ag-liste {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px 16px;
}

.ag-karte {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: 56px 1fr auto auto;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--inset); border: 1px solid var(--line);
}
.ag-karte.fertig { opacity: .66; }
.ag-karte.fertig:hover { opacity: .9; }

.ag-bild {
  width: 56px; height: 56px; border-radius: var(--radius-s);
  object-fit: cover; background: var(--surface);
}
.ag-bild.leer {
  display: grid; place-items: center;
  font-size: 20px; font-weight: 700; color: var(--green);
  background: var(--green-soft);
}
.ag-mitte { min-width: 0; }
.ag-titel {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ag-wer {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 2px; font-size: 12px; color: var(--text-3);
}
.ag-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.ag-stempel {
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-3);
}

.ag-preis { text-align: right; white-space: nowrap; }
.ag-preis strong { font-size: 15px; }
.ag-preis .ab { display: block; margin-top: 2px; font-size: 11px; }

.ag-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }
.ag-tat {
  border: 1px solid transparent; border-radius: var(--radius-s);
  padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: filter .12s ease, transform .12s ease;
}
.ag-tat:hover:not(:disabled)  { filter: brightness(1.08); }
.ag-tat:active:not(:disabled) { transform: translateY(1px); }
.ag-tat:disabled { opacity: .6; cursor: default; }
.ag-tat.ja    { background: var(--green); color: var(--auf-green); }
.ag-tat.gegen { background: var(--accent-soft); color: var(--accent);
                border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.ag-tat.nein  { background: transparent; color: var(--red, #e5484d);
                border-color: color-mix(in srgb, var(--red, #e5484d) 40%, transparent); }
.ag-tat.nein:hover { background: color-mix(in srgb, var(--red, #e5484d) 12%, transparent); }

.ag-fertig-kopf {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; list-style: none;
  padding: 16px 20px;
  transition: background .15s ease;
}
.ag-fertig-kopf:hover { background: var(--inset); }
details[open] > .ag-fertig-kopf { border-bottom: 1px solid var(--line); }
.ag-fertig-kopf::-webkit-details-marker { display: none; }
.ag-fertig-kopf h2 { margin: 0; color: var(--text-2); font-size: 15px; }
details[open] > .ag-fertig-kopf h2 { color: var(--text); }
.ag-fertig-kopf::after {
  content: "▾"; margin-left: auto; color: var(--text-3); font-size: 12px;
}
details[open] > .ag-fertig-kopf::after { content: "▴"; }

@media (max-width: 760px) {
  .ag-karte { grid-template-columns: 44px 1fr; }
  .ag-bild { width: 44px; height: 44px; }
  .ag-preis { text-align: left; grid-column: 2; }
  .ag-knoepfe { grid-column: 1 / -1; }
}

.ga-zahlen {
  display: flex; gap: 10px; margin: 4px 0 16px;
}
.ga-zahlen > div {
  flex: 1; padding: 10px 12px; border-radius: var(--radius);
  background: var(--inset); border: 1px solid var(--line);
}
.ga-zahlen span {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-3);
}
.ga-zahlen strong { font-size: 17px; }

.ga-feld > span {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.ga-eingabe { position: relative; }
.ga-eingabe input {
  width: 100%; padding: 12px 34px 12px 12px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 17px; font-weight: 600;
}
.ga-eingabe input:focus { outline: none; border-color: var(--accent); }
.ga-eingabe input.falsch { border-color: var(--red, #e5484d); }
.ga-eingabe i {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 15px; color: var(--text-3);
}

.ch-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius); cursor: pointer;
}
.ch-zeile:hover { background: var(--inset); }
.ch-zeile.offen { background: var(--accent-soft); }
.ch-zeile.offen .ch-zeile-wer { color: var(--accent); }
.ch-zeile-text { min-width: 0; flex: 1; }
.ch-zeile-wer {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-zeile-was {
  font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-zeile.neu .ch-zeile-wer { font-weight: 700; }
.ch-zeile-wann { color: var(--text-3); font-weight: 400; white-space: nowrap; }
.ag-nachricht { font-size: 12.5px; color: var(--text-2); margin-top: 4px; font-style: italic; }
.ch-punkt {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
}

.ch-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; background: var(--inset);
}
.ch-avatar.leer {
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--text-3);
  border: 1px solid var(--line);
}

.ch-artikel {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 12px;
  border-radius: var(--radius); background: var(--inset);
  border: 1px solid var(--line);
}
.ch-art-bild {
  flex: none; width: 42px; height: 42px; border-radius: var(--radius-s);
  object-fit: cover; background: var(--surface);
}
.ch-art-bild.leer {
  display: grid; place-items: center; color: var(--text-3); font-size: 17px;
}
.ch-art-text { flex: 1; min-width: 0; }
.ch-art-text strong {
  display: block; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch-art-text span { font-size: 11px; color: var(--text-3); }

:root {
  --ch-ich: flex-end;
  --ch-du: flex-start;
  --ch-bild: 0;
  --ch-ecke-ich: 18px 6px 6px 18px;
  --ch-ecke-du:  6px 18px 18px 6px;
  --ch-ecke-ich-erster: 18px 18px 6px 18px;
  --ch-ecke-du-erster:  18px 18px 18px 6px;
  --ch-text-ich: right;
  --ch-text-du: left;
}

.ch-reihe {
  display: flex; align-items: flex-end; gap: 8px;
  justify-content: var(--ch-du);
  padding-right: 34px;
}
.ch-reihe.meine { justify-content: var(--ch-ich);
                  padding-right: 0; padding-left: 34px; }
.ch-reihe .ch-avatar {
  width: 26px; height: 26px; align-self: flex-end; order: var(--ch-bild);
}

.ch-bubble {
  max-width: 74%;
  padding: 8px 12px 7px;
  border-radius: var(--ch-ecke-du);
  background: var(--inset);
  border: 1px solid var(--line);
}
.ch-reihe.erster .ch-bubble { border-radius: var(--ch-ecke-du-erster); }
.ch-bubble.meine {
  border-radius: var(--ch-ecke-ich);
  background: linear-gradient(160deg, var(--accent-press), var(--accent));
  border-color: transparent;
  color: var(--auf-accent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}
.ch-reihe.erster .ch-bubble.meine { border-radius: var(--ch-ecke-ich-erster); }
:root[data-theme="light"] .ch-bubble.meine { box-shadow: none; }
.ch-bubble.meine .ch-text { color: var(--auf-accent); }
.ch-bubble.meine .ch-wann {
  color: color-mix(in srgb, var(--auf-accent) 62%, transparent);
}
.ch-verlauf > .ch-reihe + .ch-reihe:not(.erster) { margin-top: -7px; }
.ch-avatar.blind { visibility: hidden; }
.ch-reihe.neu .ch-bubble {
  transform-origin: bottom left;
  animation: chRein .34s cubic-bezier(.2, .9, .25, 1.15) both;
}
.ch-reihe.neu.meine .ch-bubble { transform-origin: bottom right; }
@keyframes chRein {
  from { opacity: 0; transform: translateY(8px) scale(.94); }
}
.ch-tag { display: flex; justify-content: center; margin: 8px 0 2px; }
.ch-tag span {
  padding: 4px 12px; border-radius: 999px;
  background: var(--inset);
  font-size: 11.5px; font-weight: 600; color: var(--text-3);
}
.ch-name {
  margin-bottom: 2px;
  font-size: 11px; font-weight: 700; color: var(--text-2);
}
.ch-bubble.meine .ch-name {
  text-align: var(--ch-text-ich);
  color: color-mix(in srgb, var(--auf-accent) 72%, transparent);
}
.ch-status {
  display: flex; justify-content: center; margin: 2px 0;
}
.ch-status span {
  max-width: 80%; padding: 4px 12px; border-radius: 999px;
  background: var(--inset); border: 1px solid var(--line);
  font-size: 11px; color: var(--text-3); text-align: center;
}

.ch-bubble.gebot { background: var(--green-soft);
                   border-color: color-mix(in srgb, var(--green) 32%, transparent); }
.ch-gebot span {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--green);
}
.ch-gebot strong { font-size: 15px; }

.ch-bubble.meine.gebot {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  color: var(--auf-accent);
}
.ch-bubble.meine.gebot .ch-gebot span {
  color: color-mix(in srgb, var(--auf-accent) 78%, transparent);
}
.ch-bubble.meine.gebot .ch-gebot strong { color: var(--auf-accent); }

.ch-text { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap;
           overflow-wrap: anywhere; }
.ch-wann { margin-top: 2px; font-size: 10.5px; line-height: 1.2;
           color: var(--text-3); text-align: var(--ch-text-du);
           font-variant-numeric: tabular-nums; }
.ch-reihe.meine .ch-wann { text-align: var(--ch-text-ich); }

@media (max-width: 620px) {
}

.label-zeile { display: flex; align-items: center; gap: 12px; }
.lb-wahl {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; cursor: pointer;
}
.label-zeile .r-main { flex: 1; min-width: 0; }
.label-zeile .r-name { overflow: hidden; text-overflow: ellipsis;
                       white-space: nowrap; }

.pf-freunde { margin-top: 26px; padding-top: 20px;
              border-top: 1px solid var(--line); }
.pf-abschnitt {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.pf-abschnitt h3 { margin: 0; font-size: 14px; }

.fr-liste { display: flex; flex-direction: column; gap: 4px;
            max-height: 260px; overflow-y: auto; }
#tab-freunde .fr-liste { max-height: none; overflow-y: visible; }
.fr-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px; border-radius: var(--radius);
}
.fr-zeile:hover { background: var(--inset); }

.fr-bild {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--inset); border: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--text-3);
  overflow: visible;
}
.fr-bild img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.fr-punkt {
  position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--surface);
}
.fr-text { min-width: 0; }
.fr-text strong {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
}
.fr-text span {
  display: block; font-size: 11px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fr-marke {
  padding: 1px 6px; border-radius: 999px;
  background: var(--green-soft); color: var(--green);
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}

.fr-zeile.schreibbar { cursor: pointer; }
.fr-zeile.schreibbar:hover { background: var(--accent-soft); }
.fr-zeile.schreibbar:hover .fr-pfeil { color: var(--accent); }

.fr-pfeil { margin-left: auto; flex: none; font-size: 13px; color: var(--text-3); }

.fr-zahl {
  margin-left: auto; flex: none;
  min-width: 20px; padding: 2px 6px; border-radius: 999px;
  background: var(--accent); color: var(--auf-accent);
  font-size: 11px; font-weight: 700; text-align: center;
}

.in-postfach { display: flex; flex-direction: column; gap: 4px; }
.in-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid transparent;
}
.in-zeile:hover { background: var(--accent-soft); border-color: var(--line); }
.in-zeile.neu { background: var(--inset); }
.in-zeile.neu .fr-text strong { color: var(--text); }
.in-zeile.neu .fr-text span { color: var(--text-2); }
.in-wann {
  flex: none; margin-left: 2px;
  font-size: 11px; color: var(--text-3); white-space: nowrap;
}
.in-zeile .fr-zahl { margin-left: auto; }
.in-zeile:not(.neu) .in-wann { margin-left: auto; }

.in-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.in-kopf h2 { margin: 0; overflow: hidden; text-overflow: ellipsis;
              white-space: nowrap; }
.in-kopf .fr-bild { width: 30px; height: 30px; font-size: 12px; }

#internFenster .ul-kasten { max-width: 560px; }
#inVerlauf { min-height: 220px; max-height: 52vh; }
#inFuss textarea:disabled {
  opacity: .6; cursor: not-allowed;
}

.r-icon {
  width: 17px; height: 17px; vertical-align: -3px;
  margin-right: 4px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .75;
}

.emoji-knopf { display: inline-grid; place-items: center; padding: 4px 8px; }
.emoji-knopf .stb-i { width: 17px; height: 17px; }
.emoji-tafel {
  position: fixed; z-index: 3000;
  display: grid; grid-template-columns: repeat(8, 36px); gap: 2px;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgb(0 0 0 / .36);
  animation: emojiAuf .18s cubic-bezier(.2, .8, .2, 1) both;
}
:root[data-theme="light"] .emoji-tafel { box-shadow: 0 16px 36px rgb(0 0 0 / .14); }
@keyframes emojiAuf {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
}
.emoji-tafel button {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  font-size: 20px; line-height: 1;
}
.emoji-tafel button > span {
  display: block;
  transition: transform .14s cubic-bezier(.2, .8, .2, 1);
}
.emoji-tafel button:hover, .emoji-tafel button:focus-visible { background: var(--inset); }
.emoji-tafel button:hover > span { transform: scale(1.22); }
.emoji-tafel button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.fr-schreiben {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-3); font-size: 14px;
  padding: 4px 8px; border-radius: var(--radius-s);
}
.fr-schreiben:hover { background: var(--accent-soft); color: var(--accent); }
.fr-schreiben .fr-zahl { margin-left: 0; }
.fr-schreiben .stb-i { width: 17px; height: 17px; }

.lw-regler {
  display: grid; gap: 10px;
  margin: 4px 0 2px; padding: 12px 14px;
  border-radius: var(--radius); background: var(--inset);
  border: 1px solid var(--line);
}
.lw-regler-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lw-regler-zeile .bw-frage { min-width: 110px; }
.lw-regler .hint { margin: 0; }

.bw-model-feld { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#bwModelBild {
  width: 46px; height: 62px; object-fit: cover;
  border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--inset);
}
.bw-model-hinweis { margin: -4px 0 6px; }

@media (max-width: 700px) {

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }

  .btn { min-height: 44px; }
  .mini { min-height: 38px; }
  .sl-gruppe.sl-klapp { min-height: 32px; }
  .sl-eintrag, .sl-konto { min-height: 44px; }
  .aw-knopf { min-height: 44px; }

  .chat-flaeche.im-gespraech .chat-liste { display: none; }
  .chat-flaeche:not(.im-gespraech) .chat-verlauf { display: none; }
  .ch-zurueck { display: inline-flex; }

  .ch-verlauf { max-height: 62vh; }
  .chat-liste #chListe { max-height: none; }
}

.nk-bild {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-s); object-fit: cover;
  background: var(--inset);
}
.nk-zeile { align-items: center; }

.topbar {
  position: sticky; top: 0; z-index: 60;
  height: auto; min-height: var(--kopf-h);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  transition: background .25s ease, border-color .25s ease;
}
.sx-seite .topbar { border-bottom: 0; }

.topbar.gescrollt {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.topbar-inner {
  display: flex; align-items: center; gap: 18px;
  max-width: var(--breit-oeffentlich); margin: 0 auto; padding: 12px 24px;
  min-height: var(--kopf-h);
}
.rw-huelle {
  position: relative; display: flex; align-items: center;
  min-width: 0; gap: 4px;
}
.rw-huelle > .rw-link { flex: none; white-space: nowrap; }
.rw-nav {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap; justify-content: flex-start;
  min-width: 0; overflow-x: auto;
  scrollbar-width: none;
}
.rw-nav::-webkit-scrollbar { display: none; }

.rw-pfeil {
  flex: none; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--text-2);
  cursor: pointer;
  transition: color .16s, border-color .16s;
}
.rw-pfeil svg {
  width: 13px; height: 13px; display: block;
  transition: transform .2s var(--ease-out);
}
.rw-pfeil.zurueck svg { transform: rotate(180deg); }
.rw-pfeil[hidden] { display: none; }
.rw-pfeil { flex: none; }
.rw-pfeil:hover { color: var(--text); border-color: var(--text-3); }
.rw-pfeil:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rw-huelle::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 26px;
  width: 54px; pointer-events: none; z-index: 1;
  opacity: 0; transition: opacity .18s;
  background: linear-gradient(to left, var(--bg) 30%, transparent);
}
.rw-huelle.mehr-rechts::after { opacity: .95; }
.rw-link.klein { font-size: .76rem; color: var(--text-3); }
.rw-teiler {
  flex: none; width: 1px; height: 15px; margin: 0 4px;
  background: rgba(255,255,255,.14);
}
.rw-link {
  color: var(--text-2); text-decoration: none; font-size: .94rem;
  transition: color .15s ease;
}
.rw-link:hover, .rw-link.on { color: var(--text); }
.topbar-actions { display: flex; align-items: center; }

.rw-los {
  padding: 10px 18px; min-height: 40px; font-size: .93rem; font-weight: 560;
  display: inline-flex; align-items: center; text-decoration: none;
}

@media (max-width: 820px) {
  .topbar-inner { padding: 10px 16px; gap: 14px; }
  .rw-nav { gap: 4px; }
}

@media (max-width: 520px) {
  .rw-huelle { display: none; }
}

.sx-seite { overflow-x: clip; }

.sx { max-width: var(--breit-oeffentlich); padding: 0 24px 40px; }
.sx-zwei { padding-top: 0; }

.sx-hero {
  display: grid; grid-template-columns: 1.02fr 1fr;
  gap: 54px; align-items: center;
  padding: 46px 0 60px;
  position: relative;
}

.sx-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: -18%; bottom: 4%;
  background:
    radial-gradient(26% 40% at 20% 80%, rgba(201, 168, 105, .05), transparent 70%);
}
:root[data-theme="light"] .sx-hero::before {
  background:
    radial-gradient(26% 40% at 20% 80%, rgba(201, 168, 105, .07), transparent 70%);
}
@media (max-width: 900px) { .sx-hero::before { display: none; } }
.sx-hero h1 {
  margin: 6px 0 0;
  font-size: clamp(34px, 5vw, 56px); font-weight: 680;
  line-height: 1.04; letter-spacing: -.035em;
}
.sx-hero h1 .beta-marke { vertical-align: middle; margin-left: 14px; }

.sx-lede {
  margin: 20px 0 0; max-width: 46ch;
  color: var(--text-2); font-size: 17px; line-height: 1.62;
}

.sx-tat {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 30px;
}
.sx-tat.mitte { justify-content: center; }
.sx-knopf {
  padding: 14px 26px; min-height: 48px;
  display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 600; border-radius: var(--radius);
  text-decoration: none;
}
.sx-nebenweg {
  color: var(--text-2); text-decoration: none;
  font-size: 14px; font-weight: 550;
  transition: color .15s ease;
}
.sx-nebenweg:hover { color: var(--accent); }
@media (hover: none) {
  .sx-nebenweg { display: inline-flex; align-items: center; min-height: 44px; }
}
.sx-nebenweg span { display: inline-block; transition: transform .18s var(--ease-out); }
.sx-nebenweg:hover span { transform: translateX(3px); }

.sx-zusage {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 22px 0 0; color: var(--text-3); font-size: 13px;
}
.sx-zusage span { display: inline-flex; align-items: center; gap: 6px; }
.sx-zusage span::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.sx-zusage b { color: var(--text-2); font-weight: 650; }

.sx-hero-bild { position: relative; }
.sx-hero-bild::before {
  content: ""; position: absolute; inset: -18% 0 -22% -8%;
  background: radial-gradient(60% 55% at 60% 40%,
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  filter: blur(20px); pointer-events: none;
}
.sx-bild-fuss {
  position: relative;
  margin: 14px 2px 0; color: var(--text-3);
  font-size: 12px; line-height: 1.55; max-width: 52ch;
}

.ui-rahmen {
  position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); overflow: hidden;
  box-shadow: var(--shadow-2);
}
.ui-schweb { box-shadow: var(--shadow-3), var(--shadow-2); }
.ui-rahmen.schmal { max-width: 380px; margin-left: auto; }

.ui-leiste {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.ui-punkte { display: inline-flex; gap: 4px; }
.ui-punkte i {
  width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}
.ui-adresse {
  color: var(--text-3); font-size: 11px; letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ui-app { display: grid; grid-template-columns: 108px 1fr; min-height: 300px; }
.ui-nav {
  display: grid; align-content: start; gap: 2px;
  padding: 12px 8px; border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 2%, transparent);
}
.ui-nav-marke {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding: 0 6px;
  color: var(--text-2); font-size: 11px; font-weight: 700; letter-spacing: -.01em;
}
.ui-nav-marke i {
  width: 14px; height: 14px; border-radius: 4px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-press));
}
.ui-nav-punkt {
  padding: 4px 8px; border-radius: var(--radius-s);
  color: var(--text-3); font-size: 10px;
}
.ui-nav-punkt.on {
  background: var(--accent-soft); color: var(--accent); font-weight: 650;
}

.ui-flaeche { display: grid; align-content: start; gap: 12px; padding: 14px; }
.ui-inhalt { padding: 14px; }

.ui-kpi-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ui-kpi {
  padding: 10px 10px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface);
  display: grid; gap: 6px; align-content: start;
}
.ui-kpi-k {
  color: var(--text-3); font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.ui-kpi-w {
  color: var(--text); font-size: 17px; font-weight: 680; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ui-kpi-w.gold { color: var(--accent); }
.ui-kpi-w.klein { font-size: 12px; font-weight: 600; }

.ui-wertbalken {
  height: 9px; width: 74%; border-radius: 4px;
  background: color-mix(in srgb, var(--text) 20%, transparent);
}
.ui-wertbalken.kurz { width: 46%; }
.ui-wertbalken.gold { background: color-mix(in srgb, var(--accent) 60%, transparent); }

.ui-tafel {
  padding: 10px 12px 12px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface);
}
.ui-tafel-kopf {
  display: block; margin-bottom: 10px;
  color: var(--text-3); font-size: 9px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.ui-balken {
  display: flex; align-items: flex-end; gap: 6px; height: 66px;
}
.ui-balken i {
  flex: 1; height: var(--h, 50%); border-radius: 3px 3px 2px 2px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
}
.ui-balken i.jetzt {
  background: linear-gradient(180deg, var(--accent),
              color-mix(in srgb, var(--accent) 55%, transparent));
}
.ui-linie svg { display: block; width: 100%; height: 76px; }
.ui-linie polyline {
  fill: none; stroke: var(--accent); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ui-liste { display: grid; gap: 6px; }
.ui-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface);
}
.ui-bildplatz {
  width: 22px; height: 26px; border-radius: 4px; flex: none;
  background: linear-gradient(150deg,
              color-mix(in srgb, var(--accent) 22%, var(--inset)),
              var(--inset));
}
.ui-bildplatz.gross { width: 100%; height: 62px; border-radius: var(--radius-s); }
.ui-strich {
  height: 7px; border-radius: 4px; flex: none;
  background: color-mix(in srgb, var(--text) 13%, transparent);
}
.ui-zeile .ui-strich { flex: 1; }
.ui-strich.lang   { width: 100%; }
.ui-strich.mittel { width: 72%; }
.ui-strich.kurz   { width: 44%; }

.ui-marke {
  padding: 2px 6px; border-radius: 999px; flex: none;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text-3); font-size: 9px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.ui-marke.gruen { background: var(--green-soft); color: var(--green); }
.ui-marke.gold  { background: var(--accent-soft); color: var(--accent); }

.ui-kacheln { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ui-kachel {
  display: grid; gap: 6px; justify-items: start;
  padding: 8px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface);
}

.ui-text { display: grid; gap: 8px; }
.ui-titel {
  color: var(--text); font-size: 13px; font-weight: 650; letter-spacing: -.01em;
}
.ui-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ui-tags span {
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 9px; font-weight: 600;
}
.ui-feldreihe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ui-feld {
  display: grid; gap: 2px; padding: 6px 8px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); font-size: 10px; font-weight: 600;
}
.ui-feld i {
  color: var(--text-3); font-size: 9px; font-style: normal;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.ui-feld.gold { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.ui-feld.gold i { color: var(--accent); }

.ui-blatt { display: grid; gap: 2px; }
.ui-blatt-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 2px; border-bottom: 1px solid var(--line);
  color: var(--text-2); font-size: 11px;
}
.ui-blatt-zeile i { max-width: 45%; }
.ui-blatt-zeile.summe {
  border-bottom: 0; margin-top: 4px; padding-top: 10px;
  border-top: 1px solid var(--line-strong);
  color: var(--text); font-weight: 650;
}

.ui-agent { display: grid; gap: 8px; }
.ui-agent-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); font-size: 11px;
}
.ui-lampe {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--text-3);
}
.ui-lampe.gruen {
  background: var(--green);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}
.ui-agent-fuss { display: grid; gap: 6px; padding: 10px 10px 2px; }

.sx-band {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 9%, transparent),
      color-mix(in srgb, var(--accent) 4%, transparent));
}
.sx-band-inner {
  max-width: var(--breit-oeffentlich); margin: 0 auto; padding: 26px 24px;
  display: flex; align-items: center; gap: 20px 44px; flex-wrap: wrap;
}
.sx-zahl { display: grid; gap: 4px; }
.sz-wert {
  color: var(--text); font-size: clamp(24px, 3vw, 32px); font-weight: 680;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.sz-wert.klein { font-size: clamp(16px, 2vw, 20px); font-weight: 620; }
.sz-label {
  color: var(--text-3); font-size: 11px; font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase;
}
.sx-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-left: auto; padding-left: 24px;
  border-left: 1px solid var(--line);
}
.sn-zahl { color: var(--text-2); font-size: 13px; }
.sn-zahl b { color: var(--text); font-size: 17px; font-weight: 700; }
.sn-sterne { display: inline-flex; gap: 2px; }
.sn-sterne i {
  color: var(--accent); font-size: 15px; font-style: normal; line-height: 1;
}
.sn-sterne i.leer { color: color-mix(in srgb, var(--accent) 26%, transparent); }
.sn-weg {
  color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600;
}
.sn-weg:hover { text-decoration: underline; }

.sx-abschnitt { padding: 74px 0 0; }
.sx-kopf { margin-bottom: 30px; }
.sx-kopf h2, .sx-zeile-text h2, .sx-schluss h2, .sx-discord h2 {
  margin: 0; font-size: clamp(24px, 3vw, 34px); font-weight: 660;
  line-height: 1.14; letter-spacing: -.03em;
}
.sx-unter {
  margin: 10px 0 0; max-width: 62ch;
  color: var(--text-3); font-size: 14px; line-height: 1.6;
}
.sx-hinweis {
  margin: 26px 0 0; color: var(--text-3);
  font-size: 13px; line-height: 1.7; max-width: 72ch;
}
.sx-hinweis.eng { margin-top: 16px; font-size: 13px; }
.sx-hinweis b { color: var(--text-2); }

.sx-marke {
  display: inline-block; margin-bottom: 14px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
}

.sx-schritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.sx-schritte:has(> li:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.sx-schritte:has(> li:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) {
  .sx-schritte, .sx-schritte:has(> li:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .sx-schritte, .sx-schritte:has(> li:nth-child(4)) {
    grid-template-columns: 1fr;
  }
  .sx-schritte li:not(:last-child)::after { display: none; }
}
.sx-schritte li { position: relative; padding-top: 4px; }
.sx-schritte li:not(:last-child)::after {
  content: ""; position: absolute; left: 46px; top: 20px; right: -14px;
  height: 1px; background: var(--line);
}
.ss-nr {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  font-size: 15px; font-weight: 700;
}
.sx-schritte h3 {
  margin: 16px 0 6px; font-size: 17px; font-weight: 650; letter-spacing: -.01em;
}
.sx-schritte p {
  margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.66;
}

.sx-zeile {
  display: grid; grid-template-columns: 1fr 1.06fr;
  gap: 56px; align-items: center;
  padding: 74px 0 0;
}
.sx-zeile.gedreht .sx-zeile-text { order: 2; }
.sx-zeile.gedreht .sx-zeile-bild { order: 1; }
.sx-zeile-text p {
  margin: 16px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.7;
  max-width: 52ch;
}
.sx-punkte {
  margin: 20px 0 0; padding: 0; list-style: none;
  display: grid; gap: 10px;
}
.sx-punkte li {
  position: relative; padding-left: 22px;
  color: var(--text-2); font-size: 14px; line-height: 1.6;
}
.sx-punkte li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.sx-punkte b { color: var(--text); font-weight: 620; }
.sx-zeile-bild { position: relative; }

.sx-karten { display: grid; gap: 18px; }
.sx-karten.drei { grid-template-columns: repeat(3, 1fr); }
.sx-karte {
  padding: 24px 22px; border-radius: var(--radius-l);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .18s ease, transform .18s var(--ease);
}
.sx-karte:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.sk-zeichen {
  display: inline-grid; place-items: center; min-width: 42px; height: 34px;
  padding: 0 10px; margin-bottom: 14px; border-radius: var(--radius-s);
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}
.sx-karte h3 { margin: 0 0 8px; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.sx-karte p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.65; }

.sx-liste { display: grid; }
.sl-zeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line);
}
.sl-zeile:last-child { border-bottom: 0; }
.sl-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 620; letter-spacing: -.01em;
}
.sl-sub {
  margin-top: 6px; color: var(--text-2); font-size: 14px; line-height: 1.62;
  max-width: 74ch;
}

.sx-preise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sx-preis {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 24px 24px; border-radius: var(--radius-l);
  border: 1px solid var(--line); background: var(--surface);
}
.sx-preis.standard { border-color: color-mix(in srgb, var(--stufe) 40%, var(--line)); }
.sx-preis.standard .sp-name { color: var(--stufe); }
.sx-preis.pro {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 7%, transparent), transparent 40%),
    var(--surface);
}
.sx-preis.pro .sp-name { color: var(--accent); }
.sp-schild {
  position: absolute; top: -11px; right: 20px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent); color: var(--auf-accent);
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
}
.sp-kopf {
  display: grid; gap: 8px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.sp-name { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sp-preis { display: flex; align-items: baseline; gap: 6px; }
.sp-preis b { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.sp-preis span { color: var(--text-3); font-size: 13px; }
.sp-sub { color: var(--text-3); font-size: 12px; line-height: 1.55; }
.sp-liste {
  flex: 1; margin: 18px 0 0; padding: 0; list-style: none;
  display: grid; gap: 10px; align-content: start;
}
.sp-liste li {
  position: relative; padding-left: 20px;
  color: var(--text-2); font-size: 14px; line-height: 1.6;
}
.sp-liste li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--text) 30%, transparent);
}
.sx-preis.standard .sp-liste li::before { background: var(--stufe); }
.sx-preis.pro .sp-liste li::before { background: var(--accent); }
.sp-liste b { color: var(--text); font-weight: 620; }
.sp-fuss {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 12px; line-height: 1.6;
}

.sx-kosten { margin-top: 30px; }
.sk-kopf { margin-bottom: 16px; }
.sk-kopf h3 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.sk-kopf .sx-unter { margin-top: 6px; }
.sk-reihe {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.sk-posten {
  display: grid; gap: 8px; align-content: start;
  padding: 18px 18px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .18s ease, transform .18s var(--ease);
}
.sk-posten:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.sk-posten b {
  font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.sk-posten span {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  color: var(--text-3); font-size: 12px;
}
.sk-posten span i {
  padding: 1px 6px; border-radius: 999px; font-style: normal;
  background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.sk-posten.gold {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    var(--surface);
}
.sk-posten.gold b { color: var(--accent); }
.sk-nach {
  margin: 16px 0 0; color: var(--text-3);
  font-size: 13px; line-height: 1.7; max-width: 76ch;
}
.sk-nach b { color: var(--text-2); }

.sx-merke {
  display: flex; gap: 16px; align-items: flex-start;
  margin-top: 30px; padding: 20px 22px;
  border-radius: var(--radius-l);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.sm-zeichen {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--auf-accent);
  font-size: 15px; font-weight: 800; line-height: 1;
}
.sx-merke b { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 650; }
.sx-merke p {
  margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.66;
  max-width: 72ch;
}

.sx-discord {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  padding: 32px 34px; border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 130% at 88% 20%,
      color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--surface);
}
.sx-discord h2 { margin: 0 0 10px; }
.sx-discord p {
  margin: 0; max-width: 56ch;
  color: var(--text-2); font-size: 15px; line-height: 1.66;
}

.sx-schluss {
  margin-top: 84px; padding: 62px 30px 66px;
  border-radius: var(--radius-xl); border: 1px solid var(--line);
  text-align: center;
  background:
    radial-gradient(60% 100% at 50% 0%,
      color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    var(--surface);
}
.sx-schluss p {
  margin: 14px auto 0; max-width: 52ch;
  color: var(--text-2); font-size: 15px; line-height: 1.66;
}

.sx-schlussmarke {
  display: block; margin: -10px auto 22px;
  width: min(230px, 52vw);
  aspect-ratio: 1;
  background-image: url("/static/marke.png");
  background-position: center; background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 12px 40px rgba(201, 168, 105, .22));
}
:root[data-theme="light"] .sx-schlussmarke {
  background-image: url("/static/marke-hell.png");
  filter: none;
}
@media (max-width: 560px) { .sx-schlussmarke { width: min(170px, 46vw); } }

.sx-abschnitt .faq { padding: 0; display: grid; gap: 10px; }
.sx-abschnitt .faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 0;
  transition: border-color .18s ease, background .18s ease;
}
.sx-abschnitt .faq details:hover { border-color: var(--line-strong); }
.sx-abschnitt .faq details[open] {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 5%, transparent), transparent 40%),
    var(--surface);
}
.sx-abschnitt .faq summary {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; font-size: 15px; font-weight: 600;
  list-style: none; cursor: pointer;
}
.sx-abschnitt .faq summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background:
    linear-gradient(var(--text-2), var(--text-2)) center / 11px 1.9px no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) center / 1.9px 11px no-repeat,
    var(--inset);
  transform: none; transition: transform .22s var(--ease), background .18s;
}
.sx-abschnitt .faq details[open] summary::after {
  transform: rotate(135deg);
  background:
    linear-gradient(var(--accent), var(--accent)) center / 11px 1.9px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.9px 11px no-repeat,
    var(--accent-soft);
}
.sx-abschnitt .faq details > p,
.sx-abschnitt .faq details > ul {
  padding: 0 20px; max-width: 78ch;
}
.sx-abschnitt .faq details > p {
  margin: 0 0 14px; font-size: 14px; line-height: 1.72;
}
.sx-abschnitt .faq details > p + p { margin-top: -4px; }
.sx-abschnitt .faq details > ul { margin: 0 0 14px; }
.sx-abschnitt .faq details ul li { font-size: 14px; line-height: 1.7; }

.faq-spalten {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: 4px 0 18px;
}
.faq-spalte {
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.faq-spalte.gegen {
  background: color-mix(in srgb, var(--stufe) 5%, transparent);
  border-color: color-mix(in srgb, var(--stufe) 22%, var(--line));
}
.faq-marke {
  display: inline-block; margin-bottom: 12px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}
.faq-spalte.gegen .faq-marke { background: var(--stufe-soft); color: var(--stufe); }

.sx-abschnitt .faq .faq-liste {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 12px;
}
.sx-abschnitt .faq .faq-liste li {
  position: relative; padding-left: 20px;
  font-size: 14px; line-height: 1.65; color: var(--text-2);
}
.sx-abschnitt .faq .faq-liste li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.faq-spalte.gegen .faq-liste li::before { background: var(--stufe); }
.sx-abschnitt .faq .faq-liste b { color: var(--text); font-weight: 620; }
.sx-abschnitt .faq .faq-liste em { color: var(--accent); font-style: normal; }

@media (max-width: 720px) {
  .faq-spalten { grid-template-columns: 1fr; }
}

.sx-stimmen { display: flex; align-items: stretch; gap: 18px; }
.sx-note-gross {
  flex: 0 0 260px;
  display: grid; align-content: center; justify-items: center; gap: 6px;
  padding: 26px 20px; text-align: center;
  border-radius: var(--radius-l);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background:
    radial-gradient(80% 70% at 50% 0%,
      color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    var(--surface);
}
.ng-wert {
  font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.ng-von { color: var(--text-3); font-size: 12px; }
.ng-sterne { display: flex; gap: 2px; margin-top: 6px; }
.ng-sterne i {
  color: var(--accent); font-size: 17px; font-style: normal; line-height: 1;
}
.ng-sterne i.leer { color: color-mix(in srgb, var(--accent) 26%, transparent); }
.ng-basis {
  margin-top: 8px; color: var(--text-3);
  font-size: 11px; line-height: 1.5; max-width: 22ch;
}
.sx-abschnitt .st-bahn-huelle { flex: 1; min-width: 0; padding: 0; }
.sx-abschnitt .st-karte { padding: 26px 26px 22px; }
.sx-abschnitt .st-text { font-size: 15px; line-height: 1.68; color: var(--text); }
.sx-abschnitt .st-wer { font-size: 13px; }
.sx-abschnitt .st-karte.leer {
  border-style: dashed; background: color-mix(in srgb, var(--text) 3%, transparent);
}
.sx-abschnitt .st-karte.leer .st-text { color: var(--text-2); font-size: 14px; }

.sx-einladung {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 18px; padding: 20px 24px;
  border-radius: var(--radius-l); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.sx-einladung b { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 650; }
.sx-einladung p {
  margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.6; max-width: 60ch;
}
.sx-einladung em { color: var(--accent); font-style: normal; font-weight: 600; }
.sx-knopf.schmal { padding: 10px 20px; min-height: 42px; font-size: 14px; }

.sx-pruefung { margin-top: 12px; }
.sx-pruefung summary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 2px; list-style: none; cursor: pointer;
  color: var(--text-3); font-size: 13px;
}
.sx-pruefung summary::-webkit-details-marker { display: none; }
.sx-pruefung summary::before {
  content: "›"; display: inline-block;
  transition: transform .2s var(--ease); color: var(--accent);
}
.sx-pruefung[open] summary::before { transform: rotate(90deg); }
.sx-pruefung summary:hover { color: var(--text-2); }
.sx-pruefung p {
  margin: 4px 0 0; padding-left: 16px;
  color: var(--text-3); font-size: 13px; line-height: 1.7; max-width: 76ch;
}

@media (max-width: 720px) {
  .sx-stimmen { flex-direction: column; }
  .sx-note-gross { flex: none; }
}

@media (max-width: 1040px) {
  .sx-hero { grid-template-columns: 1fr; gap: 40px; padding: 34px 0 44px; }
  .sx-hero-bild { max-width: 620px; }
  .sx-zeile { grid-template-columns: 1fr; gap: 32px; padding-top: 62px; }
  .sx-zeile.gedreht .sx-zeile-text,
  .sx-zeile.gedreht .sx-zeile-bild { order: 0; }
  .sx-preise { grid-template-columns: 1fr; }
  .sx-karten.drei { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .sx { padding-left: 18px; padding-right: 18px; }
  .sx-band-inner { padding: 22px 18px; gap: 18px 28px; }
  .sx-note {
    margin-left: 0; padding-left: 0; padding-top: 16px;
    border-left: 0; border-top: 1px solid var(--line); width: 100%;
  }
  .sx-schritte { grid-template-columns: 1fr; gap: 22px; }
  .sx-schritte li:not(:last-child)::after { display: none; }
  .sx-karten.drei { grid-template-columns: 1fr; }
  .sx-abschnitt { padding-top: 58px; }
  .sx-schluss { margin-top: 62px; padding: 46px 22px 50px; }
  .sx-discord { padding: 26px 22px; }
  .ui-app { grid-template-columns: 84px 1fr; }
  .ui-kacheln { grid-template-columns: repeat(2, 1fr); }
}

.rw-anmelden {
  color: var(--text-2); text-decoration: none;
  font-size: .93rem; font-weight: 550; padding: 10px 6px;
  transition: color .15s ease;
}
.rw-anmelden:hover { color: var(--text); }
.topbar-actions { gap: 10px; }
.topbar-inner > .rw-huelle {
  margin-left: auto; margin-right: auto; min-width: 0;
}

@media (max-width: 900px) {
  .rw-los { padding: 8px 14px; font-size: .88rem; }
  .rw-anmelden { font-size: .88rem; padding: 8px 2px; }
}

@media (max-width: 560px) {
  .rechtsseite .topbar-inner, .anmeldeseite .topbar-inner { padding: 0 10px; gap: 8px; }
  .rechtsseite .topbar-actions { gap: 6px; }
  .rw-los { padding: 8px 13px; font-size: .85rem; min-height: 36px; }
  .rw-anmelden { font-size: .85rem; }
  .rw-farbe { width: 34px; height: 34px; }
}

@media (max-width: 400px) {
  .rechtsseite .topbar-inner, .anmeldeseite .topbar-inner { padding: 0 8px; gap: 6px; }
  .rechtsseite .topbar-actions { gap: 4px; }
  .rw-los { padding: 7px 10px; font-size: .8rem; min-height: 34px; }
  .rw-anmelden { font-size: .8rem; }
  .rw-farbe { width: 30px; height: 30px; }
}

.sx-seite .flieger {
  width: clamp(0px, calc((100vw - var(--breit-oeffentlich)) / 2), 150px);
}

.rw-farbe {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--text-2);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rw-farbe svg { width: 16px; height: 16px; display: block; }
.rw-farbe:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
}

.an-farbe {
  padding: 0 4px; border: 0; background: transparent;
  color: var(--text-3); font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer; transition: color .15s ease;
}
.an-farbe:hover { color: var(--text); }
.an-farbe svg { width: 14px; height: 14px; display: block; }
.an-farbe { position: relative; }
@media (hover: none) {
  .an-farbe::after {
    content: ""; position: absolute;
    inset: 50% auto auto 50%;
    width: 40px; height: 40px;
    transform: translate(-50%, -50%);
  }
}

.an-fuss .an-zurueck { color: var(--text-2); font-weight: 550; }
.an-fuss .an-zurueck:hover { color: var(--accent); text-decoration: none; }

a.an-marke { text-decoration: none; color: inherit; width: fit-content; }
a.an-marke:hover .brand-wort { opacity: .8; }

.an-fuss { gap: 12px; }

.fr-suchfeld { padding: 0 20px 12px; }
.fr-suchfeld input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: var(--inset); color: var(--text);
  font: inherit; font-size: 13px;
}
.fr-suchfeld input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--surface);
}
.fr-suchfeld input::placeholder { color: var(--text-3); }

.fr-folgen {
  flex: none; margin-left: auto;
  padding: 6px 12px; border-radius: var(--radius-s);
  border: 1px solid transparent; background: var(--accent); color: var(--auf-accent);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: filter .15s ease, background .15s ease, color .15s ease;
}
.fr-folgen:hover { filter: brightness(1.06); }
.fr-folgen.an {
  background: transparent; color: var(--text-3);
  border-color: var(--line-strong);
}
.fr-folgen.an:hover { color: var(--text); background: var(--inset); }
.fr-folgen[disabled] { opacity: .5; cursor: default; }

#tab-freunde .fr-zeile { cursor: pointer; }
#tab-freunde .fr-text { flex: 1; min-width: 0; }

.at-tafel .at-marke.agent {
  background: transparent; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.at-zeichen.laeuft {
  background: var(--inset);
  color: var(--text-2);
}

.at-tafel .at-fuss .btn {
  padding: 12px 22px; border-radius: 999px; font-size: 14px; font-weight: 600;
}

.at-tafel .at-klein b,
.at-tafel .at-klein code { color: var(--text-2); }
.at-tafel .at-klein code {
  padding: 1px 6px; border-radius: var(--radius-s); background: var(--inset);
  font-size: 11px;
}

.at-icon {
  width: 24px; height: 24px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

#invMehrere.on {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  color: var(--accent); background: var(--accent-soft);
}

.wahl-leiste, .wahl-lauf {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.wl-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.wl-text strong { font-size: 14px; }
.wl-text span { font-size: 12px; color: var(--text-3); }
.wl-knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.wl-spinner {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: hhDreht 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .wl-spinner { animation: none; } }

.fw-liste { display: grid; gap: 8px; margin-top: 12px; }
.fw-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--inset);
  font-size: 12.5px;
}
.fw-feld {
  flex: none; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 600;
}
.fw-von { color: var(--text-3); text-decoration: line-through; }
.fw-pfeil { color: var(--text-3); }
.fw-nach { font-weight: 600; }
.fw-mal { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fw-zeile .btn { flex: none; }
@media (max-width: 460px) {
  .fw-mal { margin-left: 0; }
  .fw-zeile .btn { width: 100%; }
}

.grid.waehlen .card { cursor: pointer; }
.grid.waehlen .badge { left: 38px; }
.card .karte-wahl {
  position: absolute; top: 15px; left: 15px; z-index: 4;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: transparent; font-size: 13px; font-weight: 700; line-height: 1;
  backdrop-filter: blur(4px);
}
.card.gewaehlt .karte-wahl {
  border-color: var(--accent); background: var(--accent); color: var(--auf-accent);
}
.card.gewaehlt {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.card.nichtwaehlbar { opacity: .38; cursor: default; }
.card.nichtwaehlbar:hover { transform: none; }

@media (max-width: 620px) {
  .wahl-leiste, .wahl-lauf { align-items: flex-start; }
  .wl-knoepfe { width: 100%; }
  .wl-knoepfe .btn.primary { flex: 1; }
}

.fzh-knopf {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  position: relative;
}
.fzh-knopf::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
}
.fzh-knopf:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fzh-knopf:hover .fz-herz { transform: scale(1.18); }
.fzh-knopf .fz-herz { transition: transform .18s ease; }

.fzh-schicht {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  pointer-events: none;          /* nichts darunter darf blockiert werden */
}

.fzh-buehne {
  display: grid;
  place-items: center;
  transform: scale(.08);
  opacity: 0;
}

.fzh-gross {
  width: 120px;
  height: 120px;
  fill: #e0245e;
  filter: drop-shadow(0 0 26px rgba(224, 36, 94, .55));
}

.fzh-waechst { animation: fzh-wachsen 3.2s cubic-bezier(.34, .06, .5, 1) forwards; }

@keyframes fzh-wachsen {
    0% { transform: scale(.08);  opacity: 0; }
    6% { transform: scale(.34);  opacity: 1; }
   14% { transform: scale(.28);  opacity: 1; }
   24% { transform: scale(.62);  opacity: 1; }
   32% { transform: scale(.54);  opacity: 1; }
   44% { transform: scale(1.05); opacity: 1; }
   52% { transform: scale(.95);  opacity: 1; }
   66% { transform: scale(1.7);  opacity: 1; }
   74% { transform: scale(1.58); opacity: 1; }
   88% { transform: scale(2.6);  opacity: 1; }
   94% { transform: scale(2.45); opacity: 1; }
  100% { transform: scale(3.15); opacity: 1; }
}

.fzh-platzt { animation: fzh-platzen .34s ease-out forwards; }

@keyframes fzh-platzen {
    0% { transform: scale(3.15); opacity: 1; }
   35% { transform: scale(3.9);  opacity: .85; filter: brightness(1.7); }
  100% { transform: scale(5.2);  opacity: 0; }
}

.fzh-splitter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.fzh-splitter i {
  position: absolute;
  width: var(--gross);
  height: var(--gross);
  background: #e0245e;
  border-radius: 50% 50% 50% 0;
  animation: fzh-fliegen var(--zeit) cubic-bezier(.2, .7, .35, 1) var(--spaet) forwards;
}

@keyframes fzh-fliegen {
    0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--dreh)) scale(.25);
         opacity: 0; }
}

.fzh-satz {
  position: absolute;
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-size: clamp(19px, 4.2vw, 30px);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text, #f5f5f7);
  text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
  animation: fzh-auftauchen .55s ease-out both;
}
.fzh-satz.fzh-weg { animation: fzh-verschwinden .55s ease-in forwards; }

@keyframes fzh-auftauchen {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes fzh-verschwinden {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-8px); }
}

.fzh-nurvorlesen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .fzh-waechst, .fzh-platzt, .fzh-splitter i,
  .fzh-satz, .fzh-satz.fzh-weg { animation: none; }
  .fzh-buehne { opacity: 0; }
  .fzh-satz { opacity: 1; transform: none; }
}

.agent-tafel-huelle {
  display: grid;
  place-items: center;
  padding: 48px 20px;
  min-height: 52vh;
}

.agent-tafel {
  width: 100%;
  max-width: 460px;
  padding: 30px 30px 26px;
  border-radius: var(--radius-l);
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
  animation: agentRein .34s var(--ease-out);
}
@keyframes agentRein {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
}

.agent-emblem {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: var(--radius);
  background: linear-gradient(145deg, #2b2b31, #121214);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), var(--shadow-1);
}
:root[data-theme="light"] .agent-emblem {
  background: linear-gradient(145deg, #ffffff, #f1f1f4);
  border-color: rgba(0, 0, 0, .10);
}
.agent-emblem i.marke-v { width: 27px; height: 27px; }

.agent-tafel h2 {
  margin: 0 0 8px; font-size: 20px; line-height: 1.25;
  letter-spacing: -.015em; color: var(--text); text-wrap: balance;
}
.agent-lead {
  margin: 0 0 18px; color: var(--text-2);
  font-size: 14px; line-height: 1.6;
}

.agent-punkte {
  margin: 0 0 18px; padding: 0; list-style: none;
  display: grid; gap: 10px;
}
.agent-punkte li {
  position: relative; padding-left: 20px;
  color: var(--text-2); font-size: 13px; line-height: 1.55;
}
.agent-punkte li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.agent-punkte b { color: var(--text); font-weight: 600; }

.agent-recht {
  margin: 0 0 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 12px; line-height: 1.6;
}
.agent-recht a { color: var(--accent); text-decoration: none; }
.agent-recht a:hover { text-decoration: underline; }
.agent-recht b { color: var(--text-2); font-weight: 600; }

.agent-ok { width: 100%; }

.fr-fenster {
  position: relative;
  text-align: center;
  padding: 30px 28px 24px;
}

.fr-zu {
  position: absolute; top: 14px; right: 14px;
}

.fr-zeichen {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto 16px;
  border-radius: 50%;
  font-size: 20px; font-weight: 700; line-height: 1;
}
.fr-zeichen.ist-gefahr { background: var(--red-soft);    color: var(--red); }
.fr-zeichen.ist-frage  { background: var(--accent-soft); color: var(--accent); }

.fr-fenster h2 {
  margin: 0 0 8px; font-size: 17px; font-weight: 650;
  letter-spacing: -.015em; text-wrap: balance;
}
.fr-fenster .fr-text {
  margin: 0 auto; max-width: 42ch;
  color: var(--text-2); font-size: 14px; line-height: 1.6;
}
.fr-fenster .fr-details {
  margin: 18px 0 0; text-align: left;
}
.fr-fenster .fr-details p { margin: 0 0 8px; }
.fr-fenster .fr-details p:last-child { margin-bottom: 0; }

.fr-fenster .field {
  margin: 18px 0 0;
  text-align: left;
}
.fr-fenster .field input {
  width: 100%;
}

.fr-knoepfe {
  display: flex; gap: 10px;
  margin-top: 20px; padding-top: 20px;
  border-top: 1px dashed var(--line-strong);
}
.fr-knoepfe .btn { flex: 1; justify-content: center; }

@media (max-width: 460px) {
  .fr-knoepfe { flex-direction: column-reverse; }
}

.tb-zeichen {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2);
  transition: border-color .16s, background .16s, color .16s;
}
.tb-zeichen:hover { border-color: var(--line-strong); background: var(--surface-2); color: var(--text); }
.tb-zeichen svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.tb-zahl {
  position: absolute; top: -6px; right: -7px;
  box-sizing: border-box;
  min-width: 20px; height: 20px;
  padding: 0 5px 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--red); color: var(--auf-red);
  font-size: 11px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  border: 2px solid var(--bg-2);
}

.topbar-actions .konto-menue { flex: none; }
.topbar-actions .sl-konto {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 5px 12px 5px 6px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: border-radius .16s, border-color .16s, background .16s;
}
.topbar-actions .sl-konto:hover { border-color: var(--line-strong);
  background: var(--inset); }
.topbar-actions .sl-avatar {
  width: 40px; height: 40px; overflow: visible; border-radius: 50%;
}
.topbar-actions .sl-avatar img { border-radius: 50%; }
.topbar-actions .sl-avatar::after {
  content: ""; position: absolute; right: -2px; bottom: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--green);
  border: 2.5px solid var(--surface-2);
}
.topbar-actions .sl-konto-text strong { font-size: 13.5px; }
.topbar-actions .sl-konto .sl-pfeil { color: var(--text-3); }
.topbar-actions .sl-konto-text {
  max-width: 100%; min-width: 0; overflow: hidden;
}
.topbar-actions .sl-konto-text strong,
.topbar-actions .sl-konto-text .hint {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}

.topbar-actions .konto-klappe {
  top: calc(100% + 8px); bottom: auto;
  left: auto; right: 0; width: var(--kontobreite);
  transform-origin: top right;
}

.topbar-actions .konto-menue.auf .konto-klappe {
  top: 100%;
  border-top-left-radius: 0; border-top-right-radius: 0;
  border-top-color: transparent;
}
.topbar-actions .konto-menue.auf .sl-konto {
  border-radius: 14px 14px 0 0;
  border-color: var(--line-strong);
  border-bottom-color: transparent;
  background: var(--surface);
}
.topbar-actions .konto-klappe {
  animation-name: klappeFalten;
  animation-duration: .5s;
  animation-timing-function: var(--nav-kurve);
  transform-origin: top center;
}
@keyframes klappeFalten {
  from { opacity: 0; transform: perspective(1400px) rotateX(-24deg) scaleY(.9); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(1400px) rotateX(0) scaleY(1); }
}

.konto-klappe > * {
  animation-duration: .36s;
  animation-delay: calc(var(--i, 0) * .055s + .08s);
}

@media (max-width: 720px) {
  .topbar-actions .sl-konto-text,
  .topbar-actions .sl-pfeil { display: none; }
  .topbar-actions .sl-konto { padding: 4px; }
  .topbar-actions .konto-klappe { width: min(260px, calc(100vw - 32px)); }
}

.topbar-actions .kf-konto       { order: 10; }
.topbar-actions .tb-spiel       { order: 20; }
.topbar-actions .tb-feld        { order: 30; }
.topbar-actions #tbForum        { order: 40; }
.topbar-actions .tb-glocke-feld { order: 50; }
.topbar-actions .tb-modus       { order: 60; }
.topbar-actions .konto-menue {
  order: 70; margin-left: 6px;
  width: var(--kontobreite); flex: none;
}
.topbar-actions .tb-schliessen  { order: 80; }
.topbar-actions .tb-teiler:nth-of-type(1) { order: 25; }
.topbar-actions .tb-teiler:nth-of-type(2) { order: 35; }
.topbar-actions .tb-teiler:nth-of-type(3) { order: 45; }
.topbar-actions .tb-teiler:nth-of-type(4) { order: 55; }
.topbar-actions .tb-teiler:nth-of-type(5) { order: 65; }

.tb-teiler {
  width: 1px; height: 28px; align-self: center;
  background: var(--line); flex: none;
}

.topbar-actions .tb-zeichen {
  width: auto; height: auto; min-width: 54px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 10px 7px;
  background: transparent; border: 0; border-radius: 12px;
  color: var(--text-2); text-decoration: none;
}
.topbar-actions .tb-zeichen:hover { background: var(--surface-2); }
.tb-wort {
  font-size: 11px; line-height: 1; color: var(--text-2);
  letter-spacing: .01em; white-space: nowrap;
}
.tb-ikone { position: relative; width: 20px; height: 20px; display: block; }
.topbar-actions .tb-zahl { top: 1px; left: calc(50% + 2px); right: auto; }

.tb-schliessen {
  flex: none; margin-left: 6px;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--red-soft); color: var(--red);
  transition: background .16s, color .16s, transform .16s;
}
.tb-schliessen:hover {
  background: color-mix(in srgb, var(--red) 22%, transparent);
  color: var(--red); transform: translateY(-1px);
}
.tb-schliessen svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
}

.tb-glocke-feld { position: relative; }

.tb-klappe {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 66;
  width: min(340px, calc(100vw - 32px));
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-2);
  overflow: hidden;
  animation: klappeRunter .22s var(--ease-out) both;
}
.tb-klappe-kopf {
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-2);
}
.tb-klappe-liste { max-height: min(420px, 60vh); overflow-y: auto; }

.tbm-zeile {
  display: grid; grid-template-columns: 32px 1fr auto;
  grid-template-areas: "bild text art" "bild wann art";
  align-items: center; column-gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.tbm-zeile, .tbm-zeile:hover { text-decoration: none; }
.tbm-zeile:last-child { border-bottom: 0; }
.tbm-zeile:hover { background: var(--surface-2); }
.tbm-zeile.ist-neu { box-shadow: inset 3px 0 0 var(--accent); }

.tbm-bild {
  grid-area: bild;
  width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
}
.tbm-leer {
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 650;
}
.tbm-text {
  grid-area: text; min-width: 0;
  font-size: 13px; line-height: 1.45; color: var(--text-2);
}
.tbm-text b { color: var(--text); font-weight: 600; }
.tbm-wann { grid-area: wann; font-size: 11px; color: var(--text-3); }
.tbm-art { grid-area: art; font-size: 13px; color: var(--text-3); }

.tbm-leer-text {
  margin: 0; padding: 22px 16px; text-align: center;
  color: var(--text-3); font-size: 13px; line-height: 1.6;
}

.tb-modus { position: relative; }
.tb-modus svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .2s, transform .3s var(--ease-out);
}
.tb-modus .tb-mond  { opacity: 0; transform: translate(-50%, -50%) rotate(-40deg); }
.tb-modus .tb-sonne { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
:root[data-theme="light"] .tb-modus .tb-sonne {
  opacity: 0; transform: translate(-50%, -50%) rotate(40deg);
}
:root[data-theme="light"] .tb-modus .tb-mond {
  opacity: 1; transform: translate(-50%, -50%) rotate(0);
}

.sl-eintrag {
  padding: 7px 12px;
  border-radius: var(--radius);
}
.sl-eintrag:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

@media (min-height: 940px) {
  .sl-liste { display: flex; flex-direction: column; gap: 2px; }
}

.topbar-inner.app-kopf {
  max-width: 1440px;
  padding: 0 24px;
  gap: 20px;
  min-height: var(--topbar-h);
}

:root { --nav-luft: 12px; }

body.rechtsseite, body.anmeldeseite { --nav-luft: 0px; }

.seitenleiste {
  top: var(--nav-luft); left: var(--nav-luft); bottom: var(--nav-luft);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: visible;
}

.seitenleiste::after { display: none; }

.inhalt { margin-left: calc(var(--nav-w) + var(--nav-luft) * 2); }

body.hat-wartungsbalken .seitenleiste {
  top: calc(var(--wartung-h) + var(--nav-luft));
}

@media (max-width: 900px) {
  :root { --nav-luft: 0px; }
  .seitenleiste { border-radius: 0; border: 0; box-shadow: var(--shadow-3); }
}

.rand.links {
  left: calc(var(--nav-w) + var(--nav-luft) * 2 - 7px);
  top: var(--nav-luft); bottom: var(--nav-luft);
}
.rand.rechts { top: var(--nav-luft); bottom: var(--nav-luft); }

.fusszeile {
  background: transparent;
  border-top: 1px solid var(--line);
}

.tb-suche-feld { position: relative; flex: 1 1 auto; max-width: 420px; min-width: 0; }

.tb-suche {
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 10px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.tb-suche:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.tb-lupe {
  flex: none; width: 16px; height: 16px;
  fill: none; stroke: var(--text-3); stroke-width: 1.7; stroke-linecap: round;
}
.tb-suche input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  color: var(--text); font: inherit; font-size: 14px;
}
.tb-suche input::placeholder { color: var(--text-3); }
.tb-suche input::-webkit-search-cancel-button { -webkit-appearance: none; }

.tb-kbd {
  flex: none; padding: 3px 6px; border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--inset); color: var(--text-3);
  font-size: 10px; font-weight: 600; font-family: inherit;
  letter-spacing: .02em; white-space: nowrap;
}
@media (max-width: 1366px) { .tb-kbd { display: none; } }
@media (max-width: 760px)  { .tb-suche-feld { display: none; } }

.tb-suche-klappe { left: 0; right: auto; width: min(460px, calc(100vw - 32px)); }

.tb-feld { position: relative; }

.tb-klappe-fuss {
  display: block; padding: 11px 14px; text-align: center;
  border-top: 1px solid var(--line);
  color: var(--accent); font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.tb-klappe-fuss:hover { background: var(--surface-2); text-decoration: none; }

.tb-gruppe {
  padding: 10px 14px 6px;
  font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
}
.tb-gruppe:not(:first-child) { border-top: 1px solid var(--line); margin-top: 2px; }

.tb-bereich {
  background: var(--accent);
  color: var(--auf-accent);
  border-radius: var(--radius);
}
.tb-bereich:hover {
  background: var(--accent-press);
  color: var(--auf-accent);
}

button.tbm-zeile {
  width: 100%; border: 0; background: none;
  font-family: inherit; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--line);
}
button.tbm-zeile:last-child { border-bottom: 0; }
.tbm-art.tbm-zahl {
  min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: var(--auf-accent);
  font-size: 11px; font-weight: 700; text-align: center;
}
.tb-suche-klappe .tbm-leer { background: var(--inset); color: var(--text-3); }

.start-raster {
  display: grid; gap: 20px;
  grid-template-columns: repeat(12, 1fr);
}
.start-raster > .panel { margin-bottom: 0; }

.start-raster > .panel:first-child { grid-column: span 5; }  /* Was heute ansteht */
.st-ring-karte { grid-column: span 4; }
.st-monat      { grid-column: span 3; }
.st-verlauf    { grid-column: span 7; }
.st-marken     { grid-column: span 5; }

@media (max-width: 1180px) {
  .start-raster > .panel:first-child,
  .st-verlauf { grid-column: span 12; }
  .st-ring-karte, .st-monat, .st-marken { grid-column: span 6; }
}
@media (max-width: 760px) {
  .start-raster > * { grid-column: span 12 !important; }
}

.sv-balken {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: end; gap: 8px;
  height: 170px; padding-top: 8px;
}
.sv-spalte { display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; }
.sv-saeule {
  flex: 1; width: 100%; max-width: 34px;
  position: relative;
  display: flex; align-items: flex-end;
  border-radius: var(--radius-s);
  background: var(--inset);
  overflow: hidden;
}
.sv-saeule::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed color-mix(in srgb, var(--text-3) 28%, transparent);
  pointer-events: none;
}
.sv-saeule i {
  display: block; width: 100%;
  border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--accent) 42%, transparent);
  transition: height .5s var(--ease-out);
}
.sv-spalte.ist-jetzt .sv-saeule i { background: var(--accent); }
.sv-name { font-size: 11px; color: var(--text-3); }
.sv-spalte.ist-jetzt .sv-name { color: var(--text); font-weight: 650; }

.sv-wert {
  min-height: 13px; font-size: 10px; line-height: 13px;
  font-variant-numeric: tabular-nums; color: var(--text-3);
}
.sv-spalte.ist-jetzt .sv-wert { color: var(--text); font-weight: 650; }
.sv-anzahl {
  min-height: 12px; font-size: 9px; line-height: 12px;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text-3) 70%, transparent);
}
@media (max-width: 720px) {
  .sv-anzahl { display: none; }
}

.st-ring-feld { display: flex; align-items: center; gap: 20px; padding: 6px 0 2px; }
.st-ring {
  flex: none; width: 124px; height: 124px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--accent) var(--bogen), var(--inset) 0);
  transition: background .5s var(--ease-out);
}
.st-ring-mitte {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--surface);
  display: grid; place-items: center; align-content: center; gap: 2px;
}
.st-ring-mitte strong {
  font-size: 20px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.st-ring-mitte span { font-size: 11px; color: var(--text-3); }

.st-ring-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.st-ring-legende li {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-2);
}
.st-ring-legende i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--inset); flex: none;
}
.st-ring-legende i.ist-online { background: var(--accent); }
.st-ring-legende li.ist-durch { color: var(--text-3); font-size: 12px; }
.st-ring-legende li.ist-durch i {
  background: none; border: 1.5px solid var(--line-strong);
}

.st-monat {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 8%, var(--surface)),
    var(--surface));
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  color: var(--text);
}
.stm-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.stm-marke {
  font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
}
.stm-vergleich {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.stm-vergleich.plus { background: var(--green-soft); color: var(--green); }
.stm-vergleich.minus { background: var(--red-soft); color: var(--red); }
.stm-vergleich i { font-style: normal; opacity: .75; }
.stm-zahl {
  font-size: 30px; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stm-unter { font-size: 12px; color: var(--text-3); }
.stm-fuss {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  font-size: 13px; color: var(--text-2);
}
.stm-fuss b {
  font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--text);
}

.st-verlauf, .st-ring-karte { display: flex; flex-direction: column; }
.st-verlauf .sv-balken { flex: 1; height: auto; min-height: 150px; }
.st-ring-karte .st-ring-feld { flex: 1; justify-content: center; }

.sv-saeule { background: none; max-width: 26px; }
.sv-balken {
  border-bottom: 1px solid var(--line);
  padding-bottom: 0; margin-bottom: 8px;
}

.start-raster > .panel:first-child { grid-column: span 7; }
.st-verlauf { grid-column: span 5; }

.st-monat { justify-content: space-between; }
.st-monat .stm-fuss { margin-top: auto; }

.st-zahlenreihe {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: auto; padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
}
.st-zahlenreihe div { display: grid; gap: 2px; }
.st-zahlenreihe b {
  font-size: 20px; font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.st-zahlenreihe span { font-size: 12px; color: var(--text-3); }

.st-monat { padding: 20px; }
.st-zahlenreihe { padding: 16px 20px 20px; margin-left: 20px; margin-right: 20px;
                  padding-left: 0; padding-right: 0; }
.st-ring-feld { padding: 6px 20px 2px; }
.sv-balken { padding-left: 20px; padding-right: 20px; }

.ks-feld { margin: 18px 0 4px; }
#ksCode {
  width: 100%; padding: 14px 16px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--inset); color: var(--text);
  font: inherit; font-size: 24px; font-weight: 650;
  letter-spacing: .22em; text-align: center; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
#ksCode:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-soft);
}
#ksCode::placeholder { color: var(--text-3); letter-spacing: .22em; }
.ks-fehler {
  margin: 10px 0 0; color: var(--red); font-size: 13px; font-weight: 600;
}

#frSchliessen { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
#frSchliessen:hover { background: var(--red-soft); color: var(--red); }

.topbar-actions .konto-klappe {
  left: 0; right: 0; width: auto;
  min-width: 0; max-width: none;
}

.tb-frsuche {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 12px; padding: 0 10px;
  height: 34px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.tb-frsuche:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--surface);
}
.tb-frsuche svg {
  flex: none; width: 15px; height: 15px;
  fill: none; stroke: var(--text-3); stroke-width: 1.7; stroke-linecap: round;
}
.tb-frsuche input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  color: var(--text); font: inherit; font-size: 13px;
}
.tb-frsuche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tb-freunde-klappe .tb-klappe-liste { max-height: min(340px, 46vh); }

:root {
  --kugel: color-mix(in srgb, var(--accent) 34%, transparent);
}
:root[data-theme="light"] {
  --kugel: color-mix(in srgb, var(--accent) 30%, transparent);
}

body::before,
body::after {
  content: "";
  position: fixed; inset: -40%; z-index: 0;
  pointer-events: none;
  will-change: transform;
}

body::before {
  background:
    radial-gradient(circle 300px at 16% 24%, var(--kugel), transparent 62%),
    radial-gradient(circle 240px at 64% 60%, var(--kugel), transparent 62%),
    radial-gradient(circle 280px at 88% 76%, var(--kugel), transparent 62%);
  animation: kugelnA 34s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(circle 360px at 80% 14%, var(--kugel), transparent 62%),
    radial-gradient(circle 260px at 30% 78%, var(--kugel), transparent 62%),
    radial-gradient(circle 220px at 48% 36%, var(--kugel), transparent 62%);
  animation: kugelnB 27s ease-in-out infinite alternate;
}

@keyframes kugelnA {
  from { transform: translate3d(-4%, 3%, 0) scale(1); }
  to   { transform: translate3d(7%, -5%, 0) scale(1.18); }
}
@keyframes kugelnB {
  from { transform: translate3d(5%, -3%, 0) scale(1.12); }
  to   { transform: translate3d(-6%, 4%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

.flieger {
  position: fixed; z-index: -1;
  pointer-events: none; overflow: hidden;
  inset: 0;
}

body:not(.sx-seite) .flieger {
  left: calc(var(--nav-w, 0px) + var(--nav-luft, 0px));
}

.muenzfeld {
  position: fixed; inset: 0; z-index: 70;
  pointer-events: none; overflow: hidden;
}

.flieger span, .muenze {
  position: absolute; bottom: -80px;
  font-size: 34px; line-height: 1;
  opacity: 0;
  animation: aufsteigen 22s linear infinite;
  will-change: transform, opacity;
  margin-left: -17px;
}

@keyframes aufsteigen {
  0%   { transform: translate(0, 0) rotate(-10deg) scale(.8); opacity: 0; }
  12%  { opacity: .38; }
  50%  { transform: translate(30px, -55vh) rotate(11deg) scale(1); }
  88%  { opacity: .38; }
  100% { transform: translate(-12px, -112vh) rotate(-7deg) scale(.8); opacity: 0; }
}

.muenze {
  border: 0; background: none; padding: 0;
  font-size: 40px; margin-left: -20px;
  pointer-events: auto; cursor: pointer;
  animation: muenzeZieht 22s linear 1 forwards;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 70%, transparent));
}
.muenze:hover { transform: scale(1.15); }
.muenze:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

@keyframes muenzeZieht {
  0%   { transform: translate(0, 0) rotate(0) scale(.7); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(24px, -55vh) rotate(180deg) scale(1); }
  90%  { opacity: 1; }
  100% { transform: translate(-10px, -118vh) rotate(360deg) scale(.7); opacity: 0; }
}

.muenze.gefangen {
  animation: muenzeGefangen .45s var(--ease-out) forwards;
  pointer-events: none;
}
@keyframes muenzeGefangen {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.7); opacity: 1; }
  100% { transform: scale(.2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .flieger span { display: none; }
}

.tbm-warten { cursor: default; }
.tbm-folgen { flex: none; white-space: nowrap; }
.tbm-warten .tbm-text { grid-area: text / text / wann / wann; }

.tbm-huelle { grid-area: bild; position: relative; display: block; width: 32px; height: 32px; }
.tbm-huelle .tbm-bild { position: absolute; inset: 0; }
.tbm-huelle.ist-da::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--surface);
}

.tb-gruppe { display: flex; align-items: center; gap: 8px; }
.tb-gruppe-zahl {
  padding: 1px 7px; border-radius: 999px;
  background: var(--inset); color: var(--text-2);
  font-size: 11px; font-weight: 650; letter-spacing: 0;
}
.tb-gruppe-da {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  color: var(--green); font-size: 11px; font-weight: 600;
}

.tb-spiel { margin-right: 6px; }
.tb-zahl-gold {
  background: var(--accent); color: var(--auf-accent);
  border-color: var(--bg-2);
}

#spielFenster .spf-kasten {
  width: min(1120px, 100%);
  padding: 0;
  overflow-x: hidden; overflow-y: auto;
  border-radius: 20px;
  background: var(--bg-2);
  will-change: transform, opacity;
  animation: fenster-auf var(--fenster-auf) var(--fenster-kurve) both;
}
.spf-marke svg, .soz-marke svg, .fo-marke svg {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  #spielFenster .spf-kasten { animation: none; }
}

.spf-kopf {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px 16px;
}
.spf-marke {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.spf-marke svg { width: 24px; height: 24px; }
.spf-kopf-text { flex: 1; min-width: 0; }
.spf-kopf-text h2 {
  margin: 0; font-size: 20px; font-weight: 680; letter-spacing: -.02em;
}
.spf-kopf-text p { margin: 2px 0 0; color: var(--text-3); font-size: 13px; }
.spf-zu {
  all: unset; cursor: pointer; flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px;
  border: 1px solid var(--line);
  color: var(--text-3); font-size: 13px;
  transition: color .15s, background .15s, border-color .15s;
}
.spf-zu:hover { color: var(--text); background: var(--surface-2); }
.spf-zu:focus-visible { outline: 2px solid var(--accent); }

.spf-karte {
  margin: 0 18px 16px; padding: 18px;
  border-radius: 16px; border: 1px solid var(--line);
  background: var(--surface);
}

.spf-muenze {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  align-items: center; gap: 22px;
  padding: 14px 18px;
  background:
    radial-gradient(120% 90% at 18% 40%,
      color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    var(--surface);
}
.spf-muenz-bild { display: block; width: 100%; }
.spf-muenz-bild svg { width: 100%; height: auto; display: block; }
.spf-muenz-text { min-width: 0; }

.spf-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spf-zeile h3 {
  margin: 0; font-size: 19px; font-weight: 680; letter-spacing: -.02em;
}
.spf-pille {
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--inset);
  font-size: 11.5px; color: var(--text-2); white-space: nowrap;
}
.spf-erklaerung {
  margin: 10px 0 14px; color: var(--text-2);
  font-size: 13px; line-height: 1.65;
}
.spf-erklaerung b { color: var(--text); }

.spf-stand {
  margin: 0 0 8px; font-variant-numeric: tabular-nums; line-height: 1;
}
.spf-stand b {
  font-size: 30px; font-weight: 700; color: var(--accent);
  letter-spacing: -.03em;
}
.spf-stand span { font-size: 14px; color: var(--text-3); margin-left: 4px; }

.spf-balken {
  height: 7px; border-radius: 999px; background: var(--inset); overflow: hidden;
}
.spf-balken i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
  transition: width .5s var(--ease-out);
}

.spf-lohn {
  flex: none; display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}
.spf-lohn-bild {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}
.spf-lohn-bild svg { width: 28px; height: 28px; }
.spf-lohn-wort { font-size: 11.5px; color: var(--text-3); }

.spf-abschnitt {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.spf-abschnitt h3 {
  margin: 0; font-size: 17px; font-weight: 660; letter-spacing: -.015em;
}
.spf-abschnitt .hint { margin-left: auto; text-align: right; }
.spf-ziel {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--green-soft); color: var(--green);
}
.spf-ziel svg { width: 18px; height: 18px; }

.spf-tipp {
  display: flex; align-items: center; gap: 10px;
  margin: 0 18px 18px; padding: 12px 16px;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-2); font-size: 12.5px;
}
.spf-tipp b { color: var(--text); }
.spf-info { flex: none; display: grid; place-items: center; color: var(--text-3); }
.spf-info svg { width: 18px; height: 18px; }

#spielFenster .spiel {
  margin: 0; padding: 0; border: 0; background: none; gap: 16px;
}
#spielFenster .sj-kopf {
  display: flex; gap: 0;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2); overflow: hidden;
}
#spielFenster .sj-stand { flex: 1; padding: 14px 16px; }
#spielFenster .sj-stand.rechts {
  text-align: left;
  grid-template-columns: auto 1fr;
  grid-template-areas: "marke label" "marke wert";
  border-left: 1px solid var(--line);
}
#spielFenster .sj-kette { padding: 0 14px; }

#spielFenster .sj-brett {
  border: 1px dashed color-mix(in srgb, var(--green) 38%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(96% 76% at 50% 42%,
      color-mix(in srgb, var(--green) 8%, transparent), transparent 72%),
    var(--inset);
}
#spielFenster .sj-schleier {
  background: color-mix(in srgb, var(--inset) 62%, transparent);
}
#spielFenster .sj-fuss { display: none; }

@media (max-width: 820px) {
  .spf-muenze { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .spf-muenz-bild { max-width: 190px; margin: 0 auto; }
  .spf-lohn { flex-direction: row; justify-content: center; }
}

.tb-spiel { margin-right: 0; }

.two-col, .start-raster { margin-bottom: 20px; }

.todo { margin-bottom: 26px; }

.toolbar > .tb-ansicht { margin-left: auto; }
@media (max-width: 700px) {
  .toolbar > .searchwrap { flex-basis: 180px; max-width: none; }
  .toolbar > .filters { order: 1; }
}

.neues-liste { margin: 0; line-height: 1.8; }
.neues-liste strong { color: var(--text); font-weight: 650; }
.neues-wert { color: var(--green); font-weight: 600; }

@media (max-width: 1080px) {
  .topbar-inner, .topbar-inner.app-kopf { padding: 0 14px; gap: 12px; }
  .topbar-actions { gap: 6px; }
  .tb-teiler { display: none; }
}
@media (max-width: 940px) {
  .tb-wort { display: none; }
  .topbar-actions .tb-zeichen { min-width: 40px; padding: 9px 8px; }
  .topbar-actions .tb-feld, .topbar-actions .tb-glocke-feld { margin: 0; }
}

@media (max-width: 860px) {
  .topbar-actions .konto-menue { width: auto; }
  .topbar-actions .sl-konto {
    width: auto; padding: 4px; gap: 0; border-radius: 50%;
  }
  .topbar-actions .sl-konto-text,
  .topbar-actions .sl-konto .sl-pfeil { display: none; }
  .topbar-actions .konto-menue.auf .sl-konto {
    border-radius: 50%; background: var(--surface-2);
    border-color: var(--line); border-bottom-color: var(--line);
  }
  .topbar-actions .konto-klappe {
    left: auto; right: 0; width: var(--kontobreite);
  }
  .topbar-actions .konto-menue.auf .konto-klappe {
    top: calc(100% + 8px);
    border-top-left-radius: var(--radius-l);
    border-top-right-radius: var(--radius-l);
    border-top-color: var(--line-strong);
  }
}

@media (max-width: 760px) {
  .tb-wort, .tb-teiler { display: none; }
  .topbar-inner, .topbar-inner.app-kopf { padding: 0 8px; gap: 8px; }
  :root { --kopf-h: 64px; }
  .topbar-actions { gap: 2px; }
  .topbar-actions .tb-zeichen { min-width: 40px; padding: 9px 8px; }
  .topbar-actions .konto-menue { width: auto; }
  .topbar-actions .konto-menue.auf .sl-konto {
    border-radius: 50%; border-bottom-color: var(--line);
    border-color: var(--line); background: var(--surface-2);
  }
  .topbar-actions .konto-menue.auf .konto-klappe {
    top: calc(var(--topbar-h) + 6px);
    border-top-left-radius: var(--radius-l);
    border-top-right-radius: var(--radius-l);
    border-top-color: var(--line-strong);
  }
  .topbar-actions .sl-konto { padding: 4px; gap: 0; border-radius: 50%; }
  .topbar-actions .sl-konto-text,
  .topbar-actions .sl-konto .sl-pfeil { display: none; }
  .topbar-actions .konto-menue { margin-left: 2px; }
  .tb-schliessen { width: 40px; height: 40px; margin-left: 2px; }
  .tb-klappe, .topbar-actions .konto-klappe {
    position: fixed; left: 10px; right: 10px;
    top: calc(var(--topbar-h) + 6px);
    width: auto; max-height: min(70vh, 480px);
    overflow-y: auto;
    min-width: 0;
  }
}

.ia-liste { display: flex; flex-direction: column; gap: 10px; }

.ia-karte {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 224px 168px;
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.ia-karte:hover { border-color: var(--line-strong); background: var(--surface-2); }

.ia-bild {
  width: 84px; aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-s);
  background: var(--inset);
  display: block;
}
.ia-bild.leer {
  display: grid; place-items: center;
  color: var(--text-3); font-size: 24px;
}

.ia-mitte { min-width: 0; }
.ia-titel {
  margin: 0 0 3px; font-size: 15px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ia-unter { margin: 0 0 8px; font-size: 12px; color: var(--text-2); }

.ia-gruende { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ia-gruende li {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 12px; color: var(--text-2);
}
.ia-gruende li span { font-size: 10px; }
.ia-gruende li.dafuer  span { color: var(--green); }
.ia-gruende li.dagegen span { color: var(--red); }

.ia-zahlen { display: flex; flex-direction: column; gap: 3px; }
.ia-zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: 12px; color: var(--text-2);
}
.ia-zeile b {
  font-size: 14px; color: var(--text); font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ia-duenn { font-style: normal; font-size: 12px; font-weight: 400;
            color: var(--text-3); }

.ia-beleg {
  font-size: 10px; color: var(--text-3);
  margin: -1px 0 4px; letter-spacing: .02em;
}

.ia-schaetzung {
  margin-top: 5px; padding-top: 6px;
  border-top: 1px dashed var(--line);
}
.ia-geschaetzt {
  text-transform: uppercase; letter-spacing: .06em; margin-top: 1px;
}
.ia-zeile b.plus  { color: var(--green); }
.ia-zeile b.minus { color: var(--red); }

.ia-rechts { display: flex; flex-direction: column; align-items: flex-start;
             gap: 8px; }

.ia-marke {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid transparent;
}
.ia-marke span { font-size: 9px; }
.ia-marke.gut      { background: var(--green-soft);  color: var(--green);
                     border-color: color-mix(in srgb, var(--green) 34%, transparent); }
.ia-marke.mittel   { background: var(--accent-soft); color: var(--accent);
                     border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.ia-marke.schlecht { background: var(--red-soft);    color: var(--red);
                     border-color: color-mix(in srgb, var(--red) 34%, transparent); }

.ia-punkte { display: flex; align-items: baseline; gap: 2px; }
.ia-punkte b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ia-punkte span { font-size: 11px; color: var(--text-3); }
.ia-punkte.gut b      { color: var(--green); }
.ia-punkte.mittel b   { color: var(--accent); }
.ia-punkte.schlecht b { color: var(--red); }

.ia-echt { font-size: 11px; color: var(--text-2); }
.ia-echt.plausibel  { color: var(--green); }
.ia-echt.auffaellig { color: var(--red); }
.ia-echt.unklar     { color: var(--text-3); }

.ia-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

.fu-sortierung { display: flex; align-items: center; gap: 8px; }
.fu-sortierung select {
  padding: 7px 10px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--inset);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.fu-sortierung select:hover { border-color: var(--line-strong); }

.ia-fussnote { margin-top: 14px; max-width: 74ch; line-height: 1.55; }

.ia-rueckweg { grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; }
.ia-rueckweg .ia-zurueck { flex: none; }

@media (max-width: 1100px) {
  .ia-karte { grid-template-columns: 84px minmax(0, 1fr) 190px; }
  .ia-rechts {
    grid-column: 2 / -1;
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px;
  }
  .ia-knoepfe { margin-left: auto; }
}
@media (max-width: 700px) {
  .ia-karte { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .ia-bild { width: 64px; }
  .ia-zahlen { grid-column: 1 / -1; }
  .ia-rechts { grid-column: 1 / -1; }
  .ia-zeile { font-size: 13px; }
  .fu-sortierung { width: 100%; }
  .fu-sortierung select { flex: 1; }
}

.ia-karte { cursor: pointer; }

.ia-fenster { width: min(640px, calc(100vw - 32px)); }

.ia-f-kopf { display: flex; gap: 16px; align-items: flex-start; }
.ia-f-bild {
  width: 110px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-s); background: var(--inset);
  display: block; flex: none;
}
.ia-f-bild.leer { display: grid; place-items: center;
                  color: var(--text-3); font-size: 28px; }
.ia-f-wer { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ia-f-urteil { display: flex; align-items: center; gap: 12px; }
.ia-f-text { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }

.ia-f-spalten {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.ia-f-block {
  margin: 0 0 4px; font-size: 10px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .07em;
}

.ia-f-strategie {
  margin: 14px 0 0; padding: 10px 12px;
  border-radius: var(--radius-s);
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
  font-size: 13px; line-height: 1.5; color: var(--text);
}

.ia-f-gruende { margin-top: 14px; }

.ia-f-nachricht { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ia-f-nachricht textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 9px 11px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--inset);
  color: var(--text); font: inherit; font-size: 13px; line-height: 1.5;
}
.ia-f-nachricht textarea:focus { outline: none; border-color: var(--accent); }
.ia-f-nachricht .btn { align-self: flex-start; }

@media (max-width: 560px) {
  .ia-f-spalten { grid-template-columns: 1fr; gap: 12px; }
  .ia-f-bild { width: 84px; }
}

.ia-startzeile { cursor: pointer; }
.ia-startzeile .r-bild {
  width: 40px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 7px; background: var(--inset); flex: none;
}
.ia-startzeile .r-bild.leer { display: grid; place-items: center;
                              color: var(--text-3); }
.ia-startzeile-art span { font-size: 9px; }
.ia-startzeile-art.gut      { color: var(--green); }
.ia-startzeile-art.mittel   { color: var(--accent); }
.ia-startzeile-art.schlecht { color: var(--red); }
.ia-startzeile .r-val.plus { color: var(--green); white-space: nowrap; }

.ia-neu {
  display: inline-block; vertical-align: 4px;
  margin-left: 8px; padding: 2px 8px;
  border-radius: 999px;
  background: var(--zweit-soft);
  color: var(--zweit);
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
}
.sl-marke.neu {
  background: var(--zweit-soft);
  color: var(--zweit);
}

.ia-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ia-kpi {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
  padding: 15px 16px;
  border-radius: var(--radius-l);
  background: var(--surface);
  border: 1px solid var(--line);
}
.ia-kpi.gut      { background: color-mix(in srgb, var(--green) 7%, var(--surface));
                   border-color: color-mix(in srgb, var(--green) 28%, transparent); }
.ia-kpi.mittel   { background: color-mix(in srgb, var(--accent) 7%, var(--surface));
                   border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.ia-kpi.schlecht { background: color-mix(in srgb, var(--red) 6%, var(--surface));
                   border-color: color-mix(in srgb, var(--red) 26%, transparent); }
.ia-kpi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ia-kpi-name {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-2);
}
.ia-kpi-zahl {
  font-size: 26px; font-weight: 650; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.ia-kpi.gut .ia-kpi-zahl      { color: var(--green); }
.ia-kpi.mittel .ia-kpi-zahl   { color: var(--accent); }
.ia-kpi.schlecht .ia-kpi-zahl { color: var(--red); }
.ia-kpi-unter { font-size: 11px; color: var(--text-3); }
.ia-kpi-bild { flex: none; width: 20px; height: 20px; color: var(--text-3); }
.ia-kpi.gut .ia-kpi-bild      { color: var(--green); }
.ia-kpi.mittel .ia-kpi-bild   { color: var(--accent); }
.ia-kpi.schlecht .ia-kpi-bild { color: var(--red); }
.ia-kpi-bild svg { width: 100%; height: 100%; }

.ia-tabsleiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.ia-tabs { display: flex; gap: 2px; }
.ia-reiter {
  appearance: none; border: 0; background: transparent;
  padding: 9px 13px 11px;
  color: var(--text-2); font: inherit; font-size: 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.ia-reiter:hover { color: var(--text); }
.ia-reiter.on {
  color: var(--text); font-weight: 600;
  border-bottom-color: var(--accent);
}
.ia-tabsleiste .searchwrap { margin-bottom: 8px; }

.ia-tafel { margin-bottom: 10px; }
.ia-tr { cursor: pointer; }
.ia-tr:hover td { background: var(--surface-2); }
.ia-tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ia-tr td { vertical-align: middle; }

.ia-td-artikel {
  display: flex; align-items: center; gap: 12px;
  min-width: 240px;
}
.ia-tbild {
  flex: none; width: 46px; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: 8px; background: var(--inset);
}
.ia-tbild.leer { display: grid; place-items: center; color: var(--text-3); }
.ia-td-artikel-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ia-td-artikel-text b {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 320px;
}
.ia-td-artikel-text span { font-size: 11px; color: var(--text-2); }

.ia-td-analyse { min-width: 170px; }
.ia-tbadge {
  display: inline-block;
  margin-bottom: 4px;
  padding: 3px 9px; border-radius: 7px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
}
.ia-tbadge.gut      { background: var(--green-soft); color: var(--green); }
.ia-tbadge.mittel   { background: var(--accent-soft); color: var(--accent); }
.ia-tbadge.schlecht { background: var(--red-soft); color: var(--red); }
.ia-tzeile { display: block; font-size: 11px; color: var(--text-2); }
.ia-tzeile b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.ia-tzeile b.gut      { color: var(--green); }
.ia-tzeile b.schlecht { color: var(--red); }
.ia-tzeile b.egal     { color: var(--text-2); }

.ia-td-geld { min-width: 130px; }
.ia-td-geld > b {
  display: block; margin-bottom: 3px;
  font-size: 13px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ia-td-geld > b.plus  { color: var(--green); }
.ia-td-geld > b.minus { color: var(--red); }

.ia-td-wann { font-size: 12px; color: var(--text-2); white-space: nowrap; }

.ia-td-taten { text-align: right; white-space: nowrap; }
.ia-tat-knopf {
  appearance: none; border: 1px solid var(--line); background: transparent;
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-grid; place-items: center;
  color: var(--text-2); cursor: pointer;
  margin-left: 5px;
}
.ia-tat-knopf:hover { border-color: var(--accent); color: var(--accent); }
.ia-tat-knopf.rot:hover { border-color: var(--red); color: var(--red); }

.ia-seiten {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-2);
}
.ia-seiten-knoepfe { display: flex; gap: 4px; }
.ia-seite {
  appearance: none; border: 1px solid var(--line); background: transparent;
  min-width: 28px; height: 28px; padding: 0 7px;
  border-radius: 8px; color: var(--text-2);
  font: inherit; font-size: 12px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ia-seite:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text); }
.ia-seite.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--auf-accent); font-weight: 600;
}
.ia-seite:disabled { opacity: .4; cursor: default; }

@media (max-width: 760px) {
  .ia-td-artikel-text b { max-width: 180px; }
  .ia-tabsleiste .searchwrap { width: 100%; }
}

.stm-verlauf {
  margin-top: 14px;
  position: relative;   /* fuer die Achsen-Beschriftungen rechts */
  display: flex; flex-direction: column; gap: 4px;
}
.stm-verlauf svg {
  display: block;
  width: 100%; height: 88px;   /* 62 -> 88: mehr Zeichnung braucht Platz */
  overflow: visible;
}
.stm-linie {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .85;
}
.stm-flaeche {
  fill: var(--accent);
  opacity: .13;
  stroke: none;
}
.stm-jetzt {
  fill: var(--accent);
  stroke: var(--surface);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.stm-netz {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  vector-effect: non-scaling-stroke;
  opacity: .18;
}
.stm-tag {
  fill: var(--accent);
  opacity: .55;
  pointer-events: auto;
  transition: opacity .15s;
}
.stm-tag:hover { opacity: 1; }
.stm-netz.fein { opacity: .1; }
.stm-tick {
  stroke: var(--accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: .16;
}
.stm-tick.voll { opacity: .5; }
.stm-best {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 1.5 2.5;
  vector-effect: non-scaling-stroke;
  opacity: .35;
}
.stm-achse {
  position: absolute; right: 0;
  font-size: 9px; font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--text-3);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  padding: 0 3px; border-radius: 4px;
  pointer-events: none;
}
.stm-achse.oben { top: 0; }
.stm-achse.mitte { top: 44px; }
.stm-verlauf-text {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
@media (max-width: 560px) {
  .stm-verlauf-text span + span { display: none; }
}

.aw-feld { position: relative; width: 100%; }
.aw-feld > select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}

.aw-knopf {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--text);
  font-size: 14px; font-family: inherit; text-align: left;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.aw-knopf:hover { background: var(--surface-2); }
.aw-knopf:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.aw-knopf:disabled { opacity: .55; cursor: default; }
.aw-feld.ist-auf .aw-knopf {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.aw-wert {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aw-pfeil {
  flex: none; width: 8px; height: 8px;
  margin-right: 2px;
  border-right: 1.6px solid var(--text-3);
  border-bottom: 1.6px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s var(--ease-out), border-color .16s;
}
.aw-feld.ist-auf .aw-pfeil {
  border-color: var(--accent);
  transform: rotate(-135deg) translate(-3px, -3px);
}

.aw-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  z-index: 400;
  max-height: 260px; overflow-y: auto;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; gap: 1px;
}
.aw-feld.nach-oben .aw-liste { top: auto; bottom: calc(100% + 6px); }

.aw-zeile {
  display: block; width: 100%;
  padding: 8px 10px;
  border: 0; border-radius: var(--radius-s);
  background: none;
  color: var(--text-2);
  font-size: 13.5px; font-family: inherit; text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.aw-zeile:hover, .aw-zeile:focus-visible {
  outline: none;
  background: var(--surface-2); color: var(--text);
}
.aw-zeile.ist-gewaehlt {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.aw-zeile.ist-aus, .aw-zeile:disabled {
  opacity: .45; cursor: default; background: none;
}

.aw-feld.aw-mini { width: auto; min-width: 128px; }
.aw-feld.aw-mini .aw-knopf { padding: 5px 10px; font-size: 12.5px; }
.aw-feld.aw-jahrwahl { width: auto; min-width: 106px; }

.hk-haken, .af-haken {
  appearance: none; -webkit-appearance: none;
  flex: none; position: relative;
  width: 19px; height: 19px; margin: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
.hk-haken:hover, .af-haken:hover { border-color: var(--accent); }
.hk-haken:focus-visible, .af-haken:focus-visible {
  outline: none; box-shadow: 0 0 0 4px var(--accent-soft);
}
.hk-haken:checked, .af-haken:checked {
  background: var(--accent); border-color: var(--accent);
}
.hk-haken::after, .af-haken::after {
  content: ""; position: absolute;
  left: 6px; top: 2.5px;
  width: 4px; height: 9px;
  border: solid var(--auf-accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.6);
  opacity: 0;
  transition: opacity .12s, transform .16s var(--ease-out);
}
.hk-haken:checked::after, .af-haken:checked::after {
  opacity: 1; transform: rotate(45deg) scale(1);
}
.hk-haken:disabled, .af-haken:disabled { opacity: .5; cursor: default; }

@media (hover: none) {
  .hk-haken::before, .af-haken::before {
    content: ""; position: absolute;
    inset: 50% auto auto 50%;
    width: 40px; height: 40px;
    transform: translate(-50%, -50%);
  }
}

.panel-fuss {
  all: unset; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; margin-top: auto;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  color: var(--text-2); font-size: 12.5px; font-weight: 550;
  cursor: pointer;
  transition: color .16s, background .16s;
}
.panel-fuss:hover { color: var(--accent); background: var(--surface-2); }
.panel-fuss:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.panel-fuss .pf-pfeil { transition: transform .16s var(--ease-out); }
.panel-fuss:hover .pf-pfeil { transform: translateX(3px); }

.st-ring-karte, .st-marken { display: flex; flex-direction: column; }
.st-marken .ranking { flex: 1; }
.st-ring-karte .st-zahlenreihe { margin-bottom: 0; }

.st-monat .panel-fuss {
  margin-top: 12px;
  padding: 12px 0 0;
  border-top-color: var(--line);
  color: var(--accent);
}
.st-monat .panel-fuss:hover {
  color: var(--accent-press);
  background: none;
}

.rt-hero .sx-unter {
  max-width: 560px;
  margin: 12px 0 0;
}
.erw-wahl {
  display: grid; gap: 18px 24px; margin-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 720px;
}
.erw-weg-karte { display: grid; gap: 10px; align-content: start; }
.erw-notiz {
  margin: 0; color: var(--text-3);
  font-size: 12.5px; line-height: 1.55;
}
.erw-notiz b { color: var(--text-2); }
.erw-notiz code {
  padding: 1px 5px; border-radius: 5px;
  background: var(--inset); font-size: 11.5px;
}
.erw-laden, .erw-zip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 46px; text-align: center;
}
.rt-hero .anmerkung {
  display: block;
  margin-top: 12px;
  padding-left: 0; border-left: 0;
}
.rt-hero .kasten { max-width: 560px; margin: 20px 0 0; }

.sx-schluss .schluss-anmerkung {
  border-left: 0; padding-left: 0;
  margin: 26px auto 0; max-width: 52ch;
  text-align: center;
}

.sl-warn {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--orange-soft); color: var(--orange);
  font-size: 9.5px; font-weight: 800;
  line-height: 0;
  padding-bottom: 1px;
}

.lb-sendung { display: inline-flex; align-items: center; gap: 8px; }
.lb-sendung a { color: var(--text-2); text-decoration: none; }
.lb-sendung a:hover { color: var(--accent); text-decoration: underline; }
.lb-sendung.ist-zu a { color: var(--green); }
.lb-zu, .lb-nr {
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: none; color: var(--text-3);
  font-size: 11px; font-family: inherit; padding: 1px 9px;
  cursor: pointer; transition: color .16s, border-color .16s;
}
.lb-zu:hover, .lb-nr:hover { color: var(--accent); border-color: var(--accent); }
.lb-sendung.ist-zu .lb-zu {
  color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: var(--green-soft);
}
.lb-eingabe { display: inline-flex; align-items: center; gap: 6px; }
.lb-eingabe input {
  width: 180px; padding: 3px 10px; font-size: 12px;
  border-radius: 999px;
}
.lb-eingabe .mini {
  border: 1px solid var(--line-strong); border-radius: 50%;
  width: 24px; height: 24px; background: var(--accent);
  color: var(--auf-accent); cursor: pointer; font-size: 12px;
}

.sl-guthaben {
  display: grid; gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 7%, var(--surface)),
    var(--surface));
}
.slg-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.slg-marke {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3);
}
.slg-zahl {
  display: flex; align-items: center; gap: 7px;
}
.slg-zahl b {
  font-size: 21px; font-weight: 650; letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.slg-zahl svg {
  width: 15px; height: 15px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.slg-wert {
  font-size: 10.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.slg-laden { justify-content: center; font-size: 12.5px; padding: 7px 12px; }
.slg-verlauf {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11.5px; color: var(--text-3); padding: 1px 0;
  transition: color .16s;
}
.slg-verlauf:hover { color: var(--accent); }
.slg-verlauf:hover .pf-pfeil { transform: translateX(3px); }
.slg-verlauf .pf-pfeil { transition: transform .16s var(--ease-out); }

.sa-raster {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; padding: 16px 20px 18px;
}
.sa-kachel {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2, var(--inset));
  transition: border-color .16s, transform .16s var(--ease), background .16s;
}
.sa-kachel:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-2px);
}
.sa-kachel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sa-bild {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
}
.sa-bild svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.sa-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sa-text b { font-size: 13px; font-weight: 620; }
.sa-text i {
  font-style: normal; font-size: 11.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1100px) { .sa-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .sa-raster { grid-template-columns: 1fr; } }

ul.neues-liste {
  list-style: none; margin: 4px 0 0; padding: 0;
  display: grid; gap: 8px;
}
ul.neues-liste li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--inset);
  font-size: 13.5px; color: var(--text-2);
}
ul.neues-liste strong {
  color: var(--accent); font-variant-numeric: tabular-nums;
  min-width: 18px; text-align: right;
}

.ti-kasten { padding: 22px 24px 18px; }
.ti-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ti-kopf h2 { margin: 2px 0 0; font-size: 19px; letter-spacing: -.015em; }
.ti-auge {
  margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.ti-zeichen {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--accent-soft); color: var(--accent);
}
.ti-zeichen svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.ti-text { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.65; }
.ti-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
}
.ti-nichtmehr {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-3); cursor: pointer;
}

.vas {
  position: fixed; right: 20px; bottom: 20px; z-index: 145;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
body:has(#inspector:not([hidden])) .vas { visibility: hidden; }
.vas-knopf {
  all: unset; box-sizing: border-box; cursor: pointer;
  position: relative;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35),
              0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  transition: transform .16s var(--ease), box-shadow .2s;
}
.vas-knopf:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4),
              0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent);
}
.vas-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vas-knopf svg {
  width: 27px; height: 27px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.vas-lampe {
  position: absolute; right: 2px; bottom: 3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--surface);
}
.vas-blase {
  display: flex; flex-direction: column;
  padding: 9px 14px;
  border: 1px solid var(--line-strong); border-radius: 13px 13px 3px 13px;
  background: var(--surface); box-shadow: var(--shadow-2);
  font-size: 12px; color: var(--text-3);
  animation: vasWinken 3.2s ease-in-out infinite;
}
.vas-blase b { color: var(--text); font-size: 12.5px; }
@keyframes vasWinken {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .vas-blase { animation: none; } }

.vas-fenster {
  display: flex; flex-direction: column;
  width: min(390px, calc(100vw - 40px));
  max-height: min(640px, calc(100vh - 120px));
  max-height: min(640px, calc(100svh - 120px));
  border: 1px solid var(--line-strong); border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 28px 70px rgb(0 0 0 / .45);
  overflow: hidden;
  will-change: transform, opacity;
  transform-origin: bottom right;
  animation: fenster-auf var(--fenster-auf) var(--fenster-kurve) both;
}
:root[data-theme="light"] .vas-fenster { box-shadow: 0 24px 56px rgb(0 0 0 / .14); }
.vas-kopf {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 12px 14px 16px;
  border-bottom: 1px solid var(--line);
}
.vas-avatar {
  position: relative; flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.vas-avatar::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 55%,
    color-mix(in srgb, var(--accent) 85%, transparent) 80%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: vasRing 4.5s linear infinite;
}
@keyframes vasRing { to { transform: rotate(1turn); } }
.vas-avatar svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.vas-kopf-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.vas-kopf-text strong { font-size: 15px; font-weight: 680; letter-spacing: -.01em; }
.vas-beta {
  display: inline-block; vertical-align: 1px; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-style: normal; font-size: 10.5px; font-weight: 650;
}
.vas-online {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-3);
}
.vas-online i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.vas-zu {
  all: unset; cursor: pointer; flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  color: var(--text-3);
}
.vas-zu .stb-i { width: 16px; height: 16px; }
.vas-zu:hover { background: var(--surface-2); color: var(--text); }
.vas-zu:focus-visible { outline: 2px solid var(--accent); }

.vas-lauf {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.vas-gruss p { margin: 0 0 4px; font-size: 13.5px; color: var(--text-2); line-height: 1.6; }
.vas-gruss b { display: block; margin-bottom: 2px; color: var(--text); font-size: 19px;
               font-weight: 700; letter-spacing: -.015em; }
.vas-chips { display: grid; gap: 6px; margin-top: 6px; }
.vas-chips-uber {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 10px 2px 2px;
  font-size: 12px; font-weight: 650; color: var(--text-3);
}
.vas-chips-uber:first-child { margin-top: 0; }
.vas-preis {
  font-style: normal;
  padding: 2px 9px; border-radius: 999px;
  background: var(--inset);
  font-size: 11px; font-weight: 650; color: var(--text-2);
}
.vas-preis.kostet { background: var(--accent-soft); color: var(--accent); }
.vas-chip-reihe { display: grid; gap: 4px; }
.vas-chip {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px;
  align-items: center; gap: 10px;
  padding: 8px 10px 8px 8px;
  border-radius: 12px;
  background: var(--inset);
  font-size: 13px; line-height: 1.4; color: var(--text);
}
.vas-chip-bild {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface); color: var(--accent);
}
.vas-chip-bild .stb-i { width: 16px; height: 16px; }
.vas-chip-pfeil { display: grid; place-items: center; color: var(--text-3); }
.vas-chip-pfeil .stb-i {
  width: 15px; height: 15px;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1);
}
.vas-chip:hover { background: var(--surface-2); }
.vas-chip:hover .vas-chip-bild { background: var(--accent-soft); }
.vas-chip:hover .vas-chip-pfeil { color: var(--accent); }
.vas-chip:hover .vas-chip-pfeil .stb-i { transform: translateX(3px); }
.vas-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.vas-nachricht {
  max-width: 88%;
  padding: 9px 13px; border-radius: 18px;
  font-size: 13.5px; line-height: 1.6;
  overflow-wrap: break-word;
  animation: vasRein .3s cubic-bezier(.2, .9, .25, 1.12) both;
}
@keyframes vasRein {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
}
.vas-nachricht.ich {
  align-self: flex-end;
  transform-origin: bottom right;
  background: linear-gradient(160deg, var(--accent-press), var(--accent));
  color: var(--auf-accent);
  border-bottom-right-radius: 6px;
}
.vas-nachricht.bot {
  align-self: flex-start;
  transform-origin: bottom left;
  background: var(--inset); color: var(--text);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}
.vas-tippt { display: inline-flex; align-items: center; gap: 4px; padding: 4px 2px; }
.vas-tippt > i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3);
  animation: vasTippt 1.1s ease-in-out infinite;
}
.vas-tippt > i:nth-child(2) { animation-delay: .15s; }
.vas-tippt > i:nth-child(3) { animation-delay: .3s; }
@keyframes vasTippt {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.vas-tippt-wort {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.vas-text { white-space: pre-line; }
.vas-fehler { color: var(--red); }
.vas-ziel {
  all: unset; cursor: pointer;
  display: inline-block; margin-top: 6px;
  color: var(--accent); font-size: 12.5px; text-decoration: none;
}
.vas-ziel:hover { text-decoration: underline; }
.vas-kosten {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 7px;
  border-top: 1px solid var(--line);
  font-size: 11px; color: var(--text-3);
}
.vas-kosten.kostet { color: var(--accent); }

.vas-chips-kopf {
  all: unset; box-sizing: border-box; cursor: pointer;
  align-self: flex-start; margin-top: 4px; padding: 6px 12px;
  border-radius: 999px;
  background: var(--inset);
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.vas-chips-kopf:hover { color: var(--accent); }

.vas-beratung {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 16px 10px; padding: 8px 10px;
  border-radius: 12px;
  background: var(--inset);
}
.vas-beratung-bild { flex: none; color: var(--accent); padding-top: 1px; }
.vas-beratung-bild .stb-i { width: 15px; height: 15px; }
.vas-beratung p { margin: 0; font-size: 11.5px; color: var(--text-3); line-height: 1.55; }
.vas-beratung b { color: var(--text-2); }

.vas-frage {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 14px 12px;
  border-top: 1px solid var(--line);
}
.vas-frage input {
  flex: 1; min-width: 0;
  border-radius: 999px;
  background: var(--inset);
  border: 1px solid var(--line);
  padding: 10px 16px;
}
.vas-frage input:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.vas-frage button[type="submit"] {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(160deg, var(--accent-press), var(--accent));
  color: var(--auf-accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: transform .14s cubic-bezier(.2, .8, .2, 1);
}
.vas-frage button[type="submit"] .stb-i { width: 19px; height: 19px; margin-left: -1px; }
.vas-frage button[type="submit"]:hover { transform: translateY(-1px); }
.vas-frage button[type="submit"]:active { transform: scale(.94); }
.vas-frage button[type="submit"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vas-neu {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--text-3);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.vas-neu .stb-i { width: 17px; height: 17px; }
.vas-neu:hover { color: var(--accent); background: var(--inset); transform: rotate(-140deg); }
.vas-neu:focus-visible { outline: 2px solid var(--accent); }

@media (max-width: 560px) {
  .vas {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .vas-fenster { width: calc(100vw - 24px); }
  .vas-blase { display: none; }
}

@media print { .vas { display: none; } }

.verkaufsmeldung, .einladung, .melder {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

.st-marken .ranking {
  max-height: 376px;
  overflow-y: auto;
}

.glk-klappe {
  width: min(440px, calc(100vw - 24px));
  padding: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2), 0 26px 60px rgb(0 0 0 / .3);
  transform-origin: top right;
  animation: glkAuf 220ms cubic-bezier(.2, .8, .2, 1) both;
}
:root[data-theme="light"] .glk-klappe {
  box-shadow: var(--shadow-2), 0 22px 48px rgb(0 0 0 / .12);
}
@keyframes glkAuf {
  from { opacity: 0; transform: translateY(-8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.glk-klappe.zu { animation: glkZu 150ms ease-in both; }
@keyframes glkZu {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px) scale(.97); }
}

.glk-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 12px 12px 18px;
}
.glk-kopf-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.glk-kopf-text strong {
  font-size: 16px; font-weight: 680; letter-spacing: -.015em; color: var(--text);
}
.glk-kopf-zahl {
  font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.glk-kopf-tat { display: flex; align-items: center; gap: 2px; flex: none; }
.glk-nurneu, .glk-gelesen, .glk-zu {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 10px; border-radius: 10px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
  white-space: nowrap;
}
.glk-nurneu:hover, .glk-gelesen:hover, .glk-zu:hover {
  background: var(--surface-2); color: var(--text);
}
.glk-gelesen:hover { color: var(--accent); }
.glk-nurneu:focus-visible, .glk-gelesen:focus-visible, .glk-zu:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.glk-gelesen .stb-i { width: 18px; height: 18px; }
.glk-zu { width: 32px; padding: 0; }
.glk-zu .stb-i { width: 16px; height: 16px; }
.glk-schalter {
  position: relative; flex: none;
  width: 26px; height: 16px; border-radius: 999px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.glk-schalter::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-3);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
.glk-nurneu.on { color: var(--text); }
.glk-nurneu.on .glk-schalter {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.glk-nurneu.on .glk-schalter::after { transform: translateX(10px); background: var(--accent); }

.glk-reiter {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 2px 16px 14px;
  border-bottom: 1px solid var(--line);
}
.glk-tab {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px 0 10px;
  border-radius: 999px;
  background: var(--inset);
  font-size: 12px; font-weight: 580; color: var(--text-2);
  white-space: nowrap;
}
.glk-tab:hover { color: var(--text); }
.glk-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.glk-tab img { width: 14px; height: 14px; border-radius: 4px; object-fit: contain; }
.glk-tab .stb-i { width: 14px; height: 14px; }
.glk-tab.on {
  background: var(--accent-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent);
}
.glk-zahl {
  font-style: normal;
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--accent); color: var(--auf-accent);
  font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.glk-zahl[hidden] { display: none; }

.glk-liste {
  max-height: min(470px, 60vh);
  padding: 2px 0 8px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.glk-liste::-webkit-scrollbar { width: 8px; }
.glk-liste::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
.glk-liste::-webkit-scrollbar-track { background: transparent; }

.glk-tag {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 6px;
  font-size: 12px; font-weight: 650; color: var(--text-3);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.glk-tag::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.glk-zeile {
  all: unset; box-sizing: border-box; cursor: pointer;
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start; gap: 0 12px;
  width: calc(100% - 12px);
  margin: 0 6px;
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
}
.glk-zeile.mit-vorschau { grid-template-columns: 42px minmax(0, 1fr) auto 44px; }
.glk-zeile:hover { background: var(--surface-2); }
.glk-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.glk-klappe.frisch .glk-zeile {
  animation: glkZeileRein .36s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: calc(70ms + min(var(--glk-i, 0), 10) * 34ms);
}
@keyframes glkZeileRein {
  from { opacity: 0; transform: translateY(7px); }
}

.glk-bild {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  color: var(--accent);
  background: var(--accent-soft);
}
.glk-bild > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.glk-bild.person {
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--text);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 32%, var(--surface)),
    color-mix(in srgb, var(--accent) 12%, var(--surface)));
}
.glk-bild.logo { background: var(--inset); }
.glk-bild.logo > img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; }
.glk-bild.zeichen > .stb-i { width: 19px; height: 19px; }
.glk-zeile.dringend .glk-bild.zeichen { color: var(--orange); background: var(--orange-soft); }
.glk-art {
  position: absolute; right: -3px; bottom: -3px;
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface);
  box-shadow: 0 0 0 2px var(--surface);
  color: var(--accent);
}
.glk-zeile:hover .glk-art { box-shadow: 0 0 0 2px var(--surface-2); }
.glk-art .stb-i { width: 12px; height: 12px; stroke-width: 2; }
.glk-art.logo img { width: 14px; height: 14px; border-radius: 4px; object-fit: contain; }

.glk-text {
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 2px;
}
.glk-titel {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13.5px; font-weight: 500; line-height: 1.38;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.glk-titel b { font-weight: 680; color: var(--text); }
.glk-zeile.ist-neu .glk-titel { color: var(--text); }
.glk-sub {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
  font-size: 12px; line-height: 1.4; color: var(--text-3);
}
.glk-sub > span {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.glk-sub > span i { font-style: normal; color: var(--text-2); }
.glk-quelle { flex: none; font-style: normal; font-weight: 600; }
.glk-zeile.dringend .glk-sub > span { color: var(--orange); font-weight: 600; }

.glk-seite {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  padding-top: 3px;
}
.glk-wann {
  font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.glk-zeile.ist-neu .glk-wann { color: var(--accent); font-weight: 600; }
.glk-punkt { width: 8px; height: 8px; border-radius: 50%; }
.glk-zeile.ist-neu .glk-punkt {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.glk-vorschau {
  width: 44px; height: 44px; border-radius: 10px;
  object-fit: cover;
}

.glk-leer {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 40px 28px 44px;
  font-size: 13px; line-height: 1.5; color: var(--text-3);
}
.glk-leer-bild {
  position: relative;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  margin-bottom: 8px;
  color: var(--accent);
  background: radial-gradient(circle at 50% 35%,
    color-mix(in srgb, var(--accent) 24%, transparent), var(--accent-soft) 72%);
}
.glk-leer-bild > .stb-i { width: 25px; height: 25px; }
.glk-leer-bild > i {
  position: absolute; right: -2px; bottom: -2px;
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: var(--surface);
  box-shadow: 0 0 0 3px var(--surface);
}
.glk-leer-bild > i .stb-i { width: 13px; height: 13px; stroke-width: 2.6; }
.glk-leer b { color: var(--text); font-size: 14px; font-weight: 650; }

.ab-banner {
  display: flex; align-items: center; gap: 20px;
  width: 100%;
  margin-bottom: 24px;
  padding: 16px 22px;
  border-radius: var(--radius-l);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:
    radial-gradient(120% 200% at 0% 0%,
      color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%),
    var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
              0 14px 40px -24px color-mix(in srgb, var(--accent) 35%, transparent);
  position: relative;
}
.ab-banner::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: var(--fortschritt, 0%); height: 2px;
  background: var(--accent);
  border-radius: 0 0 0 var(--radius-l);
  transition: width .4s var(--ease);
}
.ab-zeichen {
  flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 28%, transparent),
              inset 0 0 12px color-mix(in srgb, var(--accent) 14%, transparent);
}
.ab-zeichen i {
  font-style: normal;
  font-size: 22px; font-weight: 700; color: var(--accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
}
.ab-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ab-text h2 {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.015em;
}
.ab-text h2 em { font-style: normal; color: var(--accent); }
.ab-text p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.ab-punkte {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  margin-top: 3px;
}
.ab-punkt {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 12px; color: var(--text-3);
}
.ab-punkt::before {
  content: "✓"; flex: none;
  font-size: 10px; color: inherit;
}
.ab-punkt.gold { color: var(--accent); }
.ab-knopf {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 12px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 90%, #fff),
    var(--accent));
  color: var(--auf-accent);
  font-size: 14px; font-weight: 650; white-space: nowrap;
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .16s var(--ease), box-shadow .2s;
}
.ab-knopf:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.ab-knopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ab-knopf.leise {
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--line-strong); box-shadow: none;
}

.svl {
  display: flex; flex-direction: column; gap: 10px; flex: 1;
  padding: 12px 20px 18px;
  min-width: 0;
}
.svl-feld {
  position: relative;
  padding-left: 44px;   /* Platz fuer die Achsenwerte */
}
.svl-y {
  position: absolute; left: 0;
  font-size: 10px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}
.svl-y[style*="top:0"] { transform: none; }
.svl-y[style*="bottom:0"] { transform: none; }
.svl-netz {
  stroke: var(--line);
  stroke-width: 1; stroke-dasharray: 2 4;
  vector-effect: non-scaling-stroke;
}
.svl-linie {
  fill: none; stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--accent) 35%, transparent));
}
.svl-flaeche { fill: var(--accent); opacity: .1; stroke: none; }
.svl-punkt {
  fill: var(--accent); stroke: var(--surface); stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: opacity .15s;
}
.svl-punkt.leer { opacity: .3; }
.svl-punkt.jetzt { stroke: var(--accent); fill: var(--surface); }
.svl-punkt.aktiv { opacity: 1; }
.svl-tip {
  position: absolute; top: 4px;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: 1px;
  padding: 7px 12px; border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: var(--shadow-2);
  font-size: 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  pointer-events: none; white-space: nowrap; z-index: 2;
}
.svl-tip b { color: var(--text); font-size: 11px; }
.svl-monate {
  display: flex; justify-content: space-between;
  padding-left: 44px;
  font-size: 10.5px; color: var(--text-3);
}
.svl-monate span {
  display: grid; justify-items: center; gap: 1px;
  min-width: 0;
}
.svl-monate span i {
  font-style: normal; font-size: 9px; opacity: .7;
  font-variant-numeric: tabular-nums;
}
.svl-monate span.jetzt { color: var(--accent); font-weight: 650; }
.svl-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
  margin-top: 4px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.svl-kpi i { overflow-wrap: anywhere; }
.svl-kpi {
  display: grid; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2, var(--inset));
}
.svl-kpi i {
  font-style: normal;
  font-size: 9px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}
.svl-kpi b {
  font-size: 15px; font-weight: 650;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.svl-kpi span { font-size: 10px; color: var(--text-3); }

.start-raster > .panel:first-child { grid-column: span 5; }
.st-verlauf { grid-column: span 7; }
.st-verlauf .sv-balken { border-bottom: 0; margin-bottom: 0; }

.ml-zeile { display: flex; align-items: center; gap: 11px; }
.ml-rang {
  flex: none; width: 14px;
  font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums; text-align: right;
}
.ml-bild {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  padding: 3px;
}
.ml-leer {
  display: grid; place-items: center;
  background: var(--inset); color: var(--text-3);
  font-size: 12px; font-weight: 650;
  padding: 0;
}
.ml-zeile .r-main { flex: 1; min-width: 0; }
.ml-balken {
  flex: none; width: 90px; height: 5px;
  border-radius: 999px; background: var(--inset);
  overflow: hidden;
}
.ml-balken i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
}
.ml-zeile .r-val { flex: none; }

@media (max-width: 900px) {
  .ab-banner { flex-direction: column; align-items: stretch; gap: 16px;
               padding: 20px; text-align: left; }
  .ab-zeichen { width: 56px; height: 56px; }
  .ab-zeichen i { font-size: 24px; }
  .ab-text h2 { font-size: 20px; }
  .ab-seite { min-width: 0; }
  .svl-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .svl-feld, .svl-monate { padding-left: 34px; }
  .svl-feld, .svl-feld svg { min-height: 130px; }
  .svl-monate span:nth-child(even) { visibility: hidden; }
  .ml-balken { display: none; }
  .glk-klappe { width: calc(100vw - 20px); }
  .vas-fenster { max-height: calc(100vh - 100px); }
  .vas-fenster { max-height: calc(100svh - 100px); }
}

.svb-spalten {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; gap: 6px;
  height: 190px;
  border-bottom: 1px solid var(--line);
}
.svb-netz {
  position: absolute; left: 44px; right: 0;
  border-top: 1px dashed color-mix(in srgb, var(--text-3) 22%, transparent);
  pointer-events: none;
}
.svb-spalte {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-end; justify-content: center;
  height: 100%;
  cursor: pointer;
}
.svb-spalte i {
  display: block;
  width: min(30px, 72%);
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 92%, #fff),
    color-mix(in srgb, var(--accent) 55%, transparent));
  box-shadow: 0 -4px 16px -6px color-mix(in srgb, var(--accent) 45%, transparent);
  transform-origin: bottom;
  animation: svbWachsen .55s var(--ease-out) backwards;
  transition: filter .15s, box-shadow .15s;
}
@keyframes svbWachsen { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .svb-spalte i { animation: none; } }
.svb-spalte i.leer {
  height: 3px;
  background: var(--line-strong);
  box-shadow: none; border-radius: 2px;
}
.svb-spalte i.bester {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 45%, #fff), var(--accent));
  box-shadow: 0 -6px 22px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}
.svb-spalte.jetzt i:not(.leer) {
  outline: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}
.svb-spalte:hover i:not(.leer),
.svb-spalte.aktiv i:not(.leer) { filter: brightness(1.12); }
.svb-spalte:hover i.leer,
.svb-spalte.aktiv i.leer { background: var(--text-3); }

.stmb { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.stmb-spalten {
  display: flex; align-items: flex-end; gap: 2px;
  height: 86px;
  border-bottom: 1px dashed var(--line-strong);
  padding-bottom: 1px;
}
.stmb-spalte {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-end; justify-content: center;
  height: 100%;
}
.stmb-spalte i {
  display: block; width: 100%; max-width: 14px;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 90%, #fff),
    color-mix(in srgb, var(--accent) 45%, transparent));
  transform-origin: bottom;
  animation: svbWachsen .45s var(--ease-out) backwards;
  transition: filter .15s;
}
.stmb-spalte:hover i { filter: brightness(1.15); }
.stmb-spalte i.leer {
  height: 2px;
  background: var(--line-strong);
  border-radius: 1px;
}
.stmb-spalte i.bester {
  background: linear-gradient(180deg, #f4e3b8, var(--accent));
  box-shadow: 0 -4px 14px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}

@media (max-height: 820px) {
  .sl-eintrag { padding: 5px 12px; font-size: 13.5px; }
  .sl-gruppe { margin-bottom: 5px; }
  .sl-gruppe + .sl-liste + .sl-gruppe { margin-top: 10px; }
  .sl-fuss { padding: 8px 12px 10px; }
  .slg-verlauf { display: none; }
  .slg-zahl b { font-size: 19px; }
}

.cx-karten { display: grid; gap: 8px; margin: 10px 0 12px; }
.cx-karte {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  transition: border-color .15s;
}
.cx-karte:hover { border-color: var(--line-strong); }
.cx-karte input {
  margin-left: auto; width: 16px; height: 16px;
  accent-color: var(--accent); flex: none;
}
.cx-karte input:disabled { opacity: .4; cursor: not-allowed; }

.cx-zeichen {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.cx-zeichen.vinted { background: #0e6b74; color: #fff; }
.cx-zeichen.ebay {
  background: #26262b; color: #f5f5f7;
  border: 1px solid rgba(255,255,255,.18);
}
.cx-zeichen.kleinanzeigen { background: #1f4d2a; color: #b9e6ae; }

.cx-name {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-weight: 600; font-size: 13px; line-height: 1.2;
}
.cx-stand {
  font-style: normal; font-weight: 500; font-size: 11px;
  color: var(--text-3);
}
.cx-stand.gut { color: var(--green); }

.cx-los { width: 100%; }

.cx-reiter {
  display: flex; gap: 6px; margin: 16px 0 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.cx-tab {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: none;
  color: var(--text-2); font-size: 12.5px; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.cx-tab:hover { color: var(--text); border-color: var(--line-strong); }
.cx-tab.on {
  background: var(--accent-soft); border-color: transparent;
  color: var(--accent); font-weight: 600;
}

.cx-zeile { display: flex; gap: 8px; flex-wrap: wrap; }

.cx-merkmale { display: grid; gap: 8px; margin-top: 14px; }
.cx-merkmal {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; background: var(--surface);
  font-size: 12px; display: flex; flex-direction: column; gap: 6px;
}
.cx-merkmal ul {
  margin: 0; padding-left: 16px; color: var(--text-3);
  display: grid; gap: 2px;
}
.cx-optimiert { color: var(--green); font-weight: 600; font-size: 11.5px; }
.cx-fehlt { color: var(--text-3); font-size: 11.5px; }

.pf-reiter { margin: 0 0 14px; }
.pf-fremd { padding: 26px 18px; }

#reReiter {
  margin: 0;
  padding: 18px 20px 14px;
  border-bottom: 0;
}
#reFremd { margin: 0; }
.pf-fremd a { color: var(--accent); }

.auto-plattformen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 12px 0 4px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); font-size: 13px;
}
.auto-plattformen-titel { font-weight: 600; color: var(--text-2); }
.auto-plattformen label {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.auto-plattformen input { accent-color: var(--accent); width: 15px; height: 15px; }
.auto-plattformen input:disabled { opacity: .45; }

.cx-zeichen {
  background: var(--surface-2); border: 1px solid var(--line);
  color: transparent;
}
.cx-logo { width: 20px; height: 20px; border-radius: 5px; display: block; }
.cx-tab-logo {
  width: 15px; height: 15px; border-radius: 4px;
  vertical-align: -3px; margin-right: 6px; display: inline-block;
}
.cx-merkmal b { display: flex; align-items: center; }

.c-plattformen {
  display: inline-flex; gap: 4px; align-items: center; margin-left: 6px;
}
.c-plattform-logo { width: 14px; height: 14px; border-radius: 4px; display: block; }
.c-plattform { display: block; border-radius: 4px; }
.c-plattform.ist-link { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.c-plattform.ist-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.c-plattform.ist-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.cx-online {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 2px 0 12px; font-size: 13px;
}
.cx-online label {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  color: var(--text-2); white-space: nowrap;
}
.cx-online input[type="checkbox"] {
  accent-color: var(--accent); width: 15px; height: 15px;
}

#invVerkauftPanel[hidden] + .panel { margin-top: 30px; }

.automatik { flex-wrap: wrap; }
.automatik .auto-plattformen { flex-basis: 100%; margin: 16px 0 0; }

.st-monat .stmb { margin-top: auto; }
.st-monat .stm-fuss { margin-top: 14px; }

.kpi { position: relative; overflow: hidden; }
.spark {
  position: absolute; right: 10px; bottom: 8px;
  width: 92px; height: 30px; opacity: .9; pointer-events: none;
}

.tb-sicht { display: flex; align-items: center; gap: 8px; }
.tb-sicht select {
  padding: 7px 10px; border-radius: 9px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); cursor: pointer;
}
.tb-ansicht {
  display: flex; border: 1px solid var(--line); border-radius: 9px;
  overflow: hidden;
}
.tb-a {
  width: 32px; height: 32px; border: 0; background: none;
  color: var(--text-3); font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.tb-a.on { background: var(--accent-soft); color: var(--accent); }
@media (hover: none) { .tb-a { width: 40px; height: 40px; } }

.grid.als-liste { display: flex; flex-direction: column; gap: 8px; }
.inv-zeile { cursor: pointer; align-items: center; gap: 12px; }
.inv-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.inv-bild {
  flex: none; width: 46px; height: 46px; border-radius: 10px;
  object-fit: cover; background: var(--surface-2);
}
.inv-bild-leer { display: block; border: 1px dashed var(--line-strong); }
.inv-status {
  flex: none; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--surface-2); color: var(--text-3);
}
.inv-status.gruen {
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}
.inv-status.gold { background: var(--accent-soft); color: var(--accent); }
.inv-preis { flex: none; min-width: 72px; text-align: right;
             font-variant-numeric: tabular-nums; }

.seiten {
  display: flex; align-items: center; gap: 6px;
  margin: 26px 0 30px; flex-wrap: wrap;
}
#invVerkauftPanel > details > .grid { padding: 4px 20px 22px; }
.seite {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--text-2);
  font-size: 13px; cursor: pointer;
}
.seite:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text); }
.seite.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--auf-accent); font-weight: 700;
}
.seite:disabled { opacity: .35; cursor: default; }
.seiten-stand { margin-left: auto; font-size: 12.5px; color: var(--text-3); }

.hin-zeile { align-items: center; }
.hin-zeile .r-sub { margin-top: 1px; line-height: 1.5; }
.hin-titel {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  line-height: 1.35;
}
.hin-zeichen {
  flex: none; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; line-height: 1;
  background: var(--accent-soft); color: var(--accent);
  font-size: 14px; font-weight: 600;
}
.hin-zeile.warnen .hin-zeichen { background: var(--orange-soft); color: var(--orange); }
.hin-zeile.gut    .hin-zeichen { background: var(--green-soft);  color: var(--green); }
.hin-zeile.weh    .hin-zeichen { background: var(--red-soft);    color: var(--red); }

.hin-zeile[role="button"] { cursor: pointer; transition: background .16s; }
.hin-zeile[role="button"]:hover { background: var(--inset); }
.hin-zeile[role="button"]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.hin-pfeil {
  flex: none; color: var(--text-3); font-size: 14px;
  transition: transform .16s var(--ease-out), color .16s;
}
.hin-zeile[role="button"]:hover .hin-pfeil {
  color: var(--accent); transform: translateX(3px);
}

.finr { display: flex; align-items: center; gap: 30px; padding: 12px 4px 6px; }

.finr-ringe { position: relative; flex: none; width: 190px; height: 190px; }
.finr-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.finr-spur { fill: none; stroke: var(--pf-track); }

.finr-ring {
  fill: none; stroke: var(--pf); stroke-linecap: round;
  transition: stroke-dashoffset 1000ms cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 0 4px var(--pf));
}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .finr-ring {
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pf) 38%, transparent));
  }
}

.finr-mitte {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; text-align: center;
  pointer-events: none;
}
.finr-mitte b {
  font-size: 21px; letter-spacing: -.3px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.finr-mitte span { font-size: 11px; color: var(--text-3); }

.finr-liste { display: grid; gap: 20px; flex: 1; min-width: 0; }

.finr-zeile {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  align-items: center; column-gap: 8px; row-gap: 10px;
  min-width: 0;
}
.finr-punkt {
  flex: none; width: 11px; height: 11px; border-radius: 3px;
  background: var(--pf);
}
.finr-name { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.finr-sub {
  font-style: normal; font-size: 13px; color: var(--text-3);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.finr-geld { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.finr-proz {
  text-decoration: none; font-size: 13px; color: var(--text-3);
  min-width: 44px; text-align: right; font-variant-numeric: tabular-nums;
}

.finr-balken {
  grid-column: 2 / -1; height: 3px; border-radius: 2px;
  background: var(--pf-track); overflow: hidden;
}
.finr-balken i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: var(--pf);
  transition: width 1000ms cubic-bezier(.22, 1, .36, 1);
}

.finr-zeile.ohne .finr-punkt { opacity: .45; }
.finr-zeile.ohne .finr-name { color: var(--text-2); font-weight: 500; }
.finr-zeile.ohne .finr-geld { color: var(--text-3); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .finr-ring, .finr-balken i { transition: none; }
}

@media (max-width: 680px) {
  .finr { flex-direction: column; gap: 22px; }
  .finr-liste { width: 100%; }
}

.c-herz {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--text-3); font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: transform .16s var(--ease-out);
}
.c-herz:hover { color: var(--red); transform: scale(1.12); }
.c-herz.an {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
}
.c-herz.hupf { animation: invHupf .5s var(--ease-out); }
@keyframes invHupf { 30% { transform: scale(1.35); } 60% { transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) { .c-herz.hupf { animation: none; } }
@media (hover: none) { .c-herz { width: 38px; height: 38px; font-size: 16px; } }

.c-details { display: grid; gap: 2px; }
.c-detail {
  color: var(--text-3); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.k-check {
  margin-left: auto; flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line);
  color: var(--text-3); font-size: 12px; font-weight: 700; line-height: 1;
  padding-bottom: 2px;
}
.k-check.gut {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  background: color-mix(in srgb, var(--green-soft) 60%, transparent);
}
.k-check.weh {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red-soft, var(--inset)) 60%, transparent);
}

.seiten-je {
  display: inline-flex; align-items: center; gap: 7px;
  margin-left: 14px; flex: none;
  font-size: 12.5px; color: var(--text-3);
}
.seiten-je select {
  padding: 4px 8px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: inherit; font-size: 12.5px;
  cursor: pointer;
}

.lb-spalten {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
  gap: 20px; align-items: start;
}
.lb-links, .lb-rechts { min-width: 0; display: grid; gap: 20px; }
.lb-links > .panel, .lb-rechts > .panel { margin: 0; }
@media (max-width: 1100px) {
  .lb-spalten { grid-template-columns: 1fr; }
}

.cx-tab-zahl {
  margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 650;
  background: var(--accent-soft); color: var(--accent);
}

.lb-filterzeile { flex-wrap: wrap; gap: 10px; }
.lb-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.lb-f {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid transparent; background: none;
  color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 550;
  cursor: pointer; transition: color .16s, background .16s, border-color .16s;
}
.lb-f:hover { color: var(--text); background: var(--inset); }
.lb-f.on {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--accent-soft); font-weight: 650;
}
.lb-suche {
  flex: 1 1 220px; min-width: 0; padding: 7px 12px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--inset); color: var(--text);
  font: inherit; font-size: 12.5px;
}

.lb-badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 650;
  vertical-align: 1px;
}
.lb-badge.offen      { background: var(--orange-soft); color: var(--orange); }
.lb-badge.versendet  { background: var(--accent-soft); color: var(--accent); }
.lb-badge.zugestellt { background: var(--green-soft);  color: var(--green); }
.lb-badge.problem    { background: var(--red-soft);    color: var(--red); }

.lb-kopieren {
  border: 0; background: none; padding: 0 2px;
  color: var(--text-3); font-size: 12px; cursor: pointer;
  transition: color .16s;
}
.lb-kopieren:hover { color: var(--accent); }

.lb-verlauf {
  padding: 12px 20px 16px 58px;
  border-bottom: 1px solid var(--line);
  background: var(--inset);
  display: grid; gap: 12px;
}
.lb-verlauf-link {
  font-size: 12.5px; color: var(--accent); text-decoration: none;
}
.lb-verlauf-link:hover { text-decoration: underline; }
.lb-schritt {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding-left: 4px;
}
.lb-schritt::before {
  content: ""; position: absolute; left: 9px; top: 16px; bottom: -14px;
  width: 2px; background: var(--line);
}
.lb-schritt:last-child::before { display: none; }
.lb-punkt {
  flex: none; width: 12px; height: 12px; margin-top: 3px;
  border-radius: 50%; border: 2px solid var(--text-3);
  background: var(--surface); position: relative; z-index: 1;
}
.lb-schritt.gut .lb-punkt, .lb-punkt.gut {
  border-color: var(--green); background: var(--green-soft);
}
.lb-schritt-kopf {
  display: flex; gap: 10px; align-items: baseline; font-size: 13px;
}
.lb-schritt-kopf span { color: var(--text-3); font-size: 11.5px; }
.lb-schritt-text { color: var(--text-2); font-size: 12px; margin-top: 1px; }

.lb-verfolgen { display: flex; gap: 8px; }
.lb-verfolgen input {
  flex: 1; min-width: 0; padding: 8px 12px;
  border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--inset); color: var(--text);
  font: inherit; font-size: 12.5px;
}
.lb-verfolgen + .hint { margin-top: 8px; }

.lb-treffer {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--inset); display: grid; gap: 10px;
}
.lb-treffer + .hint { margin-top: 10px; }
.lb-treffer .hint { margin: 0; }
.lb-treffer-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.lb-treffer-kopf b {
  font-size: 13px; font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.lb-treffer-marke {
  flex: none; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 650;
  background: var(--surface); color: var(--text-3);
  border: 1px solid var(--line);
}
.lb-treffer-marke.sicher {
  background: var(--green-soft); color: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
}
.lb-treffer .btn { justify-self: start; }

.lb-traegerwahl {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-3);
}
.lb-traegerwahl select {
  padding: 5px 9px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
}
.lb-verlauf-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.lb-update { padding: 8px 20px; }
.rank-row > .lb-punkt { margin-top: 0; }
.lb-tipps { display: grid; gap: 10px; }
.lb-tipps p {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin: 0;
}
.lb-tipps p span { flex: none; color: var(--accent); }

.zt-gruppe {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--inset); overflow: hidden; flex: 0 0 auto;
}
.zt-knopf {
  border: 0; background: none; padding: 7px 13px;
  color: var(--text-2); font: inherit; font-size: 12px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: color .16s, background .16s;
}
.zt-knopf + .zt-knopf { border-left: 1px solid var(--line); }
.zt-knopf:hover { color: var(--text); }
.zt-knopf.on {
  color: var(--accent); font-weight: 650;
  background: var(--accent-soft);
}

.st-zwei {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 20px; align-items: stretch; margin-bottom: 20px;
}
.st-zwei > .panel { min-width: 0; margin: 0; }
@media (max-width: 1000px) {
  .st-zwei { grid-template-columns: 1fr; }
}

#bestand .k-bild { width: 30px; height: 30px; flex: none; }
#bestand .r-val.green { color: var(--green); }
#bestand .r-val.orange { color: var(--orange); }

.stx-roboter {
  width: 18px; height: 18px; vertical-align: -3.5px;
  margin-right: 8px; color: var(--accent);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.lg-bild-zelle { width: 48px; }
.lg-bild {
  width: 38px; height: 38px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--line); background: var(--inset); display: block;
}
span.lg-bild.leer {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 15px;
}
.lg-zeit { font-variant-numeric: tabular-nums; }
.lg-zeit.lang {
  padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 650;
}
.lg-gut { color: var(--green); }
.lg-weh { color: var(--red); }

.vk-geld { text-align: right; }
.vk-gewinn {
  font-size: 11.5px; font-weight: 650;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.vk-gewinn.gut { color: var(--green); }
.vk-gewinn.weh { color: var(--red); }

.r-val.fin-minus { color: var(--red); }

.az-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; padding: 14px 16px 16px;
}
.az-karte {
  position: relative; overflow: hidden;
  padding: 16px 18px 16px 20px; border-radius: var(--radius-l);
  background: var(--surface); border: 1px solid var(--line);
  display: grid; gap: 10px; align-content: start;
  transition: border-color .16s, box-shadow .16s;
}
.az-karte::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--line-strong);
}
.az-karte.an { border-color: color-mix(in srgb, var(--green) 30%, var(--line)); }
.az-karte.an::before { background: var(--green); }
.az-karte:hover { box-shadow: var(--shadow-2); }
.az-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 14px;
}
.az-kopf b::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: var(--text-3); margin-right: 9px;
  vertical-align: 1px;
}
.az-karte.an .az-kopf b::before {
  background: var(--green); box-shadow: 0 0 0 3px var(--green-soft);
}
.az-status {
  flex: none; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 650;
  background: var(--surface); color: var(--text-3);
  border: 1px solid var(--line);
}
.az-status.an {
  background: var(--green-soft); color: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
}
.az-wd {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 12.5px; color: var(--text-2); line-height: 1.5;
  padding: 8px 10px; border-radius: var(--radius-s); background: var(--inset);
}
.az-wd i {
  flex: none; width: 42px; font-style: normal; font-size: 10px;
  font-weight: 750; letter-spacing: .08em; color: var(--accent);
}

.bw-vergleich {
  position: relative; overflow: hidden; touch-action: none;
  cursor: ew-resize; --pos: 22%;
  border-radius: var(--radius); box-shadow: var(--shadow-2);
}
.bw-bild .bw-vergleich > img { box-shadow: none; }
.bwv-vorher {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.bw-bild .bwv-vorher img {
  width: 100%; height: 100%; max-height: none;
  object-fit: cover; border-radius: 0; box-shadow: none;
}
.bwv-griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 0; }
.bwv-griff::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px;
  width: 2px; background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, .5);
}
.bwv-griff span {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: #444;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: 2px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.bwv-griff span::before { content: "\25C2\25B8"; }
.bw-vergleich:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.bwv-marke {
  position: absolute; top: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  font-style: normal; line-height: 1;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff;
  pointer-events: none;
}
.bwv-vorher .bwv-marke { left: 10px; }
.bwv-marke.rechts { right: 10px; }

.mo-fenster {
  width: min(1180px, 96vw);
  max-height: 92vh; overflow: auto;
  padding: 26px 28px 22px;
  display: grid; gap: 18px; align-content: start;
}

.mo-titelzeile {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.mo-titel h2 { font-size: 30px; letter-spacing: -.02em; margin: 0; }
.mo-unter { margin: 4px 0 0; font-size: 14px; color: var(--text-2); }

.mo-werkzeuge {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; justify-content: flex-end;
}
.mo-live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.mo-live i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  animation: moPuls 2.2s ease-out infinite;
}
.mo-live.weg i { background: var(--text-3); animation: none; }
@keyframes moPuls {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .mo-live i { animation: none; } }

.mo-zeitraum {
  display: flex; gap: 4px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
}
.mo-zr {
  padding: 6px 15px; border: 0; border-radius: 999px;
  background: none; color: var(--text-2);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.mo-zr:hover { color: var(--text); }
.mo-zr.on { background: var(--accent); color: var(--auf-accent); }

.mo-neu {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); cursor: pointer;
}
.mo-neu:hover { color: var(--text); border-color: var(--line-strong); }
.mo-neu svg { width: 18px; height: 18px; }
.mo-neu.dreht svg { animation: moDreh .7s linear; }
@keyframes moDreh { to { transform: rotate(360deg); } }

.mo-kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
}

.mo-zustand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2);
}
.mo-zustand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.mo-zustand.gruen { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.mo-zustand.gruen::before { background: var(--green); }
.mo-zustand.orange { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
.mo-zustand.orange::before { background: var(--orange); }
.mo-zustand.rot { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.mo-zustand.rot::before { background: var(--red); }

.mo-reihe.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mo-inhalt { padding: 12px 20px 16px; }
.mo-sys { display: grid; gap: 0; }
.mo-sys-zeile {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.mo-sys-zeile:last-child { border-bottom: 0; }
.mo-sys-zeile span { color: var(--text-3); flex: none; }
.mo-sys-zeile b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; }
.mo-sys-zeile.orange b { color: var(--orange); }
.mo-sys-zeile.rot b { color: var(--red); }
.mo-sys-zeile.gruen b { color: var(--green); }
.mo-sys-tat { padding-top: 12px; }
.mo-dienst {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.mo-dienst:last-child { border-bottom: 0; }
.mo-dienst-punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.mo-dienst-punkt.gruen { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.mo-dienst-punkt.orange { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.mo-dienst-punkt.grau { background: var(--text-3); }
.mo-dienst-name { font-weight: 600; }
.mo-dienst-text { color: var(--text-3); text-align: right; font-size: 12px; }
.mo-gesch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mo-gesch-zahl { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--radius-s); background: var(--inset); }
.mo-gesch-zahl b { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.mo-gesch-zahl span { font-size: 11px; color: var(--text-3); line-height: 1.35; }
.mo-gesch-zahl i { font-style: normal; color: var(--accent); cursor: help; }
.mo-gesch-intern {
  display: block; margin-top: 3px; font-style: normal;
  font-size: 10.5px; color: var(--text-3);
}
.mo-abos { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.mo-abo {
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-2);
}
.mo-abo b { color: var(--accent); }
.mo-bal-liste { display: grid; gap: 7px; margin-top: 10px; }
.mo-bal { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; }
.mo-bal-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-bal-leiste { height: 7px; border-radius: 999px; background: var(--inset); overflow: hidden; }
.mo-bal-leiste i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.mo-bal b { font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
.mo-er { display: grid; font-size: 12.5px; }
.mo-er-kopf, .mo-er-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) 70px 60px; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
}
.mo-er-kopf { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mo-er-kopf b, .mo-er-zeile b { text-align: right; font-variant-numeric: tabular-nums; }
.mo-er-zeile:last-child { border-bottom: 0; }
.mo-er-zeile.weh b { color: var(--red); }
.mo-on { display: grid; }
.mo-on-zeile {
  display: grid; grid-template-columns: 10px auto minmax(0, 1fr) auto auto; gap: 12px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px;
}
.mo-on-zeile:last-child { border-bottom: 0; }
.mo-on-zeile span { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-on-zeile em { font-style: normal; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.mo-on-seit { font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .mo-reihe, .mo-reihe.drei { grid-template-columns: 1fr; }
  .mo-gesch { grid-template-columns: 1fr; }
}
.mo-fe-liste { display: grid; gap: 6px; padding: 4px 0 2px; }
.mo-fe-zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; background: var(--bg-2);
}
.mo-fe-code {
  flex: none; font-size: 11px; font-weight: 750; color: var(--red);
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  border-radius: 999px; padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.mo-fe-pfad {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 12px; color: var(--text-2);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.mo-fe-zeit { flex: none; font-size: 11.5px; color: var(--text-3);
              font-variant-numeric: tabular-nums; }

.mo-kachel {
  display: grid; gap: 4px; padding: 18px 20px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.mo-kachel.warn { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.mo-k-zeile { display: flex; align-items: center; gap: 12px; }
.mo-k-zeile b {
  font-size: 30px; font-weight: 750; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mo-k-bild {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; color: var(--text-2);
}
.mo-k-bild svg { width: 24px; height: 24px; }
.mo-k-bild.rot { color: var(--red); }
.mo-punkt-gross {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--green); margin: 0 10px 0 10px;
}
.mo-punkt-gross.still { background: var(--text-3); }
.mo-k-titel { font-size: 14px; font-weight: 650; }
.mo-k-unter { font-size: 12px; color: var(--text-3); }
.mo-k-unter.rot { color: var(--red); }
.mo-k-trend { font-size: 12px; font-weight: 600; margin-top: 2px; }
.mo-k-trend.auf { color: var(--green); }
.mo-k-trend.ab { color: var(--orange); }
.mo-k-trend.neutral { color: var(--text-3); }

.mo-karte {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.mo-k-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.mo-k-kopf h3 {
  margin: 0; font-size: 12.5px; font-weight: 750;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-2);
}
.mo-reihe {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px;
}

.mo-wichtig { display: grid; }
.mo-w-zeile {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 15px 20px; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: inherit; font-family: inherit;
  text-align: left; cursor: pointer; width: 100%;
}
.mo-w-zeile:last-child { border-bottom: 0; }
.mo-w-zeile:hover { background: var(--inset); }
.mo-w-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mo-w-punkt.rot { background: var(--red); }
.mo-w-punkt.orange { background: var(--orange); }
.mo-w-punkt.gelb { background: var(--gelb); }
.mo-w-text { font-size: 13.5px; line-height: 1.4; }
.mo-w-knopf {
  padding: 6px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 650;
  border: 1px solid currentColor;
}
.mo-w-knopf.rot { color: var(--red); }
.mo-w-knopf.orange { color: var(--orange); }
.mo-w-knopf.gelb { color: var(--gelb); }
.mo-w-pfeil { color: var(--text-3); font-size: 18px; }
.mo-w-leer { margin: 0; padding: 22px 20px; font-size: 13.5px; color: var(--text-3); }

.mo-legende {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 14px 20px 4px;
}
.mo-l-punkt {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--text-2);
  border: 0; background: none; font-family: inherit; cursor: pointer;
  padding: 2px 0;
}
.mo-l-punkt:hover { color: var(--text); }
.mo-l-punkt.aus { color: var(--text-3); text-decoration: line-through; }
.mo-l-punkt.aus i { background: var(--text-3) !important; }
.mo-l-punkt i { width: 9px; height: 9px; border-radius: 50%; }
.mo-kurve { padding: 4px 12px 12px; }
.mo-kurve svg { width: 100%; height: 230px; display: block; }
.mo-gitter { stroke: var(--line); stroke-width: 1; }
.mo-achse { fill: var(--text-3); font-size: 11px; }

.mo-trichter {
  display: flex; align-items: stretch; gap: 6px;
  padding: 20px; flex-wrap: wrap;
}
.mo-t-stufe {
  flex: 1 1 170px; min-width: 0;
  display: grid; gap: 6px; justify-items: start;
}
.mo-t-bild {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px; margin-bottom: 4px;
}
.mo-t-bild svg { width: 22px; height: 22px; }
.mo-t-name {
  font-size: 11px; font-weight: 750; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3);
}
.mo-t-stufe b {
  font-size: 30px; font-weight: 750; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mo-t-fuss {
  display: flex; align-items: center; gap: 10px;
  width: 100%; margin-top: 6px;
}
.mo-t-pro {
  font-size: 12px; font-weight: 650; color: var(--text-3);
  min-width: 40px;
}
.mo-t-bar {
  flex: 1; height: 6px; border-radius: 999px;
  background: var(--inset); overflow: hidden;
}
.mo-t-bar i { display: block; height: 100%; border-radius: 999px; }
.mo-t-pfeil {
  align-self: center; flex: none; color: var(--text-3);
  font-size: 20px; padding: 0 4px;
}

.mo-tabellenkopf { align-items: center; }
.mo-filter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  flex: 1 1 auto; justify-content: flex-end;
}
.mo-suchfeld {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--inset);
  color: var(--text-3);
}
.mo-suchfeld svg { width: 16px; height: 16px; flex: none; }
.mo-suchfeld input {
  border: 0; background: none; color: var(--text);
  font-size: 13px; font-family: inherit; min-width: 210px;
}
.mo-suchfeld input:focus { outline: none; }
.mo-suchfeld:focus-within { border-color: var(--accent); }
.mo-filter .aw-feld { width: 152px; flex: none; min-width: 0; }

.mo-wahl {
  width: 148px; flex: none;
  padding: 8px 34px 8px 12px; border-radius: 10px;
  border: 1px solid var(--line); background-color: var(--inset);
  color: var(--text-2); font-size: 13px; font-family: inherit;
}
.mo-suchfeld { flex: 0 1 260px; }
.mo-suchfeld input { min-width: 0; width: 100%; }
.mo-filter .btn { flex: none; }

.mo-beta {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; align-items: center; padding: 20px;
}
.mo-beta-zahl { display: flex; align-items: flex-start; gap: 14px; }
.mo-beta-bild {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent);
}
.mo-beta-bild svg { width: 24px; height: 24px; }
.mo-beta-zahl b {
  display: block; font-size: 30px; font-weight: 750; line-height: 1.1;
}
.mo-beta-zahl span { font-size: 13.5px; font-weight: 600; }
.mo-beta-zahl em {
  display: block; margin-top: 4px; font-style: normal;
  font-size: 12px; color: var(--text-3); line-height: 1.45;
}
.mo-beta-neu { display: flex; gap: 10px; flex-wrap: wrap; }
.mo-beta-neu input {
  flex: 1 1 200px; min-width: 0;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--inset);
  color: var(--text); font-size: 13.5px;
}
.mo-beta-neu input:focus { outline: 1px solid var(--accent); }

.mo-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 4px 2px 0; font-size: 12px; color: var(--text-3);
}
.mo-fuss-links { display: inline-flex; align-items: center; gap: 8px; }
.mo-fuss-links svg { width: 14px; height: 14px; }
.mo-fuss-rechts { display: inline-flex; align-items: center; gap: 14px; }
.mo-fuss-knopf {
  border: 0; background: none; color: var(--text-2); cursor: pointer;
  font-family: inherit; font-size: 12px; text-decoration: underline;
  text-underline-offset: 3px;
}
.mo-fuss-knopf:hover { color: var(--text); }

.nu-tabelle { display: grid; }
.nu-kopf, .nu-zeile {
  display: grid;
  grid-template-columns:
    minmax(0, 2.1fr) 84px 118px 82px 98px 90px 96px 104px;
  align-items: center; gap: 10px;
  padding: 13px 18px;
}
.nu-kopf {
  font-size: 11px; font-weight: 750; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--line);
}
.nu-zeile { border-bottom: 1px solid var(--line); font-size: 13.5px; }
.nu-zeile:hover { background: var(--inset); }

.nu-konto { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nu-bild {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent);
  font-style: normal; font-size: 13px; font-weight: 750;
}
.nu-namen { min-width: 0; display: grid; }
.nu-namen strong {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 650; min-width: 0;
}
.nu-wer {
  min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.nu-marke {
  flex: none;
  font-style: normal; font-size: 9.5px; font-weight: 750;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.nu-mail {
  font-size: 12px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nu-abz {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650;
}
.nu-abz.aktiv {
  background: var(--green-soft); color: var(--green);
}
.nu-abz.still {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  color: var(--orange);
}
.nu-abz.offen {
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red);
}
.nu-zuletzt b { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.nu-punkt {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); flex: none;
}
.nu-zahl { font-variant-numeric: tabular-nums; font-weight: 600; }
.nu-sub { display: block; font-size: 11px; color: var(--text-3); font-weight: 400; }
.nu-stellen { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.nu-mehr {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid transparent; background: none;
  color: var(--text-3); font-size: 17px; line-height: 1; cursor: pointer;
}
.nu-mehr:hover { border-color: var(--line); color: var(--text); }

.nu-mehrfeld {
  display: grid; gap: 14px;
  padding: 16px 18px 18px 68px;
  background: var(--inset); border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.nu-schrauben {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
}
.nu-mehrfeld label { display: grid; gap: 4px; color: var(--text-3); }

.nu-fakten {
  display: flex; gap: 26px; flex-wrap: wrap;
  padding-top: 13px; border-top: 1px solid var(--line);
}
.nu-fakt { display: grid; gap: 3px; min-width: 0; }
.nu-fakt i {
  font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}
.nu-fakt b {
  font-weight: 500; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nu-schutz.gut { color: var(--green); }
.nu-schutz.warn { color: var(--orange); }
.nu-mehrfeld select {
  padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 13px; font-family: inherit;
}
.nu-fuss {
  padding: 13px 20px; font-size: 12.5px; color: var(--text-3);
}

.nu-bild.t0 { background: color-mix(in srgb, var(--accent) 17%, transparent); color: var(--accent); }
.nu-bild.t1 { background: color-mix(in srgb, var(--green)  17%, transparent); color: var(--green); }
.nu-bild.t2 { background: color-mix(in srgb, var(--text-2) 14%, transparent); color: var(--text-2); }
.nu-bild.t3 { background: color-mix(in srgb, var(--orange) 17%, transparent); color: var(--orange); }
.nu-bild.t4 { background: color-mix(in srgb, var(--stufe)  17%, transparent); color: var(--stufe); }

.nu-balken {
  display: block; height: 3px; width: 46px; margin: 5px 0 1px;
  border-radius: 999px; background: var(--line); overflow: hidden;
}
.nu-balken i { display: block; height: 100%; background: var(--green); border-radius: 999px; }

.mo-alarm {
  display: flex; align-items: center; gap: 12px; width: 100%;
  margin: 0 0 18px; padding: 13px 18px;
  border: 1px solid; border-radius: var(--radius);
  font-family: inherit; font-size: 14px; text-align: left;
  cursor: pointer; transition: filter .18s;
}
.mo-alarm:hover { filter: brightness(1.04); }
.mo-alarm[hidden] { display: none; }
.mo-al-bild { display: grid; place-items: center; flex: none; }
.mo-al-bild svg { width: 19px; height: 19px; }
.mo-al-text { flex: 1 1 auto; font-weight: 600; }
.mo-al-weiter { flex: none; font-size: 13px; opacity: .85; }

.mo-alarm.rot {
  border-color: color-mix(in srgb, var(--red) 40%, transparent);
  background: color-mix(in srgb, var(--red) 11%, transparent);
  color: var(--red);
}
.mo-alarm.orange {
  border-color: color-mix(in srgb, var(--orange) 42%, transparent);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  color: var(--orange);
}
.mo-alarm.gelb {
  border-color: color-mix(in srgb, var(--gelb) 45%, transparent);
  background: color-mix(in srgb, var(--gelb) 13%, transparent);
  color: var(--gelb);
}

.mo-kachel.warn.orange { border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
.mo-kachel.warn.gelb   { border-color: color-mix(in srgb, var(--gelb) 48%, transparent); }
.mo-k-bild.orange { color: var(--orange); }
.mo-k-bild.gelb   { color: var(--gelb); }
.mo-k-bild.ruhig  { color: var(--green); background: var(--green-soft); }

.mo-w-zahl {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px;
  padding: 0 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 750;
}
.mo-w-zahl[hidden] { display: none; }
.mo-w-zahl.rot    { background: color-mix(in srgb, var(--red) 14%, transparent);    color: var(--red); }
.mo-w-zahl.orange { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); }
.mo-w-zahl.gelb   { background: color-mix(in srgb, var(--gelb) 18%, transparent);       color: var(--gelb); }
.mo-k-unter.orange { color: var(--orange); }
.mo-k-unter.gelb   { color: var(--gelb); }

.mo-ruhig {
  display: grid; justify-items: center; gap: 5px;
  padding: 40px 20px; text-align: center;
}
.mo-ruhig-bild {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px;
  background: var(--green-soft); color: var(--green); margin-bottom: 4px;
}
.mo-ruhig-bild svg { width: 22px; height: 22px; }
.mo-ruhig b { font-size: 14.5px; font-weight: 650; }
.mo-ruhig span { font-size: 12.5px; color: var(--text-3); }

.beta-stand { display: flex; align-items: center; gap: 8px; }
.beta-abz {
  font-style: normal; font-size: 10px; font-weight: 750;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.beta-abz.offen { background: var(--accent-soft); color: var(--accent); }
.beta-abz.ein { background: var(--green-soft); color: var(--green); }

.kk-schalter.mo-lampe {
  background: color-mix(in srgb, var(--green) 22%, transparent);
  color: var(--green);
}

@media (max-width: 1100px) {
  .mo-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mo-reihe { grid-template-columns: minmax(0, 1fr); }
  .mo-beta { grid-template-columns: minmax(0, 1fr); }
  .nu-kopf { display: none; }
  .nu-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px; padding: 14px 16px;
  }
  .nu-konto { grid-column: 1 / -1; }
  .nu-stellen { grid-column: 2; }
  .nu-mehrfeld { padding-left: 16px; }
}

@media (max-width: 620px) {
  .mo-fenster { padding: 18px 14px 16px; gap: 14px; }
  .mo-titel h2 { font-size: 24px; }
  .mo-kacheln { gap: 10px; }
  .mo-alarm { padding: 12px 14px; font-size: 13.5px; }
  .mo-al-weiter { display: none; }
  .mo-filter { justify-content: flex-start; }
  .mo-suchfeld { flex: 1 1 100%; }
  .mo-filter .aw-feld { flex: 1 1 40%; width: auto; }
  .mo-filter .btn { flex: 1 1 40%; }
}

@media (max-width: 640px) {
  .zt-gruppe { max-width: 100%; overflow-x: auto; }
  .zt-knopf { flex: none; }
}

@media (max-width: 700px) {
  .re-kopfzeile { display: none; }
  .re-zeile {
    grid-template-columns: 1fr auto; min-width: 0;
    grid-template-areas:
      "artikel artikel"
      "plattform seit"
      "status status"
      "tat tat";
    gap: 10px 14px; padding: 14px 16px;
  }
  .re-zeile .re-artikel { grid-area: artikel; }
  .re-zeile .re-plattform { grid-area: plattform; }
  .re-zeile .re-seit { grid-area: seit; text-align: right; }
  .re-zeile > div:nth-child(4) { grid-area: status; }
  .re-zeile .re-tat { grid-area: tat; }
  .re-tat .btn { width: 100%; }
}

.k-kopf { min-width: 0; flex-wrap: wrap; }
.k-label { min-width: 0; overflow-wrap: anywhere; }

.aw-feld.aw-jahrwahl { min-width: 112px; }

@media (max-width: 620px) {
  .rank-row, .r-row { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .rank-row > .r-main, .r-row > .r-main { flex: 1 1 100%; }
  .rank-row input.r-datum, .r-row input.r-datum {
    flex: 1 1 130px; width: auto; min-width: 0;
  }
  .r-val { margin-left: auto; }
}

@media (max-width: 700px) {
  .ia-tabs, .cx-reiter {
    max-width: 100%; overflow-x: auto; flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .ia-tabs::-webkit-scrollbar,
  .cx-reiter::-webkit-scrollbar { display: none; }
  .ia-tabs > *, .cx-reiter > * { flex: none; white-space: nowrap; }
}

@media (max-width: 1100px) {
  .svl-kpi i,
  .ui-feld i,
  .ui-tags span,
  .ia-tbadge,
  .ia-marke span,
  .af-kat,
  .svl-y,
  .svl-kpi span,
  .flag,
  .paket,
  .kz-gruppe,
  .abo-marke,
  .gh-marke,
  .hi-fuss,
  .lb-badge,
  .az-wd i,
  .svl-monate,
  .lc-marke span,
  .kz-kopf,
  .re-kopfzeile,
  .stm-verlauf-text,
  .k-label { font-size: 11px; }
}

#sozialFenster { padding: 24px; }
#sozialFenster .soz-kasten {
  width: min(1080px, 100%);
  height: min(700px, calc(100vh - 48px));
  height: min(700px, calc(100svh - 48px));
  display: flex; flex-direction: column;
  border-radius: 20px; border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  overflow: hidden;
  will-change: transform, opacity;
  animation: fenster-auf var(--fenster-auf) var(--fenster-kurve) both;
}
#sozialFenster.zu .soz-kasten {
  animation: fenster-zu var(--fenster-zu) var(--fenster-kurve-zu) both;
}
#sozialFenster.zu {
  animation: schleier-zu var(--fenster-zu) var(--fenster-kurve-zu) both;
}
@media (prefers-reduced-motion: reduce) {
  #sozialFenster .soz-kasten, #sozialFenster.zu .soz-kasten,
  #sozialFenster.zu { animation: none; }
}

.soz-kopf {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.soz-marke {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
}
.soz-marke svg { width: 21px; height: 21px; }
.soz-kopf-text h2 { margin: 0; font-size: 19px; font-weight: 680; letter-spacing: -.02em; }
.soz-kopf-text p { margin: 1px 0 0; color: var(--text-3); font-size: 12px; }

.soz-reiter { display: flex; gap: 4px; margin-left: auto; }
.soz-tab {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  color: var(--text-3); font-size: 13px; font-weight: 560;
  transition: color .15s, background .15s;
}
.soz-tab:hover { color: var(--text); background: var(--surface-2); }
.soz-tab.on { color: var(--accent); background: var(--accent-soft); }
.soz-tab:focus-visible { outline: 2px solid var(--accent); }
.soz-marke-zahl {
  font-style: normal;
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: var(--bg);
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.soz-zu {
  all: unset; cursor: pointer; flex: none;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--text-3); font-size: 13px;
  transition: color .15s, background .15s;
}
.soz-zu:hover { color: var(--text); background: var(--surface-2); }
.soz-zu:focus-visible { outline: 2px solid var(--accent); }

.soz-koerper {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 292px minmax(0, 1fr) 288px;
}
.soz-links, .soz-mitte, .soz-rechts { min-width: 0; min-height: 0; }
.soz-links {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line);
}
.soz-rechts {
  border-left: 1px solid var(--line);
  overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.soz-mitte { display: flex; flex-direction: column; }

.soz-suchzeile { padding: 14px 14px 10px; }
.soz-suche {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--inset);
}
.soz-suche svg {
  width: 16px; height: 16px; flex: none; color: var(--text-3);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.soz-suche input {
  all: unset; flex: 1; min-width: 0; font-size: 13px; color: var(--text);
}
.soz-suche input::placeholder { color: var(--text-3); }

.soz-liste { flex: 1; overflow-y: auto; padding: 0 10px 10px; }
.soz-gruppe {
  padding: 12px 6px 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3);
}
.soz-zeile {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.soz-zeile:hover { background: var(--surface-2); border-color: var(--line); }
.soz-zeile.gewaehlt {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.soz-zeile-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.soz-namenszeile {
  display: flex; align-items: center; gap: 7px; min-width: 0;
  font-size: 13.5px;
}
.soz-namenszeile.mitte { justify-content: center; }
.soz-namenszeile b {
  font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.soz-unten {
  font-size: 11.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.soz-unten.da { color: var(--green); }

.soz-huelle { position: relative; flex: none; display: block; }
.soz-bild {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block;
}
.soz-bild.ohne {
  display: grid; place-items: center;
  background: var(--inset); color: var(--text-2);
  font-size: 14px; font-weight: 650;
}
.soz-huelle.ist-da::after {
  content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--bg-2);
}
.soz-huelle.gross { align-self: center; }
.soz-gross {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover; display: block;
}
.soz-gross.ohne {
  display: grid; place-items: center;
  background: var(--inset); color: var(--text-2);
  font-size: 32px; font-weight: 650;
}
.soz-huelle.gross.ist-da::after { width: 18px; height: 18px; border-width: 3px; }

.soz-zeile-tat { display: flex; gap: 4px; flex: none; opacity: 0; transition: opacity .15s; }
.soz-zeile:hover .soz-zeile-tat, .soz-zeile.gewaehlt .soz-zeile-tat { opacity: 1; }
.soz-mini {
  all: unset; cursor: pointer;
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--text-3); font-size: 13px;
  transition: color .15s, background .15s;
}
.soz-mini:hover { color: var(--text); background: var(--surface-2); }
.soz-mini:focus-visible { outline: 2px solid var(--accent); }
.soz-mini svg { width: 16px; height: 16px; }
.soz-ungelesen {
  flex: none; display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: var(--bg);
  font-size: 10px; font-weight: 700;
}
.soz-anfrage-tat { display: flex; gap: 8px; padding: 0 10px 10px 59px; }
.soz-leer { padding: 22px 14px; color: var(--text-3); font-size: 12.5px; line-height: 1.6; }
.soz-leerkarte {
  display: grid; gap: 5px; justify-items: center; text-align: center;
  margin: 16px 6px; padding: 24px 16px;
  border: 1px dashed var(--line-strong); border-radius: 14px;
}
.soz-leerkarte b { font-size: 14px; }
.soz-leerkarte span { color: var(--text-3); font-size: 12px; }
.soz-hinzu {
  all: unset; cursor: pointer; text-align: center;
  margin: 10px 14px 14px; padding: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 12px; color: var(--accent); font-size: 13px; font-weight: 600;
  transition: background .15s;
}
.soz-hinzu:hover { background: var(--accent-soft); }
.soz-hinzu:focus-visible { outline: 2px solid var(--accent); }

.soz-chat-kopf {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.soz-chat-wer { flex: 1; min-width: 0; display: grid; gap: 1px; }
.soz-zurueck { display: none; }
.soz-verlauf { flex: 1; overflow-y: auto; padding: 16px; }
.soz-nichts {
  flex: 1; display: grid; align-content: center; justify-items: center; gap: 5px;
  padding: 30px; text-align: center;
}
.soz-nichts b { font-size: 15px; }
.soz-nichts span { color: var(--text-3); font-size: 12.5px; }

.soz-schreiben {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px 14px; border-top: 1px solid var(--line);
}
.soz-feld {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 2px;
  padding: 3px 12px 3px 4px;
  border-radius: 999px;
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line);
}
.soz-feld:focus-within {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent);
}
.soz-feld input {
  all: unset; flex: 1; min-width: 0;
  padding: 9px 4px;
  font-size: 13.5px; color: var(--text);
}
.soz-feld input::placeholder { color: var(--text-3); }
.soz-feld input:disabled { opacity: .5; }
.soz-emoji {
  all: unset; cursor: pointer; flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--text-3);
}
.soz-emoji .stb-i { width: 19px; height: 19px; }
.soz-emoji:hover { color: var(--accent); background: var(--surface-2); }
.soz-emoji:focus-visible { outline: 2px solid var(--accent); }
.soz-emoji:disabled { opacity: .45; cursor: default; }
.soz-senden {
  all: unset; cursor: pointer; flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(160deg, var(--accent-press), var(--accent));
  color: var(--auf-accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent);
  transition: transform .14s cubic-bezier(.2, .8, .2, 1);
}
.soz-senden:hover { transform: translateY(-1px); }
.soz-senden:active { transform: scale(.94); }
.soz-senden:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.soz-senden:disabled { opacity: .45; cursor: default; transform: none; }
.soz-senden svg { width: 19px; height: 19px; margin-left: -1px; }
.soz-hinweis { margin: 0; padding: 0 16px 12px; color: var(--text-3); font-size: 11.5px; }

.soz-mitte-kopf { padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.soz-zeitleiste { flex: 1; overflow-y: auto; padding: 8px 10px 14px; }
.soz-ereignis {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 10px; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--text-2);
}
.soz-ereignis:last-child { border-bottom: 0; }
.soz-e-zeichen {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 10px;
  background: var(--inset); color: var(--text-2); font-size: 13px;
}
.soz-e-zeichen.nachricht { background: var(--accent-soft); color: var(--accent); }
.soz-e-zeichen.folgt {
  background: var(--zweit-soft); color: var(--zweit);
}
.soz-e-text { flex: 1; min-width: 0; }
.soz-e-text b { color: var(--text); font-weight: 620; }
.soz-e-wann { flex: none; color: var(--text-3); font-size: 11px; white-space: nowrap; }

.soz-profil {
  display: grid; justify-items: center; gap: 8px;
  padding: 18px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface);
}
.soz-seit { color: var(--text-3); font-size: 12px; }
.soz-taten {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  width: 100%; margin-top: 6px;
}
.soz-taten.eins { grid-template-columns: 1fr; }
.soz-tat {
  all: unset; cursor: pointer; box-sizing: border-box;
  display: grid; justify-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); font-size: 11.5px; text-align: center;
  transition: color .15s, background .15s, border-color .15s;
}
.soz-tat:hover { color: var(--text); border-color: var(--line-strong); }
.soz-tat:focus-visible { outline: 2px solid var(--accent); }
.soz-tat svg { width: 19px; height: 19px; }
.soz-tat.an {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.soz-block {
  padding: 14px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface);
}
.soz-block-titel {
  font-size: 12px; font-weight: 650; color: var(--text-3); margin-bottom: 8px;
}
.soz-fakt {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0; font-size: 12.5px; color: var(--text-2);
}
.soz-fakt i {
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--inset); color: var(--accent);
}
.soz-fakt i .stb-i { width: 15px; height: 15px; }
.soz-ueber { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.6; }

@media (max-width: 980px) {
  .soz-koerper { grid-template-columns: 268px minmax(0, 1fr); }
  .soz-rechts { display: none; }
}
@media (max-width: 720px) {
  #sozialFenster { padding: 8px; }
  #sozialFenster .soz-kasten { height: calc(100vh - 16px); border-radius: 14px; }
  #sozialFenster .soz-kasten { height: calc(100svh - 16px); border-radius: 14px; }
  .soz-koerper { grid-template-columns: minmax(0, 1fr); }
  .soz-links { border-right: 0; }
  .soz-kopf { flex-wrap: wrap; }
  .soz-reiter { order: 3; width: 100%; margin-left: 0; overflow-x: auto; }
  .soz-zurueck { display: grid; }
}

@media (max-width: 640px) {

  .fo-leiste { gap: 10px; }
  .fo-sortierung { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .fo-schalter { min-height: 36px; }
  .fo-kopf { flex-wrap: wrap; }
  .fo-kopf .kopf-knoepfe { width: 100%; }
  .fo-kopf .kopf-knoepfe .btn { flex: 1; justify-content: center; }

  .fo-stimme { min-width: 40px; }
  .fo-stimme .fo-daumen { min-height: 34px; min-width: 34px; }
  .fo-person { min-height: 32px; }
  .fo-koepfe { display: none; }
  .fo-regung { min-width: 0; }
  .fo-zeile { gap: 10px; padding: 12px; }

  .glk-klappe { width: calc(100vw - 16px); }
  .glk-tab { height: 34px; }
  .glk-nurneu, .glk-gelesen, .glk-zu { height: 36px; }
  .glk-zu { width: 36px; }
  .glk-gelesen > span { display: none; }
  .glk-vorschau { display: none; }
  .glk-zeile.mit-vorschau { grid-template-columns: 42px minmax(0, 1fr) auto; }

  .finr-ringe { width: 160px; height: 160px; }
  .finr-liste { gap: 16px; }

  .spf-kopf { padding: 16px 14px 12px; }
  .spf-karte { margin: 0 12px 12px; padding: 14px; }
  .spf-tipp { margin: 0 12px 14px; }
  .spf-zu { width: 38px; height: 38px; }
  #spielFenster .sj-stand { padding: 12px; }
  #spielFenster .sj-kopf { flex-wrap: wrap; }

  .soz-mini { width: 36px; height: 36px; }
  .soz-zu { width: 38px; height: 38px; }
  .soz-tab { min-height: 36px; }
  .soz-suche { padding: 11px 12px; }
  .soz-zeile { padding: 11px 10px; }
  .soz-zeile-tat { opacity: 1; }
  .soz-schreiben { padding: 10px 12px; }
  .soz-senden { width: 44px; height: 44px; }

  .insp-head { padding: 14px 14px 12px; }
  .insp-foot { padding: 12px 14px; flex-wrap: wrap; gap: 10px; }
  .insp-foot .btn { min-height: 40px; }
  .cx-tab { min-height: 36px; }
}

@media (hover: none) and (pointer: coarse) {
  .fo-stimme .fo-daumen, .glk-tab, .soz-tab { min-height: 34px; }
  .glk-zu, .soz-zu, .soz-mini, .spf-zu { min-width: 36px; min-height: 36px; }
}

:root {
  --ease-sanft: cubic-bezier(.22, 1, .36, 1);
  --takt: 90ms;                    /* Grundtakt der Staffelung */
}

[data-rein="scale"]  { transform: translateY(14px) scale(.975); }
[data-rein="links"]  { transform: translateX(-26px); }
[data-rein="rechts"] { transform: translateX(26px); }
[data-rein="weich"]  { transform: none; }
[data-rein="weit"]   { transform: translateY(38px); }
[data-rein].da       { transform: none; }

[data-rein="scale"], [data-rein="weit"] {
  transition-duration: .8s;
  transition-timing-function: var(--ease-sanft);
}

[data-staffel] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .62s var(--ease-sanft), transform .62s var(--ease-sanft);
  transition-delay: calc(var(--n, 0) * var(--takt));
}
[data-staffel].da > *,
[data-rein].da [data-staffel] > * {
  opacity: 1;
  transform: none;
}

html:not(.bewegt) [data-staffel] > * { opacity: 1; transform: none; }

html.bewegt .sx-hero .anspruch,
html.bewegt .sx-hero h1,
html.bewegt .sx-hero .sx-lede,
html.bewegt .sx-hero .sx-tat,
html.bewegt .sx-hero .sx-zusage,
html.bewegt .sx-hero .sx-hero-bild {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .46s var(--ease-sanft), transform .46s var(--ease-sanft);
}
html.bewegt .sx-hero .anspruch  { transition-delay: .03s; }
html.bewegt .sx-hero h1         { transition-delay: .09s; }
html.bewegt .sx-hero .sx-lede   { transition-delay: .16s; }
html.bewegt .sx-hero .sx-tat    { transition-delay: .23s; }
html.bewegt .sx-hero .sx-zusage { transition-delay: .30s; }

html.bewegt .sx-hero .sx-hero-bild {
  transform: translateY(26px) scale(.965);
  transition-delay: .19s;
  transition-duration: .62s;
}

html.bewegt .sx-hero.los .anspruch,
html.bewegt .sx-hero.los h1,
html.bewegt .sx-hero.los .sx-lede,
html.bewegt .sx-hero.los .sx-tat,
html.bewegt .sx-hero.los .sx-zusage,
html.bewegt .sx-hero.los .sx-hero-bild {
  opacity: 1;
  transform: none;
}

.sx-hero-bild[data-szene] .ui-rahmen {
  will-change: transform;
  transform: translate3d(0, calc((var(--fort, .5) - .5) * -26px), 0);
}

html.bewegt .sx-hero .ui-nav-punkt,
html.bewegt .sx-hero .ui-kpi,
html.bewegt .sx-hero .ui-tafel,
html.bewegt .sx-hero .ui-zeile {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ease-sanft), transform .5s var(--ease-sanft);
}
html.bewegt .sx-hero.los .ui-nav-punkt,
html.bewegt .sx-hero.los .ui-kpi,
html.bewegt .sx-hero.los .ui-tafel,
html.bewegt .sx-hero.los .ui-zeile {
  opacity: 1;
  transform: none;
  transition-delay: calc(.72s + var(--n, 0) * 55ms);
}

html.bewegt .sx-hero .ui-balken i {
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform .9s var(--ease-sanft);
}
html.bewegt .sx-hero.los .ui-balken i {
  transform: scaleY(1);
  transition-delay: calc(1.05s + var(--n, 0) * 60ms);
}

.sx-preis,
.sx-schritt,
.sx-karte,
.sx-fuer {
  transition: transform .34s var(--ease-sanft),
              box-shadow .34s var(--ease-sanft),
              border-color .34s var(--ease-sanft);
}
.sx-preis:hover,
.sx-schritt:hover,
.sx-karte:hover,
.sx-fuer:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.sx-preis.pro:hover { transform: translateY(-7px); }

.sx-knopf {
  transition: transform .26s var(--ease-sanft),
              box-shadow .26s var(--ease-sanft),
              filter .26s var(--ease-sanft);
}
.sx-knopf:hover {
  transform: translateY(-2px) scale(1.018);
  box-shadow: var(--shadow-3);
  filter: brightness(1.04);
}
.sx-knopf:active { transform: translateY(0) scale(.995); }

.sx-nebenweg span {
  display: inline-block;
  transition: transform .26s var(--ease-sanft);
}
.sx-nebenweg:hover span { transform: translateX(4px); }

.ui-zeile, .ui-kpi, .ui-nav-punkt {
  transition: background .25s var(--ease-sanft),
              transform .25s var(--ease-sanft);
}
.ui-rahmen:hover .ui-kpi { transform: translateY(-1px); }

.faq details > *:not(summary) {
  animation: faqAuf .34s var(--ease-sanft) both;
}
@keyframes faqAuf {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq summary { transition: color .22s var(--ease-sanft); }

@media (prefers-reduced-motion: reduce) {
  html.bewegt .sx-hero .anspruch,
  html.bewegt .sx-hero h1,
  html.bewegt .sx-hero .sx-lede,
  html.bewegt .sx-hero .sx-tat,
  html.bewegt .sx-hero .sx-zusage,
  html.bewegt .sx-hero .sx-hero-bild,
  html.bewegt .sx-hero .ui-nav-punkt,
  html.bewegt .sx-hero .ui-kpi,
  html.bewegt .sx-hero .ui-tafel,
  html.bewegt .sx-hero .ui-zeile,
  [data-staffel] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.bewegt .sx-hero .ui-balken i { transform: scaleY(1) !important; }
  .sx-hero-bild[data-szene] .ui-rahmen { transform: none !important; }
  .faq details > *:not(summary) { animation: none; }
}

.schau {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  transition: box-shadow .45s var(--ease-sanft),
              transform .45s var(--ease-sanft);
}
.schau:hover { box-shadow: var(--shadow-3); }

.schau-leiste {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.schau img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top left;
}

.schau[data-szene] img {
  will-change: transform;
  transform: translate3d(0, calc((var(--fort, .5) - .5) * -14px), 0)
             scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .schau[data-szene] img { transform: none; }
}

.zeigerpunkt, .zeigerring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;          /* nie im Weg stehen */
  z-index: 9999;
  opacity: 0;
  transition: opacity .3s var(--ease-sanft);
}
.zeigerpunkt {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
}
.zeigerring {
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: opacity .3s var(--ease-sanft),
              width .28s var(--ease-sanft),
              height .28s var(--ease-sanft),
              margin .28s var(--ease-sanft),
              border-color .28s var(--ease-sanft),
              background .28s var(--ease-sanft);
}
html.zeiger-da .zeigerpunkt,
html.zeiger-da .zeigerring { opacity: 1; }

html.zeiger-greift .zeigerring {
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
html.zeiger-greift .zeigerpunkt { opacity: .35; }

html.zeiger-druck .zeigerring {
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .zeigerpunkt, .zeigerring { display: none !important; }
}

.sx-nachsatz {
  margin: 26px auto 0;
  max-width: 58ch;
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.65;
}

.ui-echt .ui-inhalt { display: grid; gap: 10px; padding: 12px; }
.ui-echt .ui-kpi { padding: 9px 10px; gap: 4px; }

.ui-kpi-u {
  color: var(--text-3); font-size: 9px; line-height: 1.35;
}
.ui-kpi.gold .ui-kpi-w { color: var(--accent); }
.ui-kpi.gold {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--accent) 7%, var(--surface)),
              var(--surface));
}
.ui-kpi.gut .ui-kpi-w { color: var(--green, #4ade80); }

.ui-echt .ui-kacheln {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.ui-echt .ui-kachel {
  position: relative;
  padding: 7px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: var(--surface);
  display: grid; gap: 6px;
}
.ui-echt .ui-kachel .ui-marke {
  position: absolute; top: 12px; left: 12px;
}
.ui-kachel-text {
  display: grid; gap: 2px;
  color: var(--text-2); font-size: 9.5px; font-weight: 600;
  line-height: 1.25;
}
.ui-kachel-text i {
  color: var(--text-3); font-size: 9px; font-weight: 500; font-style: normal;
  font-variant-numeric: tabular-nums;
}

.ui-tafel-kopf i {
  float: right; font-style: normal; font-weight: 500;
  letter-spacing: 0; text-transform: none; opacity: .8;
}
.ui-linie.zwei svg { height: 92px; }
.ui-flaeche {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
  stroke: none;
}
.ui-kurve { fill: none; stroke-width: 2.2; vector-effect: non-scaling-stroke;
            stroke-linecap: round; stroke-linejoin: round; }
.ui-kurve.umsatz { stroke: var(--accent); }
.ui-kurve.gewinn {
  stroke: color-mix(in srgb, var(--accent) 45%, var(--text-3));
  stroke-dasharray: 5 3;
}

.ui-legende {
  display: flex; gap: 12px; margin-top: 8px;
  font-size: 9px; color: var(--text-3);
}
.ui-legende b { font-weight: 600; display: inline-flex; align-items: center;
                gap: 5px; }
.ui-legende b::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
}
.ui-legende b.umsatz::before { background: var(--accent); }
.ui-legende b.gewinn::before {
  background: color-mix(in srgb, var(--accent) 45%, var(--text-3));
}

.ui-plattformen {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px;
  align-items: center;
}
.ui-plattformen .ui-tafel-kopf { grid-column: 1 / -1; margin-bottom: 2px; }
.ui-ring { position: relative; display: grid; place-items: center; }
.ui-ring svg { width: 92px; height: 92px; transform: rotate(-90deg); }
.ui-ring circle { fill: none; stroke-width: 3.4; }
.ui-ring-grund { stroke: color-mix(in srgb, var(--text) 9%, transparent); }
.ui-ring-teil {
  stroke: var(--accent);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}
.ui-ring-wert {
  position: absolute;
  color: var(--text); font-size: 13px; font-weight: 680;
  font-variant-numeric: tabular-nums;
}
.ui-anteile { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ui-anteile li {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; color: var(--text-2);
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.ui-anteile li:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-anteile b {
  margin-left: auto; font-weight: 620; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ui-anteile i {
  width: 7px; height: 7px; border-radius: 2px; flex: none;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}
.ui-anteile i.vinted { background: var(--accent); }
.ui-anteile i.ebay { background: color-mix(in srgb, var(--accent) 55%, transparent); }

@media (max-width: 560px) {
  .ui-echt .ui-kacheln { grid-template-columns: repeat(2, 1fr); }
  .ui-plattformen { grid-template-columns: 1fr; justify-items: center; }
  .ui-anteile { width: 100%; }
}

.sx-karte,
.sx-preis,
.sx-schritt,
.sx-schritte > li,
.ui-echt {
  position: relative;
  isolation: isolate;
}

.sx-karte::after,
.sx-preis::after,
.sx-schritte > li::after,
.ui-echt::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background-image: linear-gradient(
    105deg,
    transparent 40%,
    color-mix(in srgb, var(--accent) 9%, transparent) 47%,
    color-mix(in srgb, #fff 14%, transparent) 50%,
    color-mix(in srgb, var(--accent) 9%, transparent) 53%,
    transparent 60%);
  background-size: 220% 100%;
  background-position: 130% 0;
  background-repeat: no-repeat;
  opacity: 0;
  transition: background-position 0s .8s, opacity .3s;
}
.sx-karte:hover::after,
.sx-preis:hover::after,
.sx-schritte > li:hover::after,
.ui-echt:hover::after {
  opacity: 1;
  background-position: -30% 0;
  transition: background-position .8s var(--ease-sanft), opacity .25s;
}

.sx-schritte > li {
  transition: transform .34s var(--ease-sanft),
              box-shadow .34s var(--ease-sanft),
              border-color .34s var(--ease-sanft);
}
.sx-schritte > li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.ui-echt {
  transition: transform .4s var(--ease-sanft),
              box-shadow .4s var(--ease-sanft);
}
.ui-echt:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-3), var(--shadow-2);
}

.ui-echt .ui-kpi,
.ui-echt .ui-kachel {
  transition: transform .25s var(--ease-sanft),
              border-color .25s var(--ease-sanft);
}
.ui-echt .ui-kpi:hover,
.ui-echt .ui-kachel:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

@media (prefers-reduced-motion: reduce) {
  .sx-karte::after, .sx-preis::after,
  .sx-schritte > li::after, .ui-echt::after { display: none; }
  .sx-schritte > li:hover, .ui-echt:hover,
  .ui-echt .ui-kpi:hover, .ui-echt .ui-kachel:hover { transform: none; }
}

.rw-sprache {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 2px; gap: 2px;
  background: var(--surface);
}
.rw-sprache a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: 3px 7px;
  border-radius: 999px;
  color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-decoration: none;
  transition: color .2s var(--ease-sanft), background .2s var(--ease-sanft);
}
.rw-sprache a:hover { color: var(--text); }
.rw-sprache a.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.rw-sprache a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

@media (max-width: 520px) {
  .rw-sprache a { min-width: 26px; padding: 3px 5px; font-size: 10px; }
}

.sl-wie {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
  color: var(--text-3);
}

.rw-sprachklappe { position: relative; }
.rw-sprachklappe > summary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; list-style: none;
  transition: border-color .2s var(--ease-sanft),
              background .2s var(--ease-sanft);
}
.rw-sprachklappe > summary::-webkit-details-marker { display: none; }
.rw-sprachklappe > summary::marker { content: ""; }
.rw-sprachklappe > summary:hover { border-color: var(--line-strong); }
.rw-sprachklappe > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.rw-fahne-rund { display: inline-flex; flex: none; line-height: 0; }
.rw-fahne { display: block; border-radius: 50%; }

.rw-pfeilchen {
  width: 0; height: 0; margin-left: 1px;
  border: 4px solid transparent;
  border-top-color: var(--text-3);
  transform: translateY(2px);
  transition: transform .22s var(--ease-sanft);
}
.rw-sprachklappe[open] > summary .rw-pfeilchen {
  transform: translateY(-2px) rotate(180deg);
}

.rw-sprachliste {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 168px; padding: 5px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-3);
  display: grid; gap: 2px;
  animation: sprachAuf .18s var(--ease-sanft) both;
}
@keyframes sprachAuf {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.rw-sprachliste a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-s);
  color: var(--text-2); font-size: 13px; text-decoration: none;
  transition: background .18s var(--ease-sanft), color .18s var(--ease-sanft);
}
.rw-sprachliste a:hover { background: var(--inset); color: var(--text); }
.rw-sprachliste a.on { color: var(--text); font-weight: 600; }
.rw-haken { margin-left: auto; color: var(--accent); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .rw-sprachliste { animation: none; }
  .rw-pfeilchen { transition: none; }
}

.rw-sprachklappe > summary b {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  color: var(--text-2);
}
.rw-sprachklappe > summary:hover b { color: var(--text); }

.nur-lesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

html.bewegt .in-woertern .wort {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .62s var(--ease-sanft), transform .62s var(--ease-sanft);
  transition-delay: calc(var(--w, 0) * 38ms);
}
html.bewegt .sx-hero.los .in-woertern .wort,
html.bewegt [data-rein].da .in-woertern .wort,
html.bewegt .in-woertern.da .wort {
  opacity: 1;
  transform: none;
}

html.bewegt .sx-hero h1.in-woertern {
  opacity: 1;
  transform: none;
  transition: none;
}

.sx-abschnitt, .sx-zeile { position: relative; }
.sx-schein {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: -12%; left: 50%;
  width: min(920px, 120%);
  aspect-ratio: 2 / 1;
  transform: translate3d(-50%, calc((var(--fort, .5) - .5) * 46px), 0);
  background: radial-gradient(ellipse at center,
              color-mix(in srgb, var(--accent) 13%, transparent) 0%,
              transparent 68%);
  opacity: .55;
  filter: blur(12px);
}
.sx-abschnitt > *:not(.sx-schein),
.sx-zeile > *:not(.sx-schein) { position: relative; z-index: 1; }

:root:not([data-theme="dark"]) .sx-schein { opacity: .38; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sx-schein { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  html.bewegt .in-woertern .wort {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .sx-schein { display: none; }
}

html.woerter-frei .in-woertern .wort {
  opacity: 1 !important;
  transform: none !important;
}

.sp-knopf {
  display: block;
  margin-top: auto;
  padding-top: 11px; padding-bottom: 11px;
  text-align: center;
  transition: transform .26s var(--ease-sanft),
              box-shadow .26s var(--ease-sanft),
              filter .26s var(--ease-sanft);
}
.sp-knopf:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  filter: brightness(1.04);
}
.sp-knopf:active { transform: translateY(0); }

.sx-preis { display: flex; flex-direction: column; }

.sp-fuss + .sp-knopf { margin-top: 16px; }

@media (min-width: 760px) {
  .rw-huelle {
    padding: 5px 7px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--text) 4%, transparent);
    backdrop-filter: blur(6px);
    gap: 2px;
  }
  .rw-huelle .rw-link {
    padding: 6px 13px;
    border-radius: 999px;
    transition: background .2s var(--ease-sanft), color .2s var(--ease-sanft);
  }
  .rw-huelle .rw-link:hover {
    background: color-mix(in srgb, var(--text) 6%, transparent);
  }
  .rw-huelle .rw-link.on {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-1);
  }
}

.ui-rahmen {
  transition: transform .4s var(--ease-sanft),
              box-shadow .4s var(--ease-sanft);
}
.sx-hero-bild .ui-rahmen:hover { transform: translateY(-3px); }

.sl-zeile, .sx-zahl {
  transition: transform .3s var(--ease-sanft),
              background .3s var(--ease-sanft);
  border-radius: var(--radius-s);
}
.sl-zeile:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.sx-zahl:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .ui-rahmen, .sl-zeile, .sx-zahl { transition: none; }
  .ui-rahmen:hover, .sl-zeile:hover, .sx-zahl:hover { transform: none; }
}

.sx-takt {
  display: inline-flex; align-items: center; gap: 3px;
  margin: 0 auto 26px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
}
.sx-abschnitt > .sx-takt { display: flex; width: max-content; }

.sx-takt a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 999px;
  color: var(--text-3); font-size: 13.5px; font-weight: 600;
  text-decoration: none;
  transition: background .22s var(--ease-sanft), color .22s var(--ease-sanft);
}
.sx-takt a:hover { color: var(--text); }
.sx-takt a.on {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
.sx-takt i {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
:root[data-theme="light"] .sx-takt i { color: var(--accent-press); }

.sp-spar {
  display: block; margin-top: 2px;
  color: var(--green, #4ade80); font-size: 11.5px; font-weight: 600;
}

.sx-preis.zsa-karte {
  flex-direction: row; flex-wrap: wrap; gap: 16px 32px;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}
.zsa-karte .sp-name { color: var(--accent); }
.zsa-karte .sp-kopf {
  flex: 1 1 240px; align-content: start;
  padding-bottom: 0; border-bottom: 0;
}
.zsa-karte .sp-liste { flex: 1.5 1 300px; margin: 0; }
.zsa-karte .sp-liste li::before { background: var(--accent); }
.zsa-zustand { color: var(--text-2); font-weight: 600; }
.zsa-unten {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.zsa-unten .sp-fuss { flex: 1 1 280px; margin: 0; padding: 0; border: 0; }
.zsa-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.zsa-karte .zsa-knoepfe .sp-knopf {
  margin-top: 0; padding-left: 22px; padding-right: 22px;
}

.rw-link.breit { display: none; }
@media (min-width: 1340px) {
  .rw-link.breit { display: inline-flex; }
}

.rw-huelle { overflow: hidden; }
@media (max-width: 999px) {
  .rw-link.mittel { display: none; }
}

html[data-takt="jahr"] .nur-monat { display: none; }
html:not([data-takt="jahr"]) .nur-jahr { display: none; }

.neigt:hover { transform: none; }

.neigt { transition: box-shadow .3s var(--ease-sanft); }

.neigt { transform-style: preserve-3d; }

.neigt:not(.ohne-licht)::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: var(--licht, 0);
  background:
    radial-gradient(circle 60% at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--accent) 15%, transparent) 0%,
      color-mix(in srgb, var(--accent) 6%, transparent) 34%,
      transparent 62%),
    radial-gradient(circle 45% at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, #fff 5%, transparent) 0%,
      transparent 58%);
}

.neigt > * { z-index: 2; }
.neigt > .neigt-hoch { position: relative; }

.neigt::after { opacity: .55 !important; }

.neigt { box-shadow: var(--shadow-3); }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .neigt {
    transform: none !important;
    box-shadow: none;
  }
  .neigt::before { display: none; }
}

.sx-laufband {
  position: relative;
  overflow-x: hidden;          /* der Rest der Spur bleibt draußen */
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, #000 62%, var(--bg));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--accent) 6%, transparent);
}

.lfb-spur {
  display: flex;
  width: max-content;
  animation: laufband 46s linear infinite;
  will-change: transform;
}
@keyframes laufband {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (hover: hover) and (pointer: fine) {
  .sx-laufband:hover .lfb-spur { animation-play-state: paused; }
}

.lfb-satz { display: flex; align-items: center; flex: none; }

.lfb-punkt {
  display: inline-flex; align-items: center; gap: 9px;
  flex: none;
  padding: 15px 4px;
  color: var(--text-2);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap;
  transition: color .2s var(--ease-sanft), transform .2s var(--ease-sanft);
}
.lfb-punkt i {
  font-style: normal; font-size: 15px; line-height: 1;
  color: var(--accent);
  transition: color .2s var(--ease-sanft),
              text-shadow .2s var(--ease-sanft);
}
.lfb-punkt:hover {
  color: #fff;
  transform: scale(1.02);
}
.lfb-punkt:hover i {
  color: color-mix(in srgb, var(--accent) 70%, #fff);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
}

.lfb-trenner {
  width: 4px; height: 4px; border-radius: 50%; flex: none;
  margin: 0 22px;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.sx-laufband::before,
.sx-laufband::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px;
  z-index: 2; pointer-events: none;
}
.sx-laufband::before {
  left: 0;
  background: linear-gradient(90deg,
              color-mix(in srgb, #000 62%, var(--bg)), transparent);
}
.sx-laufband::after {
  right: 0;
  background: linear-gradient(270deg,
              color-mix(in srgb, #000 62%, var(--bg)), transparent);
}

@media (max-width: 640px) {
  .lfb-punkt { font-size: 11.5px; padding: 12px 3px; gap: 7px; }
  .lfb-trenner { margin: 0 14px; }
  .sx-laufband::before, .sx-laufband::after { width: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .lfb-spur { animation: none; }
  .lfb-satz + .lfb-satz { display: none; }
}

.sx-beweis {
  max-width: var(--breite, 1180px);
  margin: 0 auto;
  padding: 0 24px 44px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 18px 40px;
}
.sx-note.gross { gap: 10px; }
.sx-note.gross .sn-sterne { font-size: 26px; letter-spacing: 3px; }
.sx-note.gross .sn-zahl { font-size: 16px; }
.sx-note.gross .sn-zahl b { font-size: 20px; }

@media (max-width: 700px) {
  .sx-beweis { padding-bottom: 30px; gap: 14px 22px; }
}

.sx-schein { display: none !important; }

.baellchen {
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;        /* nie im Weg */
  overflow: hidden;
}
.baellchen i {
  position: absolute;
  bottom: -8vh;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
              color-mix(in srgb, var(--accent) 85%, #fff) 0%,
              var(--accent) 45%,
              color-mix(in srgb, var(--accent) 40%, transparent) 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0;
  animation: baellchenSteigen linear infinite;
  will-change: transform, opacity;
}

@keyframes baellchenSteigen {
  0%   { transform: translate3d(0, 0, 0);            opacity: 0; }
  12%  {                                             opacity: var(--o, .5); }
  50%  { transform: translate3d(14px, -55vh, 0); }
  88%  {                                             opacity: var(--o, .5); }
  100% { transform: translate3d(-10px, -112vh, 0);   opacity: 0; }
}

:root:not([data-theme="dark"]) .baellchen i { opacity: 0; filter: saturate(.8); }
:root:not([data-theme="dark"]) .baellchen { opacity: .55; }

.baellchen { z-index: -1; }

@media (prefers-reduced-motion: reduce) {
  .baellchen { display: none; }
}

.zeigerring {
  border: 0;
  background: radial-gradient(circle at 35% 35%,
              color-mix(in srgb, var(--accent) 85%, #fff) 0%,
              var(--accent) 42%,
              color-mix(in srgb, var(--accent) 25%, transparent) 100%);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 40%, transparent);
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  opacity: 0;
}
html.zeiger-da .zeigerring { opacity: .75; }

html.zeiger-greift .zeigerring {
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  background: radial-gradient(circle at 35% 35%,
              #fff 0%,
              var(--accent) 40%,
              color-mix(in srgb, var(--accent) 20%, transparent) 100%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
}
html.zeiger-druck .zeigerring {
  width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px;
}

@media (min-width: 760px) {

  .rw-huelle {
    isolation: isolate;
    border-color: color-mix(in srgb, var(--text) 13%, transparent);
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--text) 7%, transparent),
        color-mix(in srgb, var(--text) 2%, transparent));
    backdrop-filter: blur(14px) saturate(155%);
    -webkit-backdrop-filter: blur(14px) saturate(155%);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 13%, transparent),
      0 6px 22px -14px rgba(0,0,0,.6);
  }
  :root[data-theme="light"] .rw-huelle {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, #fff 70%, transparent),
        color-mix(in srgb, var(--text) 3%, transparent));
    box-shadow:
      inset 0 1px 0 #fff,
      0 6px 18px -14px rgba(0,0,0,.35);
  }

  .rw-schieber {
    position: absolute; left: 0; top: 0;
    width: var(--b, 0px); height: var(--h, 0px);
    transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
    border-radius: 999px;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    will-change: transform, width;

    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 30%, transparent),
        color-mix(in srgb, var(--accent) 13%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent),
      inset 0 -1px 0 color-mix(in srgb, #000 16%, transparent),
      0 3px 12px -5px color-mix(in srgb, var(--accent) 45%, transparent);

    transition:
      transform .42s cubic-bezier(.34, 1.26, .48, 1),
      width     .42s cubic-bezier(.34, 1.26, .48, 1),
      height    .28s var(--ease-sanft),
      opacity   .22s ease;
  }
  .rw-huelle.schieber-da .rw-schieber { opacity: 1; }

  .rw-huelle.schieber-folgt .rw-schieber {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 18%, transparent),
        color-mix(in srgb, var(--accent) 7%, transparent));
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  }

  .rw-schieber.ohne-lauf { transition: none; }

  .rw-huelle .rw-link { position: relative; z-index: 1; }
  .rw-huelle .rw-link:hover { background: none; }
  .rw-huelle .rw-link.on {
    background: none;
    box-shadow: none;
    color: var(--text);
    font-weight: 560;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rw-schieber { transition: none; }
}

.zeigerpunkt { display: none !important; }

.zeigerring {
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  border: 0;
  background: radial-gradient(circle at 50% 50%,
              color-mix(in srgb, var(--accent) 70%, transparent) 0%,
              color-mix(in srgb, var(--accent) 34%, transparent) 34%,
              color-mix(in srgb, var(--accent) 10%, transparent) 62%,
              transparent 78%);
  box-shadow: none;
  filter: blur(24px);
  opacity: 0;
  transition: opacity .35s var(--ease-sanft);
}
html.zeiger-da .zeigerring { opacity: .30; }
html.zeiger-greift .zeigerring { opacity: .42; }
html.zeiger-druck .zeigerring { opacity: .48; }

:root[data-theme="light"] html.zeiger-da .zeigerring,
:root[data-theme="light"] .zeigerring { mix-blend-mode: multiply; }
:root[data-theme="light"] html.zeiger-da .zeigerring { opacity: .2; }
:root[data-theme="light"] html.zeiger-greift .zeigerring { opacity: .28; }

.sx-vertrauen {
  max-width: var(--breite, 1180px);
  margin: 0 auto;
  padding: 18px 24px 56px;
}

.sn-block {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  text-align: center;
}

.sn-sterne.gross {
  display: flex; justify-content: center; align-items: center;
  gap: 14px;
  line-height: 1;
}
.sn-sterne.gross i {
  font-style: normal;
  font-size: clamp(30px, 3.4vw, 42px);
  color: var(--accent);
  text-shadow:
    0 0 18px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 42px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: transform .25s var(--ease-sanft),
              text-shadow .25s var(--ease-sanft),
              color .25s var(--ease-sanft);
}
.sn-sterne.gross i.leer {
  color: color-mix(in srgb, var(--accent) 24%, transparent);
  text-shadow: none;
}
.sn-sterne.gross:hover i {
  color: color-mix(in srgb, var(--accent) 82%, #fff);
  text-shadow:
    0 0 22px color-mix(in srgb, var(--accent) 55%, transparent),
    0 0 54px color-mix(in srgb, var(--accent) 24%, transparent);
}
.sn-sterne.gross:hover i.leer {
  color: color-mix(in srgb, var(--accent) 30%, transparent);
  text-shadow: none;
}

.sn-wert {
  margin: 0;
  color: var(--text-3);
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 600;
  letter-spacing: -.01em;
}
.sn-wert b {
  color: #fff;
  font-size: clamp(32px, 3.4vw, 44px); font-weight: 700;
  letter-spacing: -.03em;
  vertical-align: -.04em;
}
:root[data-theme="light"] .sn-wert b { color: var(--text); }

.sn-lesen {
  color: var(--accent); text-decoration: none;
  font-size: 15px; font-weight: 600;
  padding: 4px 2px;
  transition: color .2s var(--ease-sanft),
              transform .2s var(--ease-sanft),
              text-shadow .2s var(--ease-sanft);
}
.sn-lesen:hover {
  color: color-mix(in srgb, var(--accent) 72%, #fff);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-1px);
}

html.bewegt .sn-block > * {
  opacity: 0;
  transform: scale(.9) translateY(10px);
}
html.bewegt .sn-block.an > * {
  animation: snAuftritt .7s cubic-bezier(.22, 1, .36, 1) forwards;
}
.sn-block.an .sn-wert  { animation-delay: .14s; }
.sn-block.an .sn-lesen { animation-delay: .26s; }

@keyframes snAuftritt {
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 640px) {
  .sx-vertrauen { padding: 10px 20px 40px; }
  .sn-sterne.gross { gap: 10px; }
  .sn-sterne.gross i { font-size: clamp(26px, 7.6vw, 32px); }
}

@media (prefers-reduced-motion: reduce) {
  html .sn-block > *, html.bewegt .sn-block > * {
    opacity: 1; transform: none;
  }
  html.bewegt .sn-block.an > * { animation: none; }
}

.abt-takt {
  display: inline-flex; align-items: center; gap: 3px;
  margin: 0 20px 14px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--inset);
}
.abt-knopf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px; border-radius: 999px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-3); font-family: inherit;
  font-size: 13.5px; font-weight: 600;
  transition: background .22s var(--ease-sanft), color .22s var(--ease-sanft);
}
.abt-knopf:hover { color: var(--text); }
.abt-knopf.on {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
}
.abt-knopf i {
  font-style: normal; font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
.abt-knopf i:empty { display: none; }

.abo-spar {
  display: block; margin: -4px 0 6px;
  color: var(--green, #4ade80); font-size: 11.5px; font-weight: 600;
}

.abo-karte.gewaehlt {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

body.anmeldeseite.an-geteilt {
  display: block;
  place-items: initial;
  overflow-x: hidden;
  overflow-y: auto;
}

.an-buehne {
  position: relative; z-index: 1;
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

.an-spalte { display: flex; flex-direction: column; justify-content: center; }

.an-links {
  padding: 40px 24px 28px;
  align-items: center;
}
.an-links > .an-karte,
.an-links > .an-fuss { width: min(430px, 100%); }
.an-links > .an-fuss { margin-top: 22px; }

.an-rechts {
  padding: 44px 28px 56px;
  border-top: 1px solid var(--line);
}
.an-schau { width: min(560px, 100%); margin: 0 auto; }

.an-schild {
  display: inline-flex; align-items: center;
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 12px; font-weight: 650; letter-spacing: .04em;
}
.an-schau-titel {
  margin: 18px 0 10px;
  font-size: clamp(28px, 3.2vw, 40px); font-weight: 680;
  line-height: 1.08; letter-spacing: -.03em;
  text-wrap: balance;
}
.an-schau-titel b { color: var(--accent); font-weight: 680; }
.an-schau-text {
  margin: 0 0 26px; max-width: 46ch;
  color: var(--text-2); font-size: 15px; line-height: 1.6;
}

.an-bild { position: relative; }
.an-bild .ui-rahmen { width: 100%; }
.an-bild::before {
  content: ""; position: absolute; inset: -14% -6% -18% -6%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(58% 52% at 58% 40%,
              color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
  filter: blur(22px);
}
.an-bild-fuss {
  margin: 12px 2px 0; max-width: 48ch;
  color: var(--text-3); font-size: 11.5px; line-height: 1.55;
}

.an-schau-marke {
  margin: 34px 0 16px;
  color: var(--accent);
  font-size: 17px; font-weight: 680; letter-spacing: -.01em;
}
.an-vorteile {
  display: grid; gap: 16px 22px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.an-vorteil {
  display: grid; gap: 3px;
  padding-left: 2px;
}
.an-v-zeichen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent); font-size: 15px; line-height: 1;
}
.an-vorteil b { font-size: 14px; font-weight: 650; }
.an-vorteil span:last-child {
  color: var(--text-3); font-size: 12.5px; line-height: 1.55;
}

@media (min-width: 1080px) {
  .an-buehne { grid-template-columns: 1fr 1fr; }
  .an-links { padding: 40px 40px 40px 32px; }
  .an-rechts {
    border-top: 0;
    border-image: linear-gradient(180deg, transparent,
                  var(--line) 18%, var(--line) 82%, transparent) 1;
    border-left: 1px solid var(--line);
    padding: 40px 40px 40px 46px;
  }
}

@media (max-width: 620px) {
  .an-links { padding: 26px 18px 20px; }
  .an-rechts { padding: 30px 18px 40px; }
  .an-vorteile { grid-template-columns: 1fr; gap: 14px; }
  .an-bild::before { display: none; }
}

.an-feld input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
  outline: none;
}

.bw-karte::after,
.bw-karte.zwei::after {
  opacity: .9;
  background: linear-gradient(90deg,
              transparent,
              color-mix(in srgb, var(--accent) 85%, #fff) 22%,
              var(--accent) 50%,
              color-mix(in srgb, var(--accent) 85%, #fff) 78%,
              transparent);
}

.bw-marke {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.bl-marke.reship {
  background: var(--accent-soft);
  color: var(--accent);
}

.bw-schild {
  display: inline-flex; align-items: center;
  margin-bottom: 14px;
  padding: 6px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  animation: anspruchRein .5s var(--ease-out) both;
}

.bw-kopf h1 b { color: var(--accent); font-weight: inherit; }

.bw-zahlen.mit-punkt {
  display: inline-flex; align-items: center; gap: 8px;
}
.bw-zahlen.mit-punkt::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green, #4ade80);
  box-shadow: 0 0 8px color-mix(in srgb, var(--green, #4ade80) 55%, transparent);
}
.bw-zahlen.mit-punkt.laeuft::before,
.bw-zahlen.mit-punkt.wartung::before {
  background: var(--orange);
  box-shadow: 0 0 8px color-mix(in srgb, var(--orange) 55%, transparent);
}
.bw-zahlen.mit-punkt.geplant::before {
  background: var(--red);
  box-shadow: 0 0 8px color-mix(in srgb, var(--red) 55%, transparent);
}

.bw-karte.bw-angebot:not([href]) { cursor: default; }
.bw-karte.bw-angebot:not([href]):hover {
  transform: none;
  box-shadow: var(--shadow-2);
  border-color: var(--line);
}
.bw-kopfzeile {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 4px;
}
.bw-kopfzeile .bw-zeichen { margin-bottom: 0; }

.bw-wahl.bw-laden {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: auto; margin: 0;
}

html.bewegt .sn-block .sn-sterne.gross i {
  opacity: 0;
  transform: scale(.86) translateY(8px);
}
html.bewegt .sn-block.an .sn-sterne.gross i {
  animation: snAuftritt .6s cubic-bezier(.22, 1, .36, 1) forwards;
}
html.bewegt .sn-block.an .sn-sterne.gross i:nth-child(1) { animation-delay: .00s; }
html.bewegt .sn-block.an .sn-sterne.gross i:nth-child(2) { animation-delay: .09s; }
html.bewegt .sn-block.an .sn-sterne.gross i:nth-child(3) { animation-delay: .18s; }
html.bewegt .sn-block.an .sn-sterne.gross i:nth-child(4) { animation-delay: .27s; }
html.bewegt .sn-block.an .sn-sterne.gross i:nth-child(5) { animation-delay: .36s; }

html.bewegt .sn-block > .sn-sterne.gross {
  opacity: 1; transform: none; animation: none;
}
html.bewegt .sn-block.an .sn-wert  { animation-delay: .46s; }
html.bewegt .sn-block.an .sn-lesen { animation-delay: .56s; }

@media (prefers-reduced-motion: reduce) {
  html .sn-block .sn-sterne.gross i,
  html.bewegt .sn-block .sn-sterne.gross i {
    opacity: 1; transform: none; animation: none;
  }
}

.anmeldeseite .an-blase.b1 {
  background: var(--accent);
  opacity: .3;
  filter: blur(120px);
}
.anmeldeseite .an-blase.b2 {
  background: var(--accent);
  opacity: .16;
  filter: blur(130px);
}
.anmeldeseite .an-blase.b3 { display: none; }
:root[data-theme="light"] .anmeldeseite .an-blase.b1 { opacity: .18; }
:root[data-theme="light"] .anmeldeseite .an-blase.b2 { opacity: .1; }

.an-links, .an-rechts { justify-content: flex-start; }
.an-links  { padding-top: 64px; }
.an-rechts { padding-top: 64px; }

.an-links > .an-karte,
.an-links > .an-fuss { width: min(500px, 100%); }
.an-links > .an-karte { padding: 38px 34px 32px; }
.an-links > .an-karte .an-marke .brand-rund { width: 44px; height: 44px; }
.an-schau { width: min(520px, 100%); margin: 0; }

@media (max-width: 1079px) {
  .an-links { padding-top: 40px; align-items: center; }
  .an-rechts { padding-top: 34px; }
  .an-schau { margin: 0 auto; }
}

.an-liste-marke {
  margin: 26px 0 10px;
  color: var(--text-3); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
}
.an-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.an-liste li {
  display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 10px;
  color: var(--text-2); font-size: 14px; line-height: 1.5;
}
.an-liste li::before {
  content: "✓"; justify-self: center;
  color: var(--green, #4ade80); font-size: 14px; font-weight: 700;
  line-height: 1.45;
}
.an-liste.offen li { color: var(--text-3); }
.an-liste.offen li::before {
  content: "•";
  color: color-mix(in srgb, var(--accent) 80%, transparent);
  font-size: 17px; line-height: 1.2;
}

.an-draht {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(14px);
}
.an-draht-kopf {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 650;
}
.an-draht-kopf i {
  font-style: normal; color: var(--accent); font-size: 14px;
}
.an-draht p {
  margin: 5px 0 0 23px;
  color: var(--text-3); font-size: 13px; line-height: 1.55;
}
.an-draht a { color: var(--accent); text-decoration: none; }
.an-draht a:hover { text-decoration: underline; }

:root[data-theme="light"] .sx-laufband,
:root:not([data-theme="dark"]) .sx-laufband {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--accent) 8%, transparent);
}
:root[data-theme="light"] .sx-laufband::before,
:root:not([data-theme="dark"]) .sx-laufband::before {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 6%, var(--surface)), transparent);
}
:root[data-theme="light"] .sx-laufband::after,
:root:not([data-theme="dark"]) .sx-laufband::after {
  background: linear-gradient(270deg,
              color-mix(in srgb, var(--accent) 6%, var(--surface)), transparent);
}
:root[data-theme="light"] .lfb-punkt:hover,
:root:not([data-theme="dark"]) .lfb-punkt:hover { color: var(--text); }

.sx-laufband:first-of-type { border-top: 0; }

.zeigerpunkt { display: block !important; }

.zeigerpunkt, .zeigerring {
  position: fixed; top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
}
.zeigerpunkt {
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: opacity .25s var(--ease-sanft);
}
.zeigerring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: none;
  box-shadow: none;
  filter: none;
  transition: opacity .25s var(--ease-sanft),
              width .26s var(--ease-sanft),
              height .26s var(--ease-sanft),
              margin .26s var(--ease-sanft),
              border-color .26s var(--ease-sanft),
              background .26s var(--ease-sanft);
}
html.zeiger-da .zeigerpunkt { opacity: 1; }
html.zeiger-da .zeigerring  { opacity: 1; }

html.zeiger-greift .zeigerring {
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
html.zeiger-greift .zeigerpunkt { opacity: .4; }
html.zeiger-druck .zeigerring {
  width: 24px; height: 24px;
  margin: -12px 0 0 -12px;
}

.zeigerpinsel {
  position: fixed; top: 0; left: 0;
  width: 260px; height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%,
              color-mix(in srgb, var(--accent) 70%, transparent) 0%,
              color-mix(in srgb, var(--accent) 34%, transparent) 34%,
              color-mix(in srgb, var(--accent) 10%, transparent) 62%,
              transparent 78%);
  filter: blur(20px);
  transition: opacity .35s var(--ease-sanft);
}
html.zeiger-da .zeigerpinsel { opacity: .22; }
:root[data-theme="light"] .zeigerpinsel { opacity: 0; }
:root[data-theme="light"] html.zeiger-da .zeigerpinsel { opacity: .14; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .zeigerpunkt, .zeigerring, .zeigerpinsel { display: none !important; }
}

.sx-takt, .abt-takt { padding: 5px; gap: 6px; }
.sx-takt a, .abt-knopf { padding: 9px 22px; gap: 10px; }
.sx-takt i, .abt-knopf i { padding: 3px 9px; margin-left: 2px; }
.abt-takt { margin: 4px 20px 18px; }

.sx-abschnitt .st-karte { flex: 1 0 clamp(300px, 30vw, 420px); }
.sx-abschnitt .st-bahn { padding-bottom: 0; }
.sx-note-gross { flex: 0 0 320px; }

@media (max-width: 720px) {
  .sx-note-gross { flex: none; }
}

:root[data-theme="light"] .neigt:not(.ohne-licht)::before,
:root:not([data-theme="dark"]) .neigt:not(.ohne-licht)::before {
  opacity: calc(var(--licht, 0) * .45);
}

.an-fuss .rw-sprachklappe { position: relative; }
.an-fuss .rw-sprachklappe .rw-sprachliste {
  top: auto; bottom: calc(100% + 8px);
}
.an-fuss .rw-sprachklappe summary { padding: 5px 9px; }

.sprachwahl-frei {
  position: fixed; top: 16px; right: 18px; z-index: 40;
}

.abo-fuer {
  margin: -2px 0 4px;
  color: var(--text-3); font-size: 12px; line-height: 1.45;
  min-height: 2.9em;      /* damit die Preise auf einer Linie stehen */
}
.abo-neben {
  display: block; margin-top: 1px;
  color: var(--text-3); font-size: 11.5px;
}
.abo-liste li.aus { color: var(--text-3); }
.abo-liste li.aus::before {
  content: "–"; color: var(--text-3); font-weight: 600;
}
.abo-karte .btn { margin-top: auto; }
.abo-karte .abo-liste { margin-bottom: 14px; }

.fz-recht {
  margin: 18px 0 0;
  text-align: center;
  color: var(--text-3); font-size: 12px;
}

.topbar-actions .rw-sprachklappe { margin-right: 6px; }
.topbar-actions .rw-sprachklappe summary { padding: 6px 10px; }

@media (min-width: 1080px) {
  .an-links { justify-content: stretch; }
  .an-links > .an-karte {
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center;
    width: min(560px, 100%);
    padding: 44px 42px 40px;
  }
  .an-links > .an-fuss { width: min(560px, 100%); }
  .an-schau { width: min(560px, 100%); }
}

@media (min-width: 1080px) {
  .an-links .an-feld { margin-bottom: 16px; }
  .an-links .an-feld input { padding: 13px 15px; font-size: 15px; }
  .an-links .an-schalter { margin-bottom: 22px; }
  .an-links .an-tab { padding: 10px; font-size: 14px; }
  .an-links .btn.primary.big { min-height: 50px; font-size: 15.5px; }
}

.sx-seite .sx-laufband {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

.an-fuss {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 16px;
}
.an-fuss .rw-sprachklappe summary {
  padding: 4px 10px 4px 4px;
  min-height: 30px;
}
.an-fuss .rw-sprachklappe .rw-fahne-rund svg { width: 20px; height: 20px; }
.an-fuss .rw-sprachklappe b { font-size: 12px; }
.an-fuss .an-farbe {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px;
}

@media (min-width: 1080px) {
  .an-rechts { justify-content: stretch; }
  .an-schau {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
  }
  .an-schau .an-draht { margin-top: auto; }
}

.sx-seite .sx-laufband {
  margin-left: 0; margin-right: 0;
  width: auto; max-width: none;
}

.an-fuss-breit {
  grid-column: 1 / -1;
  justify-content: center;
  padding: 0 24px 28px;
}
@media (min-width: 1080px) {
  .an-links > .an-fuss { display: none; }   /* falls doch eine übrig ist */
  .an-buehne { grid-template-rows: 1fr auto; }
}

.va-sperre.re-agent {
  margin: 0 20px 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.va-sperre.re-agent a { color: var(--accent); }

@media (max-width: 560px) {
  .topbar-actions .rw-anmelden { display: none; }
  .rw-los { padding: 9px 14px; font-size: .88rem; }
}
@media (max-width: 430px) {
  .topbar-actions .rw-sprachklappe summary b { display: none; }
  .topbar-actions .rw-sprachklappe summary { padding: 5px 7px; gap: 4px; }
  .topbar-actions { gap: 2px; }
  .rw-los { padding: 9px 12px; }
}

.ebm-suche {
  width: 100%; margin: 6px 0 4px;
  padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--inset);
  color: var(--text); font: inherit; font-size: 14px;
}
.ebm-suche:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 13%, transparent);
  outline: none;
}
.ebm-treffer {
  display: block; margin: 0 2px 6px;
  color: var(--text-3); font-size: 11.5px;
}
.ebm-treffer.leer { color: var(--orange, #bf6a02); }
.ebm-feld select[size] {
  width: 100%; padding: 6px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit;
}
.ebm-feld select[size] option { padding: 6px 8px; }

html { overflow-x: clip; }

.wartungsbalken {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 20%, var(--surface)),
      color-mix(in srgb, var(--accent) 12%, var(--surface)));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 2px 12px -6px color-mix(in srgb, var(--accent) 45%, transparent);
  font-size: 12.5px;
}
:root:not([data-theme="light"]) .wartungsbalken {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 16%, #17140d),
      color-mix(in srgb, var(--accent) 9%, #17140d));
}
:root[data-theme="light"] .wartungsbalken { color: var(--accent-press, var(--accent)); }

.wartungsbalken button {
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: inherit; font: inherit; font-weight: 650; cursor: pointer;
  transition: background .18s var(--ease-sanft),
              border-color .18s var(--ease-sanft),
              transform .18s var(--ease-sanft);
}
.wartungsbalken button:hover {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
  transform: translateY(-1px);
}
.wartungsbalken button:active { transform: none; }

@media (max-width: 560px) {
  .wartungsbalken {
    height: auto; min-height: var(--wartung-h);
    padding: 7px 12px; gap: 8px;
    flex-wrap: wrap; text-align: center;
    font-size: 11.5px; line-height: 1.35;
  }
}

body.hat-wartungsbalken .ueberlagerung { top: var(--wartung-h); }

.ui-rahmen:hover .ui-punkte i {
  transition: background .18s var(--ease-sanft),
              box-shadow .18s var(--ease-sanft);
}
.ui-rahmen:hover .ui-punkte i.zu {
  background: #ff5f57; box-shadow: 0 0 7px rgba(255,95,87,.55);
}
.ui-rahmen:hover .ui-punkte i.klein {
  background: #febc2e; box-shadow: 0 0 7px rgba(254,188,46,.5);
}
.ui-rahmen:hover .ui-punkte i.gross {
  background: #28c840; box-shadow: 0 0 7px rgba(40,200,64,.5);
}
.ui-punkte i { transition: background .25s var(--ease-sanft); }

.ui-klickbar .ui-nav-punkt[data-ui-ziel] {
  cursor: pointer;
  transition: background .16s var(--ease-sanft), color .16s var(--ease-sanft);
}
.ui-klickbar .ui-nav-punkt[data-ui-ziel]:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.ui-flaeche[data-ui-seite] { display: none; }
.ui-flaeche[data-ui-seite].an { display: block; }

.ui-kacheln.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-kpi-w.klein { font-size: 15px; }

.ui-riegel {
  display: flex; gap: 3px; height: 10px; margin-top: 10px;
}
.ui-riegel span {
  flex: 0 0 var(--b); border-radius: 3px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
.ui-riegel span.gold {
  background: color-mix(in srgb, var(--accent) 55%, transparent);
}

.ui-zeilen { display: grid; gap: 8px; margin-top: 10px; }
.ui-eur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 11px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ui-eur.summe {
  padding-top: 8px; margin-top: 2px;
  border-top: 1px solid var(--line); color: var(--accent); font-weight: 650;
}
.ui-fussnote {
  margin: 10px 2px 0; color: var(--text-3); font-size: 10.5px; line-height: 1.5;
}

.ui-eur .ui-strich { flex: 1 1 auto; width: auto; min-width: 0; }
.ui-eur b { flex: none; }

.cx-karte.aus {
  opacity: .5;
  background: var(--bg-2);
  cursor: not-allowed;
}
.cx-karte.aus:hover { border-color: var(--line); }
.cx-karte.aus .cx-zeichen { filter: grayscale(1); }

.va-sperre.cx-nurvinted {
  margin: 4px 2px 14px;
  padding: 1px 0 1px 11px;
  border-radius: 0;
  border-left: 2px solid var(--orange);
  background: none;
  color: var(--text-2);
  font-weight: 450;
  line-height: 1.55;
}
.va-sperre.cx-nurvinted b { color: var(--orange); font-weight: 600; }

.va-sperre a { color: var(--accent); }

.ge-grund {
  display: grid; gap: 6px;
  margin: 0 auto 26px; max-width: 34ch;
  padding: 13px 15px; border-radius: var(--radius);
  background: var(--inset); border: 1px solid var(--line);
  color: var(--text); font-size: 13.5px; line-height: 1.6;
  text-align: left;
}
.ge-grund i {
  font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3);
}
.ge-weiter { margin-bottom: 22px; }
.ge-weiter a { color: var(--accent); }

.nu-eintrag { display: block; }
.nu-eintrag[hidden] { display: none; }
.nu-eintrag.auf > .nu-zeile { background: var(--inset); }

.nu-abz.gesperrt {
  background: color-mix(in srgb, var(--red) 20%, transparent);
  color: var(--red);
}
.nu-zeile.gesperrt { box-shadow: inset 3px 0 0 var(--red); }

.nu-sperrfeld {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-top: 13px; border-top: 1px solid var(--line);
}
.nu-sperrwort {
  flex: 1 1 260px; min-width: 0;
  color: var(--text-3); font-size: 12px; line-height: 1.55;
}
.nu-sperrwort b { color: var(--red); font-weight: 650; }
.nu-sperrfeld .btn { flex: none; }

.rechtsseite .fz-inner {
  max-width: var(--breit-oeffentlich); padding: 0 24px;
}

.page.ak-seite { max-width: 560px; padding-top: 26px; padding-bottom: 60px; }
.ak-zurueck {
  display: inline-block; margin-bottom: 14px;
  color: var(--text-3); font-size: 13px; text-decoration: none;
}
.ak-zurueck:hover { color: var(--accent); }

.ak-karte {
  padding: 26px 24px 24px;
  border: 1px solid var(--line); border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 120% at 100% 0%, var(--accent-soft), transparent 58%),
    var(--surface);
}
.ak-auge {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.ak-name { margin: 0 0 14px; font-size: 27px; letter-spacing: -.02em; }
.ak-preis { display: flex; align-items: baseline; gap: 7px; }
.ak-preis b {
  font-size: 40px; font-weight: 650; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.ak-preis span { font-size: 14px; color: var(--text-2); }
.ak-spar {
  margin: 7px 0 0; color: var(--green);
  font-size: 12.5px; font-weight: 600;
}

.ak-takt { display: flex; gap: 8px; margin: 18px 0 4px; }
.ak-takt a {
  flex: 1; padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); font-size: 13px; font-weight: 600;
  text-decoration: none; text-align: center;
  transition: border-color .16s, background .16s, color .16s;
}
.ak-takt a i {
  display: block; margin-top: 2px;
  font-style: normal; font-size: 11.5px; font-weight: 500;
  color: var(--text-3);
}
.ak-takt a:hover { border-color: var(--line-strong); color: var(--text); }
.ak-takt a.on {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  background: var(--accent-soft); color: var(--text);
}
.ak-takt a.on i { color: var(--accent); }

.ak-liste {
  margin: 18px 0 20px; padding: 18px 0 0; list-style: none;
  border-top: 1px solid var(--line);
  display: grid; gap: 9px;
}
.ak-liste li {
  position: relative; padding-left: 24px;
  color: var(--text-2); font-size: 13.5px; line-height: 1.5;
}
.ak-liste li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--accent); font-weight: 700;
}
.ak-liste li b { color: var(--text); }
.ak-liste li span {
  display: block; margin-top: 1px;
  color: var(--text-3); font-size: 11.5px;
}

.ak-haken { display: grid; gap: 11px; margin-bottom: 16px; }
.ak-los { width: 100%; }
.ak-recht { margin: 14px 0 0; }
.ak-fehler {
  margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--red) 13%, transparent);
  color: var(--red); font-size: 13px;
}
.ak-sperre {
  margin: 0; padding: 13px 15px; border-radius: var(--radius);
  background: var(--inset); border: 1px solid var(--line);
  color: var(--text-2); font-size: 13.5px; line-height: 1.6;
}
.ak-sperre a { color: var(--accent); }

@media (max-width: 520px) {
  .ak-karte { padding: 20px 16px 18px; }
  .ak-name { font-size: 23px; }
  .ak-preis b { font-size: 34px; }
}
.ak-sperre code {
  display: block; margin: 6px 0; padding: 7px 9px;
  border-radius: var(--radius-s); background: var(--bg-2);
  color: var(--text-3); font-size: 11.5px; word-break: break-word;
}

.kauf-fehler {
  margin: 10px 0 0; padding: 9px 11px; border-radius: var(--radius-s);
  background: color-mix(in srgb, var(--red) 13%, transparent);
  color: var(--red); font-size: 12.5px; line-height: 1.5;
}

.abo-wechsel {
  display: block; margin: -2px 0 6px;
  color: var(--accent); font-size: 11.5px; font-weight: 600;
}
.abo-wechsel.laeuft { color: var(--text-3); font-weight: 500; }

.lfb-punkt { padding: 17px 4px; font-size: 14px; }
.lfb-punkt i { font-size: 15px; }
.sx-laufband { box-shadow: inset 0 0 80px color-mix(in srgb, var(--accent) 7%, transparent); }

.abt-takt { padding: 5px; margin-bottom: 18px; }
.abt-knopf { padding: 11px 24px; font-size: 15px; gap: 9px; }
.abt-knopf i { font-size: 12px; padding: 3px 8px; }

@media (max-width: 620px) {
  .lfb-punkt { padding: 13px 4px; font-size: 12.5px; }
  .abt-knopf { padding: 9px 15px; font-size: 13.5px; }
}

.bwt-name {
  display: inline-flex; align-items: center;
  padding: 9px 13px; border-radius: var(--radius);
  background: var(--inset); border: 1px solid var(--line);
  color: var(--text-2); font-size: 13.5px; font-weight: 600;
}
.bwt-zitat {
  display: block; margin: 8px 0 12px;
  color: var(--text-2); font-size: 13.5px; line-height: 1.6;
  font-style: italic;
}
.bwt-knoepfe { display: flex; gap: 8px; }
#bwtLede i { font-style: normal; color: var(--accent); }
#bwtLede i.leer { color: var(--text-3); }

.ebm-was, .ebm-frei {
  display: block; margin: 1px 0 5px;
  color: var(--text-3); font-size: 11.5px; line-height: 1.5;
}
.ebm-was b { color: var(--text-2); font-weight: 600; }
.ebm-treffer { display: block; margin-top: 5px; }

.bwt-sternzahl {
  margin-left: 10px; align-self: center;
  color: var(--accent); font-size: 12.5px; font-weight: 650;
}
.sterne-wahl { align-items: center; }

.gf-feld {
  width: 100%; margin: 4px 0 6px; resize: vertical;
  font-family: inherit; font-size: 13.5px; line-height: 1.5;
}
.gf-fuss {
  margin: 0 0 14px; color: var(--text-3);
  font-size: 11.5px; line-height: 1.5;
}

.vk-kanal { display: inline-flex; align-items: center; gap: 5px; }
.vk-kanal i { font-style: normal; }
.vk-kanal-logo { width: 14px; height: 14px; border-radius: 4px; flex: none; }

.cx-veraltet {
  margin: 0 0 14px; padding: 11px 13px; border-radius: var(--radius);
  background: var(--orange-soft); color: var(--text-2);
  border-left: 2px solid var(--orange);
  font-size: 12.5px; line-height: 1.55;
}
.cx-veraltet b { display: block; color: var(--orange); margin-bottom: 2px; }
.cx-alt { color: var(--orange); font-size: 11.5px; font-weight: 600; }

.rb-liste { list-style: none; margin: 8px 0 0; padding: 0; display: grid;
            gap: 4px; }
.rb-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border-radius: 8px; background: var(--bg-2);
  box-shadow: inset 2px 0 0 var(--line);
}
.rb-zeile.gut  { box-shadow: inset 2px 0 0 var(--green); }
.rb-zeile.warn { box-shadow: inset 2px 0 0 var(--orange); }
.rb-zeile.weh  { box-shadow: inset 2px 0 0 var(--red); }
.rb-name { flex: 1 1 auto; min-width: 0; color: var(--text);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-wann { flex: none; color: var(--text-3); font-size: 12px;
           font-variant-numeric: tabular-nums; }
.rb-warn { margin-top: 10px; color: var(--orange); }

.vs-leiste { display: flex; gap: 8px 20px; flex-wrap: wrap;
             align-items: center; margin-bottom: 22px; }
.vs-gruppe { display: flex; align-items: center; gap: 9px; min-width: 0; }
.vs-gruppe-titel {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); white-space: nowrap;
}

.panel-head .vs-sort { margin-left: auto; }
.aw-feld.aw-vs-sort { margin-left: auto; }

@media (max-width: 700px) {
  .vs-gruppe { flex-direction: column; align-items: flex-start;
               gap: 6px; width: 100%; }
}
.vs-zahl { margin-left: 6px; color: var(--text-3);
           font-variant-numeric: tabular-nums; }

.vs-liste { display: grid; gap: 10px; padding: 4px 0 2px; }

.vs-karte {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  transition: border-color .16s ease;
}
.vs-karte:hover { border-color: var(--line-strong); }
.vs-karte.offen      { box-shadow: inset 3px 0 0 var(--line-strong); }
.vs-karte.versendet  { box-shadow: inset 3px 0 0 var(--accent); }
.vs-karte.zugestellt { box-shadow: inset 3px 0 0 var(--green); }
.vs-karte.problem    { box-shadow: inset 3px 0 0 var(--red); }

.vs-kopf { display: flex; align-items: center; gap: 13px; padding: 11px 14px; }
.vs-bild {
  flex: none; width: 46px; height: 58px; object-fit: cover;
  border-radius: 8px; background: var(--inset);
}
.vs-bild.leer {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 20px;
}
.vs-mitte { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; }
.vs-titel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vs-titel b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-zeile2, .vs-zeile3 {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-3);
}
.vs-zeile2 { color: var(--text-2); }
.vs-nr { font-variant-numeric: tabular-nums; }

.vs-rechts { flex: none; display: grid; gap: 6px; justify-items: end; }
.vs-oben { display: flex; align-items: center; gap: 10px; }
.vs-haken { display: flex; align-items: center; gap: 5px;
            font-size: 11px; color: var(--text-3); cursor: pointer; }
.vs-stand {
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--inset); color: var(--text-3);
  border: 1px solid var(--line-strong);
}
.vs-stand.versendet  { color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.vs-stand.zugestellt { color: var(--green); border-color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent); }
.vs-stand.problem    { color: var(--red); border-color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, transparent); }

.vs-sendung { display: flex; align-items: center; gap: 8px; }
.vs-traeger { font-size: 11px; color: var(--text-3); }
.vs-code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px; color: var(--text-2);
  background: var(--inset); padding: 3px 8px; border-radius: 6px;
}
.vs-kopieren {
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  color: var(--text-3); border-radius: 6px; padding: 3px 7px; font-size: 12px;
}
.vs-kopieren:hover { color: var(--accent); border-color: var(--accent); }
.vs-eintrag { display: flex; gap: 6px; align-items: center; }
.vs-eintrag input { width: 168px; }

.vs-fuss {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 14px; border-top: 1px solid var(--line);
}
.vs-schub { flex: 1 1 auto; }
.vs-mehr {
  border: none; background: none; cursor: pointer; padding: 2px 0;
  color: var(--text-3); font-size: 12px; font-weight: 600;
}
.vs-mehr:hover { color: var(--accent); }

.vs-agent {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 8px 13px;
  border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--bg-2); color: var(--text-3); font-size: 12px;
}
.vs-agent span { flex: 1 1 auto; min-width: 0; }

.vs-verlauf { padding: 13px 14px 14px; border-top: 1px dashed var(--line); }
.vs-verlauf-kopf { display: flex; align-items: baseline; gap: 8px;
                   flex-wrap: wrap; margin-bottom: 10px; }
.vs-verlauf-kopf .hint { flex: 1 1 220px; min-width: 0; }
.vs-schritte { list-style: none; margin: 0; padding: 0 0 0 2px; display: grid; }
.vs-schritt {
  display: grid; grid-template-columns: 18px max-content 1fr;
  align-items: start; gap: 10px; padding: 7px 0; position: relative;
}
.vs-schritt:not(:last-child)::before {
  content: ""; position: absolute; left: 8px; top: 22px; bottom: -7px;
  width: 1px; background: var(--line-strong);
}
.vs-punkt {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--bg-2);
  display: block; margin-top: 2px;
}
.vs-schritt.gut  .vs-punkt { border-color: var(--green);
  background: color-mix(in srgb, var(--green) 22%, transparent); }
.vs-schritt.gold .vs-punkt { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, transparent); }
.vs-wann { font-size: 12px; color: var(--text-3);
           font-variant-numeric: tabular-nums; padding-top: 3px; }
.vs-was { display: grid; gap: 2px; min-width: 0; }
.vs-was b { font-size: 13px; font-weight: 600; }
.vs-was i { font-style: normal; font-size: 12px; color: var(--text-3); }
.vs-alt-etikett { font-size: 12px; color: var(--accent); width: max-content; }
.vs-verlauf-fuss { display: flex; gap: 10px; align-items: center;
                   flex-wrap: wrap; margin-top: 10px; }

@media (max-width: 760px) {
  .vs-kopf { flex-wrap: wrap; }
  .vs-rechts { width: 100%; justify-items: stretch; }
  .vs-oben { justify-content: space-between; }
  .vs-eintrag input { width: 100%; }
  .vs-eintrag, .vs-sendung { width: 100%; }
  .vs-schritt { grid-template-columns: 18px 1fr; }
  .vs-wann { grid-column: 2; padding-top: 0; }
  .vs-was { grid-column: 2; }
}

.es-feld { margin: 16px 0; }
.es-label {
  display: block; margin-bottom: 8px;
  font-size: 12px; color: var(--text-2); font-weight: 600;
}
.es-groessen { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) { .es-groessen { grid-template-columns: 1fr 1fr; } }
.es-groesse {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; transition: border-color .16s, background .16s;
}
.es-groesse:hover { border-color: var(--line-strong); }
.es-groesse.on { border-color: var(--accent); background: var(--inset); }
.es-groesse input { position: absolute; opacity: 0; pointer-events: none; }
.es-groesse b { font-size: 13px; }
.es-groesse span { font-size: 11px; color: var(--text-3); }

.es-eigen { margin: 14px 0; }
.es-eigen summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
.es-masse { display: flex; gap: 10px; margin: 10px 0 6px; flex-wrap: wrap; }
.es-masse label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-3);
}
.es-masse input { width: 92px; }

.es-dienste { margin-top: 18px; padding-top: 16px;
              border-top: 1px dashed var(--line-strong); }
.es-liste { display: grid; gap: 6px; }
.es-tarif {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 1fr auto auto;
  padding: 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.es-tarif.on { border-color: var(--accent); background: var(--inset); }
.es-tarif input { position: absolute; opacity: 0; pointer-events: none; }
.es-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.es-name i { font-style: normal; font-size: 11px; color: var(--text-3); }
.es-zeit { font-size: 12px; color: var(--text-3);
           font-variant-numeric: tabular-nums; }
.es-preis { font-weight: 700; font-variant-numeric: tabular-nums; }
.es-zusatz { margin-top: 14px; display: grid; gap: 6px; }
.es-zusatz label { display: flex; align-items: center; gap: 8px;
                   font-size: 13px; color: var(--text-2); }

.nt-rot { margin: 4px 0 14px; }
.nt-rechts { display: flex; gap: 8px; }

.mk-feld { position: relative; display: grid; place-items: center; }
.mk-feld > .vas-knopf { position: relative; z-index: 1; }

.mk-lage {
  position: absolute;
  right: -22px; bottom: -22px;
  width: 200px; height: 200px;
  pointer-events: none;
  overflow: hidden;
}

.mk-fang { pointer-events: auto; cursor: pointer; }

.mk-blasenfeld {
  position: absolute;
  right: -22px; bottom: -22px;
  width: 200px; height: 200px;
  pointer-events: none;
  z-index: 3;
}
@media (max-width: 430px) {
  .mk-lage, .mk-blasenfeld { right: -12px; }
}

.mk-blase {
  position: absolute;
  z-index: 3;
  transform: translate(-100%, -100%);
  padding: 6px 11px;
  border: 1px solid var(--line-strong); border-radius: 11px 11px 3px 11px;
  background: var(--surface); box-shadow: var(--shadow-2);
  font-size: 11.5px; line-height: 1.3; color: var(--text);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .22s var(--ease-sanft),
                          transform .22s var(--ease-sanft);
}
.mk-blase.da { opacity: 1; transform: translate(-100%, -100%) translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .mk-blase { transition: none; }
}
.mk-hinten { z-index: 0; }
.mk-vorne  { z-index: 2; }

.mk-figur { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.mk-beute { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5)); }
.mk-logo  { filter: drop-shadow(0 0 2px rgba(217, 169, 74, .45)); }

@media print { .mk-lage { display: none; } }

.sx-karten.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .sx-karten.zwei { grid-template-columns: 1fr; }
}
.erw-weg { display: flex; flex-direction: column; gap: 10px; }
.erw-logo {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--inset); border: 1px solid var(--line);
}
.erw-liste {
  margin: 4px 0 0; padding-left: 18px;
  color: var(--text-2); font-size: 13.5px; line-height: 1.7;
}
.erw-fuss { margin-top: 16px; }

.cl-leiste {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: center;
  padding-bottom: 22px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.cl-suche {
  position: relative; display: flex; align-items: center;
  flex: 1 1 260px; max-width: 340px;
}
.cl-suche .cl-lupe {
  position: absolute; left: 12px; color: var(--text-3); font-size: 15px;
  pointer-events: none;
}
.cl-suche input {
  width: 100%; padding: 9px 14px 9px 32px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--inset); color: var(--text); font: inherit; font-size: 13.5px;
}
.cl-suche input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.cl-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-chip {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--inset);
  color: var(--text-2); font-size: 13px;
  transition: background .15s var(--ease), color .15s var(--ease),
              border-color .15s var(--ease);
}
.cl-chip:hover { color: var(--text); border-color: var(--line-strong); }
.cl-chip.on {
  background: var(--accent); border-color: var(--accent);
  color: var(--auf-accent); font-weight: 600;
}
.cl-chip i {
  font-style: normal; font-size: 11.5px; opacity: .75;
  font-variant-numeric: tabular-nums;
}

.cl-strang { position: relative; margin-top: 26px; }
.cl-monat + .cl-monat { margin-top: 26px; }
.cl-monat[hidden] { display: none; }
.cl-monat-kopf {
  margin: 0 0 14px; padding-left: 34px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}

.cl-eintrag {
  position: relative; padding-left: 34px; padding-bottom: 18px;
}
.cl-eintrag[hidden] { display: none; }
.cl-eintrag::before {
  content: ""; position: absolute; left: 7px; top: 18px; bottom: -4px;
  width: 1px; background: var(--line);
}
.cl-monat:last-child .cl-eintrag:last-child::before { display: none; }
.cl-punkt {
  position: absolute; left: 2px; top: 13px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-2); border: 2px solid var(--line-strong);
}
.cl-eintrag[data-stufe="gross"] .cl-punkt {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.cl-karte {
  padding: 16px 18px; border-radius: var(--radius-l);
  border: 1px solid var(--line); background: var(--surface);
}
.cl-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cl-stufe {
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--line-strong); color: var(--text-2);
  background: var(--inset);
}
.cl-stufe.gross {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.cl-fassung {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-2);
  font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.cl-datum {
  margin-left: auto; font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.cl-karte h3 {
  margin: 11px 0 10px; font-size: 17px; line-height: 1.3;
  text-wrap: balance;
}
.cl-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cl-punkte li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.6; color: var(--text-2);
}
.cl-haken { flex: none; width: 15px; text-align: center; font-size: 12px; }
.cl-neu .cl-haken     { color: var(--accent); }
.cl-besser .cl-haken  { color: var(--text-3); }
.cl-behoben .cl-haken { color: var(--green); }

.cl-leer { text-align: center; color: var(--text-3); padding: 34px 0; }

@media (max-width: 620px) {
  .cl-leiste { justify-content: stretch; }
  .cl-suche { max-width: none; }
  .cl-datum { margin-left: 0; width: 100%; }
}

.an-oder {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 14px; color: var(--text-3); font-size: 12px;
  text-transform: uppercase; letter-spacing: .12em;
}
.an-oder::before, .an-oder::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line);
}
.an-discord {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: #5865f2; border-color: #5865f2; color: #fff;
}
.an-discord:hover { background: #4752c4; border-color: #4752c4; color: #fff; }
.an-discord-zeichen { width: 22px; height: 17px; flex: none; }
.an-discord-fuss { margin-top: 10px; text-align: center; }
.an-fehler-oben {
  display: block; margin: 0 0 16px; padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  border-radius: var(--radius); background: var(--red-soft);
}

.aufb-auge {
  margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.aufb-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }

.mkt-nav {
  display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 26px;
  padding: 4px; border-radius: 999px; width: max-content; max-width: 100%;
  border: 1px solid var(--line); background: var(--surface);
}
.mkt-nav a {
  padding: 8px 16px; border-radius: 999px; text-decoration: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
  transition: color .15s, background .15s;
}
.mkt-nav a:hover { color: var(--text); }
.mkt-nav a.on { background: var(--accent); color: var(--auf-accent); }

.mkt-hero { margin: 0 0 22px; }
.mkt-auge {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.mkt-hero h1 {
  margin: 0; font-size: clamp(34px, 5vw, 56px); letter-spacing: .04em;
  text-transform: uppercase; font-weight: 800; line-height: 1;
}
.mkt-lede { margin: 12px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.mkt-zahlen { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: var(--text-3); }
.mkt-zahlen b { font-size: 20px; color: var(--text); margin-right: 6px; font-variant-numeric: tabular-nums; }

.mkt-suche {
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(140px, 1fr));
  gap: 10px; margin: 0 0 22px; padding: 12px;
  border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--surface);
}
.mkt-feld { display: grid; gap: 4px; position: relative; }
.mkt-feld-wort { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mkt-feld input, .mkt-feld select {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px;
  padding: 10px 12px; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: var(--inset); color: var(--text);
}
.mkt-feld-suche { align-self: end; }
.mkt-feld-suche input { padding-left: 36px; }
.mkt-lupe { position: absolute; left: 12px; bottom: 11px; color: var(--text-3); font-size: 16px; pointer-events: none; }
.mkt-feld input:focus, .mkt-feld select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.mkt-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px; margin-bottom: 44px;
}
.mkt-karte {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--surface);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.mkt-karte:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow-2);
  transform: translateY(-2px);
}
.mkt-bild { display: block; aspect-ratio: 4 / 3; background: var(--inset); overflow: hidden; }
.mkt-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-kein-bild { display: grid; place-items: center; width: 100%; height: 100%; font-size: 34px; color: var(--text-3); }
.mkt-karte-text { display: grid; gap: 8px; padding: 14px 16px 16px; }
.mkt-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mkt-lieferant { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mkt-siegel {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  color: var(--accent); background: var(--accent-soft); white-space: nowrap;
}
.mkt-karte h2 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.mkt-karte h2 a { color: var(--text); text-decoration: none; }
.mkt-land { font-size: 12px; color: var(--text-2); }
.mkt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.mkt-chip {
  font-size: 10.5px; font-weight: 600; letter-spacing: .04em; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2);
}
.mkt-chip.land { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.mkt-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); }
.mkt-preis { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mkt-kontakt {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.mkt-kontakt i { font-style: normal; display: inline-block; transition: transform .16s; }
.mkt-kontakt:hover i { transform: translateX(3px); }
.mkt-leer { grid-column: 1 / -1; margin: 0; padding: 34px 20px; text-align: center; color: var(--text-3); font-size: 13.5px; line-height: 1.6; border: 1px dashed var(--line-strong); border-radius: var(--radius-l); }

.mkt-block { margin: 0 0 40px; padding: 26px 28px; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--surface); }
.mkt-block-kopf { margin-bottom: 18px; }
.mkt-block-kopf h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.mkt-zahl-klein { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: var(--auf-accent); font-size: 13px; vertical-align: 4px; margin-left: 6px; }
.mkt-form { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.mkt-drop {
  display: grid; justify-items: center; align-content: center; gap: 10px; cursor: pointer;
  min-height: 240px; padding: 16px; border-radius: var(--radius-l);
  border: 1.5px dashed var(--line-strong); background: var(--inset); text-align: center;
  transition: border-color .15s, background .15s;
}
.mkt-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.mkt-drop-bild { width: 100%; max-width: 200px; aspect-ratio: 1; display: grid; place-items: center; font-size: 34px; color: var(--text-3); border-radius: var(--radius); overflow: hidden; }
.mkt-drop-bild img { width: 100%; height: 100%; object-fit: cover; }
.mkt-drop-text b { display: block; font-size: 13.5px; }
.mkt-drop-text i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.mkt-form-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mkt-form-felder label { display: grid; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.mkt-form-felder label i { font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.mkt-form-felder label.breit { grid-column: 1 / -1; }
.mkt-form-felder input, .mkt-form-felder select, .mkt-form-felder textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; letter-spacing: 0; text-transform: none;
  padding: 10px 12px; border-radius: var(--radius-s); border: 1px solid var(--line-strong);
  background: var(--inset); color: var(--text); resize: vertical;
}
.mkt-form-felder input:focus, .mkt-form-felder select:focus, .mkt-form-felder textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.mkt-form-fuss { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mkt-form-stand { font-size: 12.5px; color: var(--text-2); }
.mkt-liste { display: grid; gap: 8px; }
.mkt-zeile {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--radius); background: var(--inset); border: 1px solid var(--line);
}
.mkt-zeile-bild { width: 52px; height: 52px; border-radius: var(--radius-s); overflow: hidden; display: grid; place-items: center; background: var(--surface); color: var(--text-3); font-size: 20px; }
.mkt-zeile-bild img { width: 100%; height: 100%; object-fit: cover; }
.mkt-zeile-text { display: grid; gap: 2px; min-width: 0; }
.mkt-zeile-text b { font-size: 14px; }
.mkt-zeile-text b a { color: var(--text); text-decoration: none; }
.mkt-zeile-text i { font-style: normal; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-stand { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mkt-stand.ausstehend { color: var(--orange); background: var(--orange-soft); }
.mkt-stand.veroeffentlicht { color: var(--green); background: var(--green-soft); }
.mkt-stand.abgelehnt { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.mkt-rollen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.mkt-rolle { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius); background: var(--inset); font-size: 13px; color: var(--text-2); line-height: 1.5; }
.mkt-rolle b { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.mkt-rolle em { display: block; font-style: normal; color: var(--text-3); font-size: 12px; margin-top: 4px; }

.mkt-zurueck { margin: 0 0 16px; font-size: 13px; }
.mkt-zurueck a { color: var(--text-3); text-decoration: none; }
.mkt-zurueck a:hover { color: var(--accent); }
.mkt-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; margin-bottom: 44px; }
.mkt-detail-bild { border-radius: var(--radius-l); overflow: hidden; background: var(--inset); aspect-ratio: 4 / 3; border: 1px solid var(--line); }
.mkt-detail-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-detail-text { display: grid; gap: 14px; align-content: start; }
.mkt-detail-text h1 { margin: 0; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; }
.mkt-fakten { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13.5px; }
.mkt-fakten dt { color: var(--text-3); }
.mkt-fakten dd { margin: 0; font-weight: 600; }
.mkt-beschreibung { margin: 0; white-space: pre-line; line-height: 1.65; color: var(--text-2); font-size: 14.5px; }
.mkt-kontaktkasten { display: grid; gap: 6px; padding: 16px 18px; border-radius: var(--radius-l); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.mkt-kontaktkasten b { font-size: 18px; word-break: break-word; }
@media (max-width: 860px) {
  .mkt-suche { grid-template-columns: 1fr 1fr; }
  .mkt-form { grid-template-columns: 1fr; }
  .mkt-detail { grid-template-columns: 1fr; }
  .mkt-zeile { grid-template-columns: 52px minmax(0, 1fr); }
  .mkt-zeile .btn, .mkt-zeile .mkt-stand { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) { .mkt-suche, .mkt-form-felder { grid-template-columns: 1fr; } }

.wg { display: grid; gap: 16px; padding: 4px 20px 20px; }

.wg-strecke {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  padding: 10px 0 2px;
}
.wg.vier .wg-strecke { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wg-linie {
  position: absolute; top: 37px; left: calc(100% / 6); right: calc(100% / 6);
  height: 2px; border-radius: 2px;
  background: var(--line-strong);
  overflow: hidden;
  transform-origin: left center;
  animation: wgLinie .9s var(--ease-out) backwards;
}
.wg.vier .wg-linie { left: 12.5%; right: 12.5%; }
.wg-linie i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
}
.wg-linie.lebt i { opacity: 1; animation: wgLauf 3s ease-in-out infinite; }
@keyframes wgLinie { from { transform: scaleX(0); } }
@keyframes wgLauf {
  from { transform: translateX(-100%); }
  to   { transform: translateX(460%); }
}

.wg-station {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 7px;
  padding: 0 6px; border: 0; background: none;
  font: inherit; color: var(--text-3); cursor: pointer;
}
.wg-station.verkauft   { --wg-farbe: var(--orange); --wg-weich: var(--orange-soft); }
.wg-station.versendet  { --wg-farbe: var(--accent); --wg-weich: var(--accent-soft); }
.wg-station.zugestellt { --wg-farbe: var(--green);  --wg-weich: var(--green-soft); }
.wg-station.retoure    { --wg-farbe: var(--red);    --wg-weich: var(--red-soft); }
.wg-kreis {
  position: relative;
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--wg-farbe);
  transition: transform .25s var(--ease-out);
}
.wg-kreis .stb-i { width: 24px; height: 24px; }
.wg-station.leer .wg-kreis { color: var(--text-3); }
.wg-station:hover .wg-kreis { transform: scale(1.06); }
.wg-station.an .wg-kreis {
  background: var(--wg-weich);
  border-color: var(--wg-farbe);
  box-shadow: 0 0 0 4px var(--wg-weich);
}
.wg-station:focus-visible { outline: none; }
.wg-station:focus-visible .wg-kreis { outline: 2px solid var(--accent); outline-offset: 4px; }
.wg-zahl {
  position: absolute; top: -5px; right: -9px;
  display: grid; place-items: center;
  min-width: 23px; height: 23px; padding: 0 6px; border-radius: 999px;
  border: 2px solid var(--surface);
  background: var(--inset); color: var(--text-2);
  font-size: 11.5px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wg-zahl span { text-box: trim-both cap alphabetic; }
.wg-station:not(.leer) .wg-zahl { background: var(--wg-farbe); color: var(--auf-accent); }
.wg-name { font-size: 13px; font-weight: 650; color: var(--text-2); white-space: nowrap; }
.wg-station.an .wg-name { color: var(--text); }

.wg-stapel { display: flex; justify-content: center; height: 40px; padding-top: 2px; }
.wg-stapel img, .wg-stapel i {
  width: 30px; height: 38px; border-radius: 7px; object-fit: cover;
  border: 2px solid var(--surface);
  background: var(--inset);
  transform: rotate(calc((var(--wg-i, 1) - 1) * 7deg));
  transition: transform .3s var(--ease-out);
}
.wg-stapel img + img { margin-left: -12px; }
.wg-stapel i { border: 1px dashed var(--line-strong); background: none; transform: none; }
.wg-station:hover .wg-stapel img {
  transform: rotate(calc((var(--wg-i, 1) - 1) * 12deg)) translateY(-2px);
}

.wg-reihe {
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
}
.wg-reihe > * { scroll-snap-align: start; }
.wg-karte {
  flex: 0 0 164px;
  display: grid; align-content: start; gap: 8px;
  padding: 5px 5px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  cursor: pointer;
  animation: wgKarte .45s var(--ease-out) backwards;
  animation-delay: calc(var(--wg-n, 0) * 35ms);
}
.wg-karte:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.wg-karte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes wgKarte { from { opacity: 0; transform: translateY(10px); } }
.wg-foto {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 4 / 5; border-radius: 13px; overflow: hidden;
  background: var(--inset); color: var(--text-3);
}
.wg-foto > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease-out);
}
.wg-foto > .stb-i { width: 30px; height: 30px; }
.wg-karte:hover .wg-foto > img { transform: scale(1.05); }
.wg-kanal {
  position: absolute; left: 7px; bottom: 7px;
  display: grid; padding: 4px; border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.wg-text { display: grid; gap: 2px; padding: 0 5px; min-width: 0; }
.wg-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
.wg-kopf b {
  min-width: 0; font-size: 13px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wg-preis { flex: none; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wg-typ, .wg-zeile {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wg-typ { font-size: 11.5px; color: var(--text-3); }
.wg-zeile { font-size: 11px; color: var(--text-2); }
.wg-zeile code {
  font-size: 10.5px; padding: 0 4px; border-radius: 5px;
  background: var(--inset); color: var(--text);
}
.wg-mehr {
  flex: 0 0 120px;
  display: grid; place-content: center; justify-items: center; gap: 4px;
  border: 1px dashed var(--line-strong); border-radius: 18px;
  background: none; color: var(--text-2);
  font: inherit; font-size: 12px; cursor: pointer;
}
.wg-mehr b { font-size: 22px; color: var(--text); }
.wg-mehr:hover { border-color: var(--accent); color: var(--text); }
.wg-leer {
  flex: 1; margin: 0; padding: 26px 16px;
  border: 1px dashed var(--line); border-radius: 16px;
  text-align: center; color: var(--text-3); font-size: 13px;
}

@media (max-width: 640px) {
  .wg { padding: 2px 12px 16px; }
  .wg-kreis { width: 46px; height: 46px; }
  .wg-kreis .stb-i { width: 20px; height: 20px; }
  .wg-linie { top: 32px; }
  .wg-name { font-size: 11.5px; white-space: normal; text-align: center; }
  .wg-karte { flex-basis: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .wg-linie, .wg-linie.lebt i, .wg-karte { animation: none; }
  .wg-kreis, .wg-stapel img, .wg-foto > img { transition: none; }
}
#invVerkauftGrid { padding: 0 20px 20px; }
.nv-logo { width: 14px; height: 14px; border-radius: 4px; flex: none; display: block; }

.c-versand {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px; font-size: 11.5px; color: var(--text-2);
}
.c-versand code {
  font-size: 11px; padding: 1px 6px; border-radius: 6px;
  background: var(--inset); border: 1px solid var(--line); color: var(--text);
}
.inv-gruppe.retoure .inv-gruppe-punkt { background: var(--red); box-shadow: 0 0 0 4px var(--red-soft); }

.vs-stand.retoure { color: var(--red); background: color-mix(in srgb, var(--red-soft) 78%, var(--surface)); }
.vs-retoure-wort { font-size: 12px; color: var(--red); }

.ch-zeile { cursor: pointer; }
.ch-zeile.on { border-left: 3px solid var(--accent); }
.ch-zeile.neu .r-name { font-weight: 700; }
.pf-fremd:not(.leer2) { padding: 0; background: none; border: 0; }

.ch-bilder { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ch-bilder img {
  display: block; max-width: 220px; max-height: 260px;
  border-radius: 10px; border: 1px solid var(--line);
}

.vs-lager {
  color: var(--text-2);
  font-weight: 600;
}

.erloes {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--inset);
  border-radius: var(--radius-s);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.erl-still { color: var(--text-3); }
.erl-zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
}
.erl-zeile + .erl-zeile {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--line);
}
.erl-zeile > b { color: var(--text); font-weight: 620; }
.erl-quote {
  padding: 1px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-weight: 650; font-variant-numeric: tabular-nums;
}
.erl-rechnung { flex: 1 1 100%; }
.erl-rechnung b { color: var(--text); font-variant-numeric: tabular-nums; }
.erl-plus  { color: var(--green) !important; }
.erl-minus { color: var(--red) !important; }
.erl-woher { flex: 1 1 100%; color: var(--text-3); font-size: 11.5px; }

.gesund {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ge-punkt {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-3);
}
.gesund.gut    .ge-punkt { background: var(--green); }
.gesund.alt    .ge-punkt { background: var(--orange); }
.gesund.wartet .ge-punkt { background: var(--orange); }
.gesund.wartet { border-color: color-mix(in srgb, var(--orange) 35%, var(--line)); }
.ge-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ge-text b { font-size: 13.5px; font-weight: 620; color: var(--text); }
.ge-text span {
  font-size: 12px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gesund .btn { flex: none; }

@media (max-width: 560px) {
  .ge-text span { white-space: normal; }
}

@media (max-width: 700px) {
  .zt-gruppe, .cx-reiter {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .zt-gruppe > *, .cx-reiter > * { flex: 0 1 auto; }

  #lagerTabelle { display: block; width: 100%; }
  #lagerTabelle tr:first-child { display: none; }
  #lagerTabelle tr {
    display: grid;
    width: 100%;
    grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr);
    gap: 3px 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  #lagerTabelle tr:last-child { border-bottom: 0; }
  #lagerTabelle td { border: 0; padding: 0; }

  #lagerTabelle td.lg-bild-zelle {
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: start;
  }
  #lagerTabelle td[data-spalte="Artikel"] { grid-column: 2 / -1; }

  #tab-statistik .table-scroll { overflow-x: visible; }
  #lagerTabelle .lg-bild { width: 48px; }

  #lagerTabelle td[data-spalte="Artikel"] {
    font-weight: 620; color: var(--text); font-size: 14px;
    margin-bottom: 4px;
  }
  #lagerTabelle td[data-spalte]:not([data-spalte="Artikel"]) {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12.5px; color: var(--text-2);
    text-align: left;
  }
  #lagerTabelle td[data-spalte]:not([data-spalte="Artikel"])::before {
    content: attr(data-spalte);
    flex: none; min-width: 62px;
    color: var(--text-3); font-size: 11px;
  }

  #lagerTabelle td.leermeldung { grid-column: 1 / -1; }

  .vs-mehr, .vs-kopieren, .r-del { position: relative; }
  .vs-mehr::after, .vs-kopieren::after, .r-del::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 40px; height: 40px;
    transform: translate(-50%, -50%);
  }
}

.sub.plan-weh {
  color: var(--red);
}

.bw-hinweis {
  margin: 8px 0 0;
  font-size: 12.5px; line-height: 1.45;
  color: var(--orange);
}

.k-wos {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-top: 7px;
}
.k-wo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.k-wo-logo {
  width: 15px; height: 15px; border-radius: 3px; display: block;
}

.mo-fe-mal {
  flex: none;
  font-size: 12px; font-weight: 650;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.sq-liste { display: flex; flex-direction: column; gap: 10px; }

.sq-zeile {
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.sq-zeile.laeuft {
  border-color: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.sq-kopf {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}

.sq-titel {
  font-size: 14px; font-weight: 650; color: var(--text);
  min-width: 0; overflow-wrap: anywhere;
}

.sq-stand {
  flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--line); color: var(--text-2);
}
.sq-stand.gut { background: var(--green-soft); color: var(--green); }
.sq-stand.weh { background: var(--red-soft);   color: var(--red); }

.sq-zeit {
  font-size: 12px; color: var(--text-3);
  margin-left: auto;
}

.sq-weg {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--text-3);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: background .15s;
}
.sq-weg:hover  { background: var(--red-soft); color: var(--red); }
.sq-weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sq-meldung {
  margin: 8px 0 0;
  font-size: 13px; color: var(--red);
  overflow-wrap: anywhere;
}

.sq-bilder {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}

.sq-bild-weg {
  display: block; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line);
  line-height: 0;
  transition: transform .15s;
}
.sq-bild-weg:hover { border-color: var(--accent); transform: translateY(-1px); }
.sq-bild-weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sq-bild {
  width: 92px; height: 116px;
  object-fit: cover; display: block;
  background: var(--surface-2);
}

@media (max-width: 560px) {
  .sq-zeile { padding: 11px 12px; }
  .sq-zeit { margin-left: 0; width: 100%; order: 5; }
  .sq-weg { margin-left: auto; margin-right: -6px; width: 44px; height: 44px; }
  .sq-bild { width: 76px; height: 96px; }
}

#bwSchlange .sq-liste, #lwVerlauf .sq-liste, #autoVerlauf .sq-liste {
  max-height: min(640px, 72vh);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 4px;
}

.vg-kachel {
  aspect-ratio: 4 / 5; box-shadow: none;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2);
}
.vg-kachel > img, .vg-kachel .bwv-vorher img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  user-select: none; -webkit-user-drag: none;
}
.vg-kachel .bwv-griff span { width: 28px; height: 28px; font-size: 10px; }
.vg-kachel .bwv-marke { top: 7px; font-size: 9.5px; padding: 3px 7px; }
.vg-kachel .bwv-vorher .bwv-marke { left: 7px; }
.vg-kachel .bwv-marke.rechts { right: 7px; }

.sq-paar {
  margin: 0; width: 180px;
  display: grid; gap: 6px; justify-items: stretch;
}
.sq-laden {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--inset);
  font-size: 12.5px; font-weight: 600; color: var(--text);
  text-decoration: none;
  transition: transform .15s;
}
.sq-laden .stb-i { width: 16px; height: 16px; flex: none; color: var(--accent); }
.sq-laden:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--inset));
}
.sq-laden:active { transform: translateY(1px); }
.sq-laden:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .sq-paar { width: calc(50% - 4px); }
  .sq-laden { min-height: 44px; }        /* das Tippmaß, wie bei .sq-weg */
}

.sq-paar .sq-bild-weg { aspect-ratio: 4 / 5; }
.sq-paar .sq-bild { width: 100%; height: 100%; }

.sq-alle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 10px;
}
.sq-alle .btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.sq-alle .stb-i { width: 15px; height: 15px; }

.sq-ergebnis-laden { display: inline-flex; align-items: center; gap: 7px; }
.sq-ergebnis-laden .stb-i { width: 15px; height: 15px; }

.av-hinweis {
  margin: 8px 0 0;
  font-size: 13px; color: var(--text-2);
  overflow-wrap: anywhere;
}

.av-stuecke {
  display: grid; gap: 8px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.av-stueck {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  min-width: 0;
}
.av-stueck:has(button.av-auf:hover) { border-color: var(--accent); }
.av-stueck.weg { opacity: .5; }
.av-auf {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left; padding: 1px 3px 2px;
  background: none; border: 0; border-radius: 6px;
  color: inherit; font: inherit; min-width: 0;
}
button.av-auf { cursor: pointer; }
button.av-auf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.av-bild {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface);
}
.av-bild.leer {
  display: grid; place-items: center;
  border: 1.5px dashed var(--line-strong); color: var(--text-3);
}
.av-bild.leer .stb-i { width: 28px; height: 28px; }

.av-name {
  font-size: 13px; font-weight: 620; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av-sub  { font-size: 12px; color: var(--text-2); }
.av-preis {
  font-size: 12px; font-weight: 650; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .av-stuecke { grid-template-columns: 1fr; }
}

.lv-auf {
  flex: 1 1 auto; min-width: 0;
  text-align: left; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-size: 14px; font-weight: 650; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lv-auf:hover { color: var(--accent); }
.lv-auf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (hover: none) {
  .lv-auf { position: relative; }
  .lv-auf::after {
    content: "";
    position: absolute;
    inset: -10px 0;
  }
}

body.lagerseite {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.lo-buehne {
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 18px 64px;
  display: flex; flex-direction: column; gap: 18px;
}

.lo-zurueck {
  align-self: flex-start;
  font-size: 14px; color: var(--text-2); text-decoration: none;
  padding: 8px 2px;                     /* Tippziel, ohne den Text zu ruecken */
}
.lo-zurueck:hover { color: var(--accent); }

.lo-kopf { display: flex; flex-direction: column; gap: 4px; }

.lo-auge {
  margin: 0;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}
.lo-titel {
  margin: 0;
  font-size: clamp(26px, 7vw, 34px); font-weight: 680;
  line-height: 1.12; letter-spacing: -.01em;
  text-wrap: balance;
}
.lo-code {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px; letter-spacing: .12em; font-weight: 600;
  color: var(--accent);
}
.lo-notiz { margin: 6px 0 0; font-size: 14px; color: var(--text-2); }

.lo-zahl {
  font-size: 15px; color: var(--text-2);
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.lo-zahl b {
  font-size: 21px; color: var(--text); font-weight: 700;
  font-variant-numeric: tabular-nums; margin-right: 4px;
}

.lo-liste { list-style: none; margin: 0; padding: 0;
            display: flex; flex-direction: column; gap: 10px; }

.lo-zeile {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.lo-bild {
  flex: none; width: 54px; height: 68px;
  border-radius: 8px; overflow: hidden;
  background: var(--inset);
  display: grid; place-items: center;
}
.lo-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lo-ohnebild { color: var(--text-3); font-size: 20px; }

.lo-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lo-name {
  font-size: 15px; font-weight: 620; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lo-sub { font-size: 13px; color: var(--text-2); }

.lo-stand {
  flex: none; margin-left: auto;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--line); color: var(--text-2);
}
.lo-stand.st-online   { background: var(--green-soft);  color: var(--green); }
.lo-stand.st-verkauft { background: var(--accent-soft); color: var(--accent); }

.lo-leer {
  margin: 0; font-size: 15px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.lo-leer b { color: var(--text); }

.lo-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

.lo-etikett {
  margin-top: 6px; border-top: 1px solid var(--line); padding-top: 14px;
}
.lo-etikett summary {
  cursor: pointer; font-size: 14px; color: var(--text-2);
  padding: 6px 0;
}
.lo-etikett summary:hover { color: var(--accent); }
.lo-qr {
  width: 168px; margin: 12px 0 8px;
  background: #ffffff; border-radius: 10px; padding: 10px;
}
.lo-qr svg { width: 100%; height: auto; display: block; }
.lo-adresse {
  margin: 0 0 12px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: .1em; color: var(--text-3);
}

body.bogenseite {
  background: var(--bg);
  color: var(--text);
  padding: 0 0 60px;
}

.bg-kopf {
  max-width: 900px; margin: 0 auto; padding: 28px 20px 20px;
  display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap;
  justify-content: space-between;
}
.bg-kopf h1 { margin: 0 0 6px; font-size: 26px; font-weight: 680; }
.bg-kopf p { margin: 0; max-width: 52ch; color: var(--text-2); font-size: 15px; }
.bg-knoepfe { display: flex; gap: 10px; }

.bg-leer {
  max-width: 900px; margin: 0 auto; padding: 0 20px;
  color: var(--text-2); font-size: 15px;
}

.bg-bogen {
  max-width: 900px; margin: 0 auto; padding: 8px 20px;
  display: grid; gap: 6mm;
  grid-template-columns: repeat(auto-fill, minmax(62mm, 1fr));
}

.bg-etikett {
  width: 62mm; height: 40mm;
  display: flex; align-items: center; gap: 3mm;
  padding: 3mm;
  background: #ffffff; color: #111111;
  border: 1px dashed #bbbbbb;           /* die Schnittkante, nur zum Sehen */
  border-radius: 2mm;
  overflow: hidden;
}

.bg-qr { flex: none; width: 30mm; height: 30mm; display: grid; place-items: center; }
.bg-qr svg { width: 100%; height: 100%; display: block; }
.bg-ersatz {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 4mm; font-weight: 700; letter-spacing: .08em;
  text-align: center; color: #111111;
}

.bg-text {
  min-width: 0; display: flex; flex-direction: column; gap: .8mm;
}
.bg-name {
  font-size: 3.6mm; font-weight: 700; line-height: 1.2; color: #111111;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bg-code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 4.2mm; font-weight: 700; letter-spacing: .1em; color: #111111;
}
.bg-notiz {
  font-size: 2.8mm; color: #555555; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bg-marke {
  margin-top: auto;
  font-size: 2.4mm; letter-spacing: .18em; text-transform: uppercase;
  color: #999999;
}

@media print {
  @page { size: A4; margin: 8mm; }
  body.bogenseite { background: #ffffff; padding: 0; }
  .bg-nichtdrucken { display: none !important; }
  .bg-bogen { max-width: none; padding: 0; gap: 4mm; }
  .bg-etikett { border-color: #dddddd; break-inside: avoid; }
}

@media (max-width: 560px) {
  .lo-buehne { padding: 16px 14px 56px; }
  .lo-bild { width: 46px; height: 58px; }
  .bg-kopf { padding: 20px 16px 16px; }
  .bg-bogen { padding: 8px 16px; grid-template-columns: 1fr; }
}

.la-leer {
  grid-column: 1 / -1; margin: 0;
  font-size: 14px; color: var(--text-2); line-height: 1.6;
}

.la-wahl {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 220px; overflow-y: auto;
  margin: 4px 0 2px;
}

.la-wahl-ort {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: var(--inset); border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 10px 12px; cursor: pointer; font: inherit;
  color: var(--text);
  transition: border-color .15s;
}
.la-wahl-ort:hover { border-color: var(--accent); }
.la-wahl-ort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.la-wahl-name {
  font-size: 14px; font-weight: 620; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.la-wahl-code {
  flex: none; margin-left: auto;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .1em; color: var(--accent);
}

.la-oder {
  margin: 10px 0 2px; font-size: 12px; color: var(--text-3);
}

.mb-fenster { max-width: 720px; }

.mb-text { margin: 0 0 16px; color: var(--text-2); font-size: 15px; }
.mb-text code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .88em; color: var(--accent);
  background: var(--inset); padding: 1px 5px; border-radius: 3px;
}

.mb-paar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 18px;
}

.mb-seite { margin: 0; display: flex; flex-direction: column; gap: 8px; }

.mb-seite img,
.mb-ohne {
  width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--inset);
}

.mb-ohne {
  display: grid; place-items: center;
  color: var(--text-3); font-size: 14px; text-align: center; padding: 12px;
}

.mb-seite.ist-neu img { border-color: var(--accent); }

.mb-seite figcaption {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); text-align: center;
}
.mb-seite.ist-neu figcaption { color: var(--accent); font-weight: 650; }

@media (max-width: 560px) {
  .mb-paar { grid-template-columns: 1fr; gap: 12px; }
  .mb-seite img, .mb-ohne { aspect-ratio: 1 / 1; }
}

.ms-liste {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 20px 8px;
}

.ms-zeile { display: flex; flex-direction: column; gap: 7px; }

.ms-kopf { display: flex; align-items: baseline; gap: 10px; }

.ms-kanal { font-size: 14px; font-weight: 650; color: var(--text); }

.ms-stand {
  margin-left: auto;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.ms-zeile.erreicht .ms-stand {
  background: var(--orange-soft); color: var(--orange);
}

.ms-balken {
  height: 8px; border-radius: 999px;
  background: var(--pf-track);
  overflow: hidden;
}
.ms-balken i {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.ms-zeile.erreicht .ms-balken i { background: var(--orange); }

.ms-zahlen {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ms-zahlen b { color: var(--text); font-weight: 650; }

.ms-fuss {
  margin: 0; padding: 10px 20px 18px;
  font-size: 13px; line-height: 1.6; color: var(--text-3);
  max-width: 68ch;
}

@media (max-width: 560px) {
  .ms-liste { padding: 14px 16px 6px; }
  .ms-zahlen { gap: 4px; flex-direction: column; }
  .ms-fuss { padding: 10px 16px 16px; }
}

.zahl-frisch {
  animation: zahlFrisch 1.5s var(--ease-out);
  border-radius: 6px;
}

@keyframes zahlFrisch {
  0%   { background: var(--accent-soft); color: var(--accent);
         box-shadow: 0 0 0 4px var(--accent-soft); }
  55%  { background: var(--accent-soft); color: var(--accent);
         box-shadow: 0 0 0 4px var(--accent-soft); }
  100% { background: transparent; box-shadow: 0 0 0 4px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .zahl-frisch {
    animation: none;
    background: var(--accent-soft); color: var(--accent);
  }
}

.ka-zahl {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 16px 20px 4px;
}
.ka-zahl b {
  font-size: 30px; font-weight: 700; color: var(--accent);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ka-zahl span { font-size: 14px; color: var(--text-2); }

.ka-hart {
  margin: 0; padding: 2px 20px 0;
  font-size: 13.5px; color: var(--text-2);
}

.ka-liste, .sa-liste {
  display: flex; flex-direction: column;
  padding: 12px 12px 4px;
}

.ka-zeile, .sa-zeile {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; text-align: left;
  transition: background .14s;
}
.ka-zeile:hover, .sa-zeile:hover { background: var(--surface-2); }
.ka-zeile:focus-visible, .sa-zeile:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}

.ka-bild, .sa-bild {
  flex: none; width: 42px; height: 42px; border-radius: 8px;
  object-fit: cover; background: var(--surface-2);
}
.ka-bild.leer, .sa-bild.leer {
  display: grid; place-items: center;
  color: var(--text-3); font-size: 17px;
}

.ka-text, .sa-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1 1 auto;
}
.ka-name, .sa-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ka-sub, .sa-sub { font-size: 12px; color: var(--text-3); }

.ka-zahlen {
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  flex: none; font-variant-numeric: tabular-nums;
}
.ka-zahlen b { font-size: 14px; font-weight: 650; color: var(--text); }
.ka-zahlen span { font-size: 11.5px; color: var(--text-3); }

.ka-fuss {
  margin: 0; padding: 6px 20px 16px;
  font-size: 13px; line-height: 1.55; color: var(--text-3);
  max-width: 64ch;
}

.sa-marke {
  flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}

.sa-fuss {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 20px 18px;
}
.sa-fuss .hint { font-size: 13px; color: var(--text-3); }

@media (max-width: 560px) {
  .ka-zahl { padding: 14px 16px 4px; }
  .ka-zahl b { font-size: 26px; }
  .ka-hart, .ka-fuss { padding-left: 16px; padding-right: 16px; }
  .ka-liste, .sa-liste { padding: 10px 8px 4px; }
  .sa-fuss { padding: 8px 16px 16px; }
  .ka-zeile { flex-wrap: wrap; }
  .ka-zahlen { flex-direction: row; align-items: baseline; gap: 8px;
               width: 100%; padding-left: 54px; }
}

.preisspiegel {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-top: 8px; padding: 9px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px; line-height: 1.5; color: var(--text-2);
}
.preisspiegel b { color: var(--text); font-weight: 650; }
.ps-satz { flex: 1 1 auto; min-width: 0; }
.ps-zahlen {
  flex: none; color: var(--text-3);
  font-variant-numeric: tabular-nums; font-size: 12px;
}

@media (max-width: 560px) {
  .ps-zahlen { width: 100%; }
}

.vs-buendel {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 4px; padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
}

.lo-fenster { max-width: 560px; }

.lo-kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-right: 28px;
}
.lo-kopf h2 { margin: 0; }
.lo-code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; letter-spacing: .08em; font-weight: 700;
  padding: 3px 9px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent);
}
.lo-notiz {
  margin: 8px 0 0; font-size: 13.5px; color: var(--text-2); max-width: 60ch;
}

.lo-liste {
  display: flex; flex-direction: column;
  margin: 14px 0 4px; max-height: 46vh; overflow-y: auto;
}
.lo-zeile {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; text-align: left;
  transition: background .14s;
}
.lo-zeile:hover { background: var(--surface-2); }
.lo-zeile:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.lo-bild {
  flex: none; width: 42px; height: 42px; border-radius: 8px;
  object-fit: cover; background: var(--surface-2);
}
.lo-bild.leer {
  display: grid; place-items: center;
  color: var(--text-3); font-size: 17px;
}
.lo-text {
  display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto;
}
.lo-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lo-sub { font-size: 12px; color: var(--text-3); }
.lo-stand {
  flex: none; font-size: 11.5px; color: var(--text-3);
}

.lo-leer {
  margin: 14px 0 4px; font-size: 14px; line-height: 1.6;
  color: var(--text-2); max-width: 58ch;
}

.lo-fuss {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 14px;
}
.lo-fuss .hint { font-size: 12.5px; color: var(--text-3); }

@media (max-width: 560px) {
  .lo-liste { max-height: 52vh; }
  .lo-fuss { flex-direction: column; align-items: stretch; }
}

.start-kopf { display: block; }
.start-kopf .sk-links { min-width: 0; }
.start-kopf .sk-rechts {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; text-align: left; margin-top: 8px; max-width: 72ch;
}
.start-kopf .sk-rechts .tagesspruch { margin: 0; max-width: 72ch; }
.start-kopf .sk-rechts .hero-puls { margin: 0; }

@media (max-width: 1150px) {
  .topbar-actions .sl-konto { padding: 4px; gap: 0; border-radius: 50%; }
  .topbar-actions .sl-konto-text,
  .topbar-actions .sl-konto .sl-pfeil { display: none; }
  .topbar-actions .konto-menue { width: auto; margin-left: 2px; }
  .topbar-actions .konto-menue.auf .sl-konto { border-radius: 50%; }
}

@media (max-width: 900px) and (min-width: 431px) {
  .topbar-actions .rw-sprachklappe summary b { display: none; }
  .topbar-actions .rw-sprachklappe summary { padding: 5px 8px; gap: 4px; }
  .topbar-actions { gap: 6px; }
}

@media (max-width: 430px) {
  .topbar-actions .rw-sprachklappe summary b { display: none; }
}

.mb-neu {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent-soft); color: var(--accent);
  font-family: inherit; font-size: 13px; font-weight: 650;
  cursor: pointer;
  transition: background .16s, box-shadow .16s, transform .12s;
}
.mb-neu:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-1px);
}
.mb-neu:active { transform: translateY(0); }
.mb-neu:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mb-neu:disabled {
  opacity: .6; cursor: default; transform: none; box-shadow: none;
}

.mb-neu-zeichen { font-size: 15px; line-height: 1; }

.mb-neu-preis {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mb-neu-preis i { font-style: normal; opacity: .8; }

@media (max-width: 560px) {
  .mb-neu { padding: 8px 12px; }
}

.lfb-punkt i,
.sx-punkt i,
.gut-marke i,
.mb-neu-zeichen,
.anspruch-punkt {
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2",
               "DejaVu Sans", sans-serif;
  font-variant-emoji: text;
}

.vs-weg {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 0 0 14px; padding: 0; list-style: none;
}
.vs-halt {
  position: relative; flex: 1 1 110px; min-width: 110px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 0 6px;
  text-align: center;
}
.vs-halt:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  left: calc(50% + 9px); right: calc(-50% + 9px); top: 5px;
  height: 2px; border-radius: 2px;
  background: var(--line);
}
.vs-halt.fertig:not(:last-child)::after { background: var(--green); }
.vs-halt-punkt {
  position: relative; z-index: 1;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--surface);
}
.vs-halt.fertig .vs-halt-punkt {
  border-color: var(--green); background: var(--green);
}
.vs-halt.jetzt .vs-halt-punkt {
  border-color: var(--accent); background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  animation: vsPuls 2.2s ease-in-out infinite;
}
.vs-halt-wort { font-size: 11.5px; color: var(--text-3); line-height: 1.3; }
.vs-halt.fertig .vs-halt-wort { color: var(--text-2); }
.vs-halt.jetzt .vs-halt-wort { color: var(--text); font-weight: 650; }
.vs-halt-wann {
  font-size: 10.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

@keyframes vsPuls {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .vs-halt.jetzt .vs-halt-punkt { animation: none; }
}

.vs-nebenweg {
  margin: -6px 0 12px; font-size: 12px; font-weight: 600;
  color: var(--text-2);
}
.vs-nebenweg.retoure, .vs-nebenweg.zurueck { color: var(--red); }
.vs-nebenweg.storniert { color: var(--text-3); }

.vsv-leiste { position: relative; margin: 4px 0 14px; }
.vsv-linie {
  position: absolute; top: 17px; height: 2px; border-radius: 2px;
  left: calc(50% / var(--vsv-n, 4)); right: calc(50% / var(--vsv-n, 4));
  background: var(--line-strong); overflow: hidden;
}
.vsv-fuell {
  position: absolute; inset: 0; border-radius: inherit; background: var(--green);
  transform-origin: left center;
  animation: stb-fuellen .8s cubic-bezier(.2, .7, .2, 1) .1s backwards;
}
.vsv-weg {
  position: relative; display: grid;
  grid-template-columns: repeat(var(--vsv-n, 4), minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.vsv-weg li {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0; padding: 0 6px; text-align: center;
  color: var(--text-3); font-size: 11.5px; line-height: 1.3;
}
.vsv-weg li b { margin-top: 3px; font-size: 12.5px; font-weight: 600; color: inherit; }
.vsv-kreis {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text-3);
}
.vsv-kreis .stb-i { width: 17px; height: 17px; }
.vsv-weg li.fertig { color: var(--text-2); }
.vsv-weg li.fertig .vsv-kreis {
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  background: linear-gradient(var(--green-soft), var(--green-soft)), var(--surface);
  color: var(--green);
}
.vsv-weg li.jetzt { color: var(--text); }
.vsv-weg li.jetzt b { font-weight: 700; }
.vsv-weg li.jetzt .vsv-kreis {
  border-color: var(--accent); background: var(--accent); color: var(--auf-accent);
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.vsv-wann { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.vsv-was { color: var(--text-2); font-size: 11.5px; overflow-wrap: anywhere; }
.vsv-was code {
  padding: 1px 6px; border-radius: 6px; background: var(--inset);
  color: var(--text); font-size: 11px;
}
.vsv-vermerke { display: grid; gap: 8px; margin-top: 12px; }
.vsv-fuss {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.vsv-fuss .hint { flex: 1 1 260px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .vsv-fuell { animation: none; } }
@media (max-width: 560px) {
  .vsv-kreis { width: 30px; height: 30px; }
  .vsv-linie { top: 15px; }
  .vsv-weg li { padding: 0 2px; font-size: 10.5px; }
  .vsv-weg li b { font-size: 11px; }
}

.vs-probleme { display: grid; gap: 8px; margin: 0 0 14px; }
.vs-problem {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--inset);
  border-left: 3px solid var(--text-3);
  font-size: 12.5px;
}
.vs-problem b { color: var(--text); }
.vs-problem span { color: var(--text-2); flex: 1 1 220px; }
.vs-problem .btn { flex: 0 0 auto; }
.vs-problem.warnung { border-left-color: var(--orange); }
.vs-problem.kritisch {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 55%, var(--surface));
}

.vs-warnung {
  display: inline-block; max-width: 220px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--orange);
  background: color-mix(in srgb, var(--orange-soft) 70%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--orange) 30%, transparent);
}
.vs-warnung.kritisch {
  color: var(--red);
  background: color-mix(in srgb, var(--red-soft) 62%, var(--surface));
  border-color: color-mix(in srgb, var(--red) 32%, transparent);
}

@media (max-width: 560px) {
  .vs-weg { flex-direction: column; align-items: flex-start; gap: 8px; }
  .vs-halt {
    flex: 1 1 auto; width: 100%;
    flex-direction: row; align-items: center; gap: 8px;
    padding: 0; text-align: left;
  }
  .vs-halt:not(:last-child)::after {
    left: 5px; right: auto; top: 16px; bottom: -14px;
    width: 2px; height: auto;
  }
  .vs-halt-wann { margin-left: auto; }
}

.vs-weg.unterwegs .vs-halt.fertig:has(+ .vs-halt.jetzt)::after {
  background: linear-gradient(90deg, var(--green), var(--accent), var(--green));
  background-size: 200% 100%;
  animation: vsBand 3.2s linear infinite;
}
.vs-paket {
  position: absolute; z-index: 2; pointer-events: none;
  left: calc(50% + 9px); right: calc(-50% + 9px); top: -4px; height: 18px;
}
.vs-paket i {
  position: absolute; top: 3px; left: 0;
  width: 16px; height: 12px; border-radius: 3px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 65%, var(--surface)) 0 30%,
    var(--accent) 30%);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: vsFahrt 3.2s cubic-bezier(.45, 0, .4, 1) infinite;
}
.vs-paket i::after {
  content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--accent) 55%, var(--text));
  opacity: .5;
}
@keyframes vsFahrt {
  0%   { left: 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% - 16px); opacity: 0; }
}
@keyframes vsBand {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
@media (max-width: 560px) {
  .vs-paket { left: -2px; right: auto; top: 15px; bottom: -13px;
              width: 16px; height: auto; }
  .vs-paket i { left: 2px; width: 10px; height: 12px;
                animation-name: vsFahrtSenkrecht; }
  .vs-paket i::after { left: 0; right: 0; top: 4px; bottom: auto;
                       width: auto; height: 2px; }
}
@keyframes vsFahrtSenkrecht {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: calc(100% - 12px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-paket i { animation: none; left: calc(50% - 8px); top: 3px; opacity: 1; }
  .vs-weg.unterwegs .vs-halt.fertig:has(+ .vs-halt.jetzt)::after { animation: none; }
}

.vs-schritt.hand .vs-punkt {
  border-color: var(--accent); background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 5px var(--accent);
}
.vs-schritt.hand .vs-was b::before {
  content: "\270E\FE0E"; margin-right: 5px;
  color: var(--accent); font-weight: 400;
}

.vs-vermerk-felder {
  display: grid; gap: 12px; margin-top: 18px; text-align: left;
}
.vs-vermerk-felder label {
  display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2);
}
.vs-vermerk-felder input, .vs-vermerk-felder textarea,
.vs-vermerk-felder .aw-feld { width: 100%; }
.vs-vermerk-felder textarea { resize: vertical; min-height: 64px; }
.vs-vermerk-neu { display: grid; gap: 12px; grid-template-columns: 1fr 150px; }
.vs-vermerk-neu[hidden] { display: none; }
@media (max-width: 480px) { .vs-vermerk-neu { grid-template-columns: 1fr; } }

.wz-seite .panel:hover,
.wz-seite .kpi:hover,
.wz-seite .card:hover,
.wz-seite .gh-karte:hover,
.wz-seite .merkmal:hover,
.wz-seite [class$="-karte"]:hover,
.wz-seite [class$="-kachel"]:hover,
.wz-seite [class$="-tafel"]:hover {
  transform: none;
  box-shadow: var(--shadow-1);
}
.wz-seite .panel:hover,
.wz-seite .card:hover,
.wz-seite .gh-karte:hover,
.wz-seite [class$="-karte"]:hover,
.wz-seite [class$="-kachel"]:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

html { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
}
::-webkit-scrollbar-corner { background: transparent; }

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/static/schrift/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.wx-seite {
  --wx-gold-oben: color-mix(in srgb, var(--accent) 72%, var(--text));
  --wx-glanz: color-mix(in srgb, var(--accent) 14%, transparent);
  --wx-rand-gold: color-mix(in srgb, var(--accent) 52%, transparent);
  --wx-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent),
             0 22px 60px -30px color-mix(in srgb, var(--accent) 60%, transparent);
  --wx-flaeche: linear-gradient(180deg, var(--surface-2), var(--surface));
  --wx-feld: color-mix(in srgb, var(--inset) 62%, var(--surface));
  --wx-rand: 24px;
  --wx-rand-oben: 30px;
}
@media (max-width: 1180px) { .wx-seite { --wx-rand: 16px; } }
@media (max-width: 620px)  { .wx-seite { --wx-rand: 12px; --wx-rand-oben: 20px; } }

.wx-i {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.wx-kopf {
  position: relative; isolation: isolate;
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 18px 28px;
  min-height: 200px; padding: 4px 0 30px;
}
.wx-kopf-bild {
  position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * var(--wx-rand-oben)); right: calc(-1 * var(--wx-rand));
  width: min(64%, 920px); height: calc(100% + var(--wx-rand-oben));
  object-fit: cover; object-position: 70% 50%;
  opacity: var(--wx-bild-deckkraft); filter: var(--wx-bild-filter);
  -webkit-mask-image: linear-gradient(to left, #000 38%, transparent 96%),
                      linear-gradient(to bottom, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to left, #000 38%, transparent 96%),
                      linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-composite: intersect;
}
.wx-kopf-text { flex: 1 1 520px; min-width: 0; max-width: 700px; }
.wx-oben {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 8px 0 12px; color: var(--text-2);
  font-size: 11px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase;
}
.wx-oben i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.wx-titel {
  width: fit-content; max-width: 100%;
  margin: 0; padding-bottom: .06em;
  font-size: clamp(40px, 4.4vw, 52px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.04; text-wrap: balance;
  background: linear-gradient(96deg, var(--text) 0 40%, var(--wx-gold-oben) 58%,
                              var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wx-titel-paar { background: none; color: var(--text); }
.wx-titel-paar .wx-gold {
  background: linear-gradient(180deg, var(--wx-gold-oben), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wx-lede {
  margin: 12px 0 0; max-width: 62ch;
  color: var(--text-2); font-size: 15px; line-height: 1.6;
}
.wx-kopf-kachel { margin-bottom: 14px; }
.wx-marke {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0 0; padding: 12px 18px 12px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-2);
}
.wx-marke-zeichen {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-s); color: var(--accent);
  background: radial-gradient(circle at 30% 25%, var(--wx-glanz), var(--inset) 75%);
}
.wx-marke-zeichen .wx-i { width: 26px; height: 26px; }
.wx-marke-text { display: grid; gap: 2px; }
.wx-marke-text b { color: var(--accent); font-size: 15px; font-weight: 700; }
.wx-marke-text i { color: var(--text-2); font-size: 13px; font-style: normal; }
.wx-marke-text b + i { color: var(--text-2); }

.wx-schrift {
  margin: 0; color: var(--accent);
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-size: 24px; font-weight: 600; line-height: 1.05;
  transform: rotate(-7deg); transform-origin: right center;
  text-shadow: 0 0 18px var(--wx-glanz);
}
.wx-schrift-kopf {
  position: absolute; right: 22px; bottom: 6px;
  display: grid; justify-items: end; font-size: 30px;
  transform-origin: center;
}
.wx-schrift-ecke { position: absolute; right: 26px; bottom: 14px; font-size: 24px; }
@media (max-width: 760px) { .wx-schrift-ecke, .wx-schrift-kopf { display: none; } }

.wx-zurueck {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 0; border: 0; background: none;
  color: var(--text-2); font-size: 14px; font-family: inherit; cursor: pointer;
  transition: color .16s;
}
.wx-zurueck:hover { color: var(--text); }
.wx-zurueck:hover .wx-rund { border-color: var(--wx-rand-gold); }
.wx-zurueck:focus-visible { outline: none; }
.wx-zurueck:focus-visible .wx-rund { box-shadow: 0 0 0 3px var(--accent-soft); }

.wx-kpis {
  display: grid; gap: 16px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.wx-kpi {
  display: flex; align-items: center; gap: 18px; min-width: 0;
  padding: 22px 22px; border-radius: var(--radius-l);
  border: 1px solid var(--line-strong);
  background: radial-gradient(90% 90% at 0% 0%, var(--wx-glanz), transparent 60%),
              var(--wx-flaeche);
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.wx-kpi:hover { transform: translateY(-2px); border-color: var(--wx-rand-gold); }
.wx-kpi.haupt { border-color: var(--wx-rand-gold); box-shadow: var(--wx-glow); }
.wx-kpi-ring {
  flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%; color: var(--accent);
  background: radial-gradient(circle at 32% 26%, color-mix(in srgb, var(--accent) 24%, transparent),
                              var(--inset) 72%);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow: 0 0 22px -6px color-mix(in srgb, var(--accent) 50%, transparent);
}
.wx-kpi-ring .wx-i { width: 26px; height: 26px; }
.wx-kpi-text { min-width: 0; }
.wx-kpi-label {
  color: var(--text); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.wx-kpi-zahl {
  margin: 6px 0 4px; color: var(--text);
  font-size: 30px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums;
}
.wx-kpi-sub { color: var(--text-2); font-size: 12px; }

.wx-tafel {
  position: relative; margin: 0 0 18px; padding: 22px 24px;
  border-radius: var(--radius-l); border: 1px solid var(--line-strong);
  background: radial-gradient(80% 70% at 0% 0%, var(--wx-glanz), transparent 58%),
              var(--wx-flaeche);
  box-shadow: var(--shadow-1), inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}
.wx-tafel.gold {
  border-color: var(--wx-rand-gold);
  background: radial-gradient(70% 70% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
              radial-gradient(60% 60% at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
              var(--wx-flaeche);
  box-shadow: var(--wx-glow), inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent);
}
@media (max-width: 620px) {
  .wx-tafel { padding: 18px 16px; }
  .wx-kpi { padding: 18px 16px; }
}
.wx-tkopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-bottom: 20px;
}
.wx-tkopf-text { flex: 1 1 260px; min-width: 0; }
.wx-tkopf-text h2, .wx-lager-links h2, .wx-drei-text h2, .wx-adress-text h2 {
  margin: 0; color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: -.01em;
}
.wx-tkopf-text p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.wx-tkopf-rechts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-left: auto;
}
.wx-zahl { margin-left: 6px; color: var(--accent); font-size: 13px; font-weight: 650; }

.wx-kachel {
  flex: none; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius); color: var(--accent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 15%, var(--inset)), var(--inset));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line-strong));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 7%, transparent);
}
.wx-kachel .wx-i { width: 22px; height: 22px; }
.wx-kachel.gross { width: 56px; height: 56px; }
.wx-kachel.gross .wx-i { width: 28px; height: 28px; }
.wx-kachel.klein { width: 34px; height: 34px; border-radius: var(--radius-s); }
.wx-kachel.klein .wx-i { width: 18px; height: 18px; }
.wx-kachel.winzig { width: 28px; height: 28px; border-radius: var(--radius-s); }
.wx-kachel.winzig .wx-i { width: 16px; height: 16px; }
.wx-kachel.rund { border-radius: 50%; }

.wx-pille {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--wx-feld);
  color: var(--text-2); font-size: 12px; font-weight: 650; white-space: nowrap;
}
.wx-pille .wx-i { width: 15px; height: 15px; }
.wx-pille.gold {
  border-color: var(--wx-rand-gold); color: var(--accent);
  letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.wx-pille.gut {
  border-color: color-mix(in srgb, var(--green) 38%, transparent);
  background: var(--green-soft); color: var(--green);
}
.wx-pille.warn {
  border-color: color-mix(in srgb, var(--gelb) 40%, transparent);
  background: var(--gelb-soft); color: var(--gelb);
}
.wx-pille.aus { color: var(--text-3); }
.wx-pille-frei .wx-i { color: var(--green); stroke-width: 2.2; }
.wx-punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.wx-hinweiszeile {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text-2); font-size: 13px;
}
.wx-hinweiszeile .wx-i { color: var(--accent); }
.wx-infokasten {
  display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 10px 16px 10px 12px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--wx-feld);
}
.wx-infokasten > .wx-i { color: var(--accent); width: 22px; height: 22px; }
.wx-infokasten span { display: grid; gap: 1px; }
.wx-infokasten b { color: var(--text); font-size: 13px; }
.wx-infokasten i { color: var(--text-2); font-size: 12px; font-style: normal; }

.wx-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 16px; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: var(--wx-feld);
  color: var(--text); font-size: 13px; font-family: inherit; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.wx-chip .wx-i { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.wx-chip:hover { border-color: var(--wx-rand-gold); }
.wx-chip:hover .wx-i { transform: translateX(3px); }
.wx-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.wx-knopf {
  position: relative; overflow: hidden;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 42px; padding: 0 18px; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: var(--wx-feld);
  color: var(--text); font-size: 14px; font-weight: 650; font-family: inherit;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform .14s var(--ease), box-shadow .2s, border-color .2s, background .2s;
}
.wx-knopf:hover { border-color: var(--wx-rand-gold); text-decoration: none; }
.wx-knopf:active { transform: scale(.98); }
.wx-knopf:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.wx-knopf .wx-i { width: 18px; height: 18px; }
.wx-knopf.gold {
  border-color: transparent; color: var(--auf-accent);
  background: linear-gradient(180deg, var(--wx-gold-oben), var(--accent) 72%);
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--accent) 80%, transparent),
              inset 0 1px 0 var(--wx-glanzlicht);
}
.wx-knopf.gold::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, var(--wx-glanzlicht) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease-out);
}
.wx-knopf.gold:hover::after { transform: translateX(120%); }
.wx-knopf.gold:hover { box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--accent) 90%, transparent),
                                  inset 0 1px 0 var(--wx-glanzlicht); }
.wx-knopf.umriss { background: transparent; }
.wx-knopf.umriss:hover { background: var(--wx-feld); }
.wx-knopf.gross { min-height: 52px; padding: 0 26px; border-radius: var(--radius); font-size: 15px; }
.wx-knopf.gross .wx-i { width: 20px; height: 20px; }
.wx-knopf.klein { min-height: 32px; padding: 0 12px; font-size: 13px; }
.wx-knopf.klein .wx-i { width: 15px; height: 15px; }
.wx-knopf[disabled] { opacity: .5; pointer-events: none; }
.wx-knopf.laedt { animation: wxAtmen 1.1s ease-in-out infinite; pointer-events: none; }
.wx-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

.wx-rund {
  flex: none; display: inline-grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: var(--wx-feld);
  color: var(--text-2); cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.wx-rund:hover { color: var(--text); border-color: var(--wx-rand-gold); }
.wx-rund:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.wx-rund.klein { width: 32px; height: 32px; }
.wx-rund.klein .wx-i { width: 16px; height: 16px; }
.wx-rund.dreht .wx-i { animation: wxDrehen .8s linear infinite; }
.wx-rund[disabled] { pointer-events: none; }
.wx-link {
  border: 0; background: none; padding: 4px 2px; cursor: pointer;
  color: var(--accent); font-size: 13px; font-weight: 650; font-family: inherit;
}
.wx-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 4px; }

.wx-frei {
  display: grid; align-items: center; gap: 18px 22px; padding: 28px 28px 22px;
  grid-template-columns: minmax(0, 2fr) minmax(120px, .5fr) minmax(220px, .8fr);
}
.wx-frei-text { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.wx-frei-inhalt { min-width: 0; }
.wx-frei-inhalt h2 {
  margin: 16px 0 10px; color: var(--text);
  font-size: 30px; font-weight: 750; letter-spacing: -.02em; line-height: 1.15;
  text-wrap: balance;
}
.wx-frei-inhalt p { margin: 0; max-width: 60ch; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.wx-frei-bild { display: grid; place-items: center; }
.wx-frei-bild img {
  width: 100%; max-width: 250px; height: auto;
  filter: drop-shadow(0 24px 36px color-mix(in srgb, var(--accent) 38%, transparent));
}
.wx-frei-seite { display: grid; gap: 18px; justify-items: end; }
.wx-merkliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.wx-merkliste li { display: flex; align-items: center; gap: 14px; color: var(--text); font-size: 14px; }
.wx-merkliste li > span:not(.wx-kachel) { display: grid; gap: 2px; }
.wx-merkliste b { font-size: 15px; font-weight: 700; }
.wx-merkliste i { color: var(--text-2); font-size: 13px; font-style: normal; }
.wx-merkliste.glas {
  padding: 16px 20px 16px 16px; border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.wx-kleingedruckt {
  grid-column: 1 / -1; margin: 4px 0 0; padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  color: var(--text-3); font-size: 12px; line-height: 1.5;
}
@media (max-width: 1400px) {
  .wx-frei { grid-template-columns: minmax(0, 1fr) minmax(170px, .6fr); }
  .wx-frei-seite { grid-column: 1 / -1; justify-items: start; grid-template-columns: auto 1fr; align-items: center; }
}
@media (max-width: 760px) {
  .wx-frei { grid-template-columns: 1fr; padding: 22px 18px 18px; }
  .wx-frei-bild { display: none; }
  .wx-frei-seite { grid-template-columns: 1fr; }
  .wx-frei-text { flex-direction: column; gap: 14px; }
}

.wx-ansteht .wx-tkopf { margin-bottom: 0; }
.wx-offen { list-style: none; margin: 16px 0 0; padding: 14px 0 0; display: grid; gap: 6px;
            border-top: 1px dashed var(--line-strong); }
.wx-offen-punkt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--text); text-align: left;
  font-size: 14px; font-family: inherit; cursor: pointer;
  transition: background .16s;
}
.wx-offen-punkt:hover { background: var(--wx-feld); }
.wx-offen-punkt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.wx-offen-punkt > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.wx-offen-punkt > .wx-i { color: var(--text-3); width: 16px; height: 16px; }

.wx-schritte {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 22px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.wx-schritte.drei { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.wx-schritt { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: start; }
.wx-schritt-ring {
  display: grid; place-items: center; width: 64px; height: 64px; flex: none;
  border-radius: 50%; color: var(--accent);
  border: 1.5px solid var(--accent);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 20%, transparent), var(--inset) 70%);
  box-shadow: 0 0 26px -6px color-mix(in srgb, var(--accent) 60%, transparent),
              inset 0 0 14px color-mix(in srgb, var(--accent) 18%, transparent);
}
.wx-schritt-ring .wx-i { width: 28px; height: 28px; }
.wx-schritt-ring.klein { width: 48px; height: 48px; }
.wx-schritt-ring.klein .wx-i { width: 22px; height: 22px; }
.wx-schritt-text { position: relative; min-width: 0; }
.wx-schritt h3 { margin: 12px 0 8px; color: var(--text); font-size: 17px; font-weight: 700; }
.wx-schritt p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.wx-nr {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: var(--radius-s); border: 1px solid var(--wx-rand-gold);
  background: color-mix(in srgb, var(--accent) 10%, var(--inset));
  color: var(--accent); font-size: 14px; font-weight: 750;
}
.wx-schritte:not(.drei) .wx-schritt:not(:last-child) .wx-schritt-text::before {
  content: ""; position: absolute; left: 44px; right: 12px; top: 14px; height: 2px;
  background: radial-gradient(circle, var(--wx-rand-gold) 1px, transparent 1.6px) 0 50% / 8px 2px repeat-x;
  animation: wxPunkte 1.1s linear infinite;
}
.wx-schritte:not(.drei) .wx-schritt:not(:last-child) .wx-schritt-text::after {
  content: ""; position: absolute; right: 12px; top: 10px; width: 8px; height: 8px;
  border-top: 1.6px solid var(--wx-rand-gold); border-right: 1.6px solid var(--wx-rand-gold);
  transform: rotate(45deg);
}
.wx-schritt-kasten {
  grid-template-columns: 48px minmax(0, 1fr); padding: 18px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: color-mix(in srgb, var(--inset) 35%, transparent);
}
.wx-schritt-kasten h3 { margin-top: 10px; font-size: 15px; }
@media (max-width: 1320px) {
  .wx-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wx-schritte:not(.drei) .wx-schritt .wx-schritt-text::before,
  .wx-schritte:not(.drei) .wx-schritt .wx-schritt-text::after { display: none; }
}
@media (max-width: 700px) { .wx-schritte { grid-template-columns: 1fr; } }

.wx-fakten { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wx-fakt {
  display: flex; align-items: center; gap: 16px; min-width: 0;
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--wx-feld);
}
.wx-fakt > div > b { display: block; color: var(--text); font-size: 15px; font-weight: 700; }
.wx-fakt > div > span { display: block; margin-top: 3px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.wx-mehr { margin-top: 16px; }
.wx-mehr > summary {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  list-style: none; cursor: pointer; color: var(--text-2); font-size: 13px; font-weight: 600;
}
.wx-mehr > summary::-webkit-details-marker { display: none; }
.wx-mehr > summary:hover { color: var(--text); }
.wx-mehr > summary .wx-i { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.wx-mehr[open] > summary .wx-i { transform: rotate(180deg); }
.wx-mehr > summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-radius: 4px; }
.wx-punkte { margin: 12px 0 0; padding: 0 0 0 20px; display: grid; gap: 6px;
             color: var(--text-2); font-size: 13px; line-height: 1.55; max-width: 80ch; }
.wx-punkte li::marker { color: var(--accent); }
.wx-tafel:has(.wx-schrift-ecke) { padding-bottom: 46px; }

.wx-form { display: grid; gap: 16px; }
.wx-feld { display: grid; gap: 7px; min-width: 0; align-content: start; }
.wx-feld > label {
  color: var(--text); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.wx-feld > label i { color: var(--text-3); font-style: normal; font-weight: 500;
                     letter-spacing: 0; text-transform: none; }
.wx-seite input[type=text], .wx-seite input[type=search], .wx-seite textarea {
  background: var(--wx-feld); border-color: var(--line-strong);
  padding: 11px 14px; font-size: 14px;
}
.wx-seite input::placeholder, .wx-seite textarea::placeholder { color: var(--text-3); }
.wx-eingabe { position: relative; display: flex; align-items: center; min-width: 0; }
.wx-eingabe > input, .wx-eingabe > .aw-feld { flex: 1 1 auto; min-width: 0; }
.wx-seite .wx-eingabe > input { padding-left: 44px; }
.wx-eingabe > .aw-feld .aw-knopf { padding: 11px 14px 11px 46px; background: var(--wx-feld); }
.wx-vor {
  position: absolute; left: 14px; z-index: 1; pointer-events: none;
  color: var(--text-2);
}
svg.wx-vor { width: 18px; height: 18px; }
.wx-waehrung {
  top: 50%; transform: translateY(-50%);
  padding-right: 10px; border-right: 1px solid var(--line-strong);
  font-size: 15px; font-weight: 650; line-height: 18px;
}
.wx-seite .wx-eingabe:has(.wx-waehrung) > input { padding-left: 48px; }
.wx-flagge { width: 22px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line-strong); }
.wx-feld-reihe { display: flex; flex-wrap: wrap; gap: 12px; }
.wx-feld-reihe > .wx-eingabe { flex: 1 1 320px; }
.wx-feld-reihe > .wx-knopf { flex: 0 0 auto; min-height: 46px; }
.wx-hinweis { color: var(--text-3); font-size: 12px; line-height: 1.5; transition: color .2s; }
.wx-hinweis.erkannt { color: var(--accent); }
.wx-seite input[readonly], .wx-seite textarea[readonly] {
  background: transparent; cursor: default; resize: none;
}
.wx-schaetzung { color: var(--text-2); }
.wx-schaetzung[hidden] { display: none; }
.wx-regeln { display: grid; gap: 10px; max-width: 76ch; }
.wx-regeln p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.6; white-space: pre-line; }
.wx-ziffern { display: flex; flex-wrap: wrap; gap: 8px; animation: wxRein .25s var(--ease-out) both; }
.wx-ziffern[hidden] { display: none; }
.wx-ziffer {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 650;
  cursor: pointer; transition: border-color .2s, color .2s, background-color .2s;
}
.wx-ziffer:hover { border-color: var(--wx-rand-gold); color: var(--text); }
.wx-ziffer[aria-pressed="true"] { border-color: var(--wx-rand-gold); color: var(--accent);
                                  background: var(--accent-soft); }
.wx-ziffer:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.wx-felder { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wx-felder.drei { grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(220px, 2.1fr); }
.wx-voll { grid-column: 1 / -1; }
.wx-felder.adresse { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wx-felder.adresse > :nth-child(-n+3) { grid-column: span 4; }
.wx-felder.adresse > :nth-child(4) { grid-column: span 2; }
.wx-felder.adresse > :nth-child(5),
.wx-felder.adresse > :nth-child(6) { grid-column: span 3; }
.wx-felder.adresse > :nth-child(7) { grid-column: span 4; }
@media (max-width: 1100px) {
  .wx-felder.drei { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .wx-felder.adresse > * { grid-column: span 6 !important; }
}
@media (max-width: 620px) { .wx-felder.adresse > * { grid-column: span 12 !important; } }
.wx-bilder { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; }
.wx-bilder img {
  flex: none; width: 72px; height: 96px; object-fit: cover;
  border-radius: var(--radius-s); border: 1px solid var(--line-strong); background: var(--inset);
  animation: wxRein .35s var(--ease-out) both;
}
.wx-mehr-form { margin: 0; }
.wx-mehr-form > summary { font-size: 14px; color: var(--text); }
.wx-mehr-form > summary .wx-i { width: 16px; height: 16px; }
.wx-mehr-form[open] > summary .wx-i { transform: rotate(90deg); }
.wx-mehr-form > .wx-felder { margin-top: 16px; animation: wxRein .3s var(--ease-out) both; }
.wx-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
  padding-top: 18px; border-top: 1px dashed var(--line-strong);
}
.wx-fuss-hinweis {
  flex: 1 1 280px; display: flex; align-items: center; gap: 12px; margin: 0;
  color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.wx-merkmale {
  display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none;
  margin: 0 0 0 auto; padding: 0 0 0 22px; border-left: 1px solid var(--line-strong);
}
.wx-merkmale li { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 13px; }
.wx-merkmale .wx-i { width: 22px; height: 22px; color: var(--accent); }
@media (max-width: 900px) { .wx-merkmale { margin-left: 0; padding-left: 0; border-left: 0; } }
.wx-einwilligung {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  color: var(--text-2); font-size: 13px; line-height: 1.55; max-width: 80ch;
}
.wx-einwilligung .hk-haken { margin-top: 2px; }
.wx-einwilligung a { color: var(--accent); }
.wx-antrag { display: grid; gap: 14px; max-width: 760px; }
.wx-absatz { margin: 0; max-width: 72ch; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.wx-grund b { color: var(--text); }
.wx-klein { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.wx-ref { display: block; margin-top: 6px; color: var(--text-3); font-size: 12px; }
.wx-ref b { color: var(--text-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.wx-still {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 2px;
  color: var(--text-3); font-size: 13px; line-height: 1.55;
}
.wx-still .wx-i { width: 16px; height: 16px; }
.wx-filter { flex: 1 1 420px; justify-content: flex-end; }
.wx-suche { flex: 1 1 240px; max-width: 340px; }
.aw-wx-sort { width: 200px; flex: none; }
.wx-filter .aw-knopf { padding: 11px 14px; background: var(--wx-feld); }

.wx-leer {
  display: grid; justify-items: center; gap: 6px; text-align: center;
  padding: 34px 20px; border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--inset) 30%, transparent);
  color: var(--text-2); font-size: 13px;
}
.wx-leer b { color: var(--text); font-size: 15px; font-weight: 700; }
.wx-leer .wx-knopf { margin-top: 10px; }
.wx-leer-zeichen { width: 44px; height: 44px; margin-bottom: 6px; color: var(--text-3);
                   animation: wxSchweben 5s ease-in-out infinite; }
.wx-leer.klein {
  display: flex; align-items: center; gap: 14px; justify-items: start; text-align: left;
  padding: 18px 20px;
}
.wx-leer.klein .wx-leer-zeichen { width: 26px; height: 26px; margin: 0; }
.wx-sperre { margin: 8px 0 18px; padding: 44px 20px; }
.wx-leer-zeichen.wx-dreht { color: var(--accent); animation: sanduhr 4.5s var(--ease, ease-in-out) infinite; }

.wx-liste { display: grid; gap: 12px; }
.wx-zeile {
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--inset) 38%, var(--surface));
  transition: border-color .2s, box-shadow .25s;
}
.wx-zeile:hover { border-color: var(--wx-rand-gold);
                  box-shadow: 0 14px 34px -24px color-mix(in srgb, var(--accent) 70%, transparent); }
.wx-zeile.aus { opacity: .62; }
.wx-zeile.neu { animation: wxAufleuchten 1.6s var(--ease-out) both; }
.wx-zeile-kopf {
  display: grid; align-items: center; gap: 14px 18px; padding: 14px 16px;
  grid-template-columns: 88px minmax(0, 1fr) auto auto;
  grid-template-areas: "bild text preis griffe";
}
.wx-zeile-bild {
  grid-area: bild; width: 88px; height: 88px; border-radius: var(--radius-s); overflow: hidden;
  display: grid; place-items: center; background: var(--inset); color: var(--text-3);
}
.wx-zeile-bild img { width: 100%; height: 100%; object-fit: cover; }
.wx-zeile-bild .wx-i { width: 30px; height: 30px; }
.wx-zeile-text { grid-area: text; min-width: 0; }
.wx-zeile-text h3 { margin: 0 0 4px; color: var(--text); font-size: 15px; font-weight: 700;
                    overflow-wrap: anywhere; }
.wx-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  margin: 0 0 8px; color: var(--text-2); font-size: 13px;
}
.wx-meta i { color: var(--text-3); font-style: normal; }
.wx-zeile-preis { grid-area: preis; text-align: right; }
.wx-zeile-preis b { display: block; color: var(--text); font-size: 17px; font-weight: 750;
                    font-variant-numeric: tabular-nums; }
.wx-zeile-preis span { color: var(--text-2); font-size: 12px; }
.wx-zeile-griffe { grid-area: griffe; display: flex; gap: 8px; }
.wx-klapp .wx-i { transition: transform .25s var(--ease); }
.wx-zeile.auf .wx-klapp { border-color: var(--wx-rand-gold); color: var(--accent); }
.wx-zeile.auf .wx-klapp .wx-i { transform: rotate(90deg); }
.wx-zeile-mehr { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.wx-zeile.auf .wx-zeile-mehr { grid-template-rows: 1fr; }
.wx-zeile-mehr > div {
  min-height: 0; overflow: hidden; display: grid; gap: 8px;
  padding: 0 16px 0 122px;
  visibility: hidden; transition: visibility 0s linear .3s;
}
.wx-zeile.auf .wx-zeile-mehr > div { padding-bottom: 16px; visibility: visible; transition-delay: 0s; }
@media (max-width: 760px) {
  .wx-zeile-kopf { grid-template-columns: 64px minmax(0, 1fr) auto;
                   grid-template-areas: "bild text griffe" "bild preis griffe"; }
  .wx-zeile-bild { width: 64px; height: 64px; }
  .wx-zeile-preis { text-align: left; }
  .wx-zeile-griffe { flex-direction: column; }
  .wx-zeile-mehr > div { padding-left: 16px; }
}
.wx-daten { margin: 0; color: var(--text-2); font-size: 13px; }
.wx-beschreibung { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.55;
                   white-space: pre-line; max-height: 8.5em; overflow: auto; }
.wx-sendung {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0; color: var(--text-2); font-size: 13px;
}
.wx-sendung > span { color: var(--text-3); }
.wx-sendung > i { font-style: normal; }
.wx-sendung a { color: var(--accent); }
.wx-sendung.fehlt { color: var(--gelb); }
.wx-sendung .wx-i { width: 15px; height: 15px; }
.wx-kopie {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 10px; border: 1px dashed var(--line-strong); border-radius: var(--radius-s);
  background: var(--wx-feld); color: var(--text);
  font: 600 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: copy; overflow-wrap: anywhere;
}
.wx-kopie .wx-i { width: 14px; height: 14px; color: var(--text-3); }
.wx-kopie:hover { border-color: var(--accent); }
.wx-kopie:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.wx-notiz {
  margin: 0; padding: 10px 12px; border-radius: var(--radius-s);
  border-left: 2px solid var(--gelb);
  background: var(--gelb-soft); color: var(--text); font-size: 13px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.wx-leitungsstand { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-3); font-size: 12px; }
.wx-leitungsstand .wx-i { width: 14px; height: 14px; }
.wx-leitungsstand.gut { color: var(--green); }
.wx-tat { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.wx-menue {
  position: absolute; z-index: 380; min-width: 230px;
  display: grid; gap: 2px; padding: 6px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: var(--surface-2); box-shadow: var(--shadow-3);
  animation: wxMenue .16s var(--ease-out) both;
}
.wx-menue-punkt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--text); text-align: left; text-decoration: none;
  font-size: 14px; font-family: inherit; cursor: pointer;
}
.wx-menue-punkt .wx-i { width: 17px; height: 17px; color: var(--text-2); }
.wx-menue-punkt:hover, .wx-menue-punkt:focus-visible { outline: none; background: var(--wx-feld); text-decoration: none; }
.wx-menue-punkt.gefahr, .wx-menue-punkt.gefahr .wx-i { color: var(--red); }
.wx-knopf.gefahr:hover { border-color: color-mix(in srgb, var(--red) 55%, transparent); color: var(--red); }

.wx-drei {
  display: grid; align-items: center; gap: 22px 28px; padding: 26px 30px;
  grid-template-columns: minmax(0, 1.45fr) minmax(170px, .8fr) minmax(210px, .75fr);
}
.wx-drei-text { display: flex; align-items: flex-start; gap: 22px; min-width: 0; }
.wx-drei-text h2 { font-size: 24px; margin-top: 6px; }
.wx-drei-text p { margin: 12px 0 0; max-width: 60ch; color: var(--text-2); font-size: 15px; line-height: 1.65; }
.wx-drei-bild { position: relative; display: grid; place-items: center; }
.wx-drei-bild img {
  width: 100%; max-width: 250px; height: auto;
  filter: drop-shadow(0 22px 34px color-mix(in srgb, var(--accent) 32%, transparent));
}
.wx-bildrahmen {
  position: absolute; left: 0; top: 4px; z-index: 1;
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: var(--radius); border: 1.5px solid var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  box-shadow: 0 0 24px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: rotate(-12deg);
  animation: wxSchwebenSchraeg 6s ease-in-out -2s infinite;
}
.wx-bildrahmen .wx-i { width: 30px; height: 30px; }
@media (max-width: 1400px) {
  .wx-drei { grid-template-columns: minmax(0, 1fr) minmax(170px, .6fr); }
  .wx-drei > .wx-merkliste { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (max-width: 760px) {
  .wx-drei { grid-template-columns: 1fr; padding: 22px 18px; }
  .wx-drei-bild { display: none; }
  .wx-drei-text { flex-direction: column; gap: 14px; }
}
.wx-lagertafel {
  display: grid; gap: 20px 28px; align-items: start; padding: 26px 30px;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.6fr);
}
.wx-lager-links { display: flex; align-items: flex-start; gap: 20px; }
.wx-lager-links p { margin: 12px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.65; }
@media (max-width: 1000px) { .wx-lagertafel { grid-template-columns: 1fr; padding: 22px 18px; } }
.wx-lager { min-width: 0; }
.wx-lager-raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.wx-lagerkarte {
  display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--inset) 38%, var(--surface));
  transition: border-color .2s;
}
.wx-lagerkarte:hover { border-color: var(--wx-rand-gold); }
.wx-lagerkarte.problem { border-color: color-mix(in srgb, var(--gelb) 60%, transparent); }
.wx-lagerkarte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wx-lagerkarte-kopf h3 { flex: 1 1 140px; min-width: 0; margin: 0; color: var(--text);
                         font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.wx-lagerkarte .wx-meta { margin: 0; }
.wx-fotos { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.wx-fotos > .wx-still { grid-column: 1 / -1; }
.wx-foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-s); background: var(--inset); }
.wx-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease); }
.wx-foto:hover img { transform: scale(1.06); }
.wx-foto:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.wx-extern { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 13px; }
.wx-extern a { color: var(--accent); }

.wx-stufe {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 16px;
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2vw, 20px); border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
  background: color-mix(in srgb, var(--inset) 32%, transparent);
}
.wx-stufe > .wx-nr { margin-top: 9px; }
.wx-stufe-inhalt { flex: 1 1 360px; min-width: 0; }
.wx-stufe-inhalt h3 { margin: 12px 0 4px; color: var(--text); font-size: 15px; font-weight: 700; }
.wx-stufe-inhalt > p { margin: 0 0 14px; color: var(--text-2); font-size: 13px; }
.wx-stufe-schluss { align-items: center; }
.wx-stufe-schluss .wx-stufe-inhalt h3 { margin-top: 0; }
.wx-stufe-schluss .wx-stufe-inhalt > p { margin: 0; }
.wx-stufe-schluss > .wx-nr { margin-top: 0; }
.wx-stufe-schluss > .wx-knopf { margin-left: auto; }
.wx-wahlliste { display: grid; gap: 2px; }
.wx-wahlkopf { display: flex; justify-content: flex-end; }
.wx-wahlzeile {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 8px 6px; border-radius: var(--radius-s); cursor: pointer;
}
.wx-wahlzeile:hover { background: var(--wx-feld); }
.wx-wahl-bild {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; overflow: hidden;
  border-radius: var(--radius-s); background: var(--inset); color: var(--text-3);
}
.wx-wahl-bild img { width: 100%; height: 100%; object-fit: cover; }
.wx-wahl-titel { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: 14px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-wahl-dazu { flex: none; color: var(--text-3); font-size: 12px; font-variant-numeric: tabular-nums; }

.wx-sammelkarte {
  display: grid; gap: 14px; padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--inset) 38%, var(--surface));
  transition: border-color .2s;
}
.wx-sammelkarte:hover { border-color: var(--wx-rand-gold); }
.wx-sammelkarte.aus { opacity: .62; }
.wx-sammel-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.wx-sammel-titel { flex: 1 1 220px; min-width: 0; }
.wx-sammel-titel h3 { margin: 0 0 3px; color: var(--text); font-size: 15px; font-weight: 700; }
.wx-sammel-titel .wx-meta { margin: 0; }
.wx-weg {
  list-style: none; margin: 2px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.wx-weg li {
  position: relative; padding-top: 22px; text-align: center;
  color: var(--text-3); font-size: 12px; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wx-weg li::before {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: var(--line-strong);
}
.wx-weg li:first-child::before { left: 50%; }
.wx-weg li:last-child::before { right: 50%; }
.wx-weg li.fertig { color: var(--text-2); }
.wx-weg li.fertig::before { background: var(--green); }
.wx-weg li.jetzt { color: var(--text); }
.wx-weg li.jetzt::before { background: linear-gradient(90deg, var(--green) 50%, var(--line-strong) 50%); }
.wx-weg li:first-child.jetzt::before { background: var(--line-strong); }
.wx-weg li > i {
  position: absolute; top: 1px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong);
}
.wx-weg li.fertig > i { background: var(--green); border-color: var(--green); }
.wx-weg li.jetzt > i { background: var(--accent); border-color: var(--accent);
                       animation: wxPuls 2.2s ease-out infinite; }
.wx-preisblock {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line-strong));
  background: radial-gradient(80% 120% at 0% 0%, var(--wx-glanz), transparent 70%), var(--wx-feld);
}
.wx-preisblock > div { display: grid; gap: 2px; }
.wx-preisblock small { color: var(--text-2); font-size: 11px; font-weight: 700;
                       letter-spacing: .06em; text-transform: uppercase; }
.wx-preisblock b { color: var(--text); font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; }
.wx-preisblock span { color: var(--text-2); font-size: 12px; }
.wx-messblock small { text-transform: none; letter-spacing: 0; font-size: 12px; }
.wx-bezahlt { display: inline-flex; align-items: center; gap: 6px; color: var(--green) !important; }
p.wx-bezahlt { margin: 0; font-size: 13px; }
.wx-laeuft { display: flex; align-items: center; gap: 8px; max-width: 36ch; color: var(--gelb); }
.wx-laeuft .wx-i { width: 16px; height: 16px; flex: none; }
.wx-absage { display: flex; align-items: flex-start; gap: 8px; max-width: 72ch; color: var(--gelb); }
.wx-absage .wx-i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.wx-bezahlt .wx-i { width: 15px; height: 15px; }

.wx-kostenzeile {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 12px 16px;
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--inset) 38%, var(--surface));
}
.wx-kosten-was { display: grid; gap: 2px; min-width: 0; }
.wx-kosten-was b { color: var(--text); font-size: 14px; }
.wx-kosten-was > i { display: flex; flex-wrap: wrap; gap: 0 8px; color: var(--text-2); font-size: 12px; font-style: normal; }
.wx-kosten-was > i i { font-style: normal; color: var(--text-3); }
.wx-kosten-betrag { color: var(--text); font-size: 15px; font-variant-numeric: tabular-nums; }
.wx-kosten-was > .wx-knopf { justify-self: start; margin-top: 6px; }
@media (max-width: 620px) {
  .wx-kostenzeile { grid-template-columns: 34px minmax(0, 1fr); }
  .wx-kostenzeile > .wx-pille, .wx-kosten-betrag { grid-column: 2; justify-self: start; }
}

.wx-namen { display: grid; gap: 18px; margin-top: 14px; }
.wx-namenliste { display: grid; gap: 8px; min-width: 0; }
.wx-namenliste h3 { margin: 0; color: var(--text); font-size: 14px; }
.wx-namenliste > .wx-link { justify-self: start; }
.wx-namenzeile { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.wx-namenzeile > .wx-eingabe { flex: 1 1 220px; }

.wx-code-reihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.wx-code-feld { flex: 0 1 600px; display: grid; gap: 12px; min-width: 0; }
.wx-code-box {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 12px 12px 12px 26px; border-radius: var(--radius);
  border: 1px solid var(--wx-rand-gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--inset)), var(--inset));
  box-shadow: var(--wx-glow);
  animation: wxGlimmen 4.5s ease-in-out infinite;
}
.wx-code {
  flex: 1 1 240px; min-width: 0; color: var(--text); cursor: copy; user-select: all;
  font: 700 30px/1.25 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  letter-spacing: .26em; overflow-wrap: anywhere;
}
.wx-codetafel .wx-schrift { flex: 0 1 250px; font-size: 30px; text-align: right; margin-right: 12px; }
@media (max-width: 900px) { .wx-codetafel .wx-schrift { display: none; } }
.wx-adresstafel {
  display: grid; align-items: center; gap: 20px 28px; padding: 24px 28px;
  grid-template-columns: minmax(0, 1.4fr) minmax(150px, .6fr) minmax(240px, 1fr);
}
.wx-adress-text { display: flex; align-items: flex-start; gap: 20px; min-width: 0; }
.wx-adress-text p { margin: 12px 0 0; max-width: 60ch; color: var(--text-2); font-size: 14px; line-height: 1.65; }
.wx-adress-bild { position: relative; display: grid; place-items: center; }
.wx-adress-bild img {
  width: 100%; max-width: 190px; height: auto;
  filter: drop-shadow(0 18px 28px color-mix(in srgb, var(--accent) 30%, transparent));
}
.wx-bahn {
  position: absolute; left: -26px; top: 6px; width: 110px; height: 55px;
  fill: none; stroke: var(--wx-rand-gold); stroke-width: 1.4; stroke-dasharray: 2 6;
  stroke-linecap: round; animation: wxBahn 1.4s linear infinite;
}
.wx-adressfeld { display: grid; gap: 10px; justify-items: start; }
.wx-adresszeilen {
  display: grid; gap: 2px; min-width: 0; width: 100%;
  padding: 14px 16px; border: 1px dashed var(--wx-rand-gold);
  border-radius: var(--radius); background: var(--wx-feld);
  color: var(--text); font-size: 14px; font-style: normal; line-height: 1.5;
}
@media (max-width: 1400px) {
  .wx-adresstafel { grid-template-columns: minmax(0, 1fr) minmax(150px, .5fr); }
  .wx-adresstafel > .wx-adressfeld, .wx-adresstafel > .wx-leer { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .wx-adresstafel { grid-template-columns: 1fr; padding: 22px 18px; }
  .wx-adress-bild { display: none; }
  .wx-adress-text { flex-direction: column; gap: 14px; }
}

.wx-antraege { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wx-antrag-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--inset) 38%, var(--surface));
}
.wx-antrag-wer { display: grid; gap: 2px; flex: 1 1 200px; min-width: 0; }
.wx-antrag-wer b, .wx-antrag-wer i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-antrag-wer b { color: var(--text); font-size: 14px; }
.wx-antrag-wer i { color: var(--text-3); font-size: 12px; font-style: normal; }
.wx-antrag-wann { color: var(--text-2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wx-antrag-tat { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-antrag-tat:has(.wx-nummer) { flex: 1 1 340px; }
.wx-seite .wx-antrag-tat .wx-nummer { flex: 1 1 210px; width: auto; min-width: 0; padding: 7px 12px; font-size: 13px; }
.wx-seite .wx-antrag-tat .wx-adresse-eingabe { flex-basis: 100%; order: 1; resize: vertical; line-height: 1.45; }

.wx-leitung-reihe { display: grid; gap: 20px; align-items: center; grid-template-columns: minmax(0, 1fr) 220px; }
.wx-leitung {
  display: grid; gap: 14px; min-width: 0; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--wx-feld);
}
.wx-leitung-bild { position: relative; display: grid; place-items: center; }
.wx-leitung-bild img { width: 100%; max-width: 150px; height: auto;
                       filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--accent) 30%, transparent)); }
.wx-leitung-bild .wx-schrift { position: absolute; right: 0; bottom: 4px; font-size: 24px; }
@media (max-width: 900px) {
  .wx-leitung-reihe { grid-template-columns: 1fr; }
  .wx-leitung-bild { display: none; }
}
.wx-pruefliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wx-pruefliste li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.wx-pruefliste li > span {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-size: 12px; font-weight: 800;
}
.wx-pruefliste li.gut > span { background: var(--green-soft); color: var(--green); }
.wx-pruefliste li.warn > span { background: var(--gelb-soft); color: var(--gelb); }
.wx-adressen { display: grid; gap: 8px; }
.wx-adressen .wx-klein { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wx-adresszeile { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.wx-adresszeile code {
  padding: 6px 10px; border-radius: var(--radius-s); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); font-size: 12px; overflow-wrap: anywhere;
}
.wx-zaehler { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--text-2); font-size: 13px; }
.wx-zaehler b { color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; }
.wx-eingang { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.wx-eingang li { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.wx-eingang li > i { color: var(--text-3); font-style: normal; }
.wx-eingang li > b { color: var(--text); font-weight: 600; }
.wx-doppelt {
  display: grid; gap: 6px; padding: 10px 14px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--gelb) 55%, transparent); background: var(--gelb-soft);
}
.wx-leitung .wx-mehr { margin-top: 0; }

.wx-weitergabe { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wx-weiter-karte {
  display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 18px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--inset) 38%, var(--surface));
}
.wx-weiter-karte > div > b { display: block; margin: 4px 0 6px; color: var(--text); font-size: 14px; font-weight: 700; }
.wx-weiter-karte > div > span { display: block; color: var(--text-2); font-size: 13px; line-height: 1.55; }

.wx-discordtafel { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.wx-discordtafel .wx-tkopf-text p { max-width: 70ch; }
.wx-discord { width: 22px; height: 17px; flex: none; }

.wx-fussband {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-top: 10px; padding: 18px 4px 0; border-top: 1px solid var(--line);
}
.wx-fussband-marke { display: flex; align-items: center; gap: 12px; }
.wx-fussband-marke > span:last-child { display: grid; gap: 2px; }
.wx-fussband-marke b { color: var(--text); font-size: 14px; }
.wx-fussband-marke i { color: var(--text-2); font-size: 12px; font-style: normal; }
.wx-fussband-spruch { display: inline-flex; align-items: center; gap: 12px; color: var(--text-2); font-size: 13px; }
.wx-fussband-spruch i {
  position: relative; width: 56px; height: 1px; background: currentColor;
}
.wx-fussband-spruch i::after {
  content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
}

.wx-dialogform { display: grid; gap: 2px; margin-top: 8px; text-align: left; }
.wx-dialogform .field { margin-bottom: 10px; }
.wx-dialog-paar { display: grid; gap: 0 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.wx-datei { width: 100%; color: var(--text-2); font: inherit; font-size: 13px; }
.wx-datei::file-selector-button {
  margin-right: 12px; min-height: 36px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  background: transparent; color: var(--text);
  font: inherit; font-size: 13px; font-weight: 650;
  transition: border-color .2s, background .2s;
}
.wx-datei::file-selector-button:hover { border-color: var(--accent); }
.wx-datei:focus-visible { outline: none; }
.wx-datei:focus-visible::file-selector-button { box-shadow: 0 0 0 3px var(--accent-soft); }

.tab.on .wx-kopf-bild { animation: wxBildAuf 1.3s var(--ease-out) both; }
.tab.on .wx-kopf-text > *, .tab.on .wx-marke { animation: wxRein .6s var(--ease-out) both; }
.tab.on .wx-kopf-text > :nth-child(2) { animation-delay: .06s; }
.tab.on .wx-kopf-text > :nth-child(3) { animation-delay: .12s; }
.tab.on .wx-marke { animation-delay: .2s; }
.tab.on .wx-kpi { animation: wxRein .55s var(--ease-out) both; }
.tab.on .wx-kpi:nth-child(1) { animation-delay: .12s; }
.tab.on .wx-kpi:nth-child(2) { animation-delay: .18s; }
.tab.on .wx-kpi:nth-child(3) { animation-delay: .24s; }
.tab.on .wx-kpi:nth-child(4) { animation-delay: .30s; }
.tab.on .wx-seite > .wx-tafel { animation: wxRein .6s var(--ease-out) .22s both; }
.tab.on .wx-seite > .wx-tafel + .wx-tafel { animation-delay: .3s; }
.tab.on .wx-seite > .wx-tafel + .wx-tafel + .wx-tafel { animation-delay: .38s; }
.tab.on .wx-schrift { animation: wxSchreiben 1.6s var(--ease-out) .5s both; }
.tab.on .wx-pille-frei .wx-i use { stroke-dasharray: 24; animation: wxHaken .7s var(--ease-out) .6s both; }
.wx-schwebt { animation: wxSchweben 6.5s ease-in-out infinite; }
.wx-drei-bild .wx-schwebt { animation-delay: -1.5s; }
.wx-adress-bild .wx-schwebt { animation-delay: -3s; }

@keyframes wxRein { from { opacity: 0; transform: translateY(14px); } }
@keyframes wxBildAuf { from { opacity: 0; transform: scale(1.07); } }
@keyframes wxSchreiben { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -5% -20% 0); } }
@keyframes wxHaken { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes wxSchweben { 50% { transform: translateY(-8px); } }
@keyframes wxSchwebenSchraeg { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-9deg) translateY(-6px); } }
@keyframes wxPunkte { to { background-position: 8px 50%; } }
@keyframes wxBahn { to { stroke-dashoffset: -16; } }
@keyframes wxDrehen { to { transform: rotate(360deg); } }
@keyframes wxAtmen { 50% { opacity: .72; } }
@keyframes wxMenue { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes wxPuls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}
@keyframes wxGlimmen {
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
                    0 22px 70px -26px color-mix(in srgb, var(--accent) 75%, transparent); }
}
@keyframes wxAufleuchten {
  0% { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); transform: translateY(-4px); }
  100% { transform: none; }
}

.page-head.dbk {
  --dbk-rand: 24px;
  --dbk-rand-oben: 30px;
  --dbk-inhalt: calc(100vw - var(--rollbalken, 0px) - var(--nav-w)
                    - var(--nav-luft) * 2);
  --dbk-hoch: calc(var(--dbk-rand-oben) + 16px);
  min-height: 156px; padding: 2px 0 14px; margin-bottom: 16px;
  position: relative; z-index: 2;   /* ueber der Kachelreihe, unter dem
                                       klebenden Tabellenkopf */
}
@media (max-width: 1180px) { .page-head.dbk { --dbk-rand: 16px; } }
@media (max-width: 620px) {
  .page-head.dbk { --dbk-rand: 12px; --dbk-rand-oben: 20px; min-height: 0; }
}
.page-head.dbk::before { display: none; }

.dbk-bild {
  position: absolute; z-index: -1; pointer-events: none;
  top: calc(-1 * var(--dbk-hoch));
  right: calc((100% - var(--dbk-inhalt)) / 2);
  width: min(calc(var(--dbk-inhalt) * .6), 1040px);
  height: calc(100% + var(--dbk-hoch));
  object-fit: cover; object-position: 70% 50%;
  opacity: var(--wx-bild-deckkraft); filter: var(--wx-bild-filter);
  -webkit-mask-image: linear-gradient(to left, #000 38%, transparent 96%),
                      linear-gradient(to bottom, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to left, #000 38%, transparent 96%),
                      linear-gradient(to bottom, #000 84%, transparent 100%);
          mask-composite: intersect;
  transform-origin: right top;
  animation: dbkBild .9s var(--ease-out) both;
}
@media (max-width: 900px) {
  .dbk-bild { width: var(--dbk-inhalt); opacity: calc(var(--wx-bild-deckkraft) * .55); }
}

.page-head.dbk h1 {
  font-size: clamp(32px, 3.2vw, 42px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.06; text-wrap: balance;
}
.dbk-titel {
  background: linear-gradient(96deg, var(--text) 0 40%,
                              color-mix(in srgb, var(--accent) 72%, var(--text)) 58%,
                              var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h1.dbk-titel { width: fit-content; max-width: 100%; }
.page-head.dbk .lede { max-width: 62ch; font-size: 15px; line-height: 1.6; }

.dbk-schrift {
  position: absolute; top: 2px; right: 26px; margin: 0;
  color: var(--accent); pointer-events: none;
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-size: 28px; font-weight: 600; line-height: 1;
  transform: rotate(-6deg); transform-origin: right center;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 14%, transparent);
  animation: dbkSchrift .8s .25s var(--ease-out) both;
}
@media (max-width: 1100px) { .dbk-schrift { display: none; } }

@keyframes dbkBild { from { opacity: 0; transform: scale(1.03); } }
@keyframes dbkSchrift { from { opacity: 0; transform: rotate(-6deg) translateY(6px); } }

.sx-hero { isolation: isolate; }
.sxb-held {
  position: absolute; z-index: -2; pointer-events: none;
  top: calc(-1 * (var(--kopf-h) + 60px));
  right: calc((100% - 100vw + var(--rollbalken, 0px)) / 2);
  width: min(calc((100vw - var(--rollbalken, 0px)) * .74), 1320px);
  height: calc(100% + var(--kopf-h) + 60px);
  object-fit: cover; object-position: 78% 58%;
  opacity: calc(var(--wx-bild-deckkraft) * .82); filter: var(--wx-bild-filter);
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 92%),
                      linear-gradient(to bottom, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to left, #000 30%, transparent 92%),
                      linear-gradient(to bottom, #000 86%, transparent 100%);
          mask-composite: intersect;
  transform-origin: right top;
  animation: sxbLicht 1.1s var(--ease-out) both;
}
@media (max-width: 900px) {
  .sxb-held {
    width: calc(100vw - var(--rollbalken, 0px));
    height: min(480px, calc(100% + var(--kopf-h) + 60px));
    object-position: 75% 40%; opacity: calc(var(--wx-bild-deckkraft) * .38);
  }
}
.sxb-schrift {
  position: absolute; right: 22px; bottom: 30px; margin: 0; z-index: 1;
  display: grid; justify-items: end;
  color: var(--accent); pointer-events: none;
  font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  font-size: 30px; font-weight: 600; line-height: 1.02;
  transform: rotate(-7deg);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 14%, transparent);
  animation: sxbSchrift .9s .5s var(--ease-out) both;
}
@media (max-width: 1100px) { .sxb-schrift { display: none; } }

.sxb-ding {
  --sxb-ding: clamp(96px, 8.5vw, 136px);
  position: absolute; z-index: 2; pointer-events: none;
  width: var(--sxb-ding); height: auto;
  top: calc(var(--sxb-ding) * -.72); right: 26px;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45))
          drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 22%, transparent));
  animation: sxbSchweben 6s ease-in-out infinite;
}
.sxb-diagramm { --sxb-ding: clamp(88px, 7.5vw, 120px); }
@media (max-width: 760px) { .sxb-ding { display: none; } }

.sx-schluss { position: relative; isolation: isolate; }
.sxb-schluss-ding {
  --sxb-schluss: clamp(120px, 12vw, 188px);
  position: absolute; z-index: -1; pointer-events: none;
  width: var(--sxb-schluss); height: auto;
  top: 50%; margin-top: calc(var(--sxb-schluss) * -.4);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .4))
          drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 20%, transparent));
  animation: sxbSchweben 7s ease-in-out infinite;
}
.sxb-schluss-ding.links { left: clamp(24px, 7%, 110px); }
.sxb-schluss-ding.rechts { right: clamp(24px, 7%, 110px); animation-delay: -3.5s; }
@media (max-width: 900px) { .sxb-schluss-ding { display: none; } }

@keyframes sxbLicht { from { opacity: 0; transform: scale(1.03); } }
@keyframes sxbSchrift { from { opacity: 0; transform: rotate(-7deg) translateY(8px); } }
@keyframes sxbSchweben {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

body.wz-seite { overflow-x: clip; }

.dbk-ding {
  --dbk-ding: clamp(82px, 6.6vw, 112px);
  position: absolute; z-index: 2; pointer-events: none;
  width: var(--dbk-ding); height: auto;
  right: 16px; bottom: calc(var(--dbk-ding) * -.66);
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .42))
          drop-shadow(0 0 20px color-mix(in srgb, var(--accent) 20%, transparent));
  animation: sxbSchweben 6s ease-in-out infinite;
}
:root[data-theme="light"] .dbk-ding {
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .18))
          drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 14%, transparent));
}
.dbk-ding.links { right: auto; left: 16px; }
@media (max-width: 900px) { .dbk-ding { display: none; } }

.wtg-fenster .fr-zeichen svg { width: 22px; height: 22px; }
.wtg-wahlen { display: grid; gap: 10px; margin-top: 18px; text-align: left; }
.wtg-wahl {
  display: grid; gap: 4px; width: 100%; text-align: left;
  padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface-2);
  color: var(--text); font: inherit; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.wtg-wahl b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; }
.wtg-wahl > span { color: var(--text-2); font-size: 13px; line-height: 1.5; }
.wtg-wahl:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
.wtg-wahl:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.wtg-wahl.an {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}
.wtg-wahl[disabled] { opacity: .6; pointer-events: none; }
.wtg-laeuft {
  padding: 1px 8px; border-radius: 999px;
  font-style: normal; font-size: 11px; font-weight: 650;
  color: var(--orange); background: color-mix(in srgb, var(--orange) 16%, transparent);
}

.wav-fenster .ul-kopf h2 { display: flex; align-items: center; gap: 10px; }
.wav-zeichen {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.wav-zeichen svg { width: 18px; height: 18px; }
.wav-teil {
  display: grid; gap: 12px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px dashed var(--line-strong);
}
.wav-teil h3 { margin: 0; font-size: 15px; font-weight: 650; }
.wav-adresse { width: 100%; min-height: 120px; resize: vertical; line-height: 1.5; }

.wtg-fenster .ul-zu, .wav-fenster .ul-zu { display: inline-grid; place-items: center; padding: 0; }
.wtg-fenster .ul-zu .stb-i, .wav-fenster .ul-zu .stb-i { width: 16px; height: 16px; }

.wx-team-hinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 0; padding: 12px 16px; border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
  color: var(--text-2); font-size: 13px; line-height: 1.5;
}
.wx-team-hinweis > span { flex: 1 1 260px; }

.bw-abschnitt {
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 650;
  letter-spacing: 0; text-transform: none;
  color: var(--text-3);
}
.bw-abschnitt::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.bw-schild {
  position: relative; overflow: hidden;
  font-size: 12.5px; font-weight: 650;
  letter-spacing: .01em; text-transform: none;
}
.bw-schild::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%,
    color-mix(in srgb, var(--accent) 55%, transparent) 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
  animation: bwGlanz 1.5s .55s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes bwGlanz { to { transform: translateX(130%); } }

.bw-karte { --mx: 50%; --my: 0%; }
.bw-karte > * { position: relative; z-index: 1; }
.bw-karte::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx) var(--my),
    color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.bw-karte[href]:hover::before { opacity: 1; }

.bw-zeichen {
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%,
    color-mix(in srgb, var(--accent) 22%, transparent), var(--accent-soft) 72%);
  color: var(--accent);
}
.bw-zeichen svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.bw-zeichen svg [pathLength] {
  stroke-dasharray: 1 2;
  animation: bwZeichnen 1.1s cubic-bezier(.4, 0, .2, 1) var(--bw-verz, .3s) backwards;
}
@keyframes bwZeichnen { from { stroke-dashoffset: 1.1; } }
.bw-wahl:not(.bw-laden) > .bw-karte:nth-child(2) { --bw-verz: .42s; }
.bw-laden > .bw-karte:nth-child(1) { --bw-verz: .56s; }
.bw-laden > .bw-karte:nth-child(2) { --bw-verz: .68s; }

.bw-pfeil {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1);
}
.bw-karte:hover .bw-pfeil { transform: translateX(4px); }
.bw-karte:hover .bw-pfeil.raus { transform: translate(3px, -3px); }
.bw-nachsatz a { display: inline-flex; align-items: center; gap: 6px; }
.bw-nachsatz a:hover .bw-pfeil { transform: translateX(3px); }

.bw-zahlen.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bw-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  background: var(--inset);
  font-size: 12.5px; color: var(--text-2);
  animation: bwChip .45s cubic-bezier(.2, .8, .2, 1) both;
}
.bw-chip + .bw-chip { animation-delay: .08s; }
@keyframes bwChip { from { opacity: 0; transform: translateY(4px); } }
.bw-chip b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.bw-chip.online b { color: var(--green); }

.bw-zahlen.mit-punkt.wartung::before { animation: bwAtmen 2.4s ease-in-out infinite; }
@keyframes bwAtmen {
  50% { opacity: .55; box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 18%, transparent); }
}

.sleer {
  position: relative;
  display: grid; justify-items: center; gap: 4px; text-align: center;
  padding: 26px 22px 28px;
}
.sleer-bild {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  margin-bottom: 6px;
  color: var(--accent);
  background: radial-gradient(circle at 50% 35%,
    color-mix(in srgb, var(--accent) 22%, transparent), var(--accent-soft) 72%);
}
.sleer-bild .stb-i { width: 21px; height: 21px; }
.sleer-titel { font-size: 14px; font-weight: 650; color: var(--text); }
.sleer-text { max-width: 36ch; font-size: 12.5px; line-height: 1.55; color: var(--text-3); }

.sv-balken:has(.sleer-diagramm) { height: auto; min-height: 170px; border-bottom: 0; }
.sleer-diagramm {
  position: relative; align-self: stretch;
  display: grid; place-items: center;
  min-height: 190px;
}
.sleer-geist {
  position: absolute; inset: 14px 6px 0;
  display: flex; align-items: flex-end; gap: 3%;
  border-bottom: 1px solid var(--line);
}
.sleer-geist i {
  flex: 1; height: 26%;
  border: 1px dashed var(--line-strong); border-bottom: 0;
  border-radius: 6px 6px 0 0;
}
.sleer-diagramm .sleer {
  padding: 16px 22px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.stufenweg {
  container-type: inline-size;
  margin: 18px 0 24px;
  padding: 16px 20px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.stw-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
}
.stw-titel {
  margin: 0;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-2);
}
.stw-etappe {
  font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stw-strecke { position: relative; }

.stw-schiene {
  position: absolute;
  top: 16px; height: 4px;
  left: calc(50% / var(--stw-spalten, 4));
  right: calc(50% / var(--stw-spalten, 4));
}
.stw-gleis {
  position: absolute; inset: 0;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px)
      center / 100% 2px no-repeat,
    var(--inset);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
:root[data-theme="light"] .stw-gleis { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); }

.stw-licht {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--stw-vorn);
  display: flex;
  clip-path: inset(-14px 0 -14px -14px);
  animation: stwFahrt var(--stw-dauer) cubic-bezier(.5, .05, .25, 1) var(--stw-start) backwards;
}
@keyframes stwFahrt {
  from { clip-path: inset(-14px var(--stw-rest, 100%) -14px -14px); }
}
.stw-licht > i { display: block; flex: 0 0 auto; height: 100%; }
.stw-licht > i:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.stw-licht > i:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.stw-gruen {
  background: color-mix(in srgb, var(--green) 62%, var(--surface));
}
.stw-gold {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 80%, transparent), var(--accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.stw-teil {
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 55%, transparent) 0 7px, transparent 7px 10px);
}
:root[data-theme="light"] .stw-gold { box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent); }

.stw-funke {
  position: absolute; top: 50%;
  left: var(--stw-vorn);
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 30%, white) 0 20%,
    var(--accent) 42%, transparent 72%);
  opacity: 0;
  pointer-events: none;
  animation: stwFunke var(--stw-dauer) cubic-bezier(.5, .05, .25, 1) var(--stw-start) both;
}
@keyframes stwFunke {
  from { left: var(--stw-ab, 0%); opacity: 1; }
  82% { opacity: 1; }
  to { left: var(--stw-vorn); opacity: 0; }
}

.stw-spur {
  position: absolute; top: 0; bottom: 0;
  left: var(--stw-vorn);
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 38%,
      color-mix(in srgb, var(--accent) 80%, transparent) 50%, transparent 62%)
    0 0 / 260% 100% no-repeat;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 60%, transparent));
  opacity: 0;
  pointer-events: none;
  animation: stwSpur 3.6s ease-in-out var(--stw-ruhe) infinite;
}
@keyframes stwSpur {
  0% { background-position: 100% 0; opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 1; }
  86%, 100% { background-position: 0% 0; opacity: 0; }
}

.stw-bahn {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--stw-spalten, 4), minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.stw-schritt {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0;
  text-align: center;
}

.stw-punkt {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  margin-bottom: 7px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px dashed var(--line-strong);
  color: var(--text-3);
  animation: stwAuf .45s cubic-bezier(.2, .7, .3, 1.15) backwards;
  animation-delay: calc(var(--stw-nr, 0) * 70ms);
}
.stw-punkt .stb-i { width: 16px; height: 16px; }
.stw-schritt.offen .stw-punkt .stb-i { opacity: .7; }
@keyframes stwAuf {
  from { opacity: 0; transform: scale(.6); }
}

.stw-schritt.erledigt .stw-punkt {
  background: linear-gradient(var(--green-soft), var(--green-soft)), var(--surface);
  border: 1.5px solid var(--green);
  color: var(--green);
  animation:
    stwAuf .45s cubic-bezier(.2, .7, .3, 1.15) calc(var(--stw-nr, 0) * 70ms) backwards,
    stwErreicht .6s cubic-bezier(.3, 1.5, .5, 1) var(--stw-an);
}
.stw-haken path {
  stroke-dasharray: 20;
  animation: stwHaken .5s cubic-bezier(.3, .7, .3, 1) var(--stw-an) backwards;
}
@keyframes stwHaken {
  from { stroke-dashoffset: 20; }
}
@keyframes stwErreicht {
  0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); }
  40% { transform: scale(1.14); }
  100% { transform: scale(1); box-shadow: 0 0 0 12px color-mix(in srgb, var(--green) 0%, transparent); }
}

.stw-schritt.jetzt .stw-punkt {
  transform: scale(1.17);
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface);
  border: 2px solid var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent),
              0 0 26px color-mix(in srgb, var(--accent) 30%, transparent);
}
:root[data-theme="light"] .stw-schritt.jetzt .stw-punkt {
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent);
}
.stw-schritt.jetzt .stw-punkt::after,
.stw-schritt.naechster .stw-punkt::after {
  content: "";
  position: absolute; inset: -3px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.stw-schritt.jetzt .stw-punkt::after {
  animation: stwLandung 1.2s cubic-bezier(.2, .6, .3, 1) var(--stw-an) 2;
}
@keyframes stwLandung {
  from { transform: scale(1); opacity: .75; }
  to { transform: scale(1.9); opacity: 0; }
}
.stufenweg.aufstieg .stw-schritt.jetzt .stw-punkt::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.5px; border-radius: 50%;
  box-shadow: 0 -30px var(--accent), 21px -21px var(--green), 30px 0 var(--accent),
              21px 21px var(--green), 0 30px var(--accent), -21px 21px var(--green),
              -30px 0 var(--accent), -21px -21px var(--green);
  opacity: 0;
  pointer-events: none;
  animation: stwFunken 1s cubic-bezier(.2, .7, .3, 1) var(--stw-an) both;
}
@keyframes stwFunken {
  from { opacity: 1; transform: scale(.3); }
  55% { opacity: 1; }
  to { opacity: 0; transform: scale(1.35); }
}
.stw-etappe.geschafft {
  color: var(--accent); font-weight: 650;
  animation: stwGeschafft .5s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes stwGeschafft {
  from { opacity: 0; transform: translateY(4px); }
}

.stw-schritt.naechster .stw-punkt::after {
  border-width: 1.5px;
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: stwFang 3.6s ease-in-out var(--stw-ruhe) infinite;
}
@keyframes stwFang {
  0%, 62% { opacity: 0; transform: scale(.9); }
  76% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

.stw-name {
  font-size: 12.5px; line-height: 1.3;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.stw-schritt.erledigt .stw-name { color: var(--text-2); }
.stw-schritt.jetzt .stw-name { color: var(--text); font-weight: 650; }
.stw-zahl {
  min-height: 1.35em;
  font-size: 11.5px; line-height: 1.35;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.stw-schritt.jetzt .stw-zahl { color: var(--accent); }

.stw-weiter {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 14px;
  margin: 18px 0 0;
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
  background: var(--inset);
}
.stw-ziel {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
}
.stw-ziel .stb-i { width: 15px; height: 15px; }
.stw-ziel[hidden] { display: none; }
.stw-hinweis {
  flex: 1 1 220px; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
  margin: 0;
  font-size: 13.5px; line-height: 1.35;
  color: var(--text);
}
.stw-als { font-size: 11.5px; color: var(--text-3); }
.stw-hinweis b { font-weight: 600; }
.stw-tat { flex: 0 0 auto; }

@container (max-width: 460px) {
  .stw-schritt:not(.jetzt) .stw-zahl { display: none; }
  .stw-name { font-size: 11.5px; }
  .stw-tat { flex: 1 1 100%; }
}
@container (max-width: 340px) {
  .stw-schritt:not(.jetzt) .stw-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 430px) {
  .topbar-inner, .topbar-inner.app-kopf { padding: 0 6px; gap: 6px; }
  .topbar-actions { gap: 1px; }

  .topbar-actions .tb-zeichen {
    width: 32px; min-width: 32px; height: 32px; padding: 6px;
  }
  .topbar-actions .tb-ikone { width: 18px; height: 18px; }

  .tb-schliessen { width: 32px; height: 32px; margin-left: 1px; }
  .tb-schliessen svg { width: 15px; height: 15px; }

  .topbar-actions .rw-sprachklappe > summary { padding: 4px 5px; gap: 3px; }
  .topbar-actions .sl-avatar { width: 32px; height: 32px; }
}

.bw-karte.ist-spaeter { cursor: default; opacity: .78; }
.bw-karte.ist-spaeter:hover { transform: none; }

.jagd-feld {
  margin: 0 0 22px;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.jagd-kopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
}
.jagd-kopf-text { min-width: 0; max-width: 62ch; }
.jagd-titel {
  margin: 0 0 4px; font-size: 17px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
}
.jagd-live {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text-3);
}
h1 > .jagd-live { vertical-align: middle; margin-left: 10px; }
.jagd-live.an { color: var(--green); border-color: var(--green); }
.jagd-live.an::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--green); margin-right: 6px;
  vertical-align: 1px;
}
.jagd-lede { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.jagd-leiste {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin: 14px 0 12px;
}
.jagd-leiste .ia-tabs { flex: 1 1 auto; min-width: 0; }
.jagd-zahl {
  font-style: normal; font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums; margin-left: 2px;
}
.ia-reiter.on .jagd-zahl { color: inherit; opacity: .75; }
.jagd-nur {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap;
}
.jagd-liste { display: grid; gap: 10px; }

.jagd-gesperrt {
  display: grid; gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--text-2);
}
.jagd-gesperrt > b { color: var(--text); font-size: 13px; }
.jagd-gesperrt-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.jagd-gesperrt .jf-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 10px;
}
.jagd-gesperrt .jf-chip .btn.mini { padding: 2px 9px; font-size: 11.5px; }

.jagd-sperre {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.jagd-sperre img { flex: none; width: 44px; height: 44px; }
.jagd-sperre-text { flex: 1 1 320px; min-width: 0; }
.jagd-sperre h2 { margin: 0 0 4px; font-size: 17px; font-weight: 650; }
.jagd-sperre p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55; }

.jf-feld { margin-bottom: 18px; }
.jf-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.jf-leiste b { font-size: 15px; }
.jf-klapp {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 650; color: var(--text);
}
.jf-klapp:hover { color: var(--accent); }
.jf-klapp .jf-chevron { font-style: normal; font-size: 11px; color: var(--text-3);
  transition: transform .18s var(--ease-out); }
.jf-klapp[aria-expanded="false"] .jf-chevron { transform: rotate(-90deg); }
.jf-klapp:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.jf-zahl { color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.jf-schub { flex: 1 1 auto; }
.jf-liste { display: grid; gap: 10px; }
.jf-karte {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); display: grid; gap: 8px;
}
.jf-karte.an { box-shadow: inset 3px 0 0 var(--accent); }
.jf-karte.aus, .jf-karte.pausiert { color: var(--text-2); }
.jf-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jf-kopf b { font-size: 14px; color: var(--text); }
.jf-lage {
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--line); color: var(--text-3);
}
.jf-lage.an { color: var(--accent); border-color: var(--accent); }
.jf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jf-chip {
  padding: 2px 9px; border-radius: 999px; font-size: 12px;
  background: var(--inset); border: 1px solid var(--line); color: var(--text-2);
}
.jf-chip > span { color: var(--text-3); }
.jf-chip.ohne { text-decoration: line-through; text-decoration-color: var(--text-3); }
.jf-fuss { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.jf-kanal { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; color: var(--text-2); }
.jf-kanal.offen { font-family: inherit; font-style: italic; }
.jf-funde b { color: var(--text); font-variant-numeric: tabular-nums; }
.jf-blitz { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.jf-blitz > span { font-size: 12px; color: var(--text-2); }
.ck-schalter.klein { width: 34px; height: 20px; margin: 0; }
.ck-schalter.klein .ck-knauf { width: 14px; height: 14px; top: 2px; left: 2px; }
.ck-schalter.klein[aria-checked="true"] .ck-knauf { transform: translateX(14px); }
.jf-blitz-wink { margin: 12px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.jf-pro {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 10px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
}
.jf-pro p { margin: 0; flex: 1 1 260px; color: var(--text-2); font-size: 13px; }

.ja-feld { margin-bottom: 18px; }
.ja-karte {
  display: grid; gap: 14px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.ja-lede { margin: 0; max-width: 74ch; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.ja-schalterfeld { display: grid; gap: 12px; }
.ja-schalter { display: flex; align-items: flex-start; gap: 12px; }
.ja-schalter p { margin: 3px 0 0; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ja-schalter p b { color: var(--text); font-weight: 650; }
.ja-grenzen { max-width: 440px; }
.ja-grenzen .jf-feld { margin: 0; }
.ja-warnung {
  margin: 0; padding: 10px 12px; max-width: 74ch;
  font-size: 12.5px; line-height: 1.55; color: var(--text-2);
  border: 1px solid color-mix(in srgb, var(--orange) 40%, var(--line));
  border-radius: var(--radius); background: var(--orange-soft);
}
.ja-warnung b { color: var(--text); }
.ja-wink { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-3); }

.ja-konto {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--orange) 34%, var(--line));
  background: var(--orange-soft);
}
.ja-konto-text { display: grid; gap: 3px; flex: 1 1 260px; min-width: 0; }
.ja-konto-text b { font-size: 13.5px; }
.ja-konto-text span { font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.ja-konto .btn { flex: none; }
@media (max-width: 520px) { .ja-konto .btn { width: 100%; } }
.ja-auftraege {
  list-style: none; margin: 0; padding: 12px 0 0;
  display: grid; gap: 7px; border-top: 1px dashed var(--line);
}
.ja-auftrag {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--text-2);
}
.ja-was { font-weight: 600; color: var(--text); white-space: nowrap; }
.ja-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ja-stand {
  justify-self: start;
  padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--line); color: var(--text-3); white-space: nowrap;
}
.ja-auftrag.fertig .ja-stand { color: var(--green); border-color: var(--green); }
.ja-auftrag.unklar .ja-stand { color: var(--orange); border-color: var(--orange); }
.ja-auftrag.fehler .ja-stand { color: var(--red); border-color: var(--red); }
.ja-auftrag.laeuft .ja-stand, .ja-auftrag.offen .ja-stand { color: var(--accent); border-color: var(--accent); }
.ja-wann { color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
  .ja-auftrag { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ja-titel { grid-column: 1 / -1; order: 5; }
}

.jf-fenster {
  display: flex; flex-direction: column;
  width: min(620px, 94vw); max-height: min(88vh, 860px);
  padding: 0; overflow: hidden;
}
.jfd-kopf {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 6%, var(--surface)), var(--bg-2));
}
.jfd-kopf > div { flex: 1 1 auto; min-width: 0; }
.jfd-kopf h2 { margin: 0 0 5px; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
.jfd-kopf p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.55; }
.jfd-kopf .ul-zu { position: static; flex: none; margin: -2px -4px 0 0; }

.jf-form { display: flex; flex-direction: column; min-height: 0; }
.jf-rumpf { overflow-y: auto; padding: 4px 24px 8px; display: grid; gap: 4px; }

.jf-schritt { padding: 16px 0; border-bottom: 1px dashed var(--line); }
.jf-schritt:last-of-type { border-bottom: 0; }
.jf-schritt h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; font-size: 14.5px; font-weight: 650; color: var(--text);
}
.jf-schritt h3 i {
  flex: none; display: grid; place-items: center;
  width: 21px; height: 21px; border-radius: 50%;
  font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.jf-schritt > input { width: 100%; }

.jf-wahl { margin-bottom: 12px; }
.jf-wahl-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 7px;
}
.jf-wahl-kopf > span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.jf-leeren {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--text-3);
}
.jf-leeren:hover { color: var(--accent); text-decoration: underline; }
.jf-hakenfeld { display: flex; flex-wrap: wrap; gap: 6px; }
.jf-haken { position: relative; cursor: pointer; }
.jf-haken input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.jf-haken span {
  display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line); background: var(--inset); color: var(--text-2);
  transition: border-color .15s, color .15s, background .15s;
}
.jf-haken input:checked + span { border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.jf-haken input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.jf-wink { margin: 8px 0 0; color: var(--text-3); font-size: 11.5px; line-height: 1.5; }

.jf-preis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jf-feld { display: grid; gap: 5px; font-size: 12.5px; color: var(--text-2); margin: 0 0 12px; }
.jf-feld:last-child { margin-bottom: 0; }
.jf-feld input { width: 100%; }
.jf-mit-einheit { position: relative; }
.jf-mit-einheit input { width: 100%; padding-right: 30px; }
.jf-mit-einheit i {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 12.5px; color: var(--text-3); pointer-events: none;
}

.jf-mehr { border-top: 1px dashed var(--line); padding: 14px 0 4px; }
.jf-mehr summary {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  list-style: none;
}
.jf-mehr summary::-webkit-details-marker { display: none; }
.jf-mehr summary i { font-style: normal; font-size: 10px; transition: transform .18s; }
.jf-mehr[open] summary i { transform: rotate(180deg); }
.jf-mehr summary:hover { color: var(--accent); }
.jf-fein { padding-top: 14px; }

.jfd-fuss {
  flex: none; padding: 14px 24px 18px;
  border-top: 1px solid var(--line); background: var(--surface);
}
.jf-satz {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--text-2);
}
.jf-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jf-knoepfe .btn { justify-content: center; }

@media (max-width: 560px) {
  .jfd-kopf { padding: 18px 16px 14px; }
  .jf-rumpf { padding-left: 16px; padding-right: 16px; }
  .jfd-fuss { padding: 12px 16px 14px; }
  .jf-preis { grid-template-columns: 1fr; }
}

.jagd-preis {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-size: 16px; line-height: 1.1;
}
.jagd-rabatt {
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.4;
  color: var(--green); background: color-mix(in srgb, var(--green) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
}
.jagd-rabatt.stark {
  color: var(--auf-green); background: var(--green); border-color: var(--green);
}
.jagd-eur { display: inline-flex; align-items: baseline; gap: 7px; }
.jagd-statt {
  font-size: 11.5px; font-weight: 400; color: var(--text-3);
  text-decoration: line-through;
}
.jagd-karte.weg .jagd-bild { opacity: .55; }
.jagd-weg { color: var(--text-3); font-style: italic; }
.jagd-karte {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--inset);
  transition: border-color .15s, transform .15s;
}
.jagd-karte:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.jagd-karte.fav { border-color: var(--accent); }
.jagd-bild {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--radius-s); background: var(--surface-2);
  display: grid; place-items: center; color: var(--text-3); font-size: 22px;
}
.jagd-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jagd-text > b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jagd-zeile, .jagd-meta { font-size: 12.5px; color: var(--text-2); }
.jagd-meta { color: var(--text-3); }
.jagd-vergleich {
  font-size: 12px; margin-top: 2px; font-weight: 600;
}
.jagd-vergleich.gut { color: var(--green); }
.jagd-vergleich.mittel { color: var(--orange); }
.jagd-vergleich.schlecht { color: var(--red); }
.jagd-vergleich.ohne { color: var(--text-3); font-weight: 400; }
.jagd-rechts {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.jagd-preis { font-variant-numeric: tabular-nums; }
.jagd-taten { display: flex; align-items: center; gap: 8px; }
.jagd-stern {
  all: unset; cursor: pointer; font-size: 18px; line-height: 1;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; color: var(--text-3);
  transition: color .15s, background .15s, transform .15s;
}
.jagd-stern:hover { background: var(--surface-2); color: var(--accent); }
.jagd-stern[aria-pressed="true"] { color: var(--accent); }
.jagd-stern:active { transform: scale(.9); }
.jagd-stern:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fu-analysen { position: relative; }

@media (max-width: 640px) {
  .jagd-feld { padding: 14px 14px 12px; }
  .jagd-karte { grid-template-columns: 56px minmax(0, 1fr); }
  .jagd-bild { width: 56px; height: 56px; }
  .jagd-rechts {
    grid-column: 2; flex-direction: row; align-items: center;
    justify-content: space-between; width: 100%;
  }
  .jagd-text > b { white-space: normal; }
}

.sprung-inhalt {
  position: absolute; left: 16px; top: -100px; z-index: 1000;
  padding: 10px 14px; border-radius: var(--radius);
  background: var(--accent); color: var(--auf-accent); font-weight: 700;
  text-decoration: none; box-shadow: var(--shadow-2);
  transition: top .12s;
}
.sprung-inhalt:focus-visible { top: 12px; outline: 2px solid var(--text); outline-offset: 2px; }

a, button, [role="button"], input, select, textarea, label, summary {
  touch-action: manipulation;
}

.pf-block {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); margin: 0 0 12px;
  overflow: hidden;
}
.pf-block[open] { border-color: var(--line-strong); }
.pf-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 650; color: var(--text);
  user-select: none;
}
.pf-kopf::-webkit-details-marker { display: none; }
.pf-kopf:hover { background: var(--inset); }
.pf-kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pf-logo { width: 22px; height: 22px; border-radius: 6px; display: block; flex: none; }
.pf-name { flex: none; }
.pf-stand {
  margin-left: auto; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  color: var(--text-3); background: var(--inset); border: 1px solid var(--line);
  white-space: nowrap;
}
.pf-stand.online, .pf-stand.bereit {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
}
.pf-stand.alt {
  color: var(--accent);
  background: var(--accent-soft); border-color: transparent;
}
.pf-pfeil {
  flex: none; font-style: normal; color: var(--text-3);
  transition: transform .18s ease;
}
.pf-block[open] .pf-pfeil { transform: rotate(180deg); }
.pf-inhalt { padding: 4px 14px 14px; border-top: 1px solid var(--line); }
.pf-merkmale {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 10px 0 12px; padding: 0; list-style: none;
  font-size: 11.5px; color: var(--text-3);
}
.pf-merkmale li::before { content: "·"; margin-right: 6px; color: var(--accent); }
.pf-merkmale:empty { display: none; }
.pf-editor:empty::before {
  content: "Die Fassung wird geladen …";
  display: block; padding: 10px 0; font-size: 12.5px; color: var(--text-3);
}
html[lang="en"] .pf-editor:empty::before { content: "Loading the version …"; }

.mb-neu.laeuft { opacity: 1; color: var(--text-2); border-color: var(--line-strong); background: var(--inset); }
.mb-neu.laeuft .mb-neu-zeichen { animation: mb-puls 1.4s ease-in-out infinite; }
.mb-neu.bereit {
  background: var(--accent); color: var(--auf-accent, #1a1408);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
  animation: mb-ring 2.2s ease-out infinite;
}
@keyframes mb-puls { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes mb-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

.sq-wahl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.sq-wahl .hint { margin: 0; }

.anb-zeigen {
  display: inline; padding: 0 2px; margin: 0; border: 0; background: none;
  font: inherit; color: var(--accent); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.anb-zeigen:hover { text-decoration-style: solid; }
.anb-zeigen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.anb-zeigen:disabled { opacity: .6; cursor: wait; }
.anb-name { font-weight: 600; }

@media (max-width: 640px) {
  body:has(#inspector:not([hidden]):not(.zu)) .vas { display: none; }
}

.lad-kasten {
  width: min(960px, 96vw); display: flex; flex-direction: column; gap: 14px;
  max-height: min(88vh, 900px);
}
.lad-kopf h2 { margin: 0 0 4px; font-size: 18px; }
.lad-kopf .hint { margin: 0; max-width: 60ch; }
.lad-flaeche {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--inset);
}
.lad-bogen {
  display: grid; gap: 7mm 6mm; padding: 18px;
  grid-template-columns: repeat(auto-fill, minmax(62mm, max-content));
  justify-content: center; align-content: start;
}
.lad-bogen .hint { grid-column: 1 / -1; margin: 0; text-align: center; }
.lad-platz { margin: 0; display: grid; gap: 6px; justify-items: center; }
.lad-platz .bg-etikett {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16), 0 10px 26px rgba(0, 0, 0, .16);
}
.lad-werkzeug { font-size: 11.5px; }
.lad-laden {
  color: var(--text-2); text-decoration: none;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
  display: inline-block; transition: color .15s, border-color .15s;
}
.lad-laden:hover { color: var(--accent); border-color: var(--accent); }
.lad-laden:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lad-fuss { display: flex; justify-content: flex-end; gap: 8px; }

@media print {
  body.nur-etiketten > *:not(.lad-fenster) { display: none !important; }
  body.nur-etiketten::before, body.nur-etiketten::after { display: none; }
  body.nur-etiketten {
    background: #fff; height: auto !important; overflow: visible !important;
  }
  body.nur-etiketten .lad-fenster {
    position: static; inset: auto; display: block;
    background: none; backdrop-filter: none; padding: 0; overflow: visible;
  }
  body.nur-etiketten .lad-kasten {
    position: static; display: block; width: 100%;
    max-width: none; max-height: none;
    background: none; border: 0; box-shadow: none; padding: 0;
    overflow: visible; animation: none; transform: none;
  }
  body.nur-etiketten .lad-nichtdrucken { display: none !important; }
  body.nur-etiketten .lad-flaeche {
    position: static; display: block; width: 100%;
    overflow: visible; border: 0; background: none;
  }
  body.nur-etiketten .lad-bogen {
    padding: 0; gap: 4mm; justify-content: start;
    grid-template-columns: repeat(auto-fill, 62mm);
  }
  body.nur-etiketten .lad-platz { gap: 0; break-inside: avoid; }
  body.nur-etiketten .bg-etikett {
    border: 1px solid #dddddd; box-shadow: none; break-inside: avoid;
  }
}

.fz-inner { justify-content: center; column-gap: 28px; }
.fz-inner nav { margin-left: 0; justify-content: center; gap: 6px 14px; }

.sx-tat-neben { font-size: 13.5px; color: var(--text-3); }
.sx-tat.mitte { margin: 34px 0 4px; }

.sx-haftband { display: none; }

@media (max-width: 760px) {
  .sx-haftband {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    transform: translateY(105%);
    transition: transform .28s var(--ease-out);
  }
  .sx-haftband.da { transform: translateY(0); }
  .sx-haftband[hidden] { display: none; }
  .sh-wort { display: grid; gap: 1px; min-width: 0; }
  .sh-wort b { font-size: 14px; font-weight: 650; color: var(--text); }
  .sh-wort span {
    font-size: 11.5px; color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sx-haftband .btn {
    margin-left: auto; flex: none;
    min-height: 44px; padding: 0 22px;
    display: inline-flex; align-items: center; font-weight: 650;
  }
  body.mit-haftband { padding-bottom: 92px; }
}

.sx-marke i {
  font-style: normal; font-variant-numeric: tabular-nums;
  margin-right: 9px; padding-right: 9px;
  border-right: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  opacity: .8;
}
:root[data-theme="light"] .sx-marke i { opacity: 1; }

.sx-gegen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
.sg-seite {
  padding: 24px 22px; border-radius: var(--radius-l);
  border: 1px solid var(--line); background: var(--surface);
}
.sg-seite.ist-mit {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.sg-kopf {
  display: inline-block; margin-bottom: 16px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--inset); color: var(--text-3);
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
}
.sg-seite.ist-mit .sg-kopf { background: var(--accent-soft); color: var(--accent); }
.sg-seite ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sg-seite li {
  position: relative; padding-left: 26px;
  font-size: 14.5px; line-height: 1.5; color: var(--text-2);
}
.sg-seite li::before {
  position: absolute; left: 0; top: 0;
  content: "–"; color: var(--text-3); font-weight: 700;
}
.sg-seite.ist-mit li { color: var(--text); }
.sg-seite.ist-mit li::before { content: "✓"; color: var(--accent); }

@media (max-width: 760px) {
  .sx-gegen { grid-template-columns: 1fr; gap: 14px; }
  .sg-seite { padding: 20px 18px; }
}

.vas-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vas-aktion {
  all: unset; box-sizing: border-box; cursor: pointer;
  max-width: 100%; padding: 6px 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: var(--surface); color: var(--accent);
  font-size: 12px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .15s;
}
.vas-aktion:hover { background: var(--accent-soft); }
.vas-aktion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vas-quellen { display: block; margin-top: 6px; font-size: 11px; color: var(--text-3); }
.vas-grenze {
  margin: 0; padding: 0 14px 10px;
  font-size: 10.5px; line-height: 1.5; color: var(--text-3); text-align: center;
}

.inv-bereich {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px; align-items: stretch;
  margin-bottom: 34px;
}
.inv-links { min-width: 0; }
.inv-seite { min-width: 0; }
.inv-bereich[data-rein] { opacity: 1; transform: none; transition: none; }

.ivs-karte {
  display: grid; gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
}
.ivs-karte[hidden] { display: none; }
.ivs-kopf { display: flex; align-items: center; gap: 12px; }
.ivs-kopf .ivs-kreis {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
}
.ivs-kopf .ivs-kreis .stb-i { width: 20px; height: 20px; }
.ivs-kopf b { display: block; font-size: 14.5px; font-weight: 650; }
.ivs-kopf .hint { display: block; font-size: 12px; }
.ivs-karte .ivs-zeile {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px; border-radius: 16px;
  background: var(--inset);
  cursor: pointer;
}
.ivs-karte .re-schalter-text { display: grid; gap: 3px; min-width: 0; }
.ivs-karte .re-schalter-text b { font-size: 13.5px; }
.ivs-karte .re-schalter-text .hint { font-size: 12px; line-height: 1.45; }
.ivs-regeln {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 8px;
  font-size: 12px; color: var(--text-3); line-height: 1.45;
}
.ivs-regeln li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
.ivs-regeln .stb-i { width: 16px; height: 16px; color: var(--text-2); margin-top: 1px; }

.inv-seite .ivs-ring {
  position: relative;
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px;
  align-items: center;
  margin: 0; padding: 14px 40px 14px 14px;
  border-radius: 22px;
}
.inv-seite .ivs-ring[hidden] { display: none; }
.re-ring-zu {
  position: absolute; top: 8px; right: 8px;
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.re-ring-zu:hover { background: var(--inset); color: var(--text); }
.inv-seite .re-ring-text span { white-space: normal; }
.re-ring-zu:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 1100px) {
  .inv-bereich { grid-template-columns: minmax(0, 1fr); }
  .inv-seite { position: static; order: -1; }
}

.inv-seite-stapel {
  position: sticky; top: calc(var(--topbar-h) + 18px);
  display: flex; flex-direction: column; gap: 14px;
  height: calc(100vh - var(--topbar-h) - 18px - 96px); max-height: 100%;
}
.inv-seite-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.inv-seite-kopf .btn { padding-inline: 8px; text-align: center; }
.inv-links-kopf {
  display: flex; align-items: center; gap: 10px;
  min-height: 38px; margin-bottom: 14px;
}

.ivs-karte.lz-karte {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1 1 auto; min-height: 220px;
}
.lz-karte .ivs-kopf .lz-neu { margin-left: auto; flex: none; }
.lz-rahmen { position: relative; flex: 1 1 auto; min-height: 140px; }
.lz-rolle {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 10px;
  margin: -3px; padding: 3px;           /* Platz für den Fokusrahmen */
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.lz-liste { display: flex; flex-direction: column; gap: 8px; }
.lz-liste .la-leer { font-size: 12.5px; line-height: 1.55; }
.lz-alle { width: 100%; flex: none; }

.lz-ort {
  flex: none;
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 12px; row-gap: 3px; align-items: center;
  padding: 9px 8px 9px 9px;
  background: var(--inset);
  border: 1px solid var(--line); border-radius: 14px;
  cursor: pointer;
}
.lz-ort:hover { border-color: var(--accent); }
.lz-bilder {
  grid-row: 1 / span 2;
  position: relative; width: 44px; height: 52px;
}
.lz-bilder img {
  position: absolute; left: 7px; top: 6px;
  width: 30px; height: 40px; object-fit: cover;
  border-radius: 7px; border: 1px solid var(--line-strong);
  background: var(--surface);
  transform: translateX(calc(var(--lz-i, 0) * 7px)) rotate(calc(var(--lz-i, 0) * 8deg));
}
.lz-bilder.ohne {
  display: grid; place-items: center;
  border: 1.5px dashed var(--line-strong); border-radius: 10px;
  color: var(--text-3);
}
.lz-bilder.ohne .stb-i { width: 20px; height: 20px; }
.lz-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lz-name {
  flex: 0 1 auto; min-width: 0; margin-right: auto;
  padding: 0; border: 0; background: none;
  font: inherit; font-size: 13.5px; font-weight: 650; color: var(--text);
  text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lz-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.lz-zahl {
  flex: none; font-size: 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.lz-ort.leer .lz-zahl { color: var(--text-3); }
.lz-code {
  flex: none; margin-right: auto;
  padding: 2px 7px; border-radius: 6px;
  background: var(--accent-soft);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em;
}
.lz-tun { display: flex; gap: 2px; flex: none; }
.lz-i {
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--text-3); cursor: pointer;
}
.lz-i .stb-i { width: 16px; height: 16px; }
.lz-i:hover { background: var(--surface); color: var(--accent); }
.lz-i.weh:hover { color: var(--red); }
.lz-i:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (hover: none) { .lz-i { width: 34px; height: 34px; } }

@media (max-width: 1100px) {
  .inv-bereich { align-items: start; }
  .inv-seite-stapel { position: static; height: auto; max-height: none; }
  .ivs-karte.lz-karte { min-height: 0; }
  .lz-rahmen { flex: none; min-height: 0; }
  .lz-rolle { position: static; max-height: 400px; }
  .lz-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}

.nf { display: inline-flex; align-items: center; min-width: 0; }
.nf-sicht {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--text-3); font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nf-teil { display: inline-flex; align-items: center; gap: 3px; }
.nf .stb-i { width: 13px; height: 13px; }
.stb-preis .stb-nf { justify-self: start; margin-top: 3px; }
.stb-preis .stb-nf .nf-sicht, .stb-preis .stb-nf .nf-teil { font-size: 12px; }
.stb-preis .stb-nf .stb-i { width: 14px; height: 14px; }
.re-artikel-text .re-nf { justify-self: start; margin-top: 2px; }
.inv-zeile .inv-nf { flex: none; }
.vo-kopf .vo-alle { justify-self: start; margin-top: 8px; }
.vo-quelle { color: var(--accent); }
.vo-feld input.vorschlag { border-style: dashed; border-color: var(--accent); }