/* ======================================================================
   Handy-Ansicht „Salbei" (12.10.2026)
   Wirkt nur, wenn <html> die Klasse .mobil trägt (js/mobil/mobil-rechnen.js).
   Die Desktop-Oberfläche bleibt im Dokument und rechnet weiter – sie wird
   hier nur ausgeblendet. Öffnet man aus der Handy-Ansicht eine Seite, die
   es mobil noch nicht gibt, schaltet .mobil-klassisch sie wieder ein.
   ====================================================================== */
:root {
  --m-grund: #ECEAE4; --m-karte: #FFFFFF; --m-salbei: #5F7C64; --m-salbei-dunkel: #2E4535;
  --m-salbei-hell: #E2EAE1; --m-sand: #EFE6D6; --m-sand-text: #6B5A3A; --m-tinte: #1D211E;
  --m-grau: #6F746D; --m-linie: #F0EEE8; --m-feld: #F3F1EC; --m-plus: #2F6B3B; --m-plus-hell: #DFEEDF;
  --m-minus: #9A3F33; --m-minus-hell: #F5E1DC; --m-rot: #A6473A;
  --m-schrift: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#mobil-app, #mobil-rahmen { display: none; }
html.mobil body { background: var(--m-grund); }
html.mobil #app-view > .app-shell { display: none; }
html.mobil:not(.mobil-klassisch) #app-view:not(.hidden) ~ #mobil-app,
html.mobil:not(.mobil-klassisch) #mobil-app.an { display: block; }
html.mobil.mobil-klassisch #app-view > .app-shell { display: flex; }
/* Schwebende Desktop-Knöpfe (Rückmeldung, Hilfe) säßen auf der Leiste unten.
   Die Rückmeldung erreicht man mobil über Profil → Rückmeldung geben. */
html.mobil .fb-knopf, html.mobil .hc-wahl { display: none !important; }

/* ---- Anmeldung im Salbei-Kleid ---- */
html.mobil #login-view { background: var(--m-grund); font-family: var(--m-schrift); align-items: flex-end; padding: 24px 16px 40px; }
html.mobil .login-card { border: none; border-radius: 28px; padding: 28px 22px; box-shadow: none; max-width: 420px; }
html.mobil .login-card h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; }
html.mobil .login-card input { height: 50px; border-radius: 14px; background: var(--m-feld); border-color: transparent; font-size: 16px; }
html.mobil .login-card button { height: 52px; border-radius: 26px; background: var(--m-salbei); font-size: 16px; }

/* ---- Grundgerüst ---- */
#mobil-app { font-family: var(--m-schrift); color: var(--m-tinte); background: var(--m-grund); min-height: 100vh;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) 0 calc(env(safe-area-inset-bottom, 0px) + 120px); -webkit-font-smoothing: antialiased; }
#mobil-app * { box-sizing: border-box; }
/* :where() ohne Gewicht – sonst schlüge die id jede Klasse unten (Schriftgröße, Farbe) */
:where(#mobil-app) button { font: inherit; color: inherit; cursor: pointer; }
#mobil-app .m-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
#mobil-app .m-ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.m-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 0; }
.m-titel { font-size: 26px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.m-unter { font-size: 14px; color: var(--m-grau); margin-top: 2px; }
.m-rund { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--m-karte); display: inline-flex; align-items: center; justify-content: center; padding: 0; color: var(--m-tinte); flex: none; font-weight: 600; font-size: 14px; }
.m-rund.av { background: var(--m-salbei-hell); color: var(--m-salbei-dunkel); }

/* Suche */
.m-suche { margin: 18px 20px 0; height: 52px; border-radius: 26px; background: var(--m-karte); display: flex; align-items: center; padding: 0 6px 0 20px; gap: 8px; }
.m-suche input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--m-tinte); min-width: 0; padding: 0; height: 100%; }
.m-suche button { width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--m-tinte); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; }

/* Kacheln */
.m-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 20px 0; }
.m-kachel { background: var(--m-karte); border-radius: 22px; padding: 14px 16px; min-height: 108px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; border: none; text-align: left; color: var(--m-tinte); }
.m-kachel.voll { background: var(--m-salbei); color: #fff; }
.m-kachel .k { font-size: 13px; color: var(--m-grau); }
.m-kachel.voll .k { color: rgba(255,255,255,0.88); }
.m-kachel .v { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.m-kachel .zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.m-kreis { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--m-salbei-hell); color: var(--m-salbei-dunkel); }
.m-kreis.sand { background: var(--m-sand); color: var(--m-sand-text); }
.m-kopfzeile { display: flex; align-items: center; gap: 10px; }
.m-balken { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.m-balken span { width: 5px; border-radius: 3px; background: var(--m-salbei-dunkel); }
.m-balken span:last-child { background: var(--m-salbei); }

/* Karte mit Verlauf */
.m-karte { margin: 10px 20px 0; background: var(--m-karte); border-radius: 22px; padding: 16px; }
.m-karte h2 { font-size: 17px; font-weight: 600; margin: 0; }
.m-kapsel { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-kapsel.plus { background: var(--m-plus-hell); color: var(--m-plus); }
.m-kapsel.minus { background: var(--m-minus-hell); color: var(--m-minus); }
.m-kapsel.ruhig { background: var(--m-salbei-hell); color: var(--m-salbei-dunkel); }
.m-paar { display: flex; gap: 8px; margin-top: 12px; }
.m-paar > div { flex: 1; background: #F7F6F2; border-radius: 14px; padding: 8px 12px; min-width: 0; }
.m-paar .k { font-size: 12px; color: var(--m-grau); }
.m-paar .v { font-size: 17px; font-weight: 600; }
.m-verlauf { width: 100%; height: 96px; margin-top: 8px; display: block; }
.m-leer { font-size: 14px; color: var(--m-grau); padding: 12px 0 4px; }

/* Bereiche */
.m-bereich { min-height: 112px; }
.m-bereich .n { font-size: 16px; font-weight: 600; display: block; }
.m-bereich .s { font-size: 13px; color: var(--m-grau); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-bereich.voll .s { color: rgba(255,255,255,0.88); }
.m-bereich.voll .m-kreis { background: rgba(255,255,255,0.18); color: #fff; }
.m-zaehler { min-width: 24px; height: 24px; border-radius: 12px; background: var(--m-rot); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }
.m-schnell { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.m-schnell button { display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; background: transparent; font-size: 12px; padding: 0; text-align: center; }
.m-schnell button > span { width: 56px; height: 56px; border-radius: 18px; background: var(--m-feld); display: flex; align-items: center; justify-content: center; color: var(--m-salbei-dunkel); }

/* Leiste unten */
.m-leiste { position: fixed; left: 20px; right: 20px; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); height: 68px; border-radius: 34px; background: var(--m-karte);
  box-shadow: 0 10px 30px rgba(46,69,53,0.14); display: flex; align-items: center; justify-content: space-around; padding: 0 8px; z-index: 50; max-width: 520px; margin: 0 auto; }
.m-leiste button { width: 52px; height: 52px; border-radius: 26px; border: none; background: transparent; color: #8A8F87; display: flex; align-items: center; justify-content: center; padding: 0; }
.m-leiste button.an { color: var(--m-tinte); }
.m-leiste button.an svg { fill: var(--m-tinte); }
.m-leiste button.neu { width: 56px; height: 56px; border-radius: 50%; background: var(--m-salbei); color: #fff; }

/* Blatt von unten (Neu, Profil) */
.m-schleier { position: fixed; inset: 0; background: rgba(29,33,30,0.35); z-index: 60; }
.m-blatt { position: fixed; left: 0; right: 0; bottom: 0; background: var(--m-karte); border-radius: 28px 28px 0 0; z-index: 61; max-width: 560px; margin: 0 auto;
  padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 24px); font-family: var(--m-schrift); color: var(--m-tinte); }
.m-blatt .griff { width: 40px; height: 5px; border-radius: 3px; background: #D9D7D0; margin: 0 auto 14px; }
.m-blatt h3 { font-size: 20px; font-weight: 500; margin: 0 0 10px; }
.m-zeile { width: 100%; display: flex; align-items: center; gap: 14px; min-height: 60px; border: none; background: transparent; text-align: left; padding: 0; border-top: 1px solid var(--m-linie); font-size: 16px; }
.m-zeile:first-of-type { border-top: none; }
.m-zeile .t { flex: 1; min-width: 0; }
.m-zeile .t small { display: block; font-size: 13px; color: var(--m-grau); }
.m-umschalter { display: flex; background: var(--m-feld); border-radius: 14px; padding: 4px; gap: 4px; margin: 6px 0 4px; }
.m-umschalter button { flex: 1; height: 40px; border: none; border-radius: 10px; background: transparent; font-size: 15px; }
.m-umschalter button.an { background: var(--m-karte); box-shadow: 0 1px 3px rgba(0,0,0,0.08); font-weight: 500; }

/* ======================================================================
   Übrige Seiten im Salbei-Kleid (.mobil-klassisch)
   Statt jede Seite neu zu bauen, bekommen die vorhandenen Seiten die
   Farben über die Variablen aus styles.css – Akzent, Flächen, Rahmen.
   Seitenleiste und Bereichsleiste weichen dem Kopf #mobil-rahmen.
   ====================================================================== */
html.mobil.mobil-klassisch {
  --bg: #ECEAE4; --panel: #FFFFFF; --panel2: #F3F1EC; --border: #E4E2DB;
  --text: #1D211E; --muted: #6F746D; --accent: #5F7C64; --accent-hover: #4E6853;
  --primary-subtle: #E2EAE1; --radius: 20px; --shadow-card: none;
}
html.mobil.mobil-klassisch body { background: var(--m-grund); font-family: var(--m-schrift); }
html.mobil.mobil-klassisch #mobil-app { display: block; min-height: 0; padding: 0; background: none; }
html.mobil.mobil-klassisch #mobil-rahmen { display: block; }
html.mobil.mobil-klassisch .app-shell { flex-direction: column; height: 100vh; height: 100dvh; }
html.mobil.mobil-klassisch .rail,
html.mobil.mobil-klassisch aside.sidebar,
html.mobil.mobil-klassisch .topbar .nav-toggle,
html.mobil.mobil-klassisch .topbar .page-title { display: none !important; }
html.mobil.mobil-klassisch .content { background: var(--m-grund); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 110px); -webkit-overflow-scrolling: touch; }
html.mobil.mobil-klassisch header.topbar { position: static; background: transparent; border: none; padding: 4px 16px 0; justify-content: flex-start; }
html.mobil.mobil-klassisch main { padding: 12px 16px 24px; }
html.mobil.mobil-klassisch .panel { border: none; border-radius: 20px; box-shadow: none; overflow-x: auto; }
html.mobil.mobil-klassisch .content button { border-radius: 14px; min-height: 40px; }
html.mobil.mobil-klassisch .content button.link, html.mobil.mobil-klassisch .content button.danger { min-height: 0; }
/* Der Rundgang zeigt auf Desktop-Leisten, die es hier nicht gibt */
html.mobil .ww-angebot { display: none !important; }
html.mobil.mobil-klassisch input, html.mobil.mobil-klassisch select, html.mobil.mobil-klassisch textarea { border-radius: 12px; font-size: 16px; }
html.mobil.mobil-klassisch h1, html.mobil.mobil-klassisch h2, html.mobil.mobil-klassisch h3 { letter-spacing: -0.01em; }

#mobil-rahmen { position: sticky; top: 0; z-index: 30; background: var(--m-grund); font-family: var(--m-schrift); color: var(--m-tinte);
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 10px; }
#mobil-rahmen .m-rkopf { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
#mobil-rahmen .m-rund { width: 44px; height: 44px; min-height: 0; border-radius: 50%; border: none; background: var(--m-karte); color: var(--m-tinte); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
#mobil-rahmen .m-rund:hover { background: var(--m-karte); }
#mobil-rahmen .m-rtitel { font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
#mobil-rahmen .m-ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-kapselreihe { display: flex; gap: 8px; padding: 12px 16px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m-kapselreihe::-webkit-scrollbar { display: none; }
.m-kapselreihe.unter { padding-top: 8px; }
:is(#mobil-rahmen, #mobil-app) .m-kapselknopf, :is(#mobil-rahmen, #mobil-app) .m-unterknopf { flex: none; min-height: 0; height: 38px; padding: 0 16px; border-radius: 19px; border: none; background: var(--m-karte); color: var(--m-tinte);
  font: inherit; font-size: 14px; font-weight: 400; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
:is(#mobil-rahmen, #mobil-app) .m-unterknopf { height: 32px; padding: 0 12px; font-size: 13px; background: transparent; border: 1px solid #D9D7D0; }
:is(#mobil-rahmen, #mobil-app) .m-kapselknopf:hover { background: var(--m-karte); }
:is(#mobil-rahmen, #mobil-app) .m-unterknopf:hover { background: transparent; }
:is(#mobil-rahmen, #mobil-app) .m-kapselknopf.an, :is(#mobil-rahmen, #mobil-app) .m-kapselknopf.an:hover { background: var(--m-tinte); color: #fff; }
:is(#mobil-rahmen, #mobil-app) .m-unterknopf.an, :is(#mobil-rahmen, #mobil-app) .m-unterknopf.an:hover { background: var(--m-salbei-hell); border-color: var(--m-salbei-hell); color: var(--m-salbei-dunkel); }
:is(#mobil-rahmen, #mobil-app) .m-kapselknopf .m-zahl { font-size: 12px; background: var(--m-salbei); color: #fff; border-radius: 9px; padding: 1px 7px; }

/* Die Desktop-Regel button:hover (Akzentblau) wiegt mehr als eine einzelne
   Klasse – ohne diese Zeilen färbte sich am Handy die Zeile unter dem Finger blau. */
#mobil-app .m-zeile:hover, #mobil-app .m-schnell button:hover,
#mobil-app .m-leiste button:hover, #mobil-app .m-umschalter button:hover { background: transparent; }
#mobil-app .m-umschalter button.an:hover, #mobil-app .m-kachel:hover, #mobil-app .m-rund:hover { background: var(--m-karte); }
#mobil-app .m-kachel.voll:hover, #mobil-app .m-leiste button.neu:hover { background: var(--m-salbei); }
#mobil-app .m-rund.av:hover { background: var(--m-salbei-hell); }
#mobil-app .m-suche button:hover { background: var(--m-tinte); }


/* ---- Zu prüfen (Stufe 2, 12.10.2026) ---- */
#mobil-app .m-kopf .m-rund + .m-titel { font-size: 24px; }
#mobil-app .m-kapselreihe { padding-top: 14px; }
.m-hinweis { font-size: 13px; color: var(--m-grau); line-height: 1.45; margin-top: 10px; }
#mobil-app .m-breit { width: 100%; height: 48px; border-radius: 24px; border: none; margin-top: 14px; font-size: 15px; font-weight: 500; }
#mobil-app .m-breit.dunkel, #mobil-app .m-breit.dunkel:hover { background: var(--m-tinte); color: #fff; }
#mobil-app .m-breit.hell, #mobil-app .m-breit.hell:hover { background: var(--m-feld); color: var(--m-tinte); }
.m-pliste { padding: 4px 16px 12px; }
.m-tag { font-size: 13px; color: var(--m-grau); padding: 14px 0 4px; }
.m-pz { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--m-linie); }
.m-tag + .m-pz { border-top: none; }
#mobil-app .m-pz-haupt { flex: 1; min-width: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
  padding: 12px 0; border: none; background: transparent; text-align: left; }
#mobil-app .m-pz-haupt:hover { background: transparent; }
.m-pz-av { width: 40px; height: 40px; border-radius: 50%; background: var(--m-feld); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--m-salbei-dunkel); grid-row: span 2; }
.m-pz-t { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-pz-b { font-size: 15px; text-align: right; }
.m-pz-b.plus { color: var(--m-plus); }
.m-pz-s { font-size: 13px; color: var(--m-grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-pz-v, .m-pz-leer { justify-self: end; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center;
  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.m-pz-v { background: var(--m-salbei-hell); color: var(--m-salbei-dunkel); }
.m-pz-leer { background: var(--m-sand); color: var(--m-sand-text); }
#mobil-app .m-pz-ok { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #C9CEC6; background: #fff; color: var(--m-salbei-dunkel);
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
#mobil-app .m-pz-ok:hover, #mobil-app .m-pz-ok:active { background: var(--m-salbei); border-color: var(--m-salbei); color: #fff; }
.m-pz-ok.leer { border: none; background: none; }

/* Kategorie-Blatt */
.m-blatt.hoch { max-height: 86vh; max-height: 86dvh; display: flex; flex-direction: column; }
.m-katsuche { display: flex; align-items: center; gap: 8px; height: 46px; border-radius: 14px; background: var(--m-feld); padding: 0 14px; color: var(--m-grau); flex: none; }
.m-katsuche input { flex: 1; border: none; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--m-tinte); min-width: 0; padding: 0; }
.m-katliste { overflow-y: auto; margin: 8px -20px 0; padding: 0 20px 8px; -webkit-overflow-scrolling: touch; }
.m-katgruppe { padding-top: 12px; }
.m-katgruppe .h { font-size: 13px; color: var(--m-grau); margin-bottom: 8px; }
.m-katgruppe .c { display: flex; flex-wrap: wrap; gap: 8px; }
#mobil-app .m-katchip { height: 40px; padding: 0 14px; border-radius: 20px; border: none; background: var(--m-feld); color: var(--m-tinte); font-size: 15px; }
#mobil-app .m-katchip:hover { background: var(--m-feld); }
#mobil-app .m-katchip:active { background: var(--m-salbei-hell); }
#mobil-app .m-katchip.vorschlag, #mobil-app .m-katchip.vorschlag:hover { background: var(--m-salbei); color: #fff; }

/* Bestätigung unten */
.m-meldung { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 70;
  background: var(--m-tinte); color: #fff; font-family: var(--m-schrift); font-size: 14px; padding: 10px 18px; border-radius: 20px; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); }

/* Rückgängig-Hinweis über der Leiste statt darauf */
html.mobil .rg-toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important; left: 16px !important; right: 16px !important;
  transform: none !important; max-width: none !important; border-radius: 18px !important; font-family: var(--m-schrift); }
html.mobil .rg-toast button.link { color: #C7DAC9 !important; }

/* ---- Hinzufügen (Stufe 3) ---- */
.m-hz h2 { font-size: 17px; }
.m-hz-kopf { display: flex; gap: 12px; align-items: flex-start; }
.m-feld { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--m-grau); }
.m-feld select { height: 48px; border-radius: 14px; border: none; background: var(--m-feld); font: inherit; font-size: 16px; color: var(--m-tinte); padding: 0 12px; width: 100%; }
#mobil-app .m-datei { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; position: relative; overflow: hidden; }
#mobil-app .m-datei input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#mobil-app .m-breit.salbei { background: var(--m-salbei); color: #fff; }
.m-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-zwei .m-breit { margin-top: 14px; }

/* Dokument-Dialog (dokumente.js) als Blatt von unten, in Salbei */
html.mobil .dok-dialog-hg { --accent: #5F7C64; --accent-hover: #4E6853; --panel2: #F3F1EC; --border: #E4E2DB; --primary-subtle: #E2EAE1;
  place-items: end center; padding: 0; background: rgba(29,33,30,0.35); font-family: var(--m-schrift); }
html.mobil .dok-dialog { border-radius: 28px 28px 0 0; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh;
  padding: 22px 20px calc(env(safe-area-inset-bottom, 0px) + 22px); }
html.mobil .dok-dialog .dok-form { grid-template-columns: 1fr !important; }
html.mobil .dok-dialog input, html.mobil .dok-dialog select { font-size: 16px; height: 46px; border-radius: 12px; }
html.mobil .dok-dialog-fuss { flex-wrap: wrap; gap: 8px; }
html.mobil .dok-dialog-fuss button { min-height: 46px; border-radius: 23px; }

/* ---- Import-Vorschau am Handy (13.10.2026) ----
   Die Vorschau aus ki-import.js ist eine breite Tabelle mit Eingabefeldern je
   Zeile. Am Handy wird jede Zeile zur Karte:
     [✓] Beschreibung ............ Betrag
         Kategorie (+ Objekt)
         Datum            Konto
   Die Felder bleiben dieselben – Speichern liest sie wie gewohnt aus. */
html.mobil #ki-preview .ki-preview-table thead { display: none; }
html.mobil #ki-preview .ki-preview-table, html.mobil #ki-preview .ki-preview-table tbody { display: block; width: 100%; }
html.mobil #ki-preview .ki-preview-table tr[data-id] { display: grid; grid-template-columns: 30px minmax(0, 1fr) 112px;
  grid-template-areas: "cb text betrag" "cb kat kat" "cb datum konto"; gap: 8px 10px; padding: 14px 14px 14px 10px; border-bottom: 1px solid var(--m-linie); align-items: start; }
html.mobil #ki-preview .ki-preview-table tr[data-id] > td { display: block; padding: 0 !important; width: auto !important; min-width: 0 !important; border: none; }
html.mobil #ki-preview .ki-preview-table tr[data-id] > td:nth-child(1) { grid-area: cb; padding-top: 6px !important; }
html.mobil #ki-preview .ki-preview-table tr[data-id] > td:nth-child(2) { grid-area: datum; }
html.mobil #ki-preview .ki-preview-table tr[data-id] > td:nth-child(3) { grid-area: text; }
html.mobil #ki-preview .ki-preview-table tr[data-id] > td:nth-child(4) { grid-area: betrag; }
html.mobil #ki-preview .ki-preview-table tr[data-id] > td:nth-child(5) { grid-area: kat; }
html.mobil #ki-preview .ki-preview-table tr[data-id] > td:nth-child(6) { grid-area: konto; }
html.mobil #ki-preview .ki-preview-table tr[data-id][style*="display:none"] { display: none; }
html.mobil #ki-preview .ki-preview-table input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--m-salbei); }
html.mobil #ki-preview .ki-preview-table .ki-datum, html.mobil #ki-preview .ki-preview-table select { width: 100% !important; height: 40px; font-size: 14px !important; }
html.mobil #ki-preview .ki-preview-table .ki-beschr { font-size: 15px !important; border: none; background: transparent; padding: 0; min-height: 0; resize: none !important; }
html.mobil #ki-preview .ki-preview-table .ki-betrag { font-size: 15px; font-weight: 600; text-align: right; height: 40px; }
html.mobil #ki-preview .ki-preview-table tr.ki-sammel-kopf { display: flex; gap: 10px; align-items: center; padding: 12px 14px 12px 10px; }
html.mobil #ki-preview .ki-preview-table tr.ki-sammel-kopf > td { display: block; padding: 0 !important; }
html.mobil #ki-preview .ki-preview-table tr.ki-sammel-kopf > td:last-child { display: none; }
/* Kopf der Datei: Konto-Zuordnung untereinander statt nebeneinander */
html.mobil #ki-preview [data-group] > div:first-child table, html.mobil #ki-preview [data-group] > div:first-child tbody,
html.mobil #ki-preview [data-group] > div:first-child tr, html.mobil #ki-preview [data-group] > div:first-child td { display: block; width: 100%; }
html.mobil #ki-preview [data-group] > div:first-child select { width: 100% !important; min-width: 0 !important; }
/* Importieren immer erreichbar: die Knopfleiste schwebt über der Leiste */
html.mobil.mobil-klassisch #ki-preview:not(.hidden) > div:first-child > div:last-child {
  position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); z-index: 45;
  background: var(--m-karte); border-radius: 22px; padding: 10px 12px; box-shadow: 0 8px 28px rgba(46,69,53,0.18);
  flex-wrap: wrap; justify-content: flex-end; }
html.mobil.mobil-klassisch #ki-preview:not(.hidden) #ki-import-btn { flex: 1 1 auto; }
/* Dort schwebt die Knopfleiste ohnehin – der zweite Knopf am Ende wäre doppelt */
html.mobil.mobil-klassisch #ki-preview .knopf-unten { display: none; }
html.mobil.mobil-klassisch #ki-preview:not(.hidden) { padding-bottom: 150px; }