/*
  Datei: server/pb_public/gestaltung.css
  Zweck: Gemeinsame Gestaltung "Kiste und Waage" fuer alle Web-Seiten der Foodcoop (Mitglieder, Bestellung, Admin).
         Farben hell/dunkel, hoher Kontrast nach Geraet, Schrift, Abstaende, Bausteine (Etikett, Knoepfe, Reiter,
         Baender, Tabellen, Menge, Vorlieben, Druck).
  Zielgeraet: Handys der Mitglieder, Rechner des Bestellers und Admins (Browser).
  Eingaben: keine; die Seiten binden die Datei mit <link rel="stylesheet" href="gestaltung.css"> ein.
  Ausgaben: CSS-Variablen (--grund, --akzent, --a16 ...) und Klassen (.etikett-hh, .knopf, .reiter, .band ...).
  Abhaengigkeiten: keine (Systemschrift, keine Schriftdatei, keine Fremd-Server, CLAUDE.md Punkt 1).
  Herkunft: woertlich Token-Block ("app-standards tokens", Abstaende, Groessen, Schriftgroessen) plus Block
            "foodcoop gestaltung" (Farben, Bausteine) aus den freigegebenen Skizzen
            prototyp/mitglieder.html, bestelluebersicht.html, admin.html, wiegen.html (in allen vier gleich).
  Vertrag: docs/vertrag/V5-gestaltung.md Stand 2.0 (Werte, Kontraste, Bausteine). Hoher Kontrast nur nach Geraet
           (prefers-contrast: more), kein eigener Schalter (Nutzer 15.10.2026, V5 Abschnitt 8).
  Belege: PLAN 7 (Q-116, Q-117, Q-119, Q-160, Q-175 bis Q-178); Werte und Messungen in V5.
  Pflege: Aenderungen nur ueber K mit neuer V5-Version; danach Skizzen und diese Datei gleich halten.
  Flex-gap: `gap` in Flex-Behaeltern kennt Safari erst ab iOS 14.5 (Q-304, Q-305); @supports (gap) erkennt das nicht
          (Q-306). Auf iOS 14.0 bis 14.4 fehlen daher nur Abstaende (Ableitung); hingenommen, kein Umbau (Nutzer 19.10.2026).
*/
/* app-standards tokens START: nicht von Hand aendern */
/* erzeugt aus tokens, Stile referenz, clean; nicht von Hand aendern */
:root {
  --schrift: "Google Sans Flex", system-ui, -apple-system, Roboto, sans-serif;
  --typo-zahl-held: 400 3.5rem/1.0714 var(--schrift);
  --laufweite-zahl-held: -0.02em;
  --typo-titel-gross: 600 2.125rem/1.2059 var(--schrift);
  --laufweite-titel-gross: -0.02em;
  --typo-titel: 600 1.75rem/1.2143 var(--schrift);
  --laufweite-titel: -0.015em;
  --typo-titel-klein: 600 1.375rem/1.2727 var(--schrift);
  --laufweite-titel-klein: -0.01em;
  --typo-text: 400 1.0625rem/1.2941 var(--schrift);
  --laufweite-text: 0px;
  --typo-text-betont: 600 1.0625rem/1.2941 var(--schrift);
  --laufweite-text-betont: 0px;
  --typo-text-klein: 400 0.9375rem/1.3333 var(--schrift);
  --laufweite-text-klein: 0px;
  --typo-hinweis: 400 0.8125rem/1.3846 var(--schrift);
  --laufweite-hinweis: 0px;
  --typo-mini: 500 0.6875rem/1.1818 var(--schrift);
  --laufweite-mini: 0px;
  --a4: 4px;
  --a8: 8px;
  --a12: 12px;
  --a16: 16px;
  --a20: 20px;
  --a24: 24px;
  --a32: 32px;
  --a40: 40px;
  --a48: 48px;
  --a64: 64px;
  --rand-seite: 20px;
  --rand-seite-schmal: 16px;
  --groesse-tippflaeche: 44px;
  --groesse-knopf: 52px;
  --groesse-kritisch: 56px;
  --groesse-notfall: 64px;
  --groesse-zeile: 52px;
  --groesse-chip: 32px;
  --radius-klein: 8px;
  --radius-mittel: 16px;
  --radius-gross: 28px;
  --radius-pille: 999px;
  --feder-schnell-dauer: 225ms;
  --feder-schnell: linear(0.0000 0.0%, 0.0403 3.7%, 0.1342 7.4%, 0.2516 11.1%, 0.3739 14.8%, 0.4898 18.5%, 0.5936 22.2%, 0.6828 25.9%, 0.7571 29.6%, 0.8174 33.3%, 0.8653 37.0%, 0.9026 40.7%, 0.9310 44.4%, 0.9523 48.1%, 0.9680 51.9%, 0.9793 55.6%, 0.9873 59.3%, 0.9928 63.0%, 0.9965 66.7%, 0.9988 70.4%, 1.0002 74.1%, 1.0010 77.8%, 1.0014 81.5%, 1.0015 85.2%, 1.0015 88.9%, 1.0013 92.6%, 1.0012 96.3%, 1.0010 100.0%, 1);
  --feder-dauer: 317ms;
  --feder: linear(0.0000 0.0%, 0.0449 3.9%, 0.1476 7.9%, 0.2739 11.8%, 0.4029 15.8%, 0.5227 19.7%, 0.6278 23.7%, 0.7161 27.6%, 0.7880 31.6%, 0.8450 35.5%, 0.8891 39.5%, 0.9224 43.4%, 0.9472 47.4%, 0.9651 51.3%, 0.9779 55.3%, 0.9867 59.2%, 0.9927 63.2%, 0.9965 67.1%, 0.9990 71.1%, 1.0004 75.0%, 1.0011 78.9%, 1.0015 82.9%, 1.0015 86.8%, 1.0014 90.8%, 1.0013 94.7%, 1.0011 98.7%, 1);
  --feder-langsam-dauer: 487ms;
  --feder-langsam: linear(0.0000 0.0%, 0.0351 3.4%, 0.1182 6.8%, 0.2246 10.3%, 0.3379 13.7%, 0.4480 17.1%, 0.5491 20.5%, 0.6384 23.9%, 0.7148 27.4%, 0.7786 30.8%, 0.8309 34.2%, 0.8729 37.6%, 0.9061 41.0%, 0.9319 44.4%, 0.9516 47.9%, 0.9665 51.3%, 0.9775 54.7%, 0.9855 58.1%, 0.9912 61.5%, 0.9951 65.0%, 0.9978 68.4%, 0.9995 71.8%, 1.0006 75.2%, 1.0012 78.6%, 1.0015 82.1%, 1.0015 85.5%, 1.0015 88.9%, 1.0013 92.3%, 1.0012 95.7%, 1.0010 99.1%, 1);
  --effekt-schnell-dauer: 150ms;
  --effekt-schnell: linear(0.0000 0.0%, 0.0278 2.8%, 0.0944 5.6%, 0.1807 8.3%, 0.2743 11.1%, 0.3676 13.9%, 0.4558 16.7%, 0.5366 19.4%, 0.6086 22.2%, 0.6718 25.0%, 0.7265 27.8%, 0.7732 30.6%, 0.8128 33.3%, 0.8461 36.1%, 0.8739 38.9%, 0.8970 41.7%, 0.9161 44.4%, 0.9319 47.2%, 0.9448 50.0%, 0.9553 52.8%, 0.9639 55.6%, 0.9709 58.3%, 0.9766 61.1%, 0.9812 63.9%, 0.9849 66.7%, 0.9879 69.4%, 0.9903 72.2%, 0.9923 75.0%, 0.9938 77.8%, 0.9951 80.6%, 0.9961 83.3%, 0.9969 86.1%, 0.9975 88.9%, 0.9980 91.7%, 0.9984 94.4%, 0.9988 97.2%, 0.9990 100.0%, 1);
  --effekt-dauer: 233ms;
  --effekt: linear(0.0000 0.0%, 0.0446 3.6%, 0.1443 7.1%, 0.2642 10.7%, 0.3849 14.3%, 0.4963 17.9%, 0.5940 21.4%, 0.6768 25.0%, 0.7452 28.6%, 0.8009 32.1%, 0.8454 35.7%, 0.8807 39.3%, 0.9084 42.9%, 0.9300 46.4%, 0.9467 50.0%, 0.9596 53.6%, 0.9694 57.1%, 0.9769 60.7%, 0.9826 64.3%, 0.9870 67.9%, 0.9902 71.4%, 0.9927 75.0%, 0.9946 78.6%, 0.9959 82.1%, 0.9970 85.7%, 0.9978 89.3%, 0.9983 92.9%, 0.9988 96.4%, 0.9991 100.0%, 1);
  --effekt-langsam-dauer: 329ms;
  --effekt-langsam: linear(0.0000 0.0%, 0.0496 3.8%, 0.1583 7.6%, 0.2865 11.4%, 0.4131 15.2%, 0.5275 19.0%, 0.6258 22.8%, 0.7075 26.6%, 0.7737 30.4%, 0.8264 34.2%, 0.8678 38.0%, 0.8999 41.8%, 0.9247 45.6%, 0.9435 49.4%, 0.9578 53.2%, 0.9686 57.0%, 0.9767 60.8%, 0.9828 64.6%, 0.9873 68.4%, 0.9907 72.2%, 0.9931 75.9%, 0.9950 79.7%, 0.9963 83.5%, 0.9973 87.3%, 0.9980 91.1%, 0.9986 94.9%, 0.9990 98.7%, 1);
}
/* Stil referenz */
:root {
  --glas-filter: blur(24px) saturate(1.6);
  --rahmen: 1px;
  --schatten-e2: 0 1px 2px var(--schatten), 0 12px 32px -16px var(--schatten);
  --kantenglanz: inset 0 1px 0 var(--glas-rand);
  --grund: #F3F4F2;
  --flaeche: #FFFFFF;
  --flaeche-2: #E9ECE9;
  --linie: #16191A1F;
  --rand-feld: #7C8486;
  --text: #16191A;
  --text-2: #434A4C;
  --text-3: #5C6466;
  --akzent: #1D6656;
  --auf-akzent: #FFFFFF;
  --akzent-weich: #DCEDE7;
  --fokus: #1D6656;
  --glas: #FFFFFFC7;
  --glas-rand: #FFFFFFCC;
  --schatten: #16191A33;
  --erfolg: #1E7045;
  --erfolg-weich: #DDF0E4;
  --hinweis: #1F5AA6;
  --hinweis-weich: #DDE8F7;
  --warnung: #825400;
  --warnung-weich: #F7EAD0;
  --alarm: #B3261E;
  --alarm-weich: #F8DEDB;
  --auf-alarm: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --grund: #0E1112;
  --flaeche: #181C1D;
  --flaeche-2: #232829;
  --linie: #EEF1F026;
  --rand-feld: #7E878A;
  --text: #EEF1F0;
  --text-2: #C3C9CA;
  --text-3: #9EA6A8;
  --akzent: #7CC8B5;
  --auf-akzent: #0B1A16;
  --akzent-weich: #1C3A33;
  --fokus: #7CC8B5;
  --glas: #262B2DC7;
  --glas-rand: #FFFFFF2E;
  --schatten: #00000080;
  --erfolg: #72CF98;
  --erfolg-weich: #173A27;
  --hinweis: #8DB6F5;
  --hinweis-weich: #1B2D48;
  --warnung: #F0BA55;
  --warnung-weich: #3A2C12;
  --alarm: #F2938A;
  --alarm-weich: #43201D;
  --auf-alarm: #240A08;
  color-scheme: dark;
}
}
:root[data-theme="dark"] {
  --grund: #0E1112;
  --flaeche: #181C1D;
  --flaeche-2: #232829;
  --linie: #EEF1F026;
  --rand-feld: #7E878A;
  --text: #EEF1F0;
  --text-2: #C3C9CA;
  --text-3: #9EA6A8;
  --akzent: #7CC8B5;
  --auf-akzent: #0B1A16;
  --akzent-weich: #1C3A33;
  --fokus: #7CC8B5;
  --glas: #262B2DC7;
  --glas-rand: #FFFFFF2E;
  --schatten: #00000080;
  --erfolg: #72CF98;
  --erfolg-weich: #173A27;
  --hinweis: #8DB6F5;
  --hinweis-weich: #1B2D48;
  --warnung: #F0BA55;
  --warnung-weich: #3A2C12;
  --alarm: #F2938A;
  --alarm-weich: #43201D;
  --auf-alarm: #240A08;
  color-scheme: dark;
}
@media (prefers-contrast: more) {
:root {
  --text-2: #262B2D;
  --text-3: #30373A;
  --rand-feld: #3B4244;
  --akzent: #0E4A3E;
  --fokus: #0E4A3E;
  --glas: #FFFFFF;
  --linie: #16191A66;
  --erfolg: #135232;
  --hinweis: #163F78;
  --warnung: #5A3A00;
  --alarm: #8A1C16;
}
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --text-2: #E1E6E6;
  --text-3: #CDD3D4;
  --rand-feld: #B7C0C2;
  --akzent: #A6E2D2;
  --fokus: #A6E2D2;
  --glas: #181C1D;
  --linie: #EEF1F066;
  --erfolg: #A3E6BE;
  --hinweis: #BBD3FA;
  --warnung: #F8D594;
  --alarm: #F9BDB6;
}
}
:root[data-kontrast="hoch"] {
  --text-2: #262B2D;
  --text-3: #30373A;
  --rand-feld: #3B4244;
  --akzent: #0E4A3E;
  --fokus: #0E4A3E;
  --glas: #FFFFFF;
  --linie: #16191A66;
  --erfolg: #135232;
  --hinweis: #163F78;
  --warnung: #5A3A00;
  --alarm: #8A1C16;
}
@media (prefers-color-scheme: dark) {
:root[data-kontrast="hoch"]:not([data-theme="light"]) {
  --text-2: #E1E6E6;
  --text-3: #CDD3D4;
  --rand-feld: #B7C0C2;
  --akzent: #A6E2D2;
  --fokus: #A6E2D2;
  --glas: #181C1D;
  --linie: #EEF1F066;
  --erfolg: #A3E6BE;
  --hinweis: #BBD3FA;
  --warnung: #F8D594;
  --alarm: #F9BDB6;
}
}
:root[data-theme="dark"][data-kontrast="hoch"] {
  --text-2: #E1E6E6;
  --text-3: #CDD3D4;
  --rand-feld: #B7C0C2;
  --akzent: #A6E2D2;
  --fokus: #A6E2D2;
  --glas: #181C1D;
  --linie: #EEF1F066;
  --erfolg: #A3E6BE;
  --hinweis: #BBD3FA;
  --warnung: #F8D594;
  --alarm: #F9BDB6;
}
/* Stil clean */
:root[data-stil="clean"] {
  --glas-filter: blur(28px) saturate(1.6);
  --rahmen: 0.5px;
  --schatten-e2: 0 1px 2px var(--schatten), 0 12px 32px -16px var(--schatten);
  --kantenglanz: inset 0 1px 0 var(--glas-rand);
  --grund: #F4F2EE;
  --flaeche: #FFFEFB;
  --flaeche-2: #EDEAE5;
  --linie: #1C1A171A;
  --rand-feld: #857E75;
  --text: #1C1A17;
  --text-2: #4A453F;
  --text-3: #625C55;
  --akzent: #1C1A17;
  --auf-akzent: #FBFAF7;
  --akzent-weich: #ECE8E2;
  --fokus: #1C1A17;
  --glas: #FBFAF78C;
  --glas-rand: #FFFFFFB3;
  --schatten: #1C1A1733;
  --erfolg: #1E7045;
  --erfolg-weich: #DDF0E4;
  --hinweis: #1F5AA6;
  --hinweis-weich: #DDE8F7;
  --warnung: #825400;
  --warnung-weich: #F7EAD0;
  --alarm: #B3261E;
  --alarm-weich: #F8DEDB;
  --auf-alarm: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root[data-stil="clean"]:not([data-theme="light"]) {
  --grund: #121110;
  --flaeche: #1C1A18;
  --flaeche-2: #272421;
  --linie: #F2EFEA24;
  --rand-feld: #8A837B;
  --text: #F2EFEA;
  --text-2: #CBC5BD;
  --text-3: #A69F96;
  --akzent: #F2EFEA;
  --auf-akzent: #161412;
  --akzent-weich: #34302C;
  --fokus: #F2EFEA;
  --glas: #2A2724B3;
  --glas-rand: #FFFFFF29;
  --schatten: #00000080;
  --erfolg: #72CF98;
  --erfolg-weich: #173A27;
  --hinweis: #8DB6F5;
  --hinweis-weich: #1B2D48;
  --warnung: #F0BA55;
  --warnung-weich: #3A2C12;
  --alarm: #F2938A;
  --alarm-weich: #43201D;
  --auf-alarm: #240A08;
  color-scheme: dark;
}
}
:root[data-stil="clean"][data-theme="dark"] {
  --grund: #121110;
  --flaeche: #1C1A18;
  --flaeche-2: #272421;
  --linie: #F2EFEA24;
  --rand-feld: #8A837B;
  --text: #F2EFEA;
  --text-2: #CBC5BD;
  --text-3: #A69F96;
  --akzent: #F2EFEA;
  --auf-akzent: #161412;
  --akzent-weich: #34302C;
  --fokus: #F2EFEA;
  --glas: #2A2724B3;
  --glas-rand: #FFFFFF29;
  --schatten: #00000080;
  --erfolg: #72CF98;
  --erfolg-weich: #173A27;
  --hinweis: #8DB6F5;
  --hinweis-weich: #1B2D48;
  --warnung: #F0BA55;
  --warnung-weich: #3A2C12;
  --alarm: #F2938A;
  --alarm-weich: #43201D;
  --auf-alarm: #240A08;
  color-scheme: dark;
}
@media (prefers-contrast: more) {
:root[data-stil="clean"] {
  --text-2: #2B2723;
  --text-3: #35302B;
  --rand-feld: #3E3934;
  --glas: #FFFEFB;
  --linie: #1C1A1766;
  --erfolg: #135232;
  --hinweis: #163F78;
  --warnung: #5A3A00;
  --alarm: #8A1C16;
}
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
:root[data-stil="clean"]:not([data-theme="light"]) {
  --text-2: #E6E1DA;
  --text-3: #D2CCC4;
  --rand-feld: #BDB6AD;
  --glas: #1C1A18;
  --linie: #F2EFEA66;
  --erfolg: #A3E6BE;
  --hinweis: #BBD3FA;
  --warnung: #F8D594;
  --alarm: #F9BDB6;
}
}
:root[data-stil="clean"][data-kontrast="hoch"] {
  --text-2: #2B2723;
  --text-3: #35302B;
  --rand-feld: #3E3934;
  --glas: #FFFEFB;
  --linie: #1C1A1766;
  --erfolg: #135232;
  --hinweis: #163F78;
  --warnung: #5A3A00;
  --alarm: #8A1C16;
}
@media (prefers-color-scheme: dark) {
:root[data-stil="clean"][data-kontrast="hoch"]:not([data-theme="light"]) {
  --text-2: #E6E1DA;
  --text-3: #D2CCC4;
  --rand-feld: #BDB6AD;
  --glas: #1C1A18;
  --linie: #F2EFEA66;
  --erfolg: #A3E6BE;
  --hinweis: #BBD3FA;
  --warnung: #F8D594;
  --alarm: #F9BDB6;
}
}
:root[data-stil="clean"][data-theme="dark"][data-kontrast="hoch"] {
  --text-2: #E6E1DA;
  --text-3: #D2CCC4;
  --rand-feld: #BDB6AD;
  --glas: #1C1A18;
  --linie: #F2EFEA66;
  --erfolg: #A3E6BE;
  --hinweis: #BBD3FA;
  --warnung: #F8D594;
  --alarm: #F9BDB6;
}
:root[data-kontrast="hoch"], :root[data-transparenz="aus"] { --glas-filter: none !important; }
:root[data-kontrast="hoch"], :root[data-transparenz="aus"] { --glas: var(--flaeche) !important; }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root { --glas-filter: none !important; --glas: var(--flaeche) !important; } }
/* app-standards tokens ENDE */
/* foodcoop gestaltung START: V5 2.0, gleich in allen Skizzen (AUF-2-W2) */
/*
  Foodcoop-Gestaltung 2.0 "Kiste und Waage" (Vertrag docs/vertrag/V5-gestaltung.md).
  Ueberschreibt die Farbrollen des Token-Blocks mit eigenen Foodcoop-Farben, hell und dunkel,
  und legt die gemeinsamen Bausteine fest. Kontrast gemessen (V5 Abschnitt 4).
*/
:root {
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;   /* Systemschrift (Nutzer 15.10.2026) */
  --grund: #F5F6F2;        /* Kalkweiss */
  --flaeche: #FFFFFF;
  --flaeche-2: #EBEDE6;
  --linie: #1B1F1C1F;
  --linie-stark: #1B1F1C38;
  --rand-feld: #7A837C;
  --text: #1B1F1C;         /* Tinte */
  --text-2: #434B45;
  --text-3: #5D665F;
  --akzent: #2E6B45;       /* Lauchgruen */
  --auf-akzent: #FFFFFF;
  --akzent-weich: #DDEDE2;
  --fokus: #2E6B45;
  --erfolg: #2A6A40;
  --erfolg-weich: #DDEDE2;
  --warnung: #9A5208;      /* Kuerbis */
  --warnung-weich: #FBEBD9;
  --alarm: #B42318;
  --alarm-weich: #FBE4E1;
  --auf-alarm: #FFFFFF;
  --hinweis: #1F5AA6;
  --hinweis-weich: #DDE8F7;
  --sonder: #9C2F4E;       /* Rote Bete: nur Sonderwuensche und Rabatt */
  --sonder-weich: #F6E1E8;
  --schatten-schwebend: 0 1px 2px #1B1F1C1A, 0 8px 24px -12px #1B1F1C40;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #121513; --flaeche: #1A1E1B; --flaeche-2: #252A26;
    --linie: #ECEFEA26; --linie-stark: #ECEFEA45; --rand-feld: #828B84;
    --text: #ECEFEA; --text-2: #C2C8C2; --text-3: #9AA39C;
    --akzent: #7FC79A; --auf-akzent: #0D1F14; --akzent-weich: #1E3A28; --fokus: #7FC79A;
    --erfolg: #7FD3A0; --erfolg-weich: #1E3A28;
    --warnung: #E9A55B; --warnung-weich: #3A2814;
    --alarm: #F28B82; --alarm-weich: #45201C; --auf-alarm: #240A08;
    --hinweis: #8DB6F5; --hinweis-weich: #1B2D48;
    --sonder: #E792B0; --sonder-weich: #3D1C27;
    --schatten-schwebend: 0 1px 2px #00000080, 0 8px 24px -12px #000000A0;
    color-scheme: dark;
  }
}

/* gleiche Werte, wenn eine Seite das Thema ausdruecklich setzt (Token-Block hat dafuer eigene Farben) */
:root[data-theme="dark"] {
    --grund: #121513; --flaeche: #1A1E1B; --flaeche-2: #252A26;
    --linie: #ECEFEA26; --linie-stark: #ECEFEA45; --rand-feld: #828B84;
    --text: #ECEFEA; --text-2: #C2C8C2; --text-3: #9AA39C;
    --akzent: #7FC79A; --auf-akzent: #0D1F14; --akzent-weich: #1E3A28; --fokus: #7FC79A;
    --erfolg: #7FD3A0; --erfolg-weich: #1E3A28;
    --warnung: #E9A55B; --warnung-weich: #3A2814;
    --alarm: #F28B82; --alarm-weich: #45201C; --auf-alarm: #240A08;
    --hinweis: #8DB6F5; --hinweis-weich: #1B2D48;
    --sonder: #E792B0; --sonder-weich: #3D1C27;
    --schatten-schwebend: 0 1px 2px #00000080, 0 8px 24px -12px #000000A0;
    color-scheme: dark;
}
:root[data-kontrast="hoch"] { --text-2: #2A302C; --text-3: #353C37; --rand-feld: #3F4741; --linie: #1B1F1C66; --linie-stark: #1B1F1C99; --akzent: #24573A; --fokus: #24573A; }
@media (prefers-color-scheme: dark) {
  :root[data-kontrast="hoch"]:not([data-theme="light"]) { --text-2: #E0E5E0; --text-3: #CBD1CB; --rand-feld: #B5BDB6; --linie: #ECEFEA66; --linie-stark: #ECEFEA99; --akzent: #9AD8B1; --fokus: #9AD8B1; }
}
@media (prefers-contrast: more) {
  :root { --text-2: #2A302C; --text-3: #353C37; --rand-feld: #3F4741; --linie: #1B1F1C66; --linie-stark: #1B1F1C99; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --text-2: #E0E5E0; --text-3: #CBD1CB; --rand-feld: #B5BDB6; --linie: #ECEFEA66; --linie-stark: #ECEFEA99; }
}

/* ---------- Grundlage ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grund); color: var(--text);
  font: var(--typo-text); letter-spacing: 0;
  -webkit-text-size-adjust: 100%; hyphens: auto; -webkit-hyphens: auto;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
/* lange deutsche Woerter: am Laptop nur zwischen Woertern umbrechen, am Handy und bei grosser Schrift notfalls im Wort (VF-E8) */
h1, h2, h3, h4, td, th, li, label, legend, summary, .name { overflow-wrap: break-word; }
@media (max-width: 47.99rem) { h1, h2, h3, h4, p, td, li, label, legend, summary, .name { overflow-wrap: anywhere; } } /* p seit AUF-2-W6, h4 seit AUF-2-W7 ("Pfand laut Bestaetigung") */
.tabelle th { overflow-wrap: normal; hyphens: manual; }
h1 { font: var(--typo-titel); margin: 0; }
h2 { font: var(--typo-titel-klein); margin: var(--a32) 0 var(--a12); }
h3 { font: var(--typo-text-betont); margin: var(--a16) 0 var(--a8); }
p { margin: 0 0 var(--a12); }
.leise { font: var(--typo-hinweis); color: var(--text-3); overflow-wrap: anywhere; } /* lange Dateinamen (AUF-2-W6) */
.klein { font: var(--typo-text-klein); color: var(--text-2); }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.abstand { flex: 1 1 auto; }

/* ---------- Knoepfe: ein Hauptknopf je Bereich, sonst ruhig ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a8);
  min-height: var(--groesse-tippflaeche); padding: var(--a8) var(--a20);
  border-radius: var(--radius-klein); border: var(--rahmen) solid var(--akzent); cursor: pointer;
  background: var(--akzent); color: var(--auf-akzent); font: var(--typo-text-betont);
}
.knopf { max-width: 100%; overflow-wrap: anywhere; }
.knopf.zweit { background: var(--flaeche); color: var(--text); border-color: var(--rand-feld); }
.knopf.gefahr { background: var(--alarm); border-color: var(--alarm); color: var(--auf-alarm); }
.knopf.breit { width: 100%; min-height: var(--groesse-knopf); }
.knopf:disabled, .textknopf:disabled { opacity: .45; cursor: default; }
.textknopf {
  max-width: 100%; overflow-wrap: anywhere; /* wie .knopf: nie breiter als die Seite (AUF-2-W6) */
  min-height: var(--groesse-tippflaeche); padding: 0 var(--a8); border: 0; background: none; cursor: pointer;
  color: var(--akzent); font: var(--typo-text-betont); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.textknopf.gefahr { color: var(--alarm); }

/* ---------- Flaechen: Linien statt Schatten; Schatten nur fuer Schwebendes ---------- */
.karte { background: var(--flaeche); border: var(--rahmen) solid var(--linie); border-radius: var(--radius-mittel); padding: var(--a20); }
.karte + .karte { margin-top: var(--a16); }

/* ---------- Hinweisbaender: Symbol plus Wort ---------- */
.band {
  display: flex; gap: var(--a12); align-items: flex-start; flex-wrap: wrap;
  padding: var(--a12) var(--a16); border-radius: var(--radius-klein); margin: var(--a12) 0;
  font: var(--typo-text-klein); color: var(--text); border-left: 4px solid var(--text-3); background: var(--flaeche-2);
}
.band .sym { font-weight: 700; flex: none; }
.band > span:not(.sym) { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; } /* schmal, 200 % (AUF-2-W6) */
.band .knopf { min-height: var(--groesse-tippflaeche); padding: 0 var(--a16); }
.band.info { background: var(--hinweis-weich); border-left-color: var(--hinweis); }
.band.warn { background: var(--warnung-weich); border-left-color: var(--warnung); }
.band.alarm { background: var(--alarm-weich); border-left-color: var(--alarm); }
.band.ok { background: var(--erfolg-weich); border-left-color: var(--erfolg); }

/* ---------- Eingaben (mind. 16 px Schrift, VF-E7) ---------- */
.eingabe {
  display: block; width: 100%; min-height: var(--groesse-tippflaeche); padding: 0 var(--a12);
  font: var(--typo-text); background: var(--flaeche); color: var(--text);
  border: var(--rahmen) solid var(--rand-feld); border-radius: var(--radius-klein);
}
.eingabe[aria-invalid="true"], input[aria-invalid="true"] { border: 2px solid var(--alarm); }
.feldfehler { font: var(--typo-text-klein); color: var(--alarm); margin-top: var(--a4); }
.haken { display: inline-flex; align-items: center; gap: var(--a8); min-height: var(--groesse-tippflaeche); cursor: pointer; }
.haken input { width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--akzent); }

/* ---------- Reiter als Segmentleiste (oben, nicht fest) ---------- */
.reiter { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--flaeche-2); border-radius: var(--radius-klein); }
/* min-width 0 und overflow-wrap: lange Woerter ("Wunschgruppen") brechen auch dort, wo der Browser nicht
   silbentrennt (Linux-Chromium im Test von K, 19.10.2026, AUF-2-W6); sonst ragt der Knopf bei 200 % heraus */
.reiter button {
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; min-height: var(--groesse-tippflaeche); padding: 0 var(--a12);
  border: 0; border-radius: 6px; background: none; cursor: pointer; font: var(--typo-text-klein); color: var(--text-2);
}
.reiter button[aria-selected="true"] { background: var(--flaeche); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--linie-stark); }

/* Filter: Pillen mit Haken, wenn aktiv */
.filter { display: flex; flex-wrap: wrap; gap: var(--a8); }
.filter button {
  min-height: var(--groesse-tippflaeche); padding: 0 var(--a12); border-radius: var(--radius-pille);
  border: var(--rahmen) solid var(--linie-stark); background: var(--flaeche); cursor: pointer; font: var(--typo-text-klein); color: var(--text-2);
}
.filter button[aria-pressed="true"] { background: var(--text); color: var(--grund); border-color: var(--text); font-weight: 600; }
.filter button[aria-pressed="true"]::before { content: "✓ "; }

/* ---------- Kisten-Etikett: das Erkennungszeichen jedes Haushalts ---------- */
.etikett-hh {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a4);
  min-width: 2.4em; padding: .1em .45em; border: 1.5px solid currentColor; border-radius: 5px;
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; line-height: 1.3;
  color: var(--text); background: var(--flaeche); white-space: nowrap;
  box-shadow: inset 0 0 0 2px var(--flaeche), inset 0 0 0 3px var(--linie-stark);
}
.etikett-hh small { font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.etiketten { display: flex; flex-wrap: wrap; gap: var(--a4); }

/* Kennzeichen Sonder/Rabatt (Rote Bete) */
.etikett { display: inline-block; white-space: nowrap; font: var(--typo-mini); font-weight: 600; padding: 2px var(--a8); border-radius: var(--radius-pille); background: var(--flaeche-2); color: var(--text-2); }
.etikett.sonder, .etikett.rabatt { background: var(--sonder-weich); color: var(--sonder); }

/* ---------- Status: immer Symbol plus Wort (PLAN 7) ---------- */
.st { display: inline-flex; align-items: center; gap: var(--a4); white-space: nowrap; font-weight: 600; }
/* schmal: Statuswort darf umbrechen, sonst ragt es bei 200 % ohne Silbentrennung heraus (AUF-2-W6) */
@media (max-width: 47.99rem) { .st { white-space: normal; overflow-wrap: anywhere; } }
.st[data-s="passt"], .st[data-s="aktiv"], .st[data-s="ok"] { color: var(--erfolg); }
.st[data-s="zu-wenig"], .st[data-s="rot"] { color: var(--alarm); }
.st[data-s="ueberhang"], .st[data-s="orange"] { color: var(--warnung); }
.st[data-s="leer"], .st[data-s="inaktiv"] { color: var(--text-3); font-weight: 400; }
.zeilen-status, .zeile-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a8); font: var(--typo-hinweis); color: var(--text-3); }
.zeilen-status[data-s="ok"], .zeile-status[data-s="ok"] { color: var(--erfolg); }
.zeilen-status[data-s="fehler"], .zeile-status[data-s="fehler"], .zeile-status[data-s="ungueltig"] { color: var(--alarm); }
.zeilen-status .textknopf, .zeile-status .textknopf { color: var(--alarm); }

/* ---------- Tabellen: Linien, keine Kaesten; am Handy Karten ---------- */
.tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche); border: var(--rahmen) solid var(--linie); font: var(--typo-text-klein); }
.tabelle th, .tabelle td { padding: var(--a8) var(--a12); border-top: var(--rahmen) solid var(--linie); vertical-align: top; text-align: left; }
.tabelle thead th { font: var(--typo-hinweis); font-weight: 600; color: var(--text-2); border-top: 0; border-bottom: var(--rahmen) solid var(--linie-stark); background: var(--flaeche); }
.tabelle .zahl { text-align: right; }
@media (max-width: 47.99rem) {
  .tabelle.karten, .tabelle.karten tbody, .tabelle.karten tfoot, .tabelle.karten tr, .tabelle.karten td, .tabelle.karten th { display: block; width: 100%; }
  .tabelle.karten thead { display: none; }
  .tabelle.karten { background: none; border: 0; }
  .tabelle.karten tr { background: var(--flaeche); border: var(--rahmen) solid var(--linie); border-radius: var(--radius-mittel); margin: var(--a8) 0; padding: var(--a8) var(--a12); }
  .tabelle.karten td, .tabelle.karten th { border: 0; padding: var(--a4) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--a8) var(--a12); align-items: center; text-align: right; white-space: normal; }
  .tabelle.karten td::before { content: attr(data-l); font: var(--typo-hinweis); color: var(--text-3); text-align: left; flex: 0 1 auto; }
  .tabelle.karten td.voll, .tabelle.karten th.voll { display: block; text-align: left; }
  .tabelle.karten th.voll { overflow-wrap: anywhere; } /* Zeilenkopf als Karte, z. B. "Rundungsausgleich" (AUF-2-W6) */
  .tabelle.karten td.voll::before { content: none; }
}

/* ---------- Skizzen-Leiste (nicht Teil der echten Seite) ---------- */
.skizze { margin-top: var(--a48); padding: var(--a16); border: var(--rahmen) dashed var(--rand-feld); border-radius: var(--radius-mittel); font: var(--typo-text-klein); color: var(--text-2); }
.skizze-knoepfe { display: flex; flex-wrap: wrap; gap: var(--a8); }
.skizze label, .skizze button { min-height: var(--groesse-tippflaeche); display: inline-flex; align-items: center; gap: var(--a8); padding: 0 var(--a12); border-radius: var(--radius-klein); border: var(--rahmen) solid var(--rand-feld); background: var(--flaeche); cursor: pointer; flex-wrap: wrap; max-width: 100%; }
.skizze input[type=checkbox] { width: 1.25rem; height: 1.25rem; margin: 0; }
.skizze select { max-width: 100%; min-height: var(--groesse-tippflaeche); border-radius: var(--radius-klein); border: var(--rahmen) solid var(--rand-feld); background: var(--flaeche); padding: 0 var(--a8); }

/* Bewegung nur als Antwort auf Bedienung, und nur wenn erwuenscht */
@media (prefers-reduced-motion: no-preference) {
  .knopf, .filter button, .reiter button { transition: background-color var(--effekt-schnell-dauer) var(--effekt-schnell), color var(--effekt-schnell-dauer) var(--effekt-schnell); }
  .zeilen-status[data-s="ok"], .zeile-status[data-s="ok"] { animation: gespeichert var(--effekt-dauer) var(--effekt); }
  @keyframes gespeichert { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
}
/* foodcoop gestaltung ENDE */