/* Farb-Rollen. Nie Farbnamen im Markup, immer Rollen.
   Hell ist Standard; dunkel über prefers-color-scheme.
   data-schema="hell|dunkel" auf einem beliebigen Element erzwingt ein Schema (Doku, Tests). */
:root {
  color-scheme: light dark;

  --papier: #fbfaf8;          /* Grundfläche */
  --papier-2: #f2f0eb;        /* eingesenkte Fläche: Hover, Felder deaktiviert, Zebra */
  --tinte: #1c1b19;           /* Text, Hauptknopf, prod-Etikett */
  --tinte-weich: #3b3936;     /* Hauptknopf überfahren */
  --leise: #6a6762;           /* Sekundärtext, Notizen, Meta (5,1:1 auf Papier) */
  --linie: #dedbd5;           /* Trennlinien */
  --linie-stark: #a9a59e;     /* Feldränder, Etikettränder, Tabellenkopf */

  --fokus: oklch(52% 0.14 250);   /* einzige Akzentfarbe: Tastaturfokus */
  --fehler: oklch(48% 0.13 25);
  --erfolg: oklch(48% 0.12 150);

  /* Kennfarben für Kunden – gleiche Helligkeit und Sättigung, nur Farbton variiert.
     Werden ausschließlich als schmaler Strich eingesetzt. */
  --kunde-1: oklch(60% 0.11 30);
  --kunde-2: oklch(60% 0.11 75);
  --kunde-3: oklch(60% 0.11 110);
  --kunde-4: oklch(60% 0.11 150);
  --kunde-5: oklch(60% 0.11 195);
  --kunde-6: oklch(60% 0.11 245);
  --kunde-7: oklch(60% 0.11 290);
  --kunde-8: oklch(60% 0.11 335);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-schema="hell"]) {
    --papier: #161615;
    --papier-2: #1f1f1d;
    --tinte: #ecebe7;
    --tinte-weich: #cfcdc7;
    --leise: #a19e98;
    --linie: #2f2e2b;
    --linie-stark: #57544f;
    --fokus: oklch(75% 0.12 250);
    --fehler: oklch(72% 0.12 25);
    --erfolg: oklch(72% 0.11 150);
    --kunde-1: oklch(70% 0.10 30);
    --kunde-2: oklch(70% 0.10 75);
    --kunde-3: oklch(70% 0.10 110);
    --kunde-4: oklch(70% 0.10 150);
    --kunde-5: oklch(70% 0.10 195);
    --kunde-6: oklch(70% 0.10 245);
    --kunde-7: oklch(70% 0.10 290);
    --kunde-8: oklch(70% 0.10 335);
  }
}

[data-schema="dunkel"] {
  color-scheme: dark;
  --papier: #161615;
  --papier-2: #1f1f1d;
  --tinte: #ecebe7;
  --tinte-weich: #cfcdc7;
  --leise: #a19e98;
  --linie: #2f2e2b;
  --linie-stark: #57544f;
  --fokus: oklch(75% 0.12 250);
  --fehler: oklch(72% 0.12 25);
  --erfolg: oklch(72% 0.11 150);
  --kunde-1: oklch(70% 0.10 30);
  --kunde-2: oklch(70% 0.10 75);
  --kunde-3: oklch(70% 0.10 110);
  --kunde-4: oklch(70% 0.10 150);
  --kunde-5: oklch(70% 0.10 195);
  --kunde-6: oklch(70% 0.10 245);
  --kunde-7: oklch(70% 0.10 290);
  --kunde-8: oklch(70% 0.10 335);
}

[data-schema="hell"] {
  color-scheme: light;
  --papier: #fbfaf8;
  --papier-2: #f2f0eb;
  --tinte: #1c1b19;
  --tinte-weich: #3b3936;
  --leise: #6a6762;
  --linie: #dedbd5;
  --linie-stark: #a9a59e;
  --fokus: oklch(52% 0.14 250);
  --fehler: oklch(48% 0.13 25);
  --erfolg: oklch(48% 0.12 150);
  --kunde-1: oklch(60% 0.11 30);
  --kunde-2: oklch(60% 0.11 75);
  --kunde-3: oklch(60% 0.11 110);
  --kunde-4: oklch(60% 0.11 150);
  --kunde-5: oklch(60% 0.11 195);
  --kunde-6: oklch(60% 0.11 245);
  --kunde-7: oklch(60% 0.11 290);
  --kunde-8: oklch(60% 0.11 335);
}
/* Nur Systemschriften. Keine Web-Fonts.
   Sans: alles Menschliche (Namen, Notizen, Überschriften, Meldungen).
   Mono: alles Technische (Hostnamen, URLs, Etiketten, Tasten, Zähler). */
:root {
  --schrift: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Skala – fünf Stufen, mehr braucht ein Instrumentenbrett nicht */
  --t-xs: 12px;   /* Etikett, Meta, Tastenhinweis, Spaltenkopf */
  --t-s: 13px;    /* Notiz, Tabellenzelle, Meldung */
  --t-m: 14px;    /* Grundgröße: Link-Name, Felder, Knöpfe */
  --t-l: 16px;    /* Kundenüberschrift, Suchfeld (16px verhindert Zoom auf iOS) */
  --t-xl: 20px;   /* Seitentitel */

  /* Zeilenhöhen */
  --zh-eng: 1.25;   /* Listen, Überschriften, einzeilige Felder */
  --zh-normal: 1.5; /* Fließtext, Leerzustände, Meldungen */

  --gewicht-normal: 400;
  --gewicht-mittel: 500;   /* Link-Name, Knopf */
  --gewicht-stark: 600;    /* Überschriften, Suchtreffer-Markierung */
}
/* Abstandsskala auf 4px-Basis. Innen klein, außen groß. */
:root {
  --ab-1: 2px;
  --ab-2: 4px;
  --ab-3: 8px;
  --ab-4: 12px;
  --ab-5: 16px;
  --ab-6: 24px;
  --ab-7: 32px;
  --ab-8: 48px;

  --radius: 3px;          /* Felder, Knöpfe, Meldungen */
  --radius-etikett: 2px;

  --zeile-maus: 36px;     /* Mindesthöhe einer Link-Zeile mit Maus */
  --zeile-finger: 48px;   /* … mit Finger (pointer: coarse) */
  --seite-max: 1440px;
  --spalte-min: 300px;    /* Kundenblock-Spalte in der Übersicht */
}
/* Bausteine – reines CSS, keine Abhängigkeiten.
   Klassen .zeigt-hover / .zeigt-aktiv / .zeigt-fokus spiegeln Zustände nur für die Dokumentation. */

/* Grund */
html { background: var(--papier); color: var(--tinte); font: var(--t-m)/var(--zh-normal) var(--schrift); -webkit-text-size-adjust: 100%; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
code, kbd, .mono { font-family: var(--mono); font-size: 0.93em; }
mark { background: none; color: inherit; font-weight: var(--gewicht-stark); }
@media (prefers-reduced-motion: no-preference) {
  .link, .knopf, .feld, .treffer, .suche-feld, .etikett-wahl { transition: background-color 80ms, border-color 80ms; }
}

.seite { max-width: var(--seite-max); margin: 0 auto; padding: var(--ab-5) var(--ab-6) var(--ab-8); }
@media (max-width: 600px) { .seite { padding: var(--ab-4) var(--ab-4) var(--ab-7); } }

/* Kopf */
.kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ab-4); margin-bottom: var(--ab-5); }
.kopf h1 { margin: 0; font: var(--gewicht-stark) var(--t-xl)/1.2 var(--schrift); }
.kopf nav { display: flex; gap: var(--ab-5); font-size: var(--t-s); color: var(--leise); }
.kopf nav a:hover, .kopf nav a[aria-current] { color: var(--tinte); }

/* Suche */
.suche { display: flex; align-items: center; gap: var(--ab-4); }
.suche-feld { flex: 1; min-width: 0; height: 44px; padding: 0 var(--ab-4); font: var(--t-l)/1 var(--schrift); color: var(--tinte); background: var(--papier); border: 1px solid var(--linie-stark); border-radius: var(--radius); }
.suche-feld::placeholder { color: var(--leise); }
.suche-feld:hover, .suche-feld.zeigt-hover { border-color: var(--tinte); }
.suche-feld:focus-visible, .suche-feld.zeigt-fokus { outline: 2px solid var(--fokus); outline-offset: 0; border-color: var(--fokus); }
.suche-hilfe { display: flex; gap: var(--ab-4); font: var(--t-xs)/1 var(--mono); color: var(--leise); white-space: nowrap; }
kbd { font: var(--t-xs)/1 var(--mono); border: 1px solid var(--linie-stark); border-radius: var(--radius); padding: 2px 5px; }
@media (max-width: 720px) { .suche-hilfe { display: none; } }

.treffer-liste { list-style: none; margin: var(--ab-4) 0 0; padding: 0; border-top: 1px solid var(--linie); }
.treffer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--ab-4); min-height: 40px; padding: var(--ab-2) var(--ab-4); border-bottom: 1px solid var(--linie); }
.treffer:hover, .treffer.zeigt-hover { background: var(--papier-2); text-decoration: none; }
.treffer:focus-visible { outline-offset: -2px; }
.treffer-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treffer-pfad { color: var(--leise); }
.treffer-taste { visibility: hidden; font: var(--t-xs)/1 var(--mono); color: var(--leise); }
.treffer[aria-selected="true"] { background: var(--papier-2); box-shadow: inset 2px 0 0 var(--tinte); }
.treffer[aria-selected="true"] .treffer-taste { visibility: visible; }
@media (pointer: coarse) { .treffer { min-height: var(--zeile-finger); } }

/* Übersicht */
.uebersicht { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--spalte-min), 1fr)); gap: var(--ab-7); margin-top: var(--ab-7); }
.kunde--intern { grid-column: 1 / -1; }
.kunde--intern .kunde-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: var(--ab-7); }
@media (max-width: 600px) { .uebersicht { grid-template-columns: 1fr; gap: var(--ab-6); margin-top: var(--ab-6); } }

/* Kundenblock */
.kunde { --kunde: var(--linie-stark); min-width: 0; }
.kunde-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ab-3); padding: var(--ab-3) 0 var(--ab-2); border-top: 2px solid var(--kunde); }
.kunde-name { margin: 0; font: var(--gewicht-stark) var(--t-l)/var(--zh-eng) var(--schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kunde-zahl { font: var(--t-xs)/1 var(--mono); color: var(--leise); }
.kunde-links { list-style: none; margin: 0; padding: 0; }
.kunde-links > li { border-bottom: 1px solid var(--linie); }
.kunde--archiv { --kunde: var(--linie); }
.kunde--archiv .kunde-name { color: var(--leise); font-weight: var(--gewicht-mittel); }

/* Link-Zeile: die ganze Zeile ist der Anker */
.link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--ab-4); min-height: var(--zeile-maus); padding: var(--ab-2) var(--ab-3); margin: 0 calc(-1 * var(--ab-3)); border-radius: var(--radius); color: inherit; }
.link:hover, .link.zeigt-hover { background: var(--papier-2); text-decoration: none; }
.link:active, .link.zeigt-aktiv { background: var(--linie); }
.link:focus-visible, .link.zeigt-fokus { outline: 2px solid var(--fokus); outline-offset: -2px; }
.link[aria-disabled="true"] { color: var(--leise); pointer-events: none; }
.link[aria-disabled="true"] .etikett { opacity: .6; }
.link-text { min-width: 0; }
.link-name { display: block; font: var(--gewicht-mittel) var(--t-m)/var(--zh-eng) var(--schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-notiz { display: block; font: var(--t-s)/var(--zh-eng) var(--schrift); color: var(--leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.etiketten { display: flex; gap: var(--ab-2); flex-wrap: nowrap; }
@media (pointer: coarse) { .link { min-height: var(--zeile-finger); } }
@media (max-width: 420px) { .link { grid-template-columns: minmax(0, 1fr); row-gap: var(--ab-2); } .etiketten { flex-wrap: wrap; } }

/* Etikett */
.etikett { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; font: var(--t-xs)/1 var(--mono); color: var(--leise); border: 1px solid var(--linie-stark); border-radius: var(--radius-etikett); white-space: nowrap; }
.etikett[data-etikett="prod"] { color: var(--papier); background: var(--tinte); border-color: var(--tinte); }
/* wählbares Etikett (Formulare) */
.etikett-wahl { height: 24px; padding: 0 var(--ab-3); background: var(--papier); cursor: pointer; }
.etikett-wahl:hover, .etikett-wahl.zeigt-hover { border-color: var(--tinte); color: var(--tinte); }
.etikett-wahl[aria-pressed="true"] { color: var(--papier); background: var(--tinte); border-color: var(--tinte); }
.etikett-wahl:disabled { color: var(--leise); border-color: var(--linie); cursor: default; }

/* Felder */
.feld { height: 36px; padding: 0 var(--ab-3); font: var(--t-m)/1 var(--schrift); color: var(--tinte); background: var(--papier); border: 1px solid var(--linie-stark); border-radius: var(--radius); min-width: 0; width: 100%; box-sizing: border-box; }
.feld--mono { font-family: var(--mono); font-size: var(--t-s); }
.feld--zeile { height: 28px; padding: 0 var(--ab-2); font-size: var(--t-s); }
.feld::placeholder { color: var(--leise); }
.feld:hover, .feld.zeigt-hover { border-color: var(--tinte); }
.feld:focus-visible, .feld.zeigt-fokus { outline: 2px solid var(--fokus); outline-offset: 0; border-color: var(--fokus); }
.feld:disabled { color: var(--leise); background: var(--papier-2); border-color: var(--linie); }
.feld[aria-invalid="true"] { border-color: var(--fehler); }
.feld-gruppe { display: grid; gap: var(--ab-2); font: var(--t-xs)/1 var(--schrift); color: var(--leise); min-width: 0; }
.feld-hinweis { font: var(--t-xs)/var(--zh-eng) var(--schrift); color: var(--leise); }
.feld-hinweis--fehler { color: var(--fehler); }

/* Knopf */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--ab-2); height: 36px; padding: 0 var(--ab-4); font: var(--gewicht-mittel) var(--t-m)/1 var(--schrift); color: var(--tinte); background: var(--papier); border: 1px solid var(--linie-stark); border-radius: var(--radius); cursor: pointer; white-space: nowrap; }
.knopf:hover, .knopf.zeigt-hover { border-color: var(--tinte); background: var(--papier-2); }
.knopf:active, .knopf.zeigt-aktiv { background: var(--linie); }
.knopf:disabled { color: var(--leise); border-color: var(--linie); background: transparent; cursor: default; }
.knopf--haupt { color: var(--papier); background: var(--tinte); border-color: var(--tinte); }
.knopf--haupt:hover, .knopf--haupt.zeigt-hover { background: var(--tinte-weich); border-color: var(--tinte-weich); }
.knopf--haupt:active, .knopf--haupt.zeigt-aktiv { background: var(--tinte); }
.knopf--haupt:disabled { color: var(--papier); background: var(--linie-stark); border-color: var(--linie-stark); }
.knopf--leise { color: var(--leise); border-color: transparent; background: transparent; }
.knopf--leise:hover, .knopf--leise.zeigt-hover { color: var(--tinte); border-color: transparent; background: var(--papier-2); }
.knopf--gefahr { color: var(--fehler); }
.knopf--gefahr:hover, .knopf--gefahr.zeigt-hover { border-color: var(--fehler); }
.knopf--klein { height: 28px; padding: 0 var(--ab-3); font-size: var(--t-s); }

/* Schnell-Hinzufügen */
.schnell { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(140px, 1fr) minmax(160px, 1.5fr) minmax(220px, 2fr) auto; gap: var(--ab-3); align-items: end; padding: var(--ab-4) 0; border-top: 1px solid var(--linie); }
.schnell .etiketten { height: 36px; align-items: center; gap: var(--ab-2); }
@media (max-width: 960px) { .schnell { grid-template-columns: 1fr 1fr; } .schnell .feld-gruppe:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .schnell { grid-template-columns: 1fr; } .schnell .etiketten { flex-wrap: wrap; height: auto; min-height: 36px; } }
.schnell-auf summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--ab-2); height: 36px; font: var(--t-s)/1 var(--schrift); color: var(--leise); }
.schnell-auf summary::-webkit-details-marker { display: none; }
.schnell-auf summary:hover { color: var(--tinte); }
.schnell-auf[open] summary { color: var(--tinte); }
.schnell-auf summary .plus { font-family: var(--mono); font-size: var(--t-m); }

/* Verwaltungstabelle */
.tabelle { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--t-s); }
.tabelle th { text-align: left; font: var(--gewicht-mittel) var(--t-xs)/1 var(--schrift); color: var(--leise); padding: var(--ab-2) var(--ab-3); border-bottom: 1px solid var(--linie-stark); white-space: nowrap; }
.tabelle td { height: 40px; padding: var(--ab-1) var(--ab-3); border-bottom: 1px solid var(--linie); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabelle tr:hover td, .tabelle tr.zeigt-hover td, .tabelle tr:focus-within td { background: var(--papier-2); }
.tabelle tr.ist-archiv td { color: var(--leise); }
.tabelle tr.ist-archiv .etikett { opacity: .6; }
.tabelle tr.zieht td { background: var(--papier-2); box-shadow: inset 0 2px 0 var(--tinte); }
.tabelle .griff { width: 20px; padding-right: 0; color: var(--leise); font-family: var(--mono); cursor: grab; text-align: center; }
.tabelle .url { font-family: var(--mono); color: var(--leise); }
.tabelle .aktionen { text-align: right; }
.tabelle .aktionen-satz { display: inline-flex; gap: var(--ab-1); visibility: hidden; }
.tabelle tr:hover .aktionen-satz, .tabelle tr.zeigt-hover .aktionen-satz, .tabelle tr:focus-within .aktionen-satz { visibility: visible; }
@media (pointer: coarse) { .tabelle .aktionen-satz { visibility: visible; } }
.tabelle .kunde-strich { display: inline-block; width: 2px; height: 14px; margin-right: var(--ab-3); vertical-align: -2px; background: var(--kunde, var(--linie-stark)); }

/* Leerzustände */
.leer { padding: var(--ab-7) var(--ab-5); text-align: center; color: var(--leise); font-size: var(--t-m); line-height: var(--zh-normal); border: 1px dashed var(--linie-stark); border-radius: var(--radius); }
.leer strong { display: block; color: var(--tinte); font-weight: var(--gewicht-mittel); }
.leer a { text-decoration: underline; text-underline-offset: 2px; }
.leer a:hover { color: var(--tinte); }
.leer--zeile { padding: var(--ab-5); border-style: solid; border-color: var(--linie); }

/* Meldung */
.meldung { display: flex; align-items: baseline; gap: var(--ab-3); padding: var(--ab-3) var(--ab-4); margin: 0 0 var(--ab-5); border: 1px solid var(--linie-stark); border-radius: var(--radius); font-size: var(--t-s); line-height: var(--zh-eng); }
.meldung b { font-weight: var(--gewicht-stark); }
.meldung code { color: var(--leise); }
.meldung--erfolg { border-color: var(--erfolg); }
.meldung--erfolg b { color: var(--erfolg); }
.meldung--fehler { border-color: var(--fehler); }
.meldung--fehler b { color: var(--fehler); }
.meldung .knopf--leise { margin-left: auto; align-self: center; }

/* Verwaltung: Kundenliste */
.kundenliste { list-style: none; margin: 0; padding: 0; }
.kundenliste li { display: grid; grid-template-columns: 2px minmax(0, 1fr) auto auto; align-items: center; gap: var(--ab-4); min-height: 40px; padding: var(--ab-2) 0; border-bottom: 1px solid var(--linie); font-size: var(--t-s); }
.kundenliste .strich { width: 2px; height: 16px; background: var(--kunde); }
.kundenliste .ist-archiv { color: var(--leise); }

/* Ergaenzungen der App zum Kit -- entstanden beim Bauen der Verwaltung.
   Wandern beim naechsten Abgleich zurueck ins Design-System. */

/* Drei Felder nebeneinander in einer Zeile der Kundenliste. Ohne das stapeln
   sie sich: .feld traegt width:100%, und der Rasterplatz gibt ihnen jeweils
   die volle Breite. */
.kundenliste .felderreihe { display: flex; gap: var(--ab-3); min-width: 0; align-items: center; }
.kundenliste .felderreihe .feld { flex: 1 1 auto; min-width: 0; }

/* Die Kundenzelle der Verwaltungstabelle traegt einen Strich UND ein
   Auswahlfeld. Mit dem width:100% des Feldes ergaebe das zusammen mehr als
   die Zellbreite, und das ellipsis der Zelle frisst die Auswahl auf. */
.tabelle td.kundenzelle { display: flex; align-items: center; gap: var(--ab-2); }
.tabelle td.kundenzelle .feld { flex: 1 1 auto; min-width: 0; }

/* Kennfarbe waehlen: acht Felder statt einer Liste mit Nummern.
   Radio-Eingaben, nicht <select> -- Safari rendert background-color an
   <option> nicht, auf iPhone und iPad bliebe die Liste also grau. Die Nummer
   bleibt als unsichtbare Beschriftung stehen, damit Tastatur und
   Vorlesefunktion etwas zu greifen haben. */
/* Neun Felder in EINE Zeile: mit --ab-3 brach die Reihe in der
   Kundenliste auf zwei Zeilen um und machte jede Zeile doppelt hoch. */
.farbwahl { display: flex; flex-wrap: wrap; gap: var(--ab-2); align-items: center; }
.farbwahl label { position: relative; display: inline-flex; cursor: pointer; }
.farbwahl input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.farbwahl .probe {
  width: 18px; height: 18px; border-radius: var(--radius-etikett);
  background: var(--probe, transparent);
  border: 1px solid var(--linie-stark);
}
/* Zwei Ringe: erst Papier, dann Tinte -- so bleibt ein Spalt zwischen Feld
   und Ring, und die Auswahl ist auch bei zwei benachbarten Toenen eindeutig. */
.farbwahl input:checked + .probe { box-shadow: 0 0 0 2px var(--papier), 0 0 0 3px var(--tinte); }
.farbwahl input:focus-visible + .probe { outline: 2px solid var(--fokus); outline-offset: 3px; }
.farbwahl .probe--keine {
  background: linear-gradient(to top left, transparent calc(50% - 1px),
              var(--linie-stark) 50%, transparent calc(50% + 1px));
}
/* Sichtbar nur fuer Vorlesefunktion und Tastatur. Kein display:none -- das
   naehme dem Radiofeld seine Beschriftung. */
.nurlesbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Die Farbreihe darf nicht schrumpfen: als Flex- bzw. Rasterelement wurde sie
   von Namensfeld und Spaltenbreite zusammengedrueckt und brach auf zwei
   Zeilen um. Sie bekommt ihre natuerliche Breite, der Rest gibt nach. */
.kundenliste .felderreihe .farbwahl { flex: 0 0 auto; }
.feld-gruppe--farben { min-width: max-content; }

/* Das Anlege-Formular fuer Kunden hat andere Spalten als das fuer Links:
   Name, die neun Farbfelder (feste Breite), Reihenfolge, Knopf. Mit dem
   Raster von .schnell lief die Farbreihe in die Nachbarspalte. */
.schnell--kunde { grid-template-columns: minmax(180px, 1fr) auto minmax(100px, 140px) auto; }
@media (max-width: 720px) { .schnell--kunde { grid-template-columns: 1fr; } }