/* ------------------------------------------------------------- Farbwelten
   Vier Paletten, jede hell und dunkel. Umschaltbar in den Einstellungen
   ueber [data-farbe] am <html>. Ohne Angabe gilt "nordlicht".
   Die Regeln weiter unten benutzen nur diese Variablen. */

/* --- Nordlicht: kuehles Graublau mit Indigo (Standard) ------------------- */
:root,
:root[data-farbe="nordlicht"]{
  --grund:#f5f7fa; --flaeche:#ffffff; --flaeche2:#edf1f6; --kopf:#e8edf4;
  --feld:#ffffff;
  --linie:#dbe2ea; --linie2:#eceff4; --rand:#bfc9d6;
  --text:#121820; --text2:#48525f; --text3:#78838f;
  --akz:#3b5bdb; --akz-stark:#2f49b2; --akz-t:#ecf0fe; --akz-auf:#ffffff;
  --eis:#1f6f8b; --frucht:#b0456a; --zub:#3f8f68;
  --eis-t:#f4f7fb; --eis-w:#e6edf6;
  --warn:#9a6a1c; --warn-t:#fdf6e9; --fehler:#c0392b;
  --offen:#8a6320; --offen-t:#fdf4e6;
  --fehlt-t:#f7f9fc;
  --meldung:#1b2330; --meldung-t:#f2f5f9; --meldung-r:#5b6675;
  --schatten:0 1px 2px rgba(18,24,32,.06);
  --rund:8px; --rund2:6px; --rund3:4px;
}
:root[data-thema="dunkel"],
:root[data-thema="dunkel"][data-farbe="nordlicht"]{
  --grund:#0f1319; --flaeche:#161c24; --flaeche2:#1d242e; --kopf:#1a212a;
  --feld:#131920;
  --linie:#2a333f; --linie2:#1f2730; --rand:#44515f;
  --text:#e6ebf2; --text2:#adb8c6; --text3:#8290a0;
  --akz:#7590ff; --akz-stark:#93a8ff; --akz-t:#1a2237; --akz-auf:#0f1319;
  --eis:#63b3cd; --frucht:#e389a6; --zub:#6fc79a;
  --eis-t:#151b23; --eis-w:#1b232d;
  --warn:#d6a44f; --warn-t:#231e14; --fehler:#e8796a;
  --offen:#d3a55e; --offen-t:#231e14;
  --fehlt-t:#12181f;
  --meldung:#232c38; --meldung-t:#e8edf4; --meldung-r:#5d6a7a;
  --schatten:none;
}

/* --- Salbei: helles Naturgruen mit Smaragd ------------------------------ */
:root[data-farbe="salbei"]{
  --grund:#f5f8f5; --flaeche:#ffffff; --flaeche2:#ecf2ec; --kopf:#e7efe8;
  --feld:#ffffff;
  --linie:#dbe5db; --linie2:#edf2ed; --rand:#bfcdc0;
  --text:#121a15; --text2:#475449; --text3:#77857a;
  --akz:#2f8a5f; --akz-stark:#256d4b; --akz-t:#e9f5ee; --akz-auf:#ffffff;
  --eis:#2b6f83; --frucht:#a8496a; --zub:#6a8f2f;
  --eis-t:#f4f8f5; --eis-w:#e6efe8;
  --warn:#96691b; --warn-t:#fbf5e7; --fehler:#b93f31;
  --offen:#87641f; --offen-t:#faf3e5;
  --fehlt-t:#f6faf7;
  --meldung:#1a251e; --meldung-t:#f1f6f2; --meldung-r:#586b5d;
  --schatten:0 1px 2px rgba(18,26,21,.06);
}
:root[data-thema="dunkel"][data-farbe="salbei"]{
  --grund:#0f1411; --flaeche:#161d18; --flaeche2:#1d2620; --kopf:#1a231c;
  --feld:#131a15;
  --linie:#2a352d; --linie2:#1f2921; --rand:#455345;
  --text:#e6efe8; --text2:#aebbb1; --text3:#83948a;
  --akz:#5fc691; --akz-stark:#7fd8a9; --akz-t:#152520; --akz-auf:#0f1411;
  --eis:#68b4c8; --frucht:#e08aa6; --zub:#a9c96a;
  --eis-t:#141b16; --eis-w:#1a231c;
  --warn:#d2a453; --warn-t:#221e14; --fehler:#e57f6d;
  --offen:#cfa35d; --offen-t:#221e14;
  --fehlt-t:#121810;
  --meldung:#212d25; --meldung-t:#e9f2ec; --meldung-r:#5c6f61;
  --schatten:none;
}

/* --- Karamell: warmes Beige mit Bernstein ------------------------------- */
:root[data-farbe="karamell"]{
  --grund:#faf6f0; --flaeche:#ffffff; --flaeche2:#f4ece1; --kopf:#f0e6d8;
  --feld:#ffffff;
  --linie:#e6dccd; --linie2:#f2ebe1; --rand:#cdbda6;
  --text:#1d1710; --text2:#584c3d; --text3:#8a7c6a;
  --akz:#a8651c; --akz-stark:#864f12; --akz-t:#fbf0e2; --akz-auf:#ffffff;
  --eis:#8a6a2f; --frucht:#a63f4e; --zub:#5c7c36;
  --eis-t:#faf6ef; --eis-w:#f2e9db;
  --warn:#96691b; --warn-t:#fbf3e5; --fehler:#b8402f;
  --offen:#8a6320; --offen-t:#faf2e3;
  --fehlt-t:#fbf7f1;
  --meldung:#241c12; --meldung-t:#f7f2ea; --meldung-r:#6b5c46;
  --schatten:0 1px 2px rgba(29,23,16,.07);
}
:root[data-thema="dunkel"][data-farbe="karamell"]{
  --grund:#15110c; --flaeche:#1d1811; --flaeche2:#261f16; --kopf:#231c14;
  --feld:#18130d;
  --linie:#352b20; --linie2:#272018; --rand:#544634;
  --text:#f0e7da; --text2:#bdaf9c; --text3:#8e8272;
  --akz:#e29a4a; --akz-stark:#f0b062; --akz-t:#2a2014; --akz-auf:#15110c;
  --eis:#d6b269; --frucht:#e58a92; --zub:#a9c46f;
  --eis-t:#1a150e; --eis-w:#231c14;
  --warn:#d7a45a; --warn-t:#241d12; --fehler:#e78271;
  --offen:#cfa35d; --offen-t:#241d12;
  --fehlt-t:#17120c;
  --meldung:#2b2318; --meldung-t:#f4ece0; --meldung-r:#6d5e48;
  --schatten:none;
}

/* --- Beere: helles Rose mit Himbeere ------------------------------------ */
:root[data-farbe="beere"]{
  --grund:#fbf5f7; --flaeche:#ffffff; --flaeche2:#f6ecf0; --kopf:#f3e4ea;
  --feld:#ffffff;
  --linie:#ecdbe2; --linie2:#f6edf0; --rand:#d3bbc4;
  --text:#1d1318; --text2:#574651; --text3:#8b7783;
  --akz:#b0305e; --akz-stark:#8e2249; --akz-t:#fceaf1; --akz-auf:#ffffff;
  --eis:#7a3f86; --frucht:#b0305e; --zub:#3f7f62;
  --eis-t:#faf4f7; --eis-w:#f4e7ed;
  --warn:#96691b; --warn-t:#fbf4e6; --fehler:#bf3a35;
  --offen:#8a6320; --offen-t:#faf3e5;
  --fehlt-t:#fcf7f9;
  --meldung:#231822; --meldung-t:#f7eff3; --meldung-r:#6d5765;
  --schatten:0 1px 2px rgba(29,19,24,.07);
}
:root[data-thema="dunkel"][data-farbe="beere"]{
  --grund:#150f13; --flaeche:#1d151a; --flaeche2:#261c23; --kopf:#231a20;
  --feld:#181116;
  --linie:#352833; --linie2:#271e25; --rand:#54414f;
  --text:#f2e6ed; --text2:#c0acb9; --text3:#8f7f8a;
  --akz:#ef79a5; --akz-stark:#f795b8; --akz-t:#2a1620; --akz-auf:#150f13;
  --eis:#c79ae0; --frucht:#ef79a5; --zub:#7fd0a6;
  --eis-t:#1a1318; --eis-w:#231a20;
  --warn:#d2a453; --warn-t:#241e12; --fehler:#e87f78;
  --offen:#cfa35d; --offen-t:#241e12;
  --fehlt-t:#170f14;
  --meldung:#2b2029; --meldung-t:#f4e9ef; --meldung-r:#6e5a68;
  --schatten:none;
}

/* --- Meer: Tuerkis und Tiefblau ----------------------------------------- */
:root[data-farbe="meer"]{
  --grund:#f2f8f9; --flaeche:#ffffff; --flaeche2:#e8f2f4; --kopf:#ddecef;
  --feld:#ffffff;
  --linie:#d3e3e7; --linie2:#eaf2f4; --rand:#b4cbd1;
  --text:#0f1b1e; --text2:#42545a; --text3:#6f858c;
  --akz:#0f7d86; --akz-stark:#0b626a; --akz-t:#e3f4f5; --akz-auf:#ffffff;
  --eis:#215f9a; --frucht:#a83f63; --zub:#2f8a5f;
  --eis-t:#f3f9fa; --eis-w:#e4eff2;
  --warn:#8f6a1c; --warn-t:#fbf5e7; --fehler:#bb4133;
  --offen:#84631f; --offen-t:#faf4e6;
  --fehlt-t:#f5fafb;
  --meldung:#122023; --meldung-t:#eef6f7; --meldung-r:#4f6a70;
  --schatten:0 1px 2px rgba(15,27,30,.07);
}
:root[data-thema="dunkel"][data-farbe="meer"]{
  --grund:#0b1417; --flaeche:#121d20; --flaeche2:#18272b; --kopf:#152326;
  --feld:#0f191c;
  --linie:#24373b; --linie2:#1a2a2e; --rand:#3d585e;
  --text:#e4f0f2; --text2:#a9bec3; --text3:#7d9298;
  --akz:#3fc2cc; --akz-stark:#63d4dc; --akz-t:#10282b; --akz-auf:#0b1417;
  --eis:#6aa9e0; --frucht:#e38aa8; --zub:#6ecf9d;
  --eis-t:#101b1e; --eis-w:#152326;
  --warn:#d2a453; --warn-t:#22200f; --fehler:#e5827a;
  --offen:#cfa35d; --offen-t:#22200f;
  --fehlt-t:#0d1719;
  --meldung:#19292d; --meldung-t:#e8f2f4; --meldung-r:#4f6b71;
  --schatten:none;
}

/* --- Nacht: dunkel von Haus aus, auch im hellen Modus gedaempft ---------- */
:root[data-farbe="nacht"]{
  --grund:#eef0f4; --flaeche:#ffffff; --flaeche2:#e5e8ef; --kopf:#dfe3ec;
  --feld:#ffffff;
  --linie:#d5dae4; --linie2:#e9ecf2; --rand:#b6bdcc;
  --text:#11141a; --text2:#454c5a; --text3:#737c8c;
  --akz:#3a5fd0; --akz-stark:#2c49a6; --akz-t:#e9edfb; --akz-auf:#ffffff;
  --eis:#2b6f9a; --frucht:#9c3a5c; --zub:#357a55;
  --eis-t:#f3f5fa; --eis-w:#e6ebf4;
  --warn:#8f6a1c; --warn-t:#fbf5e7; --fehler:#bb4133;
  --offen:#84631f; --offen-t:#faf4e6;
  --fehlt-t:#f4f6fa;
  --meldung:#141821; --meldung-t:#eef1f7; --meldung-r:#525b6c;
  --schatten:0 1px 2px rgba(17,20,26,.07);
}
:root[data-thema="dunkel"][data-farbe="nacht"]{
  --grund:#0a0d12; --flaeche:#11151c; --flaeche2:#171d26; --kopf:#141a23;
  --feld:#0e121a;
  --linie:#222b38; --linie2:#181f29; --rand:#3a465a;
  --text:#e7ecf5; --text2:#aab3c4; --text3:#7d8697;
  --akz:#5b8def; --akz-stark:#7ba5f5; --akz-t:#121b2c; --akz-auf:#0a0d12;
  --eis:#57b6c9; --frucht:#e38aa8; --zub:#7fcf9a;
  --eis-t:#0f141c; --eis-w:#141a23;
  --warn:#d2a453; --warn-t:#211d11; --fehler:#e5827a;
  --offen:#cfa35d; --offen-t:#211d11;
  --fehlt-t:#0c1016;
  --meldung:#171f2b; --meldung-t:#e9eef7; --meldung-r:#4e5a6e;
  --schatten:none;
}

/* --- Pflaume: neutrale Graus mit Violett -------------------------------- */
:root[data-farbe="pflaume"]{
  --grund:#f8f6fa; --flaeche:#ffffff; --flaeche2:#f0ecf5; --kopf:#ece6f2;
  --feld:#ffffff;
  --linie:#e2dceb; --linie2:#f0ecf4; --rand:#c7bed4;
  --text:#171320; --text2:#4f4760; --text3:#807793;
  --akz:#7048bf; --akz-stark:#5a37a0; --akz-t:#f2ecfd; --akz-auf:#ffffff;
  --eis:#3b6ca8; --frucht:#b53f74; --zub:#4d8a52;
  --eis-t:#f8f5fb; --eis-w:#eee7f5;
  --warn:#96651d; --warn-t:#fbf4e8; --fehler:#bd3a4d;
  --offen:#8a5f26; --offen-t:#faf2e6;
  --fehlt-t:#faf8fc;
  --meldung:#231b2e; --meldung-t:#f4f1f8; --meldung-r:#665a78;
  --schatten:0 1px 2px rgba(23,19,32,.07);
}
:root[data-thema="dunkel"][data-farbe="pflaume"]{
  --grund:#120f18; --flaeche:#191522; --flaeche2:#211c2c; --kopf:#1e1928;
  --feld:#16121d;
  --linie:#2f2840; --linie2:#241f2f; --rand:#4d4463;
  --text:#ece7f4; --text2:#b5adc5; --text3:#8c84a0;
  --akz:#a685ff; --akz-stark:#bda3ff; --akz-t:#241c38; --akz-auf:#120f18;
  --eis:#7aa6dd; --frucht:#e888b0; --zub:#8cc98f;
  --eis-t:#171320; --eis-w:#1e1929;
  --warn:#d5a355; --warn-t:#241e15; --fehler:#e87a8c;
  --offen:#d2a05e; --offen-t:#241e15;
  --fehlt-t:#151020;
  --meldung:#271f33; --meldung-t:#efeaf7; --meldung-r:#665c7a;
  --schatten:none;
}

/* --- Graphit: fast neutral mit klarem Cyanblau -------------------------- */
:root[data-farbe="graphit"]{
  --grund:#f6f7f8; --flaeche:#ffffff; --flaeche2:#eef0f2; --kopf:#e9ecef;
  --feld:#ffffff;
  --linie:#dde1e5; --linie2:#eef0f2; --rand:#c0c6cc;
  --text:#14181b; --text2:#4a5257; --text3:#79838a;
  --akz:#0e7c95; --akz-stark:#0a6176; --akz-t:#e7f5f8; --akz-auf:#ffffff;
  --eis:#3a6ea5; --frucht:#a8455f; --zub:#4f8a46;
  --eis-t:#f5f7f9; --eis-w:#e8edf1;
  --warn:#95681c; --warn-t:#fbf5e8; --fehler:#bb3b33;
  --offen:#87621f; --offen-t:#faf3e6;
  --fehlt-t:#f8fafb;
  --meldung:#1a1f23; --meldung-t:#f1f4f6; --meldung-r:#5a6469;
  --schatten:0 1px 2px rgba(20,24,27,.06);
}
:root[data-thema="dunkel"][data-farbe="graphit"]{
  --grund:#101315; --flaeche:#171b1e; --flaeche2:#1e2327; --kopf:#1b2024;
  --feld:#141719;
  --linie:#2b3236; --linie2:#202629; --rand:#465055;
  --text:#e7ebee; --text2:#aeb6bc; --text3:#838d94;
  --akz:#3fc0da; --akz-stark:#68d2e8; --akz-t:#132930; --akz-auf:#101315;
  --eis:#7aa9dd; --frucht:#e0879c; --zub:#8dc783;
  --eis-t:#151a1d; --eis-w:#1b2226;
  --warn:#d4a352; --warn-t:#231e14; --fehler:#e4796f;
  --offen:#d0a05c; --offen-t:#231e14;
  --fehlt-t:#131719;
  --meldung:#212729; --meldung-t:#eaeef0; --meldung-r:#5a6469;
  --schatten:none;
}

/* --- 3.81.0 Design E: ein Design, Akzent wählbar (Entscheidung 30.10.2026) ---
   Gemeinsame neutrale Grundfarben, nur der Akzent wechselt. Hellblau ist
   Standard; die alten Farbwelten oben bleiben lesbar, die Oberfläche bietet
   nur noch diese sechs an (alte Werte werden in darstellungAnwenden umgesetzt). */
:root[data-farbe="hellblau"],:root[data-farbe="petrol"],:root[data-farbe="gruen"],
:root[data-farbe="grau"],:root[data-farbe="orange"],:root[data-farbe="violett"]{
  --grund:#eef1f5; --flaeche:#ffffff; --flaeche2:#f4f6f9; --kopf:#f4f6f9;
  --feld:#ffffff;
  --linie:#e2e6ec; --linie2:#edf0f4; --rand:#c3c9d2;
  --text:#14171c; --text2:#4a5160; --text3:#626a78;
  --eis:#1f6f8b; --frucht:#b0456a; --zub:#2f7d4f;
  --eis-t:#f4f7fb; --eis-w:#e8eef6;
  --warn:#985a06; --warn-t:#fcf1de; --fehler:#b42318;
  --offen:#8a5a12; --offen-t:#fcf1de;
  --fehlt-t:#f7f9fc;
  --meldung:#15181d; --meldung-t:#f2f5f9; --meldung-r:#5b6675;
  --akz-auf:#ffffff;
  --schatten:0 1px 2px rgba(20,23,28,.05);
}
:root[data-farbe="hellblau"]{--akz:#2a74c4; --akz-stark:#1d5fa6; --akz-t:#e9f2fc; --akz-hell:#3b8ee0}
:root[data-farbe="petrol"]{--akz:#0e7480; --akz-stark:#0a5c66; --akz-t:#e3f2f3; --akz-hell:#1a9aa8}
:root[data-farbe="gruen"]{--akz:#2c7d52; --akz-stark:#226440; --akz-t:#e6f3eb; --akz-hell:#3fa06c}
:root[data-farbe="grau"]{--akz:#555d6b; --akz-stark:#3e4552; --akz-t:#eef0f3; --akz-hell:#7a8392}
:root[data-farbe="orange"]{--akz:#b5470f; --akz-stark:#93390b; --akz-t:#fcede4; --akz-hell:#e0702f}
:root[data-farbe="violett"]{--akz:#8e4a89; --akz-stark:#773b73; --akz-t:#f4eaf3; --akz-hell:#a95fa3}
:root[data-thema="dunkel"][data-farbe="hellblau"],:root[data-thema="dunkel"][data-farbe="petrol"],
:root[data-thema="dunkel"][data-farbe="gruen"],:root[data-thema="dunkel"][data-farbe="grau"],
:root[data-thema="dunkel"][data-farbe="orange"],:root[data-thema="dunkel"][data-farbe="violett"]{
  --grund:#0f1217; --flaeche:#171b21; --flaeche2:#1e232b; --kopf:#1b2027;
  --feld:#13171c;
  --linie:#2a313b; --linie2:#20262e; --rand:#454e5b;
  --text:#e7ebf0; --text2:#adb5c2; --text3:#8b95a3;
  --eis:#63b3cd; --frucht:#e389a6; --zub:#6fc79a;
  --eis-t:#151a21; --eis-w:#1b222b;
  --warn:#d6a44f; --warn-t:#231e14; --fehler:#e8796a;
  --offen:#d3a55e; --offen-t:#231e14;
  --fehlt-t:#12161b;
  --meldung:#232a34; --meldung-t:#e8edf4; --meldung-r:#5d6a7a;
  --akz-auf:#0f1217;
  --schatten:none;
}
:root[data-thema="dunkel"][data-farbe="hellblau"]{--akz:#6aa9f0; --akz-stark:#8dbdf5; --akz-t:#172536; --akz-hell:#6aa9f0}
:root[data-thema="dunkel"][data-farbe="petrol"]{--akz:#4fb3be; --akz-stark:#76c8d1; --akz-t:#132a2d; --akz-hell:#4fb3be}
:root[data-thema="dunkel"][data-farbe="gruen"]{--akz:#6fc79a; --akz-stark:#93d8b4; --akz-t:#15281e; --akz-hell:#6fc79a}
:root[data-thema="dunkel"][data-farbe="grau"]{--akz:#a9b1be; --akz-stark:#c6ccd6; --akz-t:#22272f; --akz-hell:#a9b1be}
:root[data-thema="dunkel"][data-farbe="orange"]{--akz:#f0975e; --akz-stark:#f5b388; --akz-t:#2e1d12; --akz-hell:#f0975e}
:root[data-thema="dunkel"][data-farbe="violett"]{--akz:#d592cf; --akz-stark:#e3b1de; --akz-t:#2a1b29; --akz-hell:#d592cf}

/* MHD hervorheben: Farbe in Einstellungen → Darstellung (Standard dunkel). */
:root,:root[data-mhd="dunkel"]{--mhd-g:#15181d; --mhd-t:#ffffff}
:root[data-mhd="blau"]{--mhd-g:#1d65ae; --mhd-t:#ffffff}
:root[data-mhd="orange"]{--mhd-g:#c2410c; --mhd-t:#ffffff}
:root[data-mhd="rot"]{--mhd-g:#b42318; --mhd-t:#ffffff}
:root[data-mhd="gruen"]{--mhd-g:#1f7a4d; --mhd-t:#ffffff}
:root[data-mhd="gelb"]{--mhd-g:#ffe39a; --mhd-t:#4f3b00}
:root[data-thema="dunkel"][data-mhd="dunkel"],:root[data-thema="dunkel"]:not([data-mhd]){--mhd-g:#e7ebf0; --mhd-t:#0f1217}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--grund);color:var(--text);
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--akz)}
table{border-collapse:collapse;width:100%}
.n{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:Consolas,"Cascadia Mono",monospace;font-size:12.5px}
.klein{font-size:12.5px;color:var(--text3)}
.wg{flex-grow:1}
::selection{background:var(--akz);color:var(--akz-auf)}

/* ------------------------------------------------------------------ Gerüst */
#huelle{display:flex;height:100%}
nav{width:198px;flex-shrink:0;background:var(--flaeche2);
  border-right:1px solid var(--linie);display:flex;flex-direction:column;padding:16px 8px 8px 8px}
nav .marke{padding:2px 6px 18px 6px;display:flex;align-items:center;gap:8px;min-width:0}
nav .marke img{width:30px;height:30px;flex:0 0 30px}
nav .marke>div{min-width:0}
nav .marke b{display:block;font-size:14px;font-weight:600;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav .marke span{font-size:10px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text3)}
nav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:none;border-radius:var(--rund2);padding:0 10px;min-height:32px;
  font:inherit;font-size:13.5px;font-weight:500;color:var(--text2);cursor:pointer;margin-bottom:1px}
nav button:hover{background:var(--linie2);color:var(--text)}
nav button[aria-current="page"]{background:var(--flaeche);color:var(--text);font-weight:600;
  box-shadow:var(--schatten)}
[data-thema="dunkel"] nav button[aria-current="page"]{background:var(--linie)}
nav .punkt{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:currentColor;opacity:.45}
nav button[aria-current="page"] .punkt{opacity:1;background:var(--akz)}
nav .fuss{margin-top:auto;padding:12px 10px;font-size:11px;color:var(--text3);line-height:1.5;
  word-break:break-all;border-top:1px solid var(--linie)}
/* Gruppen in der Seitenleiste. Die Gruppe der aktuellen Seite ist offen. */
nav #navliste{display:flex;flex-direction:column}
nav button.navgruppe{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--text3);font-weight:700;min-height:28px;margin-top:10px}
nav button.navgruppe:first-child{margin-top:0}
nav button.navgruppe:hover{background:none;color:var(--text2)}
nav button.navgruppe .pfeil{margin-left:auto;font-size:9px;opacity:.7}
nav button.naveintrag{padding-left:14px}
nav .navzahl{margin-left:auto;background:var(--offen);color:#fff;border-radius:9px;
  font-size:10.5px;font-weight:700;padding:1px 6px;line-height:1.5}
main{flex-grow:1;overflow:auto;padding:20px 24px 48px 24px;min-width:0;overflow-anchor:none}

/* --------------------------------------------------------------- Kopfzeile */
/* Kopfzeile und Ansichtsleiste bleiben beim Scrollen oben stehen. Sonst muss
   man fuer "Heute", "Als PDF speichern" oder den Umschalter jedes Mal wieder
   ganz nach oben. */
.haftleiste{position:sticky;top:-20px;z-index:40;background:var(--grund);
  margin:-20px -24px 16px -24px;padding:20px 24px 0 24px;
  border-bottom:1px solid var(--linie)}
.haftleiste .kopfzeile{border-bottom:none;margin-bottom:0;padding-bottom:10px}
.haftleiste .ansichtsleiste{margin:0;padding-bottom:10px}
.haftleiste>.segment{margin-bottom:10px}
.leistentext{max-width:420px;text-align:right;line-height:1.5}
/* Gescrollt: die Leiste rückt zusammen, alle Knöpfe bleiben. */
.haftleiste.knapp{padding-top:8px}
.haftleiste.knapp .ueber,.kopfzeile.knapp .ueber{display:none}
.haftleiste.knapp h1,.kopfzeile.knapp h1{font-size:15px}
.haftleiste.knapp .leistentext{display:none}
.haftleiste.knapp .kopfzeile{padding-bottom:6px}
.haftleiste.knapp .ansichtsleiste{padding-bottom:6px}
.kopfzeile.knapp{padding-top:10px;padding-bottom:8px}
/* Schmales Fenster: der Hinweistext fliegt raus, damit die Leiste zwei
   Zeilen bleibt und nicht den halben Bildschirm frisst. */
@media (max-width:1500px){ .leistentext{display:none} }

.kopfzeile{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  position:sticky;top:-20px;z-index:40;background:var(--grund);
  margin:-20px -24px 16px -24px;padding:20px 24px 12px 24px;
  border-bottom:1px solid var(--linie)}
.haftleiste .kopfzeile{position:static;margin:0;padding:0 0 10px 0}
.kopfzeile h1{margin:1px 0 0 0;font-size:20px;font-weight:600;line-height:1.2;
  letter-spacing:-.2px}
.ueber{font-size:10.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--text3)}

/* ----------------------------------------------------------------- Knöpfe */
button.k,a.k{font:inherit;font-size:13px;font-weight:500;color:var(--text);
  background:var(--flaeche);border:1px solid var(--rand);border-radius:var(--rund2);
  padding:0 12px;height:32px;min-height:32px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;justify-content:center;white-space:nowrap}
button.k:hover,a.k:hover{background:var(--flaeche2);border-color:var(--text3)}
button.k:active{transform:translateY(.5px)}
button.k.haupt{background:var(--akz);border-color:var(--akz);color:var(--akz-auf);font-weight:600}
button.k.haupt:hover{background:var(--akz-stark);border-color:var(--akz-stark)}
button.k.stil{border-color:transparent;background:none;color:var(--text2)}
button.k.stil:hover{background:var(--flaeche2);border-color:transparent;color:var(--text)}
button.k.gruen{color:var(--zub);border-color:var(--zub)}
button.k.rot{color:var(--fehler);border-color:var(--rand)}
button.k.rot:hover{border-color:var(--fehler)}
button.k.mini{height:28px;min-height:28px;padding:0 10px;font-size:12.5px}
button.symbol{width:32px;padding:0}
button.k.mini.symbol{width:28px}
.knopfreihe{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Segmentleiste, z. B. die Wochen */
.segment{display:inline-flex;border:1px solid var(--linie);border-radius:var(--rund2);
  overflow:hidden;background:var(--flaeche);margin-bottom:14px;max-width:100%;flex-wrap:wrap}
.segment button{font:inherit;font-size:12.5px;color:var(--text2);background:none;border:none;
  border-right:1px solid var(--linie);padding:0 14px;height:32px;cursor:pointer;
  display:flex;align-items:center;gap:7px;white-space:nowrap}
.segment button:last-child{border-right:none}
.segment button:hover{background:var(--flaeche2);color:var(--text)}
.segment button[aria-current="true"]{background:var(--akz);color:var(--akz-auf);font-weight:600}
.segment button b{font-weight:600}
.segment button[aria-current="true"] span{color:var(--akz-auf);opacity:.8}
.segment button span{color:var(--text3)}

/* --------------------------------------------------------------- Bausteine */
.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund);
  box-shadow:var(--schatten)}
.abschnitt{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--text3);margin:0 0 8px 0}
.marke-eis{color:var(--eis)}.marke-frucht{color:var(--frucht)}.marke-zub{color:var(--zub)}
.punkt{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px;
  vertical-align:1px}
.leer{padding:28px;text-align:center;color:var(--text3);font-size:13px}
.spalten{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.seite{width:330px;flex-shrink:0}

/* --------------------------------------------------------------- Tabellen */
th{background:var(--kopf);text-align:left;font-size:10.5px;letter-spacing:.7px;
  text-transform:uppercase;color:var(--text3);font-weight:600;padding:7px 10px;
  border-bottom:1px solid var(--linie);white-space:nowrap}
th .grenze{display:block;font-size:9.5px;letter-spacing:.3px;text-transform:none;
  font-weight:400;color:var(--text3);opacity:.85;margin-top:1px}
td{padding:4px 10px;border-bottom:1px solid var(--linie2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
.karte>table>thead>tr>th:first-child{border-top-left-radius:var(--rund)}
.karte>table>thead>tr>th:last-child{border-top-right-radius:var(--rund)}
.gband{background:var(--eis-t)}
th.gband{background:var(--eis-w)}
.tagband td{background:var(--kopf);color:var(--text);padding:6px 10px 6px 12px;
  font-weight:600;font-size:11.5px;letter-spacing:1px;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  box-shadow:inset 3px 0 0 var(--akz)}
.tagband.frei td{background:var(--flaeche2);color:var(--text3);box-shadow:inset 3px 0 0 var(--linie)}
.tagband .k{height:24px;min-height:24px;font-size:11.5px;padding:0 9px;
  background:var(--flaeche);border-color:var(--rand);color:var(--text2)}
.tagband .k:hover{background:var(--akz-t);border-color:var(--akz);color:var(--akz)}
.erg td{background:var(--flaeche2);font-weight:600;font-size:13px;
  border-top:1px solid var(--linie);border-bottom:none}
.fehlt td{background:var(--fehlt-t)}
tr.vorl td:first-child{box-shadow:inset 3px 0 0 var(--offen)}

/* ------------------------------------------------------------ Formularteile */
input,select,textarea{font:inherit;font-size:13px;padding:0 9px;height:32px;min-height:32px;
  border:1px solid var(--rand);border-radius:var(--rund2);background:var(--feld);
  color:var(--text);width:100%}
textarea{height:auto;padding:7px 9px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--akz);outline-offset:-1px;
  border-color:var(--akz)}
input::placeholder{color:var(--text3);opacity:.7}
input.zelle{height:26px;min-height:26px;padding:0 6px;border-color:transparent;
  background:transparent;text-align:right;font-variant-numeric:tabular-nums;font-size:13px}
input.zelle:hover{border-color:var(--linie);background:var(--flaeche)}
input.zelle:focus{background:var(--feld);border-color:var(--akz)}
input.zelle.leerklasse{color:var(--text3)}
input.zelle:disabled{background:none;border-color:transparent;cursor:default}
label.feld{display:block}
label.feld>span{display:block;font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--text3);font-weight:600;margin-bottom:4px}
.raster{display:grid;gap:10px}
.x2{grid-template-columns:repeat(2,minmax(0,1fr))}
.x3{grid-template-columns:repeat(3,minmax(0,1fr))}
.x4{grid-template-columns:repeat(4,minmax(0,1fr))}
.x5{grid-template-columns:repeat(5,minmax(0,1fr))}

button.weg{background:none;border:none;padding:5px;cursor:pointer;line-height:0;
  border-radius:var(--rund3);color:var(--text3)}
button.weg:hover{background:var(--flaeche2);color:var(--fehler)}
button.plus{font:inherit;font-size:12.5px;font-weight:500;color:var(--akz);
  background:none;border:1px dashed var(--rand);border-radius:var(--rund2);
  height:28px;min-height:28px;padding:0 10px;cursor:pointer}
button.plus:hover{border-color:var(--akz);background:var(--akz-t)}
.schalter{width:34px;height:20px;border-radius:999px;background:var(--rand);border:none;
  padding:0;cursor:pointer;position:relative;flex-shrink:0}
.schalter i{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;transition:left .12s}
.schalter[aria-pressed="true"]{background:var(--akz)}
.schalter[aria-pressed="true"] i{left:17px}

/* -------------------------------------------------------------- Hinweise */
.warn.schutzhinweis{align-items:center}
.warn.schutzhinweis .k{flex-shrink:0}
.warn{background:var(--warn-t);border:1px solid var(--linie);
  border-left:3px solid var(--warn);border-radius:var(--rund2);
  padding:10px 13px;color:var(--text2);display:flex;gap:9px;align-items:flex-start;
  line-height:1.55;font-size:13px}
.warn b{color:var(--text)}
.warn svg{stroke:var(--warn);flex-shrink:0}
.merker{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  border-radius:999px;padding:1px 8px;border:1px solid var(--linie);color:var(--text3);
  background:var(--flaeche2)}
.merker.eis{color:var(--text3)}
.merker.warn{background:var(--warn-t);border-color:var(--warn);color:var(--warn);
  padding:1px 8px;display:inline-flex}
.merker.offen{background:var(--offen-t);border-color:var(--offen);color:var(--offen);
  cursor:pointer;font-size:10.5px;letter-spacing:.4px;text-transform:uppercase;padding:0 6px}
.merker.offen:hover{background:var(--offen);color:var(--akz-auf)}
/* Größenschild in einer Mengenzelle: sagt, welches Gebinde wirklich gemeint ist */
.zellepaar{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.zellepaar input.zelle{min-width:46px}
.schild{font-size:10.5px;font-variant-numeric:tabular-nums;color:var(--text3);
  background:var(--flaeche2);border:1px solid var(--linie);border-radius:var(--rund3);
  padding:0 4px;line-height:16px;flex-shrink:0;white-space:nowrap}
.schild.offen{color:var(--offen);border-color:var(--offen);background:var(--offen-t)}

/* ------------------------------------------------------------------ Start */
.kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kachel{display:flex;flex-direction:column;gap:3px;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:var(--rund);padding:13px 14px;
  text-align:left;font:inherit;color:var(--text);cursor:pointer;min-height:76px;
  box-shadow:var(--schatten)}
.kachel:hover{border-color:var(--akz);background:var(--akz-t)}
[data-thema="dunkel"] .kachel:hover{background:var(--flaeche2)}
.kachel b{font-size:14.5px;font-weight:600}
.kachel span{font-size:12.5px;color:var(--text3);line-height:1.45}
.kachel.eis{border-left:3px solid var(--eis)}
.kachel.frucht{border-left:3px solid var(--frucht)}
.kachel.zub{border-left:3px solid var(--zub)}
.kachel.offen{border-left:3px solid var(--offen)}

/* -------------------------------------------------------------- Tagesplan */
.sortenkarte{background:var(--flaeche);border:1px solid var(--linie);
  border-left:3px solid var(--eis);border-radius:var(--rund);margin-bottom:10px;
  box-shadow:var(--schatten);overflow:hidden}
.sortenkarte.frucht{border-left-color:var(--frucht)}
.sortenkarte.vorl{border-left-color:var(--offen)}
.sortenkopf{display:flex;align-items:center;gap:10px;padding:8px 14px;
  border-bottom:1px solid var(--linie2);flex-wrap:wrap;background:var(--flaeche)}
.sortenkopf .kunde{font-size:11px;font-weight:700;letter-spacing:.9px;color:var(--eis);
  text-transform:uppercase}
.sortenkopf .name{font-size:15.5px;font-weight:600}
.sortenkopf .neben{font-size:12px;color:var(--text3)}
/* Feste Spaltenbreiten, damit alle Karten untereinander bündig stehen */
table.artikel{table-layout:fixed}
table.artikel th,table.artikel td{padding:5px 14px}
table.artikel col.c-sap{width:9%}
table.artikel col.c-fuell{width:11%}
table.artikel col.c-stueck{width:9%}
table.artikel col.c-kartons{width:9%}
table.artikel col.c-becher{width:15%}
table.artikel col.c-karton{width:14%}
table.artikel col.c-takt{width:7%}
table.artikel col.c-dauer{width:15%}
/* Mit eigenen Formelspalten (3.17.0) ruecken die festen Spalten zusammen. */
table.artikel.mitextra col.c-sap{width:8%} table.artikel.mitextra col.c-fuell{width:9%}
table.artikel.mitextra col.c-stueck{width:8%} table.artikel.mitextra col.c-kartons{width:8%}
table.artikel.mitextra col.c-becher{width:13%} table.artikel.mitextra col.c-karton{width:12%}
table.artikel.mitextra col.c-takt{width:6%} table.artikel.mitextra col.c-dauer{width:12%}
table.artikel.mitextra col.c-mix{width:8%} table.artikel.mitextra col.c-extra{width:8%}
table.artikel.mitextra td,table.artikel.mitextra th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.artikel td:last-child{white-space:nowrap}
.mhd{display:flex;align-items:baseline;gap:8px;background:var(--akz-t);
  border:1px solid var(--akz);border-radius:var(--rund2);padding:3px 11px;color:var(--text)}
.mhd .b{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--akz);
  font-weight:700}
.mhd .d{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.mhd .m{font-size:10.5px;color:var(--text3)}
.summenbalken{display:flex;align-items:center;gap:14px;background:var(--flaeche);
  border:1px solid var(--linie);border-left:3px solid var(--akz);
  border-radius:var(--rund);padding:12px 16px;flex-wrap:wrap;box-shadow:var(--schatten)}
.summenbalken .gross{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text)}
.summenbalken .leise{color:var(--text3);font-size:12.5px}
.aufgabe{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--linie2)}
.aufgabe:last-child{border-bottom:none}
.kasten{width:16px;height:16px;border:2px solid var(--rand);border-radius:var(--rund3);
  flex-shrink:0}

/* ------------------------------------------------------------ Vorschläge */
.suchfeld{position:relative}
/* Die Vorschlagsliste liegt als eigene Ebene ueber allem. */
.vorschlag{position:fixed;z-index:1000;width:460px;max-width:90vw;
  background:var(--flaeche);border:1px solid var(--akz);border-radius:var(--rund2);
  box-shadow:0 12px 30px rgba(28,26,24,.22);max-height:330px;overflow:auto}
.vorschlag button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;border-top:1px solid var(--linie2);padding:7px 12px;
  font:inherit;font-size:13px;color:var(--text);cursor:pointer}
.vorschlag button:first-child{border-top:none}
.vorschlag button[aria-selected="true"]{background:var(--akz);color:var(--akz-auf)}
.vorschlag button[aria-selected="true"] .kn,
.vorschlag button[aria-selected="true"] .gb{color:inherit;opacity:.85}
.vorschlag .kn{font-weight:700;font-size:11px;letter-spacing:.6px;width:92px;
  flex-shrink:0;color:var(--eis);text-transform:uppercase}
.vorschlag .kn.frucht{color:var(--frucht)}
.vorschlag .gb{margin-left:auto;font-size:11.5px;color:var(--text3)}
.vorschlag button.neu{color:var(--akz);font-weight:600;border-top:1px solid var(--linie)}
.vorschlag button.neu[aria-selected="true"]{color:var(--akz-auf)}
.vorschlag .fuss{padding:7px 12px;border-top:1px solid var(--linie);
  background:var(--flaeche2);font-size:11.5px;color:var(--text3)}

/* -------------------------------------------------------------- Meldungen */
#meldung{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;
  display:flex;gap:12px;align-items:center;background:var(--meldung);color:var(--meldung-t);
  border-radius:var(--rund2);padding:10px 15px;box-shadow:0 10px 28px rgba(0,0,0,.26);
  max-width:80vw;font-size:13px}
#meldung[hidden]{display:none!important}
#meldung button{font:inherit;font-size:12.5px;font-weight:600;background:none;
  border:1px solid var(--meldung-r);color:var(--meldung-t);border-radius:var(--rund3);
  padding:4px 10px;cursor:pointer}
dialog{border:1px solid var(--linie);border-radius:var(--rund);background:var(--flaeche);
  color:var(--text);padding:0;max-width:720px;width:92vw;
  box-shadow:0 24px 60px rgba(0,0,0,.28)}
dialog::backdrop{background:rgba(24,22,20,.5)}
dialog .inhalt{padding:18px 20px}
dialog h2{margin:0 0 14px 0;font-size:16px;font-weight:600}
dialog .knopfreihe{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

@media (max-width:900px){
  nav{width:56px;padding:12px 6px 6px 6px}
  nav .marke b,nav button span.t,nav .fuss,#zaehler{display:none}
  nav button.navgruppe{display:none}
  nav button.naveintrag{padding-left:0}
  nav button{justify-content:center;padding:0}
  main{padding:16px 14px 40px 14px}
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x4,.x5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seite{width:100%}
}

/* ------------------------------------------------------------- Planblatt */
.planblatt td.zeitspalte{white-space:nowrap}
.planblatt .schild{font-size:10px;padding:0 3px}
.planblatt .zellepaar input.zelle{min-width:50px}
/* Die Spalte mit Kunde und Sorte bleibt beim Querscrollen stehen. */
.planblatt tbody td:first-child,
.planblatt thead th:first-child{position:sticky;left:0;z-index:2;
  background:var(--flaeche);box-shadow:1px 0 0 var(--linie)}
.planblatt thead th:first-child{background:var(--kopf);z-index:3}
.planblatt tr.erg td:first-child{background:var(--flaeche2)}
.planblatt tr.vorl td:first-child{box-shadow:inset 3px 0 0 var(--offen),1px 0 0 var(--linie)}
.planblatt tbody tr.tagband td:first-child{position:static;background:var(--kopf);
  box-shadow:inset 3px 0 0 var(--akz)}
.planblatt tbody tr.tagband.frei td:first-child{background:var(--flaeche2);
  box-shadow:inset 3px 0 0 var(--linie)}
/* Wochentag und Knopf bleiben beim Querscrollen am linken Rand stehen. */
.planblatt .tagband .tagkopf{display:inline-flex;align-items:center;gap:14px;
  position:sticky;left:10px}
/* Das Datum im Tagband ist ein Link zum Tagesplan. */
.planblatt .tagband .taglink{border:0;background:none;padding:0;font:inherit;font-weight:700;
  color:inherit;cursor:pointer;border-radius:4px}
.planblatt .tagband .taglink:hover{color:var(--akz);text-decoration:underline}
.planblatt .tagband .taglink:focus-visible{outline:2px solid var(--akz);outline-offset:2px}
.planblatt tbody td{padding:3px 8px}
.planblatt th{padding:6px 8px}

/* Buendige Zeilen. Kunde und Sorte stehen immer auf einer Zeile und werden
   nie abgeschnitten: die Spalte richtet sich nach dem laengsten Namen. Ist
   die Tabelle dadurch breiter als das Fenster, wird waagerecht gescrollt. */
.planblatt tbody td:first-child{white-space:nowrap}
.planblatt tbody td:first-child .sortenname{white-space:nowrap}
.planblatt tbody td:first-child > b{margin-right:5px}
.planblatt tbody tr{height:32px}
.planblatt tbody tr.tagband{height:auto}
/* Jede Zelle gleich hoch, egal ob Eingabefeld, Text oder nichts drin ist.
   Sonst laufen die Zeilen um ein, zwei Pixel auseinander. */
.planblatt tbody tr:not(.tagband) td{height:32px;line-height:1.3;
  vertical-align:middle}
.planblatt tbody input.zelle{height:24px;min-height:24px}
/* Die Zeile zum Eintragen einer neuen Sorte ist ueberall gleich hoch. */
.planblatt tbody tr.neuzeile td{height:34px}
.planblatt tbody tr.neuzeile input.zelle{height:26px;min-height:26px}
.planblatt tbody .merker,.planblatt tbody .schild{line-height:1.3}

/* Luecke zwischen zwei Tagen, damit sich die Tage optisch trennen. */
.planblatt tbody tr.luecke td{height:14px;padding:0;border:0;background:none;
  box-shadow:none;position:static}

/* Die Spaltenleiste wiederholt sich bei jedem Tag. */
.planblatt tr.spaltenband td{background:var(--flaeche2);color:var(--text3);
  font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;
  padding:3px 8px;border-bottom:1px solid var(--linie)}
.planblatt tr.spaltenband td:first-child{background:var(--flaeche2)}

/* Umschalter fuer die Ansicht */
.ansichtsleiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:12px}
.wochenzahl{display:inline-flex;align-items:center;gap:8px}
.wochenzahl select{height:28px;min-height:28px}
.wochentitel{display:flex;align-items:center;gap:12px;padding:10px 4px 6px;
  font-size:13px;color:var(--text2);border-top:1px solid var(--linie)}
.wochentitel:first-child{border-top:0;padding-top:0}
.wochentitel b{color:var(--text);font-size:14px}
/* Wochen nebeneinander. Passen alle Wochen ins Fenster, teilen sie sich den
   Platz gleichmaessig auf. Passen sie nicht, bekommt die Reihe unten eine
   Schiebeleiste und jede Woche behaelt eine lesbare Mindestbreite. */
.wochenreihe{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;
  padding-bottom:10px;scrollbar-gutter:stable}
.wochenreihe::-webkit-scrollbar{height:12px}
.wochenreihe::-webkit-scrollbar-track{background:var(--flaeche2);border-radius:6px}
.wochenreihe::-webkit-scrollbar-thumb{background:var(--rand);border-radius:6px;
  border:3px solid var(--flaeche2)}
.wochenreihe::-webkit-scrollbar-thumb:hover{background:var(--text3)}
.wochenspalte{flex:1 1 0;min-width:520px;overflow-x:auto}
.wochenspalte .planblatt{min-width:0 !important;font-size:12px}
/* Auch innerhalb einer Woche eine sichtbare Schiebeleiste, wenn die Spalten
   breiter sind als die Kachel. */
.wochenspalte::-webkit-scrollbar{height:10px}
.wochenspalte::-webkit-scrollbar-track{background:var(--flaeche2)}
.wochenspalte::-webkit-scrollbar-thumb{background:var(--rand);border-radius:5px;
  border:2px solid var(--flaeche2)}

/* Tagesauswahl im Sammeldruck */
.tagesliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:4px 12px;max-height:220px;overflow-y:auto;border:1px solid var(--linie);
  border-radius:var(--rund2);padding:10px 12px}
.tageswahl{display:flex;align-items:center;gap:2px;font-size:13px;cursor:pointer}
.schalterzeile{display:flex;align-items:flex-start;gap:10px;margin:6px 0;
  font-size:13px;line-height:1.5;cursor:pointer}
.schalterzeile input{margin-top:2px}
.feldreihe{display:flex;gap:12px;flex-wrap:wrap}
.feldreihe label{flex:1 1 160px}
/* Liste der betroffenen Tage in der Sicherheitsabfrage */
.leerliste{margin:0;padding-left:20px;line-height:1.7;font-size:13px}

/* Tagesplan als Liste: alles des Tages in einer Tabelle. */
.tagesblatt{min-width:980px}
.tagesblatt td{padding:5px 10px;white-space:nowrap}
.tagesblatt th{padding:6px 10px}
/* Zubereitung bekommt dieselbe Karte wie Eis, nur in ihrer Farbe. */
.sortenkarte.zub{border-left-color:var(--zub)}
.sortenkarte.zub .kunde{color:var(--zub)}
/* Zubereitung in der Datenbank: wie die Gebinde-Tabelle, nur schmaler. */
.zubblatt{min-width:940px}
.zubblatt input.zelle{min-width:90px}

/* ------------------------------------------- Einheitliche Tabellenbedienung */
/* Auswahlfelder in Tabellen sind so hoch wie die Eingabefelder daneben. */
table select{height:26px;min-height:26px;font-size:12.5px;padding:0 22px 0 6px;
  width:auto;min-width:100%;max-width:none}
table input.zelle{min-width:56px}
/* Die Gebinde-Tabelle beim Kunden hat viele Spalten und scrollt waagerecht,
   statt die Werte abzuschneiden. */
.gebindeblatt{width:max-content}
.gebindeblatt th{white-space:nowrap;text-align:left;padding:8px 8px}
.gebindeblatt th.n{text-align:right}
.gebindeblatt td{padding:3px 4px;vertical-align:middle}
.gebindeblatt input.zelle{width:88px;min-width:0}
.gebindeblatt input.zelle[type="text"]:not(.zahlfeld){width:140px;text-align:left}
.gebindeblatt td:has(>input.zahlfeld),.gebindeblatt td:has(>input[type="number"]),.gebindeblatt td:has(>.wannenhaken),
.gebindeblatt td:has(>input[type="checkbox"]){text-align:right}
.gebindeblatt select{width:auto;min-width:100px}
.gebindeblatt select.wahlfeld{min-width:160px}

/* Reihenfolge im Tagesplan */
.reihenfolge{display:inline-flex;gap:3px}
.reihenfolge button{font-size:10px;line-height:1;color:var(--text3)}
.reihenfolge button:hover{color:var(--akz);border-color:var(--akz)}

/* --------------------------------------------------- Auswahl und Ablage */
input.haken{width:14px;height:14px;min-height:0;margin:0 8px 0 0;padding:0;
  accent-color:var(--akz);vertical-align:-1px;cursor:pointer;border-radius:3px}
.planblatt tr.gewaehlt td{background:var(--akz-t)}
.planblatt tr.gewaehlt td:first-child{background:var(--akz-t);
  box-shadow:inset 3px 0 0 var(--akz),1px 0 0 var(--linie)}
.planblatt .tagband .haken{margin-right:10px}
/* Die Leiste taucht nur auf, wenn etwas ausgewaehlt oder kopiert ist. */
.ablage{position:fixed;left:214px;bottom:16px;z-index:80;display:flex;
  align-items:center;gap:10px;background:var(--flaeche);border:1px solid var(--akz);
  border-radius:var(--rund);padding:8px 12px;font-size:13px;
  box-shadow:0 8px 24px rgba(0,0,0,.14)}
.ablage .trenner{width:1px;height:20px;background:var(--linie)}
/* Steht die Ablageleiste unten, rutscht die Meldung darueber. */
body:has(.ablage) #meldung{bottom:78px}
@media (max-width:900px){ .ablage{left:70px;right:12px} }

/* Fensterdiagnose in den Einstellungen */
.diagblatt td{padding:3px 6px;border:0;vertical-align:top}
.punkt-ok,.punkt-fehlt{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-top:5px}
.punkt-ok{background:var(--eis)}
.punkt-fehlt{background:var(--offen)}

/* Speichern-Knopf: kurz gruen, wenn es geklappt hat. */
.k.symbol.erledigt{border-color:var(--eis);color:var(--eis);background:var(--eis-t)}

/* ---------------------------------------------------------------- Eismix
   Der Arbeitsbereich benutzt dieselben Bausteine wie der Tagesplan:
   Sortenkarte, Artikeltabelle, Summenbalken. Dazu nur die Auswahlliste. */
.mixkopf{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;
  margin-bottom:12px}
.mixkopf label{display:flex;flex-direction:column;gap:3px}
.mixkopf label.wg{min-width:200px}
.mixkopf select{height:28px;min-height:28px}
.mixkopf input.zelle{height:28px;min-height:28px;border-color:var(--linie)}

.mixliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:2px 14px;max-height:190px;overflow-y:auto;padding:2px}
.mixsorte{display:flex;align-items:center;gap:0;padding:3px 6px;border-radius:var(--rund3);
  font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mixsorte:hover{background:var(--flaeche2)}
.mixsorte.an{background:var(--akz-t)}
.mixsorte b{margin-right:5px;flex-shrink:0}
.mixsorte.ohne{color:var(--text3)}
.mixsorte .merker{margin-left:8px;flex-shrink:0}

.zeitraum{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.zeitraum label{display:flex;flex-direction:column;gap:3px}
.zeitraum input[type="date"]{height:28px;min-height:28px}

.mixblatt input.zelle{min-width:72px;text-align:right}
.mixblatt input.zelle:disabled{background:var(--fehlt-t);color:var(--text2)}
.mixblatt tr.fehlt td{background:var(--fehlt-t)}
.wannenhaken{display:inline-flex;align-items:center;justify-content:flex-end}
.wannenhaken .haken{margin:0}
/* Die Mix-Zahl im Kartenkopf nutzt denselben Kasten wie das MHD. */
.sortenkarte .mhd .b{letter-spacing:1px}

/* ------------------------------------------------------------- Farbwahl */
.farbwahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
button.farbe{display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund2);
  padding:10px 12px;font:inherit;color:var(--text);cursor:pointer;text-align:left}
button.farbe:hover{border-color:var(--akz)}
button.farbe[aria-current="true"]{border-color:var(--akz);background:var(--akz-t);
  box-shadow:inset 0 0 0 1px var(--akz)}
button.farbe b{font-size:13.5px;font-weight:600}
button.farbe .muster{display:flex;gap:4px;margin-bottom:4px}
button.farbe .muster i{width:16px;height:16px;border-radius:50%;
  border:1px solid rgba(0,0,0,.12)}

/* Auswahl beim Import und Export */
.wahlmenue{position:fixed;z-index:60;width:340px;max-width:calc(100vw - 24px);
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund);
  box-shadow:0 10px 32px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;gap:2px}
.wahlmenue .wahl{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:3px;
  padding:10px 12px;border-radius:var(--rund);cursor:pointer;color:var(--text)}
.wahlmenue .wahl b{font-size:13.5px}
.wahlmenue .wahl span{font-size:12px;line-height:1.5;color:var(--text2)}
.wahlmenue .wahl:hover,.wahlmenue .wahl:focus-visible{background:var(--flaeche2);
  outline:1px solid var(--akz)}
.wahlmenue .wahl.aus{cursor:not-allowed;opacity:.55}
.wahlmenue .wahl.aus:hover{background:none;outline:none}
.dbdatei{font-size:12.5px;word-break:break-all;margin:4px 0 12px;padding:8px 10px;
  background:var(--flaeche2);border-radius:var(--rund)}
.hinweiszeile{padding:10px 14px;margin-bottom:12px;font-size:13px;line-height:1.6;
  border-left:3px solid var(--warn)}
.zuordnung{max-height:320px;overflow:auto;border:1px solid var(--linie);border-radius:var(--rund)}
.zuordnungszeile{display:flex;align-items:center;gap:12px;padding:7px 10px;
  border-bottom:1px solid var(--linie2);font-size:13px}
.zuordnungszeile>span{flex:1 1 auto;min-width:0}
.zuordnungszeile select{flex:0 0 250px;max-width:250px}
.gebindeblatt th.mixspalte,.gebindeblatt td.mixspalte{background:color-mix(in srgb,var(--eis) 6%,transparent)}
.gebindeblatt td.mixspalte input.zelle{min-width:70px}

/* Gebindetabelle: Gruppen oben, Trennlinien, SAP bleibt beim Scrollen stehen */
.gebindeblatt tr.gruppenzeile th{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text2);padding:7px 8px 3px;border-bottom:none;text-align:left}
.gebindeblatt tr.gruppenzeile th+th,.gebindeblatt .gruppenstart{border-left:1px solid var(--linie)}
.gebindeblatt .fest{position:sticky;left:0;z-index:2;background:var(--flaeche);
  box-shadow:1px 0 0 var(--linie)}
.gebindeblatt thead .fest{background:var(--kopf);z-index:3}
textarea.formelfeld{width:100%;min-width:220px;resize:none;height:auto;min-height:26px;
  padding:4px 6px;line-height:1.45;border-color:transparent;background:transparent;
  text-align:left;font-size:13px;white-space:pre-wrap;word-break:break-word}
textarea.formelfeld:hover{border-color:var(--linie);background:var(--flaeche)}
textarea.formelfeld:focus{background:var(--feld);border-color:var(--akz)}
.wahlneu{display:flex;gap:6px}
.wahlneu select{flex:1 1 auto;min-width:0}
.wahlneu input{flex:1 1 auto;min-width:0}
.feld .nurlesen{height:32px;display:flex;align-items:center;padding:0 9px;color:var(--text2);
  border:1px dashed var(--linie);border-radius:var(--rund2);font-variant-numeric:tabular-nums}
/* Keine Pfeile in Zahlenfeldern der Tabellen: sie verdecken die Ziffern. */
input.zelle[type="number"]{-moz-appearance:textfield;appearance:textfield}
input.zelle[type="number"]::-webkit-inner-spin-button,
input.zelle[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* Auswahlliste im Dialog (Zubereitung eintragen) */
.wahlliste{max-height:360px;overflow:auto;border:1px solid var(--linie);
  border-radius:var(--rund);background:var(--flaeche)}
.wahlliste .wahlzeile{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;
  width:100%;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--linie2);
  font-size:13.5px;color:var(--text)}
.wahlliste .wahlzeile:hover{background:var(--flaeche2)}
.wahlliste .wahlzeile.an{background:var(--akz-t);box-shadow:inset 3px 0 0 var(--akz)}
.wahlliste .wahlzeile b{flex:0 0 150px;font-size:11px;letter-spacing:.8px;text-transform:uppercase}

/* Eigene Farben in den Einstellungen */
.eigenfarben{display:flex;flex-direction:column;gap:6px}
.farbzeile{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:var(--rund);
  border:1px solid transparent}
.farbzeile.eigen{border-color:var(--akz);background:var(--akz-t)}
.farbzeile input[type="color"]{width:38px;height:28px;min-height:28px;padding:2px;flex:0 0 38px;
  border-radius:var(--rund2);cursor:pointer}
.farbzeile>span{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.farbzeile b{font-size:13px}
.farbzeile .k{margin-left:auto}
.diagliste{display:flex;flex-direction:column;gap:8px}
.diagzeile{display:flex;gap:9px;align-items:flex-start;min-width:0}
.diagzeile>div{min-width:0;flex:1 1 auto}
.diagzeile b{font-size:13px;display:block;line-height:1.35}
.diagwert{overflow-wrap:anywhere;word-break:break-word;line-height:1.5}
.diagzeile .punkt-ok,.diagzeile .punkt-fehlt{margin-top:5px;flex:0 0 9px}
/* Nebeneinander: gleiche Spaltenbreiten in jeder Woche. Die Namensspalte
   bricht dafür um, abgeschnitten wird nichts. */
/* Feste Spaltenbreiten: so stehen die Tage untereinander und die Wochen
   nebeneinander bündig. Die Namensspalte bricht um, abgeschnitten wird nichts. */
.planblatt{table-layout:fixed}
.planblatt tbody td:first-child,
.planblatt tbody td:first-child .sortenname{white-space:normal;overflow:visible;
  text-overflow:clip;word-break:break-word}
.planblatt tbody tr:not(.tagband) td{height:auto}
/* Eismix: Abschnitt je Produktionstag */
.mixtag{margin-bottom:20px}
.mixtagkopf{display:flex;align-items:center;gap:14px;padding:8px 14px;margin-bottom:8px;
  background:var(--kopf);border-left:3px solid var(--akz);border-radius:var(--rund);
  font-size:13px;letter-spacing:.4px}
.mixtagkopf .mhd{display:flex;align-items:baseline;gap:6px;border:1px solid var(--linie);
  background:var(--flaeche);border-radius:var(--rund);padding:2px 10px}
.mixtagkopf .mhd .b{font-size:10px;letter-spacing:1px;color:var(--text3)}
.mixtagkopf .mhd .d{font-weight:700}
.mixtagkopf .mhd .m{font-size:11px;color:var(--text3)}

/* Je Tag eine eigene Tabelle: Abstand dazwischen statt Leerzeile */
.wochenblatt{display:flex;flex-direction:column;gap:14px}
.wochenblatt .planblatt{margin:0}

/* Löschkreuz und Zubereitungsknopf stehen bei der Sorte, nicht ganz rechts */
.planblatt tbody td:first-child{position:relative;padding-right:30px}
.planblatt .zeileweg{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center}
.planblatt .zeileweg .weg,.planblatt .zeileweg .plus{opacity:.5}
.planblatt tbody tr:hover .zeileweg .weg,.planblatt tbody tr:hover .zeileweg .plus{opacity:1}

/* Eismix: von welchem Kunden die Faktoren geholt werden */
.quellliste{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow:auto;
  border:1px solid var(--linie);border-radius:var(--rund2);padding:6px}
.quellzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 9px;border-radius:var(--rund2);cursor:pointer}
.quellzeile:hover{background:var(--flaeche2)}
.quellzeile.leer{opacity:.65}
.quellzeile .qkunde{font-weight:700;color:var(--eis)}
.quellzeile .qsorte{color:var(--text)}
.quellzeile .qwerte{flex-basis:100%;padding-left:26px;color:var(--text3);white-space:pre-wrap}

/* Packlisten-Regeln in den Einstellungen */
.packwahl{display:flex;flex-direction:column;gap:2px}
.packwahl label{display:flex;align-items:center;gap:8px;padding:4px 6px;
  border-radius:var(--rund2);cursor:pointer}
.packwahl label:hover{background:var(--flaeche2)}

/* 3.5.0 ---------------------------------------------------------------- */
/* Tag verschieben / tauschen: die Tage zweier Wochen zum Anklicken */
.tagwahl{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}
.tagknopf{display:flex;flex-direction:column;align-items:center;gap:1px;position:relative;
  font:inherit;font-size:12px;padding:6px 2px;border:1px solid var(--linie);
  border-radius:var(--rund2);background:var(--flaeche);color:var(--text);cursor:pointer}
.tagknopf b{font-size:12.5px}
.tagknopf span{font-size:11px;color:var(--text3)}
.tagknopf i{position:absolute;top:3px;right:4px;font-style:normal;font-size:10px;
  font-weight:700;color:var(--akz)}
.tagknopf:hover{border-color:var(--akz)}
.tagknopf[aria-current="true"]{background:var(--akz);border-color:var(--akz);color:var(--akz-auf)}
.tagknopf[aria-current="true"] span,.tagknopf[aria-current="true"] i{color:var(--akz-auf)}
.tagknopf.selbst{opacity:.45;cursor:default;border-style:dashed}
.tagknopf.selbst:hover{border-color:var(--linie)}

/* Suche im Plan: Zubereitung in der eigenen Farbe */
.vorschlag .kn.zub{color:var(--zub)}

/* Sprungziel aus "Offen": kurz hervorheben */
@keyframes aufblitzen{0%,40%{box-shadow:0 0 0 3px var(--akz);background:var(--akz-t)}
  100%{box-shadow:0 0 0 0 transparent}}
@keyframes aufblitzenzeile{0%,40%{background:var(--akz-t)}100%{background:transparent}}
div.aufblitzen{animation:aufblitzen 2.4s ease-out}
tr.aufblitzen>td{animation:aufblitzenzeile 2.4s ease-out}

/* Eismix: Hinweis auf der Sortenkarte und Vorschau im Dialog */
.mixhinweis{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 8px;
  padding:9px 14px;border:1px solid var(--warn);background:var(--warn-t);
  border-radius:var(--rund2);font-size:13px;line-height:1.5}
.mixhinweis.ohne{border-color:var(--linie);background:var(--flaeche2)}
.mixvorschau{margin-top:12px}
.mixvorschau table{width:100%}
.mixvorschau td.neu b{color:var(--zub)}
.mixvorschau td.fehlt{color:var(--warn)}
.quellzeile.aehnlich .qsorte{font-style:italic}
input.zelle.planmenge{border-color:var(--eis)}
.mixvorschau table{table-layout:fixed}
.mixvorschau th:first-child,.mixvorschau td:first-child{width:90px}
.mixvorschau th.n,.mixvorschau td.n{width:104px}
.mixvorschau td{white-space:normal;line-height:1.4}
#dialog:has(.mixvorschau){width:min(860px,94vw);max-width:94vw}
.mixvorschau table.artikel td:last-child{white-space:normal}
/* Der Kopf eines Kunden steht im Fluss. Klebte er auch oben, läge er über
   dem Seitenkopf und verdeckte dessen Titel. */
.kopfzeile.kundenkopf{position:static;margin:0 0 14px 0;padding:0 0 12px 0}

/* 3.6.0: Auswerten ------------------------------------------------------ */
table.artikel.frei{table-layout:auto}
table.artikel.frei td{vertical-align:middle}
nav #zaehler{margin-top:auto;padding:8px 2px 0}
nav #zaehler + .fuss{margin-top:8px}
.zaehlerknopf{display:block;width:100%;text-align:left;border:1px solid var(--linie);background:var(--flaeche);
  border-radius:var(--rund);padding:7px 10px;color:var(--text);font:inherit;cursor:pointer}
.zaehlerknopf:hover{border-color:var(--akz)}
.zaehlerknopf .kw{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);font-weight:700;
  display:flex;justify-content:space-between}
.zaehlerknopf .zeile{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;font-size:13px;margin-top:2px}
.zaehlerknopf .klein{font-size:11.5px}
.zaehlerknopf .warnzeile{margin-top:5px;font-size:12px;font-weight:600;color:var(--fehler)}
.zaehlerauf{position:fixed;left:212px;bottom:12px;width:380px;max-height:calc(100vh - 24px);overflow:auto;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund);
  box-shadow:0 18px 40px rgba(0,0,0,.2);padding:14px 16px;z-index:70;font-size:13px}
.zaehlerauf h4{margin:0 0 2px;font-size:14px}
.zaehlerauf table{width:100%;border-collapse:collapse;margin-top:8px}
.zaehlerauf td,.zaehlerauf th{padding:4px 0;border-bottom:1px solid var(--linie2)}
.zaehlerauf th{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);text-align:left;font-weight:700}
.zaehlerauf th.n{text-align:right}
.zaehlerauf .zwarn{margin-top:10px;display:flex;flex-direction:column;gap:4px}
nav .navzahl.rot{background:var(--fehler)}
.zkacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.zkachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund);padding:12px 14px;min-width:0}
.zkachel .t{font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--text3);font-weight:700}
.zkachel .z{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.zkachel .u{font-size:12px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){.zkacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ampel{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.ampel::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--f)}
.ampel.rot{--f:var(--fehler);color:var(--fehler)}
.ampel.gelb{--f:#c88a12;color:var(--warn)}
.ampel.gruen{--f:#2f8a5f;color:var(--text2)}
.ampel.grau{--f:var(--text3);color:var(--text3)}
.banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--fehler);
  background:color-mix(in srgb, var(--fehler) 9%, var(--flaeche));border-radius:var(--rund);
  padding:10px 14px;margin-bottom:14px;font-size:13.5px}
.minus{color:var(--fehler);font-weight:600}
.feldchen{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--text3)}
.feldchen select,.feldchen input{min-height:32px}
.auswkarte{margin-bottom:8px;overflow:hidden}
.auswkopf{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;
  border-left:3px solid var(--eis);padding:10px 14px;font:inherit;color:var(--text);cursor:pointer}
.auswkopf .name{font-size:14.5px}
.auswkopf .s{font-variant-numeric:tabular-nums;color:var(--text2)}
table.artikel tr.summe td,table.artikel tfoot td{font-weight:700;background:var(--flaeche2)}
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.zweispalt.breit{grid-template-columns:2fr 1fr}
@media (max-width:1100px){.zweispalt,.zweispalt.breit{grid-template-columns:1fr}}
td.abw{font-weight:600}
td.abw.plus{color:var(--warn)}
table.artikel tr.laeuft td{background:var(--akz-t)}
table.verbrauchblatt input.zelle{width:110px}
th.sortierbar{cursor:pointer;user-select:none}
th.sortierbar:hover{color:var(--text)}
tr.klickbar{cursor:pointer}
tr.klickbar:hover td{background:var(--flaeche2)}
table.artikel tr.gewaehlt td{background:var(--akz-t)}
.bestandblatt .punkt{margin-right:6px}
.edit{border-bottom:1px dashed var(--text3);cursor:pointer}
.spaltenwahl{position:fixed;z-index:60;width:220px;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--rund);box-shadow:0 12px 30px rgba(0,0,0,.18);padding:6px}
.spaltenwahl label{display:flex;gap:8px;align-items:center;padding:5px 6px;border-radius:var(--rund2);cursor:pointer;font-size:13px}
.spaltenwahl label:hover{background:var(--flaeche2)}
svg.verlauf .gl{stroke:var(--linie2);stroke-width:1}
svg.verlauf .null{stroke:var(--fehler);stroke-width:1}
svg.verlauf .ax{fill:var(--text3);font-size:11px}
svg.verlauf .lab{fill:var(--text2);font-size:11.5px}
svg.verlauf .warnlab{fill:var(--fehler);font-weight:600}
svg.verlauf .linie{fill:none;stroke:var(--akz);stroke-width:2.5;stroke-linejoin:round}
svg.verlauf .melde{fill:none;stroke:var(--warn);stroke-width:1.5;stroke-dasharray:6 4}
svg.verlauf .bestell{stroke:var(--fehler);stroke-width:1;stroke-dasharray:2 3}
svg.verlauf .streifen{fill:transparent}
svg.verlauf .punkt{fill:var(--akz);stroke:var(--flaeche);stroke-width:2}
svg.verlauf .tipbox{fill:var(--flaeche);stroke:var(--linie)}
svg.verlauf .tiptext{fill:var(--text);font-size:12px}
.strich{display:inline-block;width:18px;height:0;border-top:2.5px solid var(--akz);vertical-align:middle}
.strich.melde{border-top:1.5px dashed var(--warn)}
.probe{margin-top:12px;padding:9px 11px;background:var(--flaeche2);border-radius:var(--rund2);font-size:13px;line-height:1.6;min-height:2.4em}
#dialog:has(.breitdialog){width:min(860px,94vw);max-width:94vw}
.breitdialog select.zelle,.breitdialog input.zelle{min-height:30px}
.breitdialog td .anpassung{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.breitdialog td .anpassung select,.breitdialog td .anpassung input,
.breitdialog .sonderliste select,.breitdialog .sonderliste input{width:auto;flex:0 0 auto}
.breitdialog .anpassung select,.breitdialog .sonderliste select{width:170px!important;min-width:0!important}
.breitdialog .anpassung input,.breitdialog .sonderliste input,.breitdialog .sonderliste select{
  border:1px solid var(--linie)!important;background:var(--feld)}
.breitdialog .anpassung input[type=date],.breitdialog .sonderliste input[type=date]{width:150px!important}

/* 3.7.0: Gebinde-Fenster ------------------------------------------------- */
.merker.gruen{color:var(--zub);border-color:var(--zub)}
.gebindeliste{margin-top:4px;overflow-x:auto}
.gebindeliste tr.fehlt td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
dialog.gebindedialog{width:min(1060px,96vw);max-width:96vw;max-height:94vh;padding:0;
  border:1px solid var(--linie);border-radius:10px;background:var(--flaeche);color:var(--text);
  box-shadow:0 24px 60px rgba(0,0,0,.3)}
dialog.gebindedialog::backdrop{background:rgba(24,22,20,.5)}
.gfenster{display:flex;flex-direction:column;max-height:94vh}
.gkopf{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.gkopf h2{margin:0;font-size:18px}
.gkopf .blaettern{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text3)}
.gkoerper{padding:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:14px;overflow:auto}
.gblock{border:1px solid var(--linie);border-radius:var(--rund);padding:12px 14px;min-width:0}
.gblock.breit{grid-column:1 / -1}
.gblock h3{margin:0 0 10px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text3);
  display:flex;align-items:center;gap:8px}
.gblock h3 .merker,.gblock h3 .k{text-transform:none;letter-spacing:0}
.gblock.mix h3{color:var(--eis)}
.graster{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ghinweis{margin-top:8px;line-height:1.5}
.graster.fuenf{grid-template-columns:repeat(5,minmax(0,1fr))}
.graster .feld{margin:0}
.graster select.wahlfeld{width:100%;min-width:0}
.gfuss{display:flex;gap:10px;align-items:center;padding:12px 20px;border-top:1px solid var(--linie);
  background:var(--flaeche2);border-radius:0 0 10px 10px}
.gespeichert{font-size:12.5px;color:var(--zub);font-weight:600}
.gespeichert.fehler{color:var(--fehler)}
@media (max-width:820px){.gkoerper{grid-template-columns:1fr}.graster.fuenf{grid-template-columns:1fr 1fr}}
#dialog:has(.uebdialog){width:min(920px,94vw);max-width:94vw}
.uebtreffer{max-height:260px;overflow:auto;margin-top:10px;border:1px solid var(--linie);border-radius:var(--rund)}
.uebhaken{display:flex;flex-wrap:wrap;gap:6px 18px}
.uebhaken label,.uebziel label{display:flex;gap:7px;align-items:center;font-size:13px;cursor:pointer}
.uebziel{display:flex;gap:18px;flex-wrap:wrap}
.uebziel input,.uebhaken input{width:auto;min-height:0;height:auto}
.uebvorschau{margin-top:12px}
.uebvorschau td.neu{color:var(--zub);font-weight:600}
.uebvorschau td.alt{color:var(--text3)}
.gebindeliste td{white-space:nowrap}

/* ------------------------------------------------------- Start-Dashboard (3.7.1) */
.dheute{margin-right:6px;white-space:nowrap}
.dkpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.dkpi{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;font:inherit;color:var(--text);
  background:var(--flaeche);border:1px solid var(--linie);border-left:3px solid var(--akz);
  border-radius:var(--rund);padding:12px 14px;cursor:pointer;box-shadow:var(--schatten)}
.dkpi:hover{border-color:var(--akz);background:var(--akz-t)}
[data-thema="dunkel"] .dkpi:hover{background:var(--flaeche2)}
.dkpi .t{font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:var(--text3);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dkpi .z{font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.25}
.dkpi .u{font-size:12px;color:var(--text3);line-height:1.45;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dkpi .dbalken{margin-top:6px}
.dkpi.rot{border-left-color:var(--fehler)} .dkpi.rot .z{color:var(--fehler)}
.dkpi.gelb{border-left-color:#c88a12} .dkpi.gelb .z{color:var(--warn)}
.dkpi.gruen{border-left-color:#2f8a5f} .dkpi.gruen .z{color:#2f8a5f}
[data-thema="dunkel"] .dkpi.gruen .z{color:#6fc79a}
.dbalken{height:5px;border-radius:3px;background:var(--flaeche2);border:1px solid var(--linie2);overflow:hidden}
.dbalken i{display:block;height:100%;background:var(--akz);border-radius:3px}
.dbalken.voll i{background:var(--fehler)}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-bottom:14px;align-items:stretch}
.dkarte{padding:14px 16px;min-width:0;display:flex;flex-direction:column;gap:10px}
.dkkopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dkkopf .abschnitt{margin:0}
.dlink{background:none;border:none;padding:0;font:inherit;color:var(--akz);cursor:pointer;text-align:left}
.dlink:hover{text-decoration:underline}
.dwoche+.dwoche{margin-top:4px;padding-top:12px;border-top:1px solid var(--linie2)}
.dwkopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.dwkopf .dlink{color:var(--text)} .dwkopf .dlink span{color:var(--text3)}
.dtage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.dtag{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:86px;text-align:left;font:inherit;
  color:var(--text);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund2);
  padding:7px 8px;cursor:pointer}
.dtag:hover{border-color:var(--akz)}
.dtag .dt{font-size:11px;font-weight:600;color:var(--text3);white-space:nowrap}
.dtag .dz{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.dtag .du{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtag .dwarn{font-size:10.5px;color:var(--offen);font-weight:600;white-space:nowrap}
.dtag .dfrei{font-size:12px;color:var(--text3);margin-top:auto}
.dtag.leer{background:var(--flaeche2);border-style:dashed}
.dtag.vorbei{opacity:.55}
.dtag.heute{border:2px solid var(--akz);padding:6px 7px;opacity:1}
.dtag.heute .dt{color:var(--akz)}
.dpunkte{display:flex;flex-direction:column;gap:6px}
.dpunkt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:13px;
  color:var(--text);background:var(--flaeche);border:1px solid var(--linie2);border-left:3px solid var(--f);
  border-radius:var(--rund2);padding:7px 10px;cursor:pointer;--f:var(--text3)}
.dpunkt:hover{border-color:var(--f);background:var(--flaeche2)}
.dpunkt b{min-width:30px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:var(--f);
  border:1px solid var(--f);border-radius:999px;padding:0 6px;flex-shrink:0}
.dpunkt span{line-height:1.4;min-width:0}
.dpunkt.rot{--f:var(--fehler)} .dpunkt.gelb{--f:#c88a12} .dpunkt.offen{--f:var(--offen)}
.dalles{font-size:13px;color:#2f8a5f;padding:6px 0}
[data-thema="dunkel"] .dalles{color:#6fc79a}
.dtab{width:100%;border-collapse:collapse;font-size:13px}
.dtab th{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);font-weight:700;
  text-align:left;padding:0 8px 6px 0;border-bottom:1px solid var(--linie)}
.dtab td{padding:6px 8px 6px 0;border-bottom:1px solid var(--linie2);font-variant-numeric:tabular-nums;white-space:nowrap}
.dtab .n{text-align:right}
.dtab td.name{font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.dtab .anteil{width:22%;padding-left:12px;padding-right:0}
.dtab tr.rest td{color:var(--text3);font-weight:400}
.dtab tr:last-child td{border-bottom:none}
/* Wochenübersicht: beide Wochen nebeneinander, wenn Platz ist. */
.dwochen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.dwochen .dwoche+.dwoche{margin-top:0;padding-top:0;border-top:none}
.dkarte.dkarte{margin-bottom:14px}
@media (max-width:1180px){.dkpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1400px){.dwochen{grid-template-columns:minmax(0,1fr)}
  .dwochen .dwoche+.dwoche{margin-top:4px;padding-top:12px;border-top:1px solid var(--linie2)}}

/* ------------------------------------------------- Nur ein Gerät (3.8.0) */
dialog.geraetdialog{width:min(520px,92vw);padding:0;border-radius:12px}
dialog.geraetdialog::backdrop{background:rgba(24,22,20,.62)}
body.warteraum dialog.geraetdialog::backdrop{background:var(--grund)}
.geraetinhalt{padding:26px 28px 22px;display:flex;flex-direction:column;gap:10px}
.geraetinhalt h2{margin:4px 0 0;font-size:19px;line-height:1.3}
.geraetinhalt p{margin:0;line-height:1.55}
.geraetwer{font-size:13px;color:var(--text3);font-weight:600}
.geraetsymbol{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:#fff;background:var(--akz)}
.geraetsymbol.ok{background:#2f8a5f}
.geraetsymbol.warn{background:var(--warn)}
.geraetsymbol.warte{background:none;border:4px solid var(--linie);border-top-color:var(--akz);
  animation:geraetdreh 1s linear infinite;width:36px;height:36px}
@keyframes geraetdreh{to{transform:rotate(360deg)}}
.geraetcount{display:flex;flex-direction:column;gap:6px;margin-top:4px;font-size:14px}
.geraetzahl{font-size:18px;font-variant-numeric:tabular-nums;color:var(--akz)}
.geraetbalken{height:6px;border-radius:3px;background:var(--flaeche2);border:1px solid var(--linie2);overflow:hidden}
.geraetbalken i{display:block;height:100%;background:var(--akz);transition:width .9s linear}
.geraethinweis{color:var(--text3);line-height:1.5}
.geraetinhalt .knopfreihe{margin-top:8px;display:flex;justify-content:flex-end;gap:8px}

/* ------------------------------------------- Auswahllisten verwalten (3.8.1) */
#dialog:has(.listedialog){width:min(640px,94vw);max-width:94vw}
.listekasten{max-height:min(52vh,460px);overflow:auto;border:1px solid var(--linie);border-radius:var(--rund2)}
table.listetab{width:100%;border-collapse:collapse}
table.listetab td{padding:7px 10px;border-bottom:1px solid var(--linie2);vertical-align:middle}
table.listetab tr:last-child td{border-bottom:none}
table.listetab td.listewert{font-weight:600;word-break:break-word}
table.listetab tr.aktiv td{background:var(--akz-t)}
[data-thema="dunkel"] table.listetab tr.aktiv td{background:var(--flaeche2)}
table.listetab tr.ausgeblendet td.listewert{color:var(--text3);text-decoration:line-through}
.listeedit{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.listeedit input,.listeedit select{flex:1 1 220px;min-width:0}
.listeinfo{margin-top:6px;color:var(--text2);line-height:1.5}
.listehinweis{background:var(--akz-t);border:1px solid var(--akz);border-radius:var(--rund2);
  padding:7px 10px;margin-bottom:10px;font-size:13px}
[data-thema="dunkel"] .listehinweis{background:var(--flaeche2)}
.dreispalt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
@media (max-width:1250px){.dreispalt{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.dreispalt{grid-template-columns:1fr}}
.verpackhinweis{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.verpackhinweis:empty{display:none}
.vhzeile{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;margin:0;font-size:13px}
.vhknoepfe{display:flex;gap:6px}
.vhplan{line-height:1.6}
.gblock h3 select.vorlagewahl{height:28px;min-height:28px;font-size:12.5px;width:auto;max-width:220px;padding:0 8px;
  text-transform:none;letter-spacing:0;font-weight:500}

/* Mix-Feld im Monatsplan: wächst mit (3.10.1) */
textarea.zelle.mixfeld{display:block;margin-left:auto;resize:none;overflow:hidden;min-height:24px;height:24px;
  padding:3px 6px;line-height:16px;font:inherit;font-size:inherit;text-align:right;white-space:pre-wrap;
  word-break:break-word;width:100%;min-width:118px;box-sizing:border-box}
.planblatt td.mixzelle{white-space:normal}
textarea.zelle.mixfeld{border:1px solid transparent;border-radius:var(--rund3);background:transparent;color:var(--text);
  font-variant-numeric:tabular-nums;font-size:13px}
textarea.zelle.mixfeld:hover{border-color:var(--linie);background:var(--flaeche)}
textarea.zelle.mixfeld:focus{border-color:var(--akz);background:var(--flaeche);outline:none}
/* 3.57.0: DUO - eine Zeile je Komponente mit Namen */
textarea.zelle.mixfeld.duo{min-width:190px;white-space:pre;overflow-x:auto}

/* Bestand: Ampel-Schnellfilter, Inventur (3.11.0) */
.ampelfilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.ampelchip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;font:inherit;font-size:13px;
  background:var(--flaeche);border:1px solid var(--linie);color:var(--text);cursor:pointer;--f:var(--text3)}
.ampelchip b{font-variant-numeric:tabular-nums}
.ampelchip .punktchen{width:9px;height:9px;border-radius:50%;background:var(--f)}
.ampelchip.rot{--f:var(--fehler)} .ampelchip.gelb{--f:#c88a12} .ampelchip.gruen{--f:#2f8a5f}
.ampelchip:hover:not(:disabled){border-color:var(--f)}
.ampelchip[aria-pressed="true"]{background:var(--akz-t);border-color:var(--akz);color:var(--text)}
[data-thema="dunkel"] .ampelchip[aria-pressed="true"]{background:var(--flaeche2)}
.ampelchip:disabled{opacity:.45;cursor:default}
table.inventurtab th{position:sticky;top:0;background:var(--flaeche2);z-index:1;font-size:10.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--text3);text-align:left;padding:6px 10px}
table.inventurtab th.n{text-align:right}
table.inventurtab input.zelle{width:110px;border-color:var(--linie)}

/* 3.11.0 Protokoll: zurückgenommene Einträge blass */
tr.zurueckgenommen td{opacity:.55}

/* 3.11.0 Datenqualität */
.pruefgruppe{margin-bottom:12px}
.pruefkopf{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;text-align:left}
.pruefkopf .navzahl{background:var(--offen);color:#fff;border-radius:9px;font-size:10.5px;font-weight:700;padding:1px 7px}
.pruefkopf .navzahl.rot{background:var(--fehler)}
.pruefkopf .punktchen{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--text3)}
.pruefkopf .punktchen.rot{background:var(--fehler)} .pruefkopf .punktchen.gelb{background:#c88a12}
table.prueftab td{padding:6px 8px;vertical-align:middle}

/* 3.11.0 Kalender und Kapazität */
.merker.rot{color:var(--fehler);border-color:var(--fehler)}
.kalmarke{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;
  font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap}
.kalmarke.feiertag{background:color-mix(in srgb,var(--fehler) 14%,transparent);color:var(--fehler)}
.kalmarke.urlaub{background:color-mix(in srgb,var(--akz) 16%,transparent);color:var(--akz)}
.kopfzeile .kalmarke{height:24px;font-size:12px}
.tagband.ruhetag td,.planblatt tbody tr.tagband.ruhetag td:first-child{
  background:repeating-linear-gradient(135deg,var(--flaeche2) 0 8px,var(--kopf) 8px 16px)}
.tagband.voll td,.planblatt tbody tr.tagband.voll td:first-child{box-shadow:inset 3px 0 0 var(--fehler)}
.lastmarke{position:relative;display:inline-flex;align-items:center;width:74px;height:18px;border-radius:9px;
  background:var(--flaeche2);border:1px solid var(--linie);overflow:hidden;letter-spacing:0}
.lastmarke i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,#2f8a5f 30%,transparent)}
.lastmarke.gelb i{background:color-mix(in srgb,#c88a12 35%,transparent)}
.lastmarke.rot{border-color:var(--fehler)}
.lastmarke.rot i{background:color-mix(in srgb,var(--fehler) 35%,transparent)}
.lastmarke b{position:relative;width:100%;text-align:center;font-size:10.5px;font-variant-numeric:tabular-nums}
.tagband .k.warnknopf{border-color:var(--fehler);color:var(--fehler)}
tr.vorschlagzeile td{background:var(--warn-t)}

/* 3.11.0 Tagesplan: mehrere Tage */
.tagauswahl{padding:10px 12px;margin-bottom:14px}
.tagwahl-zeile{display:flex;align-items:center;gap:8px}
.tagchips{display:flex;gap:5px;flex-wrap:wrap;flex:1;align-items:center}
.tagchip-trenner{width:1px;align-self:stretch;background:var(--linie);margin:0 4px}
.tagchip{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:52px;height:44px;padding:0 6px;border-radius:8px;border:1px solid var(--linie);background:var(--flaeche);
  color:var(--text2);font:inherit;font-size:11.5px;cursor:pointer}
.tagchip b{font-size:12px;color:var(--text)}
.tagchip.belegt{border-color:var(--rand)}
.tagchip:not(.belegt){opacity:.65}
.tagchip.frei{background:repeating-linear-gradient(135deg,var(--flaeche2) 0 6px,var(--flaeche) 6px 12px)}
.tagchip[aria-pressed="true"]{background:var(--akz-t);border-color:var(--akz);opacity:1}
.tagchip:hover{border-color:var(--akz)}
.tagchip-punkt{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%}
.tagchip.belegt .tagchip-punkt{background:var(--eis)}
.tagchip .tagchip-punkt.rot{background:var(--fehler)}
.tagtrenner{display:flex;align-items:center;gap:10px;margin:26px 0 4px;padding:8px 12px;border-radius:var(--rund);
  background:var(--kopf);border:1px solid var(--linie);box-shadow:inset 3px 0 0 var(--akz);font-size:14px}

/* 3.11.0 Suche Strg+K */
.navsuche{display:flex;align-items:center;gap:8px;margin:4px 10px 10px;width:calc(100% - 20px);box-sizing:border-box;height:32px;padding:0 10px;border-radius:8px;
  border:1px solid var(--linie);background:var(--flaeche);color:var(--text3);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.navsuche span{flex:1}
.navsuche:hover{border-color:var(--akz);color:var(--text2)}
.navsuche kbd,.suchkopf kbd{font:inherit;font-size:10.5px;padding:1px 5px;border-radius:4px;border:1px solid var(--linie);
  background:var(--flaeche2);color:var(--text3)}
@media (max-width:900px){.navsuche span,.navsuche kbd{display:none}.navsuche::before{content:"⌕";font-size:16px}}
dialog.suchdialog{width:min(640px,92vw);margin:12vh auto auto;padding:0;border:1px solid var(--linie);border-radius:12px;
  background:var(--flaeche);color:var(--text);box-shadow:0 24px 60px rgba(0,0,0,.25)}
dialog.suchdialog::backdrop{background:rgba(0,0,0,.25)}
.suchkopf{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--linie)}
.suchfeld{flex:1;border:0 !important;outline:none;background:transparent;font-size:16px;height:30px;box-shadow:none !important}
.suchliste{max-height:52vh;overflow:auto;padding:6px}
.suchtreffer{display:grid;grid-template-columns:96px 1fr;grid-template-rows:auto auto;column-gap:10px;width:100%;
  text-align:left;padding:8px 10px;border:0;border-radius:8px;background:none;font:inherit;color:inherit;cursor:pointer}
.suchtreffer[aria-selected="true"]{background:var(--akz-t)}
.sucheart{grid-row:1/3;align-self:center;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3)}
.sucheart.sorte,.sucheart.gebinde{color:var(--eis)} .sucheart.zubereitung{color:var(--zub)} .sucheart.kunde{color:var(--akz)}
.suchtitel{font-weight:600}
.suchtext{color:var(--text3)}
.suchleer{padding:18px;color:var(--text3);text-align:center}
.suchfuss{padding:8px 14px;border-top:1px solid var(--linie);color:var(--text3)}

/* 3.11.0 Sorten als Tabelle */
table.sortentab td{padding:4px 6px;vertical-align:middle}
table.sortentab input.zelle{width:100%}
table.sortentab td.n input.zelle{width:70px}
.gebindechips{display:flex;flex-wrap:wrap;gap:4px}
.gebindechip{height:24px;padding:0 8px;border-radius:6px;border:1px solid var(--linie);background:var(--flaeche);
  font:inherit;font-size:12px;color:var(--text);cursor:pointer;white-space:nowrap}
.gebindechip:hover{border-color:var(--akz);color:var(--akz)}
.gebindechip.warn{border-color:var(--warn);color:var(--warn)}
.gebindechip.neu{color:var(--text3);border-style:dashed}
.kundenkopf .segment{margin-right:4px}
.dpunkt.gruen{--f:#2f8a5f}
.dtag.ruhe{background:repeating-linear-gradient(135deg,var(--flaeche2) 0 6px,var(--flaeche) 6px 12px)}
.dtag .druhe{display:block;font-size:10.5px;font-weight:600;color:var(--akz);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* 3.12.0 Scan alter Monatspläne */
.scanzahlen{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.scanzahlen>div{display:flex;align-items:baseline;gap:6px;padding:6px 12px;border:1px solid var(--linie);border-radius:8px;font-size:12.5px;color:var(--text2)}
.scanzahlen b{font-size:16px;color:var(--text)}
table.scantab td{padding:6px 8px;vertical-align:top}
table.scantab tr.belegt td{opacity:.5}
table.scantab tr.offen td{background:var(--warn-t)}
.scanmenge{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:1px 0}
.navgruppe-knoepfe{display:inline-flex;gap:0}
.navgruppe-knoepfe .k{border-radius:0;margin-left:-1px}
.navgruppe-knoepfe .k:first-child{border-radius:var(--rund2) 0 0 var(--rund2);margin-left:0}
.navgruppe-knoepfe .k:last-child{border-radius:0 var(--rund2) var(--rund2) 0}
.navgruppe-knoepfe .k[aria-current="true"]{color:var(--akz)}

/* 3.13.0 Offline-Ausleihe */
.offlinestatus{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;padding:8px 10px;border-radius:8px;margin-bottom:10px;font-size:13px}
.offlinestatus.offline{background:var(--akz-t);border:1px solid var(--akz)}
.offlinestatus.lesen{background:var(--warn-t);border:1px solid var(--warn);color:var(--warn)}
.offlinemarke{display:block;width:100%;margin-bottom:6px;padding:4px 8px;border-radius:6px;font:inherit;font-size:10.5px;
  font-weight:700;letter-spacing:.8px;cursor:pointer;text-align:center}
.offlinemarke.offline{background:var(--akz);color:#fff;border:1px solid var(--akz)}
.offlinemarke.lesen{background:var(--warn-t);color:var(--warn);border:1px solid var(--warn)}
.rueckgabewahl{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:6px}
.rueckgabewahl .klein{margin:0 0 10px;color:var(--text2)}

/* 3.14.0 Produktionsverlauf */
.vfilter{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.vfilter-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vfilter-titel{width:74px;flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text3)}
.vchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vchip{height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--linie);background:var(--flaeche);color:var(--text2);
  font:inherit;font-size:12.5px;cursor:pointer}
.vchip:hover{border-color:var(--akz)}
.vchip[aria-pressed="true"]{background:var(--akz-t);border-color:var(--akz);color:var(--text);font-weight:600}
.vmehrfach{display:flex;flex-wrap:wrap;gap:6px;align-items:center;flex:1;min-width:260px}
.vmarke{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 10px;border-radius:999px;
  background:var(--akz-t);border:1px solid var(--akz);font-size:12.5px;color:var(--text)}
.vmarke button{border:0;background:none;font:inherit;font-size:15px;line-height:1;color:var(--text2);cursor:pointer;padding:0 5px}
.vmarke button:hover{color:var(--fehler)}
.vmarke.gemerkt{background:var(--flaeche2);border-color:var(--linie)}
.vmarke .vmarke-name{font-size:12.5px;color:var(--text);padding:0 2px}
.vsuchrahmen{position:relative;flex:1;min-width:220px}
.vsuche{width:100%;height:30px;font-size:13px}
.vliste{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:300px;overflow:auto;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:4px}
.vlisteintrag{display:flex;justify-content:space-between;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:none;
  font:inherit;font-size:13px;color:var(--text);text-align:left;cursor:pointer}
.vlisteintrag.aktiv,.vlisteintrag:hover{background:var(--akz-t)}
table.vtab td{padding:6px 8px;vertical-align:middle}
table.vtab tr.geplant td{background:color-mix(in srgb,var(--akz-t) 50%,transparent)}
table.vtab th.sortierbar{cursor:pointer;user-select:none}
table.vtab th.sortierbar.aktiv{color:var(--akz)}
table.vraster{border-collapse:separate;border-spacing:2px}
table.vraster th{position:sticky;top:0;background:var(--flaeche2);z-index:2;font-size:11px;padding:4px 6px}
table.vraster th.heute{color:var(--akz)}
table.vraster .vr-name{position:sticky;left:0;background:var(--flaeche);z-index:1;white-space:nowrap;padding:4px 8px;text-align:left}
table.vraster th.vr-name{z-index:3;background:var(--flaeche2)}
.vr-zelle{min-width:46px;height:26px;text-align:center;font-size:11.5px;border-radius:4px;background:var(--flaeche2)}
.vr-zelle.voll{background:color-mix(in srgb,var(--eis) calc(var(--a) * 100%),var(--flaeche));font-weight:600;color:var(--text)}
.vr-zelle.zukunft{outline:1px dashed var(--linie)}
.suchverlauf{margin-left:10px;font-size:11px;font-weight:600;color:var(--akz);padding:1px 8px;border:1px solid var(--akz);border-radius:999px;cursor:pointer}
.suchverlauf:hover{background:var(--akz);color:#fff}

/* ------------------------------------------------- Einstellungen (3.15.0) */
.einst-reihe{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.einst-spalte{max-width:100%;min-width:0}

/* ------------------------------------------------- Verbrauch (3.16.0) */
.vtag{margin-bottom:12px;overflow:hidden}
.vtag.leer{padding:8px 14px;background:var(--flaeche2);border-style:dashed}
.vtag.heute{border-color:var(--akz)}
.vtagkopf{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--kopf);flex-wrap:wrap}
.vtag.leer .vtagkopf{padding:0;background:none}
.vtagkopf .taglink{border:0;background:none;padding:0;font:inherit;font-weight:700;color:inherit;cursor:pointer}
.vtagkopf .taglink:hover{color:var(--akz);text-decoration:underline}
.vsumme{display:inline-flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.vsumme b{font-size:14px}
table.vblatt td{padding:4px 10px;height:32px;vertical-align:middle}
/* Feste Spalten: alle Tageskarten stehen untereinander buendig. */
table.vblatt{table-layout:fixed;width:100%;min-width:900px}
table.vblatt col.v-sorte{width:24%} table.vblatt col.v-geb{width:12%}
table.vblatt col.v-becher{width:21%} table.vblatt col.v-deckel{width:21%}
table.vblatt col.v-plan{width:8%} table.vblatt col.v-ist{width:8%} table.vblatt col.v-abw{width:6%}
table.vblatt td,table.vblatt th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.vblatt td.vsorte{padding-right:12px}
table.vblatt input.istfeld{width:100%;max-width:110px}
.vtag .vtabrahmen{overflow-x:auto}
table.vblatt td.vbecher{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.vblatt .vsap{margin-left:6px;color:var(--text3);font-variant-numeric:tabular-nums}
table.vblatt tr.mitist td{background:color-mix(in srgb,var(--akz-t) 60%,transparent)}
table.vblatt tr.ungeplant td{background:var(--warn-t)}
td.abw.minus{color:var(--fehler)}
details.erweitert{margin-top:14px;border-top:1px solid var(--linie2);padding-top:8px}
details.erweitert summary{cursor:pointer;font-size:12.5px;color:var(--akz);font-weight:600;list-style:none}
details.erweitert summary::before{content:"▸ ";}
details.erweitert[open] summary::before{content:"▾ ";}

/* ------------------------------------------------- Formeln (3.17.0) */
.namenchip{font-size:12px;background:var(--flaeche2);border:1px solid var(--linie);border-radius:3px;padding:3px 7px;
  border-left-width:3px;border-left-color:var(--text3)}
.namenchip.parameter{border-left-color:var(--akz)} .namenchip.feld{border-left-color:var(--frucht)}
.namenchip.formel{border-left-color:var(--zub)} .namenchip.fest{border-left-color:var(--text3)}
.ortwahl{display:flex;flex-direction:column;gap:3px;font-size:12px}
.ortwahl label{display:flex;gap:6px;align-items:center;white-space:nowrap}
.ortwahl input.haken{width:auto;min-height:0}
table.formeltab tr.inaktiv td{opacity:.6}
table.formeltab td.probe{font-variant-numeric:tabular-nums;white-space:nowrap}
.knopfmarke{cursor:pointer;font:inherit}
.formelwert{white-space:nowrap}
.berechnet{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:8px}
.berechnetwert{white-space:nowrap}

/* Kunden: Becher, Deckel, Kartons buendig (3.17.1) */
table.kvtab{table-layout:fixed;width:100%}
table.kvtab col.kv-name{width:30%} table.kvtab col.kv-anz{width:9%} table.kvtab col.kv-fuell{width:17%}
table.kvtab col.kv-sorten{width:32%} table.kvtab col.kv-knopf{width:104px}
table.kvtab td:last-child{overflow:visible} /* 3.64.0: „Ändern …“ bei 1024 px nicht abschneiden */
table.artikel.frei.kvtab,table.artikel.frei.vptab{table-layout:fixed;width:100%} /* stärker als table.artikel.frei{auto} */
table.kvtab td,table.kvtab th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 3.64.0: Verpackungspreise je Kunde - umbrechen statt abschneiden (1024 px) */
table.vptab{table-layout:fixed;width:100%}
table.vptab td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
table.vptab tr.zwischen td{background:var(--flaeche2);padding-top:6px;padding-bottom:6px}
/* "vollständig" und Co. in echtem Gruen statt der Zubereitungsfarbe */
.merker.gruen{color:#2f8a5f;border-color:#2f8a5f;background:color-mix(in srgb,#2f8a5f 8%,transparent)}
[data-thema="dunkel"] .merker.gruen{color:#6fc79a;border-color:#6fc79a}

/* ------------------------------------------------ Rezepte (3.18.0) */
button.linkknopf{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--text);
  cursor:pointer;text-align:left}
button.linkknopf:hover{color:var(--akz);text-decoration:underline}
.merker.rot{background:color-mix(in srgb,var(--fehler) 10%,transparent);border-color:var(--fehler);color:var(--fehler)}
.rz-teil{border:1px solid var(--linie);border-radius:var(--rund2);margin:0 0 10px;overflow:hidden}
.rz-teilkopf{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--kopf);
  border-bottom:1px solid var(--linie)}
.rz-teilkopf input.zelle{background:var(--feld);border-color:var(--linie)}
table.rz-tab{width:100%;table-layout:fixed}
table.rz-tab td{padding:2px 8px}
table.rz-tab th{padding:5px 8px}
table.rz-tab col.rz-sap{width:90px} table.rz-tab col.rz-menge{width:120px}
table.rz-tab col.rz-ant{width:110px} table.rz-tab col.rz-eis{width:90px} table.rz-tab col.rz-weg{width:36px}
table.rz-tab input.zelle{width:100%}
table.rz-liste{width:100%}
table.rz-liste td{padding:6px 12px}
table.rz-import{width:100%}
table.rz-import td{padding:5px 10px;border-bottom:none}
tr.rz-imp-kopf td{border-top:1px solid var(--linie2);padding-top:8px}
.rz-imp-sorten{display:flex;flex-wrap:wrap;gap:4px 14px;padding-bottom:4px}
.rz-imp-sorte{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;cursor:pointer}
table.ro-liste{width:100%;table-layout:fixed;min-width:820px}
table.ro-liste col.ro-sap{width:110px} table.ro-liste col.ro-gruppe{width:130px}
table.ro-liste col.ro-preis{width:110px} table.ro-liste col.ro-lager{width:120px}
table.ro-liste col.ro-stand{width:100px} table.ro-liste col.ro-rez{width:80px} table.ro-liste col.ro-weg{width:40px}
table.ro-liste input.zelle,table.ro-liste select.zelle{width:100%}

/* --------------------------------------------- Mixplanung (3.18.0) */
.mp-karte{margin-bottom:10px;border-left:3px solid var(--eis)}
.mp-karte.kritisch{border-left-color:var(--warn)}
.mp-kopf{display:flex;align-items:center;gap:10px;padding:9px 14px;flex-wrap:wrap}
.mp-auf{border:0;background:none;cursor:pointer;color:var(--text3);font-size:13px;width:14px;padding:0}
.mp-zahl{display:flex;flex-direction:column;align-items:flex-end;min-width:70px;line-height:1.25}
.mp-zahl b{font-variant-numeric:tabular-nums}
.mp-zahl input.zelle{border-color:var(--linie);background:var(--feld)}
.mp-hinweise{padding:0 14px 8px 38px;color:var(--warn);line-height:1.6}
.mp-optionen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;padding:0 14px 12px 38px}
.mp-option{border:1px solid var(--linie);border-radius:var(--rund2);padding:10px 12px;display:flex;flex-direction:column;
  gap:6px;background:var(--flaeche)}
.mp-option.empf{border-color:var(--akz)}
.mp-option .k{align-self:flex-start;margin-top:4px}
.mp-optzahlen{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--text2)}
.mp-optzahlen .minus b{color:var(--fehler)}
.mp-mengen .abw.plus{color:var(--zub)} .mp-mengen .abw.minus{color:var(--fehler)}
.mp-detail{border-top:1px solid var(--linie2);padding:10px 14px 14px 38px}
.mp-rechenweg{margin-bottom:10px;line-height:1.6}
.mp-spalten{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:16px;align-items:start}
table.mp-posten,table.mp-zutaten{width:100%;border:1px solid var(--linie);border-radius:var(--rund2);border-collapse:separate;
  border-spacing:0;overflow:hidden}
table.mp-zutaten{table-layout:fixed}
table.mp-zutaten col.mz-nr{width:90px} table.mp-zutaten col.mz-ant{width:90px}
table.mp-zutaten col.mz-je{width:130px} table.mp-zutaten col.mz-ges{width:150px}
table.mp-zutaten td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
tr.mp-gruppe td{background:var(--flaeche2);font-weight:600;font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text2)}
@media (max-width:1100px){.mp-spalten{grid-template-columns:1fr}}

/* ------------------------------------------ Einkaufsliste (3.18.0) */
.ek-tage{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding-bottom:10px}
.ek-tag{height:24px;padding:0 8px;border-radius:6px;border:1px solid var(--linie);background:var(--flaeche);
  font:inherit;font-size:12px;cursor:pointer;color:var(--text3)}
.ek-tag.mit{color:var(--text);border-color:var(--akz)}
.ek-tag.aus{text-decoration:line-through;opacity:.55;border-style:dashed}
table.ek-tab{width:100%;table-layout:fixed;min-width:760px}
table.ek-tab col.ek-sap{width:100px} table.ek-tab col.ek-gruppe{width:90px}
table.ek-tab col.ek-kg{width:120px} table.ek-tab col.ek-lager{width:120px}
table.ek-tab col.ek-fehl{width:120px} table.ek-tab col.ek-kosten{width:110px}
table.ek-tab td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.ek-tab.ek-matrix{table-layout:auto}
tr.ek-fehlt td{background:var(--warn-t)}
td.ek-rot{color:var(--fehler);font-weight:700}
tr.ek-unter td{background:var(--flaeche2);padding-top:2px;padding-bottom:2px}
table.ro-liste select.zelle{padding:0 4px;font-size:12.5px}

/* Mixplanung 3.18.1: Gebindemengen direkt, Vorschläge auf Klick */
.mp-gebinde{display:flex;flex-wrap:wrap;gap:6px 18px;padding:0 14px 10px 38px;align-items:center}
.mp-geb{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.mp-geb.leer .mp-gebname{color:var(--text3)}
.mp-gebname{font-weight:600;white-space:nowrap}
.mp-geb input.mp-stueck{width:84px;border-color:var(--linie);background:var(--feld)}
.mp-gebl{min-width:64px;font-variant-numeric:tabular-nums}
.mp-zahl b.mp-minus{color:var(--fehler)}
.mp-vorschlagknopf{align-self:center}
.mp-vorschlagknopf[aria-pressed="true"]{background:var(--akz-t);border-color:var(--akz);color:var(--akz)}
.mp-optionen{border-top:1px dashed var(--linie2);padding-top:10px}
.mp-option{background:var(--flaeche2)}
.mp-gebinde .mp-geb{padding:0;margin:0}

/* 3.18.3: Zubereitungen in Rezepten, Datei lesen */
table.ro-liste col.ro-zub{width:170px}
table.rz-tab td.rz-namezelle{white-space:nowrap}
table.rz-tab td.rz-namezelle .rz-zubmarke+input.zelle{width:calc(100% - 96px);margin-left:4px}
.rz-zubmarke{flex-shrink:0;font-size:10.5px}
/* 3.69.0: Zutaten und Zubereitungen im Rezept öffnen */
button.rz-zublink{cursor:pointer;font:inherit;font-size:10.5px}
button.rz-zublink:hover{text-decoration:underline}
table.rz-tab td.rz-namezelle .rz-link{font-weight:600;text-align:left;white-space:normal;color:var(--akz)}
table.rz-tab td.rz-namezelle .rz-zubmarke+.rz-link{margin-left:6px}
table.rz-tab td.rz-namezelle input.zelle+.rz-oeffnen{margin-left:4px;vertical-align:middle}
table.rz-tab td.rz-namezelle:has(.rz-oeffnen) input.zelle{width:calc(100% - 34px)}
table.rz-tab td.rz-namezelle:has(.rz-oeffnen) .rz-zubmarke+input.zelle{width:calc(100% - 130px)}
.rz-import-panel{border:1px solid var(--akz);border-radius:var(--rund2);margin:0 0 10px;overflow:hidden;background:var(--flaeche)}
.rz-import-panel .rz-teilkopf{background:var(--akz-t)}
.rz-import-panel tr.rz-aus td{opacity:.45}

/* 3.18.4: Zutaten gesamt in der Mixplanung */
.mp-gesamt{margin-bottom:14px;border-left:3px solid var(--akz)}
.mp-gesamt .mp-kopf{gap:14px}
.mp-gesamt-rumpf{padding:0 14px 4px 38px}
table.mp-gesamttab col.mz-ges{width:140px} table.mp-gesamttab col.mz-davon{width:30%}
tr.mp-gesamtzeile{cursor:pointer}
tr.mp-gesamtzeile:hover td{background:var(--flaeche2)}

/* 3.19.0: Rezept-Ordner einlesen */
.ord-abschnitt{margin-bottom:16px}
.ord-abschnittkopf{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.ord-karte{padding:10px 14px;margin-bottom:8px;border-left:3px solid var(--linie)}
.ord-karte.offen{border-left-color:var(--warn)}
.ord-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ord-frage{margin:6px 0 2px;color:var(--warn);font-size:13px}
.ord-gruende{margin:2px 0 6px}
.ord-wahlzeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
select.ord-wahl{width:auto;min-width:340px;max-width:560px}
select.ord-wahl.ord-offen{border-color:var(--warn);background:var(--warn-t)}
.ord-neuzub{display:flex;gap:6px;flex-wrap:wrap;width:100%}
.ord-neuzub input{width:240px}
.ord-neuzub select{width:auto}
.ord-vorhanden{display:flex;gap:14px;flex-wrap:wrap;align-items:center;width:100%;padding:4px 8px;border-radius:var(--rund2)}
.ord-vorhanden.offen{background:var(--warn-t)}
table.ord-ro{width:100%}
table.ord-ro tr.offen td{background:var(--warn-t)}
.ord-kurz{display:flex;flex-wrap:wrap;gap:4px 18px;line-height:1.7}

/* 3.20.0: Zubereitungsmengen im Monatsplan */
.zubkgzelle{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end}
.zubkgzelle input.zubkg{width:84px}
tr.zubfehlt td{background:var(--warn-t)}
tr.zubfehlt td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

/* 3.20.1: aufgeräumter Gebinde-Kopf, kompakteres Rezept-Fenster */
.gebindeleiste{display:flex;align-items:center;gap:8px;margin:14px 0 6px}
table.rz-tab col.rz-sap{width:72px} table.rz-tab col.rz-menge{width:100px}
table.rz-tab col.rz-ant{width:96px} table.rz-tab col.rz-eis{width:80px}
table.rz-tab td{padding:1px 6px} table.rz-tab th{padding:4px 6px}
.rz-teilkopf{padding:5px 8px}
.rz-teil{margin:0 0 8px}

/* 3.21.0: Verbrauchsauswertung mit Zutaten */
.segment.auswbereich{margin-bottom:10px}
.segment.auswbereich button{padding:6px 14px}
table.zv-tab{table-layout:fixed;width:100%}
table.zv-tab td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
tr.zv-zeile{cursor:pointer}
tr.zv-zeile:hover td{background:var(--flaeche2)}
.zv-auf{display:inline-block;width:14px;color:var(--text3);font-size:11px}
tr.zv-gruppe td{background:var(--kopf);padding-top:7px;padding-bottom:7px}
.zv-balkenzelle{padding-right:14px}
.zv-balken{display:block;height:8px;border-radius:4px;background:var(--akz);opacity:.55}
.zv-balken.fl{background:var(--eis)}

/* 3.22.0: Kopfzeile schlanker – ein Aktionen-Knopf, Schloss als Symbol,
   Sprünge zwischen Monatsplan/Tagesplan/Mixplanung dezent in der Leiste darunter */
.aktionknopf{display:inline-flex;align-items:center;gap:8px}
.aktionknopf .pfeil{font-size:10px;opacity:.85;margin-top:1px}
.wahlmenue .wahl.gefahr b{color:var(--fehler)}
button.k.schutzknopf.zu{color:#c62828;border-color:#e3a5a5;background:#fdf1f1}
button.k.schutzknopf.zu:hover{background:#fbe3e3;border-color:#c62828}
button.k.schutzknopf.auf{color:#2e7d32;border-color:#a9d3ab;background:#f0f8f0}
button.k.schutzknopf.auf:hover{background:#e2f2e3;border-color:#2e7d32}
:root[data-thema="dunkel"] button.k.schutzknopf.zu{color:#ff8a80;border-color:#7a3434;background:#2a1717}
:root[data-thema="dunkel"] button.k.schutzknopf.auf{color:#81c784;border-color:#2f5e33;background:#152418}
.sprunglinks{display:flex;align-items:center;gap:4px;white-space:nowrap}
.sprunglinks .klein{margin-right:6px;color:var(--text3)}
.sprunglink{all:unset;cursor:pointer;font-size:13px;font-weight:600;color:var(--akz);padding:5px 8px;border-radius:var(--rund2)}
.sprunglink:hover{background:var(--akz-t)}
.sprunglink:focus-visible{outline:2px solid var(--akz);outline-offset:1px}

/* 3.23.0: Einkauf & Lager – Zutaten, Lieferanten, Bestellungen, Berichte */
.raster.x3{grid-template-columns:repeat(3,minmax(0,1fr))}
.raster .breit2{grid-column:span 2}
@media (max-width:900px){.raster.x3{grid-template-columns:repeat(2,minmax(0,1fr))}.raster .breit2{grid-column:span 2}}
.ampel.blau{--f:var(--akz);color:var(--akz)}
.segment.auswbereich{flex-wrap:wrap}
.lgr-haupt td,.lgr-haupt th{vertical-align:middle}
.lgr-haupt tr.rot td{background:color-mix(in srgb,var(--fehler) 6%,transparent)}
.lgr-haupt tr.gelb td{background:color-mix(in srgb,var(--warn) 7%,transparent)}
.lgr-haupt tr.gut td{background:color-mix(in srgb,#2f8a5f 9%,transparent)}
.lgr-haupt tr.grau td,.lgr-tab tr.grau td{color:var(--text3)}
.lgr-haupt tr.gruppe td{border-top:2px solid var(--linie)}
.lgr-haupt td.lang{max-width:360px;white-space:normal;line-height:1.45}
.lgr-haupt input.zelle{width:96px;text-align:right}
.lgr-pfeil{width:26px;text-align:center}
.lgr-pfeil .linkknopf{font-size:12px;color:var(--text3);padding:4px}
tr.lgr-detail td{background:var(--flaeche2);padding:10px 12px 14px}
.lgr-gruende{margin:0 0 10px;padding-left:18px;line-height:1.6;font-size:13px;color:var(--text2)}
.lgr-warum{border:1px solid var(--linie);border-left:3px solid var(--akz);border-radius:var(--rund2);
  background:var(--akz-t);padding:10px 14px;margin:0 0 14px;font-size:13px}
.lgr-warum ul{margin:6px 0 0;padding-left:18px;line-height:1.6;color:var(--text2)}
.lgr-fenster h3{font-size:13px;margin:0;text-transform:uppercase;letter-spacing:.04em;color:var(--text2)}
.lgr-unterkopf{display:flex;gap:12px;align-items:center;margin:-4px 0 12px;flex-wrap:wrap}
.lgr-kacheln{margin-bottom:12px}
.lgr-abschnitt{margin:16px 0 0}
.lgr-kopf{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.lgr-zwei{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
@media (max-width:900px){.lgr-zwei{grid-template-columns:1fr}}
.lgr-buchen{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:6px}
.lgr-buchen .schalterzeile{margin:0 0 6px}
.lgr-tab td,.lgr-tab th{padding:6px 8px}
.lgr-tab input.zelle{width:88px}
.klein-tab td{font-size:12.5px}
td.rot,b.rot,.lgr-tab td.rg-rot{color:var(--fehler)}
.klein.gut{color:#2f8a5f;font-weight:600}
.lgr-info{margin-top:10px;padding:8px 10px;background:var(--flaeche2);border-radius:var(--rund2);line-height:1.6}
.lgr-info:empty{display:none}
.lgr-kurve{border:1px solid var(--linie);border-radius:var(--rund2);padding:6px 8px;background:var(--flaeche)}
.lgr-kurve svg{width:100%;height:140px;display:block}
.lgr-kurve .l{fill:none;stroke:var(--akz);stroke-width:2}
.lgr-kurve .s{stroke:var(--warn);stroke-dasharray:5 4;stroke-width:1.3}
.lgr-kurve .null{stroke:var(--linie);stroke-width:1}
.lgr-kurve .g{stroke:var(--linie2);stroke-width:1}
.lgr-kurve .t{fill:var(--text3);font-size:10px}
.lgr-kurve .e{fill:var(--fehler)}
.lgr-zaehlliste{max-height:52vh;overflow:auto;border:1px solid var(--linie);border-radius:var(--rund2)}
.lgr-zaehlzeile{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:6px 10px;border-bottom:1px solid var(--linie2)}
.lgr-zaehlzeile input{width:110px;text-align:right}
.tagwahl{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.tagwahl button{font:inherit;font-size:12.5px;min-width:36px;height:30px;border:1px solid var(--linie);background:var(--feld);
  border-radius:var(--rund3);color:var(--text2);cursor:pointer}
.tagwahl button[aria-pressed="true"]{background:var(--akz);border-color:var(--akz);color:var(--akz-auf);font-weight:600}
.tagwahl button:disabled{cursor:default;opacity:.7}
.tagwahl .klein{margin-left:6px}
.lgr-form textarea{width:100%}
input[type="checkbox"].haken{width:16px;height:16px;min-height:0;margin:2px 0 0;padding:0;flex:none;accent-color:var(--akz)}
.lgr-haupt td.n,.lgr-tab td.n{white-space:nowrap}
.lgr-haupt td:nth-child(3) b{white-space:normal}
.lgr-tab input.zelle{width:76px}
.lgr-tab td:first-child{min-width:170px}
.lgr-zutaten th:nth-child(3),.lgr-zutaten td:nth-child(3){min-width:220px}
table.ro-liste col.ro-lf{width:120px}
.fehlerfeld{border-color:var(--rot,#c0392b)!important}
/* 3.25.0 Zutaten */
.zt-tab td{vertical-align:top}
.zt-tab tr.zt-gruppe td{background:var(--flaeche2,rgba(0,0,0,.03));cursor:pointer;border-top:1px solid var(--linie)}
.zt-tab tr.zt-unter td:nth-child(2){padding-left:22px}
.zt-einzug{color:var(--text3,#999)}
.zt-chips{display:flex;flex-wrap:wrap;gap:4px}
.zt-kennzahlen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.zt-kennzahlen button.merker{cursor:pointer;border:none}
.zt-kennzahlen button.merker.an{outline:2px solid var(--akz,#3b6)}
.zt-tab td:nth-child(4){white-space:nowrap}

/* ======================================================= Eiskalkulation (3.26.0) */
.ka-uebersicht{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.ka-ordnerleiste{position:sticky;top:120px;padding-bottom:2px}
.ka-ordner{display:flex;align-items:center;gap:2px;border-radius:var(--rund2);margin:1px 6px}
.ka-ordner.an{background:var(--akz-t)}
.ka-ordner .k.symbol{opacity:0;width:24px;height:24px;min-height:24px}
.ka-ordner:hover .k.symbol{opacity:1}
.ka-ordnername{flex:1;display:flex;align-items:center;gap:6px;min-width:0;font:inherit;font-size:13px;color:var(--text2);
  background:none;border:none;padding:6px 4px;cursor:pointer;text-align:left}
.ka-ordner.an .ka-ordnername{color:var(--text);font-weight:600}
.ka-ordnername .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ka-ordnername .n{font-size:11.5px;color:var(--text3);font-variant-numeric:tabular-nums}
.ka-ico{display:inline-flex;color:var(--text3)}
.ka-kacheln{grid-template-columns:repeat(4,minmax(0,1fr))}
.ka-kachel{font:inherit;text-align:left;cursor:pointer;color:inherit}
.ka-kachel:hover{border-color:var(--rand)}
.ka-kachel.an{border-color:var(--akz);background:var(--akz-t)}
.ka-tab td{vertical-align:top;padding-top:8px;padding-bottom:8px}
.ka-tab th.ka-sort{cursor:pointer;user-select:none}
.ka-tab th.ka-sort:hover{color:var(--text)}
.ka-eine{max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ka-komp{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.ka-kchip{display:inline-flex;align-items:center;gap:2px;height:22px;min-width:22px;justify-content:center;padding:0 5px;border-radius:5px;
  font-size:11.5px;font-weight:700;color:#fff;background:var(--eis)}
.ka-kchip i{font-style:normal;font-size:9.5px;font-weight:600;opacity:.85}
.ka-kchip.variegato{background:var(--frucht)} .ka-kchip.stuecke{background:var(--zub)}
.ka-kchip.aus{background:none;color:var(--text3);border:1px dashed var(--linie);font-weight:500}
.ka-rauf{color:var(--fehler)} .ka-runter{color:var(--zub)} .ka-rot{color:var(--fehler)}
.ampel.ka-blau{--f:var(--akz);color:var(--akz)}
.merker.ka-fehlt{background:var(--fehler);border-color:var(--fehler);color:#fff}
.merker.ka-alt{background:var(--warn-t);border-color:var(--fehler);color:var(--fehler)}
.merker.ka-lief{background:var(--warn-t);border-color:var(--warn);color:var(--warn)}
.merker.ka-neu{background:var(--akz-t);border-color:var(--akz);color:var(--akz)}
.merker.ka-grau{color:var(--text3)}
button.merker{cursor:pointer;font:inherit;font-size:11.5px;font-weight:600}
/* Editor */
.ka-stepper{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
.ka-schritt{display:flex;align-items:center;gap:8px;font:inherit;font-size:13px;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:999px;padding:4px 14px 4px 5px;cursor:pointer;color:var(--text2)}
.ka-schritt .nr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--flaeche2);font-size:11.5px;font-weight:700;color:var(--text3)}
.ka-schritt.ok .nr{background:var(--zub);color:#fff}
.ka-schritt.fehlt .nr{background:var(--warn);color:#fff}
.ka-schritt.bereit .nr{background:var(--akz);color:#fff}
.ka-schritt.aus{opacity:.7}
.ka-schritt.an{border-color:var(--akz);background:var(--akz-t);color:var(--text);font-weight:600}
.ka-schritt .klein{font-size:11px}
.ka-statuswahl{max-width:160px;height:34px}
.ka-raster{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.ka-seite{position:sticky;top:150px;display:flex;flex-direction:column;gap:12px}
.ka-live{padding:14px 16px}
.ka-we{display:flex;align-items:baseline;gap:6px;margin:2px 0}
.ka-we .z{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.ka-we .e{font-size:18px;color:var(--text3)}
.ka-we-leer{font-size:15px;color:var(--text3);padding:10px 0}
.ka-balken{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:10px 0 8px;background:var(--flaeche2)}
.ka-balken span{height:100%}
.ka-mini{width:100%;font-size:12.5px}
.ka-mini td{padding:3px 0;border:none}
.ka-mini tr.grau td{color:var(--text3)}
.ka-pruefliste{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.ka-pruefliste.ok{padding:12px 14px}
.ka-pruef{font:inherit;font-size:12.5px;text-align:left;background:none;border:none;border-left:3px solid var(--linie);
  padding:3px 8px;cursor:pointer;color:var(--text2)}
.ka-pruef.fehlt{border-left-color:var(--warn);color:var(--text)}
.ka-pruef.warn{border-left-color:var(--rand)}
.ka-pruef:hover{background:var(--flaeche2)}
.ka-prod{padding:3px 0}
.ka-karte{padding:14px 16px;margin-bottom:14px}
.ka-karte h3{margin:0;font-size:15px}
.ka-karte.ka-aus{opacity:.85}
.ka-kartenkopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ka-felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;margin-bottom:6px}
.ka-felder .ka-breit{grid-column:span 3}
.ka-einheit{display:flex;align-items:center;gap:6px}
.ka-einheit span{color:var(--text3)}
.ka-kunden{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ka-kunde{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--linie);background:var(--flaeche2);border-radius:999px;padding:3px 6px 3px 12px;font-size:13px}
.ka-x{font:inherit;border:none;background:none;color:var(--text3);cursor:pointer;font-size:15px;padding:0 4px}
.ka-x:hover{color:var(--fehler)}
.ka-tabelle{width:100%}
.ka-tabelle td{padding:4px 8px}
.ka-zeilen tr.ka-problem td{background:var(--warn-t)}
.ka-zeilen tfoot td{border-top:1px solid var(--linie);padding-top:8px}
.ka-zeilen td .zt-chips{margin-top:2px}
.ka-einh{width:62px;height:26px;min-height:26px}
.ka-anteil{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text2)}
.ka-herkunft{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;padding:8px 10px;border-radius:var(--rund2);
  background:var(--akz-t);margin-bottom:10px}
.ka-herkunft.angepasst{background:var(--warn-t)}
.ka-hinweis{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;padding:8px 10px;border-radius:var(--rund2);
  background:var(--warn-t);color:var(--warn);margin-bottom:10px}
.ka-stufenfuss{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;font-size:13px;color:var(--text2);margin-top:10px;
  padding-top:10px;border-top:1px dashed var(--linie)}
.ka-weiter{display:flex;justify-content:flex-end;margin:-4px 0 14px}
.ka-rzleiste{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.ka-wahlliste{display:flex;flex-direction:column;gap:2px;max-height:55vh;overflow:auto;margin-top:8px}
.ka-wahl{font:inherit;text-align:left;background:none;border:none;border-radius:var(--rund2);padding:7px 10px;cursor:pointer;color:var(--text)}
.ka-wahl:hover{background:var(--flaeche2)}
.ka-rezliste{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
.ka-rezkarte{border:1px solid var(--linie);border-radius:var(--rund);padding:10px 12px}
.ka-rezkarte.grau{opacity:.7}
.ka-rezkopf{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.ka-rezteile{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:stretch}
.ka-rezteil{font:inherit;display:flex;flex-direction:column;gap:1px;text-align:left;min-width:170px;max-width:260px;padding:7px 10px;
  border:1px solid var(--linie);border-left:4px solid var(--eis);border-radius:var(--rund2);background:var(--flaeche);cursor:pointer;color:var(--text);font-size:12.5px}
.ka-rezteil.variegato{border-left-color:var(--frucht)} .ka-rezteil.stuecke{border-left-color:var(--zub)}
.ka-rezteil:hover{border-color:var(--akz);background:var(--akz-t)}
.ka-rezteil .klein{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ka-fluss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.ka-flussschritt{display:flex;gap:10px;align-items:center;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund);padding:10px 12px}
.ka-flussschritt .nr{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--flaeche2);font-weight:700;color:var(--text3);flex:none}
.ka-flussschritt.ok{border-color:var(--zub)}
.ka-flussschritt.ok .nr{background:var(--zub);color:#fff}
.ka-pruefbox{display:flex;flex-direction:column;gap:10px;font-size:13px}
.ka-rezplan{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.ka-fehlerliste{border-left:3px solid var(--fehler);padding:4px 10px;background:var(--warn-t)}
.ka-warnliste{border-left:3px solid var(--warn);padding:4px 10px}
.ka-fehlerliste ul,.ka-warnliste ul{margin:4px 0 0;padding-left:18px;line-height:1.6}
.ka-vgl{min-width:100%}
.ka-vgl th.ka-vgl-k{background:none;text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--text2);font-weight:500;white-space:normal;min-width:170px}
.ka-vgl tr.ka-vgl-gruppe th{background:var(--kopf)}
.ka-vgl tr.ka-vgl-we td{background:var(--akz-t)}
.ka-vgl td.ka-beste b{color:var(--zub)}
.ka-vgl td.ka-anders{background:var(--warn-t)}
.ka-vgl td.ka-leer{color:var(--text3)}
@media (max-width:1100px){
  .ka-raster{grid-template-columns:minmax(0,1fr)}
  .ka-seite{position:static}
  .ka-uebersicht{grid-template-columns:minmax(0,1fr)}
  .ka-ordnerleiste{position:static}
  .ka-felder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ka-felder .ka-breit{grid-column:span 2}
}
.ka-tab .merker,.ka-tab .ampel{white-space:nowrap}
.ka-tab{min-width:1000px}
.ka-tab td:nth-child(2){min-width:190px}
.ka-tab td:nth-child(3){min-width:110px}
.ka-seite{top:118px}
.ka-ordnerleiste{top:118px}
.ka-live .segment{display:flex;width:100%}
.ka-live .segment button{flex:1;padding:6px 4px;font-size:12px}
.ka-tabelle td.n,.ka-tabelle th.n,.ka-mini td.n{white-space:nowrap}
.ka-zeilen td:nth-child(2){min-width:230px}
.ka-zeilen td:nth-child(2) input.zelle{width:100%}
.ka-zeilen td:nth-child(6) .merker{margin-left:6px}
select.ka-einh{width:70px;padding:0 4px}
button.k:disabled{opacity:.5;cursor:not-allowed}
.ka-zeilen th,.ka-zeilen td{padding-left:6px;padding-right:6px}
.ka-zeilen td:nth-child(2){min-width:200px}

/* 3.27.0: Navigation in zwei Bereichen, Reiter je Modul */
nav .navbereich{font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;font-weight:700;
  padding:0 10px;margin:14px 0 4px 0;min-height:0}
nav .navtrenner{height:1px;background:var(--linie);margin:12px 6px 8px 6px}
nav button.naveintrag{padding-left:10px}
.modulreiter{display:flex;gap:2px;margin:8px 0 0 0;flex-wrap:wrap}
.modulreiter button{font:inherit;font-size:13px;color:var(--text2);background:none;border:none;
  border-bottom:2px solid transparent;padding:4px 10px 6px 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.modulreiter button:hover{color:var(--text)}
.modulreiter button[aria-current="page"]{color:var(--text);font-weight:600;border-bottom-color:var(--akz)}
.modulreiter .navzahl{margin-left:2px}
@media (max-width:900px){ nav .navbereich{display:none} }

.aufgaben{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.aufgabe{display:flex;align-items:center;gap:12px;font:inherit;font-size:13.5px;text-align:left;background:var(--flaeche);
  border:1px solid var(--linie);border-left:3px solid var(--rand);border-radius:var(--rund2);padding:8px 12px;cursor:pointer;color:var(--text)}
.aufgabe:hover{border-color:var(--akz);background:var(--akz-t)}
.aufgabe.fehler{border-left-color:var(--fehler)} .aufgabe.warn{border-left-color:var(--warn)} .aufgabe.info{border-left-color:var(--akz)}
.aufgabe-bereich{font-size:10.5px;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);font-weight:700;min-width:84px}
.aufgabe-text{flex:1}
.aufgabe-pfeil{color:var(--text3);font-size:16px}

/* 3.29.0 Rechnungskontrolle */
.rg-rot{color:var(--fehler)}
.gruen-text{color:#2f8a5f}
.rg-kopf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px 18px;margin:4px 0 12px}
.rg-kopf>div{display:flex;flex-direction:column;gap:2px}
@media (max-width:900px){.rg-kopf{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rg-befunde{border:1px solid var(--linie);border-left:3px solid var(--text3,#9aa5b1);border-radius:var(--rund2);padding:9px 13px;margin:0 0 12px;font-size:13px;line-height:1.6}
.rg-befunde.auff{border-left-color:var(--fehler);background:color-mix(in srgb,var(--fehler) 5%,transparent)}
.rg-pruef th.rg-gruppe{text-align:center;border-bottom:1px solid var(--linie)}
.rg-pruef tr.rg-auff td{background:color-mix(in srgb,var(--fehler) 5%,transparent)}
.rg-pruef td{vertical-align:top}
.rg-klaerung{margin-top:14px;padding:12px 14px}
.rg-pruef td.n{white-space:nowrap}

/* 3.30.0 Posteingang */
.pe-stand{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 12px;font-size:13px}
.pe-konto{padding:12px 14px;margin-bottom:10px}
.pe-anhang{border-top:1px solid var(--linie);padding:8px 0}
.pe-text{white-space:pre-wrap;font-size:12px;line-height:1.5;max-height:340px;overflow:auto;background:var(--flaeche2);padding:10px;border-radius:var(--rund2);margin:6px 0 0}
tr.pe-unsicher td{background:color-mix(in srgb,var(--fehler) 4%,transparent)}
.pe-pwzeile{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin-top:8px}
.pe-pwzeile>.feld{flex:1 1 260px;margin:0}
.pe-pwknoepfe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pe-pwzeile>.klein{flex-basis:100%}

/* 3.31.0 Freigaben und Vorgangskette */
.fg-gruppe h3{margin:16px 0 8px;font-size:14px}
.fg-karte{padding:12px 14px;margin-bottom:8px}
.fg-kopf{display:flex;gap:12px;align-items:flex-start}
.fg-icon{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--flaeche2);color:var(--text2)}
.fg-titel{flex:1;min-width:0}
.fg-titel .merker{margin-right:6px}
.fg-links{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:flex-end;max-width:40%}
.fg-text{white-space:pre-wrap;margin:6px 0 0 40px;line-height:1.55}
.fg-aktion{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0 0 40px}
.fg-we{flex-direction:column;align-items:stretch}
.kette{display:flex;gap:2px;margin-top:4px}
.kette-schritt{font-size:10.5px;padding:1px 6px;border-radius:3px;background:var(--flaeche2);color:var(--text3);white-space:nowrap}
.kette-schritt.ok{background:color-mix(in srgb,#2f8a5f 16%,transparent);color:#2f8a5f}
.kette-schritt.offen{background:color-mix(in srgb,#c88a12 16%,transparent);color:var(--warn)}
.kette-schritt.problem{background:color-mix(in srgb,var(--fehler) 16%,transparent);color:var(--fehler)}
.kette.gross{gap:6px;flex-wrap:wrap}
.kette.gross .kette-schritt{font-size:12.5px;padding:6px 10px;border-radius:6px;white-space:normal;min-width:120px;flex:1}
.kette-detail{margin-top:10px}
.pe-auto{border-left-color:#2f8a5f}

/* 3.32.0 Preisentwicklung und Lieferantenakte */
:root{--serie-1:#2a78d6;--serie-2:#eb6834;--serie-3:#1baf7a;--serie-4:#eda100;--serie-5:#e87ba4;--serie-6:#008300;--serie-7:#6250d6;--serie-8:#e34948}
:root[data-thema="dunkel"]{--serie-1:#3987e5;--serie-2:#d95926;--serie-3:#199e70;--serie-4:#c98500;--serie-5:#d55181;--serie-6:#008300;--serie-7:#9085e9;--serie-8:#e66767}
.pa-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:0 0 12px}
.pa-kachel{padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.pa-kachel b{font-size:22px;color:var(--text)}
.pa-kachel.warn b{color:var(--warn)}
.pa-produkt{padding:10px 14px;margin-bottom:10px}
.pa-produkt.auff{border-left:3px solid var(--warn)}
.pa-pkopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.pa-tab td{vertical-align:top}
tr.pa-bester td{background:color-mix(in srgb,#2f8a5f 7%,transparent)}
.pa-zeitraum{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.pa-chartbox{margin:10px 0}
.pa-chart{width:100%;height:auto;display:block}
.pa-raster{stroke:var(--linie);stroke-width:1}
.pa-achse{font-size:11px;fill:var(--text3,#7b8590)}
.pa-linie{fill:none;stroke-width:2}
.pa-punkt{stroke:var(--flaeche,#fff);stroke-width:2}
.pa-punkt.hohl{fill:var(--flaeche,#fff)!important;stroke-width:2}
.pa-ziel{fill:transparent;cursor:pointer}
.pa-tip{position:absolute;transform:translate(-50%,calc(-100% - 12px));background:var(--flaeche,#fff);border:1px solid var(--linie);border-radius:6px;padding:6px 9px;font-size:12px;pointer-events:none;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:3}
.pa-legende{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;margin-top:6px;color:var(--text2)}
.pa-legende i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}
.pa-linie.s1{stroke:var(--serie-1)}.pa-punkt.s1{fill:var(--serie-1)}.pa-punkt.hohl.s1{stroke:var(--serie-1)}.pa-legende i.s1{background:var(--serie-1)}
.pa-linie.s2{stroke:var(--serie-2)}.pa-punkt.s2{fill:var(--serie-2)}.pa-punkt.hohl.s2{stroke:var(--serie-2)}.pa-legende i.s2{background:var(--serie-2)}
.pa-linie.s3{stroke:var(--serie-3)}.pa-punkt.s3{fill:var(--serie-3)}.pa-punkt.hohl.s3{stroke:var(--serie-3)}.pa-legende i.s3{background:var(--serie-3)}
.pa-linie.s4{stroke:var(--serie-4)}.pa-punkt.s4{fill:var(--serie-4)}.pa-punkt.hohl.s4{stroke:var(--serie-4)}.pa-legende i.s4{background:var(--serie-4)}
.pa-linie.s5{stroke:var(--serie-5)}.pa-punkt.s5{fill:var(--serie-5)}.pa-punkt.hohl.s5{stroke:var(--serie-5)}.pa-legende i.s5{background:var(--serie-5)}
.pa-linie.s6{stroke:var(--serie-6)}.pa-punkt.s6{fill:var(--serie-6)}.pa-punkt.hohl.s6{stroke:var(--serie-6)}.pa-legende i.s6{background:var(--serie-6)}
.pa-linie.s7{stroke:var(--serie-7)}.pa-punkt.s7{fill:var(--serie-7)}.pa-punkt.hohl.s7{stroke:var(--serie-7)}.pa-legende i.s7{background:var(--serie-7)}
.pa-linie.s8{stroke:var(--serie-8)}.pa-punkt.s8{fill:var(--serie-8)}.pa-punkt.hohl.s8{stroke:var(--serie-8)}.pa-legende i.s8{background:var(--serie-8)}

.la-tabs{margin:4px 0 12px;flex-wrap:wrap}
.la-zwei{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
@media (max-width:1000px){.la-zwei{grid-template-columns:1fr}}
.la-zeit{max-height:560px;overflow:auto}
.la-ereignis{display:grid;grid-template-columns:22px 70px 1fr;gap:6px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--linie)}
.la-ereignis .linkknopf{text-align:left}
.la-icon{color:var(--text3,#7b8590);text-align:center}
.la-stamm{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0 0 10px;font-size:13px}
.la-stamm dt{color:var(--text3,#7b8590)}
.la-stamm dd{margin:0;white-space:pre-wrap}
.la-dok{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--linie)}

/* 3.33.0: Dateieingang */
.de-zone{border:2px dashed var(--linie2);border-radius:var(--rund2);padding:22px 16px;text-align:center;cursor:pointer;background:var(--flaeche);transition:border-color .15s,background .15s;display:flex;flex-direction:column;gap:4px;align-items:center}
.de-zone:hover,.de-zone:focus-visible,.de-zone.an{border-color:var(--akz);background:var(--akz-t)}
.de-zone.de-schmal{flex-direction:row;flex-wrap:wrap;justify-content:center;padding:10px 14px;margin:0 0 12px;gap:4px}
.de-liste{margin-top:10px;display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.de-datei{display:flex;align-items:center;gap:10px;padding:5px 2px;border-bottom:1px solid var(--linie);min-width:0}
.de-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:52%}
.pe-laeuft{color:var(--text2);font-style:italic}
.pe-wirkung summary{font-weight:600;cursor:pointer}
.pe-wirkung>div{margin:3px 0 0 4px}
.pe-anhang .merker{margin-left:2px}
.fg-wirkung{color:var(--text2)}
/* 3.33.0: Prüfbericht – Darstellung */
.merker{white-space:nowrap}
.rz-aufbau div{white-space:nowrap;line-height:1.45}
.bestandblatt th{white-space:normal;vertical-align:bottom;line-height:1.3}
.bestandblatt td,.bestandblatt th{padding-left:9px;padding-right:9px}
/* 3.33.1: Haken in den Planzeilen – Abstand zum Punkt und mittig zur Schrift.
   Die allgemeine Haken-Regel (margin:2px 0 0, fuer Flex-Zeilen) hatte hier
   den Abstand genommen und den Haken nach oben versetzt. */
.planblatt td > input.haken{margin:0 9px 0 0;vertical-align:middle;position:relative;top:-1px}
.planblatt td > .punkt{vertical-align:middle;position:relative;top:-1px}
/* 3.34.0: Kalkulation – Rezepturen getrennt vom Mischungsverhältnis */
.ka-misch{padding:6px 0;border-bottom:1px solid var(--linie)}
.ka-misch:last-of-type{border-bottom:none}
.ka-mischzeile{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end}
.ka-summe{display:flex;flex-direction:column;gap:2px;padding:4px 10px;border-radius:var(--rund2);background:var(--flaeche2)}
.ka-summe.ok{background:color-mix(in srgb,#2f8a5f 14%,transparent)}
.ka-summe.falsch{background:color-mix(in srgb,var(--fehler) 12%,transparent)}
.ka-gesperrt .ka-mischzeile{opacity:.6}
.ka-preisquelle{color:var(--text3);font-size:11px;white-space:nowrap;max-width:130px;overflow:hidden;text-overflow:ellipsis;margin-left:auto}
.ka-vorschaugitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 16px;margin-top:6px}
.ka-vorschau td,.ka-vorschau th{padding:3px 6px}
.ka-rezkarte .ka-rezkopf{display:flex;align-items:center;gap:8px}
.ord-diff{width:100%;color:var(--text2);margin:2px 0 4px;line-height:1.5}

/* 3.36.0: Preiseinheit entscheiden */
.pe-deutungen { display: flex; flex-direction: column; gap: 6px; }
.pe-deutung { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--linie); border-radius: var(--rund2); cursor: pointer; }
.pe-deutung:has(input:checked) { border-color: var(--akzent, #2bb3c0); background: color-mix(in srgb, var(--akzent, #2bb3c0) 8%, transparent); }
.pe-deutung input { margin-top: 3px; flex: none; }
tr.pe-offen td { background: color-mix(in srgb, #f2c94c 12%, transparent); }

/* 3.37.0: Kopfzeile – Knopfgruppen, die zusammenbleiben */
.kopfknoepfe{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kopfsymbole{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}
@media (max-width:1200px){.kopfzeile{row-gap:6px}.kopfknoepfe{width:100%;order:3}}
/* 3.37.0: Aktionsspalte bleibt am rechten Rand sichtbar, auch wenn die Tabelle breiter als die Karte ist */
table.aktion-fest th:last-child,table.aktion-fest td:last-child{position:sticky;right:0;background:var(--karte,var(--flaeche));
  box-shadow:-6px 0 8px -6px rgba(0,0,0,.18)}
table.aktion-fest tr:hover td:last-child{background:var(--karte,var(--flaeche))}
/* lange Namen abschneiden statt überlaufen */
td.kurz,th.kurz{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 3.42.0 Rezeptliste, Zuordnen & Austauschen */
table.rz-liste td.rz-name{min-width:220px}
table.rz-liste td.rz-name .klein{margin-top:1px}
table.rz-liste td.rz-stand{white-space:nowrap;width:1%;cursor:default}
table.rz-liste .grau,.rw-tabelle .grau{color:var(--text3)}
.rw-frei{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rw-frei .klein{color:var(--text2)}
.k.rw-neuer{border-color:var(--akz);color:var(--akz)}
.rw-hinweise{display:grid;gap:8px;margin:0 0 14px}
.rw-hinweis{padding:10px 16px;margin:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-left:4px solid var(--akz)}
table.rw-tabelle{width:100%;border-collapse:collapse}
table.rw-tabelle th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);padding:6px 10px;border-bottom:1px solid var(--linie)}
table.rw-tabelle td{padding:8px 10px;border-bottom:1px solid var(--linie);vertical-align:top}
table.rw-tabelle td.n,table.rw-tabelle th.n{text-align:right;white-space:nowrap}
table.rw-tabelle tr.rw-aktuell td{background:color-mix(in srgb,var(--zub) 6%,transparent)}
ul.rw-diff{margin:6px 0 0;padding-left:16px;font-size:12px;color:var(--text2)}
ul.rw-diff li{margin:1px 0}

/* 3.43.0 Einkaufsliste: Sortenfilter */
.ek-sorten .ek-tag{font-weight:400}
.ek-sorten .ek-tag b{font-weight:600;color:var(--text3)}
.ek-sorten .ek-tag.aus{text-decoration:none;opacity:.6;border-style:solid}
.ek-sorten .ek-tag.gewaehlt{background:var(--akz-t);border-color:var(--akz);color:var(--text)}

/* 3.45.0 Zubereitungen an der Eiszeile */
.merker.zubchip{margin-left:6px;font-size:11px;padding:0 6px;cursor:default}
button.merker.zubchip{cursor:pointer}

/* 3.45.0 Datenimport */
.di-karte{padding:14px 18px;margin:0 0 14px}
.di-kopf{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.di-kopf h3{margin:0;font-size:15px}
.di-dateien{margin:0;padding-left:18px;line-height:1.8}
.di-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.di-kachel{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border:1px solid var(--linie);
  border-radius:var(--rund2,8px);background:var(--flaeche);cursor:pointer;text-align:left;border-left-width:4px}
.di-kachel b{font-size:20px}
.di-kachel span{font-size:12px;color:var(--text2)}
.di-kachel[aria-pressed="true"]{outline:2px solid var(--akz);outline-offset:-1px}
.di-kachel.gruen{border-left-color:#2f8a5f}.di-kachel.blau{border-left-color:var(--akz)}
.di-kachel.gelb{border-left-color:var(--warn)}.di-kachel.grau{border-left-color:var(--linie)}
.di-tabelle{max-height:62vh;overflow:auto;border:1px solid var(--linie);border-radius:var(--rund2,8px)}
.di-tabelle td{vertical-align:top}
.di-tabelle tr.di-an td{background:color-mix(in srgb,var(--akz) 5%,transparent)}
.di-problem{color:var(--warn);max-width:340px}
.di-zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.di-zahlen div{display:flex;flex-direction:column}
.di-zahlen b{font-size:18px}
.di-ok{border-left:4px solid #2f8a5f}
.di-tabelle td{white-space:normal}
.di-tabelle td.n{white-space:nowrap}
.di-tabelle td:nth-child(3){min-width:240px;max-width:340px}
.di-tabelle td:nth-child(8){min-width:260px;max-width:360px}
.di-tabelle td:nth-child(2){min-width:140px;max-width:200px}
.di-tabelle td:not(.n), .di-tabelle td:not(.n) div{white-space:normal !important;overflow-wrap:anywhere}
.di-tabelle input.zelle{border:1px solid var(--linie);border-radius:4px;background:var(--flaeche)}
.di-tabelle table{table-layout:auto;width:100%}

/* 3.46.0 Sammel-PDF im Posteingang */
.pe-beleg { border: 1px solid var(--linie, #ddd); border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.pe-beleg > summary { display: grid; grid-template-columns: 120px 90px 120px 1fr 80px 150px; gap: 8px; align-items: center; cursor: pointer; }
.pe-beleg-pruefen { border-color: #e0a0a0; }
.pe-beleg .gruen { color: #2e7d32; }

/* 3.46.0 Zentraler Import */
.iz-liste { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.iz-datei { border: 1px solid var(--linie, #ddd); border-radius: 8px; padding: 8px 10px; }
.iz-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.iz-kopf select { max-width: 280px; }

/* 3.47.0 Zutat ersetzen */
.ze-rezept { border: 1px solid var(--linie, #ddd); border-radius: 8px; padding: 6px 10px; margin: 6px 0; }
.ze-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ze-nutzer { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0 26px; }
.ze-nutzer label { display: flex; gap: 4px; align-items: center; }

/* 3.47.0 Postfach-Rückfragen */
.pe-fragen { padding: 10px 14px; margin: 10px 0; border-left: 3px solid var(--warn, #c90); }
.pe-frage { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie2, #eee); flex-wrap: wrap; }
.pe-frage-wahl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pe-frage > div:first-child { flex: 1 1 420px; min-width: 0; }
.pe-frage-wahl select { width: auto; max-width: 230px; min-width: 0; }
.pe-kat { color: var(--text2, #666); margin-bottom: 2px; }
/* 3.54.0: Rechenweg der Mixplanung - Spalten nach Inhalt, nichts abgeschnitten */
table.mp-rw{width:100%;border:1px solid var(--linie);border-radius:var(--rund2);border-collapse:separate;border-spacing:0;font-size:13px}
table.mp-rw th,table.mp-rw td{padding:6px 10px;white-space:nowrap;border-bottom:1px solid var(--linie);text-align:left}
table.mp-rw th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);background:var(--flaeche2,transparent)}
table.mp-rw .n{text-align:right;font-variant-numeric:tabular-nums}
table.mp-rw tr:last-child td{border-bottom:0}

/* 3.55.0: Mustereinplanung */
.mu-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 14px; }
.mu-kachel { text-align: left; padding: 10px 12px; cursor: pointer; border: 1px solid var(--linie2); }
.mu-kachel.an { border-color: var(--eis); box-shadow: 0 0 0 1px var(--eis) inset; }
.mu-zahl { font-size: 22px; font-weight: 700; margin-top: 2px; }
.mu-zahl.rot { color: var(--fehler); }
.mu-zahl.gruen { color: var(--ok, #2e7d32); }
.mu-gruppe { padding: 10px 14px; margin-bottom: 12px; }
.mu-gruppe h3 { margin: 0 0 8px; font-size: 14px; display: flex; align-items: center; }
.mu-gruppe.heute { border-left: 3px solid var(--eis); }
.mu-zeile { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linie2); flex-wrap: wrap; }
.mu-zeile:first-of-type { border-top: 0; }
.mu-zeile.ueber .mu-haupt b { color: var(--fehler); }
.mu-haupt { flex: 1 1 320px; min-width: 0; line-height: 1.5; }
.mu-knoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.plan-muster { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; padding: 1px 6px; border-radius: 9px;
  background: var(--flaeche2, rgba(0,0,0,.06)); cursor: pointer; border: 0; }
/* 3.63.0: Muster im Monatsplan – 3.71.0: alle Muster eines Tages in EINER schmalen Zeile */
tr.musterzeile td { padding: 2px 8px; font-size: 13px; background: var(--flaeche2, rgba(0,0,0,.04)); border-left: 3px solid var(--akzent, #6b8afd); }
.musterzeile-knopf { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.musterzeile-eins { display: inline-flex; gap: 6px; align-items: center; background: none; border: 0; padding: 1px 0;
  cursor: pointer; color: inherit; font: inherit; }
.musterzeile-eins:hover .musterzeile-titel { text-decoration: underline; }
.musterzeile-titel { font-weight: 500; }
.mu-punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* 3.55.1: DUO – ein Mix je Komponente */
.mp-duomix { margin: 4px 0 6px; border-top: 1px dashed var(--linie2); }
.mp-duozeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 0 6px 18px; border-bottom: 1px dashed var(--linie2); }
.mp-duoname { min-width: 220px; }

/* 3.65.0: Verpackungsartikel, Etiketten zuweisen, Wareneinsatz je Gebinde */
dialog.rueckfrage.vp-wahldialog { max-width: min(680px, 94vw); width: min(680px, 94vw); }
.vp-wahlfenster input[type=search] { width: 100%; box-sizing: border-box; }
.vp-wahlfenster .knopfreihe { flex-wrap: wrap; }
.vp-wahlliste { max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.vp-wahl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 7px 10px;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); color: var(--text); font: inherit; cursor: pointer; }
.vp-wahl:hover { background: var(--flaeche2); }
.vp-wahl.an { border-color: var(--akz); box-shadow: inset 3px 0 0 var(--akz); }
.vp-teiltab td { vertical-align: middle; }
.we-haken { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 6px 0 2px; }
.we-haken .schalterzeile { margin: 0; }
.fg-kand { margin: 2px 0 4px; }
.et-kopf { padding: 10px 12px; margin: 0 0 10px; }
.et-preis { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 0 0 8px; }
.et-preis .feld { max-width: 360px; }
.et-spalten { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 16px; align-items: start; }
.et-links { max-height: 58vh; overflow: auto; border-right: 1px solid var(--linie2); padding-right: 10px; }
.et-links input[type=search] { width: 100%; margin-bottom: 8px; }
.et-vorschlag { background: var(--akz-t); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; }
.et-kunde { margin: 2px 0; }
.et-rechts { max-height: 58vh; overflow: auto; }
@media (max-width: 1100px) { .et-spalten { grid-template-columns: 1fr; } .et-links { border-right: 0; max-height: 34vh; } }

/* 3.67.0: Ladebalken oben, solange eine Seite länger als ~0,35 s lädt */
body.laedt::before {
  content: ""; position: fixed; top: 0; left: 0; height: 3px; width: 40%; z-index: 10000;
  background: var(--akz); border-radius: 0 2px 2px 0; animation: pp-laedt 1.1s ease-in-out infinite;
}
@keyframes pp-laedt { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { body.laedt::before { animation: none; left: 0; width: 100%; opacity: .6; } }

/* 3.76.0: Anmeldung und Zugänge */
.anmeldeschirm { position: fixed; inset: 0; z-index: 20000; background: var(--grund); display: flex;
  align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.anmeldekarte { width: 100%; max-width: 420px; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 12px; box-shadow: var(--schatten); padding: 24px 26px; }
.anmeldekarte h2 { margin: 4px 0 14px; font-size: 19px; }
.anmeldekarte label.feld { margin-bottom: 10px; }
.anmeldekarte input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; }
.anmeldelogo { font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--akz); }
.anmeldefehler { color: var(--fehler); font-size: 13px; margin: 0 0 10px; }
.anmeldefehler:empty { margin: 0; }
.notfallcode { font: 600 22px/1.4 ui-monospace, Consolas, monospace; letter-spacing: 2px; text-align: center;
  padding: 14px; margin: 12px 0; border: 2px dashed var(--akz); border-radius: 8px; background: var(--akz-t); }
nav .nutzerbox { margin-top: auto; padding: 10px 10px 4px; display: flex; flex-wrap: wrap; gap: 2px 12px;
  align-items: baseline; font-size: 12px; border-top: 1px solid var(--linie); }
nav .nutzerbox + .fuss { margin-top: 0; border-top: 0; padding-top: 4px; }
nav .nutzerbox .nutzername { flex: 1 0 100%; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav .nutzerbox button.linkknopf { width: auto; min-height: 0; padding: 0; margin: 0; font-size: 12px; font-weight: 500; color: var(--text2); }
.hinweis.nurlesen { margin: 0 0 12px; }
table.zugangsrechte td.n, table.zugangsrechte th.n { text-align: center; width: 92px; }
table.zugangsrechte input[type="radio"] { width: 16px; height: 16px; min-height: 0; accent-color: var(--akz); }
tr.grau td { color: var(--text3); }
@media print {
  .anmeldeschirm { position: static; background: #fff; }
  body:has(.anmeldeschirm) > :not(.anmeldeschirm) { display: none !important; }
  .anmeldekarte { box-shadow: none; border: 0; }
  .anmeldekarte button, .anmeldekarte .schalterzeile { display: none !important; }
}