/* ═══════════════════════════════════════════════════════════════════════
   CMS-Redesign — Gestaltungsblatt
   Liegt über css/cms-base.css und ersetzt Gerüst, Anordnung und Bedienmaße.
   Werte kommen aus css/dl-design.css.

   Spec:  specs/cms-redesign/spec.md
   Plan:  specs/cms-redesign/plan.md

   Aufbau
     1  Seite und Rasterhülle
     2  Hinweisstreifen
     3  Kopfzeile
     4  Navigation mit Gruppen
     5  Inhaltsbereich
     6  Bedienmaße
     7  Dialoge als Blatt
     8  Anmeldung
     9  Dunkles Farbschema

   STUFE 1: Gerüst, Navigation, Dialogmuster, Bedienmaße.
   Das Innenleben der Bereiche trägt noch seine Inline-Gestaltung; sie wird
   in Stufe 2 auf das Schema gezogen (Spec F4).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1  Seite und Rasterhülle ─────────────────────────────────────────── */

/* Die alten Seitenvariablen zeigen auf das Schema. Damit folgen auch die
   615 Zeilen der Grundgestaltung (cms-base.css) dem neuen Bild, ohne dass
   dort eine einzige Regel angefasst werden muss - und ohne die tausenden
   `var(--c-m-…)`-Verwendungen umzuschreiben. */
:root{
  --c-m-bg:var(--flaeche);
  --c-m-pri:var(--gr-d);
  --c-m-pri-light:var(--gr-l);
  --c-m-text:var(--ink);
  --c-m-muted:var(--mut);
  --c-green:var(--gr);
  --c-muted:var(--mut);
  --c-text:var(--ink);
  --c-border:var(--line);
  --c-card:var(--karte);
  --c-bg:var(--flaeche);
  /* --c-m-sec bleibt das Beige der Marke: es ist die zweite Hausfarbe und
     kein Zufallswert. */
}

html, body{
  height:100%;
  overflow:hidden;          /* nur der Inhaltsbereich rollt */
  max-width:none;
}
body{
  background:var(--flaeche);
  color:var(--ink);
  /* Der Hinweisstreifen liegt im Fluss statt fest über allem: Sonst müsste
     das Raster einen Abstand raten, und bei zweizeiligem Streifen wäre die
     Kopfzeile halb verdeckt. */
  display:flex;
  flex-direction:column;
  height:100dvh;
  height:100svh;
}
body > #cms-login, body > .cmsneu-app{ flex:1 1 auto; min-height:0 }

/* `#cms-app` wird zur Hülle. Die alte `.cms-wrap` brachte hier eine feste
   Breite von 1000 px und einen Außenabstand mit - auf einem breiten Schirm
   blieb dadurch die Hälfte der Fläche ungenutzt. */
.cmsneu-app{
  max-width:none;
  margin:0;
  padding:0;
  height:auto;
  display:grid;
  grid-template-areas:
    "hd"
    "main";
  grid-template-rows:auto minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
}
.cmsneu-app > .cmsneu-kopf{ grid-area:hd }
.cmsneu-app > .cmsneu-nav { grid-area:nav }
.cmsneu-app > .cmsneu-inhalt{ grid-area:main; min-width:0; min-height:0 }

/* Ab Tablet wandert die Navigation an den linken Rand. */
@media (min-width:640px){
  .cmsneu-app{
    grid-template-areas:
      "nav hd"
      "nav main";
    grid-template-rows:auto minmax(0,1fr);
    grid-template-columns:var(--nav-w) minmax(0,1fr);
  }
}

/* ── 2  Hinweisstreifen (Spec F5) ─────────────────────────────────────── */

.cmsneu-hinweis{
  flex:0 0 auto;
  z-index:9500;
  padding:6px 12px;
  background:var(--amb-l);
  border-bottom:1px solid var(--amb-b);
  color:var(--amb);
  font:600 var(--schrift-klein)/1.4 "Segoe UI", system-ui, sans-serif;
  text-align:center;
}
.cmsneu-hinweis b{ font-weight:600 }
.cmsneu-hinweis a{ color:var(--amb); text-underline-offset:2px }
/* Auf dem Telefon nur die Warnung - der Rückverweis kostete dort eine
   zweite Zeile und drückte die Kopfzeile zusammen. */
@media (max-width:600px){
  .cmsneu-hinweis a{ display:none }
  .cmsneu-hinweis{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
}

/* ── 3  Kopfzeile ─────────────────────────────────────────────────────── */

.cmsneu-kopf{
  display:flex;
  align-items:center;
  gap:var(--gap);
  min-height:56px;
  padding:6px var(--pad);
  background:var(--karte);
  border-bottom:1px solid var(--line);
}
.cmsneu-marke{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  cursor:pointer;
}
.cmsneu-marke img{
  height:34px;
  width:auto;
  flex:0 0 auto;
  border-radius:var(--r-s);
}
/* Ohne hinterlegtes Logo bleibt ein leeres <img> als Rahmen stehen. */
.cmsneu-marke img[src=""]{ display:none }
.cmsneu-marke h1{
  margin:0;
  font-size:var(--schrift-gross);
  font-weight:600;
  color:var(--gr);
  white-space:nowrap;
}
.cmsneu-marke:hover h1{ color:var(--gr-d) }

.cmsneu-kopf-info{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-left:auto;
  min-width:0;
}
.cmsneu-kopf-info #cms-status{
  font-size:var(--schrift-klein);
  font-weight:600;
  color:var(--mut);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmsneu-kopf-info #cms-version{
  font-size:11px;
  color:var(--mut);
  opacity:.6;
}

.cmsneu-kopf-acts{ display:flex; align-items:center; gap:6px }
.cmsneu-kopf-acts .cms-btn{
  min-height:var(--tap-min);
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-s);
  background:var(--karte);
  color:var(--ink);
  font-size:var(--schrift-klein);
  font-weight:600;
  text-decoration:none;
  text-transform:none;
  letter-spacing:0;
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.cmsneu-kopf-acts .cms-btn:hover{ border-color:var(--gr); color:var(--gr) }
.cmsneu-kopf-acts svg{ color:var(--mut) }
.cmsneu-kopf-acts .cms-btn:hover svg{ color:var(--gr) }

/* Der Knopf „Bereich" öffnet die Navigation - nur auf dem Telefon nötig. */
.cmsneu-menue{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:var(--tap-min);
  min-width:var(--tap-min);
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-s);
  background:var(--karte);
  color:var(--ink);
  font-size:var(--schrift-klein);
  font-weight:600;
  cursor:pointer;
}
.cmsneu-menue-txt{ display:none }
@media (min-width:400px){ .cmsneu-menue-txt{ display:inline } }
@media (min-width:640px){ .cmsneu-menue{ display:none } }

@media (max-width:520px){
  .cmsneu-kopf-info #cms-version{ display:none }
  .cmsneu-lang{ display:none }
  .cmsneu-kopf-acts .cms-btn{ padding:6px 10px }
}
@media (max-width:400px){
  .cmsneu-marke h1{ display:none }
}

/* ── 4  Navigation mit Gruppen (Spec F3) ──────────────────────────────── */

/* Auf dem Telefon ein Blatt über dem Inhalt: 15 Einträge in einer Fußleiste
   wären nicht zu treffen. Ab 640 px eine Leiste am linken Rand. */
.cmsneu-nav{
  margin:0;
  position:fixed;
  inset:0;
  z-index:9200;
  display:none;
  background:rgba(15,23,42,.5);
}
body.cmsneu-nav-auf .cmsneu-nav{ display:block }

.cmsneu-nav > .cms-tabs{
  position:absolute;
  inset:auto 0 0 0;
  max-height:82dvh;
  max-height:82svh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  /* Die Grundgestaltung erlaubt Umbruch. In einer senkrechten Leiste bricht
     der Rest dadurch in eine zweite Spalte und zeichnet über den Inhalt. */
  flex-wrap:nowrap;
  gap:0;
  padding:8px 8px calc(8px + var(--sab));
  border:0;
  border-radius:var(--r-l) var(--r-l) 0 0;
  background:var(--karte);
  box-shadow:var(--schatten-blatt);
}

.cmsneu-gruppe{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  gap:2px;
  padding:6px 0;
}
.cmsneu-gruppe + .cmsneu-gruppe{ border-top:1px solid var(--line) }
.cmsneu-gruppe-kopf{
  display:flex;
  align-items:center;
  gap:7px;
  padding:4px 12px;
  font-size:11px;
  font-weight:600;
  color:var(--mut);
  letter-spacing:.3px;
  text-transform:uppercase;
}
/* Der Farbpunkt ersetzt die bunten Schriftfarben der alten Reiter: Die
   Wiedererkennung bleibt, das Bild wird ruhig. */
.cmsneu-gruppe-kopf::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--gruppe, var(--gr));
}

/* Die Reiterknöpfe dürfen KEINE eigenen Klassen tragen: cmsTab() setzt
   `className` neu und würde sie beim ersten Wechsel abräumen. Deshalb hängt
   alles an `.cms-tab` im Zusammenhang der Gruppe. */
.cmsneu-nav .cms-tab{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:var(--tap-min);
  padding:8px 12px;
  border:0;
  border-radius:var(--r-s);
  background:none;
  color:var(--ink);
  font-size:var(--schrift-normal);
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.cmsneu-nav .cms-tab svg{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:0;
  color:var(--mut);
  vertical-align:middle;
}
.cmsneu-nav .cms-tab:hover{ background:var(--gr-t) }
.cmsneu-nav .cms-tab.active{
  background:var(--gr-l);
  color:var(--gr-d);
  border-bottom:0;
}
.cmsneu-nav .cms-tab.active svg{ color:var(--gr) }

@media (min-width:640px){
  .cmsneu-nav{
    position:static;
    display:block;
    background:var(--karte);
    border-right:1px solid var(--line);
    overflow:hidden;
  }
  .cmsneu-nav > .cms-tabs{
    position:static;
    max-height:none;
    height:100%;
    overflow-y:auto;
    padding:8px 6px calc(8px + var(--sab));
    border-radius:0;
    box-shadow:none;
    background:none;
  }
  .cmsneu-gruppe-kopf{
    justify-content:center;
    padding:6px 2px;
    font-size:0;                 /* nur der Farbpunkt bleibt */
  }
  .cmsneu-nav .cms-tab{
    flex-direction:column;
    gap:3px;
    padding:6px 2px;
    font-size:11px;
    text-align:center;
    line-height:1.2;
  }
  .cmsneu-nav .cms-tab svg{ width:20px; height:20px }
}

/* Ab 1180 px ist Platz für ausgeschriebene Gruppen und Beschriftungen. */
@media (min-width:1180px){
  .cmsneu-gruppe-kopf{
    justify-content:flex-start;
    padding:6px 12px 2px;
    font-size:11px;
  }
  .cmsneu-nav .cms-tab{
    flex-direction:row;
    gap:10px;
    padding:7px 12px;
    font-size:var(--schrift-normal);
    text-align:left;
  }
  .cmsneu-gruppe{ padding:3px 0 }
  .cmsneu-nav > .cms-tabs{ padding:8px 10px calc(8px + var(--sab)) }
}

/* ── 5  Inhaltsbereich ────────────────────────────────────────────────── */

.cmsneu-inhalt{
  overflow-y:auto;
  overflow-x:hidden;
  padding:var(--pad);
  -webkit-overflow-scrolling:touch;
}
.cmsneu-inhalt > div{ max-width:1180px }

/* Die alte Reiterleiste brachte einen Abstand nach unten mit, der jetzt
   vom Raster kommt. */
.cms-tabs-wrap{ margin-bottom:0 }

/* ── 6  Bedienmaße (Spec F6) ──────────────────────────────────────────── */

/* Die Verfassung fordert 44 px. Im CMS waren Knöpfe 8 px hoch gepolstert
   und damit auf dem Telefon kaum zu treffen. */
.cmsneu-inhalt .cms-btn,
.cmsneu-inhalt button:not(.cms-tab),
#cms-modal-wrap button{
  min-height:var(--tap-min);
}
.cmsneu-inhalt input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.cmsneu-inhalt select,
#cms-modal-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
#cms-modal-wrap select{
  min-height:var(--tap-min);
}
/* Kästchen und Schalter bleiben klein, bekommen aber eine große Fläche. */
.cmsneu-inhalt input[type="checkbox"],
.cmsneu-inhalt input[type="radio"]{
  width:20px;
  height:20px;
  accent-color:var(--gr);
}
/* Schieberegler kamen im Browserblau daher und fielen aus dem Bild. */
.cmsneu-inhalt input[type="range"],
#cms-modal-wrap input[type="range"]{ accent-color:var(--gr) }

/* Chips und kleine Knöpfe aus den Fachmodulen: Sie kamen mit 36 bzw. 40 px
   und waren damit auf dem Telefon zu knapp. */
.cmsneu-inhalt .k-btn-sm,
.cmsneu-inhalt .cms-btn-sm,
.cmsneu-inhalt .cms-subtab{
  min-height:var(--tap-min);
}

/* Ausnahmen mit `!important`. Sie sind eng gefasst und hier begründet -
   nicht als Gewohnheit:
     - `.soc-cat-chip` bekommt seine 36 px in der Grundgestaltung selbst mit
       `!important`; ohne gleichen Nachdruck bliebe die Fläche zu klein.
     - Die Zoom-Leiste erzeugt social.js zur Laufzeit MIT Inline-Maßen, und
       inline schlägt jedes Gestaltungsblatt. */
.cmsneu-inhalt .soc-cat-chip{ min-height:var(--tap-min) !important }
.cmsneu-inhalt #soc-zoom-bar button,
.cmsneu-inhalt .soc-zoom-bar button,
.cmsneu-inhalt .k-btn.k-btn-sm{
  min-height:var(--tap-min) !important;
}
.cmsneu-inhalt #soc-zoom-bar button,
.cmsneu-inhalt .soc-zoom-bar button{
  min-width:var(--tap-min) !important;
}

/* ── 6a  Breite Inhalte auf schmalem Schirm ───────────────────────────── */

/* Tabellen in Bestellungen und Statistik sind breiter als ein Telefon. Sie
   ragten bisher aus dem Inhaltsbereich heraus und wurden dort abgeschnitten
   - die rechten Spalten waren nicht erreichbar. Sie rollen jetzt für sich,
   ohne die Seite zu verschieben. */
@media (max-width:700px){
  .cmsneu-inhalt table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Reihen von Unterreitern und Filtern brechen um, statt hinauszulaufen. */
.cmsneu-inhalt .cms-subtabs,
.cmsneu-inhalt .cms-subtab-row{ flex-wrap:wrap }

/* Der Wochenplan fordert fünf Spalten zu mindestens 180 px - zusammen
   948 px. Seine Umbruchregel misst aber die **Fensterbreite**, und die ist
   seit der Seitenleiste nicht mehr die Breite des Inhalts: Bei 1024 px
   blieben dem Inhalt nur 912 px, die Regel für 960 px griff nicht, und die
   letzte Spalte ragte hinaus.

   Statt den Haltepunkt zu verschieben (und beim nächsten Leistenmaß wieder
   danebenzuliegen) richtet sich das Raster jetzt nach dem Platz, den es
   tatsächlich hat. */
.cmsneu-inhalt .cms-grid{
  grid-template-columns:repeat(auto-fit, minmax(165px, 1fr));
}
/* Der Design-Bereich trägt seine Unterreiter in einer Reihe ohne eigene
   Klasse; dort greift die Umgebung des Knopfes. */
#cms-panel-cfg .cms-subtab{ flex:0 0 auto }
#cms-panel-cfg .cms-subtab:first-child{ margin-left:0 }
@media (max-width:700px){
  #cms-panel-cfg [style*="display:flex"]:has(> .cms-subtab){ flex-wrap:wrap }
}

/* Halbfett genügt - fett wirkt auf dem Bildschirm unruhig. Überschriften
   bringen aus dem Browser 700 mit und müssen ausdrücklich zurückgenommen
   werden; `b, strong, th` deckt sie nicht ab. */
.cmsneu-app b, .cmsneu-app strong, .cmsneu-app th,
#cms-modal-wrap b, #cms-modal-wrap strong,
.cmsneu-app h1, .cmsneu-app h2, .cmsneu-app h3,
.cmsneu-app h4, .cmsneu-app h5, .cmsneu-app h6,
#cms-modal-wrap h1, #cms-modal-wrap h2, #cms-modal-wrap h3,
#cms-modal-wrap h4, #cms-login h2{ font-weight:600 }

/* ── 6b  Einheitliche Kartenköpfe ─────────────────────────────────────── */

/* Die Vereinheitlichung geschieht in der Umformung (Regel U5b), nicht hier:
   Viele Kartenköpfe tragen ihr `background` inline mit `!important`, und
   dagegen kommt kein Gestaltungsblatt an. Diese Regel deckt nur die Köpfe
   ohne eigenen Wert ab. */
.cmsneu-inhalt .cms-card-header{ background:var(--gr) }

/* „Vorbestellung aktiviert" beim Metzger stand in Rot mit rotem Grund. Auch
   hier meinte Rot Fleisch, nicht Fehler - die Zeile las sich wie eine
   Störungsmeldung, obwohl sie einen eingeschalteten Zustand anzeigt. */
#cms-panel-metzger div:has(> label > #fm-cfg-aktiv){
  background:var(--gr-l) !important;
  border-color:var(--gr-l) !important;
}
#cms-panel-metzger label:has(> #fm-cfg-aktiv){ color:var(--gr-d) !important }

/* ── 7a  Das Innere der Dialoge ───────────────────────────────────────── */

/* Die Dialoge entstehen zur Laufzeit in cms.js. Ihre Werte stehen inzwischen
   auf dem Schema, ihr Aufbau kam aber aus der alten Zeit: 30 px hohe Felder,
   getönte Bänder statt Karten, Rundungen von 4 bis 16 px nebeneinander. Sie
   sahen deshalb weiter alt aus, obwohl die Farben stimmten.

   Hier bekommen sie dasselbe Bild wie der übrige Kiosk: weiße Karten mit
   Haarlinie, ein Radius, ruhige Abstände. Am Markup ändert sich nichts. */

#cms-modal-wrap .cms-modal{
  border-radius:var(--r-l);
  box-shadow:var(--schatten-2);
  border:1px solid var(--line);
}
#cms-modal-wrap .cms-modal-header{
  background:var(--karte);
  border-bottom:1px solid var(--line);
  padding:12px 16px;
}
#cms-modal-wrap .cms-modal-header h3{
  font-size:var(--schrift-gross);
  color:var(--gr-d);
}
#cms-modal-wrap .cms-modal-footer{
  background:var(--karte);
  border-top:1px solid var(--line);
}

/* Die Artikelzeile war ein getöntes Band mit grünem Balken links. Als Karte
   ist erkennbar, wo eine Position anfängt und aufhört. */
#cms-modal-wrap .cms-ang-row{
  background:var(--karte) !important;
  border:1px solid var(--line) !important;
  border-left:1px solid var(--line) !important;
  border-radius:var(--r-m) !important;
  box-shadow:var(--schatten-1);
  padding:14px 12px 12px !important;
}
#cms-modal-wrap .cms-ang-row:hover{
  border-color:var(--gr) !important;
  box-shadow:var(--schatten-2);
}
#cms-modal-wrap .cms-ang-row-num{
  background:var(--gr);
  border-radius:999px;
  padding:1px 7px;
}
#cms-modal-wrap .cms-ang-fields{ gap:var(--gap) }

/* Die Felder waren 30 px hoch und 12 px klein - im Laden nicht zu treffen
   und schwer zu lesen. */
#cms-modal-wrap .cms-input,
#cms-modal-wrap .cms-ang-fields .cms-input{
  height:auto;
  min-height:var(--tap-min);
  padding:8px 10px;
  font-size:var(--schrift-normal);
  border:1px solid var(--line);
  border-radius:var(--r-s);
  background:var(--karte);
  color:var(--ink);
}
#cms-modal-wrap .cms-input:focus,
#cms-modal-wrap select:focus,
#cms-modal-wrap textarea:focus{
  outline:2px solid var(--gr);
  outline-offset:1px;
  border-color:var(--gr);
}

/* Die drei Bildknöpfe waren 23 bis 26 px breit. Sie bekommen die volle
   Antippfläche - schmaler wäre bequemer für das Auge, aber die 44 px sind
   nicht verhandelbar.

   Der Hintergrund bleibt bewusst OHNE `!important`: Der Einfüge-Knopf färbt
   sich beim Antippen gelb und schreibt dafür seinen Hintergrund direkt ins
   Element. Ein `!important` im Blatt würde diese Rückmeldung verschlucken -
   der Knopf sähe aus, als täte er nichts. */
#cms-modal-wrap .cms-ang-row-img{ gap:6px }
#cms-modal-wrap .cms-ang-row-img button{
  min-width:var(--tap-min);
  min-height:var(--tap-min);
  border:1px solid var(--line) !important;
  border-radius:var(--r-s) !important;
  padding:0 8px !important;
  white-space:nowrap;
}
#cms-modal-wrap .cms-ang-row-img button:hover{ border-color:var(--gr) !important }
#cms-modal-wrap .cms-bild-preview{
  border-radius:var(--r-s) !important;
  border:1px solid var(--line) !important;
}

/* ── 7  Dialoge als Blatt ─────────────────────────────────────────────── */

/* Dasselbe Muster wie im Kiosk: Telefon als Blatt am unteren Rand, ab
   640 px mittige Karte, ab 1180 px angedockte Spalte rechts. */
#cms-modal-wrap{
  position:fixed;
  inset:0;
  z-index:9400;
  align-items:flex-end;
  justify-content:center;
  padding:0;
}
#cms-modal-wrap > .cms-modal,
#cms-modal-wrap > div > .cms-modal{
  width:100%;
  max-width:none;
  max-height:88dvh;
  max-height:88svh;
  border-radius:var(--r-l) var(--r-l) 0 0;
  box-shadow:var(--schatten-blatt);
  padding-bottom:var(--sab);
}
@media (min-width:640px){
  #cms-modal-wrap{ align-items:center; padding:24px }
  #cms-modal-wrap > .cms-modal,
  #cms-modal-wrap > div > .cms-modal{
    max-width:680px;
    max-height:86dvh;
    border-radius:var(--r-l);
    padding-bottom:0;
  }
}

/* Der Kopf eines Dialogs trägt Titel und Knöpfe in einer Reihe. Auf einem
   schmalen Schirm lief „Abbrechen" über den rechten Rand hinaus und war
   nicht mehr zu treffen. Die Reihe bricht jetzt um. */
#cms-modal-wrap .cms-modal-header{ flex-wrap:wrap; row-gap:8px }
@media (max-width:520px){
  #cms-modal-wrap .cms-modal-header > div{ flex-wrap:wrap }
  #cms-modal-wrap .cms-modal-header > *{ min-width:0 }
}

/* ── 8  Anmeldung ─────────────────────────────────────────────────────── */

#cms-login{
  min-height:100dvh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--pad);
  max-width:none;
}
#cms-login .cms-login-box{
  width:100%;
  max-width:380px;
  border-radius:var(--r-l);
  box-shadow:var(--schatten-2);
}
#cms-login input, #cms-login button{ min-height:var(--tap-min) }

/* ── 9  Dunkles Farbschema ────────────────────────────────────────────── */

/* Die Werte des dunklen Schemas stehen in css/dl-design.css. Hier bleiben
   nur die Aliasse: Die Grundgestaltung setzt `--c-m-*` ebenfalls unter
   `html[data-theme="dark"]` und haette sonst das gleiche Gewicht bei
   spaeterer Stelle. */
html[data-theme="dark"]{
  --c-m-bg:var(--flaeche);
  --c-m-pri:var(--gr);
  --c-m-pri-light:var(--gr-l);
  --c-m-text:var(--ink);
  --c-m-muted:var(--mut);
  --c-green:var(--gr);
  --c-muted:var(--mut);
  --c-text:var(--ink);
  --c-border:var(--line);
  --c-card:var(--karte);
  --c-bg:var(--flaeche);
}
html[data-theme="dark"] .cmsneu-kopf,
html[data-theme="dark"] .cmsneu-nav{ background:var(--karte) }
html[data-theme="dark"] .cmsneu-kopf-acts .cms-btn,
html[data-theme="dark"] .cmsneu-menue{
  background:var(--karte);
  color:var(--ink);
  border-color:var(--line);
}

/* Der Social-Bereich benutzt Bausteine aus dem Kiosk (`k-order`, `k-btn`,
   `k-filter-bar`). Die Grundgestaltung setzt sie über `#cms-panel-social`
   auf Weiß - eine Kennung schlägt jede Klassenregel, auch die des dunklen
   Schemas in admin-dark.css. Im Dunkeln blieben die Karten deshalb weiß,
   während der Text hell wurde: helle Schrift auf weißem Grund.

   Das ist ein Bestandsfehler, kein Ergebnis des Umbaus - er tritt in der
   gewohnten Fassung genauso auf. Er wird hier mitbehoben, weil er beim
   Durchsehen aufgefallen ist. */
html[data-theme="dark"] #cms-panel-social .k-order,
html[data-theme="dark"] #cms-panel-social .k-btn-outline,
html[data-theme="dark"] #cms-panel-social .k-filter-bar,
html[data-theme="dark"] #cms-panel-social .soc-card,
html[data-theme="dark"] .cmsneu-inhalt .k-order,
html[data-theme="dark"] .cmsneu-inhalt .soc-card{
  background:var(--karte);
  color:var(--ink);
  border-color:var(--line);
}