/* ===== Offerta – Auftritt 4.0 =====
   Alle Werte kommen aus tokens.css. Ebenen statt Kästen, eine Hauptaktion je Bildschirm,
   Graphit mit einem Kobalt-Akzent. Schriftgrößen nur aus der Skala (12 · 13 · 14 · 15 · 17 · 22 · 28),
   Radien nur 6 · 9 · 14 · 20. */

*{box-sizing:border-box}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--t-base)/1.5 var(--f-text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--akzent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
h1,h2,h3,p{margin:0}
h1,h2,h3{letter-spacing:-.012em;font-weight:600}
::selection{background:var(--akzent-blass)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:var(--r-xs)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
.hidden{display:none !important}
[hidden]{display:none !important}
.nur-sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.nur-handy{display:none}
.zahl,.betrag,.tot,.sumbox,.kz .wert,.ed-betrag,.pb,.v-preis,.markt-fuss,.markt-abw{font-variant-numeric:tabular-nums}
.mono,.mono-feld{font-family:var(--f-mono);font-size:.92em;letter-spacing:-.01em}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:5px;
  font:500 11px/1 var(--f-mono);color:var(--text-3);background:var(--sanft);box-shadow:inset 0 0 0 1px var(--linie);white-space:nowrap}
.sym{flex:none;display:block;width:18px;height:18px}
.sym.hoch{transform:rotate(180deg)}
.leise{color:var(--text-3) !important}
.klein{font-size:var(--t-sm) !important}
.rot-text{color:var(--nein) !important}
.mitte{text-align:center}
.oben-0{margin-top:0 !important} .oben-xs{margin-top:8px !important} .oben-s{margin-top:12px !important} .oben-m{margin-top:16px !important}
.ohne-unten{margin-bottom:0 !important} .unten-m{margin-bottom:16px !important} .ohne-rand{margin:0 !important}
.ohne-zeiger{cursor:default !important} .breite-auto{width:auto !important} .titel-m{font-size:var(--t-xl);margin-bottom:6px;font-family:var(--f-anzeige);letter-spacing:-.015em}
.r{text-align:right} .c{text-align:center} .right{margin-left:auto}
.trenner{border-top:1px solid var(--linie)}
.eyebrow{display:block;font:600 var(--t-xs)/1.3 var(--f-text);color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-sm);border:0;
  font:600 var(--t-base)/1 var(--f-text);white-space:nowrap;cursor:pointer;text-decoration:none !important;
  background:var(--akzent);color:var(--akzent-text);box-shadow:var(--e-knopf);
  transition:background var(--dur-1) var(--aus),box-shadow var(--dur-1) var(--aus),transform 80ms var(--aus),color var(--dur-1)}
.btn:hover{background:var(--akzent-hover)}
.btn:active:not(:disabled){transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn .sym{width:16px;height:16px}
.btn.sec{background:var(--flaeche);color:var(--text);box-shadow:var(--e-zweit)}
.btn.sec:hover{background:var(--sanft)}
.btn.ghost{background:transparent;color:var(--text-2);box-shadow:none}
.btn.ghost:hover{background:var(--sanft);color:var(--text)}
.btn.ghost.rot,.btn.rot{color:var(--nein)}
.btn.ghost.rot:hover{background:var(--nein-flaeche)}
.btn.gefahr{background:var(--nein);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn.gefahr:hover{background:color-mix(in srgb,var(--nein) 86%,#000)}
:root[data-theme="dark"] .btn.gefahr{color:#0B0D12}
.btn.danger{background:var(--flaeche);color:var(--nein);box-shadow:0 0 0 1px var(--nein-flaeche)}
.btn.sm{height:30px;padding:0 10px;font-size:var(--t-sm);border-radius:8px;gap:6px}
.btn.lg{height:44px;padding:0 18px;font-size:var(--t-md)}
.btn.block{width:100%}
.btn.icon{width:36px;padding:0}
.btn.sm.icon{width:30px}
.btn.icon.weg{color:var(--text-3)}
.btn.icon.weg:hover{color:var(--nein);background:var(--nein-flaeche)}
.btn kbd.hell{background:rgba(255,255,255,.16);color:inherit;box-shadow:none;opacity:.85}
.link-knopf{border:0;background:none;padding:0;display:inline-flex;align-items:center;gap:4px;color:var(--akzent);font-weight:600;font-size:var(--t-sm);cursor:pointer}
.link-knopf .sym{width:14px;height:14px;transition:transform var(--dur-2) var(--aus)}
.link-knopf:hover .sym{transform:translateX(3px)}
.spin{width:15px;height:15px;border:2px solid color-mix(in srgb,currentColor 30%,transparent);border-top-color:currentColor;border-radius:50%;animation:dreh .7s linear infinite;display:inline-block;flex:none}
@keyframes dreh{to{transform:rotate(360deg)}}

/* ---------- Felder ---------- */
label,.label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--text-2);margin-bottom:6px}
.label-hinweis{font-weight:400;color:var(--text-3)}
input,select,textarea{width:100%;height:36px;border:0;border-radius:var(--r-sm);padding:0 11px;background:var(--flaeche);color:var(--text);
  font-size:var(--t-base);box-shadow:inset 0 0 0 1px var(--feld);outline:0;transition:box-shadow var(--dur-1) var(--aus),background var(--dur-1)}
textarea{height:auto;min-height:88px;padding:9px 11px;line-height:1.5;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background:var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%238A919D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") right 9px center/16px no-repeat}
input::placeholder,textarea::placeholder{color:var(--text-4)}
input:hover,select:hover,textarea:hover{box-shadow:inset 0 0 0 1px var(--feld-hover)}
input:focus,select:focus,textarea:focus{box-shadow:inset 0 0 0 1px var(--akzent),0 0 0 3px var(--akzent-flaeche)}
input:disabled,select:disabled,textarea:disabled{background-color:var(--sanft);color:var(--text-2);cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--linie)}
input[aria-invalid="true"],textarea[aria-invalid="true"],select[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--nein-punkt),0 0 0 3px var(--nein-flaeche)}
.feld-fehler{margin:6px 0 0;font-size:var(--t-xs);font-weight:500;color:var(--nein);display:flex;gap:6px;align-items:flex-start}
.feld-fehler::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;margin-top:5px}
.feld-hinweis{margin:6px 0 0;font-size:var(--t-xs);color:var(--text-3)}
input[type=checkbox],input[type=radio]{width:16px;height:16px;padding:0;flex:none;margin:0;appearance:none;-webkit-appearance:none;cursor:pointer;
  border-radius:4px;background:var(--flaeche);box-shadow:inset 0 0 0 1.5px var(--feld);display:inline-grid;place-items:center;transition:background var(--dur-1),box-shadow var(--dur-1)}
input[type=radio]{border-radius:50%}
input[type=checkbox]:checked,input[type=radio]:checked{background:var(--akzent);box-shadow:none}
input[type=checkbox]:checked::after{content:"";width:9px;height:5px;border:2px solid var(--akzent-text);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
input[type=radio]:checked::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--akzent-text)}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{box-shadow:inset 0 0 0 1.5px var(--akzent),0 0 0 3px var(--akzent-flaeche)}
input[type=color]{width:44px;height:36px;padding:3px;cursor:pointer}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
input[type=file]{height:auto;padding:0;box-shadow:none;background:none}
.feinwahl{display:inline-flex;gap:8px;align-items:center;font-size:var(--t-sm);font-weight:500;color:var(--text-2);margin:0;cursor:pointer}
.schalterzeile{display:flex;gap:10px;align-items:center;font-size:var(--t-base);font-weight:500;color:var(--text);margin:0;cursor:pointer;min-height:36px}
.schalterzeile input[type=checkbox]{width:34px;height:20px;border-radius:999px;box-shadow:none;background:var(--feld);position:relative;display:block;transition:background var(--dur-2) var(--aus)}
.schalterzeile input[type=checkbox]::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transform:none;transition:transform var(--dur-3) var(--feder)}
.schalterzeile input[type=checkbox]:checked{background:var(--akzent)}
.schalterzeile input[type=checkbox]:checked::after{transform:translateX(14px);width:14px;height:14px;border:0}
.schalter-halter{display:flex;align-items:flex-end}
.feld-einheit{position:relative;display:flex;align-items:center}
.feld-einheit input{text-align:right;padding-right:44px}
.feld-einheit span{position:absolute;right:11px;color:var(--text-3);font-size:var(--t-sm)}
.schmal-feld{max-width:260px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-plz{grid-template-columns:96px minmax(0,1fr);gap:10px}
.grid .breit{grid-column:1/-1}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- Rahmen ---------- */
.app{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:14px 12px 12px;
  border-right:1px solid var(--linie);background:var(--bg);z-index:var(--z-leiste);scrollbar-width:thin}
.side .spacer{flex:1;min-height:12px}
.side .foot{display:grid;gap:2px}
.navwrap{display:grid;gap:2px}
.nav{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;border:0;border-radius:var(--r-sm);
  background:none;color:var(--text-2);font:500 var(--t-base)/1 var(--f-text);text-align:left;cursor:pointer;
  transition:background var(--dur-1) var(--aus),color var(--dur-1)}
.nav .ic{display:grid;place-items:center;color:var(--text-3);transition:color var(--dur-1)}
.nav:hover{background:var(--sanft);color:var(--text)}
.nav.on{background:var(--flaeche);color:var(--text);box-shadow:var(--e1)}
.nav.on .ic{color:var(--akzent)}
.nav-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--akzent);color:var(--akzent-text);
  font:600 11px/20px var(--f-text);text-align:center;font-variant-numeric:tabular-nums;animation:badge-ein var(--dur-3) var(--feder)}
@keyframes badge-ein{from{transform:scale(.6);opacity:0}}
.nav .badge{margin-left:auto}
.side-suche{display:flex;gap:6px;margin:6px 0 10px}
.suche-knopf{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 10px;border:0;border-radius:var(--r-sm);
  background:var(--flaeche);box-shadow:var(--e1);color:var(--text-3);font-size:var(--t-sm);cursor:pointer;transition:box-shadow var(--dur-1)}
.suche-knopf:hover{box-shadow:var(--e2);color:var(--text-2)}
.suche-knopf .sym{width:15px;height:15px}
.suche-knopf kbd{margin-left:auto}
.neu-knopf{width:34px;height:34px;flex:none;display:grid;place-items:center;border:0;border-radius:var(--r-sm);background:var(--akzent);color:var(--akzent-text);
  box-shadow:var(--e-knopf);cursor:pointer;transition:background var(--dur-1)}
.neu-knopf:hover{background:var(--akzent-hover)}
.neu-knopf .sym{width:17px;height:17px}

/* Firmenwahl */
.firmawahl{position:relative}
.fwbtn{width:100%;display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;transition:background var(--dur-1)}
.fwbtn:hover{background:var(--sanft)}
.fav{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;color:#fff;font:700 12px/1 var(--f-text);letter-spacing:.02em}
.fav.klein{width:22px;height:22px;font-size:10px;border-radius:6px}
.fwbtn .txt{flex:1;min-width:0}
.fwbtn .txt b{display:block;font-size:var(--t-sm);font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwbtn .txt span{font-size:var(--t-xs);color:var(--text-3)}
.fwbtn .punkt{width:7px;height:7px;border-radius:50%;background:var(--wartet-punkt);flex:none}
.fwbtn .leise .sym{width:16px;height:16px}

/* Menüs (Aufklapp) */
.menu{position:absolute;z-index:var(--z-pop);min-width:220px;padding:6px;border-radius:12px;background:var(--erhoeht);box-shadow:var(--e3);
  transform-origin:top left;animation:aufklappen 140ms var(--aus)}
@keyframes aufklappen{from{opacity:0;transform:scale(.98) translateY(-4px)}}
.menu>button,.menu>a{width:100%;display:flex;align-items:center;gap:10px;min-height:34px;padding:7px 10px;border:0;border-radius:8px;background:none;
  color:var(--text);font-size:var(--t-sm);text-align:left;cursor:pointer;text-decoration:none}
.menu>button:hover,.menu>button:focus-visible{background:var(--sanft);outline:0}
.menu>button .sym{width:16px;height:16px;color:var(--text-3)}
.menu>button kbd{margin-left:auto}
.menu>button.rot{color:var(--nein)}
.menu>button.rot .sym{color:var(--nein)}
.menu>button.rot:hover{background:var(--nein-flaeche)}
.menu .sep{height:1px;background:var(--linie);margin:6px 2px}
.menu-titel{padding:6px 10px 4px;font-size:var(--t-xs);font-weight:600;color:var(--text-3)}
.menu-kopf{display:flex;gap:10px;align-items:center;padding:8px 10px 10px}
.menu-kopf b{display:block;font-size:var(--t-sm)}
.menu-kopf small{color:var(--text-3);font-size:var(--t-xs)}
.menu-feld{padding:6px 10px 8px}
.menu-feld label{font-size:var(--t-xs);color:var(--text-3);margin-bottom:5px}
.menu-feld small{display:block;margin-top:5px;font-size:var(--t-xs);color:var(--text-3)}
.fwmenu{top:calc(100% + 4px);left:0;right:0}
.fwmenu .fw-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fwmenu .sym.aktiv{color:var(--akzent)}
.fwmenu .badge{background:var(--wartet-flaeche);color:var(--wartet);animation:none}

/* Konto */
.konto{position:relative;margin-top:2px}
.konto-knopf{width:100%;display:flex;align-items:center;gap:10px;padding:7px 8px;border:0;border-radius:10px;background:none;text-align:left;cursor:pointer;transition:background var(--dur-1)}
.konto-knopf:hover{background:var(--sanft)}
.konto-knopf .sym.auf{width:16px;height:16px;color:var(--text-3);transform:rotate(180deg)}
.avatar{position:relative;width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--text-3);color:#fff;font:600 11px/1 var(--f-text)}
.avatar i{position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px var(--bg)}
.avatar i.gut{background:var(--gut-punkt)} .avatar i.halb{background:var(--wartet-punkt)}
.konto-name{flex:1;min-width:0}
.konto-name b{display:block;font-size:var(--t-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.konto-name small{display:block;font-size:var(--t-xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kontomenu{bottom:calc(100% + 6px);left:0;right:-4px;transform-origin:bottom left}
.thema-wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;margin:0 4px;border-radius:9px;background:var(--sanft)}
.thema-wahl button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border:0;border-radius:7px;background:none;color:var(--text-3);font-size:var(--t-xs);font-weight:500;cursor:pointer}
.thema-wahl button .sym{width:16px;height:16px}
.thema-wahl button[aria-pressed="true"]{background:var(--erhoeht);color:var(--text);box-shadow:var(--e1)}
.thema-wahl.gross{max-width:420px;margin:12px 0 0}
.thema-wahl.gross button{flex-direction:row;justify-content:center;gap:8px;padding:9px;font-size:var(--t-sm)}
.konto-stand{padding:6px 10px 2px;font-size:var(--t-xs);line-height:1.7;color:var(--text-3)}
.konto-stand #logout{display:flex;align-items:center;gap:10px;margin:6px -6px 0;padding:8px 6px;border-radius:8px;color:var(--text);font-size:var(--t-sm);font-weight:500;text-decoration:none}
.konto-stand #logout::before{content:"";width:16px;height:16px;background:currentColor;opacity:.6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5h4a1.5 1.5 0 0 1 1.5 1.5v12a1.5 1.5 0 0 1-1.5 1.5h-4'/%3E%3Cpath d='M10 16.5L5.5 12 10 7.5M5.5 12H15'/%3E%3C/svg%3E") center/16px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5h4a1.5 1.5 0 0 1 1.5 1.5v12a1.5 1.5 0 0 1-1.5 1.5h-4'/%3E%3Cpath d='M10 16.5L5.5 12 10 7.5M5.5 12H15'/%3E%3C/svg%3E") center/16px no-repeat}
.konto-stand #logout:hover{background:var(--sanft)}
.rechtslinks{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--t-xs);padding:4px 10px 6px}
.rechtslinks a{color:var(--text-3)}
.pcfuss{padding:4px 10px;font-size:var(--t-xs);color:var(--text-3);line-height:1.6}

/* Einrichtung und Zugang in der Leiste */
.einrichtung{display:block;width:100%;text-align:left;padding:12px;margin-bottom:6px;border:0;border-radius:12px;background:var(--flaeche);box-shadow:var(--e1);cursor:pointer;transition:box-shadow var(--dur-2)}
.einrichtung:hover{box-shadow:var(--e2)}
.einrichtung b{display:block;font-size:var(--t-sm);font-weight:600;color:var(--text)}
.einrichtung .balken{display:block;height:6px;border-radius:999px;background:var(--sanft);margin:8px 0 7px;overflow:hidden}
.einrichtung .balken i{display:block;height:100%;border-radius:inherit;background:var(--akzent);transform-origin:left;animation:fuellen 1s var(--expo) both .2s}
@keyframes fuellen{from{transform:scaleX(0)}}
.einrichtung small{display:block;font-size:var(--t-xs);color:var(--text-3);line-height:1.4}
.testhinweis{display:flex;align-items:center;gap:8px;margin:2px 0 4px;padding:6px 10px;border-radius:8px;font-size:var(--t-xs);font-weight:600;color:var(--text-2);text-decoration:none !important}
.testhinweis i{width:7px;height:7px;border-radius:50%;background:var(--akzent-diagramm);flex:none}
.testhinweis:hover{background:var(--sanft)}
.testhinweis.gut i{background:var(--gut-punkt)} .testhinweis.warn{color:var(--wartet)} .testhinweis.warn i{background:var(--wartet-punkt)}
.testhinweis.schlecht{color:var(--nein)} .testhinweis.schlecht i{background:var(--nein-punkt)}

/* Hauptbereich */
.main{min-width:0;width:100%;max-width:1260px;margin:0 auto;padding:28px clamp(16px,3vw,40px) 80px}
.main:focus{outline:0}
.main.seite-angebot{max-width:1360px}
.main.seite-einstellungen,.main.seite-aussehen,.main.seite-abrechnung{max-width:1080px}
.main.seite-ein>*{animation:seite-ein 220ms var(--aus) backwards}
@keyframes seite-ein{from{opacity:0;transform:translateY(6px)}}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.page-head>div:first-child{min-width:0}
.page-head h1{font:600 var(--t-2xl)/1.15 var(--f-anzeige);letter-spacing:-.018em}
.page-head p{margin-top:6px;color:var(--text-2);font-size:var(--t-base)}
.page-head .aktionen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.adr-inline{font-size:var(--t-sm);color:var(--text)}
.zurueck{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:2px 0;margin-bottom:10px;color:var(--text-3);font-size:var(--t-sm);font-weight:500;cursor:pointer}
.zurueck:hover{color:var(--text)}
.zurueck .sym{width:15px;height:15px}
.fusshinweis{display:flex;gap:8px;align-items:flex-start;margin:16px 0 0;color:var(--text-3);font-size:var(--t-sm)}
.fusshinweis .sym{width:16px;height:16px;margin-top:2px}

/* ---------- Flächen ---------- */
.card{background:var(--flaeche);border-radius:var(--r-md);box-shadow:var(--e1);padding:20px}
.card+.card{margin-top:16px}
.card h2{font-size:var(--t-md);font-weight:600;letter-spacing:-.01em}
.card .hint,.hint{color:var(--text-3);font-size:var(--t-sm);margin:4px 0 14px;line-height:1.5}
.karte-kopf,.flaeche-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.karte-kopf h2,.flaeche-kopf h2{margin:0}
.flaeche-kopf .rechts{margin-left:auto;color:var(--text-3);font-size:var(--t-sm)}
.karte-label{font-size:var(--t-md);font-weight:600;color:var(--text);margin-bottom:10px}
.unterkarte{border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--linie);padding:14px 16px;margin:0 0 14px}
.unterkarte .hint{margin:4px 0 12px}
.ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.ic .sym{width:18px;height:18px}
.ic.gross{width:44px;height:44px;border-radius:12px}
.ic.gross .sym{width:22px;height:22px}
.ton-wartet{background:var(--wartet-flaeche);color:var(--wartet)}
.ton-fassen{background:var(--fassen-flaeche);color:var(--fassen)}
.ton-akzent{background:var(--akzent-flaeche);color:var(--akzent)}
.ton-gut{background:var(--gut-flaeche);color:var(--gut)}
.ton-nein{background:var(--nein-flaeche);color:var(--nein)}
.ton-gesehen{background:var(--gesehen-flaeche);color:var(--gesehen)}
.ton-sanft{background:var(--sanft);color:var(--text-2)}

/* Meldungen im Inhalt */
.msg{display:block;padding:11px 14px;border-radius:10px;font-size:var(--t-sm);line-height:1.5;margin-bottom:14px}
.msg ul{margin:6px 0 0;padding-left:18px}
.msg .sym{display:inline-block;width:15px;height:15px;vertical-align:-3px;margin-right:4px}
.msg.err{background:var(--nein-flaeche);color:var(--nein)}
.msg.ok{background:var(--gut-flaeche);color:var(--gut)}
.msg.info{background:var(--akzent-flaeche);color:var(--akzent-tief)}
.msg.warn{background:var(--wartet-flaeche);color:var(--wartet)}
.msg a{color:inherit;text-decoration:underline}

/* Status-Chips */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r-xs);font-size:var(--t-xs);font-weight:600;
  white-space:nowrap;background:var(--sanft);color:var(--text-2);transition:background var(--dur-2),color var(--dur-2);vertical-align:middle}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill:empty::before,.pill:not([class*=" "])::before{display:none}
.pill.entwurf{background:var(--sanft);color:var(--text-2)}
.pill.wartet_freigabe{background:var(--wartet-flaeche);color:var(--wartet)}
.pill.versendet,.pill.link_bereit{background:var(--akzent-flaeche);color:var(--akzent)}
.pill.angesehen{background:var(--gesehen-flaeche);color:var(--gesehen)}
.pill.angenommen{background:var(--gut-flaeche);color:var(--gut)}
.pill.abgelehnt{background:var(--nein-flaeche);color:var(--nein)}
.pill.abgelaufen{background:var(--sanft);color:var(--text-3)}
.pill.nachfass{background:var(--fassen-flaeche);color:var(--fassen)}
.zaehler{height:22px;padding:0 8px;border-radius:var(--r-xs);display:inline-flex;align-items:center;font-size:var(--t-xs);font-weight:600;background:var(--wartet-flaeche);color:var(--wartet);font-variant-numeric:tabular-nums}
.zaehler.gut{background:var(--gut-flaeche);color:var(--gut)}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-top:4px;border-radius:var(--r-xs);background:var(--akzent-flaeche);color:var(--akzent);font-size:var(--t-xs);font-weight:600}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 11px;border:0;border-radius:999px;background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--linie);
  color:var(--text-2);font-size:var(--t-sm);font-weight:500;cursor:pointer;transition:box-shadow var(--dur-1),color var(--dur-1)}
.chip:hover{box-shadow:inset 0 0 0 1px var(--akzent);color:var(--akzent)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip2,.fontcard{display:flex;flex-direction:column;gap:3px;width:100%;padding:12px 14px;border:0;border-radius:12px;background:var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--linie);text-align:left;cursor:pointer;transition:box-shadow var(--dur-1),background var(--dur-1)}
.chip2:hover,.fontcard:hover{box-shadow:inset 0 0 0 1px var(--feld-hover)}
.chip2.on,.fontcard.on{box-shadow:inset 0 0 0 1.5px var(--akzent),0 0 0 3px var(--akzent-flaeche);background:var(--akzent-flaeche)}
.chip2 b,.fontcard b{font-size:var(--t-base);font-weight:600;color:var(--text)}
.fontcard b{font-size:var(--t-lg)}
.chip2 span,.fontcard span{font-size:var(--t-xs);color:var(--text-3)}

/* Leerzustände */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 20px;color:var(--text-2)}
.empty .big{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--sanft);color:var(--text-4);margin-bottom:16px}
.empty .big .sym{width:32px;height:32px;stroke-width:1.4}
.empty h2{font-size:var(--t-md);font-weight:600;color:var(--text)}
.empty p{max-width:46ch;margin:6px auto 0;font-size:var(--t-sm);color:var(--text-2)}
.empty-aktion{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.empty.klein-leer{padding:32px 16px}
.empty.klein-leer .big{width:56px;height:56px}
.empty.klein-leer .big .sym{width:24px;height:24px}
.empty.klein-leer .btn{margin-top:14px}
.adresse-kopieren{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px;padding:8px 8px 8px 14px;border-radius:10px;background:var(--akzent-flaeche)}
.adresse-kopieren .mono{color:var(--akzent-tief);font-weight:500;word-break:break-all}

/* Skelett */
.skelett{display:grid;gap:12px;padding:4px 0}
.skelett-zeile{display:flex;justify-content:space-between;gap:20px}
.skelett i,.skelett-karte i,.skelett-karte b,.skelett-kopf i{display:block;height:12px;border-radius:6px;
  background:linear-gradient(90deg,var(--sanft) 0%,var(--sanft-2) 40%,var(--sanft) 80%);background-size:200% 100%;animation:schimmer 1.4s linear infinite}
.skelett-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.skelett-karte{display:grid;gap:10px;padding:16px;border-radius:var(--r-md);background:var(--flaeche);box-shadow:var(--e1)}
.skelett-karte b{height:24px;width:55%}
.skelett-kopf{display:grid;gap:10px;margin-bottom:24px}
.skelett-kopf i:first-child{height:28px;width:280px} .skelett-kopf i:last-child{width:200px}
.app-skelett{display:grid;grid-template-columns:272px minmax(0,1fr);min-height:100vh}
.app-skelett .side{border-right:1px solid var(--linie);padding:20px 16px}
@keyframes schimmer{from{background-position:200% 0}to{background-position:0 0}}

/* ---------- Tabellen ---------- */
.tabelle-halter{overflow-x:auto;margin:0 -20px}
table.list{width:100%;border-collapse:collapse;font-size:var(--t-base)}
table.list th{text-align:left;font-size:var(--t-xs);font-weight:500;color:var(--text-3);padding:10px 12px;border-bottom:1px solid var(--linie);white-space:nowrap;background:none}
table.list th:first-child,table.list td:first-child{padding-left:20px}
table.list th:last-child,table.list td:last-child{padding-right:20px}
table.list td{padding:12px;border-bottom:1px solid var(--linie-leise);vertical-align:middle}
table.list tbody tr:last-child td{border-bottom:0}
table.list tbody tr{transition:background var(--dur-1)}
table.list tbody tr[data-open],table.list tbody tr[data-editk],table.list tbody tr[data-edit],table.list tbody tr[data-konto]{cursor:pointer}
table.list tbody tr:hover{background:var(--sanft)}
table.list tbody tr:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px;border-radius:0}
table.list td strong,table.list td b{font-weight:600}
table.list td.r,table.list th.r{text-align:right}
table.list .betrag strong{white-space:nowrap}
th.sortbar{padding:0 !important}
th.sortbar button{display:inline-flex;align-items:center;gap:2px;height:36px;padding:0 12px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap}
th.sortbar:first-child button{padding-left:20px}
th.sortbar.r button{justify-content:flex-end;width:100%;padding-right:20px}
th.sortbar button:hover{color:var(--text)}
th.sortbar.aktiv{color:var(--text)}
th.sortbar .pf .sym{width:14px;height:14px}
table.angebote .kunde .k1{display:flex;align-items:center;gap:6px;min-width:0}
table.angebote .kunde .k1 strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.angebote .quelle{color:var(--text-4);display:inline-flex}
table.angebote .quelle .sym{width:14px;height:14px}
table.angebote td.kunde{width:100%;max-width:0}
table.angebote .k2{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.angebote td.nr{color:var(--text-3);font-size:var(--t-sm);white-space:nowrap}
table.angebote td.datum{color:var(--text-3);font-size:var(--t-sm);white-space:nowrap}
table.angebote td.status{white-space:nowrap}
table.angebote tr.gewonnen-blitz{animation:gewonnen 1.2s var(--aus)}
@keyframes gewonnen{from{background:var(--gut-flaeche)}}
.liste-mehr{padding:12px 20px 0;border-top:1px solid var(--linie-leise);margin:0 -20px}
.liste-karte{padding-bottom:12px}
.liste-karte.voll{padding-top:16px}

/* Suche und Filter */
.suchzeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.suchfeld{position:relative;flex:1;min-width:220px;display:flex;align-items:center}
.suchfeld>.sym{position:absolute;left:11px;width:16px;height:16px;color:var(--text-3);pointer-events:none}
.suchfeld input{padding-left:34px;padding-right:38px;background:var(--bg)}
.suchfeld input:focus{background:var(--flaeche)}
.suchfeld kbd{position:absolute;right:8px;pointer-events:none}
.suchfeld input:focus~kbd{display:none}
.suchzeile .hint{margin:0;white-space:nowrap}
.filterchips{display:flex;gap:6px;flex-wrap:wrap}
.filterchips button{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 11px;border:0;border-radius:999px;background:transparent;
  box-shadow:inset 0 0 0 1px var(--linie);color:var(--text-2);font-size:var(--t-sm);font-weight:500;cursor:pointer;transition:background var(--dur-1),color var(--dur-1),box-shadow var(--dur-1)}
.filterchips button:hover{box-shadow:inset 0 0 0 1px var(--feld-hover);color:var(--text)}
.filterchips button.on{background:var(--text);color:var(--bg);box-shadow:none}
.filterchips button.hinweis:not(.on){color:var(--fassen);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fassen-punkt) 45%,transparent)}
.filterchips button .n{opacity:.6;font-variant-numeric:tabular-nums}

/* Reiter */
.reiter{position:relative;display:flex;gap:2px;border-bottom:1px solid var(--linie);margin:-4px 0 22px;overflow-x:auto;scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
.reiter button{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;background:none;color:var(--text-3);
  font-size:var(--t-base);font-weight:500;white-space:nowrap;cursor:pointer;transition:color var(--dur-1)}
.reiter button:hover{color:var(--text)}
.reiter button.on{color:var(--text)}
.reiter button .n{font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.reiter:not(.einst-reiter) button.on::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--akzent)}
.reiter-strich{position:absolute;left:0;bottom:0;height:2px;border-radius:2px;background:var(--akzent);transition:transform 200ms var(--hin-her),width 200ms var(--hin-her);pointer-events:none}

/* ---------- Toasts ---------- */
.toasts{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:var(--z-toast);display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;max-width:calc(100vw - 32px)}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;width:max-content;max-width:380px;padding:10px 10px 10px 12px;border-radius:12px;
  background:var(--text);color:var(--bg);box-shadow:0 18px 40px -12px rgba(0,0,0,.45);font-size:var(--t-sm);line-height:1.4;animation:toast-ein 240ms var(--aus)}
:root[data-theme="dark"] .toast{background:var(--erhoeht);color:var(--text);box-shadow:var(--e3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .toast{background:var(--erhoeht);color:var(--text);box-shadow:var(--e3)}}
.toast.raus{animation:toast-aus 160ms var(--ein) forwards}
@keyframes toast-ein{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes toast-aus{to{opacity:0;transform:translateY(8px)}}
.toast-ic{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;background:color-mix(in srgb,currentColor 18%,transparent)}
.toast-ic .sym{width:12px;height:12px;stroke-width:2.4}
.toast.ok .toast-ic{background:var(--gut-punkt);color:#fff}
.toast.fehler .toast-ic{background:var(--nein-punkt);color:#fff}
.toast-text{flex:1;min-width:0}
.toast-aktion{border:0;background:none;color:inherit;font-weight:600;font-size:var(--t-sm);padding:4px 8px;border-radius:6px;cursor:pointer;white-space:nowrap;
  box-shadow:inset 1px 0 0 color-mix(in srgb,currentColor 25%,transparent);border-radius:0 6px 6px 0}
.toast-aktion:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.toast-zu{width:24px;height:24px;flex:none;display:grid;place-items:center;border:0;border-radius:6px;background:none;color:inherit;opacity:.55;cursor:pointer}
.toast-zu:hover{opacity:1}
.toast-zu .sym{width:14px;height:14px}

/* ---------- Dialoge ---------- */
.modal-bg{position:fixed;inset:0;z-index:var(--z-dialog);display:grid;place-items:center;padding:20px;background:var(--schleier);animation:schleier-ein 200ms var(--aus)}
@supports (backdrop-filter:blur(4px)){.modal-bg,.palette-bg{backdrop-filter:blur(4px)}}
.modal-bg.zu{animation:schleier-aus 140ms var(--ein) forwards;pointer-events:none}
.modal-bg.zu .modal{animation:dialog-aus 140ms var(--ein) forwards}
@keyframes schleier-ein{from{opacity:0}}
@keyframes schleier-aus{to{opacity:0}}
.modal{position:relative;width:100%;max-width:560px;max-height:min(86vh,860px);display:flex;flex-direction:column;border-radius:var(--r-lg);
  background:var(--erhoeht);box-shadow:var(--e4);overflow:hidden;animation:dialog-ein 220ms var(--aus)}
.modal.breit{max-width:720px}
.modal.klein{max-width:440px}
.modal:focus{outline:0}
@keyframes dialog-ein{from{opacity:0;transform:translateY(8px) scale(.97)}}
@keyframes dialog-aus{to{opacity:0;transform:translateY(6px) scale(.98)}}
.modal .greif{display:none}
.modal .h{display:flex;align-items:center;gap:12px;padding:18px 20px 6px}
.modal .h h2{flex:1;min-width:0;font-size:var(--t-lg);font-weight:600;overflow:hidden;text-overflow:ellipsis}
.modal .b{padding:12px 20px 20px;overflow-y:auto}
.modal .b>p:first-child{margin-top:0}
.modal .b p{margin:0 0 12px;color:var(--text-2);font-size:var(--t-base)}
.modal .f{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--linie);background:var(--erhoeht)}
.modal .mono{display:block;padding:10px 12px;border-radius:9px;background:var(--sanft);word-break:break-all;color:var(--text)}
textarea.hoch{min-height:220px}
.erfolg-zeile{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--gut-flaeche);color:var(--gut);margin-bottom:16px;font-size:var(--t-sm)}
.erfolg-zeile .sym{width:18px;height:18px;flex:none;stroke-width:2.2}
.wahlliste{display:grid;gap:6px}
.wahl-zeile{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:0;border-radius:12px;background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--linie);text-align:left;cursor:pointer;transition:box-shadow var(--dur-1)}
.wahl-zeile:hover{box-shadow:inset 0 0 0 1px var(--akzent)}
.wahl-zeile>span{flex:1}
.wahl-zeile b{display:block;font-size:var(--t-base)}
.wahl-zeile small{color:var(--text-3);font-size:var(--t-xs)}
.wahl-zeile>.sym{color:var(--text-3)}
dl.kuerzel{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;align-items:center}
dl.kuerzel dt{display:flex;gap:4px;align-items:center;flex-wrap:wrap;white-space:nowrap}
dl.kuerzel dt span{font-size:var(--t-xs);color:var(--text-3)}
dl.kuerzel dd{margin:0;color:var(--text-2);font-size:var(--t-sm)}

/* ---------- Befehlspalette ---------- */
.palette-bg{position:fixed;inset:0;z-index:var(--z-palette);display:flex;justify-content:center;align-items:flex-start;padding:12vh 16px 16px;background:var(--schleier);animation:schleier-ein 160ms var(--aus)}
.palette-bg.zu{animation:schleier-aus 100ms var(--ein) forwards}
.palette{width:min(620px,100%);max-height:72vh;display:flex;flex-direction:column;border-radius:16px;background:var(--erhoeht);box-shadow:var(--e4);overflow:hidden;animation:palette-ein 160ms var(--aus)}
@keyframes palette-ein{from{opacity:0;transform:scale(.98)}}
.palette-feld{display:flex;align-items:center;gap:10px;padding:0 14px 0 16px;border-bottom:1px solid var(--linie)}
.palette-feld>.sym{color:var(--text-3)}
.palette-feld input{outline:none !important;height:54px;padding:0;border:0;background:none;box-shadow:none !important;font-size:var(--t-md)}
.palette-liste{flex:1;overflow-y:auto;padding:6px}
.palette-gruppe{padding:10px 10px 4px;font-size:var(--t-xs);font-weight:600;color:var(--text-3)}
.palette-liste button{display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:7px 10px;border:0;border-radius:9px;background:none;text-align:left;color:var(--text);cursor:pointer}
.palette-liste button.an{background:var(--sanft)}
.palette-liste button>.sym{width:16px;height:16px;color:var(--text-3)}
.palette-liste button.an>.sym{color:var(--akzent)}
.palette-liste .pt{flex:1;min-width:0}
.palette-liste .pt b{display:block;font-weight:500;font-size:var(--t-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-liste .pt small{display:block;color:var(--text-3);font-size:var(--t-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-liste .pb{font-size:var(--t-sm);font-weight:600;white-space:nowrap}
.palette-leer{padding:28px 16px;text-align:center;color:var(--text-3);font-size:var(--t-sm)}
.palette-fuss{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--linie);font-size:var(--t-xs);color:var(--text-3)}
.palette-fuss kbd{min-width:18px;height:18px;margin-right:2px}

/* ---------- Übersicht ---------- */
.gruss h1{font-size:30px}
.zu-tun{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}
.zu-tun.anz-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.zu-tun.anz-1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.aufgabe{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;align-items:start;padding:16px;border:0;border-radius:var(--r-md);background:var(--flaeche);
  box-shadow:var(--e1);text-align:left;cursor:pointer;color:var(--text);transition:box-shadow 150ms var(--aus),transform 150ms var(--aus)}
.aufgabe:hover{box-shadow:var(--e2);transform:translateY(-1px)}
.aufgabe .ic{grid-row:span 3}
.aufgabe b{font-size:var(--t-base);font-weight:600}
.aufgabe .sub{color:var(--text-2);font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aufgabe .los{margin-top:8px;display:inline-flex;align-items:center;gap:4px;color:var(--akzent);font-weight:600;font-size:var(--t-sm)}
.aufgabe .los .sym{width:14px;height:14px;transition:transform var(--dur-2) var(--aus)}
.aufgabe:hover .los .sym{transform:translateX(3px)}
.kz-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kz{display:grid;gap:6px;align-content:start;padding:16px 18px 14px;border-radius:var(--r-md);background:var(--flaeche);box-shadow:var(--e1);min-width:0}
.kz .etikett{font-size:var(--t-sm);color:var(--text-3)}
.kz .zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px}
.kz .wert{font:600 26px/1.1 var(--f-text);letter-spacing:-.02em;white-space:nowrap}
.kz .klein,.kz .delta{font-size:var(--t-xs)}
.kz .klein{color:var(--text-3)}
.kz .delta{font-weight:600}
.kz .delta.plus{color:var(--gut)}
.kz .delta.minus{color:var(--text-3)}
.spark{flex:none;overflow:visible;color:var(--akzent-diagramm)}
.spark-linie{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spark circle{fill:currentColor}
.erstbesuch .spark-linie{stroke-dasharray:100;stroke-dashoffset:100;animation:zeichnen 900ms var(--expo) forwards 200ms}
.erstbesuch .spark-flaeche{opacity:0;animation:da 600ms ease forwards 700ms}
.erstbesuch .spark circle{opacity:0;animation:da 300ms ease forwards 1000ms}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes da{to{opacity:1}}
.zwei-spalten{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:start}
.zwei-spalten.eins{grid-template-columns:minmax(0,1fr)}
.zwei-spalten>.card+.card{margin-top:0}
.legende{display:flex;gap:16px;margin:-4px 0 4px;color:var(--text-2);font-size:var(--t-xs)}
.legende span{display:inline-flex;align-items:center;gap:6px}
.legende i,.diagramm-tip i{width:10px;height:10px;border-radius:3px;display:inline-block}
.p-ges{background:var(--akzent-blass)} .p-gew{background:var(--akzent-diagramm)}
.diagramm{position:relative}
.saeulen{display:block;width:100%;height:auto}
.saeulen .gitter line{stroke:var(--raster);stroke-width:1}
.saeulen text{fill:var(--text-3);font:500 11px var(--f-text);font-variant-numeric:tabular-nums}
.saeule{fill:var(--akzent-blass);transform-box:fill-box;transform-origin:bottom;transition:opacity var(--dur-1)}
.saeule.gew{fill:var(--akzent-diagramm)}
.erstbesuch .saeule{animation:wachsen 600ms var(--expo) both;animation-delay:var(--v,0ms)}
@keyframes wachsen{from{transform:scaleY(0)}}
.treffer{fill:transparent;cursor:default}
.treffer.an{fill:color-mix(in srgb,var(--text) 4%,transparent)}
.diagramm-tip{position:absolute;left:0;top:0;z-index:2;pointer-events:none;display:grid;gap:3px;padding:8px 10px;border-radius:9px;background:var(--erhoeht);box-shadow:var(--e3);font-size:var(--t-xs);color:var(--text-2);white-space:nowrap}
.diagramm-tip b{color:var(--text)}
.diagramm-tip span{display:flex;align-items:center;gap:6px}
.pipeline{display:grid;gap:16px;padding-top:4px}
.pipe-balken{display:flex;gap:2px;height:12px;border-radius:999px;overflow:hidden;background:var(--sanft)}
.pipe-balken i{display:block;height:100%;flex-basis:0;transform-origin:left}
.erstbesuch .pipe-balken i{animation:fuellen 800ms var(--expo) both;animation-delay:var(--v,0ms)}
.pipe-zeilen{display:grid;gap:10px}
.pipe-zeilen div{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;align-items:center;font-size:var(--t-sm)}
.pipe-zeilen i{width:8px;height:8px;border-radius:50%}
.pipe-zeilen .n{color:var(--text-3);min-width:16px;text-align:right}
.pipe-zeilen b{font-weight:600;min-width:84px;text-align:right}
.aktivitaet{display:grid}
.akt{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border:0;border-bottom:1px solid var(--linie-leise);
  background:none;text-align:left;color:inherit;width:100%;font:inherit}
.akt:last-child{border-bottom:0}
button.akt{cursor:pointer;border-radius:0}
button.akt:hover .akt-text{color:var(--text)}
.erstbesuch .akt{animation:seite-ein 360ms var(--aus) both;animation-delay:var(--v,0ms)}
.akt .ic{width:28px;height:28px;border-radius:50%}
.akt .ic .sym{width:14px;height:14px}
.akt-text{font-size:var(--t-sm);color:var(--text-2);line-height:1.45;padding-top:4px}
.akt-text b{color:var(--text);font-weight:600}
.akt-text .mono{white-space:nowrap;font-size:11px}
.akt time{font-size:var(--t-xs);color:var(--text-3);white-space:nowrap;padding-top:5px}
.leer-start{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.leer-start .card+.card{margin-top:0}
.einrichtung-karte .flaeche-kopf{gap:12px}
.ring{transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--sanft);stroke-width:3.5}
.ring circle.voll{stroke:var(--akzent-diagramm);stroke-linecap:round;transition:stroke-dashoffset 800ms var(--expo)}
.einricht-liste{list-style:none;margin:6px 0 0;padding:0;display:grid}
.einricht-liste li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--linie-leise)}
.einricht-liste .kreis{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--feld);font-size:var(--t-xs);font-weight:600;color:var(--text-3)}
.einricht-liste li.ja .kreis{background:var(--gut-flaeche);box-shadow:none;color:var(--gut)}
.einricht-liste .kreis .sym{width:13px;height:13px;stroke-width:2.4}
.einricht-liste .txt b{display:block;font-size:var(--t-sm);font-weight:600}
.einricht-liste .txt em{font-style:normal;font-weight:500;color:var(--text-3);font-size:var(--t-xs);margin-left:4px}
.einricht-liste .txt small{display:block;font-size:var(--t-xs);color:var(--text-3)}
.einricht-liste li.ja .txt b{color:var(--text-3);font-weight:500}
.einricht-liste .erledigt{font-size:var(--t-xs);color:var(--gut);font-weight:600}
.beispiel-karte{display:grid;gap:12px;justify-items:start;padding:24px}
.beispiel-karte h2{font:600 var(--t-xl)/1.2 var(--f-anzeige)}
.beispiel-karte p{color:var(--text-2);font-size:var(--t-base);max-width:44ch}

/* ---------- Posteingang ---------- */
.post-raster{display:grid;grid-template-columns:360px minmax(0,1fr);gap:16px;align-items:start}
.post-raster .card+.card{margin-top:0}
.post-liste{padding:6px;display:grid;gap:2px;max-height:calc(100vh - 170px);overflow-y:auto;position:sticky;top:16px}
.msg-item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;width:100%;padding:12px;border:0;border-radius:10px;background:none;text-align:left;color:inherit;cursor:pointer;transition:background var(--dur-1)}
.msg-item:hover{background:var(--sanft)}
.msg-item.aktiv{background:var(--akzent-flaeche)}
.msg-item .ic{width:32px;height:32px;border-radius:9px;background:var(--sanft);color:var(--text-2)}
.msg-item.neu .ic{background:var(--akzent-flaeche);color:var(--akzent)}
.msg-item .ic .sym{width:16px;height:16px}
.msg-item .k{min-width:0;display:grid;gap:2px}
.k-kopf{display:flex;gap:8px;align-items:baseline}
.k-kopf b{flex:1;min-width:0;font-size:var(--t-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-item.neu .k-kopf b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--akzent);margin-left:6px;vertical-align:1px}
.k-kopf time{font-size:var(--t-xs);color:var(--text-3);white-space:nowrap}
.msg-item .betreff{font-size:var(--t-sm);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-item .txt{font-size:var(--t-xs);color:var(--text-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg-item .pill{justify-self:start;margin-top:4px}
.post-detail{padding:24px;min-height:280px}
.post-detail.im-blatt{padding:0;min-height:0}
.pd-kopf{display:flex;gap:16px;align-items:flex-start;margin-bottom:16px}
.pd-kopf>div{flex:1;min-width:0}
.pd-kopf h2{font:600 var(--t-xl)/1.25 var(--f-anzeige);letter-spacing:-.012em;margin-bottom:4px}
.pd-text{white-space:pre-wrap;font-size:var(--t-base);line-height:1.65;color:var(--text);padding:16px 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);max-height:52vh;overflow-y:auto}
.pd-aktionen{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* ---------- Neues Angebot ---------- */
.neu-feld{position:relative;padding:0;overflow:hidden;transition:box-shadow var(--dur-2) var(--aus)}
.neu-feld:focus-within{box-shadow:var(--e1),0 0 0 3px var(--akzent-flaeche),0 0 0 1px var(--akzent)}
.neu-inhalt{position:relative}
.gross-feld{display:block;min-height:240px;height:240px;padding:20px 22px;border-radius:0;box-shadow:none !important;background:transparent;font-size:var(--t-md);line-height:1.6;resize:vertical}
.ablage-hinweis{position:absolute;inset:8px;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:12px;
  border:2px dashed var(--akzent);background:color-mix(in srgb,var(--akzent-flaeche) 92%,var(--flaeche));color:var(--akzent-tief);pointer-events:none;text-align:center;padding:16px}
.ablage-hinweis .sym{width:28px;height:28px}
.ablage-hinweis b{font-size:var(--t-lg)}
.ablage-hinweis span{font-size:var(--t-sm)}
.neu-feld.over .ablage-hinweis{display:flex;animation:da 120ms ease both}
.neu-fuss{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px 12px;border-top:1px solid var(--linie);background:var(--bg)}
.beispiele{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.beispiele .chip{height:26px;font-size:var(--t-xs)}
.katalog-zahl{white-space:nowrap}
#genmsg:not(:empty),#upmsg:not(:empty){padding:0 14px 2px}
#genmsg .msg,#upmsg .msg{margin:10px 0}
.datei-kopf{display:flex;align-items:center;gap:12px;padding:16px 18px 0}
.datei-kopf b{display:block;font-size:var(--t-base)}
.datei-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--akzent-flaeche);color:var(--akzent);flex:none}
.mit-datei .gross-feld{min-height:260px}
.ki-schritte{padding:28px 26px;min-height:240px}
.ki-kopf{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--akzent)}
.ki-kopf b{color:var(--text);font-size:var(--t-md)}
.ki-kopf .sym{animation:funkeln 1.6s ease-in-out infinite}
@keyframes funkeln{50%{transform:scale(.86) rotate(12deg);opacity:.7}}
.ki-schritte ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ki-schritte li{display:flex;align-items:center;gap:12px;color:var(--text-4);font-size:var(--t-base);opacity:.6;transition:opacity var(--dur-2),color var(--dur-2)}
.ki-schritte li .kreis{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--feld);flex:none}
.ki-schritte li .kreis .sym,.ki-schritte li .kreis .spin{display:none}
.ki-schritte li .kreis .sym{width:12px;height:12px;stroke-width:2.6}
.ki-schritte li.jetzt{opacity:1;color:var(--text);animation:seite-ein 180ms var(--aus)}
.ki-schritte li.jetzt .kreis{box-shadow:none}
.ki-schritte li.jetzt .kreis .spin{display:block;width:16px;height:16px;color:var(--akzent)}
.ki-schritte li.jetzt .txt{background:linear-gradient(90deg,var(--text) 0%,var(--text-4) 50%,var(--text) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:schimmer 1.4s linear infinite}
.ki-schritte li.fertig{opacity:1;color:var(--text-2)}
.ki-schritte li.fertig .kreis{background:var(--gut-flaeche);box-shadow:none;color:var(--gut)}
.ki-schritte li.fertig .kreis .sym{display:block}
.neu-oder{margin-top:28px}
.neu-oder .eyebrow{margin-bottom:10px}
.neu-wege{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.weg-karte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:start;padding:14px 16px;border:0;border-radius:var(--r-md);background:var(--flaeche);
  box-shadow:var(--e1);text-align:left;color:var(--text);cursor:pointer;transition:box-shadow 150ms var(--aus),transform 150ms var(--aus)}
.weg-karte:hover{box-shadow:var(--e2);transform:translateY(-1px)}
.weg-karte>.sym{grid-row:span 2;width:20px;height:20px;margin-top:1px;color:var(--text-3)}
.weg-karte b{font-size:var(--t-base);font-weight:600}
.weg-karte span{font-size:var(--t-xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Angebots-Editor ---------- */
.ed-kopf{position:relative;z-index:6;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ed-titelblock{flex:1;min-width:280px}
.ed-titel{height:auto;padding:2px 6px;margin-left:-6px;border-radius:8px;background:transparent;box-shadow:none;
  font:600 var(--t-2xl)/1.2 var(--f-anzeige);letter-spacing:-.018em;color:var(--text);text-overflow:ellipsis}
.ed-titel:hover{box-shadow:inset 0 0 0 1px var(--linie)}
.ed-titel:focus{background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--akzent),0 0 0 3px var(--akzent-flaeche)}
.ed-titel:disabled{background:transparent;box-shadow:none;color:var(--text);cursor:default}
.meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;color:var(--text-3);font-size:var(--t-sm)}
.trenner-punkt{width:3px;height:3px;border-radius:50%;background:var(--text-4)}
.schreibschutz{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);color:var(--text-3)}
.schreibschutz .sym{width:13px;height:13px}
.savestate{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);color:var(--text-3);white-space:nowrap;transition:opacity 600ms}
.savestate i{width:7px;height:7px;border-radius:50%;background:var(--gut-punkt);display:inline-block}
.savestate .sym{width:13px;height:13px;color:var(--gut);stroke-width:2.4;animation:da 180ms ease both}
.savestate.offen i{background:var(--wartet-punkt);animation:puls 1s ease-in-out infinite}
.savestate.fehler{color:var(--nein)} .savestate.fehler i{background:var(--nein-punkt)}
.savestate.ruhig{opacity:.75}
@keyframes puls{50%{opacity:.35}}
.ed-aktionen{display:flex;align-items:center;gap:8px}
.mehr-halter{position:relative}
.ed-menu{right:0;top:calc(100% + 6px);min-width:260px;transform-origin:top right}
.ed-menu select{height:32px;font-size:var(--t-sm)}
.schritte{list-style:none;display:flex;align-items:center;margin:0 0 18px;padding:12px 18px;border-radius:var(--r-md);background:var(--flaeche);box-shadow:var(--e1);overflow-x:auto;scrollbar-width:none}
.schritte .schritt{display:flex;align-items:center;gap:8px;white-space:nowrap;color:var(--text-3);font-size:var(--t-sm)}
.schritte .schritt b{font-weight:500}
.schritte .schritt small{display:block;font-size:11px;color:var(--text-4);line-height:1.1}
.schritte .schritt>span{display:flex;flex-direction:column}
.schritte .schritt i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1.5px var(--feld);transition:all var(--dur-3) var(--aus)}
.schritte .schritt i .sym{width:12px;height:12px;stroke-width:2.6;opacity:0}
.schritte .schritt.fertig{color:var(--text-2)}
.schritte .schritt.fertig i{background:var(--akzent);box-shadow:none;color:var(--akzent-text)}
.schritte .schritt.fertig i .sym{opacity:1}
.schritte .schritt.jetzt{color:var(--text)}
.schritte .schritt.jetzt b{font-weight:600}
.schritte .schritt.jetzt i{box-shadow:inset 0 0 0 2px var(--akzent),0 0 0 4px var(--akzent-flaeche)}
.schritte .schritt.fertig.gut i{background:var(--gut-punkt);color:#fff}
.schritte .schritt.fertig.nein i{background:var(--nein-punkt);color:#fff}
.schritte .schritt.aus i{box-shadow:inset 0 0 0 1.5px var(--text-4)}
.schritte .strich{flex:1;min-width:24px;height:1.5px;margin:0 12px;background:var(--linie);position:relative;overflow:hidden}
.schritte .strich::after{content:"";position:absolute;inset:0;background:var(--akzent);transform:scaleX(0);transform-origin:left;transition:transform 400ms var(--expo)}
.schritte .strich.voll::after{transform:scaleX(1)}
.ende-gut .strich.voll::after{background:var(--gut-punkt)}
.erfolg-band{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;margin-bottom:16px;border-radius:var(--r-md);background:var(--gut-flaeche);color:var(--text)}
.erfolg-band.nein{background:var(--sanft)}
.eb-ic{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--gut-punkt);color:#fff}
.erfolg-band.nein .eb-ic{background:var(--text-4)}
.eb-ic .zeichne{stroke-dasharray:24;stroke-dashoffset:24;animation:zeichnen 400ms var(--feder) forwards 120ms}
.eb-text{flex:1;min-width:240px;font-size:var(--t-sm);line-height:1.5}
.eb-text b{font-weight:600}
.eb-text small{display:block;color:var(--text-2);font-size:var(--t-xs);margin-top:2px}
.eb-betrag{text-align:right}
.eb-betrag span{display:block;font-size:var(--t-xs);color:var(--text-2)}
.eb-betrag b{font:600 var(--t-xl)/1.1 var(--f-text);color:var(--gut);letter-spacing:-.02em}
.ed-raster{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.ed-haupt>.card+.card,.ed-haupt>details+.card,.ed-haupt>.card+details{margin-top:16px}
.ed-seite{position:sticky;top:16px;display:grid;gap:12px;min-width:0}
.ed-seite>*{min-width:0}
.ed-seite .card+.card{margin-top:0}
.ed-seite .card{padding:16px 18px}
.ed-summenkopf{display:grid;gap:2px;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--linie)}
.ed-betrag{font:600 var(--t-2xl)/1.15 var(--f-text);letter-spacing:-.025em}
.sumbox .line{display:flex;justify-content:space-between;gap:12px;padding:4px 0;color:var(--text-2);font-size:var(--t-sm)}
.sumbox .line span:last-child{white-space:nowrap}
.sumbox .line.total{margin-top:6px;padding-top:10px;border-top:1px solid var(--linie);color:var(--text);font-weight:600;font-size:var(--t-base)}
.kunde-kompakt{display:flex;align-items:center;gap:12px}
.kunde-kompakt .ini{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--sanft);color:#fff;font:600 13px/1 var(--f-text)}
.kunde-kompakt.leer .ini{color:var(--text-3);box-shadow:inset 0 0 0 1.5px dashed var(--feld)}
.kk-text{flex:1;min-width:0}
.kk-text b,.kk-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kk-text b{font-size:var(--t-sm);font-weight:600}
.kk-text small{font-size:var(--t-xs);color:var(--text-3)}
.checkliste{display:grid;gap:8px}
.checkliste>div,.check-erledigt>div{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);color:var(--text-2);line-height:1.4}
.checkliste .kreis{width:18px;height:18px;border-radius:50%;flex:none;display:grid;place-items:center;margin-top:1px}
.checkliste .offen .kreis{box-shadow:inset 0 0 0 1.5px var(--wartet-punkt)}
.checkliste .offen{color:var(--text)}
.checkliste .ja .kreis{background:var(--gut-flaeche);color:var(--gut)}
.checkliste .kreis .sym{width:11px;height:11px;stroke-width:2.6}
.check-erledigt{margin-top:2px}
.check-erledigt summary{cursor:pointer;font-size:var(--t-xs);font-weight:600;color:var(--text-3);list-style:none;padding:2px 0}
.check-erledigt summary::-webkit-details-marker{display:none}
.check-erledigt summary::before{content:"›";display:inline-block;margin-right:6px;transition:transform var(--dur-2)}
.check-erledigt[open] summary::before{transform:rotate(90deg)}
.check-erledigt>div{margin-top:8px;color:var(--text-3)}
.verlauf{display:grid}
.hist{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:start;padding:8px 0;font-size:var(--t-sm);position:relative}
.verlauf .hist:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:32px;bottom:-4px;width:1px;background:var(--linie)}
.hist .ic{width:24px;height:24px;border-radius:50%}
.hist .ic .sym{width:12px;height:12px}
.hist-text{color:var(--text-2);padding-top:2px;line-height:1.4}
.hist time{font-size:var(--t-xs);padding-top:3px;white-space:nowrap}
.nachfass-karte .hint{margin-bottom:0}
.ed-kunde .karte-kopf{margin-bottom:14px}
.kunde-wahl select{height:32px;width:auto;max-width:240px;font-size:var(--t-sm)}
.g-kunde{grid-template-columns:repeat(3,minmax(0,1fr))}
.anrede-zeile{display:flex;gap:6px}
.anrede-zeile select{width:84px;flex:none}
.anrede-zeile input{flex:1;min-width:0}
.aufklapp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
.aufklapp>summary::-webkit-details-marker{display:none}
.aufklapp>summary .pfeil-auf{margin-left:auto;width:16px;height:16px;color:var(--text-3);transition:transform 220ms var(--hin-her)}
.aufklapp[open]>summary .pfeil-auf{transform:rotate(180deg)}
.aufklapp[open]>.aufklapp-inhalt{animation:aufklapp-ein 220ms var(--hin-her)}
@keyframes aufklapp-ein{from{opacity:0;transform:translateY(-4px)}}
details.adresse{margin-top:14px;border-top:1px solid var(--linie-leise);padding-top:12px}
details.adresse summary{font-size:var(--t-sm);font-weight:600;color:var(--text-2)}
details.adresse summary .leise{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.adresse .aufklapp-inhalt{padding-top:12px}
.g-adresse{grid-template-columns:minmax(0,2fr) 110px minmax(0,1.3fr)}
.kunde-fuss{display:flex;justify-content:flex-end;margin-top:10px;margin-bottom:-6px}
details.anfrage{padding:14px 18px;margin-bottom:16px}
details.anfrage summary h2{margin:0}
details.anfrage summary .ic{width:28px;height:28px;border-radius:8px}
details.anfrage summary .ic .sym{width:15px;height:15px}
details.anfrage summary .hint{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.anfrage-text{white-space:pre-wrap;color:var(--text-2);font-size:var(--t-sm);line-height:1.6;max-height:360px;overflow:auto;margin-top:12px;padding-top:12px;border-top:1px solid var(--linie-leise)}
.verb,.qbox{border-radius:var(--r-md);padding:14px 18px;margin-bottom:16px;font-size:var(--t-sm)}
.verb{background:var(--gut-flaeche)}
.qbox{background:var(--wartet-flaeche)}
.verb h3,.qbox h3{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:600;margin-bottom:6px}
.verb h3{color:var(--gut)} .qbox h3{color:var(--wartet)}
.verb h3 .sym,.qbox h3 .sym{width:16px;height:16px}
.verb ul,.qbox ul{margin:0;padding-left:20px;color:var(--text)}
.verb li,.qbox li{margin:3px 0}
.ed-text textarea{min-height:72px;font-size:var(--t-base);line-height:1.6;background:var(--bg)}
.ed-text textarea:focus{background:var(--flaeche)}
textarea.mitwachsen{resize:none;overflow:hidden}
.ed-weitere>summary h2{margin:0;flex:none}
.weitere-kurz{margin:0 !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ed-weitere .aufklapp-inhalt{padding-top:16px}
.posten-optionen{display:flex;gap:16px;flex-wrap:wrap}
/* Positionen als ruhige Tabelle: Felder ohne Rahmen, Rahmen erst bei Hover und Fokus */
.pos-halter{margin:0 -20px}
.pos-table{width:100%;border-collapse:collapse;table-layout:fixed}
.pos-table th{padding:0 6px 8px;font-size:var(--t-xs);font-weight:500;color:var(--text-3);text-align:left;border-bottom:1px solid var(--linie)}
.pos-table th.r{text-align:right}
.pos-table th.sp-griff{width:38px}
.pos-table th.sp-menge{width:72px} .pos-table th.sp-einheit{width:92px} .pos-table th.sp-preis{width:116px}
.pos-table th.sp-rabatt,.pos-table th.sp-ust{width:72px} .pos-table th.sp-summe{width:112px} .pos-table th.sp-aktion{width:104px}
.pos-table td{padding:8px 6px;vertical-align:top;border-bottom:1px solid var(--linie-leise)}
.pos-table tbody tr{transition:background var(--dur-1)}
.pos-table tbody tr:hover,.pos-table tbody tr:focus-within{background:color-mix(in srgb,var(--sanft) 60%,transparent)}
.pos-table tr.neu-z{animation:neu-zeile 1s var(--aus)}
@keyframes neu-zeile{from{background:var(--akzent-flaeche)}}
.pos-table tr.optional .tot{color:var(--text-3)}
.pos-table tr.zieht{opacity:.45}
.pos-table tr.ziel-oben td{box-shadow:inset 0 2px 0 var(--akzent)}
.pos-table tr.ziel-unten td{box-shadow:inset 0 -2px 0 var(--akzent)}
.pos-table input,.pos-table textarea{height:32px;padding:0 8px;border-radius:7px;background:transparent;box-shadow:inset 0 0 0 1px transparent;font-size:var(--t-base)}
.pos-table td.r input{text-align:right;font-variant-numeric:tabular-nums}
.pos-table input:hover,.pos-table textarea:hover{box-shadow:inset 0 0 0 1px var(--feld)}
.pos-table input:focus,.pos-table textarea:focus{background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--akzent),0 0 0 3px var(--akzent-flaeche)}
.pos-table input:disabled,.pos-table textarea:disabled{background:transparent;box-shadow:none;color:var(--text)}
.pos-table [data-p="bezeichnung"]{font-weight:600}
.pos-table textarea{resize:none;overflow:hidden;display:block;min-height:24px;height:24px;padding:3px 8px;font-size:var(--t-sm);color:var(--text-2);line-height:1.45}
.pos-table td:first-child{padding-left:14px}
.pos-table td:last-child{padding-right:14px}
.pos-table th:first-child{padding-left:14px}
.posmove{position:relative}
.posmove .griff{display:grid;place-items:center;width:22px;height:32px;color:var(--text-4);cursor:grab;opacity:0;transition:opacity var(--dur-1)}
.posmove .griff .sym{width:15px;height:15px}
.posmove .pfeile{display:flex;flex-direction:column;position:absolute;left:2px;top:42px;opacity:0;transition:opacity var(--dur-1)}
.posmove .pfeile button{width:22px;height:18px;border:0;border-radius:5px;background:none;color:var(--text-3);display:grid;place-items:center;padding:0;cursor:pointer}
.posmove .pfeile button .sym{width:14px;height:14px}
.posmove .pfeile button:hover:not(:disabled){background:var(--sanft);color:var(--text)}
.posmove .pfeile button:disabled{opacity:.3;cursor:default}
.pos-table tr:hover .griff,.pos-table tr:focus-within .griff,.pos-table tr:hover .pfeile,.pos-table tr:focus-within .pfeile{opacity:1}
.pos-table .tot{padding-top:15px !important;padding-right:10px !important;font-weight:600;white-space:nowrap;text-align:right}
.pos-table td.aktion{text-align:right;white-space:nowrap}
.pos-table td.aktion>*{vertical-align:middle}
.opt-schalter{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 6px;margin:0;border-radius:7px;font-size:var(--t-xs);font-weight:500;color:var(--text-3);cursor:pointer}
.opt-schalter input{width:14px;height:14px}
.opt-schalter:hover{background:var(--sanft)}
.pos-table td.aktion .weg{opacity:0;transition:opacity var(--dur-1)}
.pos-table tr:hover td.aktion .weg,.pos-table tr:focus-within td.aktion .weg{opacity:1}
.pos-table tr:not(:hover):not(:focus-within) .opt-schalter:not(:has(input:checked)){opacity:0}
.pos-leer{display:flex;align-items:center;gap:10px;justify-content:center;padding:22px;color:var(--text-3);font-size:var(--t-sm)}
.pos-leer .sym{color:var(--text-4)}
.hinzu{position:relative;z-index:5;padding:12px 0 0}
.hinzu-feld{position:relative;display:flex;align-items:center}
.hinzu-feld>.sym{position:absolute;left:12px;width:16px;height:16px;color:var(--text-3);pointer-events:none}
.hinzu-feld input{height:40px;padding-left:36px;border-radius:10px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--linie)}
.hinzu-feld input:focus{background:var(--flaeche)}
.hinzu-knoepfe{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.vorschlaege{position:absolute;left:0;right:0;top:56px;z-index:var(--z-pop);padding:6px;border-radius:12px;background:var(--erhoeht);box-shadow:var(--e3);max-height:320px;overflow-y:auto;
  transform-origin:top;animation:aufklappen 140ms var(--aus)}
.vorschlaege button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;text-align:left;color:var(--text);cursor:pointer}
.vorschlaege button.an{background:var(--sanft)}
.v-name{min-width:0}
.v-name b{display:block;font-weight:500;font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-name small,.v-preis small{color:var(--text-3);font-size:var(--t-xs)}
.v-preis{font-size:var(--t-sm);font-weight:600;white-space:nowrap}
.vorschlaege button.frei{justify-content:flex-start;color:var(--text-2);font-size:var(--t-sm)}
.vorschlaege button.frei .sym{width:15px;height:15px}
.vorschlaege button.frei kbd{margin-left:auto}
.v-leer{padding:12px;color:var(--text-3);font-size:var(--t-sm)}
.konditionen input{font-variant-numeric:tabular-nums}
.ed-leiste{display:none}
.katliste{max-height:46vh;overflow-y:auto;margin-top:12px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--linie)}
.katz{display:flex;align-items:center;gap:12px;margin:0;padding:10px 14px;border-bottom:1px solid var(--linie-leise);cursor:pointer;font-weight:400;color:var(--text)}
.katz:last-child{border-bottom:0}
.katz:hover{background:var(--sanft)}
.katz:has(input:checked){background:var(--akzent-flaeche)}
.katz .t{flex:1;min-width:0}
.katz .t b{display:block;font-size:var(--t-sm);font-weight:600}
.katz .t span{display:block;font-size:var(--t-xs);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.katz .p{font-weight:600;white-space:nowrap;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.katz .p span{font-weight:400;color:var(--text-3);font-size:var(--t-xs)}

/* ---------- Vorlagen, Kunden, Leistungen ---------- */
.vorlagen-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.vorlagen-raster .card+.card{margin-top:0}
.vorlage-karte{display:flex;flex-direction:column;gap:6px}
.vorlage-karte .karte-kopf{flex-wrap:nowrap;margin-bottom:4px}
.vk-titel{min-width:0}
.vk-titel h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vk-posten{list-style:none;margin:4px 0 14px;padding:0;display:grid;flex:1;align-content:start}
.vk-posten li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--linie-leise);font-size:var(--t-sm)}
.vk-posten li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.kunden td.kunde{display:flex;align-items:center;gap:10px}
table.kunden .ini{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font:600 11px/1 var(--f-text)}
table.kunden td.kunde small{display:block;font-size:var(--t-xs)}
.betrag-gut{color:var(--gut)}
table.list td.aktion{width:52px}
table.list td.aktion .weg{opacity:0;transition:opacity var(--dur-1)}
table.list tr:hover td.aktion .weg,table.list tr:focus-within td.aktion .weg,table.list td.aktion .weg:focus-visible{opacity:1}
table.katalog tr.gruppe th{position:sticky;top:0;z-index:1;padding:10px 12px 8px 20px;background:color-mix(in srgb,var(--flaeche) 94%,transparent);
  font-size:var(--t-xs);font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--linie);border-top:1px solid var(--linie)}
table.katalog thead+tbody tr.gruppe th{border-top:0}
table.katalog tr.gruppe th .n{margin-left:8px;color:var(--text-3);font-weight:500}
table.katalog tbody tr.gruppe:hover{background:none}
table.katalog td.leistung{min-width:220px}
table.katalog td.leistung .klein{max-width:52ch;margin-top:2px;line-height:1.45}
table.katalog td.einheit{white-space:nowrap;font-size:var(--t-sm)}
table.katalog .sp-markt{width:210px}
.kunden-hist{margin-top:20px;padding-top:14px;border-top:1px solid var(--linie)}
.hist-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 8px;margin:0 -8px;border-radius:8px;color:var(--text);text-decoration:none !important;font-size:var(--t-sm)}
.hist-zeile:hover{background:var(--sanft)}
.hist-zeile>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hist-rechts{display:flex;align-items:center;gap:10px;white-space:nowrap}

/* Marktvergleich */
.marktzelle{vertical-align:middle}
.markt{display:flex;flex-direction:column;gap:5px;min-width:170px}
.markt.leer{justify-content:center;align-items:flex-start;min-height:34px}
.markt.gross{margin-bottom:14px;padding:14px 16px;border-radius:12px;background:var(--bg)}
.markt-kopf{display:flex;align-items:center;gap:7px;font-size:var(--t-xs);line-height:1.2}
.markt-kopf b{font-weight:600}
.markt-punkt{width:8px;height:8px;border-radius:50%;flex:none}
.markt-abw{margin-left:auto;color:var(--text-3);font-size:11px}
.markt-skala{position:relative;height:8px;background:var(--sanft);border-radius:999px;margin:3px 5px}
.markt-skala .band{position:absolute;top:0;bottom:0;background:var(--sanft-2);border-radius:999px;box-shadow:inset 0 0 0 1px var(--linie)}
.markt-skala .mitte{position:absolute;top:-2px;bottom:-2px;width:2px;border-radius:1px;background:var(--text-4);transform:translateX(-1px)}
.markt-skala .ich{position:absolute;top:-4px;width:8px;height:16px;border-radius:3px;transform:translateX(-4px);box-shadow:0 0 0 2px var(--flaeche);animation:marke-ein 300ms var(--aus) both}
@keyframes marke-ein{from{opacity:0;margin-left:-8px}}
.markt-fuss{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--text-3);white-space:nowrap}
.markt-fuss>span{overflow:hidden;text-overflow:ellipsis}
.markt-fuss .btn{height:22px;padding:0 6px;font-size:11px}
.markt.ok .markt-punkt,.markt.ok .markt-skala .ich{background:var(--gut-punkt)} .markt.ok .markt-kopf b{color:var(--gut)}
.markt.warn .markt-punkt,.markt.warn .markt-skala .ich{background:var(--wartet-punkt)} .markt.warn .markt-kopf b{color:var(--wartet)}
.markt.achtung .markt-punkt,.markt.achtung .markt-skala .ich{background:var(--fassen-punkt)} .markt.achtung .markt-kopf b{color:var(--fassen)}
.markt.bad .markt-punkt,.markt.bad .markt-skala .ich{background:var(--nein-punkt)} .markt.bad .markt-kopf b{color:var(--nein)}
.quellen{margin:6px 0 0;padding-left:18px;font-size:var(--t-sm)}
.quellen li{margin-bottom:3px}

/* ---------- Einstellungen ---------- */
.einst-liste{padding:6px}
.einst-liste button{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 12px;border:0;border-radius:10px;background:none;text-align:left;color:var(--text);cursor:pointer}
.einst-liste button:hover{background:var(--sanft)}
.einst-liste button+button{box-shadow:0 -1px 0 var(--linie-leise)}
.einst-liste button>span:nth-child(2){flex:1;min-width:0}
.einst-liste b{display:block;font-size:var(--t-md);font-weight:600}
.einst-liste small{display:block;font-size:var(--t-xs);color:var(--text-3)}
.einst-liste button>.sym{color:var(--text-4)}
.speicherleiste{position:sticky;bottom:16px;z-index:5;display:flex;align-items:center;gap:8px;margin-top:16px;padding:10px 10px 10px 16px;border-radius:12px;
  background:var(--erhoeht);box-shadow:var(--e3);animation:toast-ein 240ms var(--aus)}
.speicherleiste>span{flex:1;display:flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:500}
.speicherleiste>span .sym{width:16px;height:16px;color:var(--wartet)}
.main[data-gruppe="ki"] .page-head .aktionen,.main[data-gruppe="konto"] .page-head .aktionen{display:none}
.inbox-box{border-radius:12px;padding:16px 18px;background:var(--akzent-flaeche);margin-top:10px}
.inbox-box .adr{font-family:var(--f-mono);font-size:var(--t-md);font-weight:500;color:var(--akzent-tief);word-break:break-all;margin:6px 0 12px}
.inbox-box .eyebrow{color:var(--akzent)}
.schritt{display:flex;gap:12px;margin-bottom:12px}
.schritt .n{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--akzent);color:var(--akzent-text);font-size:var(--t-xs);font-weight:600}
.schritt b{display:block;font-size:var(--t-sm);margin-bottom:2px}
.schritt p{margin:0;color:var(--text-2);font-size:var(--t-sm)}
.firmenliste{display:grid}
.firma-zeile{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--linie-leise)}
.firma-zeile:first-child{border-top:0}
.fz-text{flex:1;min-width:0}
.fz-text strong{display:block;font-size:var(--t-sm)}
.fz-text .leise{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ausgang{display:grid}
.ausgang-zeile{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--linie-leise)}
.ausgang-zeile:first-child{border-top:0}
.ausgang-zeile .ic{width:28px;height:28px;border-radius:8px}
.ausgang-zeile .ic .sym{width:14px;height:14px}
.az-text{flex:1;min-width:0}
.az-text strong{display:block;font-size:var(--t-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.az-text .leise{display:block}
.geraet{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--linie-leise);font-size:var(--t-sm)}
.geraet .sym{color:var(--text-3)}
.nummern{margin:8px 0 14px;padding-left:20px;line-height:1.7}
.pw-meldung{font-size:var(--t-sm);font-weight:500}
.pw-meldung.gut{color:var(--gut)} .pw-meldung.schlecht{color:var(--nein)}
.modellwahl{display:flex;flex-direction:column;gap:8px}
.modellkarte{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:0;border-radius:10px;background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--linie);text-align:left;cursor:pointer;color:var(--text)}
.modellkarte:hover{box-shadow:inset 0 0 0 1px var(--feld-hover)}
.modellkarte.on{background:var(--akzent-flaeche);box-shadow:inset 0 0 0 1.5px var(--akzent)}
.modellkarte b{font-size:var(--t-sm)}
.modellkarte .mm{font-size:var(--t-xs);color:var(--text-3);font-family:var(--f-mono)}
.modellkarte .mk{font-size:var(--t-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.anbietertabs{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.anbieterreiter{position:relative;flex:1 1 130px;display:flex;flex-direction:column;gap:1px;padding:10px 14px;border:0;border-radius:10px;background:var(--flaeche);
  box-shadow:inset 0 0 0 1px var(--linie);text-align:left;cursor:pointer;color:var(--text)}
.anbieterreiter:hover{box-shadow:inset 0 0 0 1px var(--feld-hover)}
.anbieterreiter b{font-size:var(--t-sm)}
.anbieterreiter span{font-size:var(--t-xs);color:var(--text-3)}
.anbieterreiter.on{background:var(--akzent-flaeche);box-shadow:inset 0 0 0 1.5px var(--akzent)}
.anbieterreiter .haken{position:absolute;top:9px;right:10px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:var(--sanft);color:var(--text-3)}
.anbieterreiter .haken .sym{width:11px;height:11px;stroke-width:2.6}
.anbieterreiter .haken.gut{background:var(--gut-punkt);color:#fff}
.anbieterreiter .haken.schlecht{background:var(--nein-punkt);color:#fff}
.anbieterfeld{margin-top:10px;padding:16px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--linie)}
.kiwahl{margin-top:16px;padding:16px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--linie)}

/* Aussehen */
.brandgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.brand-felder>.card+.card{margin-top:16px}
.brand-vorschau{position:sticky;top:16px;min-width:0}
.swatch{display:flex;align-items:center;gap:10px}
.farbvorschlaege{display:flex;gap:6px;margin-top:10px}
.farbvorschlaege button{width:24px;height:24px;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform var(--dur-1)}
.farbvorschlaege button:hover{transform:scale(1.12)}
.wahlkarten{gap:10px}
.mini-layout{display:grid;gap:3px;width:56px;height:40px;padding:6px;margin-bottom:6px;border-radius:6px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--linie)}
.mini-layout i{display:block;height:4px;border-radius:2px;background:var(--feld)}
.mini-layout i:first-child{background:var(--akzent);width:45%}
.mini-layout.modern i:first-child{width:100%;height:6px}
.mini-layout.kompakt{gap:2px} .mini-layout.kompakt i{height:3px}
.ablage{display:flex;align-items:center;gap:14px;padding:16px;border-radius:12px;border:1.5px dashed var(--feld);background:var(--bg);cursor:pointer;transition:border-color var(--dur-1),background var(--dur-1);min-width:0}
.ablage:hover,.ablage.over{border-color:var(--akzent);background:var(--akzent-flaeche)}
.ablage img{max-height:52px;max-width:160px;border-radius:6px;background:#fff;padding:4px}
.ablage-ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--sanft);color:var(--text-3);flex:none}
.ablage-text{min-width:0}
.ablage-text b{display:block;font-size:var(--t-sm)}
.ablage-text span{font-size:var(--t-xs);color:var(--text-3)}
.vorschau{position:relative;width:100%;aspect-ratio:794/1123;border-radius:10px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--linie)}
.vorschau iframe{position:absolute;left:0;top:0;width:794px;height:1123px;border:0;transform:scale(var(--skala,.5));transform-origin:0 0;transition:opacity 150ms var(--aus)}
.vorschau iframe.laedt{opacity:.35}
.datei-knopf{position:relative;overflow:hidden}
.datei-knopf input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* Abrechnung */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kennzahlen>div{background:var(--bg);border-radius:12px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--linie-leise)}
.kennzahlen span{display:block;font-size:var(--t-xs);color:var(--text-3);font-weight:500;margin-bottom:4px}
.kennzahlen b{font-size:var(--t-lg);font-weight:600;letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.kennzahlen b small,.kennzahlen>div>small{font-size:var(--t-xs);font-weight:500;color:var(--text-3)}
.kennzahlen>div>small{display:block;margin-top:3px}
.balken{height:6px;border-radius:999px;background:var(--sanft-2);margin-top:8px;overflow:hidden}
.balken span{display:block;height:100%;background:var(--gut-punkt);border-radius:999px;transform-origin:left;animation:fuellen 800ms var(--expo) both}
.balken span.knapp{background:var(--wartet-punkt)} .balken span.voll{background:var(--nein-punkt)}
.ja{color:var(--gut);font-weight:600;font-size:var(--t-sm);display:inline-flex;align-items:center;gap:4px}
.ja .sym{width:14px;height:14px}
.nein{color:var(--text-3);font-weight:600;font-size:var(--t-sm)}
.card table.list{margin-top:4px}
.card .tabelle-halter table.list th:first-child,.card .tabelle-halter table.list td:first-child{padding-left:20px}
.card>table.list td:first-child,.card>table.list th:first-child{padding-left:0}
.card>table.list td:last-child,.card>table.list th:last-child{padding-right:0}
.buchen{gap:12px}
.paketwahl{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:14px;background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--linie)}
.paketwahl.empfohlen{box-shadow:inset 0 0 0 1.5px var(--akzent),var(--e2)}
.paketwahl.gewaehlt{background:var(--akzent-flaeche)}
.paketwahl>b{font:600 var(--t-lg)/1.2 var(--f-anzeige)}
.preiszeile strong{font-size:var(--t-2xl);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.preiszeile span{color:var(--text-3);font-size:var(--t-xs)}
.paketwahl ul{list-style:none;margin:4px 0 10px;padding:0;display:grid;gap:6px;font-size:var(--t-sm);color:var(--text-2);flex:1}
.paketwahl li{display:flex;gap:8px;align-items:flex-start}
.paketwahl li .sym{width:15px;height:15px;color:var(--gut);margin-top:2px}
.paketwahl li.fehlt{color:var(--text-3);padding-left:23px}
.paketwahl li.fehlt span{margin-left:auto;font-size:var(--t-xs);font-weight:600;color:var(--akzent);white-space:nowrap}

/* Zugangsbalken (Nur-Lesen, Zahlung offen, Testzeit endet) */
.zugangsbalken{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:11px 14px;border-radius:12px;margin:0 0 20px;font-size:var(--t-sm);line-height:1.5}
.zugangsbalken>.sym{width:18px;height:18px;flex:none}
.zugangsbalken>div{flex:1;min-width:220px}
.zugangsbalken b{font-weight:600}
.zugangsbalken.schlecht{background:var(--nein-flaeche);color:var(--nein)}
.zugangsbalken.warn{background:var(--wartet-flaeche);color:var(--wartet)}
.zugangsbalken.info{background:var(--akzent-flaeche);color:var(--akzent-tief)}
.zugangsbalken .btn{flex:none}
.main.nurlesen input:disabled,.main.nurlesen textarea:disabled,.main.nurlesen select:disabled{background-color:var(--sanft);color:var(--text-2)}

/* ---------- Einrichtungs-Assistent ---------- */
.wiz-seite{min-height:100vh;background:radial-gradient(900px 480px at 50% -12%,var(--akzent-flaeche),transparent 70%),var(--bg)}
.wiz-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1200px;margin:0 auto;padding:20px 24px}
.wiz-rahmen{display:grid;grid-template-columns:200px minmax(0,600px) minmax(0,1fr);gap:28px;max-width:1200px;margin:0 auto;padding:12px 24px 60px;align-items:start}
.wiz-schritte{list-style:none;margin:0;padding:12px 0;display:grid;gap:4px;position:sticky;top:20px}
.wiz-schritte li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--text-3);font-size:var(--t-sm);font-weight:500}
.wiz-schritte li i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:var(--t-xs);font-weight:600;box-shadow:inset 0 0 0 1.5px var(--feld)}
.wiz-schritte li i .sym{width:12px;height:12px;stroke-width:2.6}
.wiz-schritte li.fertig{color:var(--text-2)}
.wiz-schritte li.fertig i{background:var(--akzent);color:var(--akzent-text);box-shadow:none}
.wiz-schritte li.jetzt{background:var(--flaeche);color:var(--text);box-shadow:var(--e1)}
.wiz-schritte li.jetzt i{box-shadow:inset 0 0 0 2px var(--akzent);color:var(--akzent)}
.box.wiz{background:var(--flaeche);border-radius:var(--r-lg);box-shadow:var(--e2);padding:28px;animation:seite-ein 240ms var(--aus)}
.wizbar{display:none;gap:4px;margin-bottom:16px}
.wizbar i{flex:1;height:4px;border-radius:2px;background:var(--sanft)}
.wizbar i.on{background:var(--akzent)}
.wiz .titel-m{margin-top:6px}
.wiz-knoepfe{margin-top:24px;padding-top:18px;border-top:1px solid var(--linie)}
.wiz-vorschau{position:sticky;top:20px;display:grid;gap:10px}
.preisliste{display:grid;gap:8px}
.preiszeile{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--linie-leise)}
.preis-name{flex:1;min-width:0}
.preis-name b{display:block;font-size:var(--t-sm)}
.preis-name span{font-size:var(--t-xs);color:var(--text-3)}
.preiszeile .feld-einheit{width:150px;flex:none}
.fertig-haken{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--gut-flaeche);color:var(--gut);margin-bottom:12px}
.fertig-haken .sym{width:26px;height:26px;stroke-width:2.2}
.blatt-mini{background:#fff;color:#1d2330;border-radius:10px;padding:22px 22px 18px;box-shadow:var(--e2);font-size:11px;display:grid;gap:8px;aspect-ratio:1/1.3;align-content:start;overflow:hidden}
.bm-kopf{display:flex;align-items:center;gap:10px}
.bm-logo{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:var(--fa);color:#fff;font-weight:700;font-size:12px;overflow:hidden;flex:none}
.bm-logo img{max-width:100%;max-height:100%;background:#fff}
.bm-kopf b{display:block;font-size:13px;color:var(--fb)}
.bm-kopf small{color:#6b7380;font-size:10px}
.bm-zeile{font-size:10px;color:#6b7380;font-style:italic}
.bm-band{height:3px;border-radius:2px;background:var(--fa)}
.layout-modern .bm-band{height:8px}
.bm-nr{color:#6b7380;font-size:10px;margin-top:8px}
.bm-titel{font-size:16px;font-weight:600;color:var(--fb);line-height:1.2}
.bm-posten{display:grid;margin-top:6px}
.bm-posten div{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #eceef2}
.bm-summe{display:flex;justify-content:space-between;margin-top:6px;padding-top:8px;border-top:1.5px solid var(--fb);font-weight:700;font-size:12px}
.bm-summe b{color:var(--fa)}

/* ---------- Anmeldung, PC, Passwort, keine Firma ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(900px 480px at 50% -10%,var(--akzent-flaeche),transparent 70%),var(--bg)}
.auth .box{width:100%;max-width:420px;padding:32px;border-radius:var(--r-lg);background:var(--flaeche);box-shadow:var(--e2);animation:dialog-ein 240ms var(--aus)}
.auth .box h1{font:600 var(--t-xl)/1.2 var(--f-anzeige)}
.logo{display:inline-flex;align-items:center;gap:0;font:600 18px/1 var(--f-text);letter-spacing:-.03em;color:var(--text)}
.logo span{color:inherit}
.logo::before{content:"";width:22px;height:22px;flex:none;margin-right:9px;border-radius:6px;
  background:linear-gradient(135deg,transparent 52%,var(--akzent) 52%),var(--text);
  -webkit-mask:linear-gradient(#000,#000);box-shadow:inset 0 0 0 0 transparent}
.auth .logo{margin-bottom:18px}
.auth p.sub{color:var(--text-2);margin:0 0 20px;font-size:var(--t-md)}
.auth .leise{font-size:var(--t-sm);margin:0 0 16px}
.auth .grid{gap:14px}
.auth .tabs{display:flex;gap:4px;background:var(--sanft);padding:4px;border-radius:10px;margin-bottom:20px}
.auth .tabs button{flex:1;border:0;background:transparent;padding:9px;border-radius:7px;font-weight:600;color:var(--text-3)}
.auth .tabs button.on{background:var(--flaeche);color:var(--text);box-shadow:var(--e1)}

/* ---------- Handy-Rahmen ---------- */
.topbar,.tabbar{display:none}
.side-schleier{display:none}
.side-zu{display:none}

/* ---------- Bewegung: Blatt am Handy, Rücksicht auf reduzierte Bewegung ---------- */
@media (max-width:1180px){
  .ed-raster{grid-template-columns:minmax(0,1fr) 288px}
  .zu-tun{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .wiz-rahmen{grid-template-columns:180px minmax(0,1fr)}
  .wiz-vorschau{display:none}
}
@media (max-width:1100px){
  .kz-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zwei-spalten,.leer-start{grid-template-columns:minmax(0,1fr)}
  .ed-raster{grid-template-columns:minmax(0,1fr)}
  .ed-seite{position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .brandgrid{grid-template-columns:minmax(0,1fr)}
  .brand-vorschau{position:static;max-width:520px}
  .post-raster{grid-template-columns:300px minmax(0,1fr)}
}

/* Positionen zwischen Handy und breitem Bildschirm: die Leistung bekommt eine eigene Zeile,
   darunter Menge, Einheit, Preis und Summe – sonst blieben für den Namen keine 200 px. */
@media (min-width:861px) and (max-width:1180px){
  .pos-table,.pos-table tbody{display:block;table-layout:auto}
  .pos-table thead{display:none}
  .pos-table tbody tr{display:grid;grid-template-columns:30px repeat(6,minmax(0,1fr));gap:2px 8px;padding:10px 14px 10px 8px;border-bottom:1px solid var(--linie-leise)}
  .pos-table tbody tr.leer-zeile{display:block}
  .pos-table td{display:block;padding:0 !important;border:0}
  .pos-table td.posmove{grid-column:1;grid-row:1/3}
  .pos-table td.leistung{grid-column:2/-1;grid-row:1}
  .pos-table td[data-l]::before{content:attr(data-l);display:block;font-size:var(--t-xs);color:var(--text-3);margin:4px 0 2px 8px}
  .pos-table td.tot{padding-top:24px !important}
  .pos-table td.aktion{padding-top:20px !important}
  .posmove .pfeile{top:38px}
}
@media (max-width:860px){
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .app{grid-template-columns:minmax(0,1fr)}
  .main{padding:12px 16px 32px}
  /* Felder am Handy 16 px (kein Zoom am iPhone) und 44 px Tippfläche */
  input,select,textarea{font-size:16px;height:44px}
  textarea{height:auto}
  .btn{height:44px}
  .btn.sm{height:40px;padding:0 12px}
  .btn.icon{width:44px} .btn.sm.icon{width:40px}
  .nur-handy{display:inline}
  /* Kopf: Firma links, Seitentitel, Suche rechts */
  .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:var(--z-leiste);height:56px;padding:0 12px;padding-top:env(safe-area-inset-top,0px);
    background:color-mix(in srgb,var(--bg) 86%,transparent);border-bottom:1px solid var(--linie)}
  @supports (backdrop-filter:blur(12px)){.topbar,.tabbar{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
  .top-firma,.top-knopf{width:44px;height:44px;border:0;background:none;border-radius:10px;display:grid;place-items:center;color:var(--text-2);cursor:pointer}
  .top-firma .fav{width:30px;height:30px}
  .top-titel{flex:1;min-width:0;font:600 var(--t-lg)/1 var(--f-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Leiste unten: fünf Plätze, Plus in der Mitte */
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:var(--z-leiste);
    height:64px;border-radius:22px;background:color-mix(in srgb,var(--flaeche) 88%,transparent);box-shadow:var(--e3)}
  .tab{position:relative;display:grid;justify-items:center;gap:3px;height:56px;align-content:center;border:0;background:none;color:var(--text-3);font-size:11px;font-weight:500;cursor:pointer}
  .tab .sym{width:21px;height:21px;transition:color var(--dur-2)}
  .tab.on{color:var(--akzent)}
  .tab.on::after{content:"";position:absolute;bottom:4px;width:16px;height:2px;border-radius:2px;background:var(--akzent)}
  .tab .badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;font-size:10px;line-height:17px}
  .tab-plus{height:auto}
  .tab-plus .plus{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--akzent);color:var(--akzent-text);box-shadow:0 8px 20px -6px color-mix(in srgb,var(--akzent) 70%,transparent)}
  .tab-plus .plus .sym{width:22px;height:22px}
  .tab-plus.on::after{display:none}
  /* Seitenleiste als Blatt von unten („Mehr“) */
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;max-height:88dvh;padding:18px 14px calc(18px + env(safe-area-inset-bottom,0px));
    border:0;border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--erhoeht);box-shadow:var(--e4);z-index:calc(var(--z-dialog) - 1);
    transform:translateY(105%);visibility:hidden;transition:transform 320ms var(--blatt),visibility 0s 320ms}
  .side.auf{transform:none;visibility:visible;transition:transform 320ms var(--blatt)}
  .side .spacer{display:none}
  .side-zu{display:grid;position:absolute;right:10px;top:10px;width:40px;height:40px;place-items:center;border:0;border-radius:10px;background:var(--sanft);color:var(--text-2)}
  .side .firmawahl{margin-right:48px}
  .nav,.fwbtn,.konto-knopf{min-height:44px}
  .side-schleier{display:block;position:fixed;inset:0;z-index:calc(var(--z-dialog) - 2);background:var(--schleier);opacity:0;pointer-events:none;transition:opacity 240ms var(--aus)}
  .side-schleier.auf{opacity:1;pointer-events:auto}
  .kontomenu{position:static;margin-bottom:8px;box-shadow:inset 0 0 0 1px var(--linie);animation:none}
  .toasts{left:16px;right:16px;bottom:calc(86px + env(safe-area-inset-bottom,0px));align-items:center}
  .toast{max-width:100%}
  /* Im Editor ersetzt die Aktionsleiste die Leiste unten */
  body:has(.seite-angebot) .tabbar{display:none}
  body:has(.seite-angebot) .toasts{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

  .page-head{margin-bottom:18px;align-items:flex-start}
  .page-head h1,.gruss h1{font-size:26px}
  .page-head .aktionen{width:100%}
  .page-head .aktionen .btn{flex:1}
  .gruss .aktionen .btn.sec{display:none}
  .g2,.g3,.g4,.g-kunde{grid-template-columns:minmax(0,1fr)}
  .zu-tun{grid-template-columns:minmax(0,1fr);gap:8px}
  .aufgabe{padding:14px}
  .kz-reihe{gap:10px}
  .kz{padding:14px}
  .kz .wert{font-size:22px}
  .kz .spark{width:56px}
  .card{padding:16px}
  .tabelle-halter,.liste-mehr{margin:0 -16px}
  .suchfeld{min-width:100%}
  .suchfeld kbd{display:none}
  .filterchips{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 32px);margin:0 -16px;padding:0 16px 2px;scrollbar-width:none}
  .filterchips button{flex:none;height:36px}
  .reiter{margin:-4px -16px 18px;padding:0 10px}
  /* Listen als zweizeilige Zeilen statt Tabelle */
  table.list thead{display:none}
  table.list,table.list tbody{display:block}
  table.list tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--linie-leise)}
  table.list tbody tr:last-child{border-bottom:0}
  table.list td{display:block;padding:0 !important;border:0}
  table.angebote td.nr,table.angebote td.datum{display:none}
  table.angebote td.kunde{grid-column:1;grid-row:1/3}
  table.angebote td.betrag{grid-column:2;grid-row:1;font-size:var(--t-md)}
  table.angebote td.status{grid-column:2;grid-row:2;justify-self:end}
  table.angebote td.status .pill.nachfass{display:none}
  table.angebote .k2{max-width:none}
  table.angebote td.kunde{max-width:none;width:auto;min-width:0}
  table.kunden td.kunde{display:flex !important;grid-column:1;grid-row:1;min-width:0}
  table.kunden td.kunde strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  table.kunden td.kunde>span:last-child{min-width:0}
  table.kunden td.sp-mail{grid-column:1;grid-row:2;padding-left:40px !important;font-size:var(--t-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.kunden td.sp-ort{display:none}
  table.kunden td[data-l]{display:none}
  table.kunden td.betrag-gut[data-l]{display:block;grid-column:2;grid-row:2}
  table.kunden td.aktion{grid-column:2;grid-row:1;width:auto}
  table.list td.aktion .weg{opacity:1}
  table.katalog tbody tr.gruppe{display:block;padding:0}
  table.katalog tr.gruppe th{display:block;position:static;padding:10px 16px 8px}
  table.katalog td.leistung{grid-column:1;min-width:0}
  table.katalog td.betrag{grid-column:2;grid-row:1}
  table.katalog td.einheit{grid-column:1;grid-row:2}
  table.katalog td.marktzelle{grid-column:1/-1;margin-top:8px}
  table.katalog td.aktion{grid-column:2;grid-row:2;justify-self:end}
  table.list tr[data-konto]{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Posteingang: Liste, Detail als Blatt */
  .post-raster{grid-template-columns:minmax(0,1fr)}
  .post-liste{position:static;max-height:none;padding:4px}
  .post-raster .post-detail{display:none}
  .msg-item{padding:12px 10px}
  /* Neues Angebot */
  .gross-feld{height:200px;min-height:200px;padding:16px}
  .neu-fuss{padding:10px 12px 12px}
  .neu-fuss .katalog-zahl{display:none}
  .neu-fuss #gen,.neu-fuss #verbessern{width:100%}
  .neu-fuss kbd{display:none}
  /* Editor kompakt */
  .ed-kopf{gap:10px;margin-bottom:12px}
  .ed-titelblock{min-width:0;width:100%}
  .ed-titel{font-size:var(--t-xl)}
  .ed-aktionen{width:100%}
  .ed-aktionen .haupt-aktion{display:none}
  .ed-aktionen #vorschau{flex:1}
  .ed-menu{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));min-width:0;z-index:var(--z-dialog);transform-origin:bottom}
  .schritte{padding:10px 14px;margin-bottom:12px}
  .schritte .schritt:not(.jetzt) b{display:none}
  .schritte .schritt small{display:none}
  .schritte .strich{min-width:12px;margin:0 6px}
  .ed-seite{grid-template-columns:minmax(0,1fr)}
  .ed-seite .ed-summe{display:none}
  .anrede-zeile{flex-direction:column;gap:8px}
  .anrede-zeile select{width:100%}
  .anrede-zeile input{flex:none}
  .g-adresse{grid-template-columns:110px minmax(0,1fr)}
  .g-adresse>div:first-child{grid-column:1/-1}
  .kunde-wahl{width:100%;margin:6px 0 0}
  .kunde-wahl select{width:100%;max-width:none;height:44px}
  .posten-optionen{width:100%;gap:12px}
  .pos-halter{margin:0 -16px}
  .pos-table,.pos-table tbody{display:block;table-layout:auto}
  .pos-table thead{display:none}
  .pos-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 8px;padding:12px 16px;border-bottom:1px solid var(--linie)}
  .pos-table td{display:block;padding:0 !important;border:0}
  .pos-table td.leistung{grid-column:1/-1;grid-row:1}
  .pos-table td[data-l]::before{content:attr(data-l);display:block;font-size:var(--t-xs);color:var(--text-3);margin:0 0 3px 2px}
  .pos-table td.tot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-top:4px !important;font-size:var(--t-md)}
  .pos-table td.tot::before{margin:0 !important}
  .pos-table input,.pos-table textarea{box-shadow:inset 0 0 0 1px var(--linie);height:44px}
  .pos-table textarea{height:auto;min-height:40px;margin-top:6px;padding:9px 10px}
  .pos-table td.posmove{grid-column:1/3;grid-row:5;display:flex;gap:6px;align-items:center}
  .posmove .griff{display:none}
  .posmove .pfeile{position:static;flex-direction:row;gap:6px;opacity:1}
  .posmove .pfeile button{width:44px;height:44px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--linie)}
  .posmove .pfeile button .sym{width:18px;height:18px}
  .pos-table td.aktion{grid-column:3;grid-row:5;display:flex;justify-content:flex-end;gap:6px;align-items:center}
  .pos-table td.aktion .weg{opacity:1;width:44px;height:44px}
  .opt-schalter{height:44px;padding:0 10px;box-shadow:inset 0 0 0 1px var(--linie);border-radius:10px;opacity:1 !important}
  .opt-schalter input{width:18px;height:18px}
  .pos-table tr:not(:hover):not(:focus-within) .opt-schalter{opacity:1}
  .pos-table td.aktion:has(.opt-schalter){grid-column:2/4}
  .pos-table td.posmove{grid-column:1/2}
  .hinzu-feld input{height:44px}
  .vorschlaege{top:60px}
  .ed-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-leiste);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--flaeche) 92%,transparent);border-top:1px solid var(--linie);box-shadow:0 -8px 24px -12px rgba(0,0,0,.18)}
  @supports (backdrop-filter:blur(12px)){.ed-leiste{backdrop-filter:blur(14px)}}
  .ed-leiste>span{display:grid;line-height:1.2}
  .ed-leiste .leise{font-size:var(--t-xs)}
  .ed-leiste b{font-size:var(--t-lg);font-variant-numeric:tabular-nums}
  .ed-leiste small{font-size:11px;color:var(--text-3)}
  .ed-leiste .btn{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis}
  .erfolg-band{gap:12px}
  .eb-betrag{text-align:left}
  /* Einstellungen: Reiter am Handy weg, stattdessen Liste und „‹ Einstellungen“ */
  .einst-reiter{display:none}
  .speicherleiste{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .schmal-feld{max-width:none}
  .brand-vorschau{max-width:none}
  .ablage{flex-wrap:wrap}
  .vorlagen-raster{grid-template-columns:minmax(0,1fr)}
  .neu-wege{grid-template-columns:minmax(0,1fr)}
  .leer-start{gap:12px}
  .anbieterreiter{flex:1 1 100%}
  /* Dialoge als Blatt von unten, mit Griff */
  .modal-bg{place-items:end stretch;padding:0}
  .modal,.modal.breit,.modal.klein{max-width:none;max-height:92dvh;border-radius:var(--r-lg) var(--r-lg) 0 0;padding-bottom:env(safe-area-inset-bottom,0px);animation:blatt-ein 320ms var(--blatt)}
  .modal-bg.zu .modal{animation:blatt-aus 220ms var(--ein) forwards}
  @keyframes blatt-ein{from{transform:translateY(100%)}}
  @keyframes blatt-aus{to{transform:translateY(100%)}}
  .modal .greif{display:block;width:36px;height:4px;border-radius:2px;background:var(--feld);margin:8px auto 0;flex:none}
  .modal .h{padding:10px 16px 4px;touch-action:none}
  .modal .b{padding:10px 16px 16px}
  .modal .f{position:sticky;bottom:0;padding:12px 16px}
  .modal .f .btn{flex:1}
  .palette-bg{padding:12px}
  .palette{max-height:80dvh}
  .palette-fuss{display:none}
  .wiz-kopf{padding:14px 16px}
  .wiz-rahmen{grid-template-columns:minmax(0,1fr);padding:0 12px 40px}
  .wiz-schritte{display:none}
  .wizbar{display:flex}
  .box.wiz{padding:20px 16px;border-radius:var(--r-md)}
  .wiz-knoepfe .btn{flex:1}
  .auth .box{padding:24px 20px}
  .zugangsbalken{flex-direction:column;align-items:flex-start}
  .markt{min-width:0}
}
@media (max-width:420px){
  .kz-reihe{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kz .spark{display:none}
}

@media (prefers-reduced-motion:reduce){
  .side{transition:none}
}
@media print{
  .side,.topbar,.tabbar,.ed-leiste,.toasts{display:none !important}
}

/* Rechtliches: Häkchen bei der Registrierung */
.zustimmung{display:flex;gap:9px;align-items:flex-start;font-size:var(--t-sm);font-weight:400;color:var(--text-2);line-height:1.45;cursor:pointer}
.zustimmung input{flex:none;margin-top:2px}


/* ===== Startseite (bis 3.4) – wird von landing.css der Startseiten-Gruppe abgelöst; hier nur auf die Tokens umgeleitet ===== */
/* =====================================================================
   Landingpage – öffentliche Startseite der App und Startseite der Demo.
   Eine helle, ruhige Welt: Papierton als Grund, Serifen für die
   Überschriften, Mono für Adressen und Beträge.
   ===================================================================== */
.mono,.inbox-box .adr{font-family:var(--mono)}

.landing{
  background:
    radial-gradient(900px 420px at 10% -6%, #dfeaff 0%, transparent 62%),
    radial-gradient(720px 380px at 98% 2%, #e6f2ea 0%, transparent 58%),
    var(--papier);
  min-height:100vh;padding:0 20px 0;font-family:var(--sans);color:var(--ink)}
.landing>*{max-width:1080px;margin-left:auto;margin-right:auto}
.landing h1,.landing h2,.landing h3{letter-spacing:-.015em}
.landing .marke{font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.landing .marke span{color:var(--accent)}
.landing .klein{font-size:12.5px;color:var(--muted);margin:0}

/* Kopfzeile */
.l-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 8px}
.l-nav nav{display:flex;align-items:center;gap:20px}
.l-nav nav a:not(.btn){color:var(--ink2);font-size:14.5px;font-weight:500;text-decoration:none}
.l-nav nav a:not(.btn):hover{color:var(--accent-dark)}

/* Hero */
.l-hero{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start;padding:34px 0 8px}
.l-hero-text{max-width:40rem}
.augenbraue{margin:0 0 14px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-dark)}
.l-hero h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,44px);line-height:1.14;font-weight:600;
  text-wrap:balance;margin:0 0 14px}
.fuehrung{margin:0;font-size:17px;line-height:1.62;color:var(--ink2);max-width:60ch}
.l-punkte{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.l-punkte li{position:relative;padding-left:26px;font-size:15px;color:var(--ink2)}
.l-punkte li::before{content:"";position:absolute;left:6px;top:8px;width:7px;height:7px;border-radius:50%;
  background:var(--accent)}

/* Anmeldekarte im Hero */
.anmeldekarte{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;
  box-shadow:0 24px 60px -30px rgba(16,24,40,.5);position:sticky;top:20px}
.anmeldekarte .tabs{display:flex;gap:4px;background:var(--line2);padding:4px;border-radius:10px;margin-bottom:16px}
.anmeldekarte .tabs button{flex:1;border:0;background:transparent;padding:9px;border-radius:7px;cursor:pointer;
  font:600 14px/1 var(--sans);color:var(--muted)}
.anmeldekarte .tabs button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.anmeldekarte .klein{margin-top:12px}
.anmeldekarte.demo h2{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:8px}
.anmeldekarte.demo>p{margin:0 0 14px;font-size:14.5px;color:var(--ink2);line-height:1.55}
.demo-echt{display:grid;gap:16px;margin-top:18px;border-top:1px solid var(--line2);padding-top:16px}
.demo-echt h3{font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:7px}
.demo-echt div:first-child h3{color:var(--ok)}
.demo-echt div:last-child h3{color:var(--warn)}
.demo-echt ul{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:5px}
.demo-echt li{font-size:13px;line-height:1.45;color:var(--ink2)}

/* Die drei Wege */
.landing .wege{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:46px 0 0}
.landing .wege article{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:9px}
.weg-marke{align-self:flex-start;font-size:11.5px;font-weight:600;background:var(--accent-soft);
  color:var(--accent-dark);padding:4px 9px;border-radius:999px;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.landing .wege h2{font-size:16.5px;font-weight:650;line-height:1.3}
.landing .wege p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink2)}

/* Abschnittsköpfe */
.l-kopf{max-width:46rem;margin-bottom:24px}
.l-kopf h2{font-family:var(--serif);font-size:clamp(23px,3vw,30px);font-weight:600;margin-bottom:8px}
.l-kopf p{margin:0;color:var(--ink2);font-size:16px;line-height:1.6}

/* Was es kann */
.l-koennen{padding:62px 0 0}
.koennen-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px}
.koennen-gitter h3{font-size:15.5px;font-weight:650;margin-bottom:6px}
.koennen-gitter p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink2)}

/* Preise */
.l-preise{padding:62px 0 0}
.pakete{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.paket{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;
  display:flex;flex-direction:column;gap:12px;position:relative}
.paket.empfohlen{border:1.5px solid var(--accent);box-shadow:0 20px 50px -30px rgba(31,111,235,.8)}
.empfehlung{position:absolute;top:-11px;left:22px;background:var(--accent);color:#fff;font-size:11.5px;
  font-weight:600;padding:3px 10px;border-radius:999px}
.paket h3{font-family:var(--serif);font-size:20px;font-weight:600}
.paket .fuer{margin:-8px 0 0;font-size:13px;color:var(--muted)}
.preis{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.preis b{font-size:36px;font-weight:700;letter-spacing:-.03em}
.preis span{font-size:13.5px;color:var(--muted)}
.drin{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.drin li{display:flex;gap:9px;font-size:14px;line-height:1.45;color:var(--ink2)}
.drin .ja{color:var(--ok);font-weight:700;flex:none}
.drin li.nicht{color:var(--muted)}
.drin li.nicht span{color:var(--muted);flex:none;width:11px;text-align:center}
.zusatz{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.zusatz>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.zusatz b{font-size:15px}
.z-preis{float:right;font-weight:700;font-variant-numeric:tabular-nums}
.z-preis small{font-weight:400;color:var(--muted);font-size:12px}
.zusatz p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)}
.ki-hinweis{margin:16px 0 0;background:var(--accent-soft);border-radius:14px;padding:16px 18px;
  font-size:14.5px;line-height:1.55;color:var(--accent-dark)}

/* Fragen */
.l-faq{padding:62px 0 0}
.faq-gitter{display:grid;grid-template-columns:1fr 1fr;gap:24px 30px}
.faq-gitter h3{font-size:15.5px;font-weight:650;margin-bottom:6px}
.faq-gitter p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink2)}

/* Abschluss und Vorführ-Reihenfolge (dunkle Platte) */
.l-schluss,.landing .probier{background:var(--tinte);color:#e8eef6;border-radius:16px;padding:34px;
  margin-top:62px;display:flex;flex-direction:column;gap:14px}
.l-schluss h2,.landing .probier h2{font-family:var(--serif);font-size:24px;font-weight:600;color:#fff}
.l-schluss p{margin:0;color:#c6d3e2;font-size:16px;max-width:52ch}
.landing .probier ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:11px}
.landing .probier li{font-size:15px;line-height:1.55;color:#c6d3e2}
.landing .probier li b{color:#fff;font-weight:600}
.gross-knopf{align-self:flex-start;border:0;background:#fff;color:var(--tinte);font:600 15.5px/1 var(--sans);
  padding:14px 24px;border-radius:11px;cursor:pointer;text-decoration:none;display:inline-block}
.gross-knopf:hover{background:#dfe8f3;text-decoration:none}
.gross-knopf:focus-visible{outline:2px solid #fff;outline-offset:3px}

.l-fuss{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:26px 0 40px;margin-top:34px;
  border-top:1px solid var(--line)}
.l-fuss p{margin:0;font-size:13px;color:var(--muted)}

@media (max-width:900px){
  .l-hero{grid-template-columns:1fr;gap:26px;padding-top:22px}
  .anmeldekarte{position:static}   /* am Handy erst der Text, dann das Formular */
  .landing .wege,.koennen-gitter,.pakete,.zusatz,.faq-gitter,.demo-echt{grid-template-columns:1fr}
  .l-koennen,.l-preise,.l-faq{padding-top:44px}
  .l-nav nav a:not(.btn){display:none}
  .paket.empfohlen{order:-1}
  .l-schluss,.landing .probier{padding:24px;margin-top:44px}
}

/* ---------- 4.1: Eigenes Postfach ---------- */
.mk-status,.mk-test{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--sanft);font-size:var(--t-sm);line-height:1.45}
.mk-test{background:transparent;padding:4px 0}
.mk-punkt{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--text-3)}
.mk-status.gut .mk-punkt,.mk-test.gut .mk-punkt{background:var(--gut);box-shadow:0 0 0 4px var(--gut-flaeche)}
.mk-status.fehler .mk-punkt,.mk-test.fehler .mk-punkt{background:var(--nein);box-shadow:0 0 0 4px var(--nein-flaeche)}
.mk-status.fehler{background:var(--nein-flaeche)}
#mailkonto details>summary,.mk-alternativ>summary{cursor:pointer;font-weight:600;font-size:var(--t-sm);color:var(--text-2);padding:6px 0;list-style-position:outside}
#mailkonto details>summary:hover,.mk-alternativ>summary:hover{color:var(--text)}
.mk-alternativ .inbox-box{margin-top:10px}