html[data-w24="kasse"] {
  --w-a: #0f7f77; --w-a-hell: #e2f4f1; --w-a-mittel: #b3e0d9; --w-a-dunkel: #0b6760; --w-a-text: #ffffff;
  --w-bg: #f4f7fa; --w-fl: #ffffff; --w-fl2: #f1f4f8; --w-fl3: #e7ecf2;
  --w-rand: #e3e8ef; --w-rand2: #cdd5df;
  --w-text: #13294b; --w-text2: #46566f; --w-text3: #5b6b80;
  --w-ok: #13804a; --w-ok-hell: #e2f5ea; --w-err: #c8283d; --w-err-hell: #fdeaec; --w-info: #1a63c6; --w-info-hell: #e4eefc;
  --w-r: 12px; --w-r-l: 16px; --w-r-xl: 20px; --w-max: 1180px; --w-seite: 288px;
  --w-schatten: 0 1px 2px rgba(19, 41, 75, .04), 0 4px 18px rgba(19, 41, 75, .06);
  --kw-link: #1a63c6; --kw-linie: #15998c; --kw-gruen: #1e9a5c; --kw-rot: #e2475a;
  --kw-aktiv: linear-gradient(135deg, #11807a 0%, #0d6c64 100%); --kw-aktiv-text: #ffffff;
  --kw-held: linear-gradient(118deg, #0a4566 0%, #0d6a74 52%, #0f766e 100%);
  --kw-ein: #13804a; --kw-aus: #c8283d;
}
@media (prefers-color-scheme: dark) {
  html[data-w24="kasse"] {
    --w-a: #4fcfbf; --w-a-hell: #0f2d2b; --w-a-mittel: #1d4d48; --w-a-dunkel: #86e3d6; --w-a-text: #04211e;
    --w-bg: #0c131a; --w-fl: #121c25; --w-fl2: #18242e; --w-fl3: #202e3a;
    --w-rand: #24323f; --w-rand2: #344555;
    --w-text: #e8eef5; --w-text2: #b3c1cf; --w-text3: #93a4b5;
    --w-ok: #4ade80; --w-ok-hell: #12301f; --w-err: #ff8593; --w-err-hell: #3a1c22; --w-info: #8ab8ff; --w-info-hell: #152a47;
    --w-schatten: 0 1px 2px rgba(0, 0, 0, .45);
    --kw-link: #8ab8ff; --kw-linie: #4fcfbf; --kw-gruen: #3fc781; --kw-rot: #ff7183;
    --kw-aktiv: linear-gradient(135deg, #5ad6c6 0%, #3fbcae 100%); --kw-aktiv-text: #04211e;
    --kw-held: linear-gradient(118deg, #0a2f45 0%, #0b4a52 55%, #0c5650 100%);
    --kw-ein: #13804a; --kw-aus: #b8233a;
  }
}
html[data-w24="kasse"] body { background: var(--w-bg); }
.w24 h1, .w24 h2, .w24 h3 { letter-spacing: -.02em; }
.w-inhalt h1 { font-weight: 800; }
.w-karte { border-radius: 16px; box-shadow: var(--w-schatten); }
.w-karte-kopf a, .karte-link { color: var(--kw-link); display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; }
.w-karte-kopf a .w-ico { width: 16px; height: 16px; }
.w-liste { border-radius: 16px; }
.w-btn-primaer { box-shadow: 0 4px 12px color-mix(in srgb, var(--w-a) 22%, transparent); }

.kw-logo { width: 44px; height: 37px; flex: none; display: block; }
.kw-logo.klein { width: 34px; height: 28px; }
.kw-marke { gap: 10px !important; padding: 4px 0 26px !important; align-items: center; }
.kw-marke-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.kw-marke-text b { font-size: 1.42rem; font-weight: 800; letter-spacing: -.03em; color: var(--w-text); }
.kw-marke-text small { font-size: .75rem; font-weight: 600; letter-spacing: -.012em !important; color: var(--w-text2); margin-top: 3px; letter-spacing: 0; }

@media (min-width: 960px) {
  .w-mit-seite .w-seite { padding: 22px 18px 18px; background: var(--w-fl); border-right: 1px solid var(--w-rand); }
}
.w-seite nav { gap: 4px; }
.w-seite nav a { min-height: 50px; gap: 16px; padding: 0 16px; border-radius: 12px; color: var(--w-text); font-weight: 550; font-size: 1rem; }
.w-seite nav a .w-ico { width: 22px; height: 22px; color: var(--w-text2); }
.w-seite nav a:hover { background: var(--w-fl2); color: var(--w-text); }
.w-seite nav a[aria-current="page"] { background: var(--kw-aktiv); color: var(--kw-aktiv-text); box-shadow: 0 6px 16px color-mix(in srgb, #0f7f77 28%, transparent); }
.w-seite nav a[aria-current="page"] .w-ico { color: var(--kw-aktiv-text); }
.w-seite nav a[aria-current="page"] .w-zaehler { background: #fff; color: #b42318; }
.w-seite-plus { margin: 0 0 18px; min-height: 48px; border-radius: 12px; }
.w-seite-unten { border-top: 0; padding-top: 16px; }
.seite-kasse, .ue-kasse { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--w-rand); border-radius: 14px; background: var(--w-fl); color: var(--w-text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--w-schatten); }
.seite-kasse:hover, .ue-kasse:hover { border-color: var(--w-a-mittel); }
.seite-kasse-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--w-a-hell); color: var(--w-a); flex: none; }
.seite-kasse-ico .w-ico { width: 24px; height: 24px; }
.seite-kasse-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.seite-kasse-text small { font-size: .78rem; color: var(--w-text3); font-weight: 500; }
.seite-kasse-text b { font-size: 1rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seite-kasse .kasse-wahl-pfeil, .ue-kasse .kasse-wahl-pfeil { color: var(--w-text2); }

.kopf-marke { gap: 10px !important; }
.kopf-marke .w-kopf-text span { font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; color: var(--w-text); }
.kopf-kasse .kw-logo { margin-right: 2px; }
.kopf-suche { display: none; }
.kopf-avatar { gap: 8px; }
.kopf-name, .kopf-name-pfeil { display: none; }
.kopf-avatar .w-avatar { width: 38px; height: 38px; font-size: .84rem; }
@media (min-width: 960px) {
  .w-mit-seite .w-kopf { height: 76px; padding: 0 32px; background: color-mix(in srgb, var(--w-fl) 94%, transparent); border-bottom: 1px solid var(--w-rand); gap: 16px; }
  .w-mit-seite .kopf-marke, .w-mit-seite .kopf-kasse { display: none; }
  .w-mit-seite .kopf-suche { display: flex; position: relative; flex: 0 1 480px; min-width: 0; }
  .kopf-suche > .w-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--w-text3); pointer-events: none; width: 20px; height: 20px; }
  .w24 .kopf-suche input { min-height: 46px; padding-left: 44px !important; border-radius: 12px; background: var(--w-fl2); border-color: transparent; font-size: .95rem; }
  .w24 .kopf-suche input:focus { background: var(--w-fl); }
  .w-mit-seite .kopf-avatar { width: auto; min-height: 48px; padding: 0 8px 0 4px; border-radius: 14px; display: flex; align-items: center; color: var(--w-text); }
  .w-mit-seite .kopf-avatar:hover { background: var(--w-fl2); }
  .w-mit-seite .kopf-name { display: block; font: 600 .98rem var(--w-font); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
  .w-mit-seite .kopf-name-pfeil { display: block; color: var(--w-text2); width: 18px; height: 18px; }
  .w-mit-seite .w-inhalt { padding: 28px 36px 56px; }
}

.ue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ue > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
.ue-kopf, .ue .kasse-kz { display: contents; }
.ue-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ue-titel h1 { margin: 0; }
.ue-unter { margin: 0; }
.ue-kasse { order: 1; }
.ue .held-kasse { order: 2; grid-column: 1 / -1; }
.ue-knoepfe { order: 3; }

.ue-zeit { order: 5; grid-column: 1 / -1; }
.ue .kz-karte { order: 6; grid-column: auto !important; }
.ue .kz-ico { display: grid; }
.ue .kasse-kz > * { margin: 0; }
.held-muenzen { color: #fff !important; }
.kz-delta { font-size: .86rem; }
.held-kasse .w-held-zahl .nb, .held-kasse .kz-delta span { font-size: inherit; color: inherit; display: inline; line-height: inherit; }
.kz-karte .kz-unter { display: flex; }
.ue .warte { order: 7; }
.ue-next { order: 8; }
.ue-letzte, .ue-leer { order: 4; }
.ue-verlauf { order: 9; }
.ue-belege { order: 10; }
.ue-tabelle { display: none; }
@media (min-width: 960px) {
  .ue { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; }
  .ue > * { order: 0 !important; }
  .ue-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; grid-column: 1 / -1; }
  .ue-titel { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .ue-titel h1 { font-size: 2rem; letter-spacing: -.035em; margin: 0 0 6px; }
  .ue-unter { color: var(--w-text2); font-size: .98rem; }
  .ue-kasse, .ue-knoepfe { display: none !important; }
  .ue .kasse-kz { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; }
  .ue .ue-verlauf { grid-column: 1; }
  .ue .ue-belege { grid-column: 2; }
  .ue .ue-belege:only-child, .ue-verlauf + .ue-belege { align-self: stretch; }
  .ue-tabelle { display: block; overflow-x: auto; }
  .ue-liste { display: none !important; }
}

.ue-zeit { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.ue-zeit-text { font-size: .85rem; color: var(--w-text2); font-variant-numeric: tabular-nums; }
.zeit-wahl { position: relative; display: inline-flex; align-items: center; }
.zeit-wahl > .w-ico { position: absolute; left: 13px; width: 18px; height: 18px; color: var(--w-text2); pointer-events: none; }
.zeit-wahl > .zeit-pfeil { left: auto; right: 12px; width: 16px; height: 16px; }
.w24 .zeit-wahl select { appearance: none; -webkit-appearance: none; width: auto; min-height: 44px; padding: 0 38px 0 40px; border: 1px solid var(--w-rand); border-radius: 12px; background: var(--w-fl); color: var(--w-text); font: 600 .92rem var(--w-font); cursor: pointer; box-shadow: var(--w-schatten); }

.kz-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; }
.kz-ico .w-ico { width: 26px; height: 26px; stroke-width: 2.2; }
.kz-blau { background: linear-gradient(145deg, #2b98d6, #1563a6); }
.kz-gruen { background: linear-gradient(145deg, #2fb173, #1b8c52); }
.kz-rot { background: linear-gradient(145deg, #f05568, #d23047); }
.kz-text { min-width: 0; flex: 1; }
.ue .kz-karte { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; background: var(--w-fl); border: 1px solid var(--w-rand); border-radius: 16px; box-shadow: var(--w-schatten); }
.kz-karte .kz-label { display: block; font-size: .95rem; font-weight: 600; color: var(--w-text); margin: 2px 0 2px; }
.kz-karte b { display: block; font-size: clamp(1.25rem, 1rem + 1vw, 1.95rem); font-weight: 800; letter-spacing: -.025em; color: var(--w-text); line-height: 1.15; }
.kz-unter { display: flex !important; align-items: center; gap: 5px; font-size: .86rem !important; color: var(--w-text2) !important; margin-top: 4px; }
.kz-unter .w-ico { width: 15px; height: 15px; }
.kz-delta { display: flex; align-items: center; gap: 5px; font-weight: 600; font-size: .9rem; margin: 4px 0 0 !important; }
.kz-delta .w-ico { width: 16px; height: 16px; }
.kz-delta.plus { color: var(--w-ok); } .kz-delta.minus { color: var(--w-err); }

.w-held.held-kasse { position: relative; overflow: hidden; display: flex; gap: 16px; background: var(--kw-held); color: #fff; border: 0; border-radius: 20px; padding: 22px 20px 20px; box-shadow: 0 14px 30px rgba(10, 69, 102, .22); }
.held-kasse::after { content: ""; position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%); pointer-events: none; }
.held-kasse .kz-nur-gross { display: none; }
.held-muenzen { position: absolute; right: 18px; top: 20px; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.held-muenzen .w-ico { width: 32px; height: 32px; stroke-width: 2.1; }
.held-kasse .kz-text { position: relative; z-index: 1; }
.held-kasse .w-held-label { font-size: 1.05rem; font-weight: 500; opacity: 1; margin: 0 0 4px; padding-right: 76px; }
.held-kasse .w-held-zahl { display: block; font-size: clamp(2.1rem, 1.5rem + 3vw, 2.75rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; margin: 0 0 8px; padding-right: 70px; overflow-wrap: anywhere; white-space: normal; }
.held-kasse .w-held-zahl .nb { white-space: nowrap; }
.held-kasse .zahl-satz { display: block; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.held-kasse .kz-delta { color: #fff !important; }
.held-kasse .held-satz { font-size: .92rem; max-width: 46ch; margin: 6px 0 0; }
.held-kasse p { margin: 0; }

.w-held.held-kasse.held-warn { background: var(--w-fl); color: var(--w-text); border: 1px solid color-mix(in srgb, var(--w-warn) 55%, var(--w-rand)); box-shadow: var(--w-schatten); }
.held-kasse.held-warn::after { display: none; }
.held-kasse.held-warn .held-muenzen { background: var(--w-warn-hell); color: var(--w-warn); box-shadow: none; }
.held-kasse.held-warn .kz-delta { color: var(--w-text2) !important; }
.held-kasse.held-warn .w-held-label { color: var(--w-text2); }
@media (min-width: 960px) {
  .ue .kasse-kz > .held-kasse { grid-column: auto; }
  .ue .w-held.held-kasse { background: var(--w-fl); color: var(--w-text); border: 1px solid var(--w-rand); border-radius: 16px; padding: 20px 22px; box-shadow: var(--w-schatten); }
  .ue .w-held.held-kasse.held-warn { border-color: color-mix(in srgb, var(--w-warn) 55%, var(--w-rand)); }
  .ue .held-kasse::after, .ue .held-muenzen { display: none; }
  .ue .held-kasse .kz-nur-gross { display: grid; }
  .ue .held-kasse .w-held-label { font-size: .95rem; font-weight: 600; padding: 0; margin: 2px 0 2px; }
  .ue .held-kasse .w-held-zahl { font-size: clamp(1.25rem, 1rem + 1vw, 1.95rem); letter-spacing: -.025em; line-height: 1.15; padding: 0; margin: 0; }
  .ue .held-kasse .w-held-zahl.minus { color: var(--w-err); }
  .ue .held-kasse .w-held-zahl.plus { color: var(--w-ok); }
  .ue .held-kasse .zahl-satz { font-size: .82rem; color: var(--w-text2); }
  .ue .held-kasse .kz-delta.plus { color: var(--w-ok) !important; }
  .ue .held-kasse .kz-delta.minus { color: var(--w-err) !important; }
  .ue .held-kasse .held-satz, .ue .held-kasse .held-klein, .ue .held-kasse .held-warn-satz { font-size: .84rem; color: var(--w-text2); margin-top: 6px; opacity: 1; }
  .ue .held-kasse .held-warn-satz { color: var(--w-text); font-weight: 600; }
}

.ue > .held-kasse:not(.w-kennzahl) { order: 2; }

.ue-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ue-knoepfe .w-btn { min-width: 0; padding: 0 10px; min-height: 58px; border: 0; border-radius: 14px; color: #fff; font: 700 1.08rem var(--w-font); box-shadow: 0 8px 18px rgba(19, 41, 75, .14); }
.ue-knoepfe .w-btn .w-ico { width: 24px; height: 24px; stroke-width: 2.4; }
.ue-ein { background: var(--kw-ein); } .ue-ein:hover { background: #0f6d3e; }
.ue-aus { background: var(--kw-aus); } .ue-aus:hover { background: #a91f33; }

@media (max-width: 959px) {
  .ue .kz-karte { flex-direction: column; gap: 6px; padding: 14px; }
  .ue .kz-karte .kz-ico { width: 34px; height: 34px; border-radius: 10px; position: absolute; }
  .ue .kz-karte { position: relative; }
  .ue .kz-karte .kz-label { padding-left: 44px; min-height: 34px; display: flex; align-items: center; margin: 0; }
  .ue .kz-karte .kz-ico .w-ico { width: 19px; height: 19px; }
  .ue .kz-karte b { font-size: clamp(1.1rem, .9rem + 1.2vw, 1.4rem); white-space: nowrap; margin-top: 4px; }
  .ue .kz-unter { font-size: .8rem !important; }
}

.karte-unter { margin: 2px 0 0; font-size: .84rem; color: var(--w-text3); }
.ue-verlauf .w-karte-kopf, .ue-belege .w-karte-kopf { align-items: flex-start; }
.diagramm { width: 100%; min-height: 150px; }
.kw-diagramm { display: block; width: 100%; height: auto; font: 500 12px var(--w-font); overflow: visible; }
.kw-diagramm .raster { stroke: var(--w-rand); stroke-width: 1; }
.kw-diagramm .raster.senk { stroke-dasharray: 2 4; }
.kw-diagramm .raster.null { stroke: var(--w-rand2); }
.kw-diagramm .achse { fill: var(--w-text3); font-variant-numeric: tabular-nums; }
.kw-diagramm .linie { fill: none; stroke: var(--kw-linie); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.kw-diagramm .fl-oben { stop-color: var(--kw-linie); stop-opacity: .28; }
.kw-diagramm .fl-unten { stop-color: var(--kw-linie); stop-opacity: 0; }
.kw-diagramm .punkt { fill: var(--kw-linie); stroke: var(--w-fl); stroke-width: 2.5; }
.kw-diagramm .stab-ein { fill: var(--kw-gruen); }
.kw-diagramm .stab-aus { fill: var(--kw-rot); }

.bv-folie { display: flex; gap: 18px; align-items: center; }
.bv-folie[hidden] { display: none !important; }
.bv-bild { width: 122px; height: 156px; flex: none; padding: 0; border: 1px solid var(--w-rand); border-radius: 10px; overflow: hidden; background: var(--w-fl2); cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(19, 41, 75, .12); }
.bv-bild img, .beleg-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.laedt { background: linear-gradient(90deg, var(--w-fl2) 0%, var(--w-fl3) 50%, var(--w-fl2) 100%); background-size: 200% 100%; animation: w-schimmer 1.2s infinite linear; }
.bv-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.bv-text b { font-size: 1.02rem; overflow-wrap: anywhere; }
.bv-text > span:not(.kat-chip) { color: var(--w-text2); font-size: .9rem; }
.bv-text .betrag { color: var(--w-text) !important; font-size: .98rem !important; }
.bv-text .kat-chip { margin-top: 6px; }
.bv-punkte { display: flex; justify-content: center; gap: 0; margin: 6px 0 -8px; }
.bv-punkte button { width: 44px; height: 44px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.bv-punkte i { width: 9px; height: 9px; border-radius: 50%; background: var(--w-rand2); }
.bv-punkte [aria-current="true"] i { background: var(--w-text); }
.bv-ohne { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .88rem; color: var(--w-text2); }
.bv-ohne a { color: var(--kw-link); display: inline-flex; align-items: center; min-height: 44px; }
.bv-ohne .w-ico { width: 17px; height: 17px; }
.bv-leer { text-align: center; padding: 8px 4px 2px; }
.bv-leer-bild { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; margin: 0 auto 10px; background: var(--w-a-hell); color: var(--w-a-dunkel); }
.bv-leer-bild .w-ico { width: 28px; height: 28px; }
.bv-leer p { color: var(--w-text2); font-size: .9rem; margin: 0 auto 12px; max-width: 32ch; }
.bv-leer p b { color: var(--w-text); }
.bv-leer .bv-ohne { justify-content: center; }

.ue-tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .93rem; }
.ue-tab th { background: var(--w-fl2); color: var(--w-text2); font-weight: 650; font-size: .84rem; text-align: left; padding: 11px 14px; white-space: nowrap; }
.ue-tab th:first-child { border-radius: 10px 0 0 10px; } .ue-tab th:last-child { border-radius: 0 10px 10px 0; }
.ue-tab td { padding: 4px 14px; border-bottom: 1px solid var(--w-rand); vertical-align: middle; }
.ue-tab tr:last-child td { border-bottom: 0; }
.ue-tab .r { text-align: right; }
.ue-tab .nb { white-space: nowrap; color: var(--w-text2); font-variant-numeric: tabular-nums; }
.ue-tab td.betrag { font-weight: 700; }
.ue-link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--w-text); font: 500 .93rem var(--w-font); text-align: left; cursor: pointer; }
.ue-link:hover { color: var(--w-a-dunkel); text-decoration: underline; text-underline-offset: 3px; }
.ue-person { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.ue-person .w-avatar.w-klein { width: 30px; height: 30px; font-size: .7rem; }
.kasse-avatar { background: var(--w-fl3) !important; color: var(--w-text2) !important; }
.kasse-avatar .w-ico { width: 16px; height: 16px; }
.vz { white-space: pre; }

.kat-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 8px; font: 600 .8rem/1.3 var(--w-font); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ton-lila { --t-bg: #efe9fb; --t-fg: #5b3fa0; } .ton-gruen { --t-bg: #e2f5ea; --t-fg: #146c43; } .ton-blau { --t-bg: #e4eefc; --t-fg: #1d5fb8; }
.ton-orange { --t-bg: #fdecdf; --t-fg: #98460f; } .ton-rosa { --t-bg: #fce7ef; --t-fg: #a12659; } .ton-petrol { --t-bg: #dff3f1; --t-fg: #0d6b64; }
.ton-grau { --t-bg: #eceff3; --t-fg: #4a5568; } .ton-rot { --t-bg: #fdeaec; --t-fg: #c8283d; }
@media (prefers-color-scheme: dark) {
  .ton-lila { --t-bg: #2b2442; --t-fg: #cbb8f7; } .ton-gruen { --t-bg: #12301f; --t-fg: #8de0b0; } .ton-blau { --t-bg: #152a47; --t-fg: #a9c8f7; }
  .ton-orange { --t-bg: #3a2617; --t-fg: #f4bb8a; } .ton-rosa { --t-bg: #3a1c29; --t-fg: #f3a9c6; } .ton-petrol { --t-bg: #0f2f2d; --t-fg: #86e3d6; }
  .ton-grau { --t-bg: #242d37; --t-fg: #c2ccd6; } .ton-rot { --t-bg: #3a1c22; --t-fg: #ff9aa6; }
}
.kat-chip[class*="ton-"] { background: var(--t-bg); color: var(--t-fg); }
.w-zeile-ico[class*="ton-"] { background: var(--t-bg); color: var(--t-fg); }
.w-zeile-ico.ab-ico { background: var(--w-fl3); color: var(--w-text3); }

.bliste .w-zeile { min-height: 64px; padding: 10px 16px; }
.bliste .w-zeile-ico { width: 44px; height: 44px; border-radius: 12px; }
.bliste .w-zeile-text b { font-weight: 600; }
.bliste .w-zeile-ende { font-weight: 700; font-size: 1rem; }
.bliste .w-zeile-ende.minus { color: var(--w-err); }
.bliste .w-zeile-ende.plus { color: var(--w-ok); }
.ue-letzte .w-liste { margin: 0 -18px -6px; }
.b-richtung { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; padding: 0; background: none; margin: 0 0 14px; }
.w-seg.b-richtung button, .w-seg.aw-reiter a { min-height: 44px; justify-content: center; border-radius: 10px; background: var(--w-fl2); color: var(--w-text); font-weight: 600; box-shadow: none; border: 1px solid var(--w-rand); white-space: normal; text-align: center; line-height: 1.2; padding: 4px 8px; }
.w-seg.b-richtung [aria-pressed="true"], .w-seg.aw-reiter [aria-current="page"] { background: var(--kw-aktiv); color: var(--kw-aktiv-text); border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, #0f7f77 24%, transparent); }
.b-monat { margin: 0 0 6px; }
.monat-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 20px 4px 8px; }
.monat-kopf h2 { font-size: 1.02rem; font-weight: 700; margin: 0; }
.monat-kopf .betrag { font-weight: 700; }
#liste > .b-monat:first-child .monat-kopf { margin-top: 4px; }
.kopf-plus { background: var(--w-a) !important; color: var(--w-a-text) !important; border-radius: 50% !important; box-shadow: 0 6px 14px color-mix(in srgb, var(--w-a) 32%, transparent); }
.kopf-plus .w-ico { width: 24px; height: 24px; stroke-width: 2.4; }
@media (min-width: 960px) { .w-mit-seite .kopf-plus { display: none; } }

.beleg-raster { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
@media (min-width: 720px) { .beleg-raster { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.beleg-karte { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 1px solid var(--w-rand); border-radius: 14px; overflow: hidden; background: var(--w-fl); color: var(--w-text); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--w-schatten); }
.beleg-karte:hover { border-color: var(--w-a-mittel); }
.beleg-bild { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--w-fl2); color: var(--w-text2); }
.beleg-pdf { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 700; font-size: .85rem; color: var(--w-text2); }
.beleg-pdf .w-ico { width: 34px; height: 34px; }
.beleg-text { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; min-width: 0; flex: 1; }
.beleg-text b { font-size: .95rem; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.beleg-text small { color: var(--w-text2); font-size: .82rem; }
.beleg-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 6px; }
.beleg-fuss .betrag { font-size: .95rem; font-weight: 700; }

.aw-reiter { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; padding: 0; background: none; margin: 0 0 14px; overflow: visible; }
.aw-karte .w-karte-kopf { flex-wrap: wrap; }
.legende { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; font-size: .86rem; color: var(--w-text2); }
.legende li { display: inline-flex; align-items: center; gap: 7px; }
.legende i { width: 11px; height: 11px; border-radius: 50%; }
.legende .l-ein { background: var(--kw-gruen); } .legende .l-aus { background: var(--kw-rot); }
.aw-tabelle { margin-top: 10px; }
.aw-tabelle summary { cursor: pointer; color: var(--w-a-dunkel); font-weight: 600; font-size: .9rem; min-height: 44px; display: inline-flex; align-items: center; }
.aw-tabelle .btab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.aw-tabelle .btab th, .aw-tabelle .btab td { padding: 7px 8px; border-bottom: 1px solid var(--w-rand); text-align: left; }
.aw-tabelle .btab .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.aw-summen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 12px; }
@media (max-width: 599px) {
  .aw-summen { gap: 8px; }
  .aw-summe { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 10px; }
  .aw-summe .kz-ico { width: 34px; height: 34px; } .aw-summe .kz-ico .w-ico { width: 18px; height: 18px; }
  .aw-summe b { font-size: clamp(.9rem, 3.6vw, 1.15rem); white-space: nowrap; }
  .aw-summe small { font-size: .78rem; }
}
.aw-summe { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--w-fl); border: 1px solid var(--w-rand); border-radius: 16px; box-shadow: var(--w-schatten); min-width: 0; }
.aw-summe .kz-ico { width: 46px; height: 46px; border-radius: 50%; }
.aw-summe .kz-gruen { background: var(--w-ok-hell); color: var(--w-ok); }
.aw-summe .kz-rot { background: var(--w-err-hell); color: var(--w-err); }
.aw-summe .kz-blau { background: var(--w-a-hell); color: var(--w-a-dunkel); }
.aw-summe small { display: block; font-size: .85rem; color: var(--w-text2); }
.aw-summe b { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.aw-hinweis { margin: 0 4px 12px; }
.aw-links { margin-top: 4px; }
.kat-balken { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.kat-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.kat-kopf .betrag { margin-left: auto; font-weight: 700; }
.kat-kopf .betrag small { font-weight: 500; color: var(--w-text2); margin-left: 8px; font-size: .82rem; }
.kat-spur { display: block; height: 10px; border-radius: 999px; background: var(--w-fl3); overflow: hidden; }
.kat-spur i { display: block; height: 100%; border-radius: 999px; background: var(--t-fg); }
.kat-spur i.neg { opacity: .5; }

.b-foto { margin: 0 0 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--w-rand); background: var(--w-fl2); }
.b-foto img { display: block; width: 100%; max-height: 200px; object-fit: cover; }
.b-foto figcaption { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: .82rem; color: var(--w-text2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.b-foto figcaption .w-ico { width: 16px; height: 16px; flex: none; }
.b-foto-pdf { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 120px; font-weight: 700; color: var(--w-text2); }
.b-foto-pdf .w-ico { width: 32px; height: 32px; }
.b-felder { min-width: 0; }
@media (min-width: 760px) {
  .w-blatt.mit-foto { max-width: 940px; }
  .mit-foto .w-blatt-inhalt { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 0 26px; align-items: start; }
  .mit-foto .b-foto { position: sticky; top: 0; margin: 4px 0 12px; }
  .mit-foto .b-foto img { max-height: min(62vh, 520px); height: auto; object-fit: contain; background: #2c2622; }
  .mit-foto .w-blatt-inhalt > .w-formfehler { grid-column: 1 / -1; }
}

.w-zeile-ico { border-radius: 12px; }

@media print {
  .ue-knoepfe, .ue-kasse, .ue-zeit, .ue-belege, .kopf-suche { display: none !important; }
  .w-held.held-kasse { background: none !important; color: #000 !important; box-shadow: none; border: 1px solid #bbb; }
  .held-muenzen, .held-kasse::after { display: none; }
}

.ue-letzte .lk-kurz { display: none; }
@media (max-width: 959px) { .ue-letzte .lk-lang { display: none; } .ue-letzte .lk-kurz { display: inline; } }