/* ERZEUGT von tools/platin-css.py aus dem Board v24.28. Nicht von Hand aendern. */
@scope (.shell-top) {
/* L24 App Board neu: HHV-Look (soll.css, Stand aaa81294) mit den Blautönen der Lampenwerk24-App (farben.css, 0440f278). Nur hell. */
:scope {
  --lila: #6C8CF5; --lila-tief: #BCCBFF; --lila-zart: #232C4A; --lila-mid: #3C63E0; --lila-hell: #A9BAF0; --fokus: #C9D5F7; --akz-rgb: 36, 72, 196; --blau: #3C63E0;
  --grau: #7C8494; --grau-hell: #3A3F4A;
  --tinte: #F4F6FA; --tinte-2: #E6E9F0; --leise: #D4D9E3; --linie: rgba(255, 255, 255, .1);
  --rund-voll: 999px; --rund-flaeche: 24px;
  --toenung: rgba(255, 255, 255, .1); --toenung-ava: #232C4A; --rand-schalter: #9CA5B7;
  --glas: rgba(255, 255, 255, .08); --glas-dicht: rgba(255, 255, 255, .10); --glas-rand: rgba(255, 255, 255, .10);
  --glas-blur: blur(28px) saturate(1.7);
  --schatten-klein: 0 .5px 1px rgba(0, 0, 0, 0.15), 0 2px 5px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(0, 0, 0, 0.21);
  --schatten: 0 1px 3px rgba(0, 0, 0, 0.18), 0 10px 28px rgba(0, 0, 0, 0.3), 0 28px 72px rgba(0, 0, 0, 0.48);
  --schatten-lila: 0 .5px 1px rgba(60, 99, 224, .16), 0 2px 6px rgba(60, 99, 224, .16), 0 6px 16px rgba(60, 99, 224, .20);
  --rot-zart: #3F2023; --rot: #FF8F86; --offen: #C4CAD6; --offen-bg: rgba(255, 255, 255, .1); --laeuft: #BCCBFF; --laeuft-bg: #263156; --fertig: #A8EEC0; --fertig-bg: #1D3A2A;
  --gruen: #3FCF82; --orange: #C4CAD6;
  --ma-1: #DCE8F7; --ma-1-t: #1D4B85; --ma-2: #D8EFE2; --ma-2-t: #1C5C38; --ma-3: #E4E6EA; --ma-3-t: #C4CAD6;
  --ma-4: #E6E8EC; --ma-4-t: #6B4E00; --ma-5: #D5EEED; --ma-5-t: #145C59; --ma-6: #E0E4F2; --ma-6-t: #2E3D78;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
:scope {
  position: relative; overflow: hidden; font-family: "Schibsted Grotesk", "Inter", system-ui, sans-serif; color: var(--tinte); font-size: 16px; line-height: 1.4;
  background:
    radial-gradient(60% 52% at 6% 4%, rgba(226, 216, 200, .75) 0%, rgba(226, 216, 200, 0) 72%),
    radial-gradient(56% 50% at 96% 6%, rgba(170, 188, 240, .30) 0%, rgba(170, 188, 240, 0) 72%),
    radial-gradient(60% 50% at 4% 96%, rgba(255, 255, 255, .10) 0%, rgba(241, 243, 246, 0) 72%),
    radial-gradient(56% 50% at 98% 96%, rgba(165, 186, 242, .26) 0%, rgba(165, 186, 242, 0) 72%),
    radial-gradient(40% 36% at 52% 50%, rgba(255, 255, 255, .10) 0%, rgba(241, 243, 246, 0) 75%),
    #F1F3F6;
}
.glas { background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.055), var(--schatten); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }
.karte { min-width: 0; background: var(--glas-dicht); border: 1px solid var(--glas-rand); border-radius: var(--rund-flaeche); box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.055), var(--schatten-klein); backdrop-filter: var(--glas-blur); -webkit-backdrop-filter: var(--glas-blur); }

/* Symbole als Maske, Strich 1,8 */
.i { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.i.s16 { width: 16px; height: 16px; } .i.s18 { width: 18px; height: 18px; } .i.s24 { width: 24px; height: 24px; }
.i-frage { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.4 7.6L3 21l1.4-5.6A8.5 8.5 0 1121 12z'/%3E%3Cpath d='M9.8 9.5a2.3 2.3 0 0 1 4.4.8c0 1.5-2.2 2-2.2 3.3'/%3E%3Cpath d='M12 16.3h.01'/%3E%3C/svg%3E"); }
.i-sonne { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.i-raster { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z'/%3E%3C/svg%3E"); }
.i-kalender { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M8 3v4M16 3v4M3.5 10h17M8 14h2M12 14h2M8 17h2'/%3E%3C/svg%3E"); }
.i-post { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18v14H3zM3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.i-haken { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3 8-8M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E"); }
.i-bild { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h18v18H3zM21 15l-5-5L5 21'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3C/svg%3E"); }
.i-druck { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6M6 18H4v-7h16v7h-2M6 14h12v7H6z'/%3E%3C/svg%3E"); }
.i-wagen { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.5 11h11L21 7H6'/%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='17' cy='20' r='1'/%3E%3C/svg%3E"); }
.i-headset { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2M4 14h3v5H4zM17 14h3v5h-3zM20 19a4 4 0 0 1-4 2h-3'/%3E%3C/svg%3E"); }
.i-horn { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v3l12 5V6zM15 8a4 4 0 0 1 0 8M6 15v4h3'/%3E%3C/svg%3E"); }
.i-geld { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h20v12H2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.i-regler { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0M14 4v4M8 10v4M16 16v4'/%3E%3C/svg%3E"); }
.i-suche { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-5-5'/%3E%3C/svg%3E"); }
.i-glocke { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l2 2H4zM10 21h4'/%3E%3C/svg%3E"); }
.i-hilfe { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 3.5M12 17h.01'/%3E%3C/svg%3E"); }
.i-weiter { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E"); }
.i-plus { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.i-hakerl { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.i-mehr { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h.01M12 12h.01M19 12h.01'/%3E%3C/svg%3E"); }
.i-senden { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }

/* Knöpfe, Pillen, Kreise */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--rund-voll); font: inherit; font-size: 15.5px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.knopf.prim { background: var(--lila); color: #fff; box-shadow: var(--schatten-lila); }
.knopf.sek { background: var(--toenung); color: var(--tinte); border-color: rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); }
.knopf.klein { min-height: 36px; padding: 0 14px; font-size: 14.5px; }
.rund { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--tinte-2); position: relative; flex: none; }
.rund .punkt { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--tinte-2); box-shadow: 0 0 0 2px #fff; }
.pille { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--rund-voll); font-size: 13.5px; font-weight: 600; white-space: nowrap; background: var(--toenung); color: var(--tinte-2); }
.pille.rot { background: var(--rot-zart); color: var(--rot); }
.pille.offen { background: var(--offen-bg); color: var(--offen); }
.pille.laeuft { background: var(--laeuft-bg); color: var(--laeuft); }
.pille.fertig { background: var(--fertig-bg); color: var(--fertig); }
.pille.blau { background: var(--lila-zart); color: var(--lila-tief); }
.pille.gruen { background: var(--fertig-bg); color: var(--fertig); }
.ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--toenung-ava); border: 1px solid rgba(255, 255, 255, 0.055); color: var(--lila-tief); flex: none; }
.ma1 { background: var(--ma-1); color: var(--ma-1-t); } .ma2 { background: var(--ma-2); color: var(--ma-2-t); } .ma3 { background: var(--ma-3); color: var(--ma-3-t); }
.ma4 { background: var(--ma-4); color: var(--ma-4-t); } .ma5 { background: var(--ma-5); color: var(--ma-5-t); } .ma6 { background: var(--ma-6); color: var(--ma-6-t); }
.symq { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--tinte-2); background: var(--toenung); border: 1px solid rgba(255, 255, 255, 0.055); flex: none; }
.zaehler { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: var(--rund-voll); background: var(--toenung); font-size: 13px; font-weight: 700; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.haken { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--rand-schalter); background: rgba(255, 255, 255, .10); display: grid; place-items: center; flex: none; color: #fff; }
.haken.an { background: var(--lila); border-color: var(--tinte); }
.haken .i { width: 15px; height: 15px; }
.segment { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--rund-voll); background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.055); }
.segment > span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--rund-voll); font-size: 15px; font-weight: 600; color: var(--tinte-2); white-space: nowrap; }
.segment > span.an { background: rgba(255, 255, 255, 0.088); color: var(--tinte); box-shadow: var(--schatten-klein); }
.segment .n { font-size: 13px; font-weight: 700; color: var(--lila); }
.segment.klein > span { min-height: 36px; padding: 0 13px; font-size: 14px; }
.leise { color: var(--leise); }

/* Rechner */
.d-leiste { position: absolute; top: 16px; left: 16px; bottom: 16px; width: 264px; border-radius: var(--rund-flaeche); padding: 10px 12px 8px; display: flex; flex-direction: column; }
.d-marke { display: flex; align-items: center; gap: 12px; padding: 0 8px 4px; }
.d-logo { width: 40px; height: 40px; border-radius: 50%; background: var(--lila); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.d-marke b { display: block; font-size: 16px; } .d-marke span { font-size: 13.5px; color: var(--leise); }
.d-suche { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 12px; border-radius: var(--rund-voll); background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); color: var(--leise); font-size: 15px; margin: 8px 0 6px; }
.kbd { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--tinte-2); background: var(--toenung); border-radius: var(--rund-voll); padding: 3px 9px; }
.d-nav { flex: 1; }
.d-gruppe { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); padding: 12px 10px 4px; }
.d-punkt { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: var(--rund-voll); font-size: 15.5px; font-weight: 550; color: var(--tinte-2); }
.d-punkt .zaehler { margin-left: auto; }
.d-punkt.an { background: rgba(255, 255, 255, 0.055); color: var(--lila); font-weight: 650; border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); }
.d-nutzer { display: flex; align-items: center; gap: 10px; padding: 8px; border-top: 1px solid var(--linie); }
.d-nutzer b { display: block; font-size: 15px; } .d-nutzer span { font-size: 13px; color: var(--leise); }
.d-haupt { position: absolute; top: 16px; left: 296px; right: 16px; bottom: 16px; border-radius: var(--rund-flaeche); padding: 18px 28px 24px; overflow: hidden; background: rgba(255, 255, 255, 0.044); border: 1px solid rgba(255, 255, 255, 0.033); }
.d-kopf { display: flex; align-items: center; gap: 10px; }
.krume { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--rund-voll); background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); font-size: 14.5px; color: var(--leise); }
.krume b { color: var(--tinte); font-weight: 650; }
.d-kopf .rechts { margin-left: auto; display: flex; gap: 10px; }
.d-kopf .rund { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); }
.skopf { display: flex; align-items: flex-end; gap: 16px; margin: 22px 0 20px; }
.skopf h1 { font-size: 34px; font-weight: 760; letter-spacing: -.025em; line-height: 1.1; }
.skopf .unter { font-size: 16px; color: var(--leise); margin-top: 6px; }
.skopf .aktionen { margin-left: auto; display: flex; gap: 10px; }
.kkopf { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; }
.kkopf h2 { font-size: 18px; font-weight: 700; }
.kkopf .rechts { margin-left: auto; font-size: 14.5px; font-weight: 600; color: var(--tinte-2); display: inline-flex; align-items: center; gap: 4px; }
.zeile { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 18px; border-top: 1px solid var(--linie); }
.zeile .txt { flex: 1; min-width: 0; }
.zeile .t { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .s { font-size: 14px; color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zeile .chev { color: var(--grau); }
.zeile.gewaehlt { background: rgba(255, 255, 255, 0.044); }
.zeile.still { opacity: .62; }
.kopfzeile { display: grid; padding: 10px 18px; font-size: 13px; font-weight: 650; color: var(--leise); letter-spacing: .02em; }
.zahl-gross { font-size: 30px; font-weight: 760; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gruen-text { color: var(--gruen); }
.blase { max-width: 78%; padding: 10px 14px; border-radius: var(--rund-flaeche); font-size: 15px; line-height: 1.4; }
.blase.kunde { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); }
.blase.du { background: var(--lila); color: #fff; margin-left: auto; }
.feld { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: var(--rund-voll); background: var(--toenung); border: 1px solid rgba(255, 255, 255, 0.055); color: var(--leise); font-size: 15px; }

/* Handy */
.m { position: relative; width: 402px; height: 874px; overflow: hidden; }
.m-inhalt { padding: 0 16px 120px; }
.m-titelzeile { display: flex; align-items: center; gap: 12px; padding: 64px 4px 6px; }
.m-titelzeile h1 { font-size: 32px; font-weight: 760; letter-spacing: -.025em; line-height: 1.1; }
.m-titelzeile .datum { font-size: 15px; color: var(--leise); margin-top: 4px; }
.m-titelzeile .rechts { margin-left: auto; }
.m-ava { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 16px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); }
.m-abschnitt { display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--leise); padding: 18px 6px 8px; }
.m-abschnitt .rechts { margin-left: auto; color: var(--tinte-2); font-weight: 650; display: inline-flex; align-items: center; gap: 4px; }
.m-insel { border-radius: var(--rund-flaeche); overflow: hidden; }
.m-zeile { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; position: relative; }
.m-zeile + .m-zeile::before { content: ""; position: absolute; top: 0; right: 0; left: 62px; border-top: 1px solid var(--linie); }
.m-zeile .txt { flex: 1; min-width: 0; }
.m-zeile .t { font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.m-zeile .s { font-size: 14.5px; color: var(--leise); }
.m-zeile .chev { color: var(--grau); }
.m-tabs { background: rgba(255, 255, 255, 0.055); position: absolute; left: 16px; right: 16px; bottom: 22px; height: 72px; border-radius: var(--rund-voll); display: flex; align-items: center; padding: 6px; z-index: 5; }
.m-tab { flex: 1; height: 60px; border-radius: var(--rund-voll); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 600; color: var(--tinte-2); }
.m-tab .i { width: 23px; height: 23px; }
.m-tab.an { background: rgba(255, 255, 255, 0.055); color: var(--lila); box-shadow: var(--schatten-klein); }
.m-kachel { padding: 14px 16px; }
.m-kachel .l { font-size: 13.5px; color: var(--leise); } .m-kachel .z { font-size: 24px; font-weight: 760; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; } .m-kachel .u { font-size: 13px; color: var(--leise); margin-top: 2px; }

/* Stil-Tafel */
.tafel { position: absolute; }
.tafel-titel { font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin-bottom: 12px; }
.farbe { width: 150px; }
.farbe .f { height: 72px; border-radius: var(--rund-flaeche); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); }
.farbe b { display: block; font-size: 14px; margin-top: 8px; } .farbe span { font-size: 13px; color: var(--leise); font-variant-numeric: tabular-nums; }
.muster-etikett { position: absolute; top: -34px; left: 0; font-size: 14px; font-weight: 650; color: var(--tinte-2); }
/* Handy: Inhalt läuft unter der Tableiste aus, weicher Übergang statt hartem Schnitt */
.m::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, rgba(241, 243, 246, 0), rgba(255, 255, 255, .10) 72%); z-index: 4; pointer-events: none; }
/* Unterseiten in der Leiste */
.d-punkt.offen { color: var(--tinte); font-weight: 650; }
.d-sub { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 42px; border-radius: var(--rund-voll); font-size: 14.5px; font-weight: 550; color: var(--tinte-2); }
.d-sub .zaehler { margin-left: auto; }
.d-sub.an { background: rgba(255, 255, 255, 0.055); color: var(--lila); font-weight: 650; border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); }


/* ===== v13: Liquid Glass wie im HHV-Board. Grund: weicher Pastellverlauf, Flächen aus Glas. Hauptblau var(--lila) ===== */
.glas { background: rgba(255, 255, 255, 0.044); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.055), var(--schatten-klein); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); }
.karte { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.055), 0 .5px 1px rgba(20, 24, 32, 0.06), 0 2px 5px rgba(20, 24, 32, 0.06), 0 6px 16px rgba(20, 24, 32, 0.084); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); }
.d-leiste.glas { background: rgba(255, 255, 255, 0.044); }
.d-haupt, .d-haupt.glas { background: rgba(255, 255, 255, 0.143); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.055); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); }
.dialog { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.055), var(--schatten); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); }
.skopf h1, .m-titelzeile h1 { color: var(--tinte); }
.zahl-gross, .m-kachel .z { color: var(--lila-tief); }
.gruen-text { color: var(--fertig); }
.kkopf { display: flex; align-items: center; gap: 12px; padding: 16px 18px 12px; background: none; border-radius: 0; }
.kkopf h2 { font-size: 18px; font-weight: 700; color: var(--tinte); }
.m-abschnitt { color: var(--leise); font-weight: 650; }
.d-gruppe { color: var(--leise); }
.d-punkt .i, .m-tab:not(.an) .i { color: var(--tinte-2); }
.d-punkt.an .i, .d-sub.an, .m-tab.an .i { color: var(--lila); }
.symq { background: rgba(255, 255, 255, 0.055); color: var(--lila); border: 1px solid rgba(255, 255, 255, 0.055); }
.knopf.prim { background: var(--lila); }
.d-logo { background: var(--lila); }
.knopf.sek { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); color: var(--tinte); }
.segment { background: rgba(255, 255, 255, 0.044); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.055); }
.segment > span.an { background: rgba(255, 255, 255, 0.055); color: var(--tinte); box-shadow: var(--schatten-klein); border: 0; }
.segment .n { color: var(--lila); }
.zaehler { background: rgba(255, 255, 255, 0.055); color: var(--tinte-2); }
.pille { background: rgba(255, 255, 255, 0.055); color: var(--tinte-2); }
.d-punkt.an, .m-tab.an { background: rgba(255, 255, 255, 0.055); color: var(--lila); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); }
.d-sub.an { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); }
.krume, .d-kopf .rund, .m-ava { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); box-shadow: var(--schatten-klein); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); }
.d-suche, .feld { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); }
.m-tabs { background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.055), var(--schatten-klein); border: 1px solid rgba(255, 255, 255, 0.055); -webkit-backdrop-filter: blur(28px) saturate(1.7); backdrop-filter: blur(28px) saturate(1.7); }
.m::after { background: linear-gradient(to bottom, rgba(241, 243, 246, 0), rgba(255, 255, 255, .10) 72%); }
.d-nutzer { border-top-color: var(--linie); }
.haken { border-color: var(--rand-schalter); background: rgba(255, 255, 255, 0.055); }
.haken.an { background: var(--lila); border-color: var(--tinte); }
.blase.kunde { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.055); }
.pille.rot { background: var(--rot-zart); color: var(--rot); font-weight: 650; }
.pille.offen { background: rgba(255, 255, 255, 0.055); color: var(--tinte-2); }
.pille.laeuft { background: var(--lila-zart); color: var(--lila-tief); }
.pille.fertig, .pille.gruen { background: var(--fertig-bg); color: var(--fertig); }
.pille.blau { background: var(--lila-zart); color: var(--lila-tief); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.ablage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; height: 160px; border-radius: 24px; background: rgba(255, 255, 255, 0.044); border: 1px solid rgba(255, 255, 255, 0.055); }
.ablage .t1 { font-size: 15.5px; font-weight: 600; } .ablage .t2 { font-size: 14px; color: var(--leise); }
.zeile.kopf-zeile { border-top: 1px solid var(--linie); }
.x-thumb.mo { width: 100%; height: auto; }
/* Kennzahl-Kachel nach Bewertung: gut = grünes Glas, schlecht = rotes Glas, Zahl bleibt dunkel, dazu Pfeil */
.karte.gut, .karte.schlecht { position: relative; }
.karte.gut { background: linear-gradient(rgba(255, 255, 255, 0.132), rgba(255, 255, 255, 0.132)), rgba(255, 255, 255, 0.055); border-color: transparent; }
.karte.schlecht { background: linear-gradient(rgba(179, 38, 30, 0.2), rgba(179, 38, 30, 0.2)), rgba(255, 255, 255, 0.055); border-color: transparent; }
.karte.gut .gruen-text, .karte.gut .gruen-text *, .karte.gut .zahl-gross, .karte.gut .f-n, .karte.schlecht .zahl-gross, .karte.schlecht .f-n, .karte.schlecht .rot-text { color: var(--tinte) !important; }
.tendenz { position: absolute; top: 10px; right: 14px; font-size: 13px; font-weight: 700; line-height: 1; }
.karte.gut .tendenz { color: var(--fertig); } .karte.schlecht .tendenz { color: var(--rot); }
.m .knopf.klein { min-height: 44px; padding: 0 11px; font-size: 14px; gap: 6px; }
.m .segment.klein > span { min-height: 40px; }
/* Rückfall: deckend, ohne Weichzeichner */
@media (prefers-reduced-transparency: reduce) {
  .karte, .glas, .d-haupt, .krume, .d-kopf .rund, .m-ava, .m-tabs, .d-suche, .feld, .segment, .knopf.sek, .symq, .dialog { background: rgba(255, 255, 255, .10); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :scope { background: #F1F3F6; }
  .karte.gut { background: var(--fertig-bg); } .karte.schlecht { background: var(--rot-zart); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .karte, .glas, .d-haupt, .krume, .d-kopf .rund, .m-ava, .m-tabs, .d-suche, .feld, .segment, .knopf.sek, .symq, .dialog { background: rgba(255, 255, 255, .10); }
  :scope { background: #F1F3F6; }
  .karte.gut { background: var(--fertig-bg); } .karte.schlecht { background: var(--rot-zart); }
}
/* Motivbilder (Druckplan, Produktion, Lampen-Studio): flache Formen auf Blau zart */
.mo { position: relative; display: block; flex: none; width: 72px; height: 60px; border-radius: 24px; background: var(--lila-zart); border: 1px solid rgba(255, 255, 255, 0.044); overflow: hidden; }
.mo::before { content: ""; position: absolute; inset: 3px 6px 19px; background: var(--img) center / contain no-repeat; }
.mo.rueck { background: #AFC0F0; } .mo.rueck::before { transform: scaleX(-1); opacity: .85; }
.mo em { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-style: normal; font-size: 11.5px; line-height: 16px; font-weight: 650; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.055); color: var(--tinte-2); }
.mo.k { width: 56px; height: 48px; } .mo.k::before { inset: 3px 5px 17px; } .mo.hy { width: 76px; height: 62px; } .mo.hy em { font-size: 11px; line-height: 15px; bottom: 3px; padding: 0 6px; }
.mo.nl::before { inset: 4px 6px; } .mo.voll { width: 100%; height: 100%; }
.mo-h { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Crect%20x=%2734.5%27%20y=%2730%27%20width=%273%27%20height=%2726%27%20rx=%271.5%27%20fill=%27%23A9BAF0%27/%3E%3Ccircle%20cx=%2736%27%20cy=%2722%27%20r=%2716%27%20fill=%27%232448C4%27/%3E%3Cpath%20d=%27M30%2014v16M42%2014v16M30%2022h12%27%20stroke=%27%23FFFFFF%27%20stroke-width=%273.6%27%20stroke-linecap=%27round%27%20fill=%27none%27/%3E%3C/svg%3E"); }
.mo-h52 { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Crect%20x=%2734.5%27%20y=%2738%27%20width=%273%27%20height=%2718%27%20rx=%271.5%27%20fill=%27%23A9BAF0%27/%3E%3Crect%20x=%2712%27%20y=%278%27%20width=%2748%27%20height=%2732%27%20rx=%276%27%20fill=%27%23F2C230%27/%3E%3Crect%20x=%2712%27%20y=%278%27%20width=%2748%27%20height=%278%27%20rx=%276%27%20fill=%27%232B2622%27/%3E%3Crect%20x=%2712%27%20y=%2712%27%20width=%2748%27%20height=%274%27%20fill=%27%232B2622%27/%3E%3Ctext%20x=%2733%27%20y=%2735%27%20text-anchor=%27middle%27%20font-family=%27Inter,Arial,sans-serif%27%20font-weight=%27800%27%20font-size=%2717%27%20fill=%27%232B2622%27%3E52%3C/text%3E%3Ccircle%20cx=%2752%27%20cy=%2733%27%20r=%275.5%27%20fill=%27%232E8B57%27/%3E%3C/svg%3E"); }
.mo-fuchs { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Cpath%20d=%27M14%2047c0-10%205-14%2012-15%201-9%205-14%2011-14%203%200%205%202%206%205l3-6%203%208c4%202%206%206%206%2011%200%208-6%2015-15%2015H20c-4%200-6-2-6-4z%27%20fill=%27%232448C4%27/%3E%3Cpath%20d=%27M30%2032c2%206%208%208%2015%206%27%20stroke=%27%23FFFFFF%27%20stroke-width=%272.4%27%20fill=%27none%27%20stroke-linecap=%27round%27/%3E%3Ccircle%20cx=%2739%27%20cy=%2727%27%20r=%271.8%27%20fill=%27%23FFFFFF%27/%3E%3Cpath%20d=%27M12%2052c-4-8%200-16%208-16%27%20stroke=%27%233C63E0%27%20stroke-width=%275%27%20fill=%27none%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E"); }
.mo-logo { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Ccircle%20cx=%2736%27%20cy=%2730%27%20r=%2717%27%20fill=%27none%27%20stroke=%27%233C63E0%27%20stroke-width=%273.4%27%20stroke-dasharray=%275%204%27/%3E%3Ccircle%20cx=%2736%27%20cy=%2730%27%20r=%277%27%20fill=%27%23A9BAF0%27/%3E%3Cpath%20d=%27M14%2052h44%27%20stroke=%27%23A9BAF0%27%20stroke-width=%273.4%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E"); }
.mo-wolf { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Cpath%20d=%27M17%2050%2020%2014l12%2012h8l12-12%203%2036-19%208z%27%20fill=%27%232448C4%27/%3E%3Cpath%20d=%27M27%2036l5%202M45%2036l-5%202%27%20stroke=%27%23FFFFFF%27%20stroke-width=%273%27%20stroke-linecap=%27round%27/%3E%3Cpath%20d=%27M32%2047h8l-4%205z%27%20fill=%27%23FFFFFF%27/%3E%3C/svg%3E"); }
.mo-eule { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Cpath%20d=%27M16%2018%2024%2028h24l8-10v26c0%209-9%2014-20%2014S16%2053%2016%2044z%27%20fill=%27%232448C4%27/%3E%3Ccircle%20cx=%2728%27%20cy=%2734%27%20r=%277.5%27%20fill=%27%23FFFFFF%27/%3E%3Ccircle%20cx=%2744%27%20cy=%2734%27%20r=%277.5%27%20fill=%27%23FFFFFF%27/%3E%3Ccircle%20cx=%2728%27%20cy=%2734%27%20r=%273.4%27%20fill=%27%2314308A%27/%3E%3Ccircle%20cx=%2744%27%20cy=%2734%27%20r=%273.4%27%20fill=%27%2314308A%27/%3E%3Cpath%20d=%27M33%2040h6l-3%206z%27%20fill=%27%23A9BAF0%27/%3E%3C/svg%3E"); }
.mo-mond { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Cpath%20d=%27M44%208A23%2023%200%201%200%2056%2046%2018%2018%200%200%201%2044%208z%27%20fill=%27%232448C4%27/%3E%3Ccircle%20cx=%2754%27%20cy=%2714%27%20r=%272%27%20fill=%27%233C63E0%27/%3E%3Ccircle%20cx=%2760%27%20cy=%2726%27%20r=%271.6%27%20fill=%27%233C63E0%27/%3E%3C/svg%3E"); }
.mo-hirsch { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Ccircle%20cx=%2736%27%20cy=%2729%27%20r=%2720%27%20fill=%27%23A9BAF0%27/%3E%3Cpath%20d=%27M26%2026%2014%2010M26%2026%2018%208M46%2026%2058%2010M46%2026%2054%208M30%2022%2024%206M42%2022%2048%206%27%20stroke=%27%232448C4%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20fill=%27none%27/%3E%3Cpath%20d=%27M26%2024h20l-4%2022-6%208-6-8z%27%20fill=%27%232448C4%27/%3E%3Ccircle%20cx=%2731%27%20cy=%2733%27%20r=%271.8%27%20fill=%27%23FFFFFF%27/%3E%3Ccircle%20cx=%2741%27%20cy=%2733%27%20r=%271.8%27%20fill=%27%23FFFFFF%27/%3E%3C/svg%3E"); }
.mo-baer { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Ccircle%20cx=%2720%27%20cy=%2717%27%20r=%277%27%20fill=%27%232448C4%27/%3E%3Ccircle%20cx=%2752%27%20cy=%2717%27%20r=%277%27%20fill=%27%232448C4%27/%3E%3Ccircle%20cx=%2736%27%20cy=%2732%27%20r=%2720%27%20fill=%27%232448C4%27/%3E%3Cellipse%20cx=%2736%27%20cy=%2739%27%20rx=%279%27%20ry=%277%27%20fill=%27%23A9BAF0%27/%3E%3Ccircle%20cx=%2736%27%20cy=%2736%27%20r=%273%27%20fill=%27%2314308A%27/%3E%3Ccircle%20cx=%2728%27%20cy=%2727%27%20r=%272.2%27%20fill=%27%23FFFFFF%27/%3E%3Ccircle%20cx=%2744%27%20cy=%2727%27%20r=%272.2%27%20fill=%27%23FFFFFF%27/%3E%3C/svg%3E"); }
.mo-motorrad { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Ccircle%20cx=%2718%27%20cy=%2742%27%20r=%2710%27%20fill=%27none%27%20stroke=%27%232448C4%27%20stroke-width=%274%27/%3E%3Ccircle%20cx=%2754%27%20cy=%2742%27%20r=%2710%27%20fill=%27none%27%20stroke=%27%232448C4%27%20stroke-width=%274%27/%3E%3Cpath%20d=%27M18%2042%2030%2026h14l10%2016M30%2026l-4-8h-6M44%2026l4-8h6M30%2034h14%27%20stroke=%27%233C63E0%27%20stroke-width=%274%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%20fill=%27none%27/%3E%3C/svg%3E"); }
.mo-wald { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Cpath%20d=%27M15%2022L3.4%2039.0H26.6z%27%20fill=%27%23A9BAF0%27/%3E%3Cpath%20d=%27M15%2030.8L-0.6%2049.9H30.6z%27%20fill=%27%23A9BAF0%27/%3E%3Crect%20x=%2713.3%27%20y=%2749.9%27%20width=%273.4%27%20height=%275.4%27%20fill=%27%2314308A%27/%3E%3Cpath%20d=%27M57%2022L45.4%2039.0H68.6z%27%20fill=%27%233C63E0%27/%3E%3Cpath%20d=%27M57%2030.8L41.4%2049.9H72.6z%27%20fill=%27%233C63E0%27/%3E%3Crect%20x=%2755.3%27%20y=%2749.9%27%20width=%273.4%27%20height=%275.4%27%20fill=%27%2314308A%27/%3E%3Cpath%20d=%27M36%206L20.4%2029.0H51.6z%27%20fill=%27%232448C4%27/%3E%3Cpath%20d=%27M36%2018.0L14.8%2043.7H57.2z%27%20fill=%27%232448C4%27/%3E%3Crect%20x=%2733.7%27%20y=%2743.7%27%20width=%274.6%27%20height=%277.4%27%20fill=%27%2314308A%27/%3E%3C/svg%3E"); }
.mo-berg { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Cpath%20d=%27M4%2052%2026%2014l14%2022%208-10%2020%2026z%27%20fill=%27%232448C4%27/%3E%3Cpath%20d=%27M26%2014l-7%2012%205-3%204%205%205-5z%27%20fill=%27%23FFFFFF%27/%3E%3Ccircle%20cx=%2756%27%20cy=%2714%27%20r=%275%27%20fill=%27%23A9BAF0%27/%3E%3C/svg%3E"); }
.mo-eulemond { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Cpath%20d=%27M46%206A24%2024%200%201%200%2058%2048%2019%2019%200%200%201%2046%206z%27%20fill=%27%23A9BAF0%27/%3E%3Cpath%20d=%27M26%2024%2032%2030h14l6-6v22c0%207-7%2011-13%2011S26%2053%2026%2046z%27%20fill=%27%232448C4%27/%3E%3Ccircle%20cx=%2735%27%20cy=%2737%27%20r=%274.4%27%20fill=%27%23FFFFFF%27/%3E%3Ccircle%20cx=%2745%27%20cy=%2737%27%20r=%274.4%27%20fill=%27%23FFFFFF%27/%3E%3Ccircle%20cx=%2735%27%20cy=%2737%27%20r=%272%27%20fill=%27%2314308A%27/%3E%3Ccircle%20cx=%2745%27%20cy=%2737%27%20r=%272%27%20fill=%27%2314308A%27/%3E%3C/svg%3E"); }
.mo-segel { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Cpath%20d=%27M34%208v34H12zM38%2014l20%2028H38z%27%20fill=%27%232448C4%27/%3E%3Cpath%20d=%27M38%2014l20%2028H38z%27%20fill=%27%233C63E0%27/%3E%3Cpath%20d=%27M8%2046h56l-8%2010H16z%27%20fill=%27%2314308A%27/%3E%3C/svg%3E"); }
.mo-turm { --img: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2072%2060%27%3E%3Cpath%20d=%27M30%2054%2033%2020h6l3%2034z%27%20fill=%27%232448C4%27/%3E%3Cpath%20d=%27M31.5%2032h9l-.6%207h-7.8z%27%20fill=%27%23FFFFFF%27/%3E%3Cpath%20d=%27M32.5%2020v-6h7v6z%27%20fill=%27%2314308A%27/%3E%3Cpath%20d=%27M30%2014l6-7%206%207zM28%2054h16%27%20stroke=%27%2314308A%27%20stroke-width=%273%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3Cpath%20d=%27M44%2017l16-6M44%2021l18%202M28%2017%2012%2011M28%2021%2010%2023%27%20stroke=%27%23A9BAF0%27%20stroke-width=%272.6%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E"); }

/* ===== v17: Grund helles Grau-Beige, Felder und Kanten sichtbar (WCAG 1.4.11, Rand mindestens 3:1) ===== */
:scope { --rand-schalter: #9CA5B7; --feld-rand: #9CA5B7; --karte-rand: rgba(255, 255, 255, .20); --grund: #15171C; }
.karte, .ablage { border-color: var(--karte-rand); }
.glas, .d-haupt, .d-haupt.glas, .d-leiste.glas { border-color: rgba(255, 255, 255, 0.121); }
.dialog { border-color: var(--karte-rand); }
.feld, .d-suche, .antwort-feld, .fl, .f-feld, .f-eing { background: rgba(255, 255, 255, 0.055); border: 1.5px solid var(--feld-rand); }
.feld { color: var(--leise); }
.haken { border-color: var(--feld-rand); background: rgba(255, 255, 255, .10); }
.haken.an { background: var(--lila); border-color: var(--tinte); }
.erledigt .t { color: var(--leise); } .zeile.still { opacity: 1; } .zeile.still .ava { filter: grayscale(1); }
.fh { background: rgba(255, 255, 255, 0.055) !important; border: 1.5px solid var(--feld-rand) !important; }
.x-zone, .ablage { border: 1.5px dashed var(--feld-rand); background: rgba(255, 255, 255, 0.055); }
.segment, .knopf.sek, .krume, .d-kopf .rund, .m-ava, .m-tabs, .symq { border-color: rgba(255, 255, 255, 0.11); }
.sw { background: var(--rand-schalter); }
.sw.an { background: var(--lila); }
.d-suche { border-radius: 999px; }
.i-funke { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8zM19 16l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z'/%3E%3C/svg%3E"); }
.i-kopie { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9h11v11H9zM5 15V4h11'/%3E%3C/svg%3E"); }
.i-zurueck { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5M4 9h10a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E"); }
/* Schmaler Rechner (bis 1100): Leiste wird zur Symbolleiste */
@media (max-width: 1100px) {
  .d-leiste { width: 72px; padding: 10px 8px 8px; }
  .d-haupt { left: 104px; }
  .d-marke { padding: 0 0 4px; justify-content: center; } .d-marke > div:last-child { display: none; }
  .d-suche { justify-content: center; padding: 0; font-size: 0; gap: 0; } .d-suche .kbd { display: none; }
  .d-gruppe, .d-sub { display: none; }
  .d-punkt { font-size: 0; gap: 0; justify-content: center; padding: 0; position: relative; }
  .d-punkt .zaehler { position: absolute; top: -2px; right: 2px; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .d-nutzer { justify-content: center; } .d-nutzer > div { display: none; }
}
/* Zwei Spalten (Liste und Verlauf): schmaler Rechner, Liste wird zur Leiste */
.akt { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 12px; }
.akt .knopf { min-height: 44px; padding: 0 12px; font-size: 14px; gap: 6px; flex: 0 1 auto; min-width: 0; }
@media (max-width: 1360px) { .zwei { grid-template-columns: 340px minmax(0, 1fr) !important; } }
@media (max-width: 1100px) {
  .zwei { grid-template-columns: 116px minmax(0, 1fr) !important; }
  .zwei .liste .txt, .zwei .liste .re, .zwei .liste .bulk { display: none !important; }
  .zwei .liste .zeile { padding: 6px 12px; gap: 8px; justify-content: center; }
}
@media (max-width: 1360px) { .pop2 { right: auto !important; left: 330px !important; top: 640px !important; } }
.skopf { flex-wrap: wrap; } .skopf .aktionen { flex-wrap: wrap; justify-content: flex-end; }

/* ===== v18: durchgehend dunkel. Grund #F1F3F6, Akzent L24-Blau, kein Lila, kein Umschalter ===== */
:scope {
  color-scheme: dark;
  --tinte: #F4F6FA; --tinte-2: #E6E9F0; --leise: #D4D9E3; --linie: rgba(255, 255, 255, .10);
  --lila: #3C63E0; --lila-tief: #BCCBFF; --lila-zart: rgba(60, 99, 224, .24); --lila-mid: #6C8CF5; --lila-hell: #A9BAF0; --lila-text: #B4C5FF;
  --fokus: #C9D5F7; --akz-rgb: 60, 99, 224; --blau: #6C8CF5;
  --grau: #7C8494; --grau-hell: #3A3F4A; --toenung: rgba(255, 255, 255, .09); --toenung-ava: #232C4A;
  --rand-schalter: #9CA5B7; --feld-rand: #9CA5B7; --karte-rand: rgba(255, 255, 255, .20); --grund: #15171C;
  --glas: rgba(255, 255, 255, .06); --glas-dicht: rgba(255, 255, 255, .07); --glas-rand: rgba(255, 255, 255, .20);
  --schatten-klein: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .25);
  --schatten: 0 1px 3px rgba(0, 0, 0, .40), 0 10px 28px rgba(0, 0, 0, .35), 0 28px 72px rgba(0, 0, 0, .45);
  --schatten-lila: 0 2px 8px rgba(60, 99, 224, .40);
  --rot: #FF8F86; --rot-zart: #3F2023; --offen: #D0D5E0; --offen-bg: rgba(255, 255, 255, .10); --laeuft: #D2DCFF; --laeuft-bg: rgba(60, 99, 224, .28);
  --fertig: #A8EEC0; --fertig-bg: rgba(52, 199, 89, .18); --gruen: #3FCF82; --orange: #D0D5E0;
  --ma-1: #22304F; --ma-1-t: #B7C7FF; --ma-2: #1F3A2D; --ma-2-t: #9BE3B5; --ma-3: #2E3138; --ma-3-t: #D0D5E0;
  --ma-4: #3A3524; --ma-4-t: #D5D8DE; --ma-5: #1C3A3A; --ma-5-t: #8FDCD6; --ma-6: #252C45; --ma-6-t: #A9B8F0;
}
:scope {
  color: var(--tinte);
  background:
    radial-gradient(60% 52% at 6% 4%, rgba(31, 85, 224, 0.13) 0%, rgba(31, 85, 224, 0) 72%),
    radial-gradient(56% 50% at 96% 6%, rgba(90, 110, 150, .18) 0%, rgba(90, 110, 150, 0) 72%),
    radial-gradient(60% 50% at 4% 96%, rgba(70, 85, 120, .22) 0%, rgba(70, 85, 120, 0) 72%),
    radial-gradient(56% 50% at 98% 96%, rgba(31, 85, 224, 0.09) 0%, rgba(31, 85, 224, 0) 72%),
    radial-gradient(40% 36% at 52% 50%, rgba(44, 52, 74, .55) 0%, rgba(44, 52, 74, 0) 75%),
    #F1F3F6;
}
.glas { background: rgba(255, 255, 255, 0.033); border-color: rgba(255, 255, 255, 0.099); box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.044), var(--schatten-klein); }
.karte { background: rgba(255, 255, 255, 0.039); border-color: var(--karte-rand); box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.039), var(--schatten-klein); }
.d-leiste.glas { background: rgba(255, 255, 255, 0.028); }
.d-haupt, .d-haupt.glas { background: rgba(255, 255, 255, 0.019); border-color: rgba(255, 255, 255, 0.088); box-shadow: inset 0 1px 0 rgba(20, 24, 32, 0.033); }
.karte .karte { background: rgba(255, 255, 255, 0.025); }
.dialog { background: rgba(255, 255, 255, .10); border-color: var(--karte-rand); box-shadow: var(--schatten); }
.m::after { background: linear-gradient(to bottom, rgba(241, 243, 246, 0), rgba(255, 255, 255, .10) 72%); }
.m-tabs { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, 0.11); box-shadow: var(--schatten-klein); }
.m-tab.an, .d-punkt.an, .d-sub.an { background: rgba(31, 85, 224, 0.15); color: var(--lila-tief); border: 1px solid rgba(31, 85, 224, 0.24); box-shadow: none; }
.d-punkt.an .i, .m-tab.an .i, .d-sub.an { color: var(--lila-tief); }
.d-punkt .i, .m-tab:not(.an) .i { color: var(--tinte-2); }
.segment { background: rgba(255, 255, 255, 0.033); border-color: rgba(255, 255, 255, 0.11); box-shadow: none; }
.segment > span.an { background: rgba(255, 255, 255, 0.072); color: var(--tinte); box-shadow: none; }
.segment .n { color: var(--lila-tief); }
.knopf.sek { background: rgba(255, 255, 255, 0.044); border-color: rgba(255, 255, 255, 0.132); color: var(--tinte); box-shadow: none; }
.knopf.prim { background: var(--lila); color: #fff; box-shadow: var(--schatten-lila); }
.krume, .d-kopf .rund, .m-ava, .rund, .symq { background: rgba(255, 255, 255, 0.044); border: 1px solid rgba(255, 255, 255, 0.11); box-shadow: none; color: var(--tinte-2); }
.symq { color: var(--lila-text); }
.rund .punkt { background: var(--rot); box-shadow: 0 0 0 2px #FFFFFF; }
.d-suche, .feld, .antwort-feld, .fl, .f-feld, .f-eing { background: rgba(255, 255, 255, 0.028); border: 1.5px solid var(--feld-rand); color: var(--leise); }
.feld { color: var(--leise); }
.fh { background: rgba(255, 255, 255, 0.028) !important; border: 1.5px solid var(--feld-rand) !important; }
.x-zone, .ablage { background: rgba(255, 255, 255, 0.022); border: 1.5px dashed var(--feld-rand); }
.haken { border-color: var(--feld-rand); background: rgba(255, 255, 255, 0.022); color: #fff; }
.haken.an { background: var(--lila); border-color: var(--lila); color: #FFFFFF; }
.mo .haken.an { background: rgba(255, 255, 255, .10); border-color: #FFFFFF; color: #fff; }
.sw { background: var(--rand-schalter); } .sw.an { background: var(--lila); } .x-sw.an { background: var(--lila); }
.pille, .zaehler { background: rgba(255, 255, 255, 0.055); color: var(--tinte-2); }
.pille.rot { background: var(--rot-zart); color: var(--rot); }
.pille.offen { background: rgba(255, 255, 255, 0.055); color: var(--tinte-2); }
.pille.laeuft { background: rgba(31, 85, 224, 0.14); color: var(--lila-tief); }
.pille.fertig, .pille.gruen { background: rgba(255, 255, 255, 0.108); color: var(--fertig); }
.pille.blau { background: rgba(31, 85, 224, 0.13); color: var(--lila-tief); }
.ava { border: 1px solid rgba(255, 255, 255, 0.11); }
.zeile.gewaehlt { background: rgba(255, 255, 255, 0.033); }
.blase.kunde { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.088); box-shadow: none; color: var(--tinte); }
.blase.du { background: var(--lila); color: #fff; }
.zahl-gross, .m-kachel .z { color: var(--tinte); }
.skopf h1, .m-titelzeile h1, .kkopf h2 { color: var(--tinte); }
.leise, .m-abschnitt, .d-gruppe { color: var(--leise); }
.zeile .chev, .m-zeile .chev { color: var(--grau); }
.karte.gut { background: var(--fertig-bg); border-color: transparent; }
.karte.schlecht { background: var(--rot-zart); border-color: transparent; }
.karte svg { max-width: 100%; height: auto; }
.x-thumb.mo, .mo { background: #B8C7F2; border-color: rgba(255, 255, 255, 0.138); }
.mo.rueck, .x-thumb.mo.rueck { background: #A4B6EB; }
.mo em { background: rgba(255, 255, 255, .10); color: var(--tinte-2); }
.dfa .df, .df { box-shadow: 0 0 0 1.5px rgba(20, 24, 32, 0.2); }
.d-logo { background: var(--lila); color: #fff; }
::selection { background: rgba(31, 85, 224, 0.225); }
@media (prefers-reduced-transparency: reduce) {
  .karte, .glas, .d-haupt, .krume, .d-kopf .rund, .m-ava, .m-tabs, .d-suche, .feld, .segment, .knopf.sek, .symq, .dialog { background: rgba(255, 255, 255, .10); -webkit-backdrop-filter: none; backdrop-filter: none; }
  :scope { background: #F1F3F6; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .karte, .glas, .d-haupt, .krume, .d-kopf .rund, .m-ava, .m-tabs, .d-suche, .feld, .segment, .knopf.sek, .symq, .dialog { background: rgba(255, 255, 255, .10); }
  :scope { background: #F1F3F6; }
}

/* v19 schmal */
@media (max-width: 1360px) {
  :scope:not(.m) { height: auto !important; min-height: 900px; }
  :scope:not(.m) .d-haupt { position: relative; top: auto; left: auto; right: auto; bottom: auto; margin: 16px 16px 16px 296px; }
  .zwei { height: auto !important; min-height: 600px; }
  .d-haupt > div[style$="height: 650px"] { height: auto !important; min-height: 650px; }
}
@media (max-width: 1100px) { :scope:not(.m) .d-haupt { margin-left: 104px; } }

/* ===== v21 Sand und Himmel: hell, warm, Glas weiß 50 %, Marke #1F55E0 (Farbprobe B, wie Dealer Helper). Kein Gelb, kein Orange ===== */
:scope {
  color-scheme: light;
  --tinte: #0F1115; --tinte-2: #33363D; --leise: #5A5F69; --linie: rgba(255, 255, 255, .10);
  --lila: #1F55E0; --lila-tief: #1640B0; --lila-mid: #1F4FD0; --lila-hell: #8FB3DB; --lila-zart: #E6EDFC; --lila-text: #1F4FD0;
  --fokus: #1F4FD0; --akz-rgb: 6, 57, 113; --blau: #1F4FD0;
  --grau: #80858F; --grau-hell: #DFE2E6; --toenung: rgba(255, 255, 255, .07); --toenung-ava: #E6EDFC;
  --rand-schalter: #80858F; --feld-rand: #7A7F89; --karte-rand: rgba(255, 255, 255, .85); --grund: #F1F3F6;
  --glas: rgba(255, 255, 255, .50); --glas-dicht: rgba(255, 255, 255, .62); --glas-rand: rgba(255, 255, 255, .80);
  --glas-blur: blur(24px) saturate(1.4);
  --schatten-klein: 0 1px 2px rgba(20, 24, 32, .05), 0 6px 18px rgba(20, 24, 32, .07);
  --schatten: 0 2px 6px rgba(20, 24, 32, .08), 0 16px 40px rgba(20, 24, 32, .14);
  --schatten-lila: 0 6px 16px rgba(31, 85, 224, .28);
  --rot: #B3261E; --rot-zart: #FBE3DF; --offen: #3D4048; --offen-bg: #E9EBEE; --laeuft: #1F4FD0; --laeuft-bg: #E6EDFC;
  --fertig: #33363D; --fertig-bg: #E9EBEE; --gruen: #33363D; --orange: #3D4048;
  --ma-1: #E6EDFC; --ma-1-t: #1F55E0; --ma-2: #E9EBEE; --ma-2-t: #33363D; --ma-3: #E9EBEE; --ma-3-t: #3D4048;
  --ma-4: #DDE9EF; --ma-4-t: #1F4E66; --ma-5: #D7ECEA; --ma-5-t: #145C59; --ma-6: #E3E8F3; --ma-6-t: #2E3D78;
}
:scope {
  color: var(--tinte);
  background:
    radial-gradient(900px 700px at 8% 0%, rgba(255, 255, 255, .12) 0%, rgba(217, 222, 231, 0) 66%),
    radial-gradient(1000px 800px at 100% 100%, #C8D7F7 0%, rgba(200, 215, 247, 0) 64%),
    #F1F3F6;
}
.glas { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .80); box-shadow: 0 1px 2px rgba(20, 24, 32, .04), 0 8px 28px rgba(20, 24, 32, .07); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.karte { background: rgba(255, 255, 255, .07); border: 1px solid var(--karte-rand); box-shadow: var(--schatten-klein); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.karte .karte { background: rgba(255, 255, 255, .07); }
.d-leiste.glas { background: rgba(255, 255, 255, .07); }
.d-haupt, .d-haupt.glas { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dialog { background: rgba(255, 255, 255, .10); border: 1px solid var(--karte-rand); box-shadow: var(--schatten); }
.d-logo { background: linear-gradient(135deg, #1640B0 0%, #1F4FD0 55%, #4F86C6 100%); color: #fff; box-shadow: 0 4px 12px rgba(31, 85, 224, .35); }
.d-punkt, .d-sub { color: var(--tinte-2); }
.d-punkt .i, .m-tab:not(.an) .i { color: var(--tinte-2); }
.m-tab.an, .d-punkt.an, .d-sub.an { background: rgba(255, 255, 255, .10); color: var(--lila); border: 1px solid #FFFFFF; box-shadow: 0 2px 8px rgba(20, 24, 32, .10); }
.d-punkt.an .i, .m-tab.an .i, .d-sub.an { color: var(--lila); }
.d-punkt.offen { color: var(--tinte); }
.zaehler { background: rgba(31, 85, 224, .10); color: var(--lila); }
.kbd { background: rgba(255, 255, 255, .07); color: var(--tinte-2); }
.knopf.prim { background: var(--lila); color: #fff; border-color: var(--lila); box-shadow: var(--schatten-lila); }
.knopf.sek { background: rgba(255, 255, 255, .10); border: 1px solid #FFFFFF; color: var(--tinte); box-shadow: 0 2px 6px rgba(20, 24, 32, .08); }
.krume, .d-kopf .rund, .m-ava, .rund { background: rgba(255, 255, 255, .07); border: 1px solid #FFFFFF; box-shadow: 0 2px 6px rgba(20, 24, 32, .06); color: var(--tinte-2); }
.krume b { color: var(--tinte); }
.symq { background: rgba(31, 85, 224, .09); border: 1px solid rgba(31, 85, 224, .14); color: var(--lila); }
.rund .punkt { background: var(--rot); box-shadow: 0 0 0 2px #FFFFFF; }
/* A7 (E1 21.10.): Glasrand wie HHV, innen 1 px Linie für 3:1 (WCAG 1.4.11), Fokus blau */
.d-suche, .feld, .antwort-feld, .fl, .f-feld, .f-eing { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px #626772, var(--schatten-feld); color: var(--leise); }
.d-suche:focus-within, .feld:focus-within, .antwort-feld:focus-within, .fl:focus-within, .f-feld:focus-within, .f-eing:focus-within, .fh:focus-within { box-shadow: inset 0 0 0 1px var(--fokus), 0 0 0 3px rgba(31, 79, 208, .28); }
.feld { color: var(--leise); }
.fh { background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .85) !important; box-shadow: inset 0 0 0 1px #626772 !important; }
.x-zone, .ablage { background: rgba(255, 255, 255, .07); border: 1.5px dashed var(--feld-rand); }
.haken { border-color: var(--feld-rand); background: rgba(255, 255, 255, .10); color: #FFFFFF; }
.haken.an { background: var(--lila); border-color: var(--lila); color: #FFFFFF; }
.mo .haken.an { background: var(--lila-tief); border-color: var(--lila-tief); color: #FFFFFF; }
.sw { background: var(--rand-schalter); } .sw.an, .x-sw.an { background: var(--lila-mid); }
.segment { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10); box-shadow: none; }
.segment > span { color: var(--tinte-2); }
.segment > span.an { background: rgba(255, 255, 255, .10); color: var(--tinte); box-shadow: 0 2px 8px rgba(20, 24, 32, .10); }
.segment .n { color: var(--lila); }
.pille { background: rgba(255, 255, 255, .07); color: var(--tinte-2); }
.pille.rot { background: var(--rot-zart); color: var(--rot); }
.pille.offen { background: var(--offen-bg); color: var(--offen); }
.pille.laeuft { background: var(--laeuft-bg); color: var(--laeuft); }
.pille.fertig, .pille.gruen { background: var(--fertig-bg); color: var(--fertig); }
.pille.blau { background: var(--lila-zart); color: var(--lila-tief); }
.ava { border: 1px solid rgba(255, 255, 255, .90); }
.zeile.gewaehlt { background: rgba(255, 255, 255, .07); }
.blase.kunde { background: rgba(255, 255, 255, .10); border: 1px solid #FFFFFF; box-shadow: 0 2px 6px rgba(20, 24, 32, .06); color: var(--tinte); }
.blase.du { background: var(--lila); color: #fff; }
.zahl-gross, .m-kachel .z, .skopf h1, .m-titelzeile h1, .kkopf h2 { color: var(--tinte); }
.leise, .m-abschnitt, .d-gruppe, .skopf .unter, .m-titelzeile .datum { color: var(--leise); }
.zeile .chev, .m-zeile .chev { color: var(--grau); }
.m::after { background: linear-gradient(to bottom, rgba(241, 243, 246, 0), rgba(241, 243, 246, .94) 72%); }
.m-tabs { background: rgba(255, 255, 255, .07); border: 1px solid #FFFFFF; box-shadow: 0 8px 28px rgba(20, 24, 32, .12); }
.m-tab { color: var(--tinte-2); }
.karte.gut { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }
.karte.schlecht { background: #FBE6E2; border-color: rgba(179, 38, 30, .45); }
.karte.gut .gruen-text, .karte.gut .gruen-text *, .karte.gut .zahl-gross, .karte.gut .f-n, .karte.schlecht .zahl-gross, .karte.schlecht .f-n, .karte.schlecht .rot-text { color: var(--tinte) !important; }
.karte.gut .tendenz { color: var(--fertig); } .karte.schlecht .tendenz { color: var(--rot); }
.gruen-text { color: var(--fertig); }
.x-thumb.mo, .mo { background: #E6EDFC; border-color: rgba(255, 255, 255, .85); }
.mo.rueck, .x-thumb.mo.rueck { background: #C8D7F7; }
.mo em { background: rgba(255, 255, 255, .10); color: var(--tinte); }
.dfa .df, .df { box-shadow: 0 0 0 1.5px rgba(20, 24, 32, .25); }
.farbe .f { border-color: rgba(255, 255, 255, .12); }
::selection { background: rgba(31, 85, 224, .18); }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
@media (prefers-reduced-transparency: reduce) {
  .karte, .glas, .krume, .d-kopf .rund, .m-ava, .m-tabs, .d-suche, .feld, .knopf.sek, .dialog { background: rgba(255, 255, 255, .10); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .d-haupt { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .segment { background: rgba(255, 255, 255, .12); } .symq { background: #E6ECF3; }
  :scope { background: #F1F3F6; }
  .karte.gut { background: rgba(255, 255, 255, .12); } .karte.schlecht { background: #FBE6E2; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .karte, .glas, .krume, .d-kopf .rund, .m-ava, .m-tabs, .d-suche, .feld, .knopf.sek, .dialog { background: rgba(255, 255, 255, .10); }
  .d-haupt { background: none; }
  .segment { background: rgba(255, 255, 255, .12); } .symq { background: #E6ECF3; }
  :scope { background: #F1F3F6; }
  .karte.gut { background: rgba(255, 255, 255, .12); } .karte.schlecht { background: #FBE6E2; }
}

/* ===== v21 Form: Stilabgleich mit HHV-Board und ClosingHub (BOARD-SOLL, soll.css). Nur Form, Farben bleiben Farbprobe B ===== */
:scope {
  --glas-blur: blur(28px) saturate(1.7);
  --rund-flaeche: 24px; --rund-voll: 999px; --popover: rgba(255, 255, 255, .96);
  --schatten-feld: 0 .5px 1px rgba(20, 24, 32, .05), 0 2px 5px rgba(20, 24, 32, .04);
  --schatten-klein: 0 .5px 1px rgba(20, 24, 32, .05), 0 2px 5px rgba(20, 24, 32, .05), 0 6px 16px rgba(20, 24, 32, .07);
  --schatten: 0 1px 2px rgba(20, 24, 32, .04), 0 4px 12px rgba(20, 24, 32, .05), 0 16px 40px rgba(20, 24, 32, .08);
  --schatten-lila: 0 .5px 1px rgba(31, 85, 224, .16), 0 2px 6px rgba(31, 85, 224, .16), 0 6px 16px rgba(31, 85, 224, .20);
  --schatten-schwebend: 0 1px 3px rgba(20, 24, 32, .06), 0 10px 28px rgba(20, 24, 32, .10), 0 28px 72px rgba(20, 24, 32, .16);
  --schatten-oben: 0 -2px 8px rgba(20, 24, 32, .05), 0 -12px 36px rgba(20, 24, 32, .12);
}
.glas { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--schatten); }
.karte { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), var(--schatten-klein); }
.d-haupt, .d-haupt.glas { background: rgba(255, 255, 255, .30); border: 1px solid var(--glas-rand); border-radius: var(--rund-flaeche); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--schatten); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.dialog { background: var(--popover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), var(--schatten-schwebend); }
.m-tabs { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--schatten); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.d-logo { box-shadow: var(--schatten-lila); }
.m-tab.an, .d-punkt.an, .d-sub.an, .krume, .d-kopf .rund, .m-ava, .rund, .blase.kunde, .segment > span.an { box-shadow: var(--schatten-klein); }
.segment { border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.knopf.sek { background: var(--toenung); border: 1px solid rgba(255, 255, 255, .6); box-shadow: var(--schatten-klein); }
.dialog .knopf.sek { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .95); }
.knopf.klein { min-height: 44px; }
.segment.klein > span, .m .segment.klein > span { min-height: 44px; }
.kkopf .rechts { min-height: 44px; } .m-abschnitt .rechts { min-height: 32px; }
.d-nutzer { display: none; }
.karte.gut, .karte.schlecht { border-color: var(--karte-rand); }
.x-zone, .ablage { border: 1px solid var(--glas-rand); background: var(--glas); border-radius: var(--rund-flaeche); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.m-titelzeile .datum { font-size: 16px; }
/* Bausteine aus den Tafeln, Form nach soll.css (gilt vor den Tafel-Stilen durch :scope davor) */
:scope .zs, :scope .mini, :scope .sk-c { border-radius: 50%; }
:scope .fz.sel, :scope .fz2.dran, :scope .zeile.gewaehlt, :scope .zeile.sel, :scope .mz.sel, :scope .at.sel { background: rgba(255, 255, 255, .10); border-radius: var(--rund-flaeche); }
:scope .lgf.an { box-shadow: var(--schatten-klein); background: rgba(255, 255, 255, .10); }
:scope .chip.rot, :scope .lgf.hot, :scope .zs.r, :scope .zs.g, :scope .vm.wir, :scope .vm.kunde, :scope .sr.gruen, :scope .sr.rot, :scope .sr.blau, :scope .anh.fehler, :scope .eig { border-color: rgba(255, 255, 255, .6); }
:scope .vm.wir.noetig { border-width: 1px; }
:scope .ov { background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: none; backdrop-filter: none; }
:scope.dim { background: radial-gradient(900px 700px at 8% 0%, rgba(255, 255, 255, .12) 0%, rgba(217, 222, 231, 0) 66%), radial-gradient(1000px 800px at 100% 100%, #C8D7F7 0%, rgba(200, 215, 247, 0) 64%), #F1F3F6; }
:scope.dim .d-leiste.glas { background: rgba(255, 255, 255, .07); }
:scope.dim .d-haupt.glas { background: rgba(255, 255, 255, .30); }
:scope.dim .karte { background: rgba(255, 255, 255, .07); }
:scope.dim .m-tabs.glas, :scope.dim .m-tabs { background: rgba(255, 255, 255, .07); }
:scope .ov .dialog, :scope .pop, :scope .tip, :scope .melder { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), var(--schatten-schwebend); }
:scope .dialog h2 { font-size: 24px; font-weight: 760; letter-spacing: -.02em; }
:scope.m .dialog h2 { font-size: 22px; }
:scope .tip { border-radius: var(--rund-flaeche); background: var(--popover); border: 1px solid rgba(255, 255, 255, .95); }
:scope:not(.m) .ov:not(.blatt) .dialog { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); padding: 26px 30px 24px; }
:scope .ov.blatt .dialog { width: auto; margin: 0 8px 8px; border-radius: var(--rund-flaeche); border: 1px solid var(--karte-rand); }
@media (prefers-reduced-transparency: reduce) { .d-haupt, .d-haupt.glas { background: rgba(255, 255, 255, .10); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .d-haupt, .d-haupt.glas { background: rgba(255, 255, 255, .10); } }

/* B23 (E1 21.10.): Start-Zahlen als eine Karte mit Zeilen, Tönung nur als Pille */
.zahlen .zr { align-items: flex-start; min-height: 64px; padding: 12px 20px; }
.zahlen > .zr:first-child { border-top: 0; }
.zahlen .zr .t { white-space: normal; overflow: visible; display: flex; align-items: center; gap: 8px; }
.zahlen .zr .s { white-space: normal; overflow: visible; margin-top: 2px; line-height: 1.4; }
.zahlen .zr .bar { margin-top: 8px; max-width: 260px; }
.zahlen .zrest { margin-top: 6px; }
.zahlen .zw { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; max-width: 48%; text-align: right; }
.zahlen .zv { font-size: 22px; font-weight: 700; color: var(--tinte); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }
.zahlen .zw .pille { white-space: normal; height: auto; min-height: 26px; line-height: 1.25; text-align: right; }
.m .zahlen .zr { padding: 12px 16px; }
.m .zahlen .zv { font-size: 20px; }

/* P-595 (Max 21.10.): Zähler und Kanäle als EINE Pill-Reihe. In der App eine Zeile, seitlich wischbar;
   was nicht passt, liegt im Menü «…» am Ende der Reihe (P-607). */
.prow { display: flex; flex-wrap: wrap; align-items: center; gap: 60px 8px; height: 44px; overflow: hidden; position: relative; min-width: 0; padding: 2px 0; box-sizing: border-box; }
.prow > * { flex: none; }
.pp { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 0; color: var(--tinte-2); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.pp b { font-weight: 700; color: var(--lila); font-variant-numeric: tabular-nums; }
.pp.rot b { color: var(--rot); }
.pp.an { background: rgba(255, 255, 255, .10); color: var(--tinte); box-shadow: 0 2px 8px rgba(20, 24, 32, .10); }
.pp.rot.an { background: var(--rot-zart); color: var(--rot); }
.ptrenn { width: 1px; height: 24px; background: rgba(255, 255, 255, .18); margin: 0 4px; }
.prow.werk .knopf { height: 40px; min-height: 40px; }
.prow.werk .knopf b { color: var(--lila); margin-left: 4px; }
.m .pp, .m .prow.werk .knopf { padding: 0 14px; font-size: 14px; }
.m .prow.pfilter { margin-top: 12px; }
.lh .prow.werk, .lh .prow.pfilter { margin: 0; }

/* P-595: Verlauf als Chat. Kunde links, Lampenwerk24 rechts, Sprechblasen ohne Rahmen, Zeit klein in der Blase */
:scope .vm { max-width: 80%; border: 0 !important; border-radius: 24px; padding: 9px 14px 7px; box-shadow: 0 1px 2px rgba(20, 24, 32, .10); }
:scope .vm.kunde { align-self: flex-start; margin-right: auto; background: rgba(255, 255, 255, .10); }
:scope .vm.wir { align-self: flex-end; margin-left: auto; background: #E6EDFC; }
:scope .vm.kunde.neu1, :scope .vm.wir.noetig { background: var(--rot-zart); }
:scope .vm.kunde.neu2 { background: rgba(255, 255, 255, .12); }
:scope .vm .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
:scope .vm .meta .chip { height: 24px; font-size: 12.5px; }
:scope .vm .txt { margin-top: 0; }
:scope .vm .zeit { display: block; text-align: right; font-size: 12px; color: var(--leise); margin-top: 2px; white-space: nowrap; }
.tabgrid.prow, .pillen.prow { margin-top: 12px; }
.prow.kn-werk { margin-top: 10px; }
.kn-senden { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; }
.kn-senden .rund { width: 40px; height: 40px; }
.hnav.prow { margin-top: 12px; }
:scope .pillen.prow, :scope .tabgrid.prow, :scope .aktz.prow, :scope .hnav.prow { height: 44px; padding-top: 2px; padding-bottom: 0; box-sizing: border-box; }

:scope.m .fgk .kn.kn { flex-wrap: nowrap; }
:scope.m .fgk .kn > .knopf.knopf { flex: 1 1 0; min-width: 0; padding: 0 8px; }
:scope .prow.prow { row-gap: 60px; }
:scope.m .prow.prow { height: 48px; }
.m .pp, .m .prow.werk .knopf { height: 44px; min-height: 44px; }
/* P-596: Fassungsnummer auf jeder Tafel */
:scope { position: relative; }
:scope > .fassung { position: absolute; top: 0; right: 20px; z-index: 40; font-size: 12px; line-height: 16px; font-weight: 650; color: var(--leise); pointer-events: none; }
:scope.m > .fassung { top: 14px; right: 22px; }

/* P-596: Kopf der Fallansicht und Antwortleiste je in EINER Zeile */
.prow.fallkopf { gap: 60px 8px; }
.prow.fallkopf > span:not(.chip):not(.pille) { font-size: 18px; font-weight: 700; color: var(--tinte); white-space: nowrap; }
.kn-zeile { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.kn-zeile .prow.kn-werk { flex: 1 1 auto; min-width: 0; margin: 0; }
.kn-zeile .kn-senden { margin: 0; flex: none; }

/* P-596: Sprechblasen mit Schwanz (Kunde links, wir rechts), Ecke am Schwanz spitz */
:scope .vm { position: relative; overflow: visible; }
:scope .vm.kunde { border-bottom-left-radius: 0; margin-left: 10px; }
:scope .vm.wir { border-bottom-right-radius: 0; margin-right: 10px; }
:scope .vm::before { content: ""; position: absolute; bottom: 0; width: 12px; height: 16px; background: inherit; }
:scope .vm.kunde::before { left: -11px; clip-path: path('M12 0 L12 16 L0 16 C5 14 10 9 12 0 Z'); }
:scope .vm.wir::before { right: -11px; clip-path: path('M0 0 L0 16 L12 16 C7 14 2 9 0 0 Z'); }

/* P-596: alle übrigen Chip-, Auswahl- und Knopfblöcke in EINE Zeile, Rest seitlich (wischen). Markiert von sand.py (einz, e32 bis e52). */
:scope .einz.einz { display: flex; flex-wrap: wrap; row-gap: 200px; overflow: hidden; align-items: center; align-content: flex-start; grid-template-columns: none; box-sizing: border-box; }
:scope .einz.e32 { height: 32px; } :scope .einz.e40 { height: 40px; } :scope .einz.e48 { height: 48px; } :scope .einz.e52 { height: 52px; }
:scope .einz.einz > * { flex: none; width: auto; }
/* Rechner: Reihen, die weiterlaufen, zeigen am Ende ebenfalls den Rest an */
.prow.pnav { margin-top: 12px; }

/* P-606: Fall-Kopf geordnet wie HHV-Person */
.fk-top { display: flex; align-items: center; justify-content: space-between; padding: 56px 0 4px; }
.fk-top b { font-size: 17px; font-weight: 700; color: var(--tinte); }
.fk-luft { width: 44px; height: 44px; flex: none; }
.fk-kopf { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 6px 0 4px; }
.fk-ava { width: 72px; height: 72px; font-size: 24px; }
.fk-kopf h1 { font-size: 26px; font-weight: 760; letter-spacing: -.02em; line-height: 1.15; margin: 4px 0 0; }
.fk-meta { font-size: 15px; color: var(--leise); }
:scope .fk-status.einz { justify-content: center; gap: 6px; margin-top: 4px; max-width: 100%; }
.fk-akt { display: flex; gap: 8px; width: 100%; margin-top: 10px; }
.fk-kachel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; border-radius: 24px; background: rgba(255, 255, 255, .07); box-shadow: var(--schatten-klein); font-size: 14px; font-weight: 650; color: var(--tinte); text-align: center; padding: 8px 6px; box-sizing: border-box; }
.fk-kachel.prim { background: var(--lila); color: #FFFFFF; }
.fk-kachel.gedrueckt { background: rgba(255, 255, 255, .10); color: var(--lila); }
.fk-d { display: flex; align-items: center; gap: 14px; }
.fk-d .fk-ava { width: 56px; height: 56px; font-size: 19px; }
.fk-txt { flex: 1; min-width: 0; }
.fk-name { font-size: 22px; font-weight: 760; letter-spacing: -.02em; line-height: 1.2; }
.fk-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; min-width: 0; }
.fk-info { font-size: 14px; color: var(--leise); min-width: 0; }
.fk-akt-d { display: flex; gap: 8px; flex: none; align-self: flex-start; }

/* P-607: was nicht in die Zeile passt, liegt im Menü «…» am Ende der Reihe; nichts halb abgeschnitten */
.mehr-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mehr-zeile > .prow, .mehr-zeile > .einz { flex: 1 1 auto; min-width: 0; margin-top: 0; }
.mehr-zeile:has(> .pfilter), .mehr-zeile:has(> .pnav), .mehr-zeile:has(> .tabgrid), .mehr-zeile:has(> .pillen) { margin-top: 12px; }
.mehrknopf { width: 44px; height: 44px; flex: none; }
.kn-zeile > .mehr-zeile { flex: 1 1 auto; min-width: 0; }
.im-menue { display: none !important; }

/* P-612: Anhänge direkt sichtbar. Bild als Vorschau, PDF mit erster Seite, Name und Größe darunter */
.vdatei { display: inline-flex; flex-direction: column; width: 132px; flex: none; border-radius: 24px; overflow: hidden; background: rgba(255, 255, 255, .10); box-shadow: var(--schatten-klein); vertical-align: top; }
.vvor { height: 96px; display: grid; place-items: center; background: var(--lila-zart); }
.vdatei.pdf .vvor, .vdatei.datei .vvor { background: rgba(255, 255, 255, .12); }
.vvor .mo.voll { border: 0; border-radius: 0; }
.vseite { width: 58px; height: 76px; box-sizing: border-box; padding: 8px 7px; background: rgba(255, 255, 255, .10); border-radius: 2px; box-shadow: 0 1px 3px rgba(20, 24, 32, .18); display: flex; flex-direction: column; gap: 5px; }
.vseite b { font-size: 9.5px; line-height: 11px; font-weight: 800; color: var(--lila); letter-spacing: .04em; }
.vseite i { display: block; height: 3px; border-radius: 2px; background: #D9DCE1; }
.vseite i:nth-child(3) { width: 80%; } .vseite i:nth-child(5) { width: 60%; }
.vseite.klein { width: 30px; height: 38px; padding: 5px 4px; gap: 3px; flex: none; }
.vseite.klein b { font-size: 7.5px; line-height: 9px; }
.vseite.klein i { height: 2px; }
.vfuss { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px 9px; min-width: 0; }
.vfuss b { font-size: 13px; line-height: 17px; font-weight: 650; color: var(--tinte); overflow-wrap: anywhere; }
.vfuss small { font-size: 12px; line-height: 15px; color: var(--leise); }
.thumbs:has(.vdatei) { gap: 10px; align-items: flex-start; }
:scope .vm .vdatei.bild { width: 200px; }
:scope .vm .vdatei.bild .vvor { height: 140px; }
.m .zwei2:has(.vdatei) { grid-template-columns: minmax(0, 1fr); }
:scope:not(.m) .vm .vdatei.bild { width: 170px; }
:scope:not(.m) .vm .vdatei.bild .vvor { height: 120px; }

/* P-614: Zahlen-Zeile: Titel links, Wert groß mit Pfeil, Zusatz darunter, «>» rechts */
.zahlen .zr { align-items: center; }
.zahlen .zwert { display: inline-flex; align-items: baseline; gap: 6px; }
.zahlen .ztend { font-size: 13px; color: var(--leise); }
.zahlen .ztend.gut { color: var(--gruen); } .zahlen .ztend.schlecht { color: var(--rot); }
.zahlen .zr .chev { flex: none; color: var(--grau); margin-left: 2px; }
/* P-614: Kleinanzeigen-Konto-Kopf am Handy geordnet, Pfeil in der ersten Zeile rechts */
:scope.m .ac-hd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; }
:scope.m .ac-hd .prog { grid-column: 1 / -1; grid-row: 2; margin-left: 0; }
:scope.m .ac-hd .chev { grid-column: 3; grid-row: 1; }


/* v22.2 (Max 24.10.2026): helles bis mittleres Grau, Glas, Akzent Blau, Rot nur bei Problemen.
   Farben wie das Logo: Schwarz, Weiß, Grau und Blau. Verlauf als Chat wie WhatsApp. */
:scope {
  color-scheme: light;
  --tinte: #15171B; --tinte-2: #34373E; --leise: #50555F; --linie: rgba(20, 24, 32, .09);
  --lila: #2E62E8; --lila-tief: #1D46B8; --lila-mid: #2E62E8; --lila-hell: #2457D6; --lila-zart: rgba(46, 98, 232, .13); --lila-text: #2252CF;
  --blau: #2E62E8; --fokus: #2E62E8; --akz-rgb: 46, 98, 232;
  --grau: #7A7F89; --grau-hell: #C3C7CE; --toenung: rgba(255, 255, 255, .45); --toenung-ava: rgba(46, 98, 232, .13);
  --grund: #CDD0D5; --karte-rand: rgba(255, 255, 255, .7); --rand-schalter: #8C919B; --feld-rand: rgba(255, 255, 255, .7);
  --glas: rgba(255, 255, 255, .40); --glas-dicht: rgba(255, 255, 255, .55); --glas-rand: rgba(255, 255, 255, .7);
  --glas-blur: blur(30px) saturate(1.6); --popover: rgba(236, 238, 241, .96);
  --rot: #C02C24; --rot-zart: rgba(222, 60, 50, .14);
  --gruen: #2E62E8; --orange: #34373E; --ok: #1C7A47; --ok-zart: rgba(36, 150, 90, .16);
  --offen: #34373E; --offen-bg: rgba(255, 255, 255, .5); --laeuft: #34373E; --laeuft-bg: rgba(255, 255, 255, .5);
  --fertig: #34373E; --fertig-bg: rgba(255, 255, 255, .5);
  --ma-1: rgba(46, 98, 232, .14); --ma-1-t: #1D46B8; --ma-2: rgba(255, 255, 255, .6); --ma-2-t: #34373E; --ma-3: rgba(255, 255, 255, .6); --ma-3-t: #34373E;
  --ma-4: rgba(46, 98, 232, .14); --ma-4-t: #1D46B8; --ma-5: rgba(255, 255, 255, .6); --ma-5-t: #34373E; --ma-6: rgba(46, 98, 232, .14); --ma-6-t: #1D46B8;
  --schatten-klein: 0 1px 2px rgba(20, 24, 32, .06), 0 6px 18px rgba(20, 24, 32, .08);
  --schatten: 0 2px 6px rgba(20, 24, 32, .07), 0 16px 40px rgba(20, 24, 32, .12);
  --schatten-schwebend: 0 2px 8px rgba(20, 24, 32, .10), 0 24px 64px rgba(20, 24, 32, .22);
}
:scope, :scope.dim {
  color: var(--tinte);
  background:
    radial-gradient(1000px 760px at 0% 0%, #E2E4E8 0%, rgba(226, 228, 232, 0) 62%),
    radial-gradient(900px 820px at 100% 4%, rgba(120, 155, 235, .32) 0%, rgba(120, 155, 235, 0) 60%),
    radial-gradient(1100px 900px at 55% 100%, #BEC2C9 0%, rgba(190, 194, 201, 0) 62%),
    radial-gradient(600px 420px at 30% 55%, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #D3D6DB 0%, #C9CCD2 55%, #D0D3D8 100%);
}
:scope .ov { background: rgba(40, 44, 52, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.glas, .d-leiste.glas, :scope.dim .d-leiste.glas { background: rgba(255, 255, 255, .34); border: 1px solid rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--schatten); }
.d-haupt, .d-haupt.glas, :scope.dim .d-haupt.glas { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--schatten); }
.karte, :scope.dim .karte, .karte .karte { background: rgba(255, 255, 255, .52); border: 1px solid rgba(255, 255, 255, .75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), var(--schatten-klein); }
.m-tabs, .m-tabs.glas, :scope.dim .m-tabs { background: rgba(236, 238, 241, .75); border: 1px solid rgba(255, 255, 255, .8); }
.dialog, :scope .ov .dialog, :scope .pop, :scope .tip, :scope .melder, .toast { background: var(--popover); color: var(--tinte); border-color: rgba(255, 255, 255, .9); }
.krume, .d-kopf .rund, .rund, .m-ava, .d-suche, .symq { background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .75); color: var(--tinte); }
:scope .feld, :scope .d-suche, :scope .antwort-feld, :scope .fl, :scope .f-feld, :scope .f-eing { background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8); color: var(--leise); box-shadow: inset 0 1px 2px rgba(20, 24, 32, .05); }
:scope .feld.v, :scope .feld.ta.v { color: var(--tinte); }
.d-logo { background: #15171B; color: #FFFFFF; box-shadow: 0 6px 16px rgba(20, 24, 32, .25); }
.knopf.prim, .fk-kachel.prim, .knopf.dunkel { background: #15171B; color: #FFFFFF; border-color: transparent; box-shadow: 0 1px 2px rgba(20, 24, 32, .2), 0 8px 20px rgba(20, 24, 32, .2); }
.knopf.sek, .dialog .knopf.sek, .knopf.gruen, .knopf.gedrueckt { background: rgba(255, 255, 255, .6); color: var(--tinte); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 1px 2px rgba(20, 24, 32, .05); }
.knopf.aus { background: rgba(255, 255, 255, .3); color: var(--leise); }
.d-punkt, .d-sub, .m-tab, .d-gruppe, .d-marke b { color: var(--tinte-2); }
.d-punkt.an, .d-sub.an, .m-tab.an { background: rgba(255, 255, 255, .8); color: var(--lila-text); box-shadow: 0 1px 2px rgba(20, 24, 32, .06), 0 4px 12px rgba(20, 24, 32, .06); }
.d-punkt.an .i, .m-tab.an .i { color: var(--lila); }
.zaehler { background: rgba(46, 98, 232, .14); color: var(--lila-tief); }
:scope .pille, :scope .pille.blau, :scope .pille.fertig, :scope .pille.offen, :scope .pille.laeuft, :scope .pille.gruen, :scope .pille.grau { background: rgba(255, 255, 255, .6); color: var(--tinte-2); }
:scope .pille.rot, :scope .pille.sofort { background: var(--rot-zart); color: var(--rot); }
:scope .pille.st-ok { background: var(--ok-zart); color: var(--ok); }
:scope .chip, :scope .chip.ki { background: rgba(255, 255, 255, .6); color: var(--tinte-2); border-color: transparent; }
:scope .chip.rot { background: var(--rot-zart); color: var(--rot); }
:scope .zs, :scope .zs.a, :scope .zs.b, :scope .zs.g, :scope .ava, :scope .m-ava { background: rgba(46, 98, 232, .14); color: var(--lila-tief); border-color: transparent; }
:scope .zs.r { background: var(--rot-zart); color: var(--rot); border-color: transparent; }
:scope .lgf, :scope .lgf.wartet { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .75); }
:scope .lgf b { color: var(--lila-hell); } :scope .lgf span { color: var(--tinte-2); }
:scope .lgf.hot { background: var(--rot-zart); } :scope .lgf.hot b, :scope .lgf.hot span { color: var(--rot); }
:scope .lgf.an { background: rgba(255, 255, 255, .85); }
:scope .ban.hin, :scope .ban.ok { background: rgba(255, 255, 255, .5); color: var(--tinte-2); }
:scope .fz { border-top-color: var(--linie); }
:scope .fz.sofort { background: transparent; }
:scope .fz.sel, :scope .fz.sofort.sel { background: rgba(255, 255, 255, .7); }
.gruen-text { color: var(--tinte) !important; }

/* Ein Band für Filter, Reiter und Umschalter */
:scope .segment, :scope .prow.pfilter, :scope .tabgrid.prow {
  display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 4px; height: auto; min-height: 48px;
  background: rgba(20, 24, 32, .07); border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(20, 24, 32, .07); overflow-x: auto; scrollbar-width: none; box-sizing: border-box; max-width: 100%;
}
:scope .segment::-webkit-scrollbar, :scope .prow.pfilter::-webkit-scrollbar, :scope .tabgrid.prow::-webkit-scrollbar { display: none; }
.mehr-zeile > .prow.pfilter { flex: 0 1 auto; }
:scope .segment > span, :scope .prow.pfilter .pp, :scope .tabgrid.prow > * {
  flex: none; background: transparent; box-shadow: none; border: 0; min-height: 38px; height: 38px; padding: 0 16px;
  border-radius: 999px; color: var(--tinte-2); font-weight: 600; display: inline-flex; align-items: center; gap: 8px;
}
:scope .segment > span.an, :scope .prow.pfilter .pp.an, :scope .prow.pfilter .pp.rot.an, :scope .tabgrid.prow > .an {
  background: #FFFFFF; color: var(--tinte); box-shadow: 0 1px 2px rgba(20, 24, 32, .08), 0 3px 10px rgba(20, 24, 32, .10);
}
:scope .segment.klein > span { min-height: 36px; height: 36px; padding: 0 13px; }
:scope .pp b, :scope .segment .n, .prow.werk .knopf b { color: var(--lila-hell); font-weight: 700; }
:scope .pp.rot b { color: var(--rot); }
:scope .ptrenn { width: 1px; height: 22px; background: rgba(20, 24, 32, .16); margin: 0 6px; flex: none; }

/* Bestellung: Produkt als Titel, darunter EINE Zeile Felder, seitlich wischbar */
.best-t { font-size: 16px; font-weight: 650; line-height: 1.3; color: var(--tinte); }
.best-c { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
.best-c::-webkit-scrollbar { display: none; }
.best-c > * { flex: none; }
.best-c .chip, .best-c .pille { height: 26px; font-size: 13px; }

/* Versand-Status farbig */
:scope .sr { background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .75); }
:scope .sr .l, :scope .sr .i { color: var(--tinte); }
:scope .sr.st-zu { background: var(--ok-zart); border-color: transparent; } :scope .sr.st-zu .l, :scope .sr.st-zu .i { color: var(--ok); }
:scope .sr.st-weg { background: var(--lila-zart); border-color: transparent; } :scope .sr.st-weg .l, :scope .sr.st-weg .i { color: var(--lila-text); }
:scope .sr.rot { background: var(--rot-zart); } :scope .sr.rot .l, :scope .sr.rot .i { color: var(--rot); }
:scope .sr .id, :scope .sr .me { color: var(--leise); }

/* Verlauf als Chat wie WhatsApp: Kunde links weiß, wir rechts hellblau, Zeit klein unten in der Blase, Haken bei uns */
:scope .vm, :scope .vm.kunde, :scope .vm.kunde.neu1, :scope .vm.kunde.neu2, :scope .vm.wir, :scope .vm.wir.noetig {
  position: relative; overflow: visible; width: auto; max-width: 78%; box-sizing: border-box;
  border: 0 !important; border-radius: 18px !important; padding: 8px 12px 6px; align-self: flex-start;
  background: #FFFFFF !important; box-shadow: 0 1px 1px rgba(20, 24, 32, .10);
  margin: 0 auto 0 8px !important; border-bottom-left-radius: 4px !important;
}
:scope .vm.wir, :scope .vm.wir.noetig {
  background: #DCE6FD !important; align-self: flex-end; margin: 0 8px 0 auto !important;
  border-bottom-left-radius: 18px !important; border-bottom-right-radius: 4px !important;
}
:scope .vm::before { content: ""; display: block; position: absolute; bottom: 0; width: 10px; height: 14px; background: inherit; }
:scope .vm.kunde::before { left: -8px; clip-path: path('M10 0 L10 14 L0 14 C4 12 8 8 10 0 Z'); }
:scope .vm.wir::before { right: -8px; left: auto; clip-path: path('M0 0 L0 14 L10 14 C6 12 2 8 0 0 Z'); }
:scope .vm.kunde .meta { display: none; }
:scope .vm .meta { display: flex; gap: 6px; margin: 0 0 2px; padding: 0; }
:scope .vm .meta .chip { background: transparent; padding: 0; height: auto; font-size: 13px; font-weight: 700; color: var(--lila-text); }
:scope .vm .meta .kanal { display: none; }
:scope .vm .txt { color: var(--tinte); font-size: 15px; line-height: 1.45; margin: 0; }
:scope .vm .zeit { position: static; display: block; text-align: right; font-size: 11.5px; color: var(--leise); margin: 2px 0 0 24px; white-space: nowrap; }
:scope .vm.wir .zeit::after { content: " ✓✓"; color: var(--lila); letter-spacing: -2px; }
:scope .vm .bezug { background: rgba(20, 24, 32, .05); border-radius: 10px; }
:scope .vm .thumbs { margin-top: 6px; }

/* Anhänge und Uploads in EINER Reihe, seitlich wischbar */
:scope .thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; }
:scope .thumbs::-webkit-scrollbar { display: none; }
:scope .zwei2:has(.vdatei), .m .zwei2:has(.vdatei) { display: flex !important; gap: 14px; overflow-x: auto; scrollbar-width: none; }
:scope .zwei2:has(.vdatei)::-webkit-scrollbar { display: none; }
:scope .zwei2:has(.vdatei) > div { flex: none; min-width: 0; }
:scope .zwei2:has(.vdatei) > div .thumbs { overflow: visible; }
:scope .vdatei { background: rgba(255, 255, 255, .8); box-shadow: 0 1px 2px rgba(20, 24, 32, .06); border: 0; }
:scope .vvor { background: rgba(46, 98, 232, .12); }
:scope .vdatei.pdf .vvor, :scope .vdatei.datei .vvor { background: rgba(20, 24, 32, .06); }
.vseite { background: #FFFFFF; } .vseite b { color: #15171B; } .vseite i { background: #C3C7CE; }
.vfuss b { color: var(--tinte); }

/* Zahlen als Kacheln */
:scope .karte.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0 16px 16px; }
:scope .karte.zahlen > .kkopf { grid-column: 1 / -1; padding: 12px 4px 0 !important; }
:scope.m .karte.zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:scope .zahlen .zr, :scope.m .zahlen .zr {
  display: grid; grid-template-areas: "t" "w" "s"; align-content: start; justify-items: start; gap: 4px;
  min-height: 0; padding: 14px 16px 16px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 20px;
  background: rgba(255, 255, 255, .6); box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(20, 24, 32, .05);
}
:scope .zahlen .zr .txt { display: contents; }
:scope .zahlen .zr .t { grid-area: t; font-size: 14px; font-weight: 600; color: var(--leise); }
:scope .zahlen .zr .s { grid-area: s; font-size: 13px; color: var(--leise); margin-top: 0; }
:scope .zahlen .zw { grid-area: w; flex-direction: row; align-items: center; gap: 10px; max-width: none; text-align: left; flex-wrap: wrap; }
:scope .zahlen .zv { font-size: 30px; font-weight: 760; letter-spacing: -.02em; line-height: 1.15; color: var(--tinte); }
:scope.m .zahlen .zv { font-size: 24px; }
:scope .zahlen .zw .pille { min-height: 24px; height: 24px; font-size: 12.5px; }
:scope .zahlen .ztend { font-size: 14px; } :scope .zahlen .ztend.gut { color: var(--lila); } :scope .zahlen .ztend.schlecht { color: var(--rot); }
:scope .zahlen .zr .chev { display: none; }
:scope > .fassung { color: var(--leise); }

/* v22.3 (Max 24.10.2026): Grund mattgrau wie Anthrazit, nur heller. Kein Blau im Hintergrund.
   Positives grün (Pfeil hoch, «gut»), Negatives rot, Blau bleibt für Zähler und Auswahl. */
:scope { --grund: #A9ADB3; --leise: #4A4E56; --ok: #17723F; --ok-zart: rgba(30, 150, 85, .18); }
:scope, :scope.dim {
  background:
    radial-gradient(1000px 760px at 0% 0%, #B9BCC2 0%, rgba(185, 188, 194, 0) 62%),
    radial-gradient(1100px 900px at 60% 100%, #9DA1A8 0%, rgba(157, 161, 168, 0) 62%),
    radial-gradient(700px 520px at 85% 15%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #B0B4BA 0%, #A6AAB0 55%, #ACB0B6 100%);
}
/* Text direkt auf dem Grund kräftiger, damit er auf Mattgrau lesbar bleibt */
.skopf .unter, .m-titelzeile .datum, .m-abschnitt, .m-abschnitt .rechts, .krume .leise, :scope > .fassung { color: #2C2F35; }
.karte, :scope.dim .karte, .karte .karte { background: rgba(255, 255, 255, .58); }
.d-leiste.glas, :scope.dim .d-leiste.glas { background: rgba(255, 255, 255, .40); }
.d-haupt, .d-haupt.glas, :scope.dim .d-haupt.glas { background: rgba(255, 255, 255, .14); }
/* Grün für Gutes */
:scope .zahlen .ztend.gut { color: var(--ok); }
:scope .pille.fertig, :scope .pille.gruen, :scope .pille.st-ok { background: var(--ok-zart); color: var(--ok); }
/* Band nur so breit wie sein Inhalt, nie über die ganze Seite */
:scope .segment, :scope .prow.pfilter, :scope .tabgrid.prow { width: fit-content !important; align-self: flex-start; flex: 0 1 auto; }

/* v22.4 (Max 24.10.2026): Vorder- und Hintergrund im Einklang. Karten als getöntes Glas statt hell,
   Hintergrund mit mehr Verlauf in Grautönen (Stahl, Anthrazit, Silber). */
:scope { --leise: #43474F; --tinte-2: #2B2E34; --popover: rgba(196, 199, 204, .94); }
:scope, :scope.dim {
  background:
    radial-gradient(900px 700px at 0% 0%, #C6C9CE 0%, rgba(198, 201, 206, 0) 60%),
    radial-gradient(800px 700px at 100% 0%, #959AA2 0%, rgba(149, 154, 162, 0) 62%),
    radial-gradient(1000px 800px at 85% 100%, #858A92 0%, rgba(133, 138, 146, 0) 60%),
    radial-gradient(900px 700px at 10% 100%, #B4B7BC 0%, rgba(180, 183, 188, 0) 62%),
    radial-gradient(500px 380px at 45% 40%, rgba(220, 222, 226, .45) 0%, rgba(220, 222, 226, 0) 70%),
    linear-gradient(135deg, #B3B6BB 0%, #A2A6AC 45%, #9A9EA5 100%);
}
.d-leiste.glas, :scope.dim .d-leiste.glas { background: rgba(214, 217, 221, .30); border-color: rgba(255, 255, 255, .28); }
.d-haupt, .d-haupt.glas, :scope.dim .d-haupt.glas { background: rgba(214, 217, 221, .12); border-color: rgba(255, 255, 255, .22); }
.karte, :scope.dim .karte, .karte .karte {
  background: linear-gradient(160deg, rgba(222, 224, 228, .46) 0%, rgba(200, 203, 208, .34) 100%);
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 1px 2px rgba(20, 24, 32, .08), 0 10px 28px rgba(20, 24, 32, .12);
}
.m-tabs, .m-tabs.glas, :scope.dim .m-tabs { background: rgba(200, 203, 208, .62); border-color: rgba(255, 255, 255, .35); }
:scope .zahlen .zr, :scope.m .zahlen .zr { background: rgba(225, 227, 231, .32); border-color: rgba(255, 255, 255, .30); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.krume, .d-kopf .rund, .rund, .m-ava, .d-suche, .symq, :scope .feld, :scope .d-suche { background: rgba(225, 227, 231, .38); border-color: rgba(255, 255, 255, .32); }
.knopf.sek, .dialog .knopf.sek, .knopf.gruen, .knopf.gedrueckt { background: rgba(228, 230, 234, .45); border-color: rgba(255, 255, 255, .38); }
:scope .pille, :scope .pille.blau, :scope .pille.offen, :scope .pille.laeuft, :scope .pille.grau, :scope .chip, :scope .chip.ki { background: rgba(228, 230, 234, .45); }
.d-punkt.an, .d-sub.an, .m-tab.an, :scope .segment > span.an, :scope .prow.pfilter .pp.an, :scope .prow.pfilter .pp.rot.an, :scope .tabgrid.prow > .an { background: rgba(236, 238, 241, .78); }
:scope .segment, :scope .prow.pfilter, :scope .tabgrid.prow { background: rgba(20, 24, 32, .10); border-color: rgba(255, 255, 255, .25); }
:scope .fz.sel, :scope .fz.sofort.sel, :scope .lgf.an { background: rgba(236, 238, 241, .55); }
:scope .lgf, :scope .lgf.wartet, :scope .sr, :scope .ban.hin, :scope .ban.ok { background: rgba(225, 227, 231, .32); border-color: rgba(255, 255, 255, .28); }
:scope .vdatei { background: rgba(232, 234, 237, .6); }
:scope .vm, :scope .vm.kunde, :scope .vm.kunde.neu1, :scope .vm.kunde.neu2 { background: rgba(240, 241, 243, .82) !important; }
:scope .vm.wir, :scope .vm.wir.noetig { background: rgba(214, 224, 247, .88) !important; }

/* v22.5 (Max 24.10.2026): Hintergrund dunkler, Vordergrund heller (Glas überall), rote Hinweise kräftig lesbar,
   Seitenleiste luftiger. */
:scope { --rot: #A3221B; --rot-zart: #F5D9D6; --ok: #146236; --ok-zart: #D4EEDD; --leise: #464A52; }
:scope, :scope.dim {
  background:
    radial-gradient(900px 700px at 0% 0%, #A9ADB3 0%, rgba(169, 173, 179, 0) 60%),
    radial-gradient(800px 700px at 100% 0%, #7C8189 0%, rgba(124, 129, 137, 0) 62%),
    radial-gradient(1000px 800px at 85% 100%, #6C7179 0%, rgba(108, 113, 121, 0) 60%),
    radial-gradient(900px 700px at 10% 100%, #969AA1 0%, rgba(150, 154, 161, 0) 62%),
    radial-gradient(500px 380px at 45% 40%, rgba(200, 203, 208, .35) 0%, rgba(200, 203, 208, 0) 70%),
    linear-gradient(135deg, #979BA2 0%, #868A92 45%, #7E838B 100%);
}
/* Glas vorne heller, mit Unschärfe überall */
.d-leiste.glas, :scope.dim .d-leiste.glas { background: rgba(232, 234, 237, .50); border-color: rgba(255, 255, 255, .45); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.d-haupt, .d-haupt.glas, :scope.dim .d-haupt.glas { background: rgba(225, 227, 231, .20); border-color: rgba(255, 255, 255, .30); }
.karte, :scope.dim .karte, .karte .karte {
  background: linear-gradient(160deg, rgba(240, 241, 243, .74) 0%, rgba(222, 224, 228, .62) 100%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(20, 24, 32, .10), 0 12px 32px rgba(20, 24, 32, .16);
  -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur);
}
:scope.m .karte.zahlen { background: transparent; border: 0; box-shadow: none; }
:scope .zahlen .zr, :scope.m .zahlen .zr { background: rgba(246, 247, 249, .62); border-color: rgba(255, 255, 255, .6); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
.m-tabs, .m-tabs.glas, :scope.dim .m-tabs { background: rgba(232, 234, 237, .72); border-color: rgba(255, 255, 255, .5); }
.krume, .d-kopf .rund, .rund, .m-ava, .d-suche, .symq, :scope .feld, :scope .d-suche { background: rgba(240, 241, 243, .62); border-color: rgba(255, 255, 255, .55); }
.knopf.sek, .dialog .knopf.sek, .knopf.gruen, .knopf.gedrueckt { background: rgba(246, 247, 249, .72); border-color: rgba(255, 255, 255, .7); }
:scope .pille, :scope .pille.blau, :scope .pille.offen, :scope .pille.laeuft, :scope .pille.grau, :scope .chip, :scope .chip.ki { background: rgba(255, 255, 255, .62); color: var(--tinte-2); }
:scope .lgf, :scope .lgf.wartet, :scope .sr, :scope .ban.hin, :scope .ban.ok { background: rgba(246, 247, 249, .55); border-color: rgba(255, 255, 255, .5); }
.d-punkt.an, .d-sub.an, .m-tab.an, :scope .segment > span.an, :scope .prow.pfilter .pp.an, :scope .prow.pfilter .pp.rot.an, :scope .tabgrid.prow > .an { background: rgba(255, 255, 255, .92); }
:scope .fz.sel, :scope .fz.sofort.sel, :scope .lgf.an { background: rgba(255, 255, 255, .7); }
:scope .segment, :scope .prow.pfilter, :scope .tabgrid.prow { background: rgba(20, 24, 32, .09); border-color: rgba(255, 255, 255, .4); }
/* Rote und grüne Hinweise als volle Fläche, gut lesbar auf Glas */
:scope .pille.rot, :scope .pille.sofort, :scope .chip.rot, :scope .zs.r { background: var(--rot-zart); color: var(--rot); font-weight: 650; }
:scope .lgf.hot { background: var(--rot-zart); }
:scope .sr.rot { background: var(--rot-zart); }
:scope .pille.fertig, :scope .pille.gruen, :scope .pille.st-ok, :scope .sr.st-zu { background: var(--ok-zart); color: var(--ok); }
/* Text direkt auf dem Grund dunkel und kräftig */
.skopf h1, .m-titelzeile h1 { color: #111317; }
.skopf .unter, .m-titelzeile .datum, .m-abschnitt, .m-abschnitt .rechts, :scope > .fassung, .krume .leise { color: #1E2126; }
:scope { --leise: #3A3E45; }
/* Seitenleiste luftiger */
.d-leiste { padding: 14px 14px 12px; }
.d-marke { margin-bottom: 10px; }
.d-suche { margin-bottom: 6px; }
.d-nav { display: flex; flex-direction: column; gap: 4px; }
.d-gruppe { padding: 18px 12px 6px; }
.d-punkt { height: 44px; padding: 0 14px; font-size: 15.5px; }
.d-sub { min-height: 38px; display: flex; align-items: center; }

/* v22.6 (Max 24.10.2026): Vorder- und Hintergrund fließend ineinander. Grund etwas heller, Glas durchscheinender,
   Abstand zwischen beiden nur wenige Stufen. Keine fast weißen Flächen mehr außer Auswahl und Chat-Blasen. */
:scope, :scope.dim {
  background:
    radial-gradient(900px 700px at 0% 0%, #B4B7BC 0%, rgba(180, 183, 188, 0) 60%),
    radial-gradient(800px 700px at 100% 0%, #8E939A 0%, rgba(142, 147, 154, 0) 62%),
    radial-gradient(1000px 800px at 85% 100%, #80858D 0%, rgba(128, 133, 141, 0) 60%),
    radial-gradient(900px 700px at 10% 100%, #A2A6AC 0%, rgba(162, 166, 172, 0) 62%),
    radial-gradient(600px 460px at 45% 40%, rgba(196, 199, 204, .45) 0%, rgba(196, 199, 204, 0) 70%),
    linear-gradient(135deg, #A4A8AE 0%, #969AA1 45%, #8C9097 100%);
}
.d-leiste.glas, :scope.dim .d-leiste.glas { background: linear-gradient(180deg, rgba(222, 224, 228, .40) 0%, rgba(205, 208, 213, .30) 100%); border-color: rgba(255, 255, 255, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 32px rgba(20, 24, 32, .12); }
.d-haupt, .d-haupt.glas, :scope.dim .d-haupt.glas { background: rgba(215, 218, 222, .14); border-color: rgba(255, 255, 255, .24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 32px rgba(20, 24, 32, .10); }
.karte, :scope.dim .karte, .karte .karte {
  background: linear-gradient(160deg, rgba(226, 228, 232, .50) 0%, rgba(206, 209, 214, .38) 100%);
  border: 1px solid rgba(255, 255, 255, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(20, 24, 32, .06), 0 10px 28px rgba(20, 24, 32, .12);
}
:scope.m .karte.zahlen { background: transparent; border: 0; box-shadow: none; }
:scope .zahlen .zr, :scope.m .zahlen .zr { background: linear-gradient(160deg, rgba(232, 234, 237, .46) 0%, rgba(214, 217, 221, .34) 100%); border-color: rgba(255, 255, 255, .36); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.m-tabs, .m-tabs.glas, :scope.dim .m-tabs { background: rgba(214, 217, 221, .60); border-color: rgba(255, 255, 255, .38); }
.krume, .d-kopf .rund, .rund, .m-ava, .d-suche, .symq, :scope .feld, :scope .d-suche { background: rgba(232, 234, 237, .42); border-color: rgba(255, 255, 255, .36); }
.knopf.sek, .dialog .knopf.sek, .knopf.gruen, .knopf.gedrueckt { background: rgba(236, 238, 241, .50); border-color: rgba(255, 255, 255, .45); }
:scope .pille, :scope .pille.blau, :scope .pille.offen, :scope .pille.laeuft, :scope .pille.grau, :scope .chip, :scope .chip.ki { background: rgba(236, 238, 241, .50); }
:scope .lgf, :scope .lgf.wartet, :scope .sr, :scope .ban.hin, :scope .ban.ok { background: rgba(232, 234, 237, .40); border-color: rgba(255, 255, 255, .34); }
.d-punkt.an, .d-sub.an, .m-tab.an, :scope .segment > span.an, :scope .prow.pfilter .pp.an, :scope .prow.pfilter .pp.rot.an, :scope .tabgrid.prow > .an { background: rgba(242, 243, 245, .78); }
:scope .fz.sel, :scope .fz.sofort.sel, :scope .lgf.an { background: rgba(240, 241, 243, .55); }
:scope .segment, :scope .prow.pfilter, :scope .tabgrid.prow { background: rgba(20, 24, 32, .08); border-color: rgba(255, 255, 255, .30); }
:scope .vdatei { background: rgba(236, 238, 241, .55); }
/* Rote und grüne Hinweise etwas zurückgenommen, aber lesbar */
:scope { --rot-zart: rgba(245, 214, 210, .85); --ok-zart: rgba(210, 236, 219, .85); }

/* v22.7: Bestellung ordentlich. Alle Felder gleich hoch und mittig, Akte rechts in der Knopfreihe, nichts abgeschnitten. */
.best-t { font-size: 16px; line-height: 22px; margin: 0; }
.best-c { align-items: center; gap: 6px; margin-top: 6px; }
:scope .best-c .chip, :scope .best-c .pille { display: inline-flex; align-items: center; justify-content: center; height: 28px; min-height: 28px; padding: 0 12px; font-size: 13.5px; line-height: 1; font-weight: 600; border-radius: 999px; box-sizing: border-box; }
:scope.m .best-c { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 16px; }
:scope .akt { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; }
:scope .akt .knopf { height: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
:scope .akt .akte-rechts { margin-left: auto; }

/* v22.8 (Max 24.10.2026): reines Grau ohne Farbstich (Schwarz-Weiß), Vordergrund ein kleines bisschen heller. */
:scope, :scope.dim {
  background:
    radial-gradient(900px 700px at 0% 0%, #BDBDBD 0%, rgba(189, 189, 189, 0) 60%),
    radial-gradient(800px 700px at 100% 0%, #959595 0%, rgba(149, 149, 149, 0) 62%),
    radial-gradient(1000px 800px at 85% 100%, #878787 0%, rgba(135, 135, 135, 0) 60%),
    radial-gradient(900px 700px at 10% 100%, #A9A9A9 0%, rgba(169, 169, 169, 0) 62%),
    radial-gradient(600px 460px at 45% 40%, rgba(205, 205, 205, .45) 0%, rgba(205, 205, 205, 0) 70%),
    linear-gradient(135deg, #ACACAC 0%, #9E9E9E 45%, #949494 100%);
}
.d-leiste.glas, :scope.dim .d-leiste.glas { background: linear-gradient(180deg, rgba(236, 236, 236, .48) 0%, rgba(220, 220, 220, .38) 100%); border-color: rgba(255, 255, 255, .38); }
.d-haupt, .d-haupt.glas, :scope.dim .d-haupt.glas { background: rgba(228, 228, 228, .16); border-color: rgba(255, 255, 255, .28); }
.karte, :scope.dim .karte, .karte .karte { background: linear-gradient(160deg, rgba(240, 240, 240, .58) 0%, rgba(222, 222, 222, .46) 100%); border-color: rgba(255, 255, 255, .45); }
:scope.m .karte.zahlen { background: transparent; border: 0; box-shadow: none; }
:scope .zahlen .zr, :scope.m .zahlen .zr { background: linear-gradient(160deg, rgba(244, 244, 244, .55) 0%, rgba(228, 228, 228, .42) 100%); border-color: rgba(255, 255, 255, .42); }
.m-tabs, .m-tabs.glas, :scope.dim .m-tabs { background: rgba(228, 228, 228, .66); border-color: rgba(255, 255, 255, .42); }
.krume, .d-kopf .rund, .rund, .m-ava, .d-suche, .symq, :scope .feld, :scope .d-suche { background: rgba(244, 244, 244, .50); border-color: rgba(255, 255, 255, .42); }
.knopf.sek, .dialog .knopf.sek, .knopf.gruen, .knopf.gedrueckt { background: rgba(246, 246, 246, .58); border-color: rgba(255, 255, 255, .5); }
:scope .pille, :scope .pille.blau, :scope .pille.offen, :scope .pille.laeuft, :scope .pille.grau, :scope .chip, :scope .chip.ki { background: rgba(246, 246, 246, .58); }
:scope .lgf, :scope .lgf.wartet, :scope .sr, :scope .ban.hin, :scope .ban.ok { background: rgba(244, 244, 244, .48); border-color: rgba(255, 255, 255, .4); }
.d-punkt.an, .d-sub.an, .m-tab.an, :scope .segment > span.an, :scope .prow.pfilter .pp.an, :scope .prow.pfilter .pp.rot.an, :scope .tabgrid.prow > .an { background: rgba(250, 250, 250, .85); }
:scope .fz.sel, :scope .fz.sofort.sel, :scope .lgf.an { background: rgba(248, 248, 248, .6); }
:scope .segment, :scope .prow.pfilter, :scope .tabgrid.prow { background: rgba(0, 0, 0, .08); }
:scope .vdatei { background: rgba(246, 246, 246, .62); }
:scope .vm, :scope .vm.kunde, :scope .vm.kunde.neu1, :scope .vm.kunde.neu2 { background: rgba(250, 250, 250, .88) !important; }
:scope { --popover: rgba(236, 236, 236, .95); --tinte: #111111; --tinte-2: #2A2A2A; --leise: #3C3C3C; --linie: rgba(0, 0, 0, .08); }

/* v22.9: Schrift sitzt immer ganz in Pille und Knopf. Nichts wird gestaucht; passt eine Reihe nicht, wird sie seitlich gewischt. */
:scope .pille, :scope .chip, :scope .pp, :scope .segment > span, :scope .zaehler { flex-shrink: 0; white-space: nowrap; min-width: max-content; box-sizing: border-box; justify-content: center; }
:scope .akt, :scope .prow.werk, :scope .kn-werk, :scope .best-c { overflow-x: auto; scrollbar-width: none; }
:scope .akt::-webkit-scrollbar, :scope .prow.werk::-webkit-scrollbar, :scope .kn-werk::-webkit-scrollbar { display: none; }
:scope .akt > .knopf, :scope .prow.werk > .knopf, :scope .kn-werk > .knopf, :scope .kn-senden > .knopf, :scope .aktionen > .knopf { flex: none; white-space: nowrap; min-width: max-content; padding: 0 16px; }
:scope .akt .knopf .i { flex: none; }

/* v23 (Max 24.10.2026): poliertes Anthrazit mit Marmor-Schimmer. Leicht kühles Grau (kein Grünstich),
   Glanzlicht oben links, feine helle Adern, Glas ohne Sättigungsverstärkung. */
:scope { --glas-blur: blur(30px); --popover: rgba(238, 239, 241, .96); --tinte: #111214; --tinte-2: #2A2C30; --leise: #3D4046; }
:scope, :scope.dim {
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .07) 33%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(128deg, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .05) 60.5%, rgba(255, 255, 255, 0) 63%),
    linear-gradient(104deg, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .04) 73.5%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(900px 640px at 6% 0%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(1100px 900px at 92% 100%, rgba(10, 11, 13, .38) 0%, rgba(10, 11, 13, 0) 62%),
    radial-gradient(700px 520px at 70% 18%, rgba(160, 166, 175, .30) 0%, rgba(160, 166, 175, 0) 66%),
    linear-gradient(140deg, #6E737A 0%, #565A61 42%, #44484E 72%, #3A3D42 100%);
}
.d-leiste.glas, :scope.dim .d-leiste.glas { background: linear-gradient(180deg, rgba(238, 239, 241, .66) 0%, rgba(222, 224, 227, .56) 100%); border-color: rgba(255, 255, 255, .45); }
.d-haupt, .d-haupt.glas, :scope.dim .d-haupt.glas { background: rgba(230, 232, 235, .10); border-color: rgba(255, 255, 255, .18); }
.karte, :scope.dim .karte, .karte .karte { background: linear-gradient(160deg, rgba(242, 243, 245, .74) 0%, rgba(226, 228, 231, .64) 100%); border-color: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .12), 0 14px 36px rgba(0, 0, 0, .22); }
:scope.m .karte.zahlen { background: transparent; border: 0; box-shadow: none; }
:scope .zahlen .zr, :scope.m .zahlen .zr { background: linear-gradient(160deg, rgba(246, 247, 248, .74) 0%, rgba(230, 232, 235, .62) 100%); border-color: rgba(255, 255, 255, .55); }
.m-tabs, .m-tabs.glas, :scope.dim .m-tabs { background: rgba(232, 234, 237, .78); border-color: rgba(255, 255, 255, .5); }
/* Text direkt auf dem Anthrazit hell */
.skopf h1, .m-titelzeile h1, .fk-top b, .fk-kopf h1, .fk-name { color: #F5F6F8; }
.skopf .unter, .m-titelzeile .datum, .m-abschnitt, .m-abschnitt .rechts, .fk-meta, :scope > .fassung { color: #D6D9DE; }
:scope .leise:not(.karte .leise):not(.dialog .leise):not(.krume .leise):not(.d-leiste .leise):not(.m-tabs .leise) { color: #D6D9DE; }
.krume .leise { color: var(--leise); }

/* v24 (Max 24.10.2026): helles Platin-Grau Richtung Weiß, polierter Marmor. Kühles neutrales Grau ohne Grünstich,
   feine graue Adern, Glanzlicht, weißes Glas mit weichem Schatten. Schrift auf dem Grund wieder dunkel. */
:scope, :scope.dim {
  background:
    linear-gradient(118deg, rgba(70, 74, 82, 0) 30%, rgba(70, 74, 82, .07) 32.5%, rgba(70, 74, 82, 0) 35%),
    linear-gradient(128deg, rgba(70, 74, 82, 0) 57%, rgba(70, 74, 82, .05) 59%, rgba(70, 74, 82, 0) 61.5%),
    linear-gradient(104deg, rgba(70, 74, 82, 0) 73%, rgba(70, 74, 82, .045) 74.2%, rgba(70, 74, 82, 0) 75.5%),
    linear-gradient(150deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .55) 47%, rgba(255, 255, 255, 0) 51%),
    radial-gradient(900px 640px at 6% 0%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(1100px 900px at 94% 100%, rgba(150, 154, 162, .45) 0%, rgba(150, 154, 162, 0) 62%),
    radial-gradient(700px 520px at 75% 15%, rgba(205, 208, 214, .6) 0%, rgba(205, 208, 214, 0) 66%),
    linear-gradient(140deg, #ECEDEF 0%, #DCDEE1 42%, #CED0D4 72%, #C3C6CA 100%);
}
.d-leiste.glas, :scope.dim .d-leiste.glas { background: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(246, 247, 248, .50) 100%); border-color: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(30, 34, 40, .05), 0 18px 44px rgba(30, 34, 40, .10); }
.d-haupt, .d-haupt.glas, :scope.dim .d-haupt.glas { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 44px rgba(30, 34, 40, .08); }
.karte, :scope.dim .karte, .karte .karte { background: linear-gradient(160deg, rgba(255, 255, 255, .78) 0%, rgba(248, 249, 250, .64) 100%); border-color: rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(30, 34, 40, .05), 0 12px 32px rgba(30, 34, 40, .09); }
:scope.m .karte.zahlen { background: transparent; border: 0; box-shadow: none; }
:scope .zahlen .zr, :scope.m .zahlen .zr { background: linear-gradient(160deg, rgba(255, 255, 255, .84) 0%, rgba(246, 247, 249, .68) 100%); border-color: rgba(255, 255, 255, .95); box-shadow: inset 0 1px 0 #FFFFFF, 0 6px 18px rgba(30, 34, 40, .07); }
.m-tabs, .m-tabs.glas, :scope.dim .m-tabs { background: rgba(250, 250, 251, .78); border-color: #FFFFFF; }
.krume, .d-kopf .rund, .rund, .m-ava, .d-suche, .symq, :scope .feld, :scope .d-suche { background: rgba(255, 255, 255, .62); border-color: rgba(255, 255, 255, .95); }
.knopf.sek, .dialog .knopf.sek, .knopf.gruen, .knopf.gedrueckt { background: rgba(255, 255, 255, .72); border-color: #FFFFFF; box-shadow: 0 1px 2px rgba(30, 34, 40, .06); }
:scope .pille, :scope .pille.blau, :scope .pille.offen, :scope .pille.laeuft, :scope .pille.grau, :scope .chip, :scope .chip.ki { background: rgba(30, 34, 40, .06); }
:scope .lgf, :scope .lgf.wartet, :scope .sr, :scope .ban.hin, :scope .ban.ok { background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .9); }
.d-punkt.an, .d-sub.an, .m-tab.an, :scope .segment > span.an, :scope .prow.pfilter .pp.an, :scope .prow.pfilter .pp.rot.an, :scope .tabgrid.prow > .an { background: #FFFFFF; box-shadow: 0 1px 2px rgba(30, 34, 40, .08), 0 4px 12px rgba(30, 34, 40, .08); }
:scope .fz.sel, :scope .fz.sofort.sel, :scope .lgf.an { background: rgba(255, 255, 255, .85); }
:scope .segment, :scope .prow.pfilter, :scope .tabgrid.prow { background: rgba(30, 34, 40, .06); border-color: rgba(255, 255, 255, .8); }
:scope .vdatei { background: rgba(255, 255, 255, .8); }
:scope .vm, :scope .vm.kunde, :scope .vm.kunde.neu1, :scope .vm.kunde.neu2 { background: #FFFFFF !important; }
:scope .vm.wir, :scope .vm.wir.noetig { background: #E3EAFB !important; }
:scope { --rot-zart: #F8E1DE; --ok-zart: #DDF0E3; --popover: rgba(250, 250, 251, .96); }
/* Schrift auf dem Grund wieder dunkel */
.skopf h1, .m-titelzeile h1, .fk-top b, .fk-kopf h1, .fk-name { color: #111214; }
.skopf .unter, .m-titelzeile .datum, .m-abschnitt, .m-abschnitt .rechts, .fk-meta, :scope > .fassung { color: #3D4046; }
:scope .leise:not(.karte .leise):not(.dialog .leise):not(.krume .leise):not(.d-leiste .leise):not(.m-tabs .leise) { color: #3D4046; }

/* v24.1 (Max 24.10.2026): Handy-Hintergrund einen Tick heller als am Rechner. */
:scope.m, :scope.m.dim {
  background:
    linear-gradient(118deg, rgba(70, 74, 82, 0) 30%, rgba(70, 74, 82, .05) 32.5%, rgba(70, 74, 82, 0) 35%),
    linear-gradient(128deg, rgba(70, 74, 82, 0) 57%, rgba(70, 74, 82, .04) 59%, rgba(70, 74, 82, 0) 61.5%),
    linear-gradient(150deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .6) 47%, rgba(255, 255, 255, 0) 51%),
    radial-gradient(500px 420px at 6% 0%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(600px 600px at 94% 100%, rgba(170, 174, 182, .35) 0%, rgba(170, 174, 182, 0) 62%),
    linear-gradient(160deg, #F1F2F3 0%, #E4E6E8 45%, #D9DBDF 100%);
}
/* v20-Bausteine im Platin-Stil: Kacheln, Schalter, Blasen */
:scope .m-kachel { background: linear-gradient(160deg, rgba(255, 255, 255, .84) 0%, rgba(246, 247, 249, .68) 100%); }
:scope .blase.kunde { background: #FFFFFF; color: var(--tinte); }
:scope .blase.du { background: #E3EAFB; color: var(--tinte); }
:scope .ablage { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .9); }
:scope .zahl-gross { color: var(--tinte); }

/* v24.2 (Max 25.10.2026): Handy ohne Marmor-Adern und Glanzstreifen, nur weicher heller Verlauf. */
:scope.m, :scope.m.dim {
  background:
    radial-gradient(520px 440px at 0% 0%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 65%),
    radial-gradient(620px 620px at 100% 100%, rgba(190, 193, 199, .35) 0%, rgba(190, 193, 199, 0) 65%),
    linear-gradient(170deg, #F2F3F4 0%, #E6E8EA 50%, #DCDEE1 100%);
}

/* v24.3 (Max 25.10.2026): Ampel überall. Gutes grün, Schlechtes rot, Achtung gelb.
   Tendenz-Pfeil steht vor der Zahl statt in ihr. */
:scope { --gelb: #8A5A00; --gelb-zart: #FBEFCB; }
:scope .pille.gelb, :scope .chip.gelb { background: var(--gelb-zart); color: var(--gelb); font-weight: 650; }
:scope .tendenz { display: none; }
:scope .karte.gut .zahl-gross::before, :scope .karte.gut .z::before { content: "▲"; color: var(--ok); font-size: .5em; margin-right: 6px; vertical-align: .25em; }
:scope .karte.schlecht .zahl-gross::before, :scope .karte.schlecht .z::before { content: "▼"; color: var(--rot); font-size: .5em; margin-right: 6px; vertical-align: .25em; }
:scope .zahlen .ztend.gut, :scope .ztend.gut, :scope .lz.gut { color: var(--ok); }
:scope .ztend.schlecht { color: var(--rot); }
:scope .akt, :scope .prow.werk, :scope .kn-werk { flex-wrap: nowrap; height: auto; }

/* v24.5 (Max 25.10.2026): Feinschliff nach Durchsicht. */
/* Dialog am Rechner immer mittig, wie bei HHV, mit unscharfem Hintergrund */
:scope .ov { background: rgba(30, 34, 40, .14) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:scope:not(.m) .ov:not(.blatt) .dialog { position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: 640px; max-width: 80%; }
:scope .ov .dialog { background: rgba(246, 247, 249, .96) !important; border: 1px solid #FFFFFF !important; box-shadow: 0 2px 8px rgba(30, 34, 40, .10), 0 30px 80px rgba(30, 34, 40, .28) !important; border-radius: 24px; }
/* Zweitknöpfe und Pillen auf Karten klar erkennbar */
:scope .karte .knopf.sek, :scope .dialog .knopf.sek { background: rgba(30, 34, 40, .06); border: 1px solid rgba(30, 34, 40, .10); box-shadow: none; }
:scope .karte .pille, :scope .karte .chip, :scope .pille, :scope .chip { border: 1px solid rgba(30, 34, 40, .08); }
:scope .pille:not(.rot):not(.gelb):not(.fertig):not(.gruen):not(.sofort):not(.st-ok), :scope .chip:not(.rot):not(.gelb) { background: rgba(30, 34, 40, .075); color: var(--tinte-2); }
:scope .pille.rot, :scope .pille.gelb, :scope .pille.fertig, :scope .pille.gruen, :scope .pille.st-ok, :scope .pille.sofort { border-color: transparent; }
/* Versand-Ergebnis als Pillenreihe */
.erg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.erg b { margin-right: 4px; color: var(--tinte); }
/* Antwortleiste Rechner: alle Knöpfe sichtbar, Senden rechts; passt es nicht, rutscht Senden in die nächste Zeile */
:scope .kn-zeile { flex-wrap: wrap; row-gap: 10px; }
:scope .kn-reihe { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
:scope .kn-reihe .knopf { flex: none; white-space: nowrap; }
:scope .kn-zeile .kn-senden { margin-left: auto; }
/* Antwortleiste Handy: Symbole mit kleiner Beschriftung, alles auf einen Blick */
:scope .kn-ikon { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; margin-top: 12px; }
:scope .kn-ikon .ik { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
:scope .kn-ikon .ik .rund { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(30, 34, 40, .06); border: 1px solid rgba(30, 34, 40, .10); }
:scope .kn-ikon .ik small { font-size: 11.5px; font-weight: 600; color: var(--tinte-2); }
:scope .kn-ikon .knopf.prim { height: 44px; min-height: 44px; padding: 0 18px; margin-bottom: 19px; }
/* Einstellungen: Regeln kompakt, Hinweis «geändert» hinter dem Titel; am Handy Titel oben, Schalter darunter */
:scope:not(.m) .sz .txt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
:scope:not(.m) .sz .txt .s { margin-top: 0; }
:scope:not(.m) .sz { min-height: 52px; }
:scope.m .sz { flex-wrap: wrap; }
:scope.m .sz .txt { flex: 1 1 100%; }
:scope.m .sz .segment.dreier { width: 100% !important; display: flex; }
:scope.m .sz .segment.dreier > span { flex: 1; justify-content: center; }
/* Hauptknopf nie zweizeilig */
:scope .knopf.prim { white-space: nowrap; }
/* Rechner: Knopfreihen brechen um statt abgeschnitten zu werden */
:scope:not(.m) .akt, :scope:not(.m) .prow.werk { flex-wrap: wrap !important; overflow: visible !important; height: auto !important; row-gap: 8px; }

/* v24.6 (Max 25.10.2026) */
/* Bestellung wie «Der Fall» bei HHV: ruhige Liste Schlüssel und Wert, darunter Aktionen als Symbolkacheln */
.bkarte { display: flex; flex-direction: column; }
.bkopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.bt2 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--leise); }
.blink { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 650; color: var(--tinte); white-space: nowrap; }
.kvz { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--linie); }
.bkopf + .kvz, .bkarte > .kvz:first-child { border-top: 0; }
.kvz .k { font-size: 14px; color: var(--leise); }
.kvz .v { font-size: 15px; font-weight: 600; color: var(--tinte); min-width: 0; }
.okpunkt { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font-size: 13px; font-weight: 650; color: var(--ok); }
.okpunkt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.kachelz { display: flex; gap: 8px; margin-top: 10px; }
.kachelz .ik { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border-radius: 18px; background: rgba(30, 34, 40, .05); border: 1px solid rgba(30, 34, 40, .08); }
.kachelz .ik .rund { width: 32px; height: 32px; background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid; place-items: center; }
.kachelz .ik small { font-size: 12.5px; font-weight: 650; color: var(--tinte-2); }
/* Suche mit Auswählen und Mehr, Filter nur im Band */
.such-zeile { display: flex; align-items: center; gap: 8px; }
.such-zeile .feld { flex: 1 1 auto; min-width: 0; }
.such-zeile .rund { width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
/* Namen im Chat schlicht, ohne Pillenrahmen */
:scope .vm .meta .chip { border: 0 !important; background: transparent !important; padding: 0 !important; }
:scope .vm .meta .chip + .chip { font-weight: 600; color: var(--leise) !important; }
/* Zahlen: alle Kacheln in EINER Reihe am Rechner, egal wie viele */
:scope:not(.m) .karte.zahlen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
:scope.m .prow.pfilter .pp { padding: 0 12px; gap: 6px; }
/* Zahlen am Rechner: Kacheln teilen sich die volle Breite */
:scope:not(.m) .karte.zahlen { display: flex !important; flex-wrap: wrap; gap: 12px; }
:scope:not(.m) .karte.zahlen > .kkopf { flex: 0 0 100%; }
:scope:not(.m) .karte.zahlen > .zr { flex: 1 1 0; min-width: 140px; }
:scope.m .prow.pfilter .pp { padding: 0 10px; font-size: 14px; }

/* v24.8 (Max 25.10.2026) */
/* Ursache Druckplan Handy: die allgemeine Regel «Band so breit wie Inhalt» hat Bänder gestaucht, die in der Tafel
   bewusst volle Breite haben (style width 100%, Einträge flex 1). Diese Bänder bleiben jetzt voll breit. */
:scope .segment[style*="width: 100%"], :scope .segment[style*="width:100%"] { width: 100% !important; display: flex !important; }
:scope .segment[style*="width: 100%"] > span, :scope .segment[style*="width:100%"] > span { flex: 1 1 0; justify-content: center; padding: 0 6px !important; }
/* Druckplan Handy: Nummer links, alles andere in einer Spalte mit gleichem Einzug, drei gleiche Knöpfe */
:scope.m .m-zeile.dm { display: grid !important; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: start; }
:scope.m .m-zeile.dm > .dn { grid-column: 1; }
:scope.m .m-zeile.dm > .txt { grid-column: 2; }
:scope.m .m-zeile.dm > .dknopf { grid-column: 2; }
.dknopf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dknopf .knopf { justify-content: center; min-height: 44px; height: 44px; padding: 0 8px; }
/* Größen in Farbe: M hellblau, L blau, XL dunkelgrau, XXL schwarz */
:scope .gr { font-weight: 700; border-color: transparent !important; }
:scope .gr-m { background: #DCE7FD !important; color: #1D46B8 !important; }
:scope .gr-l { background: #2E62E8 !important; color: #FFFFFF !important; }
:scope .gr-xl { background: #4A4E56 !important; color: #FFFFFF !important; }
:scope .gr-xxl { background: #111317 !important; color: #FFFFFF !important; }
/* Versand-Ergebnis: eine Zeile wie ein Band, am Handy seitlich wischbar */
.erg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px; border-radius: 999px; background: rgba(30, 34, 40, .05); border: 1px solid rgba(30, 34, 40, .08); }
.erg::-webkit-scrollbar { display: none; }
.erg > * { flex: none; }
.erg b { padding-left: 10px; }
:scope.m .erg .pille { padding: 0 9px; font-size: 12.5px; } :scope.m .erg b { padding-left: 6px; }
:scope.m .m-zeile.dm > :not(.dn) { grid-column: 2; }
:scope .knopf.erledigt-k { background: var(--ok-zart); color: var(--ok); border: 1px solid transparent; font-weight: 700; }

/* v24.9 (Max 25.10.2026): Druckplan. Motiv groß, Infos als Dreierleiste, Gedruckt als Dreierband Front, Back, Beide. */
.dknopf { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px !important; padding: 4px; border-radius: 999px; background: rgba(30, 34, 40, .07); border: 1px solid rgba(255, 255, 255, .6); box-shadow: inset 0 1px 2px rgba(30, 34, 40, .07); }
.dknopf .knopf { background: transparent !important; border: 0 !important; box-shadow: none !important; height: 40px !important; min-height: 40px !important; border-radius: 999px; color: var(--tinte-2); font-weight: 650; justify-content: center; padding: 0 6px !important; }
.dknopf .knopf.erledigt-k { background: var(--ok-zart) !important; color: var(--ok) !important; }
.dknopf.klein .knopf { height: 36px !important; min-height: 36px !important; font-size: 14px; }
/* Handy: Titel oben, dann beide Motive groß nebeneinander, dann Infoleiste, dann Band */
:scope.m .dm > .txt { display: flex; flex-direction: column; }
:scope.m .dm > .txt > .t { order: 0; font-size: 17px; font-weight: 700; }
:scope.m .dm > .txt > .s { order: 1; }
:scope.m .dm > .txt > .dtt { order: 2; display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0 !important; }
:scope.m .dm > .txt > .dtt .mo { width: auto !important; height: 128px !important; border-radius: 20px; position: relative; }
:scope.m .dm > .txt > .dp { order: 3; }
:scope .dp { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 !important; margin-top: 10px; padding: 4px; border-radius: 16px; background: rgba(30, 34, 40, .05); border: 1px solid rgba(30, 34, 40, .08); }
:scope .dp > * { justify-self: center; align-self: center; min-height: 32px; display: inline-flex !important; align-items: center; }
:scope .dp > * + * { border-left: 1px solid rgba(30, 34, 40, .10); justify-self: stretch; justify-content: center; }
:scope .dp > .pille:not(.gr) { background: transparent !important; border: 0 !important; }
/* Rechner: Motive größer */
:scope:not(.m) .dtt .mo { border-radius: 18px; }
/* v24.10: gleichrangige Knopfpaare und -trios als ein Band (wie Front, Back, Beide) */
.kband { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px !important; padding: 4px; border-radius: 999px; background: rgba(30, 34, 40, .07); border: 1px solid rgba(255, 255, 255, .6); box-shadow: inset 0 1px 2px rgba(30, 34, 40, .07); margin-top: 10px; }
.kband .knopf { background: transparent !important; border: 0 !important; box-shadow: none !important; height: 40px !important; min-height: 40px !important; border-radius: 999px; justify-content: center; padding: 0 8px !important; white-space: nowrap; font-weight: 650; color: var(--tinte-2); min-width: 0 !important; }

/* v24.11 (Max 25.10.2026): eine Regel für alle Seiten.
   Eigenschaften (Größe, Filament, Status, Kanal) sind Pillen in einer Reihe, ohne Kasten.
   Aktionen sind ein Band. Nie zwei Bänder oder Kästen direkt untereinander. */
:scope .dp { display: flex !important; flex-wrap: wrap; gap: 6px !important; padding: 0 !important; border: 0 !important; background: transparent !important; border-radius: 0; margin-top: 6px; }
:scope .dp > * { border-left: 0 !important; min-height: 0; justify-self: auto; }
:scope .dp > .pille:not(.gr) { background: rgba(30, 34, 40, .075) !important; border: 1px solid rgba(30, 34, 40, .08) !important; }
:scope .dfa { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 8px; border-radius: 999px; background: rgba(30, 34, 40, .075); border: 1px solid rgba(30, 34, 40, .08); font-size: 13.5px; font-weight: 650; color: var(--tinte-2); white-space: nowrap; box-sizing: border-box; }
:scope .dfa .df { width: 14px; height: 14px; }
:scope .dp .pille, :scope .dp .dfa { height: 28px !important; font-size: 13px !important; }
/* Handy Druckplan: Titel, Pillen, Motive, Band. Die Motive trennen Pillen und Band. */
:scope.m .dm > .txt > .dp { order: 2; }
:scope.m .dm > .txt > .dtt { order: 3; }
:scope.m .dm > .dknopf { margin-top: 0; }

/* v24.12 (Max 25.10.2026): Druckplan Handy, alles an EINER linken und EINER rechten Kante.
   Nummer und Titel teilen sich die erste Zeile, alles darunter geht über die volle Breite. */
:scope.m .m-zeile.dm { grid-template-columns: 34px minmax(0, 1fr) !important; column-gap: 10px !important; row-gap: 10px !important; align-items: center !important; }
:scope.m .m-zeile.dm > .txt { display: contents !important; }
:scope.m .m-zeile.dm > .dn { grid-column: 1; grid-row: 1; }
:scope.m .m-zeile.dm > .txt > .t { grid-column: 2; grid-row: 1; margin: 0; }
:scope.m .m-zeile.dm > .txt > .s { grid-column: 1 / -1; grid-row: 2; margin: -4px 0 0; }
:scope.m .m-zeile.dm > .txt > .dp { grid-column: 1 / -1; grid-row: 3; margin: 0 !important; }
:scope.m .m-zeile.dm > .txt > .dtt { grid-column: 1 / -1; grid-row: 4; margin: 0 !important; }
:scope.m .m-zeile.dm > .dknopf { grid-column: 1 / -1 !important; grid-row: 5; }
:scope.m .m-zeile.dm > :not(.dn):not(.txt):not(.dknopf) { grid-column: 1 / -1 !important; }
:scope.m .m-zeile.dm > .dn { grid-row: auto; order: 0; }
:scope.m .m-zeile.dm > .txt > .t { grid-row: auto; order: 1; }
:scope.m .m-zeile.dm > .txt > .s { grid-row: auto; order: 2; }
:scope.m .m-zeile.dm > .txt > .dp { grid-row: auto; order: 3; }
:scope.m .m-zeile.dm > .txt > .dtt { grid-row: auto; order: 4; }
:scope.m .m-zeile.dm > .dknopf { grid-row: auto; order: 5; }
:scope.m .m-zeile.dm > :not(.dn):not(.txt):not(.dknopf) { order: 6; }
:scope.m .m-zeile.dm > .txt > :not(.t):not(.s):not(.dp):not(.dtt) { grid-column: 1 / -1 !important; order: 4; }
.linkreihe { display: flex; gap: 18px; align-items: center; min-height: 32px; }
:scope.m .m-zeile.dm > .txt > .linkreihe { order: 4; }

/* v24.13 (Max 25.10.2026) */
/* Größe nur als Buchstabe; im Druckplan am Handy oben rechts in der Titelzeile */
:scope .gr { justify-content: center; min-width: 40px; }
:scope.m .m-zeile.dm { grid-template-columns: 34px minmax(0, 1fr) auto !important; }
:scope.m .m-zeile.dm > .txt > .gr-ecke { grid-column: 3; order: 1; height: 30px !important; font-size: 14px !important; padding: 0 12px; }
:scope.m .m-zeile.dm > .txt > :not(.t):not(.gr-ecke) { grid-column: 1 / -1 !important; }
:scope.m .m-zeile.dm > .dknopf { grid-column: 1 / -1 !important; }
/* Ampel-Kacheln: Rot, Grün und Gelb mit zartem Hintergrund, die Pille darin einen Ton kräftiger */
:scope { --rot-kachel: #FBE9E6; --rot-pille: #F4CDC8; --ok-kachel: #E7F4EC; --ok-pille: #C9E8D4; --gelb-kachel: #FCF4DC; --gelb-pille: #F6E3A6; }
:scope .karte.schlecht, :scope .karte:has(.zahl-gross):has(.pille.rot), :scope .zahlen .zr:has(.pille.rot), :scope .zahlen .zr:has(.ztend.schlecht) { background: var(--rot-kachel) !important; border-color: rgba(255, 255, 255, .8) !important; }
:scope .karte.gut, :scope .karte:has(.zahl-gross):has(.pille.fertig), :scope .zahlen .zr:has(.pille.fertig), :scope .zahlen .zr:has(.ztend.gut) { background: var(--ok-kachel) !important; border-color: rgba(255, 255, 255, .8) !important; }
:scope .karte:has(.zahl-gross):has(.pille.gelb), :scope .zahlen .zr:has(.pille.gelb) { background: var(--gelb-kachel) !important; border-color: rgba(255, 255, 255, .8) !important; }
:scope .karte.schlecht .pille.rot, :scope .karte:has(.zahl-gross) .pille.rot, :scope .zahlen .zr .pille.rot { background: var(--rot-pille) !important; }
:scope .karte.gut .pille.fertig, :scope .karte:has(.zahl-gross) .pille.fertig, :scope .zahlen .zr .pille.fertig { background: var(--ok-pille) !important; }
:scope .karte:has(.zahl-gross) .pille.gelb, :scope .zahlen .zr .pille.gelb { background: var(--gelb-pille) !important; }
/* Große Übersichtskarten mit mehreren Zahlen nicht einfärben */
:scope .karte:has(.zahl-gross):has(.zpillen), :scope .karte:has(.zahl-gross):has(.zeile), :scope .karte:has(.zahl-gross):has(.m-zeile) { background: linear-gradient(160deg, rgba(255, 255, 255, .78) 0%, rgba(248, 249, 250, .64) 100%) !important; }
/* Zusammengefasste Pillen: Name links, Zahl rechts, gleich breit, 2 mal 2 */
.zpillen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.zpille { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 650; background: rgba(30, 34, 40, .07); color: var(--tinte-2); }
.zpille b { font-size: 18px; font-weight: 760; font-variant-numeric: tabular-nums; }
.zpille.rot { background: var(--rot-pille); color: var(--rot); }
.zpille.gelb { background: var(--gelb-pille); color: var(--gelb); }
.zpille.fertig { background: var(--ok-pille); color: var(--ok); }
:scope.m .m-zeile.dm > .txt > .pille.gr-ecke { grid-column: 3 !important; order: 1 !important; align-self: center; }
:scope.m .m-zeile.dm > .txt > .pille.gr-ecke.gr-ecke.gr-ecke.gr-ecke.gr-ecke { grid-column: 3 !important; order: 1 !important; width: auto !important; }

/* v24.14 (Max 25.10.2026): EINE Antwortleiste für alle Chats (Postfach, Live-Chat, E-Mail-Chat, Kanäle, Kommentare).
   Rechner: Anhang, KI-Entwurf, «…» links, Senden rechts, immer eine Zeile.
   Handy: Band Anhang | KI-Entwurf | …, darunter Senden über die volle Breite. Fallaktionen liegen im «…». */
.antw-leiste { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: nowrap; }
.antw-leiste .knopf.sek { flex: none; white-space: nowrap; }
.antw-leiste .mehrknopf { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: rgba(30, 34, 40, .06); border: 1px solid rgba(30, 34, 40, .10); }
.antw-leiste .knopf.prim { margin-left: auto; flex: none; white-space: nowrap; }
.antw-h { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.antw-h .kband { margin-top: 0; grid-auto-columns: auto; grid-template-columns: 1fr 1fr 48px; }
.antw-h .kband .knopf { gap: 6px; }
.antw-h .knopf.prim.voll { width: 100%; min-height: 48px; justify-content: center; gap: 8px; }

/* v24.15: eine Auswahl für alle Listen. Weiße Fläche, keine Farbkante, Trennlinien über und unter der gewählten Zeile weg */
:scope .fz.sel, :scope .fz.sofort.sel, :scope .zeile.gewaehlt, :scope .zeile.sel, :scope .kz.gewaehlt, :scope .mz.sel, :scope .at.sel { background: rgba(255, 255, 255, .92) !important; box-shadow: 0 1px 2px rgba(30, 34, 40, .06), 0 4px 14px rgba(30, 34, 40, .06) !important; border-radius: 16px !important; border-top-color: transparent !important; border-bottom-color: transparent !important; }
:scope .fz.sel + *, :scope .zeile.gewaehlt + *, :scope .zeile.sel + *, :scope .kz.gewaehlt + *, :scope .mz.sel + *, :scope .at.sel + * { border-top-color: transparent !important; }

/* v24.16: Unternavigation am Handy als eine wischbare Reihe, nie zwei Zeilen. Rechts weich ausgeblendet, damit man das Wischen sieht */
.wisch { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 40px), transparent 100%); }
.wisch::-webkit-scrollbar { display: none; }
.wisch > .segment { display: inline-flex; flex-wrap: nowrap; width: max-content; max-width: none !important; }
.wisch > .segment > span { white-space: nowrap; flex: none; }
/* Auswahl in einer Reihe mit gleich breiten Feldern */
.wahl { display: grid !important; grid-auto-flow: column; grid-auto-columns: auto; width: 100% !important; box-sizing: border-box; }
.wahl > span { justify-content: center; padding: 0 6px !important; white-space: nowrap; }
.wisch.ende { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 100%); mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 100%); }

/* v24.18: Ampel auch für Handy-Kacheln mit Status-Pille */
:scope .m-kachel:has(.pille.fertig), :scope .m-kachel:has(.pille.gruen) { background: var(--ok-kachel) !important; border-color: rgba(255, 255, 255, .8) !important; }
:scope .m-kachel:has(.pille.rot) { background: var(--rot-kachel) !important; border-color: rgba(255, 255, 255, .8) !important; }
:scope .m-kachel:has(.pille.gelb) { background: var(--gelb-kachel) !important; border-color: rgba(255, 255, 255, .8) !important; }
/* v24.18: Bänder am Rechner wie am Handy, sichtbare Mulde mit weißem Rand */
:scope .d-haupt .segment, :scope .d-haupt .kband, :scope .d-haupt .dknopf, :scope .d-haupt .erg { background: rgba(30, 34, 40, .085) !important; border: 1px solid rgba(255, 255, 255, .95) !important; box-shadow: inset 0 1px 2px rgba(20, 24, 32, .09), 0 1px 0 rgba(255, 255, 255, .7) !important; }
/* v24.18: Eingabefelder als Mulde, damit sie sich von weißen Karten abheben */
:scope .feld, :scope .fl, :scope .f-eing, :scope .f-feld, :scope .antwort-feld { background: rgba(30, 34, 40, .055) !important; border: 1px solid rgba(255, 255, 255, .95) !important; box-shadow: inset 0 1px 2px rgba(20, 24, 32, .09) !important; }
/* v24.19: Inhalt jeder Pille mittig, auch mit Farbpunkt oder Haken */
:scope .dfa { justify-content: center; padding: 0 11px !important; }
:scope .dknopf .knopf.erledigt-k { gap: 4px !important; }
:scope .dknopf .knopf.erledigt-k .i { width: 14px; height: 14px; flex: none; }

/* v24.20: Versandzeile nach DHL-Ampel. Rot noch nicht bei DHL, Gelb unterwegs, Grün zugestellt */
:scope .sr.st-ohne { background: var(--rot-kachel) !important; border-color: rgba(255, 255, 255, .8) !important; }
:scope .sr.st-ohne .l, :scope .sr.st-ohne .i { color: var(--rot) !important; }
:scope .sr.st-weg { background: var(--gelb-kachel) !important; border-color: rgba(255, 255, 255, .8) !important; }
:scope .sr.st-weg .l, :scope .sr.st-weg .i { color: #8A6A00 !important; }
:scope .sr.st-zu { background: var(--ok-kachel) !important; }
/* v24.20: gewählte Zeile klar erkennbar. Weiß, feiner blauer Ring wie die Auswahl links, Name in Blau */
:scope .fz.sel, :scope .fz.sofort.sel, :scope .zeile.gewaehlt, :scope .zeile.sel, :scope .kz.gewaehlt, :scope .mz.sel, :scope .at.sel { background: #FFFFFF !important; box-shadow: 0 0 0 1.5px rgba(46, 98, 232, .55), 0 6px 18px rgba(30, 34, 40, .10) !important; position: relative; z-index: 1; }
:scope .fz.sel .nm, :scope .fz.sel b, :scope .fz.sel .t, :scope .fz.sel .n, :scope .zeile.gewaehlt .t, :scope .kz.gewaehlt .t, :scope .kz.gewaehlt b { color: var(--lila, #2E62E8) !important; }

/* v24.21: gewählte Zeile mit Abstand zum Kartenrand, damit der Ring rundum sichtbar ist und nirgends angeschnitten wird */
:scope .fz.sel, :scope .fz.sofort.sel, :scope .zeile.gewaehlt, :scope .zeile.sel, :scope .kz.gewaehlt, :scope .mz.sel, :scope .at.sel { margin: 4px 8px !important; border-radius: 14px !important; }

/* v24.21: ein Farbsatz für die ganze App. Blau zwei Töne, je Ampelfarbe Schrift, Pille, Kachel */
:scope { --blau: #2E62E8; --blau-text: #1D46B8; --blau-zart: #E3EAFB; --gelb-text: #8A5A00; --gelb-zart: #FBEFCB; }
:scope .n, :scope .d-sub.an, :scope .m-tab.an, :scope .d-punkt.an, :scope .dn:not(.rot), :scope .zaehler, :scope .fz.sel .nm, :scope .fz.sel b, :scope .zeile.gewaehlt .t, :scope .kz.gewaehlt .t, :scope .kz.gewaehlt b, :scope .knopf.gedrueckt { color: var(--blau-text) !important; }
:scope .pille.gelb, :scope .zpille.gelb, :scope .sr.st-weg .l, :scope .sr.st-weg .i { color: var(--gelb-text) !important; }
:scope .pille.gelb { background: var(--gelb-zart) !important; }
:scope .vm.wir, :scope .blase.du, :scope .pille.blau, :scope .pille.gr-m { background: var(--blau-zart) !important; }
:scope { --lila-text: #1D46B8; --lila-hell: #1D46B8; }

/* v24.22: Kästchen und Kreise zum Anhaken auf hellem Grund sichtbar */
:scope .haken:not(.an) { background: #FFFFFF !important; border: 2px solid rgba(30, 34, 40, .38) !important; }
:scope .rd:not(.on) { background: #FFFFFF !important; border-color: rgba(30, 34, 40, .38) !important; }
/* v24.22: Farbakzent in den Aktionskacheln des Falls */
:scope .kachelz .ik .rund { background: var(--blau-zart) !important; color: var(--blau-text) !important; border-radius: 999px !important; }
:scope .kachelz .ik .rund .i { color: var(--blau-text); background-color: var(--blau-text); }
/* v24.22: Hinweise sind Achtung, also gelbe Kachel */
:scope .karte.hinweis { background: var(--gelb-kachel) !important; border-color: rgba(255, 255, 255, .8) !important; display: flex; align-items: center; gap: 10px; }
:scope .karte.hinweis > div { flex: 1; }
:scope .karte.hinweis .pille.gelb { background: var(--gelb-pille) !important; }
/* v24.24: Druck zu Hause als ruhige Liste mit Statuspille */
:scope .druckbox { background: rgba(255, 255, 255, .6) !important; }
:scope .druckbox .dbk { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
:scope .druckbox .dbk b { font-size: 15.5px; }
:scope .druckbox .dbk .pille { margin-left: auto; }
/* v24.24: Zahlenfelder so breit wie der Inhalt, Zahl mittig */
:scope .zahlfeld { width: 64px !important; min-width: 64px; flex: none !important; justify-content: center !important; text-align: center; padding: 0 8px !important; font-weight: 700; color: var(--tinte); }

/* v24.25: gewählte Zeile ohne Einrückung, Ring nach innen, damit Pillenspalten bündig bleiben */
:scope .fz.sel, :scope .fz.sofort.sel, :scope .zeile.gewaehlt, :scope .zeile.sel, :scope .kz.gewaehlt, :scope .mz.sel, :scope .at.sel { margin: 0 !important; box-shadow: inset 0 0 0 1.5px rgba(46, 98, 232, .55) !important; }
/* v24.25: neutrale Kacheln in einer Karte als Mulde, damit sie sich abheben */
:scope .zahlen .zr:not(:has(.pille.rot)):not(:has(.pille.fertig)):not(:has(.pille.gelb)):not(:has(.ztend)) { background: rgba(30, 34, 40, .045) !important; }
/* v24.25: Tastenkästchen, Zählkacheln im Live-Chat, Knöpfe im Popup mit sichtbarem Rand */
:scope kbd, :scope .taste, :scope .kbd { background: #FFFFFF !important; border: 1px solid rgba(30, 34, 40, .22) !important; box-shadow: 0 1px 0 rgba(30, 34, 40, .12) !important; }
:scope .lgf { background: rgba(30, 34, 40, .045) !important; border: 1px solid rgba(255, 255, 255, .9) !important; }
:scope .lgf.erl, :scope .lgf.erledigt { background: var(--ok-kachel) !important; }
:scope .ov .knopf.sek, :scope .dialog .knopf.sek { border: 1px solid rgba(30, 34, 40, .14) !important; }
/* v24.25: Achtung-Kachel gelb, wie gut grün und schlecht rot */
:scope .karte.achtung { background: var(--gelb-kachel) !important; border-color: rgba(255, 255, 255, .8) !important; }
:scope.m .zahlen.drei { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
:scope .zahlen .zr.ton-rot { background: var(--rot-kachel) !important; }
:scope .zahlen .zr.ton-gelb { background: var(--gelb-kachel) !important; }
:scope .zahlen .zr.ton-gruen { background: var(--ok-kachel) !important; }
/* v24.25: Symbolkreise und Kürzel auf weißen Karten als hellblaue Fläche, Balkenspuren sichtbar */
:scope .karte .symq { background: var(--blau-zart) !important; color: var(--blau-text) !important; border: 0 !important; }
:scope .karte .symq .i { background-color: var(--blau-text); }
:scope .kurz { background: var(--blau-zart) !important; color: var(--blau-text) !important; }
:scope { --toenung: rgba(30, 34, 40, .08); }
/* v24.25: Schrittziffer weiß auf Blau, Ablagefeld als Mulde, schmale Auswahl am Handy */
:scope .zaehler.schritt, :scope .d-punkt.an .zaehler { background: var(--blau) !important; color: #FFFFFF !important; }
:scope .ablage { background: rgba(30, 34, 40, .045) !important; border: 1.5px dashed rgba(30, 34, 40, .25) !important; }
:scope.m .segment.klein.wahl > span { font-size: 13.5px; }
:scope .dfa { padding: 0 12px !important; }
:scope .f-bar.gelb i { background: #E9B730 !important; } :scope .f-bar.rot i { background: #C8463D; }
:scope .pop .knopf.sek, :scope .pop2 .knopf.sek, :scope .pop1 .knopf.sek { background: rgba(30, 34, 40, .06) !important; border: 1px solid rgba(30, 34, 40, .1) !important; box-shadow: none !important; }

/* v24.27: gewählte Zeile als eigene runde Fläche innerhalb der Zeile. Nie vom Kartenrand angeschnitten, Spalten bleiben bündig */
:scope .fz.sel, :scope .fz.sofort.sel, :scope .zeile.gewaehlt, :scope .zeile.sel, :scope .kz.gewaehlt, :scope .mz.sel, :scope .at.sel { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; position: relative; isolation: isolate; }
:scope .fz.sel::before, :scope .fz.sofort.sel::before, :scope .zeile.gewaehlt::before, :scope .zeile.sel::before, :scope .kz.gewaehlt::before, :scope .mz.sel::before, :scope .at.sel::before { content: ""; position: absolute; inset: 4px 6px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(46, 98, 232, .55), 0 4px 14px rgba(30, 34, 40, .08); z-index: -1; pointer-events: none; }
/* v24.27: offenes Popup dunkelt die ganze Seite ab, Seitenleiste eingeschlossen */
:scope .ov-voll { position: absolute; inset: 0; z-index: 20; background: rgba(30, 34, 40, .30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: inherit; }
:scope .ov-voll ~ div[style*="position: absolute"], :scope .ov-voll ~ .pop2 { z-index: 30 !important; }
:scope.dim .ov, :scope .ov { background: rgba(30, 34, 40, .30) !important; }
:scope .segment.wahl, :scope.m .segment.wahl { width: 100% !important; max-width: none !important; grid-auto-columns: minmax(0, 1fr) !important; }

}