/* invoiceDNA — die Oberflaeche des Chefs am PC (v12.0.0).
   Nach dem Handoff aus Claude Design ("design_handoff_invoicedna_app",
   23.09.2026): Seitenleiste, Senden (Stapel, Bearbeiten, E-Mail), Konto,
   Einstellungen. Nur Dunkel, nur Desktop — gilt, solange body.dna gesetzt
   ist (legacy.js: dnaAn). Keine Kaesten als Layout-Prinzip: Bereiche
   trennen Linien und Weissraum. Die Blaetter (.dsh) gelten ueberall.     */

/* ------------------------------------------------------------ Tokens */
body.dna{
  --d-bg:#0E0F12; --d-stage:#0B0C0F; --d-surface:#16181D; --d-surface2:#1D2026; --d-seg:#2A2E36;
  --d-line:#1F2228; --d-line-soft:#22252C; --d-text:#F2F3F5; --d-text2:#A4A9B3; --d-text3:#868B95;
  --d-blue:#3778F5; --d-blue-hover:#2F6BE0; --d-blue-dark:#498BFF; --d-blue-light:#7FA8FF;
  --d-blue-soft:#16233F; --d-blue-rand:#22345C; --d-hell:#8FB0F0; --d-orange:#F2A65A;
  /* Die alten Seiten (Auftrag anlegen, Listen, Fenster) tragen dieselben
     Farben — sie laufen im selben Rahmen.                               */
  --ground:#0E0F12; --surface:#16181D; --surface-2:#1D2026; --surface-3:#2A2E36;
  --ink:#F2F3F5; --ink-2:#A4A9B3; --ink-3:#868B95; --leise:#868B95;
  --line:#1F2228; --line-strong:#2A2E36; --kante-licht:transparent;
  --licht-oben:transparent; --licht-ecke:transparent;
  --accent:#498BFF; --accent-ink:#FFFFFF; --accent-soft:#16233F; --dna-ink:#FFFFFF; --dna-blau:#498BFF;
  --ok:#7FA8FF; --ok-soft:#16233F; --warn:#F2A65A; --warn-soft:#2B2014; --crit:#F0847A; --crit-soft:#331714;
  --papier:#1B2027; --papier-hell:#232932; --papier-kante:#2B323B; --papier-strich:#333B45; --papier-kopf:#414A55; --papier-schatten:rgba(0,0,0,.5);
  --haft:#2A2418; --haft-hell:#332C1D; --haft-kante:#3B3323; --haft-strich:#4A4130; --lichtfleck:transparent;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
  --unterwegs:#8FB0F0; --blatt-hinten-1:rgba(238,241,244,.26); --blatt-hinten-2:rgba(238,241,244,.58); --knopf-zahl:#FFFFFF;
  --knopf-rand:transparent; --konto-gruen:#7FA8FF; --karte:var(--ground); --karte-rand:transparent;
  --konto-flaeche:#16233F; --konto-flaeche-hover:#1B2B4D; --konto-leuchtet:#22345C;
  --fill:#F2F3F5; --knopf-flaeche:#3778F5; --knopf-text:#FFFFFF; --knopf-rand2:transparent;
  color-scheme:dark;
  background:#0E0F12; background-image:none; color:#F2F3F5;
  font-family:"Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.dna .topbar,body.dna #schreibgrund{display:none}
html:has(body.dna){color-scheme:dark!important;background:#0E0F12;scrollbar-color:#2A2E36 #0E0F12}

/* -------------------------------------------------------- Seitenleiste */
#dna-nav{display:none}
body.dna #dna-nav{display:flex;position:fixed;left:0;top:0;bottom:0;width:220px;box-sizing:border-box;border-right:1px solid var(--d-line);
  padding:26px 14px 18px;flex-direction:column;gap:36px;background:var(--d-bg);color:var(--d-text);z-index:40}
.dn-logo{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 10px;cursor:pointer;border-radius:8px}
.dn-logo .dna{width:24px;height:24px;display:block}
.dn-logo:focus-visible,.dn-item:focus-visible,.dn-bild:focus-visible{outline:2px solid var(--d-blue-dark);outline-offset:2px}
.dn-wort{font-size:19px;letter-spacing:-.045em;line-height:1;color:var(--d-text)}
.dn-wort i{font-style:normal;font-weight:500} .dn-wort b{font-weight:700}
.dn-liste{display:flex;flex-direction:column;gap:2px}
.dn-item{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;height:40px;padding:0 10px;position:relative;color:var(--d-text2);cursor:pointer;border-radius:8px;font-size:15px;font-weight:500;transition:color .15s}
.dn-item:hover{color:#FFFFFF}
.dn-item[aria-current="true"]{color:#FFFFFF;font-weight:600}
.dn-item::before{content:"";position:absolute;left:-14px;top:11px;bottom:11px;width:2px;border-radius:0 2px 2px 0;background:transparent;transition:background .2s}
.dn-item[aria-current="true"]::before{background:var(--d-blue-dark)}
.dn-item svg{width:19px;height:19px;flex:none}
.dn-luft{flex:1}
.dn-unten{display:flex;flex-direction:column;gap:14px}
.dn-show{display:flex;align-items:center;gap:8px;padding:0 10px;font-size:12.5px;color:var(--d-text2)}
.dn-show i{width:6px;height:6px;border-radius:50%;background:var(--d-blue-dark);flex:none}
.dn-show button{all:unset;margin-left:auto;color:var(--d-blue-light);cursor:pointer}
.dn-show button:hover{color:#FFFFFF}
.dn-strich{height:1px;background:var(--d-line);margin:0 -14px}
.dn-profil{display:flex;align-items:center;gap:11px;padding:2px 10px}
.dn-bild{all:unset;width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none;cursor:pointer;background:var(--d-blue-soft)}
.dn-bild img{width:100%;height:100%;object-fit:cover;display:block}
/* Das Maskottchen mit Persoenlichkeit (v12.21.0): Konfetti, Herzchen und
   Sprunge gehen ueber den Rand — nichts schneidet sie ab. */
.idna-m{display:inline-flex;flex:none;position:relative}
.dn-bild.m{overflow:visible;background:transparent}
.dn-name{all:unset;min-width:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--d-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.dn-name:hover{color:#FFFFFF}
.dn-name:focus-visible{outline:2px solid var(--d-blue-dark);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------ Rahmen */
body.dna{--nav-b:220px}
body.dna-schiene{--nav-b:76px}
body.dna-mobil{--nav-b:0px;--tab-h:calc(59px + max(8px, env(safe-area-inset-bottom)))}
body.dna #view{margin:0 0 0 var(--nav-b);max-width:none;min-height:100vh;box-sizing:border-box;
  padding:32px max(48px, calc((100vw - var(--nav-b) - 880px) / 2)) 120px}
body.dna #view{z-index:auto}
body.dna #view.dna-voll{padding:0;height:100vh;overflow:hidden}
body.dna #view.dna-seite{padding:0}
body.dna .overlay{padding-left:var(--nav-b)}
body.dna #toastHost .toast{left:calc(var(--nav-b) + (100vw - var(--nav-b)) / 2);top:auto;bottom:24px;z-index:80;background:var(--d-blue-soft);color:#DCE6FF;border:0;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
body.dna #toastHost .toast.mit-knopf button{color:var(--d-blue-light)}

/* ------------------------------------------------------------ Senden */
.dna-senden{display:flex;height:100vh;position:relative;background:var(--d-bg);color:var(--d-text);user-select:none;overflow:hidden}
.ds-buehne{flex:1;min-width:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--d-stage)}
.ds-zoom{transform-origin:50% 50%}
.ds-stapel{width:430px;height:608px;position:relative;z-index:1;margin-top:14px}
.ds-kante{position:absolute;inset:0;border-radius:3px;transition:transform .34s, opacity .3s}
.ds-blatt{position:absolute;inset:0;transition:transform .24s cubic-bezier(.3,.7,.3,1), opacity .2s;will-change:transform}
.ds-dunkel{position:absolute;inset:0;border-radius:3px;background:var(--d-stage);transition:opacity .24s cubic-bezier(.3,.7,.3,1);pointer-events:none}
.ds-vorn{position:absolute;inset:0;perspective:2000px;cursor:pointer;touch-action:none;border-radius:3px;
  transition:transform .24s cubic-bezier(.3,.7,.3,1), opacity .2s, box-shadow .3s;will-change:transform}
.ds-dreh{position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.45,0,.55,1)}
.ds-seite{transition:opacity 0s linear .3s}
.ds-seite.b{position:absolute;inset:0;transform:rotateY(180deg)}
.ds-geist{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ds-still,.ds-still *{transition:none!important}
.ds-leer{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--d-text2);font-size:15px}
.ds-leer svg{width:40px;height:40px;color:var(--d-text3)}
.ds-neu{all:unset;position:absolute;top:20px;left:24px;z-index:4;display:flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 10px;border-radius:10px;color:var(--d-text2);font-size:13.5px;font-weight:500;cursor:pointer;transition:background .15s,color .15s}
.ds-neu:hover{background:var(--d-surface);color:#FFFFFF}
.ds-neu svg{width:16px;height:16px}
/* Oben links: Neuer Auftrag und Zettel einlesen (v12.20.0) — nur die
   Zeichen; der Name faehrt erst beim Drueberfahren aus (Raphael, 24.09.:
   „dass die nicht staendig offen im Weg sind“). Wie .ts-pille. */
.ds-oben{position:absolute;top:18px;left:20px;z-index:6;display:flex;align-items:center;gap:4px}
.ds-editscroll{cursor:default}
.ds-oben .ds-neu{position:relative;gap:0;width:34px;min-width:34px;height:34px;padding:0;box-sizing:border-box;border-radius:17px;color:#868B95;justify-content:center}
.ds-oben .ds-neu:hover,.ds-oben .ds-neu:focus-visible{background:var(--d-surface);color:#FFFFFF}
/* Das Schild unter dem Zeichen: erscheint beim Zeigen, bewegt nichts. */
.ds-oben .ds-neu::after{content:attr(data-tip);position:absolute;top:calc(100% + 7px);left:0;background:#1C1E24;color:#FFFFFF;font-size:12.5px;font-weight:500;line-height:1.3;padding:6px 10px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.45), inset 0 0 0 1px #2E3138;opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity .12s ease,transform .12s ease;z-index:7}
.ds-oben .ds-neu:hover::after,.ds-oben .ds-neu:focus-visible::after{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ds-oben .ds-neu::after{transition:none}}
/* Ein Foto oder eine PDF uebers Senden gezogen: hier ablegen. */
.dna-senden.zettel-ab .ds-buehne::after{content:"Zettel hier ablegen · Foto oder PDF";position:absolute;inset:14px;z-index:30;display:flex;align-items:center;justify-content:center;border:2px dashed var(--d-blue-dark);border-radius:18px;background:rgba(55,120,245,.1);color:#DCE6FF;font-size:15px;font-weight:600;pointer-events:none}
/* Waehrend der Zettel gelesen wird: eine Pille mit den Sekunden. */
.zettel-stand{position:fixed;left:calc(var(--nav-b,0px) + (100vw - var(--nav-b,0px)) / 2);bottom:26px;transform:translateX(-50%);z-index:95;display:flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 14px;border-radius:999px;background:#16233F;color:#DCE6FF;box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(127,168,255,.18);font:500 13.5px 'Geist',system-ui,sans-serif;white-space:nowrap}
.zettel-stand b{min-width:30px;text-align:right;font-weight:600;color:#7FA8FF;font-variant-numeric:tabular-nums}
.zs-dreh{width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid rgba(127,168,255,.3);border-top-color:#7FA8FF;animation:zsDreh .8s linear infinite}
@keyframes zsDreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.zs-dreh{animation-duration:2.4s}}
body.dna-mobil .zettel-stand{bottom:auto;top:calc(env(safe-area-inset-top) + 12px)}
.ds-toast{position:absolute;top:20px;left:50%;transform:translate(-50%,-16px);opacity:0;transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s;
  display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--d-blue-soft);color:#DCE6FF;font-size:14px;white-space:nowrap;pointer-events:none;z-index:9}
.ds-toast.an{transform:translate(-50%,0);opacity:1}
.ds-toast svg{width:16px;height:16px;flex:none}

/* Das Panel rechts */
.ds-panel{width:340px;flex:none;border-left:1px solid var(--d-line);position:relative;overflow:hidden;transition:width .42s cubic-bezier(.2,.7,.2,1), border-color .42s}
.dna-senden.edit .ds-panel{width:0;border-left-color:transparent}
.ds-panel-in{position:absolute;top:0;left:0;bottom:0;width:340px;padding:28px;box-sizing:border-box;display:flex;flex-direction:column;gap:22px;transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s}
.dna-senden.edit .ds-panel-in{transform:translateX(-30%);opacity:0;pointer-events:none}

/* Einklappen (v12.6.1): Links gleitet die Seitenleiste ganz hinaus, rechts
   das Panel; die Buehne waechst mit, das Blatt bleibt mittig. Die Griffe
   sind klein und erst zu sehen, wenn die Maus an die Kante kommt (ihre
   Zone ist ein schmaler Streifen ueber der Kante). Sie gleiten mit der
   Kante im selben Takt (0,42 s, dieselbe Kurve), der Pfeil dreht sich. */
body.dna.nav-zu{--nav-b:0px}
body.dna.zu-gleitet #dna-nav{transition:transform .42s cubic-bezier(.2,.7,.2,1)}
body.dna.nav-zu #dna-nav{transform:translateX(-100%)}
body.dna.zu-gleitet #view{transition:margin-left .42s cubic-bezier(.2,.7,.2,1)}
.dna-senden.panel-zu:not(.edit) .ds-panel{width:0}
.dna-senden.panel-zu:not(.edit) .ds-panel-in{transform:translateX(30%);opacity:0;pointer-events:none}
.dn-zone,.ds-zone{position:absolute;top:0;bottom:0;width:36px;z-index:6}
.dn-zone{right:-24px}
.ds-zone{right:328px;transition:right .42s cubic-bezier(.2,.7,.2,1)}
.dna-senden.panel-zu .ds-zone{right:-12px}
.dna-senden.edit .ds-zone{display:none}
.dn-zu,.ds-zu{all:unset;box-sizing:border-box;position:absolute;top:50%;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--d-bg);color:var(--d-text2);
  box-shadow:inset 0 0 0 1px var(--d-line-soft),0 2px 8px rgba(0,0,0,.4);opacity:0;
  transition:opacity .2s,color .2s,background .2s,transform .42s cubic-bezier(.2,.7,.2,1)}
.dn-zu svg,.ds-zu svg{width:12px;height:12px;display:block;transition:transform .42s cubic-bezier(.2,.7,.2,1)}
/* Mitte des Griffs genau auf der Kante; eingeklappt ganz sichtbar daneben. */
.dn-zu{left:12px;transform:translate(-50%,-50%)}
body.nav-zu .dn-zu{transform:translate(6px,-50%)}
body.nav-zu .dn-zu svg{transform:rotate(180deg)}
.ds-zu{right:12px;transform:translate(50%,-50%)}
.dna-senden.panel-zu .ds-zu{transform:translate(-6px,-50%)}
.dna-senden.panel-zu .ds-zu svg{transform:rotate(180deg)}
/* Eingeklappt bleibt ein Hauch davon stehen — der Weg zurueck. */
body.nav-zu .dn-zu,.dna-senden.panel-zu .ds-zu{opacity:.3}
.dn-zone:hover .dn-zu,.ds-zone:hover .ds-zu,.dn-zu:focus-visible,.ds-zu:focus-visible{opacity:1}
.dn-zu:hover,.ds-zu:hover{color:#FFFFFF;background:var(--d-surface2)}
.dn-zu:focus-visible,.ds-zu:focus-visible{outline:2px solid var(--d-blue-dark);outline-offset:2px}
@media (prefers-reduced-motion: reduce){ body.dna #dna-nav,body.dna #view,.ds-zone,.dn-zu,.ds-zu,.dn-zu svg,.ds-zu svg{transition:none!important} }
.ds-pos{display:flex;flex-direction:column;gap:10px}
.ds-pos-z{display:flex;justify-content:space-between;font-size:13px;color:var(--d-text2);font-variant-numeric:tabular-nums}
.ds-pos-z b{color:#FFFFFF;font-weight:600}
.ds-st{display:flex;align-items:center;gap:7px}
.ds-st i{width:6px;height:6px;border-radius:50%;background:currentColor}
.ds-bar{height:2px;background:var(--d-line-soft);border-radius:1px}
.ds-bar i{display:block;height:100%;background:var(--d-blue-dark);border-radius:1px;transition:width .3s}
.ds-wer{display:flex;flex-direction:column;gap:6px}
.ds-kunde{font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.ds-betrag{font-size:34px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.ds-betrag.ca{font-size:28px}
.ds-faellig{font-size:13px;color:var(--d-text2)}
.ds-seg{display:flex;gap:2px;padding:3px;margin:0 -15px;background:var(--d-surface);border-radius:10px;font-size:13px}
.ds-seg button{all:unset;flex:1 1 auto;justify-content:center;display:flex;align-items:center;gap:5px;height:30px;padding:0 9px;border-radius:8px;cursor:pointer;color:var(--d-text2);font-weight:500;transition:background .2s,color .2s;white-space:nowrap}
.ds-seg button:hover{color:#FFFFFF}
.ds-seg button[aria-current="true"]{color:#FFFFFF;background:var(--d-seg)}
.ds-seg .ok{color:var(--d-blue-dark);font-size:12px;font-weight:700}
.ds-seg .punkt{width:6px;height:6px;flex:none;align-self:center;border-radius:50%;background:var(--d-orange);box-shadow:0 0 0 3px rgba(242,166,90,.15)}
.ds-info{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px}
.ds-info>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.ds-info .breit{grid-column:span 2}
.ds-info span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--d-text3)}
.ds-info b{font-size:14px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.ds-info b.leer{color:var(--d-text3)}
.ds-info b.leer.rot{color:#FF8F87}
/* Vom Zettel gelesen: das Foto klein, darunter, was zu pruefen ist. */
.ds-zettel{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 12px 10px 10px;border-radius:12px;background:var(--d-surface)}
.ds-zettel img{width:40px;height:54px;flex:none;object-fit:cover;object-position:top;border-radius:5px;background:#FFFFFF;cursor:zoom-in}
.ds-zic{width:40px;height:40px;flex:none;border-radius:10px;background:var(--d-surface2);display:flex;align-items:center;justify-content:center;color:var(--d-blue-light)}
.ds-zic svg{width:20px;height:20px}
.ds-zettel>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds-zettel b{font-size:13px;font-weight:600}
.ds-zettel span{font-size:12.5px;color:var(--d-text2)}
.ds-zettel.klick{cursor:pointer}
.ds-zettel.klick:hover{background:var(--d-surface2,#22252B)}
.ds-infoknopf{all:unset;cursor:pointer;font-size:14px;color:var(--d-text3);border-radius:6px}
.ds-infoknopf.rot{color:#FF8F87}
.ds-infoknopf:hover{text-decoration:underline;color:#FFFFFF}
.ds-zettel span.rot,.ds-zettel i.rot{color:#FF8F87}
.ds-zettel i{font-style:normal}
.ds-zettel i.gelb{color:#F5C84C}
.ds-luft{flex:1}
/* Die Pruefung vor dem Versand: jede Zeile ein Griff zur Stelle. */
.ds-pruef{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.ds-pruefz{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:7px 6px;margin:0 -6px;border-radius:8px;font-size:13px;color:var(--d-text2);cursor:pointer}
.ds-pruefz:hover{background:var(--d-surface);color:#FFFFFF}
.ds-pruefz.ok{cursor:default}
.ds-pruefz i{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:700;flex:none}
.ds-pruefz.rot i{background:rgba(255,143,135,.18);color:#FF8F87}
.ds-pruefz.gelb i{background:rgba(242,166,90,.18);color:var(--d-orange)}
.ds-pruefz.ok i{background:rgba(39,178,106,.18);color:#5BD08F}
.ds-pruefz span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-pruefz b{font-weight:600;font-size:12px;color:var(--d-text3)}
.ds-pruefz.rot b{color:#FF8F87}
.ds-pruefz.gelb b{color:var(--d-orange)}
.ds-hin{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;margin:0 -4px;padding:8px 4px;border-radius:8px;font-size:13px;color:#E9C39B;cursor:pointer}
.ds-hin i{width:6px;height:6px;border-radius:50%;background:var(--d-orange);flex:none;box-shadow:0 0 0 3px rgba(242,166,90,.15)}
.ds-hin span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-hin b{font-weight:600;color:var(--d-orange);white-space:nowrap}
.ds-hin:hover b{color:#FFFFFF}
.ds-akt{display:flex;flex-direction:column;gap:6px;margin:0 -12px -10px}
.ds-edit{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;height:50px;padding:0 16px;border-radius:12px;cursor:pointer;color:#B9BDC6;transition:background .15s,color .15s}
.ds-edit:hover{background:var(--d-surface);color:#FFFFFF}
.ds-edit svg{width:17px;height:17px;flex:none}
.ds-edit span{flex:1;font-size:15px;font-weight:500}
.ds-los{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;border-radius:14px;background:var(--d-blue-soft);box-shadow:inset 0 0 0 1px var(--d-blue-rand);cursor:pointer;color:#DCE6FF;transition:background .15s}
.ds-los:hover{background:#1B2B4D}
.ds-los svg{width:17px;height:17px;flex:none}
.ds-los svg.pf{width:16px;height:16px;color:var(--d-blue-light)}
.ds-los span{flex:1;font-size:15px;font-weight:600;white-space:nowrap}
.ds-edit:focus-visible,.ds-los:focus-visible,.ds-seg button:focus-visible,.ds-hin:focus-visible{outline:2px solid var(--d-blue-dark);outline-offset:2px}

/* Bearbeiten: dieselbe Ebene, das Blatt gross */
.ds-editlage{position:absolute;inset:0;background:var(--d-stage);display:flex;flex-direction:column;z-index:5}
.ds-editleiste{align-self:center;flex:none;margin:12px 0;display:flex;align-items:center;gap:16px;padding:6px 6px 6px 18px;background:rgba(28,30,36,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px #2E3138;white-space:nowrap;max-width:calc(100% - 32px)}
.ds-editwer{display:flex;flex-direction:column;gap:1px;min-width:0}
.ds-gesp{font-size:12px;font-weight:500;color:#5BD08F;opacity:0;transition:opacity .25s;white-space:nowrap;margin-left:-6px}
.ds-gesp.an{opacity:1}
.ds-editwer b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.ds-editwer span{font-size:12px;color:var(--d-text2);font-variant-numeric:tabular-nums}
.ds-edseg{display:flex;gap:2px;background:var(--d-surface);border-radius:9px;padding:3px}
.ds-edseg button{all:unset;padding:6px 14px;border-radius:7px;font-size:13px;cursor:pointer;color:var(--d-text2)}
.ds-edseg button:hover{color:#FFFFFF}
.ds-edseg button[aria-current="true"]{color:#FFFFFF;background:var(--d-seg)}
.ds-fertig{all:unset;display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:17px;background:var(--d-blue);font-size:14px;font-weight:600;cursor:pointer;color:#FFFFFF}
.ds-fertig:hover{background:var(--d-blue-hover)}
.ds-fertig svg{width:15px;height:15px}
.ds-editscroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--d-seg) transparent;padding:12px 0 56px;display:flex;justify-content:center;user-select:text}
/* Im Bearbeiten so breit wie die Buehne hergibt (bis 920), nicht fest 640. */
.ds-editblatt{width:min(760px, calc(100% - 64px));flex:none;height:max-content}

/* Alle Vorgaenge auf einen Blick: ein Blatt ueber dem Stapel. */
.ds-alle{all:unset;cursor:pointer;border-radius:6px}
.ds-alle:hover{color:#FFFFFF;text-decoration:underline}
.dm-zahl{all:unset}
.ds-liste-hg{position:fixed;left:var(--nav-b,0px);top:0;right:0;bottom:0;z-index:58;background:rgba(5,6,8,.6);display:flex;align-items:center;justify-content:center;animation:dlAuf .18s ease}
@keyframes dlAuf{from{opacity:0}to{opacity:1}}
.ds-liste{width:600px;max-width:calc(100% - 32px);max-height:calc(100% - 64px);background:#1A1C21;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px #2A2D33;display:flex;flex-direction:column;overflow:hidden}
.dl-kopf{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 12px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--d-line);font-size:15px}
.dl-kopf>b{white-space:nowrap}
.dl-werkzeug{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dl-filter{grid-column:1/-1;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.dl-filter::-webkit-scrollbar{display:none}
.dl-filter button{all:unset;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12.5px;color:var(--d-text2);background:var(--d-surface);cursor:pointer;white-space:nowrap;flex:none}
.dl-filter button b{font-weight:600;color:var(--d-text3)}
.dl-filter button:hover{color:#FFFFFF}
.dl-filter button[aria-pressed="true"]{background:var(--d-blue-soft);color:#FFFFFF;box-shadow:inset 0 0 0 1px var(--d-blue-rand)}
.dl-filter button[aria-pressed="true"] b{color:var(--d-blue-light)}
.dl-name small em{font-style:normal;color:#FF8F87}
.dl-zeile.wichtig .dl-name{position:relative;padding-left:14px}
.dl-zeile.wichtig .dl-name::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--d-orange)}
.dl-suche{flex:1;min-width:150px;background:var(--d-surface);border:0;border-radius:9px;color:#FFFFFF;font:14px "Geist",system-ui,sans-serif;padding:8px 12px;outline:none}
.dl-suche:focus{box-shadow:0 0 0 2px var(--d-blue-rand)}
.dl-sort{display:flex;gap:2px;background:var(--d-surface);border-radius:9px;padding:3px}
.dl-sort button{all:unset;padding:5px 10px;border-radius:7px;font-size:12.5px;color:var(--d-text2);cursor:pointer;white-space:nowrap}
.dl-sort button:hover{color:#FFFFFF}
.dl-sort button[aria-pressed="true"]{background:var(--d-seg);color:#FFFFFF}
.dl-leer{padding:24px;text-align:center;color:var(--d-text2);font-size:14px}
/* Das Katalog-Fenster: Luft, klare Beschriftung, ein Feld je Frage
   (Raphael, 24.09.: „alles zusammengequetscht, ich weiss nicht, was was ist“). */
.ke-sheet{width:560px;max-width:calc(100% - 32px);padding:24px 26px 22px;box-sizing:border-box}
.ke-sheet h2{font-size:20px;margin:0}
.ke-sheet .tiny{font-size:13px;color:var(--d-text2)}
.ke-sheet .row{display:flex;flex-wrap:wrap;gap:14px}
.ke-sheet .field{margin:16px 0 0}
.ke-sheet .row .field{margin-top:16px}
.ke-sheet .field label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--d-text2);margin:0 0 6px}
.ke-sheet .field input{width:100%;box-sizing:border-box;height:44px;padding:0 12px;border-radius:10px;background:var(--d-surface);border:1px solid var(--d-line);color:#FFFFFF;font:15px "Geist",system-ui,sans-serif;outline:none}
.ke-sheet .field input:focus{border-color:var(--d-blue);box-shadow:0 0 0 3px var(--d-blue-soft)}
.ke-sheet .wegknoepfe{margin-top:22px;display:flex;justify-content:flex-end;gap:10px}
/* Senden ohne Panel: unten rechts auf der Buehne. */
.ds-frei{position:absolute;right:20px;bottom:20px;z-index:4}
.ds-frei .ds-los{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px 0 13px;border-radius:19px;background:var(--d-blue);color:#FFFFFF;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.ds-frei .ds-los:hover{background:var(--d-blue-hover)}
/* Versenden geht nicht: der Knopf schuettelt und ist kurz rot. */
.ds-los{transition:background .2s}
.ds-los.nein,.ds-frei .ds-los.nein{background:#B42318}
.ds-frei .ds-los svg{width:15px;height:15px}
.dl-x{all:unset;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--d-text2);font-size:20px;cursor:pointer}
.dl-x:hover{background:var(--d-surface);color:#FFFFFF}
.dl-rollen{overflow:auto;padding:6px;scrollbar-width:thin}
.dl-zeile{all:unset;box-sizing:border-box;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14px}
.dl-zeile:hover{background:var(--d-surface)}
.dl-zeile.jetzt{background:var(--d-blue-soft)}
.dl-name{display:flex;flex-direction:column;min-width:0;font-weight:600}
.dl-name small{font-weight:400;font-size:12px;color:var(--d-text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--d-text2);white-space:nowrap}
.dl-status i{width:7px;height:7px;border-radius:50%}
.dl-betrag{font-variant-numeric:tabular-nums;white-space:nowrap}
body.dna-mobil .ds-liste-hg{left:0}
/* Das E-Mail-Fenster ueber der Buehne */
.ds-post{position:fixed;left:var(--nav-b,0px);top:0;right:0;bottom:0;z-index:60;background:rgba(5,6,8,.6);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.ds-post.an{opacity:1;pointer-events:auto}
.ds-fenster{position:relative;width:720px;max-width:calc(100% - 32px);height:calc(100% - 48px);max-height:840px;background:#1A1C21;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px #2A2D33;
  display:flex;flex-direction:column;overflow:hidden;transform:translateY(14px);transition:transform .25s cubic-bezier(.2,.7,.2,1);user-select:text}
.ds-post.an .ds-fenster{transform:none}
.ds-fkopf{height:56px;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 20px;border-bottom:1px solid #2A2D33}
.ds-abbr{all:unset;justify-self:start;font-size:15px;color:var(--d-blue-light);cursor:pointer}
.ds-abbr:hover{color:#FFFFFF}
.ds-ftitel{font-size:15px;font-weight:600}
.ds-send{all:unset;justify-self:end;display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;border-radius:16px;background:var(--d-blue);font-size:14px;font-weight:600;cursor:pointer;color:#FFFFFF}
.ds-send:hover{background:var(--d-blue-hover)}
.ds-send[disabled]{opacity:.6;cursor:default}
.ds-send svg{width:15px;height:15px}
.ds-felder{flex:none;display:flex;flex-direction:column;padding:0 20px;font-size:14px}
.ds-feld{display:flex;align-items:center;gap:10px;height:44px;border-bottom:1px solid #2A2D33;min-width:0}
.ds-feld label{color:var(--d-text2);width:56px;flex:none}
.ds-chip{padding:3px 10px;border-radius:999px;background:#1E2A44;color:#DCE6FF;white-space:nowrap;flex:none;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.ds-feld input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--d-text);font:500 14px "Geist",sans-serif;padding:0}
.ds-feld input.adr{color:var(--d-text2);font-weight:400}
.ds-feld input.adr:focus{color:var(--d-text)}
.ds-feld input:disabled{color:var(--d-text2)}
.ds-cc{all:unset;color:var(--d-text3);font-size:13px;cursor:pointer;flex:none}
.ds-cc:hover{color:var(--d-text2)}
.ds-sonder{font-size:12px;color:var(--d-orange);white-space:nowrap;flex:none}
.ds-vorschau{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;background:#EDEDEA;padding:18px;color-scheme:light}
.ds-brief{max-width:600px;margin:0 auto;background:#FFFFFF;border-radius:10px;overflow:hidden;color:#1C1D20;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.ds-bkopf{display:flex;align-items:center;gap:10px;padding:14px 24px;background:#16171A;color:#FFFFFF}
.ds-blogo{width:30px;height:30px;border-radius:6px;background:#FFFFFF;color:#16171A;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex:none;overflow:hidden}
.ds-blogo img{max-width:100%;max-height:100%;object-fit:contain}
.ds-bname{font-size:14px;font-weight:600}
.ds-binnen{padding:20px 24px;display:flex;flex-direction:column;gap:14px;font-size:13.5px;line-height:1.55}
.ds-btext{width:100%;min-height:112px;resize:none;border:none;outline:none;padding:0;background:transparent;color:#1C1D20;font:13.5px/1.55 "Geist",sans-serif;border-radius:4px;display:block;overflow:hidden}
.ds-btext:focus{box-shadow:0 0 0 2px rgba(55,120,245,.25)}
.ds-bsum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:12px 16px;background:#F4F4F2;border-radius:8px;font-variant-numeric:tabular-nums}
.ds-bsum div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ds-bsum span{font-size:11px;color:#7A7C82}
.ds-bsum b{font-size:14px;font-weight:600}
.ds-bsum div:first-child b{font-size:16px;font-weight:700}
.ds-anh{display:flex;gap:8px;flex-wrap:wrap}
.ds-anhang{all:unset;box-sizing:border-box;flex:1;min-width:200px;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;border:1px solid #E4E4E0;border-radius:8px;cursor:pointer}
.ds-anhang:hover{background:#F7F7F5;border-color:#C9CAC5}
.ds-mini{width:28px;height:38px;flex:none;border-radius:2px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #D9DAD6;padding:5px 4px;box-sizing:border-box;display:flex;flex-direction:column;gap:3px}
.ds-mini i{height:2px;background:#D9DAD6}
.ds-mini i:first-child{height:3px;width:60%;background:#16171A}
.ds-anam{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.ds-anhang b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-anhang span{font-size:11px;color:#8A8C92}
.ds-gruss b{font-weight:600}
.ds-gruss span{color:#7A7C82}
.ds-bfuss{padding:12px 24px;background:#F7F7F5;font-size:10.5px;line-height:1.55;color:#8A8C92}
.ds-viewer{flex:1;display:flex;flex-direction:column;min-height:0;background:var(--d-stage)}
.ds-vkopf{height:44px;flex:none;display:flex;align-items:center;gap:12px;padding:0 20px;border-bottom:1px solid var(--d-line-soft);font-size:13px}
.ds-zur{all:unset;display:flex;align-items:center;gap:6px;color:var(--d-blue-light);cursor:pointer}
.ds-zur:hover{color:#FFFFFF}
.ds-zur svg{width:14px;height:14px}
.ds-vname{flex:1;text-align:center;color:#B9BDC6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-vseiten{color:var(--d-text3)}
.ds-vscroll{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--d-seg) transparent;padding:24px 0;display:flex;justify-content:center}
.ds-vblatt{width:520px;flex:none;height:max-content}

/* ------------------------------------------------------------ Konto */
.dk{min-height:100vh;box-sizing:border-box;padding:36px 48px 40px;display:flex;flex-direction:column;gap:44px;background:var(--d-bg);color:var(--d-text)}
.dk-kopf{display:flex;justify-content:space-between;align-items:center;gap:20px}
.dk-titel{font-size:28px;font-weight:600;letter-spacing:-.03em;margin:0}
.dk-jahr{display:flex;align-items:center;gap:16px;font-size:15px;font-variant-numeric:tabular-nums}
.dk-jahr button{all:unset;cursor:pointer;color:#868B95;padding:2px 6px;border-radius:6px}
.dk-jahr button:hover{color:#FFFFFF}
.dk-jahr button[disabled]{color:#33363D;cursor:default}
.dk-jahr b{font-weight:600}
.dk-stufen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.dk-stufe{all:unset;display:flex;flex-direction:column;gap:12px;min-width:0;position:relative;cursor:pointer;border-radius:8px}
.dk-stufe:focus-visible{outline:2px solid var(--d-blue-dark);outline-offset:6px}
/* Mittig auf der Hoehe der Zahl (Raphael, 24.09.): gemessen an den Ziffern
   selbst (Oberkante 46,5, Grundlinie 71,5 → Mitte 59), nicht an der Zeile. */
.dk-pfeil{position:absolute;right:-30px;top:49px;color:#33363D}
.dk-pfeil svg{width:20px;height:20px;display:block}
/* Ganze Pixel: Die Zeile war 22,5 hoch — Zahl und Balken lagen dann auf
   halben Pixeln und wurden weichgezeichnet; der helle Balken wirkte
   dicker und hoeher als der dunkle (Raphael, 24.09.: "unterschiedliche
   Hoehe"). */
.dk-sk{display:flex;align-items:center;gap:8px;white-space:nowrap;height:22px}
.dk-sk svg{width:20px;height:20px;flex:none}
.dk-sk .n{font-size:15px;font-weight:600}
.dk-sk .a{font-size:13px;color:#868B95;font-variant-numeric:tabular-nums}
.dk-wert{font-size:34px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.dk-stufe:hover .dk-wert{color:#FFFFFF}
/* Mit der Maus sieht man, dass es weitergeht (Raphael, 24.09.): eine
   Flaeche hinter der Stufe — ohne Link-Text, das Hervorheben reicht. */
.dk-stufe{isolation:isolate}
.dk-stufe::before{content:"";position:absolute;inset:-14px -12px -16px;z-index:-1;border-radius:14px;background:var(--d-surface);opacity:0;transition:opacity .18s}
@media (hover:hover){
  .dk-stufe:hover::before{opacity:1}
  .dk-stufe:hover .dk-bar{background:#23262D}
}
.dk-stufe:focus-visible::before{opacity:1}
.dk-bar{height:4px;border-radius:2px;background:#191B20}
/* Breiten und Hoehen fuehrt kontoBeleben Bild fuer Bild — keine
   CSS-Uebergaenge, die hinterherziehen. */
.dk-bar i{display:block;height:100%;border-radius:2px}
.dk-plus{position:absolute;z-index:2;pointer-events:none;white-space:nowrap;font-size:17px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;opacity:0}
.dk-chart{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;min-height:0}
.dk-chartkopf{display:flex;justify-content:flex-end;align-items:center;gap:18px;min-height:20px;font-size:13px;color:var(--d-text2)}
.dk-chartkopf button{all:unset;cursor:pointer;color:var(--d-blue-light)}
.dk-chartkopf button:hover{color:#FFFFFF}
.dk-legende{display:flex;align-items:center;gap:14px;margin-right:auto}
.dk-legende span{display:flex;align-items:center;gap:6px}
.dk-legende i{width:8px;height:8px;border-radius:2px}
.dk-balken{display:flex;align-items:flex-end;gap:14px;height:290px;border-bottom:1px solid var(--d-line-soft)}
.dk-m{all:unset;flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;cursor:pointer;min-width:0}
.dk-m.kommt{opacity:.35}
.dk-m:focus-visible{outline:2px solid var(--d-blue-dark);outline-offset:2px;border-radius:4px}
.dk-mwert{display:flex;flex-direction:column;align-items:center;gap:3px;padding-bottom:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dk-mwert b{font-size:17px;font-weight:600}
.dk-mwert span{font-size:12px;color:var(--d-hell)}
.dk-offen{width:100%;background:var(--d-hell);opacity:.4;border-radius:3px 3px 0 0;transition:opacity .2s}
.dk-m.an .dk-offen{opacity:.85}
.dk-bez{width:100%;background:#3468CC;transition:background .2s}
.dk-m.an .dk-bez{background:var(--d-blue-dark)}
.dk-m:hover .dk-bez{background:#3E78DE}
.dk-m.an:hover .dk-bez{background:var(--d-blue-dark)}
.dk-namen{display:flex;gap:14px}
.dk-namen span{flex:1;text-align:center;font-size:12px;color:#868B95}
.dk-namen span.an{color:#FFFFFF;font-weight:600}
/* Eine Datei aufs Konto ziehen liest den Kontoauszug ein — ohne Knopf. */
body.dna.zieht-datei .dk{outline:2px dashed var(--d-blue-dark);outline-offset:-12px}

/* ------------------------------------------------------ Einstellungen */
.de-einst{display:flex;min-height:100vh;background:var(--d-bg);color:var(--d-text)}
.de-sub{width:210px;flex:none;border-right:1px solid var(--d-line);padding:36px 14px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.de-subtitel{font-size:20px;font-weight:600;letter-spacing:-.02em;padding:0 12px 16px}
.de-gruppe{padding:18px 12px 6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--d-text3)}
.de-punkt{all:unset;position:relative;padding:8px 12px;font-size:14px;color:#A4A9B3;cursor:pointer;border-radius:6px}
.de-punkt:hover{color:#FFFFFF}
.de-punkt[aria-current="true"]{font-weight:600;color:#FFFFFF}
.de-punkt::before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:2px;border-radius:0 2px 2px 0;background:transparent}
.de-punkt[aria-current="true"]::before{background:var(--d-blue-dark)}
.de-punkt:focus-visible{outline:2px solid var(--d-blue-dark)}
.de-inhalt{flex:1;min-width:0;padding:36px 48px 80px;display:flex;flex-direction:column;gap:28px;max-width:1000px;box-sizing:border-box}
.de-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.de-kopf h1{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0}
.de-kopf p{font-size:14px;color:var(--d-text2);margin:4px 0 0}
.de-auto{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--d-text2);white-space:nowrap}
.de-auto i{width:6px;height:6px;border-radius:50%;background:var(--d-blue-dark);transition:transform .3s, box-shadow .3s}
.de-auto.frisch i{transform:scale(1.5);box-shadow:0 0 0 4px rgba(73,139,255,.18)}
.de-abschnitt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--d-text3);margin:6px 0 -14px}
.de-felder{display:flex;flex-direction:column;border-bottom:1px solid var(--d-surface2)}
.de-feld{display:grid;grid-template-columns:180px minmax(0,1fr) auto;align-items:center;gap:20px;min-height:54px;border-top:1px solid var(--d-surface2);padding:0 12px;margin:0 -12px;cursor:text}
.de-feld:hover{background:#121418}
.de-feld>label,.de-feld>.l{font-size:14px;color:var(--d-text2)}
.de-feld input,.de-feld textarea{background:transparent;border:0;outline:none;color:var(--d-text);font:15px "Geist",sans-serif;font-variant-numeric:tabular-nums;padding:0;width:100%;min-width:0;box-shadow:none}
.de-feld textarea{resize:vertical;padding:14px 0;line-height:1.5;min-height:54px}
.de-feld input::placeholder,.de-feld textarea::placeholder{color:#868B95}
.de-feld .aendern{font-size:13px;color:#767B85;white-space:nowrap}
.de-feld:focus-within .aendern{color:var(--d-blue-light)}
.de-feld .wert{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.de-feld .wert.leise{color:var(--d-text2)}
.de-feld .knopf,.de-feld label.knopf{all:unset;font-size:13px;color:var(--d-blue-light);cursor:pointer;white-space:nowrap}
.de-feld .knopf:hover{color:#FFFFFF}
.de-feld .knopfe{display:flex;gap:16px;align-items:center}
.de-feld.klick{cursor:pointer}
/* Einstellung Kontoauszug: eine Flaeche zum Waehlen oder Hineinziehen. */
.de-drop{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:190px;padding:28px;
  border:1.5px dashed #2E323A;border-radius:14px;background:#111317;color:var(--d-text2);cursor:pointer;text-align:center;transition:border-color .2s, background .2s, color .2s}
.de-drop svg{width:28px;height:28px;color:var(--d-blue-light);margin-bottom:4px}
.de-drop b{font-size:16px;font-weight:600;color:var(--d-text)}
.de-drop span{font-size:13px}
.de-drop:hover,body.zieht-datei .de-drop{border-color:var(--d-blue-dark);background:var(--d-blue-soft);color:#FFFFFF}
.de-drop:focus-within{outline:2px solid var(--d-blue-dark);outline-offset:2px}
.de-bild{display:flex;align-items:center;gap:14px;min-width:0}
.de-bild img{max-height:34px;max-width:140px;object-fit:contain;background:#FFFFFF;border-radius:4px;padding:3px}
.de-bild .leer{color:#767B85}
.de-schalter{all:unset;width:38px;height:22px;border-radius:11px;background:#2A2E36;position:relative;cursor:pointer;transition:background .2s;flex:none}
.de-schalter::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#FFFFFF;transition:transform .2s}
.de-schalter[aria-checked="true"]{background:var(--d-blue)}
.de-schalter[aria-checked="true"]::after{transform:translateX(16px)}
.de-briefkopf{display:flex;flex-direction:column;gap:12px}
.de-briefkopf>span{font-size:14px;color:var(--d-text2)}
.de-bk{min-height:88px;border-radius:4px;background:#FFFFFF;color:#111214;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 26px;box-shadow:0 10px 40px rgba(0,0,0,.4);box-sizing:border-box}
.de-bk>div{display:flex;gap:12px;align-items:center;min-width:0}
.de-bk .kz{font-size:22px;font-weight:700;letter-spacing:-.03em}
.de-bk img{max-height:44px;max-width:120px;object-fit:contain}
.de-bk .nm{font-size:14px;font-weight:600}
.de-bk .ad{font-size:12px;color:#6B6D72;text-align:right}
.de-version{font-size:12px;color:var(--d-text3);margin-top:24px}
/* Was aus den alten Seiten kommt (Preise, Kunden, E-Mail, Daten) steht im
   neuen Rahmen, ohne Karten.                                          */
.de-alt .einstkarte,.de-alt .karte,.de-alt .einstblock{background:none;border:0;box-shadow:none;padding-left:0;padding-right:0}
.de-alt .eyebrow{color:var(--d-text3);font-size:11px;letter-spacing:.08em}
.de-alt input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),.de-alt textarea,.de-alt select{background:var(--d-surface);border:1px solid var(--d-line-soft);color:var(--d-text);border-radius:8px}
.de-alt input:focus,.de-alt textarea:focus,.de-alt select:focus{border-color:var(--d-blue-rand);outline:none;box-shadow:0 0 0 3px rgba(55,120,245,.18)}
.de-alt .btn{background:var(--d-surface);border:1px solid var(--d-line-soft);color:var(--d-text)}
.de-alt .btn:hover{background:var(--d-surface2)}
.de-alt .btn.accent,.de-alt .btn.primary{background:var(--d-blue);border-color:var(--d-blue);color:#FFFFFF}
.de-alt .btn.ghost{background:transparent;border-color:transparent;color:var(--d-text2)}
.de-alt .chip[aria-pressed="true"]{background:var(--d-seg);color:#FFFFFF}
.de-alt .page-head,.de-alt .versionszeile{display:none}

/* Vor der Tuer (Anmeldename, Betrieb anlegen, Schluessel): dieselben blauen
   Knoepfe wie in der App — nicht das alte Gruen (Raphael, 24.09.). */
.tuer .btn.accent,.tuer .btn.primary{background:#3778F5;border-color:#3778F5;color:#FFFFFF}
.tuer .btn.accent:hover,.tuer .btn.primary:hover{background:#2F6BE0;border-color:#2F6BE0}
/* Die alten Seiten im neuen Rahmen: Knoepfe blau statt gruen, Fenster dunkel. */
body.dna .btn.accent,body.dna .btn.primary{background:var(--d-blue);border-color:var(--d-blue);color:#FFFFFF}
body.dna .btn.gruen{background:var(--d-blue);border-color:var(--d-blue);color:#FFFFFF}
body.dna .sheet{background:#1A1C21;box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px #2A2D33}
body.dna .overlay{background:rgba(5,6,8,.6)}

/* =========================================================== Das Blatt */
.dsh{container-type:inline-size;position:relative;width:100%;aspect-ratio:1/1.414;background:#FFFFFF;border-radius:3px;overflow:hidden;color:#16171A;
  font-family:"Geist",system-ui,sans-serif;box-shadow:0 12px 40px rgba(0,0,0,.45);color-scheme:light;text-align:left;-webkit-font-smoothing:antialiased;user-select:none}
.dsh.flach{box-shadow:none}
.dsh *,.dsh *::before,.dsh *::after{box-sizing:border-box}
.dsh-in{padding:6.5cqw 7cqw 5cqw;height:100%;display:flex;flex-direction:column;gap:3.2cqw;font-size:1.95cqw;line-height:1.4;font-variant-numeric:tabular-nums}
.dsh.k-order .dsh-in{gap:2.3cqw}
.dsh-luft{flex:1}
.dsh-stempel{position:absolute;top:15cqw;right:30cqw;transform:rotate(-8deg);border:.4cqw solid #3778F5;color:#3778F5;border-radius:1cqw;padding:1cqw 2.2cqw;font-size:2.4cqw;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85;z-index:2;pointer-events:none}
.dsh-band{margin:-6.5cqw -7cqw 0;padding:1.6cqw 7cqw;background:#FFF1E2;color:#9A4A0B;font-size:1.7cqw;font-weight:600;letter-spacing:.08em;text-transform:uppercase;display:flex;justify-content:space-between}
.dsh-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:3cqw}
.dsh-knopf{all:unset;cursor:pointer;border-radius:1cqw;min-width:0}
.dsh-knopf:hover{outline:.2cqw dashed rgba(55,120,245,.45);outline-offset:.8cqw}
.dsh-marke{display:flex;align-items:center;gap:2cqw;min-width:0}
.dsh-logo{width:7cqw;height:7cqw;border-radius:1.2cqw;background:#16171A;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:2.4cqw;font-weight:700;letter-spacing:-.02em;flex:none}
.dsh-logo.bild{background:none;width:auto;border-radius:0}
.dsh-logo.bild img{height:100%;width:auto;max-width:18cqw;object-fit:contain;display:block}
.dsh-name{display:flex;flex-direction:column;gap:.3cqw;min-width:0}
.dsh-name b{font-size:2.3cqw;font-weight:600;line-height:1.25}
.dsh-name span{font-size:1.6cqw;color:#7A7C82}
.dsh-titel{display:flex;flex-direction:column;align-items:flex-end;gap:.4cqw;flex:none}
.dsh-titel b{font-size:4.6cqw;font-weight:600;letter-spacing:-.03em;line-height:1}
.dsh.k-order .dsh-titel b{font-size:4.1cqw}
.dsh-titel span{font-size:1.7cqw;color:#7A7C82}
.dsh-adr{display:grid;grid-template-columns:1.25fr 1fr;gap:5cqw}
.dsh-an{display:flex;flex-direction:column;gap:1.4cqw;min-width:0}
.dsh-abs{font-size:1.45cqw;color:#8A8C92;border-bottom:.15cqw solid #D9DAD6;padding-bottom:.5cqw;align-self:flex-start;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsh-empf{display:flex;flex-direction:column;gap:.2cqw;font-size:2.1cqw;min-width:0}
.dsh-empf b{font-weight:600}
.dsh-link{all:unset;font-size:1.6cqw;color:#3778F5;cursor:pointer;align-self:flex-start;white-space:nowrap}
.dsh-link:hover{text-decoration:underline}
.dsh-meta{display:flex;flex-direction:column;gap:.55cqw;font-size:1.75cqw}
.dsh-meta div{display:flex;justify-content:space-between;gap:2cqw}
.dsh-meta span:first-child{color:#7A7C82;white-space:nowrap}
.dsh-meta span:last-child{font-weight:500;text-align:right}
.dsh-fz{display:flex;align-items:center;gap:2cqw;padding:1.4cqw 2cqw;background:#F4F4F2;border-radius:1cqw;font-size:1.8cqw}
.dsh-fz .l{font-size:1.45cqw;font-weight:600;letter-spacing:.08em;color:#7A7C82;flex:none}
.dsh-fz b{flex:1;font-weight:600;min-width:0}
.dsh-brief{display:flex;flex-direction:column;gap:.4cqw}
.dsh .leise{color:#35373C}
.dsh-tab,.dsh-tab3{display:flex;flex-direction:column}
.dsh-th,.dsh-tr{display:grid;grid-template-columns:5% var(--nrw,15%) 1fr 17% 14% 14%;gap:1cqw}
.dsh-th{padding:1cqw 0;border-bottom:.3cqw solid #16171A;font-size:1.45cqw;font-weight:600;letter-spacing:.06em;color:#7A7C82}
.dsh-th .m,.dsh-tr .m{text-align:center}
.dsh-th .r,.dsh-tr .r{text-align:right}
.dsh-tr{align-items:center;min-height:3.6cqw;border-bottom:.15cqw solid #ECECE9;position:relative}
.dsh.edit .dsh-th,.dsh.edit .dsh-tr{grid-template-columns:4% var(--nrw,13%) minmax(0,1fr) 22% 14% 13%}
.dsh.edit .dsh-tr .dsh-step.mengen .de,.dsh.edit .dsh-tr3 .dsh-step.mengen .de{width:4.4cqw}
.dsh.edit .dsh-step.mengen .mg{padding:0 .3cqw}
/* Der Preis so breit wie die Zahl, die Bezeichnung so hoch wie ihr Text —
   nichts abgeschnitten, nichts durchgezogen (Raphael, 24.09.). */
.dsh.edit .dsh-tr .ep .de.kurz{width:auto;min-width:6cqw;max-width:16cqw;text-align:right;field-sizing:content;padding:0 .4cqw}
.dsh textarea.de.zeile{display:inline-block;resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35;field-sizing:content;min-height:1.35em;padding:.1cqw 0}
.dsh.edit .dsh-tr{min-height:5.4cqw}
.dsh.k-order .dsh-tr{min-height:3cqw}
.dsh-tr .p{color:#8A8C92}
/* Die Artikelnummer ganz, nie abgeschnitten (Raphael, 24.09.): etwas kleiner,
   grau, und wenn sie laenger ist als die Spalte, bricht sie um. */
.dsh-tr .nr,.dsh-tr3 .nr{font-family:"Geist Mono",ui-monospace,monospace;font-size:1.5cqw;line-height:1.3;color:#55575D;white-space:nowrap;overflow:hidden}
.dsh-tr .t{min-width:0}
.dsh-tr .ep{color:#55575D;white-space:nowrap}
.dsh-tr .g{font-weight:500;white-space:nowrap}
.dsh-tr .m{white-space:nowrap}
.dsh-tr.fest{color:#55575D}
.dsh-summe{display:flex;justify-content:flex-end}
.dsh-summe>div{width:46%;display:flex;flex-direction:column;gap:.7cqw}
.dsh-summe>div>div{display:flex;justify-content:space-between}
.dsh-summe>div>div span:first-child{color:#55575D}
.dsh-summe .gesamt{align-items:baseline;border-top:.3cqw solid #16171A;padding-top:1cqw;margin-top:.4cqw}
.dsh-summe .gesamt span:first-child{font-weight:600;color:#16171A}
.dsh-summe .gesamt b{font-size:3.2cqw;font-weight:700;letter-spacing:-.02em}
.dsh-zahl{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;padding:2cqw 2.4cqw;background:#F4F4F2;border-radius:1cqw;font-size:1.7cqw}
.dsh-zahl .zl{display:flex;flex-direction:column;gap:.5cqw}
.dsh-zahl .zl b{font-weight:600}
.dsh-zahl .zl span{color:#55575D}
.dsh-zahl .zr{display:grid;grid-template-columns:auto 1fr;gap:.3cqw 2cqw}
.dsh-zahl .zr span:nth-child(odd){color:#7A7C82}
.dsh-dank{margin:0;font-size:1.45cqw;color:#7A7C82;line-height:1.45}
.dsh-kond{display:grid;grid-template-columns:24% 1fr;gap:1cqw 3cqw;padding:2cqw 2.4cqw;background:#F4F4F2;border-radius:1cqw;font-size:1.75cqw}
.dsh-kond>span:nth-child(odd){color:#7A7C82}
.dsh .fett{font-weight:600}
.dsh-block{display:flex;flex-direction:column;gap:.8cqw}
.dsh-block>.l{font-size:1.45cqw;font-weight:600;letter-spacing:.08em;color:#7A7C82}
.dsh-block.linie{padding-top:1cqw;border-top:.15cqw solid #ECECE9;gap:.6cqw}
.dsh-text span+span::before{content:" "}
.dsh-th3,.dsh-tr3{display:grid;grid-template-columns:14% 1fr var(--nrw,22%);gap:1cqw}
.dsh-th3{padding:1cqw 0;border-bottom:.3cqw solid #16171A;font-size:1.45cqw;font-weight:600;letter-spacing:.06em;color:#7A7C82}
.dsh-th3 .r{text-align:right}
.dsh-tr3{align-items:center;min-height:3.4cqw;border-bottom:.15cqw solid #ECECE9;position:relative}
.dsh-tr3 .nr{text-align:right}
.dsh-tr3.leer{color:#8A8C92}
.dsh.edit .dsh-th3,.dsh.edit .dsh-tr3{grid-template-columns:24% 1fr var(--nrw,20%)}
.dsh-zeiten{display:grid;grid-template-columns:repeat(var(--sp,5),minmax(0,1fr));gap:.3cqw 1cqw;padding:1.6cqw 2cqw;background:#F4F4F2;border-radius:1cqw;font-size:1.7cqw;align-items:center}
.dsh-zeiten .l{color:#7A7C82}
.dsh-zeiten .summe{color:#7A7C82;border-top:.15cqw solid #D9DAD6;padding-top:.5cqw}
/* Im Bearbeiten: sieben Spalten, nichts ueberlappt (Raphael, 24.09.). */
.dsh-zeiten.edit{gap:.8cqw .6cqw}
.dsh-zeiten.edit>span{min-width:0}
.dsh-zeiten.edit input[type=time].de{font-size:1.55cqw;text-align:left;width:100%;min-width:0}
.dsh-zeiten.edit .dsh-step.fein{padding:.15cqw .35cqw;gap:.15cqw;max-width:100%}
.dsh-zeiten.edit .dsh-step.fein .mg{padding:0 .2cqw;font-size:1.9cqw}
.dsh-zeiten.edit .dsh-step.fein .fein-feld{width:4.4cqw;font-size:1.55cqw}
.dsh-zeitkopf{display:flex;align-items:center;gap:2cqw;font-size:1.75cqw;margin-bottom:-1.6cqw}
.dsh-zeitkopf>span{color:#7A7C82}
.dsh-zeitkopf .de{width:34cqw}
.dsh-sig{display:grid;grid-template-columns:1fr 1fr;gap:6cqw}
.dsh-sig>div:last-child{display:flex;flex-direction:column;gap:.6cqw;font-size:1.6cqw;color:#7A7C82}
.dsh-siglinie{all:unset;display:flex;align-items:flex-end;min-height:6.4cqw;border-bottom:.2cqw solid #16171A;padding:0 1cqw .2cqw}
.dsh-siglinie .hand{font-family:"Herr Von Muellerhoff",cursive;font-size:6.2cqw;line-height:1;color:#1E2F73;white-space:nowrap}
.dsh-siglinie img{max-height:7cqw;max-width:100%;display:block}
.dsh-siglinie.klick{cursor:pointer;outline:.2cqw dashed rgba(55,120,245,.45);outline-offset:.4cqw;border-radius:.4cqw .4cqw 0 0}
.dsh-fs{display:grid;grid-template-columns:22% 1fr;gap:1.4cqw 3cqw}
.dsh-fs>.l{color:#7A7C82}
.dsh-pruef{display:flex;flex-direction:column;gap:1cqw}
.dsh-pruef>div{display:flex;gap:1.6cqw;align-items:center}
.dsh-pruef i{width:2.6cqw;height:2.6cqw;border-radius:50%;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:1.5cqw;font-weight:700;font-style:normal;flex:none}
.dsh-pruef .ok{color:#16171A}
.dsh-pruef .ok i{background:#3778F5}
.dsh-pruef .warn{color:#9A4A0B}
.dsh-pruef .warn i{background:#E07A1F}
.dsh-pruef small{color:#8A8C92;font-size:1.45cqw}
.dsh .notiz{font-style:italic;color:#55575D}
.dsh-fotos{display:flex;gap:1.4cqw;flex-wrap:wrap;align-items:center}
.dsh-fotos figure{margin:0;position:relative;width:14cqw;height:10cqw;border-radius:.8cqw;overflow:hidden;background:#F4F4F2}
.dsh-fotos img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;display:block}
.dsh-fotos .dsh-weg{left:auto;right:.6cqw;top:.6cqw;opacity:1;background:rgba(255,255,255,.9)}
.dsh-fuss{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw;padding-top:1.4cqw;border-top:.15cqw solid #D9DAD6;font-size:1.3cqw;line-height:1.5;color:#7A7C82}
/* Im Bearbeiten: gestrichelte Felder, Stepper, Kreuze, "+ Position". */
/* Im Bearbeiten: A4-Verhaeltnis als Mindesthoehe, laenger nur, wenn der
   Inhalt es braucht. Die Mindesthoehe steht auf .dsh-in, nicht auf .dsh —
   auf dem Blatt selbst zaehlt cqw gegen das Fenster, und das Blatt lief
   ins Unendliche (Raphael, 24.09.). */
.dsh.edit{aspect-ratio:auto;min-height:0;height:auto;overflow:visible;user-select:text}
.dsh.edit .dsh-in{height:auto;min-height:141.4cqw}
.dsh .de{font:inherit;color:inherit;background:transparent;border:0;border-radius:.4cqw;outline:.2cqw dashed rgba(55,120,245,.45);outline-offset:.4cqw;padding:0;margin:0;width:100%;min-width:0;line-height:inherit;letter-spacing:inherit}
.dsh .de:focus{outline:.25cqw solid #3778F5;background:#F5F8FF}
.dsh .de::placeholder{color:#B4B6BA}
.dsh textarea.de{resize:vertical;display:block}
.dsh .de.kurz{width:7cqw;text-align:center}
.dsh-empf .de{margin:.3cqw 0}
.dsh-empf .de.dsh-kname{font-weight:600}
.dsh-step{display:inline-flex;align-items:center;gap:.6cqw;border:.2cqw solid #D9DAD6;border-radius:9cqw;padding:.2cqw .9cqw;white-space:nowrap;background:#FFFFFF}
.dsh-step .mg{all:unset;cursor:pointer;color:#55575D;padding:0 .5cqw;font-size:2.2cqw;line-height:1.2;border-radius:50%}
.dsh-step .mg:hover{color:#3778F5}
.dsh-step .de{outline:none;font-weight:600;width:5.4cqw;text-align:center}
.dsh-step .de:focus{outline:none;background:#EEF3FE}
.dsh-step i{font-style:normal;color:#8A8C92;font-size:1.45cqw}
.dsh-step.regel{border-style:dashed}
.dsh-weg{all:unset;position:absolute;left:-4.6cqw;top:50%;margin-top:-1.5cqw;width:3cqw;height:3cqw;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#8A8C92;cursor:pointer;opacity:0;font-size:2.2cqw;transition:opacity .15s}
.dsh-tr:hover .dsh-weg,.dsh-tr3:hover .dsh-weg,.dsh-weg:focus-visible{opacity:1}
.dsh-weg:hover{background:#FDECEC;color:#C2410C}
/* Vom Zettel (KI, v12.20.0): markiert, was fehlt oder nicht sicher gelesen
   ist — bis es eingetragen oder mit ✓ bestaetigt ist. Seit v12.21.7 als
   Kaestchen wie das Eingabefeld: leer mit dem Namen des Felds, sonst um
   den gelesenen Wert; ein Tipp darauf oeffnet das Bearbeiten dort. Rot,
   was fehlt oder nicht im System ist; gelb, was nur unsicher gelesen ist. */
/* Eigene Namen (ki-…): „.frage“ gibt es im alten Stil schon, mit 25 px. */
.dsh .ki-feld{display:inline-block;max-width:100%;box-sizing:border-box;padding:0 .7cqw;margin:.1cqw 0;border-radius:.5cqw;box-shadow:inset 0 0 0 .2cqw #D92D20;background:rgba(217,45,32,.06);color:inherit;cursor:pointer;vertical-align:baseline}
.dsh .ki-feld:hover{background:rgba(217,45,32,.13)}
/* Die unsichtbare Rueckseite des Blatts faengt keine Tipps — sonst landete
   ein Tipp auf der Rechnung im Servicebericht (25.09.). */
.ds-seite[style*="opacity:0"],.ds-seite[style*="opacity: 0"]{pointer-events:none}
/* Das Ziel leuchtet auf, wenn man hingebracht wird (zielFokus). */
.dsh .leuchtet{animation:leucht 1.6s cubic-bezier(.2,.7,.2,1)}
.dsh .de.leuchtet{animation:leuchtFeld 1.6s cubic-bezier(.2,.7,.2,1)}
@keyframes leucht{0%{box-shadow:0 0 0 0 rgba(55,120,245,0)}12%{box-shadow:0 0 0 .5cqw rgba(55,120,245,.45), 0 0 3cqw .8cqw rgba(55,120,245,.3);background-color:#EEF3FE}100%{box-shadow:0 0 0 0 rgba(55,120,245,0)}}
@keyframes leuchtFeld{0%{outline-color:rgba(55,120,245,.45)}12%{outline:.3cqw solid #3778F5;outline-offset:.5cqw;background:#DCE8FF}100%{outline-color:#3778F5}}
.dm-form .leuchtet{animation:leuchtDunkel 1.6s cubic-bezier(.2,.7,.2,1)}
@keyframes leuchtDunkel{12%{box-shadow:0 0 0 3px var(--d-blue), 0 0 18px 4px rgba(55,120,245,.45);border-radius:10px}100%{box-shadow:0 0 0 0 rgba(55,120,245,0)}}
/* Alles auf dem Blatt ist ein Tipp ins Bearbeiten — genau an dieser Stelle
   (Raphael, 24.09.: „der erste Gedanke, wie etwas funktioniert, so
   funktioniert es“). Beim Zeigen ein Hauch Blau, sonst nichts.       */
.dsh:not(.edit) [data-ziel]:not(.ki-feld){cursor:pointer;border-radius:.4cqw}
.dsh:not(.edit) [data-ziel]:not(.ki-feld):hover{background:rgba(55,120,245,.07)}
.dsh .ki-feld.leer,.dsh .dsh-meta .ki-feld.leer{min-width:8cqw;color:rgba(180,35,24,.75);font-weight:400;font-style:normal}
.dsh .dsh-meta .ki-feld{color:inherit}
.dsh .ki-feld.gelb{box-shadow:inset 0 0 0 .2cqw #E0A100;background:rgba(250,200,20,.18)}
.dsh .ki-feld.gelb:hover{background:rgba(250,200,20,.32)}
.dsh .de.ki-fehlt{outline:.2cqw solid rgba(217,45,32,.85);background:rgba(217,45,32,.06)}
.dsh .de.ki-frage{outline:.2cqw solid #E0A100;background:rgba(250,200,20,.14)}
.dsh .de.ki-fehlt::placeholder{color:rgba(180,35,24,.6)}
.dsh .dsh-link.ki-fehlt{color:#B42318;padding:.2cqw .8cqw;border-radius:.5cqw;box-shadow:inset 0 0 0 .2cqw #D92D20;background:rgba(217,45,32,.06)}
/* Nur die Stelle ist markiert, nie der ganze Block (Raphael, 24.09.). */
.dsh-zeiten.ki-fehlt-block,.dsh-zeiten.ki-frage-block{cursor:pointer}
.dsh.edit .dsh-zeiten.ki-fehlt-block,.dsh.edit .dsh-zeiten.ki-frage-block{cursor:auto}
.dsh-text.ki-frage-block{background:rgba(250,200,20,.14);border-radius:.8cqw;box-shadow:inset 0 0 0 .2cqw #E0A100;padding:.8cqw 1.2cqw;cursor:pointer}
.dsh-okgruppe{display:inline-flex;align-items:center;gap:.8cqw;margin-left:1cqw;font-size:1.65cqw;font-weight:500;color:#8A6B00;white-space:nowrap;flex:none;align-self:flex-start}
.dsh-empf .dsh-okgruppe{margin:.6cqw 0 0}
.dsh-ok{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:.5cqw;height:3.4cqw;min-height:22px;padding:0 1.1cqw 0 .8cqw;vertical-align:middle;border-radius:9cqw;background:#3778F5;color:#FFFFFF;font-size:1.55cqw;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;cursor:pointer;flex:none}
.dsh-ok i{font-style:normal;font-size:1.8cqw;font-weight:700}
/* Der Kunde als Kreis mit Kuerzel: tippen wechselt den Kunden. */
.dsh-empf.mit-avatar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3cqw 1.2cqw;align-items:start}
.dsh-empf.mit-avatar>:not(.dsh-kavatar){grid-column:2}
/* Der Kreis mit Kuerzel, unten rechts ein Wechsel-Zeichen — ohne Text
   (Raphael, 24.09.: „vom Design her direkt verstaendlich“). */
.dsh-kavatar{all:unset;grid-row:1/5;position:relative;width:5.6cqw;height:5.6cqw;cursor:pointer;margin-top:.3cqw}
.dsh-kavatar i{position:absolute;inset:0;border-radius:50%;background:#EEF3FE;color:#3778F5;font-style:normal;font-weight:700;font-size:1.85cqw;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 .2cqw rgba(55,120,245,.35)}
.dsh-kavatar b{position:absolute;right:-.5cqw;bottom:-.5cqw;width:2.5cqw;height:2.5cqw;border-radius:50%;background:#3778F5;color:#FFFFFF;font-size:1.5cqw;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 .25cqw #FFFFFF}
.dsh-kavatar:hover i{background:#3778F5;color:#FFFFFF}
/* Die Einheit einer freien Zeile wechselt beim Tippen. */
/* Die Pille − Zahl + ist immer gleich breit; die Einheit steht daneben als
   eigenes Wort (Raphael, 24.09.: „Plus und Minus immer identisch, die
   Einheit separat daneben“). */
.dsh .einh{all:unset;cursor:pointer;color:#8A8C92;font-size:1.45cqw;padding:.2cqw .4cqw;margin-left:.5cqw;border-radius:.4cqw;vertical-align:middle;white-space:nowrap}
.dsh .einh:hover{color:#3778F5;background:#EEF3FE}
.dsh .einh-fest{font-style:normal;color:#8A8C92;font-size:1.45cqw;margin-left:.5cqw;vertical-align:middle;white-space:nowrap}
.dsh.edit .dsh-tr3>span:first-child{white-space:nowrap}
/* Von der Zeile in den Katalog. */
.dsh-katlink{all:unset;flex:none;width:3cqw;height:3cqw;display:inline-flex;align-items:center;justify-content:center;border-radius:.5cqw;color:#8A8C92;cursor:pointer}
.dsh-katlink:hover{color:#3778F5;background:#EEF3FE}
.dsh-katlink svg{width:1.9cqw;height:1.9cqw;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.dsh-kat i{font-style:normal;font-weight:700;margin-right:.35cqw}
.dsh-meta .de.datum{width:15cqw;text-align:right;font-weight:500;font-size:1.65cqw}
/* „Katalog“ an einer Zeile, die der Katalog nicht kennt: waehlen oder neu anlegen. */
.dsh-kat{all:unset;box-sizing:border-box;flex:none;font-size:1.35cqw;font-weight:600;color:#3778F5;padding:.35cqw .7cqw;border-radius:.6cqw;box-shadow:inset 0 0 0 .15cqw rgba(55,120,245,.45);cursor:pointer;white-space:nowrap;letter-spacing:0;text-transform:none;line-height:1.2}
.dsh-kat:hover{background:#EEF4FF}
.dsh.edit .dsh-tr .t,.dsh.edit .dsh-tr3>span:nth-child(2){display:flex;align-items:center;gap:.8cqw}
.dsh.edit .dsh-tr .t .de,.dsh.edit .dsh-tr3>span:nth-child(2) .de{flex:1 1 auto;width:auto;min-width:0}
/* Fahrzeug, Maschinennummer und Betriebsstunden als Felder in der Zeile. */
.dsh.edit .dsh-fz b{display:flex;flex-wrap:wrap;align-items:center;gap:.5cqw .8cqw}
.dsh-fz .de.fzname{width:auto;flex:1 1 12cqw;min-width:10cqw;max-width:24cqw}
.dsh-fz .de.fzsn{width:auto;flex:1 1 12cqw;min-width:11cqw;max-width:22cqw;font-family:"Geist Mono",ui-monospace,monospace;font-size:1.6cqw;font-weight:500}
.dsh-fz .de.kurz{flex:none}
.dsh-fz .fzl{font-weight:500;color:#55575D;white-space:nowrap}
.dsh-fz .fzbh{display:inline-flex;align-items:center;gap:.6cqw;white-space:nowrap;flex:none}
.dsh-ok:hover{background:#2F6BE0}
.dsh-empf .dsh-ok{margin:.4cqw 0 0}
.dsh-zeitfuss{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.dsh-okzeile{display:inline-flex;align-items:center;gap:.6cqw;margin-top:1.2cqw;font-size:1.6cqw;color:#B42318}
.dsh-plus{all:unset;box-sizing:border-box;margin-top:1.2cqw;padding:1.3cqw 2cqw;border:.2cqw dashed #CFD0CC;border-radius:1cqw;color:#55575D;font-weight:500;cursor:pointer;display:block}
.dsh-plus:hover{border-color:#3778F5;color:#3778F5}
.dsh-plus.klein{margin:0;padding:.8cqw 1.6cqw}
.dsh-fz .de.kurz{width:9cqw}

/* ============================================ iPad quer: Symbolleiste */
/* 900 bis 1199 Pixel (Handoff mobil, Nav "rail"): 76 breit, oben das
   App-Zeichen, dann Senden und Konto, unten Setup, Linie, Profilbild. */
/* Die Symbolleiste (iPad): die Leiste traegt .dn-schiene. */
body.dna #dna-nav.dn-schiene{width:76px;padding:20px 0 18px;align-items:center;gap:30px}
#dna-nav.dn-schiene .dn-logo{padding:0}
.dn-app{width:36px;height:36px;border-radius:9px;background:#111214;box-shadow:inset 0 0 0 1px #2A2E36;display:flex;align-items:center;justify-content:center}
.dn-app .dna{width:24px;height:24px}
#dna-nav.dn-schiene .dn-liste{gap:18px;align-self:stretch}
#dna-nav.dn-schiene .dn-item{flex-direction:column;gap:6px;height:auto;padding:2px 0;justify-content:center;font-size:11px;border-radius:0}
#dna-nav.dn-schiene .dn-item svg{width:22px;height:22px}
#dna-nav.dn-schiene .dn-item::before{left:0;top:2px;bottom:auto;height:20px}
#dna-nav.dn-schiene .dn-unten{align-items:center;align-self:stretch;gap:14px}
#dna-nav.dn-schiene .dn-strich{width:40px;margin:0}
#dna-nav.dn-schiene .dn-profil{padding:0}
#dna-nav.dn-schiene .dn-bild{width:38px;height:38px}
.dn-show.kurz{padding:0;justify-content:center}
.dn-show.kurz i{width:7px;height:7px;box-shadow:0 0 0 3px rgba(73,139,255,.15)}

/* ================================================ Telefon: Tab-Leiste */
/* Unter 900 Pixel (iPhone, iPad hochkant): unten drei Spalten — Senden,
   Profilbild (Profil und Einstellungen), Konto. Safe Areas beachtet.  */
body.dna-mobil #dna-nav{top:auto;left:0;right:0;bottom:0;width:auto;height:var(--tab-h);display:grid;grid-template-columns:repeat(3,1fr);align-items:start;
  padding:10px 0 0;gap:0;border-right:0;border-top:1px solid var(--d-line);background:var(--d-bg)}
body.dna-mobil #dna-nav .dn-item{flex-direction:column;justify-content:center;gap:4px;height:auto;padding:0;font-size:11px;color:#868B95;border-radius:0}
body.dna-mobil #dna-nav .dn-item::before{display:none}
body.dna-mobil #dna-nav .dn-item svg{width:23px;height:23px}
body.dna-mobil #dna-nav .dn-item[aria-current="true"]{color:#FFFFFF}
body.dna-mobil #dna-nav .dn-bild{width:36px;height:36px;justify-self:center;margin-top:2px}
body.dna-mobil #dna-nav .dn-bild[aria-current="true"]{box-shadow:0 0 0 2px var(--d-bg),0 0 0 3.5px var(--d-blue-dark)}
body.dna-mobil #view{margin:0;padding:calc(env(safe-area-inset-top) + 16px) 20px calc(var(--tab-h) + 32px)}
body.dna-mobil #view.dna-voll{padding:0;height:auto;overflow:visible}
body.dna-mobil #view.dna-seite{padding:calc(env(safe-area-inset-top) + 8px) 20px calc(var(--tab-h) + 22px)}
/* bottom:auto — sonst hing die Meldung oben und unten zugleich und wurde
   zum hohen Oval quer ueber den Bildschirm (v12.20.0). */
body.dna-mobil #toastHost .toast{left:50%;top:calc(env(safe-area-inset-top) + 12px);bottom:auto}
body.dna-mobil .overlay{padding-left:0}

/* Senden am Telefon */
.dna-senden.mobil{position:fixed;left:0;right:0;top:0;bottom:var(--tab-h);height:auto;flex-direction:column;padding-top:env(safe-area-inset-top)}
.dm-kopf{display:flex;justify-content:space-between;align-items:center;padding:10px 20px 12px;flex:none}
.dm-logo{all:unset;display:flex;align-items:center;gap:7px;cursor:pointer}
.dm-logo .dna{width:22px;height:22px;display:block}
.dm-logo .dn-wort{font-size:17px}
.dm-rechts{display:flex;align-items:center;gap:12px}
.dm-neu{all:unset;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--d-text2);background:var(--d-surface);cursor:pointer}
.dm-neu svg{width:16px;height:16px}
.dm-zahl{font-size:13px;color:var(--d-text2)}
.dm-zahl b{color:#FFFFFF;font-weight:600}
.dm-bar{height:2px;margin:0 20px;background:var(--d-line-soft);border-radius:1px;flex:none}
.dm-bar i{display:block;height:100%;background:var(--d-blue-dark);border-radius:1px;transition:width .3s}
.dna-senden.mobil .ds-buehne{flex:1;min-height:0;margin-top:14px}
.dna-senden.mobil .ds-stapel{margin-top:12px}
.dm-unten{padding:14px 20px 12px;display:flex;flex-direction:column;gap:14px;flex:none}
.ds-seg.dm-seg{margin:0}
.dm-seg button{flex:1;justify-content:center;height:32px;padding:0}
.dm-wer{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.dm-wer>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.dm-wer .r{align-items:flex-end;flex:none}
.dm-wer span{font-size:11px;font-weight:600;letter-spacing:.08em;color:#868B95}
.dm-wer b{font-size:17px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-wer .r b{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dna-senden.mobil .ds-hin{margin:-6px 0}
.dm-akt{display:grid;grid-template-columns:52px 1fr;gap:8px}
.dm-stift{all:unset;height:52px;border-radius:14px;background:var(--d-surface);display:flex;align-items:center;justify-content:center;color:#DCDFE5;cursor:pointer}
.dm-stift svg{width:20px;height:20px}
.dm-los{all:unset;height:52px;border-radius:14px;background:var(--d-blue);display:flex;align-items:center;justify-content:center;gap:9px;font-size:16px;font-weight:600;cursor:pointer;color:#FFFFFF}
.dm-los:active{background:var(--d-blue-hover)}
.dm-los svg{width:18px;height:18px}
.dna-senden.mobil .ds-toast{top:calc(env(safe-area-inset-top) + 58px);font-size:13px;padding:9px 14px}
.dna-senden.mobil .ds-vorn{touch-action:pan-y}

/* Bearbeiten am Telefon: bildschirmfuellend von unten, ein Formular */
.dm-edit{position:fixed;inset:0;z-index:50;background:var(--d-bg);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);animation:dm-hoch .38s cubic-bezier(.2,.7,.2,1);user-select:text}
.dm-edit.zu{transform:translateY(100%);transition:transform .3s cubic-bezier(.4,0,.8,.3)}
@keyframes dm-hoch{from{transform:translateY(100%)}to{transform:none}}
.dm-ekopf{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 12px;flex:none}
.dm-ekopf>span{font-size:16px;font-weight:600}
.dm-zur{all:unset;display:flex;align-items:center;gap:4px;font-size:16px;color:var(--d-blue-light);cursor:pointer}
.dm-zur svg{width:20px;height:20px}
.dm-fertig{all:unset;height:32px;padding:0 14px;border-radius:16px;background:var(--d-blue);display:flex;align-items:center;font-size:14px;font-weight:600;cursor:pointer;color:#FFFFFF}
.dm-ereiter{display:flex;gap:8px;margin:0 16px 8px;flex:none}
.dm-ereiter .dm-seg{flex:1}
.dm-auge{all:unset;width:38px;flex:none;border-radius:10px;background:var(--d-surface);display:flex;align-items:center;justify-content:center;color:var(--d-text2);cursor:pointer}
.dm-auge svg{width:19px;height:19px}
.dm-auge[aria-pressed="true"]{background:var(--d-seg);color:#FFFFFF}
.dm-escroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dm-evorschau{padding:12px 16px 24px;background:var(--d-stage);min-height:100%;box-sizing:border-box}
.dm-form{padding:8px 20px 24px;display:flex;flex-direction:column;position:relative}
.dm-info{display:flex;flex-direction:column;margin-bottom:10px}
.dm-zeile{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid var(--d-surface2);font-size:15px;cursor:pointer}
.dm-zeile>span:first-child{color:var(--d-text2);flex:none}
.dm-zeile .w{display:flex;align-items:center;gap:8px;min-width:0}
.dm-zeile .w span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-zeile .w i{color:#767B85;font-style:normal}
.dm-zeile[disabled]{cursor:default}
.dm-zeile.rot .w span,.dm-zeile.gelb .w span{padding:3px 10px;border-radius:8px}
.dm-zeile.rot .w span{color:#FFD1CC;box-shadow:inset 0 0 0 1.5px #FF8F87;background:rgba(217,45,32,.12)}
.dm-zeile.gelb .w span{color:#FBE3A6;box-shadow:inset 0 0 0 1.5px #F5C84C;background:rgba(245,200,76,.12)}
.dm-pin.rot,.dm-text.rot,.dm-zeit.rot{box-shadow:inset 0 0 0 1.5px #FF8F87;background:rgba(217,45,32,.12)}
.dm-pin.gelb,.dm-text.gelb,.dm-zeit.gelb{box-shadow:inset 0 0 0 1.5px #F5C84C;background:rgba(245,200,76,.12)}
.dm-pin.rot,.dm-pin.gelb{padding:4px 8px}
/* Bearbeiten am Handy, vom Zettel: was zu pruefen ist, und ein Tipp fuer alle unsicheren Stellen. */
.dm-zettel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 10px;padding:10px 12px;border-radius:12px;background:rgba(217,45,32,.12);box-shadow:inset 0 0 0 1px rgba(255,143,135,.25);font-size:13.5px;line-height:1.4;color:#FFD1CC}
.dm-zettel span{flex:1;min-width:180px}
.dm-zettel b{font-weight:600;color:#FFFFFF}
.dm-zettel button{all:unset;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;background:#3778F5;color:#FFFFFF;font-size:13px;font-weight:600;cursor:pointer}
.dm-zettel button svg{width:14px;height:14px}
.dm-l{font-size:11px;font-weight:600;letter-spacing:.08em;color:#868B95;padding:16px 0 4px}
.dm-pos{display:flex;flex-direction:column;gap:10px;padding:14px 0;border-bottom:1px solid var(--d-surface2)}
.dm-ptext{display:flex;align-items:center;gap:8px;font-size:15px;min-width:0}
.dm-pin{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--d-text);font:15px "Geist",sans-serif;padding:0;border-radius:6px}
.dm-pin:focus{background:var(--d-surface);box-shadow:0 0 0 6px var(--d-surface)}
.dm-weg{all:unset;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--d-text3);font-size:18px;cursor:pointer;flex:none}
.dm-pzeile{display:flex;align-items:center;gap:10px}
.dm-rund{all:unset;width:36px;height:36px;border-radius:50%;background:var(--d-surface);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;color:var(--d-text);flex:none}
.dm-rund:disabled{opacity:.35;cursor:default}
.dm-menge{min-width:64px;text-align:center;font-size:16px;font-weight:600;white-space:nowrap}
.dm-menge i{font-style:normal;font-weight:400;font-size:13px;color:var(--d-text2)}
.dm-betrag{flex:1;text-align:right;font-size:15px}
.dm-kat{all:unset;flex:none;font-size:12.5px;font-weight:600;color:var(--d-blue-light);padding:5px 9px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--d-blue-rand);cursor:pointer;white-space:nowrap}
.pb-tag{margin-left:auto;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:rgba(245,200,76,.15);color:#F5C84C;white-space:nowrap;flex:none}
.dm-preis{width:96px;background:rgba(217,45,32,.12);border:1.5px solid #FF8F87;border-radius:8px;color:var(--d-text);font:15px "Geist",sans-serif;padding:6px 8px;text-align:right;box-sizing:border-box}
.dm-plus{all:unset;display:flex;align-items:center;gap:8px;height:52px;font-size:15px;color:var(--d-blue-light);cursor:pointer}
.dm-text{min-height:48px;padding:12px 14px;border-radius:12px;background:var(--d-surface);font:15px/1.45 "Geist",sans-serif;border:0;outline:none;color:var(--d-text);resize:vertical;width:100%;box-sizing:border-box;margin-bottom:4px}
.dm-text:focus{box-shadow:0 0 0 2px var(--d-blue-rand)}
.dm-zeiten{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid var(--d-surface2);font-size:15px}
.dm-zeiten>span{color:var(--d-text2);flex:none}
.dm-tag{display:flex;align-items:center;gap:8px;min-height:54px;border-bottom:1px solid var(--d-surface2);font-size:15px}
.dm-tag>span{width:52px;color:var(--d-text2);flex:none}
.dm-tag i{color:var(--d-text3);font-style:normal}
.dm-tag b{margin-left:auto;font-weight:600;white-space:nowrap}
.dm-zeit{background:var(--d-surface);border:0;border-radius:10px;color:var(--d-text);font:15px "Geist",sans-serif;padding:8px 10px;color-scheme:dark;min-width:0;width:94px;box-sizing:border-box}
.dm-esumme{flex:none;display:flex;justify-content:space-between;align-items:center;padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--d-line);font-variant-numeric:tabular-nums}
.dm-esumme span{font-size:13px;color:var(--d-text2)}
.dm-esumme b{font-size:20px;font-weight:600}

/* Die E-Mail am Telefon: ein Blatt von unten, oben 48 frei, Griff. */
.ds-post.mobil{left:0;align-items:flex-end;background:rgba(0,0,0,.55);transition:opacity .3s}
.ds-post.mobil .ds-fenster{width:100%;max-width:none;height:calc(100% - 48px - env(safe-area-inset-top));max-height:none;border-radius:14px 14px 0 0;transform:translateY(105%);transition:transform .38s cubic-bezier(.2,.7,.2,1);box-shadow:none}
.ds-post.mobil.an .ds-fenster{transform:none}
.ds-griff{width:36px;height:5px;border-radius:3px;background:#3A3D44;align-self:center;margin-top:7px;flex:none}
.ds-post.mobil .ds-fkopf{height:48px;padding:0 16px;border-bottom:0}
.ds-post.mobil .ds-abbr,.ds-post.mobil .ds-ftitel{font-size:16px}
.ds-send.rund{width:34px;height:34px;padding:0;border-radius:50%;justify-content:center}
.ds-send.rund svg{width:17px;height:17px}
.ds-post.mobil .ds-felder{padding:0 16px;font-size:15px}
.ds-post.mobil .ds-feld label{width:auto}
.ds-post.mobil .ds-feld input{font-size:15px}
.ds-post.mobil .ds-chip{max-width:44%}
.ds-post.mobil .ds-vorschau{padding:14px 12px calc(30px + env(safe-area-inset-bottom))}
.ds-post.mobil .ds-binnen{padding:16px;font-size:14px}
.ds-bsum.zwei{grid-template-columns:1fr 1fr}
.ds-post.mobil .ds-anh{flex-direction:column}
.ds-post.mobil .ds-anhang{min-width:0;padding:10px 12px;border-radius:10px;flex:none;width:100%}
.ds-anhang em{margin-left:auto;font-style:normal;color:#B0B2B7;font-size:16px;flex:none}
.ds-post.mobil .ds-vscroll{padding:14px 12px 30px}
.ds-post.mobil .ds-vblatt{width:100%}
.ds-post.mobil .ds-sonder{display:none}
.ds-send.laeuft{opacity:.7}

/* Konto am Telefon: die Stufen untereinander, der Monat, die Balken */
.dk.mobil{padding:0;gap:0;min-height:auto}
.dk.mobil .dk-kopf{padding:8px 0 20px}
.dk.mobil .dk-titel{font-size:30px}
.dk.mobil .dk-jahr b{font-weight:600}
.dk.mobil .dk-stufen{display:flex;flex-direction:column;gap:0}
.dk.mobil .dk-stufe{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:9px 12px;padding:14px 0;border-top:1px solid var(--d-surface2)}
.dk.mobil .dk-stufe:first-child{border-top-color:transparent}
.dk.mobil .dk-sk{gap:9px}
.dk.mobil .dk-sk svg{width:19px;height:19px}
.dk.mobil .dk-sk .a{font-weight:400}
.dk.mobil .dk-wert{font-size:24px;letter-spacing:-.02em}
.dk.mobil .dk-bar{grid-column:1/-1}
.dk.mobil .dk-chart{gap:10px;margin-top:22px}
.dk-sel{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-end;padding:0 0 14px;border-bottom:1px solid var(--d-surface2);margin-bottom:10px;cursor:pointer}
.dk-sel .l,.dk-sel .r{display:flex;flex-direction:column;gap:6px}
.dk-sel .r{align-items:flex-end}
.dk-sel .l>span,.dk-sel .r>span{font-size:11px;font-weight:600;letter-spacing:.08em;color:#868B95}
.dk-sel .l b{font-size:26px;font-weight:600;letter-spacing:-.02em}
.dk-sel .r b{font-size:18px;font-weight:600;color:var(--d-hell)}
.dk.mobil .dk-balken{height:170px;gap:6px}
.dk.mobil .dk-namen{gap:6px}
.dk.mobil .dk-namen span{font-size:10px}

/* Einstellungen am Telefon: erst die Liste, dann die Seite */
.de-einst.mobil{display:block;min-height:auto}
.de-einst.mobil .de-sub{width:auto;border:0;padding:0;position:static;height:auto;overflow:visible}
.de-einst.mobil .de-subtitel{font-size:30px;padding:8px 0 6px;letter-spacing:-.03em}
.de-einst.mobil .de-gruppe{padding:22px 0 6px}
.de-einst.mobil .de-punkt{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--d-surface2);border-radius:0;font-size:16px;color:var(--d-text)}
.de-einst.mobil .de-punkt .de-s{grid-column:1;font-size:13px;color:var(--d-text2)}
.de-einst.mobil .de-punkt svg{grid-column:2;grid-row:1/3;width:16px;height:16px;color:#767B85}
.de-einst.mobil .de-punkt::before{display:none}
.de-einst.mobil .de-inhalt{padding:0;gap:22px}
.de-zurueck{all:unset;display:flex;align-items:center;gap:4px;color:var(--d-blue-light);font-size:16px;cursor:pointer;margin-bottom:-6px}
.de-zurueck svg{width:20px;height:20px}
.de-einst.mobil .de-kopf{flex-direction:column;gap:8px}
.de-einst.mobil .de-feld{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 0;margin:0;min-height:0}
.de-einst.mobil .de-feld>.l{grid-column:1/-1;font-size:12.5px}
.de-einst.mobil .de-version{margin-top:28px}

/* ------------------------------------------------ Kleinigkeiten */
.de-chips{display:flex;gap:6px;flex-wrap:wrap}
.de-chip{all:unset;padding:6px 12px;border-radius:8px;background:var(--d-surface);color:var(--d-text2);font-size:13px;cursor:pointer}
.de-chip:hover{color:#FFFFFF}
.de-chip[aria-pressed="true"]{background:var(--d-seg);color:#FFFFFF}
.de-bild img.rund{width:34px;height:34px;border-radius:50%;padding:0;object-fit:cover;background:none}
.de-feld.hoch{align-items:start}
.de-feld.hoch>.l,.de-feld.hoch>.aendern{padding-top:17px}
.de-feld .wert .leise{color:var(--d-text2)}
body.dna .vorschlaege.zeiten button.aktiv{background:#E6EEFE;color:#1D4ED8}
.dm-form .vorschlaege{min-width:240px}
/* Das Intro landet im Zeichen der Seitenleiste bzw. im Kopf am Telefon. */
body.intro-an #dna-nav .dn-logo .dna,body.intro-an #dna-nav .dn-app,body.intro-an #dna-nav .dn-wort,body.intro-an .dm-logo{opacity:0}
/* Genau einmal, direkt nach dem Intro — danach steht die Marke still,
   auch wenn die Leiste neu entsteht (marke-ruht, v12.2.1). */
body.intro-fertig:not(.marke-ruht) #dna-nav .dn-wort{animation:markeKommt .55s cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion: reduce){ .ds-blatt,.ds-vorn,.ds-dreh,.ds-toast,.ds-post,.ds-fenster,.ds-panel,.ds-panel-in{transition:none!important} .dm-edit,.ds-editlage{animation:none} }

/* Die alte Pille (.mengen) traegt Rand und weissen Grund — im Formular
   am Telefon und in den Steppern des Blatts gilt das neue Aussehen.   */
.dm-pzeile.mengen{display:flex;background:none;border:0;padding:0;margin:0;border-radius:0}
.dsh-step.mengen{margin:0;padding:.2cqw .9cqw;border:.2cqw solid #D9DAD6;background:#FFFFFF}
.dsh-step.mengen.regel{border-style:dashed}
.dsh-step.mengen input.de,.dsh-step.mengen input.regel-feld,.dsh-step.mengen input.fein-feld{font-size:inherit;color:#16171A;width:5.4cqw}
.dna-senden.mobil{z-index:1}
.dna-senden.mobil.edit{z-index:55}

/* Kacheln im Konto (Monat, Stufe) und die grosse Rechnung: die neuen Blaetter. */
.dna-kacheln .mini .blattfenster{height:212px;background:#FFFFFF}
.dna-kacheln .mini .blattfenster::after{display:none}
.dsh-mini .dsh{border-radius:0}
.dna-blattgross{max-width:760px;margin:0 auto 8px}
body.dna .blattwahl [aria-current="true"]{color:#FFFFFF}

/* Das E-Mail-Fenster wie ein eigenes Fenster (v12.1.0): verschieben an der
   Kopfzeile, Groesse an jedem Rand und jeder Ecke, Vollbild. */
.ds-post.frei{display:block}
.ds-post.frei .ds-fenster{position:absolute;max-width:none;max-height:none;margin:0}
.ds-post.frei:not(.voll) .ds-fenster{left:calc(50% - 360px);top:24px;width:720px;height:min(840px, calc(100% - 48px))}
.ds-post.voll{left:0;z-index:95;background:var(--d-stage)}
.ds-post.voll .ds-fenster{left:0;top:0;right:0;bottom:0;width:auto;height:auto;border-radius:0;box-shadow:none}
.ds-post:not(.mobil):not(.voll) .ds-fkopf{cursor:grab}
.ds-post.zieht,.ds-post.zieht *{cursor:grabbing!important;user-select:none}
.ds-post.zieht .ds-fenster{transition:none}
.ds-fknoepfe{justify-self:end;display:flex;align-items:center;gap:4px}
.ds-fk{all:unset;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--d-text2);cursor:pointer}
.ds-fk:hover{background:var(--d-surface2);color:#FFFFFF}
.ds-fk svg{width:16px;height:16px}
.ds-fk:focus-visible{outline:2px solid var(--d-blue-dark)}
.ds-fknoepfe .ds-send{margin-left:6px}
.ds-ecke{position:absolute;right:2px;bottom:2px;width:18px;height:18px;cursor:nwse-resize;z-index:4;
  background:linear-gradient(135deg,transparent 0 55%,#767B85 55% 62%,transparent 62% 72%,#767B85 72% 79%,transparent 79%)}
.ds-ecke:hover{background:linear-gradient(135deg,transparent 0 55%,#8B8F99 55% 62%,transparent 62% 72%,#8B8F99 72% 79%,transparent 79%)}
/* Im grossen Fenster darf die Vorschau des Dokuments mitwachsen. */
.ds-vblatt{width:min(920px, calc(100% - 48px))}

/* Monate: ein Klick fuehrt zu den Rechnungen des Monats (v12.1.0). Die
   Saeule und der Name sind ein Knopf; mit der Maus wird der Monat heller
   und sein Betrag erscheint darueber — ohne Link-Text (Raphael, 24.09.). */
.dk-balken{--sh:290px;height:auto;border-bottom:0;position:relative;align-items:stretch}
.dk-balken::after{content:"";position:absolute;left:0;right:0;top:var(--sh);height:1px;background:var(--d-line-soft);pointer-events:none}
.dk-m{height:auto;justify-content:flex-start;gap:0;border-radius:6px}
.dk-saeule{height:var(--sh);width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;position:relative}
.dk-mname{margin-top:12px;font-size:12px;color:#868B95;text-align:center;transition:color .15s}
.dk-m.an .dk-mname{color:#FFFFFF;font-weight:600}
/* Die Zahlen stehen ueber jedem Monat mit offenen Rechnungen; ein
   abgeschlossener Monat zeigt sie nur unter der Maus (Raphael, 24.09.). */
.dk-saeule .dk-mwert{padding-bottom:10px;opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none}
.dk-m.hatoffen .dk-mwert,.dk-m:hover .dk-mwert,.dk-m:focus-visible .dk-mwert{visibility:visible;opacity:1}
.dk-mwert i{font-style:normal}
/* Stehen mehrere Monate nebeneinander beschriftet, duerfen sie sich nicht
   beruehren: schmaler wird die Schrift kleiner, dann faellt das Wort
   „offen" weg — der Betrag traegt die Farbe des offenen Teils. */
.dk-balken{container-type:inline-size}
@container (max-width:1120px){
  .dk-mwert b{font-size:14px}
  .dk-mwert .w{display:none}
}
@container (max-width:800px){
  .dk-mwert b{font-size:12.5px}
  .dk-mwert span{font-size:11px}
}
.dk-m:hover .dk-bez{background:#5B97FF}
.dk-m:hover .dk-offen{opacity:.75}
.dk-m:hover .dk-mname{color:#FFFFFF}
.dk-m:hover{opacity:1}
.dk-m.kommt:hover .dk-mname{color:#B9BDC6}
.dk.mobil .dk-balken{--sh:170px;height:auto;gap:6px}
.dk.mobil .dk-mname{margin-top:10px;font-size:10px}

/* Groesse an jedem Rand und jeder Ecke (v12.2.0): unsichtbare Griffe am
   Rahmen, der Mauszeiger zeigt die Richtung. Die Rille unten rechts bleibt
   als Hinweis. */
.ds-rand{position:absolute;z-index:6}
.ds-rand.r-n{top:0;left:12px;right:12px;height:6px;cursor:ns-resize}
.ds-rand.r-s{bottom:0;left:12px;right:12px;height:6px;cursor:ns-resize}
.ds-rand.r-e{right:0;top:12px;bottom:12px;width:6px;cursor:ew-resize}
.ds-rand.r-w{left:0;top:12px;bottom:12px;width:6px;cursor:ew-resize}
.ds-rand.r-nw{top:0;left:0;width:14px;height:14px;cursor:nwse-resize}
.ds-rand.r-ne{top:0;right:0;width:14px;height:14px;cursor:nesw-resize}
.ds-rand.r-sw{bottom:0;left:0;width:14px;height:14px;cursor:nesw-resize}
.ds-rand.r-se{bottom:0;right:0;width:18px;height:18px;cursor:nwse-resize}
.ds-ecke{pointer-events:none}
/* Waehrend des Ziehens zeigt der Mauszeiger ueberall die Richtung. Eigene
   Klassen (zr-…): Die Griff-Klassen r-… trugen Lage und Groesse mit und
   machten die ganze Flaeche zum schmalen Streifen — das Fenster sprang
   waehrend des Ziehens weg (v12.4.2). */
.ds-post.zieht.zr-n,.ds-post.zieht.zr-n *,.ds-post.zieht.zr-s,.ds-post.zieht.zr-s *{cursor:ns-resize!important}
.ds-post.zieht.zr-e,.ds-post.zieht.zr-e *,.ds-post.zieht.zr-w,.ds-post.zieht.zr-w *{cursor:ew-resize!important}
.ds-post.zieht.zr-nw,.ds-post.zieht.zr-nw *,.ds-post.zieht.zr-se,.ds-post.zieht.zr-se *{cursor:nwse-resize!important}
.ds-post.zieht.zr-ne,.ds-post.zieht.zr-ne *,.ds-post.zieht.zr-sw,.ds-post.zieht.zr-sw *{cursor:nesw-resize!important}
.ds-post img{-webkit-user-drag:none;user-select:none}
.ds-fkopf,.ds-rand{touch-action:none}

/* ------------------------------------------------ Die Tuer (Anmeldung v2) */
/* Aus dem Handoff "design_handoff_invoicedna_login_v2" (Claude Design,
   24.09.2026): schwarzer Grund #0B0C0F, zwei stille Sonnen, Staebe in drei
   Ebenen; mittig Marke, Name, sechs PIN-Kaestchen, Statuszeile, zwei Wege;
   unten das Schloss. Der Grund haengt als #tuer-hg am body und bleibt
   stehen, waehrend die Tuer darueber neu gezeichnet wird.               */
body.tuer{background:#0B0C0F}
body.tuer .topbar{visibility:hidden}
body.tuer .schreibgrund,body.tuer::after{display:none!important}
/* Unter #view (das eine eigene Ebene 1 hat), ueber dem Grund des body. */
#tuer-hg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0B0C0F;pointer-events:none}
.th-band{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(50% - 230px),transparent calc(50% - 190px),transparent calc(50% + 190px),#000 calc(50% + 230px)),linear-gradient(0deg,transparent 0,transparent 44px,#000 70px);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 0,#000 calc(50% - 230px),transparent calc(50% - 190px),transparent calc(50% + 190px),#000 calc(50% + 230px)),linear-gradient(0deg,transparent 0,transparent 44px,#000 70px);
  mask-composite:intersect}
.th-e{position:absolute;inset:0;overflow:hidden}
.th-e.blau{
  -webkit-mask-image:radial-gradient(ellipse 44% 60% at 50% 20%,#000 0%,rgba(0,0,0,.92) 14%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.22) 56%,rgba(0,0,0,.06) 74%,transparent 88%),radial-gradient(ellipse 44% 60% at 50% 84%,#000 0%,rgba(0,0,0,.92) 14%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.22) 56%,rgba(0,0,0,.06) 74%,transparent 88%);
  mask-image:radial-gradient(ellipse 44% 60% at 50% 20%,#000 0%,rgba(0,0,0,.92) 14%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.22) 56%,rgba(0,0,0,.06) 74%,transparent 88%),radial-gradient(ellipse 44% 60% at 50% 84%,#000 0%,rgba(0,0,0,.92) 14%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.22) 56%,rgba(0,0,0,.06) 74%,transparent 88%)}
.th-e.weiss{
  -webkit-mask-image:radial-gradient(ellipse 24% 40% at 50% 20%,#000 0%,rgba(0,0,0,.75) 30%,rgba(0,0,0,.3) 62%,transparent 100%),radial-gradient(ellipse 24% 40% at 50% 84%,#000 0%,rgba(0,0,0,.75) 30%,rgba(0,0,0,.3) 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 24% 40% at 50% 20%,#000 0%,rgba(0,0,0,.75) 30%,rgba(0,0,0,.3) 62%,transparent 100%),radial-gradient(ellipse 24% 40% at 50% 84%,#000 0%,rgba(0,0,0,.75) 30%,rgba(0,0,0,.3) 62%,transparent 100%)}
.th-s{position:absolute;left:0;height:14px;margin-top:-1px;will-change:transform;
  animation-name:tuerFlug;animation-timing-function:linear;animation-iteration-count:infinite}
.th-s i{position:absolute;left:0;right:0}
.th-e.dunkel .th-s i{background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.02) 45%,rgba(255,255,255,.04) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.14)}
.th-e.blau .th-s i{background:linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.06) 38%,rgba(255,255,255,0) 50%),linear-gradient(90deg,#2F6BE8 0%,#498BFF 60%,#6FA3FF 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(120,170,255,.6),inset 0 -2px 3px rgba(20,60,170,.35),0 0 6px rgba(73,139,255,.9),0 0 22px rgba(73,139,255,.55),0 0 56px rgba(73,139,255,.3)}
.th-e.weiss .th-s i{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(240,246,255,.75) 50%,rgba(220,234,255,.55) 100%);
  box-shadow:0 0 10px rgba(255,255,255,.55),0 0 30px rgba(200,222,255,.3)}
@keyframes tuerFlug{from{transform:translateX(-320px)}to{transform:translateX(calc(100vw + 40px))}}
@media (prefers-reduced-motion:reduce){.th-s{animation-play-state:paused}}

.tuer{position:fixed;inset:0;z-index:5;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 20px;box-sizing:border-box;color:#F2F3F5;font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.tuer-in{position:relative;width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:40px}
.tuer-in.weit{max-width:430px}
.tuer-marke{display:flex;align-items:center;gap:10px}
.tuer-marke svg{width:34px;height:34px;display:block}
.tuer-wort{font-size:26px;letter-spacing:-.045em;line-height:1}
.tuer-wort i{font-style:normal;font-weight:500} .tuer-wort b{font-weight:700}
.tuer-form{width:100%;display:flex;flex-direction:column;gap:12px;margin:0}
.tuer-feld{display:flex;align-items:center;gap:12px;height:56px;padding:0 18px;border-radius:16px;background:#17191F;
  box-shadow:inset 0 0 0 1px #3A3F48;color:#868B95;transition:box-shadow .15s;cursor:text}
.tuer-feld svg{width:18px;height:18px;flex:none}
.tuer-feld:focus-within{box-shadow:inset 0 0 0 1.5px #498BFF}
.tuer-feld.fehler{box-shadow:inset 0 0 0 1px #F2A65A}
.tuer-feld input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;color:#F2F3F5;font:500 16px 'Geist',system-ui,sans-serif;outline:none;box-shadow:none}
/* Nur der aeussere Rand zeigt den Fokus — die allgemeinen Feld-Regeln der
   App (Rahmen, Radius, Schatten beim Fokus) gelten hier nicht; sie legten
   ein zweites Kaestchen ins Feld (Raphael, 24.09.).                   */
.tuer .tuer-feld input,.tuer .tuer-feld input:focus,.tuer .tuer-feld input:focus-visible{
  width:auto;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;padding:0}
/* Vom Browser ausgefuellt: dieselbe Flaeche wie das Feld, keine eigene Farbe. */
.tuer .tuer-feld input:-webkit-autofill,.tuer .tuer-feld input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 60px #16181D inset;box-shadow:0 0 0 60px #16181D inset;-webkit-text-fill-color:#F2F3F5;caret-color:#F2F3F5;transition:background-color 9999s}
.tuer-feld input::placeholder{color:#868B95}
/* Der Pfeil zum Code-Senden (beim ersten Mal): still, bis die Adresse
   stimmt, dann blau wie die Hauptaktionen. */
.tuer-feld.mit-knopf{padding-right:12px}
.tuer-senden{all:unset;box-sizing:border-box;flex:none;width:32px;height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:#262A31;color:#A4A9B3;cursor:pointer;transition:background .15s,color .15s}
.tuer-feld .tuer-senden svg{width:16px;height:16px}
.tuer-senden:hover{color:#FFFFFF}
.tuer-senden.bereit{background:#3778F5;color:#FFFFFF}
.tuer-senden.bereit:hover{background:#2F6BE0}
.tuer-senden:focus-visible{outline:2px solid #498BFF;outline-offset:2px}
.tuer-senden:disabled{cursor:default;opacity:.5}
.tuer-schritt{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0 6px}
.tuer-schritt>span{font-size:13px;color:#A4A9B3}
.tuer-punkte{display:flex;align-items:center;gap:6px}
.tuer-punkte i{width:6px;height:6px;border-radius:3px;background:#2A2E36;transition:width .25s,background .25s}
.tuer-punkte i.war{background:#498BFF}
.tuer-punkte i.an{width:22px;background:#498BFF}
.tuer-pin{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.tuer-pin .tz{height:56px;border-radius:14px;background:#17191F;box-shadow:inset 0 0 0 1px #3A3F48;display:flex;align-items:center;justify-content:center;transition:box-shadow .15s}
.tuer-pin .tz.voll{box-shadow:inset 0 0 0 1px #4A505B}
.tuer-pin .tz.an{box-shadow:inset 0 0 0 1.5px #498BFF}
.tuer-pin.fehler .tz{box-shadow:inset 0 0 0 1px #F2A65A}
.tuer-pin .punkt{width:10px;height:10px;border-radius:50%;background:#FFFFFF}
.tuer-pin .ziffer{font-size:22px;font-weight:600;color:#F2F3F5}
.tuer-pin .strich{width:2px;height:22px;border-radius:1px;background:#498BFF;animation:tuerStrich 1s steps(1) infinite}
@keyframes tuerStrich{0%,100%{opacity:1}50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tuer-pin .strich{animation:none}}
.tuer-pin input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;padding:0;margin:0;font-size:16px;cursor:pointer;caret-color:transparent;background:transparent;color:transparent}
.tuer-pin input:disabled{cursor:default}
.tuer-unsichtbar{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden;border:0;padding:0}
.tuer-status{display:flex;justify-content:center;align-items:center;min-height:22px;font-size:13px;text-align:center}
.tuer-status .tf-fehler{color:#F2A65A}
.tuer-status .tf-hinweis{color:#A4A9B3}
.tuer-status .tf-dreh{width:16px;height:16px;animation:tuerDreh .8s linear infinite}
@keyframes tuerDreh{to{transform:rotate(360deg)}}
/* „Angemeldet bleiben“ als Haekchen unter den Kaestchen (v12.14.0). */
/* Leise und mit Luft nach unten, damit es nicht an den Wegen darunter klebt. */
.tuer-bleib{position:relative;align-self:center;display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 22px;font-size:13px;color:#868B95;cursor:pointer;user-select:none;-webkit-user-select:none}
.tuer-bleib:hover{color:#FFFFFF}
.tuer-bleib input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.tb-box{width:16px;height:16px;flex:none;box-sizing:border-box;border-radius:4.5px;box-shadow:inset 0 0 0 1.5px #4A505B;display:flex;align-items:center;justify-content:center;color:transparent;transition:background .15s,box-shadow .15s,color .15s}
.tb-box svg{width:11px;height:11px}
.tuer-bleib input:checked+.tb-box{background:#3778F5;box-shadow:none;color:#FFFFFF}
.tuer-bleib input:focus-visible+.tb-box{outline:2px solid #498BFF;outline-offset:2px}
.tuer-bleib input:disabled+.tb-box{opacity:.5}
.tuer-fuss button:focus-visible{outline:2px solid #498BFF;outline-offset:2px}
.tuer-fuss{display:flex;justify-content:space-between;align-items:center;font-size:13px;min-height:20px}
.tuer-fuss button{all:unset;display:flex;align-items:center;gap:6px;color:#A4A9B3;cursor:pointer;border-radius:6px}
.tuer-fuss button:hover{color:#FFFFFF}
.tuer-status{gap:6px}
.tuer-status .tf-link{all:unset;color:#7FA8FF;cursor:pointer;border-radius:4px}
.tuer-status .tf-link:hover{color:#FFFFFF}
.tuer-status .tf-link:focus-visible{outline:2px solid #498BFF;outline-offset:2px}
.tuer-fuss svg{width:14px;height:14px}
/* Am Handy eine Spur groesser: die Wege unten und die Beschriftungen. */
@media (max-width:599px){ .tuer-fuss,.tuer-status,.tuer-schritt>span{font-size:14px} .tuer-bleib{font-size:13.5px} }
.tuer-schloss{position:fixed;left:0;right:0;bottom:20px;display:flex;justify-content:center;pointer-events:none}
.ts-pille{pointer-events:auto;display:flex;align-items:center;height:30px;padding:0 10px;border-radius:15px;background:transparent;font-size:12px;color:#868B95;cursor:default;transition:background .2s;outline:none}
.ts-pille svg{width:13px;height:13px;flex:none}
.ts-pille span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;padding-left:0;transition:max-width .3s,opacity .25s,padding .3s}
.ts-pille:hover,.ts-pille:focus-visible{background:#16181D}
.ts-pille:hover span,.ts-pille:focus-visible span{max-width:340px;opacity:1;padding-left:8px}
/* Die anderen Schritte (Name, Betrieb, Schluessel) im selben Rahmen. */
.tuer .loginkarte.zugang{width:100%;box-sizing:border-box;background:#16181D;border:1px solid #22252C;color:#F2F3F5}
/* Das Anmelde-Intro „Zusammensetzen“ (Handoff 33a, v12.10.0): Die vier Balken
   fliegen von links herein, die Wortmarke blendet ein. Aus dem Handoff 1:1
   bis auf das Hochgleiten: Statt fester 118 px misst app/legacy.js
   (anmeldeIntro) die Marke der Tuer und fliegt Zeichen und Wort genau
   dorthin — so landet es bei jeder Bildschirmgroesse exakt. */
.idna-intro{position:fixed;inset:0;z-index:50;background:#0B0C0F;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:default}
.idna-intro__lockup{display:flex;align-items:center;gap:16px}
.idna-intro__mark{position:relative;width:72px;height:72px;flex:none}
.idna-intro__bar{position:absolute;height:10.5px;border-radius:5.25px;background:#F2F3F5;animation:idnaBarIn .8s cubic-bezier(.2,.8,.2,1) both}
.idna-intro__bar--1{left:30px;top:8.25px;width:33px;--dx:-260px;animation-delay:.15s}
.idna-intro__bar--2{left:9px;top:23.25px;width:54px;--dx:-330px;animation-delay:.27s;background:#498BFF;box-shadow:0 0 14px rgba(73,139,255,.55)}
.idna-intro__bar--3{left:19.5px;top:38.25px;width:43.5px;--dx:-400px;animation-delay:.39s}
.idna-intro__bar--4{left:36px;top:53.25px;width:27px;--dx:-470px;animation-delay:.51s}
.idna-intro__word{font-family:'Geist',sans-serif;font-size:44px;letter-spacing:-.045em;line-height:1;color:#F2F3F5;white-space:nowrap;animation:idnaFade .6s cubic-bezier(.2,.8,.2,1) 1.05s both}
.idna-intro__word b{font-weight:700}.idna-intro__word span{font-weight:500}
@keyframes idnaBarIn{from{transform:translateX(var(--dx));opacity:0}to{transform:none;opacity:1}}
@keyframes idnaFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:359px){ .idna-intro__word{font-size:36px} }
/* Das Begruessungs-Intro nach der Anmeldung „Logo wird Maskottchen“ (Handoff
   35c, v12.12.0): Die Balken gleiten weg, an ihrer Stelle waechst das
   Profilbild, „Willkommen zurueck / Hallo, Vorname“. Aus dem Handoff 1:1 bis
   auf zwei Dinge: Das Ausblenden startet app/legacy.js (willkommen), sobald
   die App darunter fertig ist, statt fest nach 2,35 s; und die Unterzeile ist
   eine Stufe heller (#868B95 statt #6B6F79, wie die ganze dunkle Flaeche seit E47).
   Die App darunter bewegt sich nicht: Das Intro blendet aus, sie steht schon
   da (v12.18.1; vorher zoomte sie aus 101,5 % herein — Raphael, 24.09.: „da
   soll keine Animation sein, das soll sich nicht bewegen“). */
.idna-welcome{position:fixed;inset:0;z-index:60;background:#0B0C0F;display:flex;align-items:center;justify-content:center;font-family:'Geist',sans-serif;color:#F2F3F5;cursor:default}
/* Der Ausgang (v12.21.2; Raphael, 24.09.: „sieht aus, als ob die
   zusammenstossen“): nicht mehr alles auf einmal, sondern nacheinander —
   erst geht der Gruss, das Maskottchen (oder Foto) fliegt an seinen Platz
   in der Leiste (legacy.js: willkommen, raus), dann erst der Grund. So
   liegt nie ein halb durchsichtiger Gruss ueber der App. */
.idna-welcome.weg{animation:wGrundAus .5s ease .24s both;pointer-events:none}
.idna-welcome.weg .idna-welcome__text{animation:wGrussAus .26s ease both}
.idna-welcome.weg .idna-welcome__avatar{box-shadow:none;transition:box-shadow .3s}
.idna-welcome.weg.ohne-ziel .idna-welcome__slot{animation:wGrussAus .26s ease both}
/* Waehrend des Intros ist der Platz in der Leiste leer (v12.21.4): nie zwei
   Maskottchen auf einmal — es kommt an, wenn das Intro es hinbringt. */
body.willkommen-an #dna-nav .dn-bild{visibility:hidden}
.idna-welcome__row{display:flex;align-items:center;gap:18px}
.idna-welcome__slot{position:relative;width:64px;height:64px;flex:none;animation:wIn .7s cubic-bezier(.33,1,.68,1) .05s both}
.idna-welcome__bar{position:absolute;height:9.33px;border-radius:4.67px;background:#F2F3F5;animation:wOut .55s cubic-bezier(.33,1,.68,1) both}
.idna-welcome__bar--1{left:26.67px;top:7.33px;width:29.33px;animation-delay:.95s}
.idna-welcome__bar--2{left:8px;top:20.67px;width:48px;background:#498BFF;animation-delay:1.01s}
.idna-welcome__bar--3{left:17.33px;top:34px;width:38.67px;animation-delay:1.07s}
.idna-welcome__bar--4{left:32px;top:47.33px;width:24px;animation-delay:1.13s}
.idna-welcome__avatar{position:absolute;inset:0;border-radius:50%;background:#16233F center/cover no-repeat;box-shadow:0 0 0 6px rgba(73,139,255,.12),0 12px 30px rgba(0,0,0,.4);animation:wAvatar .7s cubic-bezier(.33,1,.68,1) 1.12s both}
.idna-welcome__avatar.m{background:transparent}
/* Schriftzug und Gruss liegen in derselben Rasterzelle: Der Kasten ist so
   breit wie der breitere von beiden, beide stehen links direkt neben dem
   Zeichen (18 px). Vorher ein fester 260-px-Kasten mit mittigem Text —
   daher die grosse Luecke zwischen Logo und „invoiceDNA“ (v12.16.0). */
.idna-welcome__text{display:grid;height:64px;max-width:min(62vw,340px)}
.idna-welcome__word,.idna-welcome__hello{grid-area:1/1;display:flex;min-width:0}
.idna-welcome__word{align-items:center;justify-content:flex-start;font-size:34px;letter-spacing:-.045em;white-space:nowrap;animation:wIn .6s cubic-bezier(.33,1,.68,1) .15s both,wOut .5s cubic-bezier(.33,1,.68,1) 1s both}
.idna-welcome__word span{font-weight:500}.idna-welcome__word b{font-weight:700}
.idna-welcome__hello{flex-direction:column;justify-content:center;align-items:flex-start;gap:3px}
.idna-welcome__sub{font-size:12.5px;color:#868B95;animation:wTxt .6s cubic-bezier(.33,1,.68,1) 1.25s both}
.idna-welcome__name{font-size:30px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:wTxt .6s cubic-bezier(.33,1,.68,1) 1.35s both}
@keyframes wIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes wOut{to{opacity:0;transform:translateX(22px)}}
@keyframes wAvatar{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes wTxt{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes wGrundAus{to{background-color:rgba(11,12,15,0)}}
@keyframes wGrussAus{to{opacity:0;transform:translateY(-4px)}}
@media (max-width:379px){ .idna-welcome__row{transform:scale(.9)} }
@media (prefers-reduced-motion:reduce){.idna-welcome,.idna-welcome *{animation-duration:.01s!important;animation-delay:0s!important}}
/* Das Intro landet auf der Marke der Tuer: ein Zeichen, nie zwei. */
body.intro-an .tuer-marke svg,body.intro-an .tuer-wort{opacity:0}
body.intro-fertig:not(.marke-ruht) .tuer-wort{animation:markeKommt .55s cubic-bezier(.22,1,.36,1) both}

/* ------------------------------------------------- Einstellungen v2 */
/* Handoff "design_handoff_invoicedna_settings" (Claude Design, 24.09.2026).
   Eine eigene Seite ohne Leiste; die Breite wird am Container gemessen
   (Container-Abfragen), nicht am Fenster.                               */
body.es-voll #dna-nav{display:none}
body.dna.es-voll{--nav-b:0px}
/* Am Handy ohne Reiterleiste: Die Einstellungen fuellen genau den
   Bildschirm, nichts ragt darueber hinaus — die Leiste des Baukastens
   klebt unten (v12.19.0; vorher war die Seite um den oberen Rand zu hoch). */
body.dna-mobil.es-voll #view.dna-seite{padding-bottom:0}
body.dna-mobil.es-voll .es{height:calc(100dvh - env(safe-area-inset-top) - 8px);min-height:0}
.es{position:relative;height:100vh;min-height:560px;display:flex;flex-direction:column;background:#0E0F12;color:#F2F3F5;overflow:hidden;
  container-type:inline-size;container-name:es;font-family:'Geist',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
/* --es-b: die Breite der Einheit aus Menue und Inhalt, mittig und in
   normaler Groesse. Nur die Kopfzeile nutzt die ganze Breite: links
   „Einstellungen“, rechts das Zeichen, in den Ecken (v12.18.1; Raphael,
   24.09.: „links die Einstellungen, rechts das Logo, in der Mitte der
   Platz — aber nicht gross, dass es nicht so erschlagen aussieht“). */
.es-bereich,.es-hub{--es-b:1146px}
.es-kopf{flex:none;display:flex;align-items:center;gap:12px;height:64px;padding:0 28px}
.es-seite{min-width:200px;display:flex;align-items:center}
.es-seite.rechts{justify-content:flex-end;gap:8px}
.es-seite.rechts svg{width:22px;height:22px;display:block}
.es-wort{font-size:17px;letter-spacing:-.045em;line-height:1}
.es-wort i{font-style:normal;font-weight:500} .es-wort b{font-weight:700}
.es-luft{flex:1}
.es-zurueck{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 10px;border-radius:18px;cursor:pointer;color:#A4A9B3;font-size:14px;font-weight:500;transition:background .15s,color .15s}
.es-zurueck:hover{background:#16181D;color:#FFFFFF}
.es-zurueck.gross{height:38px;border-radius:19px;color:#FFFFFF;font-size:17px;font-weight:600}
.es-zurueck.gross svg{color:#A4A9B3;margin-top:1px}
.es-zurueck:focus-visible,.es button:focus-visible,.es label:focus-within{outline:2px solid #498BFF;outline-offset:2px}
.es label.es-suche:focus-within,.es label.es-lsuche:focus-within,.es label.es-zf:focus-within,.es label.es-kbtn:focus-within{outline:none}
/* Startseite */
/* Die Einstellungen stehen still: kein Gleiten, kein Verschieben — was
   verschoben war (translateY), rutschte bei wenig Hoehe unter die
   Kopfzeile und schnitt die Suche ab (v12.18.1). Etwas ueber der Mitte
   steht der Inhalt trotzdem: mittig zwischen dem oberen Rand und der
   Zeile mit der Nummer darunter. */
.es-hub{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2A2E36 transparent;padding:24px 48px 16px;display:flex;flex-direction:column}
.es-einheit{width:100%;max-width:calc(var(--es-b) - 62px);margin:auto;display:flex;flex-direction:column;gap:64px}
.es-suchwrap{display:flex;justify-content:center;position:relative;z-index:4}
.es-suche{width:100%;max-width:600px;box-sizing:border-box;display:flex;align-items:center;gap:12px;height:50px;padding:0 18px;border-radius:16px;background:#16181D;box-shadow:inset 0 0 0 1px #343941;color:#868B95;cursor:text;transition:box-shadow .15s}
.es-suche:focus-within{box-shadow:inset 0 0 0 1.5px #498BFF}
.es .es-suche input,.es .es-lsuche input{flex:1;min-width:0;height:100%;border:0;padding:0;margin:0;background:transparent;color:#F2F3F5;font:500 15px 'Geist',system-ui,sans-serif;outline:none;box-shadow:none;border-radius:0}
.es .es-lsuche input{font-size:14px}
.es input::placeholder,.es textarea::placeholder{color:#868B95}
.es-treffer{position:absolute;top:54px;left:50%;transform:translateX(-50%);width:100%;max-width:560px}
.es-trefferbox{border-radius:14px;background:#16181D;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 0 1px #22252C;overflow:hidden}
.es-hit{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;height:48px;padding:0 16px;cursor:pointer;border-top:1px solid #1F2228}
.es-hit:first-child{border-top:0}
.es-hit:hover,.es-hit:focus-visible{background:#1B1E24;outline:none}
.es-hit span{flex:1;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-hit em{font-style:normal;font-size:12px;color:#868B95;white-space:nowrap}
.es-nichts{padding:14px 16px;font-size:14px;color:#868B95}
/* Ein festes Raster statt umbrechender Reihen: Die sechs Bereiche stehen
   immer buendig in Spalten — 3 × 2, am iPad 2 × 3, am Telefon untereinander
   (Raphael, 24.09.: „sieht hingeschmissen aus“; seit v12.13.0 mit System). */
.es-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px;align-items:start}
.es-gr{min-width:0;display:flex;flex-direction:column;gap:16px}
.es-grkopf{all:unset;display:flex;flex-direction:column;gap:12px;cursor:pointer;padding:16px;margin:-16px;border-radius:16px;transition:background .15s}
.es-grkopf:hover{background:#13151A}
.es-kachel{width:48px;height:48px;flex:none;border-radius:14px;background:linear-gradient(145deg,#1E3160 0%,#131C33 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(127,168,255,.12),0 10px 24px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}
.es-kachel svg{width:24px;height:24px}
.es-kachel.klein{width:34px;height:34px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(127,168,255,.12)}
.es-kachel.klein svg{width:18px;height:18px}
.es-grt{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600}
.es-warn{width:7px;height:7px;flex:none;border-radius:50%;background:#F2A65A;margin-top:2px}
.es-subs{display:flex;flex-direction:column;border-top:1px solid #1D2026;padding-top:8px}
.es-sub{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;height:40px;padding:0 8px;margin:0 -8px;border-radius:9px;cursor:pointer;font-size:14px;color:#B9BDC6;transition:background .15s,color .15s}
.es-sub:hover{background:#16181D;color:#FFFFFF}
.es-sub .si{flex:none;color:#8E9AB5;stroke-width:1.5}
.es-sub span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Anzahlen als klare Zahl rechts, so gross wie der Text daneben — ohne
   dunkle Blase, in der die Ziffer klein wurde (v12.16.1; Raphael: „die
   Zahlen sind nicht gut zu erkennen“). */
.es-n{flex:none;font-size:14.5px;font-weight:600;color:#E6E8EC;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.es-sub:hover .es-n,.es-np[aria-current="true"] .es-n{color:#FFFFFF}
.es-n.gross{font-size:16px;font-weight:600;color:#A4A9B3}
/* Ohne negativen Rand: Der liess die Seite 38 px hoeher werden als den
   Bildschirm, und rechts stand ein Rollbalken ohne Grund (v12.18.1). */
.es-fuss{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:40px -32px 0;min-height:32px}
.es-version{margin:0 6px 0 0;font-size:12px;color:#767B85;cursor:pointer}
/* Bereich */
/* Mittig auf grossen Bildschirmen (v12.16.0; Raphael, 24.09.: „der User
   schaut meistens mittig — nicht nach links festgenagelt“): Menue und Inhalt
   stehen als eine Einheit von 1146 px in der Mitte; die Kopfzeile ist auf
   dieselbe Breite gesetzt, damit „Alle Einstellungen“ ueber dem Menue und
   das Zeichen ueber der rechten Inhaltskante stehen. Der Rollbalken bleibt
   am Fensterrand. */
.es-bereich{flex:1;min-height:0;display:flex;padding-left:max(0px, calc((100cqw - var(--es-b)) / 2))}
.es-nav{width:230px;flex:none;box-sizing:border-box;border-right:1px solid #1F2228;padding:8px 14px 24px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;scrollbar-width:none}
.es-navt{display:flex;align-items:center;gap:10px;padding:0 12px 16px;font-size:17px;font-weight:600}
.es-np{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;min-height:42px;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:14px;line-height:1.3;color:#A4A9B3;flex:none;transition:background .15s,color .15s}
.es-np:hover{color:#FFFFFF}
.es-np[aria-current="true"]{background:#16181D;color:#FFFFFF;font-weight:600}
/* Lange Namen brechen in eine zweite Zeile um, statt abgeschnitten zu werden. */
.es-np span{flex:1;min-width:0}
.es-np svg{flex:none}
/* Formulare */
.es-form{flex:1;min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2A2E36 transparent;padding:8px 48px 64px}
.es-formin{max-width:820px;display:flex;flex-direction:column;gap:6px}
.es-titel{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0;padding-bottom:16px}
.es-titel.klein{padding:0}
.es-zeile{display:flex;align-items:center;gap:12px 20px;min-height:60px;padding:10px 0;box-sizing:border-box;flex-wrap:wrap;border-bottom:1px solid #1D2026}
.es-zeile.hoch{flex-direction:column;align-items:stretch}
.es-zeile.unter{min-height:52px;padding-left:22px}
.es-zl{flex:1;min-width:200px;display:flex;flex-direction:column;gap:3px}
.es-l{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:500}
.es-zeile.unter .es-l{font-size:14px;color:#B9BDC6}
.es-pflicht{height:18px;padding:0 7px;border-radius:9px;background:#1D2026;color:#A4A9B3;font-size:10.5px;font-weight:600;display:flex;align-items:center}
.es-h{font-size:12.5px;color:#868B95}
.es-err{font-size:12.5px;color:#F2A65A;line-height:1.45}
.es-err:empty{display:none}
.es .es-in{width:320px;max-width:100%;box-sizing:border-box;height:42px;padding:0 12px;margin:0;border:0;border-radius:11px;background:#16181D;color:#F2F3F5;font:500 14.5px 'Geist',system-ui,sans-serif;outline:none;box-shadow:inset 0 0 0 1px #343941;transition:box-shadow .15s}
.es .es-in:focus{box-shadow:inset 0 0 0 1.5px #498BFF;outline:none}
.es .es-in.fehler{box-shadow:inset 0 0 0 1px #F2A65A}
.es .es-in.lang{width:100%;height:auto;min-height:64px;padding:10px 12px;resize:vertical;line-height:1.45}
.es .es-in.kurz{width:120px}
.es-schalter{all:unset;box-sizing:border-box;width:44px;height:26px;flex:none;border-radius:13px;background:#2A2E36;position:relative;cursor:pointer;transition:background .2s}
.es-schalter::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#FFFFFF;transition:left .2s}
.es-schalter[aria-checked="true"]{background:#3778F5}
.es-schalter[aria-checked="true"]::after{left:21px}
.es-seg{display:flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:10px;background:#16181D}
.es-seg button{all:unset;box-sizing:border-box;height:32px;padding:0 14px;border-radius:8px;display:flex;align-items:center;font-size:13.5px;font-weight:500;cursor:pointer;color:#A4A9B3;transition:background .15s,color .15s}
.es-seg button:hover{color:#FFFFFF}
.es-seg button[aria-pressed="true"]{background:#2A2E36;color:#FFFFFF}
.es-logo{display:flex;align-items:center;gap:12px}
.es-logo img{max-height:44px;max-width:140px;object-fit:contain;background:#FFFFFF;border-radius:6px;padding:3px}
.es-logoleer{width:44px;height:44px;box-sizing:border-box;border-radius:10px;border:1.5px dashed #2E3440;display:flex;align-items:center;justify-content:center;color:#868B95;font-size:18px}
/* Dokumente gestalten: der Baukasten (v12.19.0; Handoff „Einstellungen“ 1:1,
   Nebentexte eine Stufe heller wie seit E47 ueberall). Ohne Menue links:
   Die Buehne geht ueber die ganze Breite, das Fenster „Bausteine
   hinzufuegen“ schwebt darueber und laesst sich verschieben. */
.es-bereich.bk-bereich{padding-left:0}
.bk{flex:1;min-width:0;min-height:0;display:flex;position:relative}
.bk-canvas{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:18px;overflow:auto;background:#0B0C0F;padding:24px 32px 48px;scrollbar-width:thin;scrollbar-color:#2A2E36 transparent}
.bk-reiter,.bk-werk,.bk-warn,.bk-blatt{width:100%;max-width:640px;min-width:540px;flex:none;box-sizing:border-box}
/* Reiter: so breit wie das Blatt */
.bk-reiter{display:flex;gap:2px;padding:3px;border-radius:12px;background:#16181D}
.bk-rt{all:unset;box-sizing:border-box;flex:1 1 0;min-width:0;height:32px;padding:0 10px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;font-size:13.5px;font-weight:500;cursor:pointer;color:#A4A9B3;transition:background .15s,color .15s}
.bk-rt:hover{color:#FFFFFF}
.bk-rt[aria-selected="true"]{background:#2A2E36;color:#FFFFFF}
.bk-rt svg{flex:none;opacity:.85}
.bk-rt span{overflow:hidden;text-overflow:ellipsis}
/* Werkzeugzeile: Layout, Rueckgaengig, Speichern; darunter, wer es bekommt */
.bk-werk{display:flex;flex-direction:column;gap:10px}
.bk-werkzeile{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bk-luft{flex:1}
.bk-laywahl{position:relative}
.bk-laybtn{all:unset;box-sizing:border-box;height:32px;padding:0 10px 0 12px;border-radius:10px;display:flex;align-items:center;gap:8px;cursor:pointer;background:#16181D;box-shadow:inset 0 0 0 1px #2A2E36;transition:background .15s}
.bk-laybtn:hover{background:#1D2026}
.bk-laybtn.offen{box-shadow:inset 0 0 0 1px #3778F5}
.bk-laybtn span{font-size:13px;font-weight:500;color:#DCDFE5;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-layic{color:#868B95;flex:none} .bk-laypf{color:#A4A9B3;flex:none}
.bk-laymenu{position:absolute;top:38px;right:0;z-index:8;width:340px;max-width:calc(100cqw - 32px);border-radius:14px;background:#1A1C21;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 0 1px #2A2E36;display:flex;flex-direction:column;overflow:hidden}
.bk-laysuche{padding:10px;border-bottom:1px solid #22252C}
.es .bk-laysuche input{width:100%;box-sizing:border-box;height:36px;padding:0 12px;margin:0;border:0;border-radius:10px;background:#0E0F12;color:#F2F3F5;font:500 13.5px 'Geist',system-ui,sans-serif;outline:none;box-shadow:inset 0 0 0 1px #2A2E36}
.es .bk-laysuche input:focus{box-shadow:inset 0 0 0 1.5px #498BFF}
.bk-laylist{max-height:320px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2A2E36 transparent;padding:6px}
.bk-layzeile{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer}
.bk-layzeile:hover,.bk-layzeile.an{background:#22252C}
.bk-stern{width:16px;flex:none;font-size:12px;color:#E0A83A}
.bk-layt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bk-layt b{font-size:13.5px;font-weight:500;color:#F2F3F5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-layt em{font-style:normal;font-size:11.5px;color:#868B95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-layt em.warn{color:#F2A65A}
.bk-haken{color:#7FA8FF;flex:none}
.bk-laynichts{padding:12px 10px;font-size:13px;color:#868B95}
.bk-layneu{all:unset;box-sizing:border-box;height:44px;padding:0 16px;border-top:1px solid #22252C;display:flex;align-items:center;gap:8px;font-size:13.5px;color:#7FA8FF;cursor:pointer}
.bk-layneu:hover{background:#16233F}
.bk-rueck{all:unset;box-sizing:border-box;height:32px;width:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#DCDFE5;background:#16181D;transition:background .15s}
.bk-rueck:hover{background:#1D2026}
.bk-rueck[disabled]{color:#5A5E68;cursor:default;background:#16181D}
.bk-sichern{all:unset;box-sizing:border-box;height:32px;padding:0 14px;border-radius:10px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;cursor:default;background:#16181D;color:#868B95;white-space:nowrap;transition:background .2s}
.bk-sichern.offen{background:#3778F5;color:#FFFFFF;cursor:pointer}
.bk-sichern.offen:hover{background:#2F6BE0}
.bk-bekommen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:30px;font-size:13px;color:#A4A9B3}
.bk-bic{color:#868B95;flex:none}
.bk-alle{color:#F2F3F5;font-weight:500}
.bk-std{color:#868B95}
.bk-chip{height:26px;padding:0 4px 0 10px;border-radius:13px;background:#1D2026;display:flex;align-items:center;gap:4px;font-size:12.5px;color:#DCDFE5}
.bk-chip button{all:unset;width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#A4A9B3;cursor:pointer}
.bk-chip button:hover{background:#2A2E36;color:#FFFFFF}
.bk-kwahl{position:relative}
.es .bk-kwahl input{height:28px;width:160px;box-sizing:border-box;padding:0 10px;margin:0;border:0;border-radius:14px;background:#16181D;color:#F2F3F5;font:500 12.5px 'Geist',system-ui,sans-serif;outline:none;box-shadow:inset 0 0 0 1px #2A2E36}
.es .bk-kwahl input:focus{box-shadow:inset 0 0 0 1.5px #498BFF}
.bk-khits{position:absolute;top:32px;left:0;width:240px;z-index:5;padding:4px;border-radius:10px;background:#1D2026;box-shadow:0 12px 30px rgba(0,0,0,.5);display:flex;flex-direction:column}
.bk-khits button{all:unset;box-sizing:border-box;height:30px;padding:0 10px;border-radius:7px;display:block;line-height:30px;font-size:12.5px;color:#DCDFE5;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-khits button:hover{background:#2A2E36}
.bk-khits span{padding:6px 10px;font-size:12.5px;color:#868B95}
.bk-fuer-alle{all:unset;font-size:12.5px;color:#7FA8FF;cursor:pointer;padding-left:4px}
.bk-fuer-alle:hover{color:#FFFFFF}
/* Pflichtangaben fehlen: oranger Hinweis ueber dem Blatt */
.bk-warn{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-radius:12px;background:rgba(242,166,90,.1);box-shadow:inset 0 0 0 1px rgba(242,166,90,.3);font-size:13px;color:#F2C08A;line-height:1.45}
.bk-warn svg{flex:none;margin-top:1px;color:#F2A65A;stroke-width:2}
/* Das Blatt: A4 in 640 px, Zeilen mit einer oder zwei Zellen */
.bk-blatt{min-height:880px;background:#FFFFFF;color:#1C1D20;border-radius:4px;padding:36px 40px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.5);user-select:none;-webkit-user-select:none}
.bk-luecke{height:4px;margin:2px 0;border-radius:6px;transition:height .15s,background .15s}
.bk.zieht .bk-luecke{height:18px;background:rgba(55,120,245,.12)}
.bk-zeile{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.bk-zeile.zwei{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.bk-zelle{position:relative;min-width:0;border-radius:8px;padding:8px 10px;margin:0 -10px;display:flex;flex-direction:column;justify-content:center;gap:2px;cursor:grab;outline:none;transition:box-shadow .15s,background .15s}
.bk-zelle:hover,.bk-zelle:focus-visible{box-shadow:inset 0 0 0 1.5px #B8C8E8}
.bk-zelle.kasten{background:#F4F4F2}
.bk-zelle.rechts{text-align:right}
.bk-zelle.leer{min-height:44px;cursor:default;align-items:center;box-shadow:none}
.bk-zelle.leer span{display:none;font-size:11.5px;color:#3778F5}
.bk.halb .bk-zelle.leer{box-shadow:inset 0 0 0 1.5px #3778F5;background:#EEF4FF}
.bk.halb .bk-zelle.leer span{display:block}
.bk-weg{all:unset;position:absolute;top:-10px;right:-8px;z-index:1;width:22px;height:22px;border-radius:11px;display:none;align-items:center;justify-content:center;font-size:11px;color:#FFFFFF;background:#1C1D20;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.bk-zelle:hover .bk-weg,.bk-zelle:focus-within .bk-weg{display:flex}
.bk.zieht .bk-weg{display:none}
.bk-ende{flex:1;min-height:40px;margin-top:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent;transition:background .15s}
.bk.zieht .bk-ende{color:#3778F5;background:rgba(55,120,245,.08)}
.bk-l{line-height:1.45;white-space:pre-wrap}
.bk-logo{display:flex;align-items:center;gap:10px}
.bk-zelle.rechts .bk-logo{justify-content:flex-end}
.bk-logo svg{flex:none;display:block}
.bk-logo div{display:flex;flex-direction:column;gap:1px;text-align:left}
.bk-logo b{font-size:14px;font-weight:700;letter-spacing:-.02em;color:#1C1D20}
.bk-logo span{font-size:10px;color:#8A8C92}
.bk-logo img{display:block;max-height:40px;max-width:180px;object-fit:contain}
.bk-pos{display:flex;flex-direction:column;text-align:left}
.bk-pos div{display:grid;grid-template-columns:28px minmax(0,1fr) 70px 80px 80px;gap:8px;padding:6px 0;border-bottom:1px solid #ECECEA;font-size:11.5px;font-variant-numeric:tabular-nums}
.bk-pos div:first-child{border-bottom:1.5px solid #1C1D20;font-size:9.5px;font-weight:600;letter-spacing:.06em;color:#8A8C92}
.bk-pos span:nth-child(n+3){text-align:right}
.bk-pos div+div span:first-child{color:#8A8C92}
.bk-pos div+div span:nth-child(4){color:#55575D}
.bk-pos div+div span:nth-child(5){font-weight:600}
.bk-kv{display:grid;grid-template-columns:auto auto;justify-content:start;gap:3px 18px;font-size:11.5px;font-variant-numeric:tabular-nums}
.bk-zelle.rechts .bk-kv{justify-content:end}
.bk-kv span{color:#7A7C82;text-align:left}
.bk-kv b{text-align:right;font-weight:500;color:#1C1D20}
.bk-kv .gross{font-size:13px}
.bk-kv span.gross{font-weight:600}
.bk-kv b.gross{font-weight:700}
/* Das Fenster „Bausteine hinzufuegen“ */
.bk-pal{--px:24px;--py:24px;position:absolute;left:var(--px);top:var(--py);z-index:6;width:268px;max-height:calc(100% - 40px);display:flex;flex-direction:column;border-radius:18px;background:#16181D;box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 0 0 1px #2A2E36;overflow:hidden}
.bk-pankopf{flex:none;display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-bottom:1px solid #22252C}
.bk-pankopf:active{cursor:grabbing}
.bk-griff{flex:none;color:#5A5E68}
.bk-pant{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.bk-pant b{font-size:14px;font-weight:600}
.bk-pant span{font-size:11.5px;color:#868B95}
.bk-panin{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:12px;display:flex;flex-direction:column;gap:12px}
.bk-muell{display:none;flex:none;height:44px;box-sizing:border-box;border-radius:12px;border:1.5px dashed #F2A65A;align-items:center;justify-content:center;font-size:13px;color:#F2A65A}
.bk.vomblatt .bk-muell{display:flex}
.bk-gruppe{display:flex;flex-direction:column;gap:4px}
.bk-gt{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#868B95;padding:0 4px 2px}
.bk-bs{flex:none;height:36px;padding:0 10px;border-radius:10px;display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:grab;color:#DCDFE5;outline:none;user-select:none;-webkit-user-select:none}
.bk-bs:hover{background:#1D2026}
.bk-bs:focus-visible{background:#1D2026;box-shadow:inset 0 0 0 1.5px #498BFF}
.bk-bs svg{flex:none;color:#7FA8FF}
.bk-bs span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-bs i{font-style:normal;width:24px;height:24px;flex:none;border-radius:7px;background:#16233F;color:#7FA8FF;display:flex;align-items:center;justify-content:center;font-size:15px}
.bk-reset{all:unset;align-self:flex-start;font-size:12.5px;color:#868B95;cursor:pointer;padding:4px}
.bk-reset:hover{color:#FFFFFF}
.bk-meine{flex:none;display:flex;align-items:center;gap:10px;border-top:1px solid #22252C;padding-top:12px}
.bk-meine span{flex:1;font-size:13px;color:#DCDFE5}
.es-schalter.klein{width:40px;height:24px;border-radius:12px}
.es-schalter.klein::after{width:18px;height:18px}
.es-schalter.klein[aria-checked="true"]::after{left:19px}
/* Zwischen 1000 und 1300 px rueckt das Blatt nach rechts, damit das
   Fenster es nicht verdeckt. */
@container es (min-width:1000px) and (max-width:1299px){ .bk-canvas{padding-left:316px} }
/* iPad und Handy: das Fenster wird zur Leiste unten, auf- und zuklappbar;
   das Blatt wird verkleinert (zoom, in bkNach). */
@container es (max-width:999px){
  .bk-pal{left:0;right:0;top:auto;bottom:0;width:auto;max-height:64px;border-radius:18px 18px 0 0}
  .bk-pal.auf{max-height:48%}
  .bk-pal:not(.auf) .bk-panin{display:none}
  .bk-pankopf{cursor:pointer}
  .bk-pal.auf~.bk-canvas{padding-bottom:52vh}
  .bk-canvas{padding:20px 20px 90px}
  .bk-reiter,.bk-werk,.bk-warn{min-width:0}
  .bk-blatt{width:640px;min-width:640px}
}
@container es (max-width:639px){ .bk-canvas{padding:16px 12px 90px} }
@container es (max-width:559px){ .bk-rt span{display:none} }
/* System-Seiten (v12.13.0): Abschnitte, Knoepfe in der Zeile, Zustand. */
.es-abschn{margin:26px 0 0;padding-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#868B95}
.es-knopf{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:10px;background:#1D2026;color:#F2F3F5;font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.es-knopf:hover{background:#262A31}
.es-knopf:focus-visible,.es-knopf:focus-within{outline:2px solid #498BFF;outline-offset:2px}
.es-knopf[disabled]{opacity:.45;cursor:default}
.es-knopf.warn{color:#F2A65A} .es-knopf.warn:hover{background:#2A1E14}
.es-knopfe{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.es-wert{font-size:14px;color:#DCDFE5}
.es-stand{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#DCDFE5}
.es-stand i{width:8px;height:8px;border-radius:50%;background:#7FA8FF}
.es-stand.crit i{background:#F2A65A} .es-stand.aus i{background:#5A5E68}
.es-rund{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#16233F}
.es-rund.m{display:inline-flex;background:transparent;overflow:visible}
.es-code{font-family:'Geist Mono',monospace;font-size:14px;letter-spacing:.04em;user-select:all;word-break:break-all;color:#F2F3F5}
.es-mess{list-style:none;margin:0;padding:0}
.es-mess li{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid #1D2026;font-size:13.5px;color:#A4A9B3}
.es-mess b{color:#DCDFE5;font-weight:500;min-width:110px}
.es-link{all:unset;font-size:14px;color:#7FA8FF;cursor:pointer}
.es-link:hover{color:#FFFFFF}
.es-link.leise{color:#A4A9B3}
.es-alt{margin-top:28px}
.es-bald{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;border-radius:16px;background:#16181D;box-shadow:inset 0 0 0 1px #22252C;color:#A4A9B3;font-size:14px;line-height:1.5;max-width:560px}
.es-bald svg{color:#7FA8FF}
.es-bald b{font-size:16px;color:#F2F3F5}
.es .de-felder{max-width:720px}
/* Kontoauszug einlesen (v12.20.0; Raphael, 24.09.: „krumm und schief“):
   eine Zeile wie die anderen, so breit wie sie — Zeichen, zwei Zeilen
   Text, rechts „Datei wählen“. Hineinziehen geht weiter ueberall. */
.es .de-drop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:3px;align-items:center;justify-items:start;
  min-height:0;margin:2px 0 6px;padding:16px 16px 16px 18px;border:1.5px dashed #2E3440;border-radius:14px;background:#16181D;text-align:left}
.es .de-drop svg{grid-row:1 / span 2;width:22px;height:22px;margin:0}
.es .de-drop b{grid-column:2;font-size:15px;font-weight:600}
.es .de-drop span{grid-column:2;font-size:12.5px;color:#868B95}
.es .de-drop::after{content:"Datei wählen";grid-column:3;grid-row:1 / span 2;display:flex;align-items:center;height:36px;padding:0 14px;border-radius:10px;background:#1D2026;color:#F2F3F5;font-size:13.5px;font-weight:500;white-space:nowrap}
.es .de-drop:hover,body.zieht-datei .es .de-drop{border-color:#498BFF;background:#16233F}
.es .de-drop:hover::after{background:#262A31}
@container es (max-width:479px){ .es .de-drop{grid-template-columns:auto minmax(0,1fr)} .es .de-drop::after{grid-column:1 / -1;grid-row:3;margin-top:10px} }
/* Listen */
/* Die Liste steht wie das Formular direkt neben dem Menue, nicht mittig im
   Rest — sonst waeren Formular und Liste unterschiedlich weit eingerueckt. */
.es-listwrap{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden}
.es-listin{width:100%;max-width:916px;flex:1;min-height:0;display:flex;flex-direction:column;padding:0 48px;box-sizing:border-box;position:relative}
.es-lkopf{flex:none;display:flex;align-items:center;gap:10px;min-height:56px;flex-wrap:wrap;padding:0 0 16px}
.es-lsuche{display:flex;align-items:center;gap:8px;height:40px;box-sizing:border-box;flex:0 1 240px;min-width:120px;padding:0 14px;border-radius:12px;background:#16181D;color:#868B95;cursor:text}
.es-imp{all:unset;box-sizing:border-box;height:40px;width:40px;flex:none;border-radius:12px;background:#16181D;display:flex;align-items:center;justify-content:center;color:#DCDFE5;cursor:pointer;transition:background .15s}
.es-imp:hover{background:#1D2026;color:#FFFFFF}
.es-neu{all:unset;box-sizing:border-box;height:40px;padding:0 16px 0 12px;flex:none;border-radius:12px;background:#3778F5;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;cursor:pointer;color:#FFFFFF;transition:background .15s}
.es-neu:hover{background:#2F6BE0}
.es-neu[disabled]{opacity:.6;cursor:default}
.es-chips{flex:none;display:flex;gap:8px;padding-bottom:16px;flex-wrap:wrap}
.es-chip{all:unset;box-sizing:border-box;height:38px;padding:0 14px 0 12px;border-radius:12px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;cursor:pointer;color:#B9BDC6;box-shadow:inset 0 0 0 1px #22252C;transition:background .15s,color .15s}
.es-chip:hover{background:#13151A;color:#FFFFFF}
.es-chip[aria-pressed="true"]{background:#16233F;color:#DCE6FF;box-shadow:inset 0 0 0 1px #22345C}
.es-chip b{font-size:12px;font-weight:600;color:#868B95}
.es-chip[aria-pressed="true"] b{color:#7FA8FF}
.es-az{position:absolute;right:10px;top:150px;bottom:24px;display:flex;flex-direction:column;justify-content:space-between;z-index:2}
.es-az button{all:unset;font-size:10.5px;font-weight:600;color:#868B95;cursor:pointer;padding:0 4px;line-height:1}
.es-az button:hover{color:#FFFFFF}
.es-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;margin:0 -12px;padding:0 12px 24px}
.es-scroll::-webkit-scrollbar{display:none}
.es-lkopfzeile{height:58px;display:flex;align-items:flex-end;gap:10px;padding:0 14px 10px;box-sizing:border-box}
.es-lkopfzeile span{font-size:12px;font-weight:600;letter-spacing:.06em;color:#A4A9B3}
.es-lkopfzeile em{font-style:normal;font-size:12px;color:#868B95}
.es-lkopfzeile i{flex:1;height:1px;background:#1D2026;margin-bottom:6px}
.es-row{border-radius:14px;margin-bottom:2px;transition:background .15s}
.es-row.auf{background:#13151A}
.es-rkopf{all:unset;box-sizing:border-box;width:100%;height:56px;display:flex;align-items:center;gap:14px;padding:0 14px;cursor:pointer;border-radius:14px;transition:background .15s}
.es-rkopf:hover{background:#13151A}
.es-av{width:36px;height:36px;flex:none;border-radius:11px;overflow:hidden;color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;letter-spacing:.02em;background-position:center;background-repeat:no-repeat;background-size:cover}
.es-av.ic{background:#1D2026;color:#A9C6FF}
.es-av.bild{background-color:#FFFFFF}
.es-av.gross{width:56px;height:56px;border-radius:14px;font-size:17px;font-weight:600}
.es-av.m{border-radius:50%;background:transparent;overflow:visible;box-shadow:none}
.es-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.es-rt b{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-rt span{font-size:12.5px;color:#868B95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.es-rw{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.es-auf{padding:6px 14px 16px 64px;display:flex;flex-direction:column;gap:16px}
.es-zfelder{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.es-zf{display:flex;flex-direction:column;gap:6px}
.es-zf>span{font-size:12px;color:#A4A9B3}
.es .es-zin{height:42px;box-sizing:border-box;padding:0 12px;margin:0;border:0;border-radius:11px;background:#0E0F12;color:#F2F3F5;font:500 14.5px 'Geist',system-ui,sans-serif;outline:none;box-shadow:inset 0 0 0 1px #3A3F48;width:100%;transition:box-shadow .15s}
.es .es-zin:focus{box-shadow:inset 0 0 0 1.5px #498BFF;outline:none}
.es .es-zin[readonly]{color:#A4A9B3}
.es-klogo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.es-klogo .es-av.bild{background-size:contain;background-origin:content-box;padding:4px;box-sizing:border-box}
.es-klt{flex:1;min-width:220px;display:flex;flex-direction:column;gap:8px}
.es-kl{font-size:12px;color:#A4A9B3}
.es-klk{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.es-kbtn{all:unset;box-sizing:border-box;height:36px;padding:0 12px;border-radius:10px;background:#1D2026;display:flex;align-items:center;gap:7px;font-size:13px;color:#DCDFE5;cursor:pointer;transition:background .15s}
.es-kbtn:hover{background:#2A2E36;color:#FFFFFF}
.es-inv{display:flex;flex-direction:column;gap:2px}
.es-invk{display:flex;justify-content:space-between;font-size:12px;color:#A4A9B3;padding-bottom:6px}
.es-invz{display:grid;grid-template-columns:90px minmax(0,1fr) 110px 90px;gap:12px;align-items:center;height:36px;font-size:13.5px;border-top:1px solid #1D2026}
.es-invz>span:first-child{color:#A4A9B3}
.es-invz .r{text-align:right}
.es-invz .st{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.es-invz .st i{width:6px;height:6px;border-radius:50%}
.es-zkat,.es-masc{display:flex;flex-direction:column;gap:8px}
.es-zkat>span,.es-masc>span{font-size:12px;color:#A4A9B3}
.es-zkat .es-seg{align-self:flex-start;background:#0E0F12}
.es-masc>div{display:flex;gap:8px;flex-wrap:wrap}
.es-masc button{all:unset;width:44px;height:44px;border-radius:12px;cursor:pointer;background-size:cover;background-position:center;box-shadow:0 0 0 2px transparent;transition:box-shadow .15s}
.es-masc button:hover{box-shadow:0 0 0 2px #2E3440}
.es-masc button[aria-pressed="true"]{box-shadow:0 0 0 2px #498BFF}
.es-hin{font-size:12.5px;color:#868B95}
.es-afuss{display:flex;justify-content:space-between;align-items:center;gap:12px}
.es-afuss>div{display:flex;gap:4px}
/* Der Speichern-Knopf (v12.15.0): ruhig „✓ Gespeichert“, beim Tippen ein
   blaues „Speichern“. Oben neben dem Titel bleibt er beim Scrollen stehen. */
.es-save{all:unset;box-sizing:border-box;flex:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:500;color:#868B95;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.es-save svg{width:14px;height:14px;flex:none}
.es-save:hover{background:#16181D;color:#DCDFE5}
.es-save.offen{background:#3778F5;color:#FFFFFF;padding:0 14px}
.es-save.offen:hover{background:#2F6BE0}
.es-save:focus-visible{outline:2px solid #498BFF;outline-offset:2px}
.es-save.frisch svg{animation:esSaveHaken .45s cubic-bezier(.2,.8,.2,1)}
@keyframes esSaveHaken{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.es-titelzeile{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-8px 0 0;padding:8px 0 16px;background:#0E0F12}
.es-titelzeile .es-titel{padding:0}
.es-los{all:unset;font-size:13px;color:#A4A9B3;cursor:pointer;padding:6px 10px;border-radius:8px;transition:background .15s,color .15s}
.es-los:hover{background:#1D2026;color:#FFFFFF}
.es-los.weg{color:#F2A65A}
.es-los.weg:hover{background:#2A1E14;color:#F2A65A}
.es-einl{flex:none;display:flex;flex-direction:column;gap:12px;padding:16px;margin-bottom:16px;border-radius:14px;background:#16233F;box-shadow:inset 0 0 0 1px #22345C;font-size:14px;color:#DCE6FF}
.es-einl .es-zin{background:#0E0F12}
.es-einlink{font:13px 'Geist Mono',ui-monospace,monospace;padding:10px 12px;background:#0E0F12;border-radius:10px;word-break:break-all;color:#F2F3F5}
.es-einlk{display:flex;gap:12px;align-items:center}
.es-leerliste{padding:40px 14px;color:#868B95;font-size:14px;text-align:center}
/* iPad */
@container es (max-width:999px){
  .es-kopf{padding:0 16px} .es-hub{padding:20px 28px 14px} .es-fuss{margin:40px -14px 0} .es-form{padding:8px 28px 56px} .es-listin{padding:0 28px} .es-nav{width:200px} }
@container es (max-width:759px){ .es-raster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container es (max-width:479px){ .es-raster{grid-template-columns:minmax(0,1fr)}
  /* Untereinander: Kachel und Titel in einer Zeile, sonst wird die Liste lang. */
  .es-grkopf{flex-direction:row;align-items:center;gap:12px}
  .es-grkopf .es-kachel{width:38px;height:38px;border-radius:11px} .es-grkopf .es-kachel svg{width:20px;height:20px} }
/* Telefon */
@container es (max-width:639px){
  .es-kopf{padding:0 10px;height:58px} .es-wort{display:none} .es-seite{min-width:0}
  .es-hub{padding:12px 16px 12px} .es-einheit{gap:40px} .es-raster{gap:36px 24px} .es-fuss{margin:32px -8px 0}
  .es-bereich{flex-direction:column}
  .es-nav{width:auto;flex-direction:row;border-right:0;border-bottom:1px solid #1F2228;padding:0 16px 12px;overflow-x:auto;gap:6px}
  .es-navt{display:none} .es-np{height:38px;min-height:0;border-radius:19px;padding:0 14px;background:#131519;white-space:nowrap} .es-np span{flex:none}
  .es-form{padding:8px 16px 48px} .es-zeile{align-items:stretch} .es-zl{min-width:100%} .es .es-in{width:100%}
  .es-listin{padding:0 16px} .es-az{display:none} .es-auf{padding:6px 10px 14px}
  .es-lsuche{flex:1 1 140px} .es-invz{grid-template-columns:78px minmax(0,1fr) 96px} .es-invz .st{display:none} }