/* Automationsbereich wie ManyChat (Umzug 22.10.2026, Teil B, Auftrag auftrag-mcu-liste.md). Ersetzt den Mohana-Look
   vom 21.10. (blaues Band mit Wellen, sand und koralle) für Kopf, Unternavigation, Liste, Ordner, Basics, Keywords, Tags
   und Felder, Auswertung, Kontakte und den ManyChat-Reiter. Maße und Farben aus wissen/manychat-oberflaeche.md
   Abschnitt 1: Seite #f5f5f5 mit weißen Karten, Kopfleiste 60 mit Linie, Unternavigation 196 mit grau hinterlegtem
   aktivem Eintrag, Blau #006be2, Rundungen 6/4/10, Höhen 36. Alles läuft über die Tokens --mc-* unten; im Bereich
   werden die Rollen der App (--grund, --text, --tinte ...) auf diese Tokens umgelegt, damit alle Bausteine darin
   denselben Look bekommen. Dunkel hat ManyChat nicht: eine ruhige dunkle Fassung mit denselben Formen, jeder Text
   mindestens 4,5:1 auf seiner Fläche (Rechnung im Bericht). Der Flow-Builder (Teil C) behält seine Abschnitte unten,
   solange der Editor offen ist, gelten die Rollen der App. Lädt nach allen anderen Stylesheets. */

/* ---------- Tokens ---------- */
:root {
  --mc-seite: #f5f5f5; --mc-karte: #ffffff; --mc-flaeche: #f5f5f5; --mc-hover: #efefef; --mc-aktiv: #d6d6d6; --mc-gedrueckt: #ebebeb;
  --mc-text: #292929; --mc-text-2: #707070; --mc-linie: #e7eaee; --mc-rand: #d6d6d6; --mc-rand-hover: #878787;
  --mc-blau: #006be2; --mc-blau-hover: #0059be; --mc-blau-druck: #00418f; --mc-blau-text: #006be2; --mc-auf-blau: #ffffff;
  --mc-fokus: #2e86fd; --mc-fokus-innen: #ffffff;
  --mc-info: #eff6ff; --mc-info-rand: #c2dbff; --mc-info-text: #0059be;
  --mc-live: #d52b0d; --mc-auf-live: #ffffff; --mc-gefahr: #d52b0d; --mc-gefahr-text: #c4300f;
  --mc-gruen: #006d36; --mc-gruen-grund: #deffe6; --mc-gruen-rand: #8beea8;
  --mc-warn: #a35f00; --mc-warn-grund: #fff2e0; --mc-warn-rand: #fddb9b;
  --mc-entwurf: #f6be6f; --mc-ig: #e1306c; --mc-beliebt: #bb4f00;
  --mc-ring: 0 0 0 0 transparent;
  --mc-schatten-karte: 0 4px 8px rgb(32 34 36 / .03), 0 1px 2px rgb(0 0 0 / .08);
  --mc-schatten-karte-hover: 0 6px 14px rgb(32 34 36 / .07), 0 1px 2px rgb(0 0 0 / .1);
  --mc-schatten-ordner: 0 4px 6px rgb(32 34 36 / .03), 0 1px 2px rgb(0 0 0 / .06);
  --mc-schatten-menue: 0 8px 24px rgb(32 34 36 / .15), 0 0 0 1px var(--mc-rand);
  --mc-r: 6px; --mc-r-klein: 4px; --mc-r-gross: 10px; --mc-r-pille: 18px;
  --mc-nav: 196px; --mc-kopf: 60px; --mc-hoehe: 36px;
  --mc-fokus-ring: 0 0 0 2px var(--mc-fokus-innen), 0 0 0 4px var(--mc-fokus);
}
:root[data-theme="dark"] {
  --mc-seite: #141516; --mc-karte: #1e1f21; --mc-flaeche: #26282a; --mc-hover: #2a2c2f; --mc-aktiv: #33363a; --mc-gedrueckt: #2e3033;
  --mc-text: #ececec; --mc-text-2: #a6a6a6; --mc-linie: #2f3134; --mc-rand: #3d4044; --mc-rand-hover: #6b6f74;
  --mc-blau: #2a6fd0; --mc-blau-hover: #3a7ddc; --mc-blau-druck: #1f5fb8; --mc-blau-text: #6aa8ff; --mc-auf-blau: #ffffff;
  --mc-fokus: #6aa8ff; --mc-fokus-innen: #141516;
  --mc-info: #142338; --mc-info-rand: #24456e; --mc-info-text: #8fbfff;
  --mc-live: #c4300f; --mc-auf-live: #ffffff; --mc-gefahr: #c4300f; --mc-gefahr-text: #ff8f75;
  --mc-gruen: #6fdc95; --mc-gruen-grund: #12301e; --mc-gruen-rand: #1f5a35;
  --mc-warn: #f0b45e; --mc-warn-grund: #33240e; --mc-warn-rand: #5c4318;
  --mc-entwurf: #f0b45e; --mc-ig: #f06292; --mc-beliebt: #b04a00;
  --mc-ring: 0 0 0 1px #2f3134;
  --mc-schatten-karte: 0 1px 2px rgb(0 0 0 / .4), 0 0 0 1px #2c2e31;
  --mc-schatten-karte-hover: 0 4px 12px rgb(0 0 0 / .45), 0 0 0 1px #45484d;
  --mc-schatten-ordner: 0 1px 2px rgb(0 0 0 / .4), 0 0 0 1px #2c2e31;
  --mc-schatten-menue: 0 8px 24px rgb(0 0 0 / .5), 0 0 0 1px var(--mc-rand);
}

/* Rollen der App im Bereich auf die ManyChat-Tokens umlegen (nicht im offenen Editor, der gehört Teil C). Dialoge und
   Menüs hängen am body und bekommen dieselben Rollen. */
.auto-seite:not(:has(.bk)), .al-overlay, .al-menue, .al-geist, .ae-dialog, .ae-pop, .kn-leiste, .kn-dialog {
  --grund: var(--mc-karte); --flaeche: var(--mc-flaeche); --flaeche-2: var(--mc-gedrueckt); --linie: var(--mc-linie); --linie-stark: var(--mc-rand);
  --text: var(--mc-text); --text-2: var(--mc-text-2); --text-3: var(--mc-text-2);
  --tinte: var(--mc-blau); --tinte-text: var(--mc-auf-blau); --akzent: var(--mc-blau-text); --akzent-hell: var(--mc-fokus);
  --rund: var(--mc-r); --rund-mittel: var(--mc-r); --rund-klein: var(--mc-r); --rund-mini: var(--mc-r-klein);
  --schrift-marke: var(--schrift);
  --schatten: var(--mc-schatten-menue); --schatten-klein: var(--mc-schatten-ordner);
  color: var(--text);
}
#inhalt:has(> .auto-seite):not(:has(.bk)) { background: var(--mc-seite); }

/* Knöpfe wie ManyChat: primär blau 36 hoch, sekundär weiß mit Rand, Fokus als doppelter Ring */
.auto-seite:not(:has(.bk)) .knopf, .al-overlay .knopf, .ae-dialog .knopf, .kn-dialog .knopf { height: var(--mc-hoehe); padding: 0 var(--abst-12); border: 1px solid var(--mc-rand); border-radius: var(--mc-r); background: var(--mc-karte); color: var(--mc-text); font-size: var(--sg-14); font-weight: 500; }
@media (hover: hover) { .auto-seite:not(:has(.bk)) .knopf:hover:not(:disabled), .al-overlay .knopf:hover:not(:disabled), .ae-dialog .knopf:hover:not(:disabled) { background: var(--mc-karte); border-color: var(--mc-rand-hover); } }
.auto-seite:not(:has(.bk)) .knopf.primaer, .al-overlay .knopf.primaer, .ae-dialog .knopf.primaer { background: var(--mc-blau); border-color: var(--mc-blau); color: var(--mc-auf-blau); }
@media (hover: hover) { .auto-seite:not(:has(.bk)) .knopf.primaer:hover:not(:disabled), .al-overlay .knopf.primaer:hover:not(:disabled), .ae-dialog .knopf.primaer:hover:not(:disabled) { background: var(--mc-blau-hover); border-color: var(--mc-blau-hover); opacity: 1; } }
.auto-seite:not(:has(.bk)) .knopf.primaer:active:not(:disabled), .al-overlay .knopf.primaer:active:not(:disabled) { background: var(--mc-blau-druck); }
.auto-seite:not(:has(.bk)) .klein-knopf, .al-overlay .klein-knopf { height: 32px; }
.auto-seite:not(:has(.bk)) :focus-visible, .al-overlay :focus-visible, .al-menue :focus-visible, .ae-dialog :focus-visible, .ae-pop :focus-visible { outline: none; box-shadow: var(--mc-fokus-ring); border-radius: var(--mc-r); }
.auto-seite:not(:has(.bk)) .schalter input:focus-visible + .schalter-bahn { outline: none; box-shadow: var(--mc-fokus-ring); }
/* Schalter blau wie ManyChat (an blau, aus grau) */
.auto-seite:not(:has(.bk)) .schalter input:checked + .schalter-bahn, .al-overlay .schalter input:checked + .schalter-bahn { background: var(--mc-blau); }
.auto-seite:not(:has(.bk)) .schalter-bahn { background: var(--mc-rand); box-shadow: none; }

/* ---------- Rollen je Farbe ---------- */
:root {
  /* Zustandspunkt: hell der Textton (mindestens 5,77:1 auf Weiß), dunkel der Punktton */
  --salbei-punkt: var(--salbei-t); --sonne-punkt: var(--sonne-t); --grau-punkt: var(--grau-t); --beere-punkt: var(--beere-t); --pfirsich-punkt: var(--pfirsich-t); --koralle-punkt: var(--koralle-t); --meer-punkt: var(--meer-t); --sand-punkt: var(--sand-t);
  --auto-band: linear-gradient(140deg, var(--auto-band-1) 0%, var(--auto-band-2) 45%, var(--auto-band-3) 100%);
  --auf-farbe-leise: color-mix(in oklch, var(--auf-farbe) 20%, transparent);
}
:root[data-theme="dark"] {
  --salbei-punkt: var(--salbei-p); --sonne-punkt: var(--sonne-p); --grau-punkt: var(--grau-p); --beere-punkt: var(--beere-p); --pfirsich-punkt: var(--pfirsich-p); --koralle-punkt: var(--koralle-p); --meer-punkt: var(--meer-p); --sand-punkt: var(--sand-p);
}
.f-koralle, .t-koralle { --v: var(--koralle-v); --g2: var(--koralle-g2); --pk: var(--koralle-punkt); }
.f-sand, .t-sand { --v: var(--sand-v); --g2: var(--sand-g2); --pk: var(--sand-punkt); }
.f-salbei, .t-salbei { --v: var(--salbei-v); --g2: var(--salbei-g2); --pk: var(--salbei-punkt); }
.f-meer, .t-meer { --v: var(--meer-v); --g2: var(--meer-g2); --pk: var(--meer-punkt); }
.f-lavendel, .t-lavendel { --v: var(--lavendel-v); --g2: var(--lavendel-g2); --pk: var(--lavendel-t); }
.f-sonne, .t-sonne { --v: var(--sonne-v); --g2: var(--sonne-g2); --pk: var(--sonne-punkt); }
.f-grau, .t-grau { --v: var(--grau-v); --g2: var(--grau-g2); --pk: var(--grau-punkt); }
.f-beere, .t-beere { --v: var(--beere-v); --g2: var(--beere-g2); --pk: var(--beere-punkt); }
.f-pfirsich, .t-pfirsich { --v: var(--pfirsich-v); --g2: var(--pfirsich-g2); --pk: var(--pfirsich-punkt); }
.t-sonne { --fb-kopf-g: var(--sonne-g); --fb-kopf-t: var(--sonne-t); --fb-kopf-p: var(--sonne-p); }
@keyframes auto-ein { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Kopf: schlichte Titelzeile mit Linie, darunter Navigation links und Inhalt rechts ---------- */
.seite.auto-seite:not(:has(.bk)) { max-width: none; padding: 0; }
.auto-kopf { padding: 0 var(--abst-32); border-bottom: 1px solid var(--mc-rand); }
.seite.auto-seite .auto-kopf .seite-kopf { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--abst-16); row-gap: 0; min-height: var(--mc-kopf); margin: 0; }
.auto-kopf .sk-zeile { flex: 1 1 auto; min-height: var(--mc-kopf); }
.auto-kopf .sk-werkzeuge { margin: 0; }
.auto-kopf .seite-kopf h1 { font: 700 var(--sg-24)/36px var(--schrift); letter-spacing: -.01em; color: var(--mc-text); }
.auto-kopf .sk-werkzeuge:empty { display: none; }
.auto-rahmen { display: grid; grid-template-columns: var(--mc-nav) minmax(0, 1fr); gap: var(--abst-48); align-items: start; max-width: 1400px; padding: var(--abst-24) var(--abst-32) var(--abst-64); }
.auto-nav { position: sticky; top: var(--abst-24); display: grid; gap: var(--abst-2); }
.auto-nav a { display: flex; align-items: center; gap: var(--abst-8); height: var(--mc-hoehe); padding: 0 var(--abst-8); border-radius: var(--mc-r); color: var(--mc-text); font-size: var(--sg-14); line-height: 20px; text-decoration: none; white-space: nowrap; min-width: 0; transition: background-color var(--dauer-2) var(--kurve); }
.auto-nav a > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.auto-nav a .ic { width: 16px; height: 16px; color: var(--mc-text-2); flex: none; }
.auto-nav a[aria-current="page"] { background: var(--mc-aktiv); font-weight: 500; }
@media (hover: hover) { .auto-nav a:not([aria-current="page"]):hover { background: var(--mc-hover); text-decoration: none; } }
.auto-nav .ki-zahl { margin-left: auto; }
.auto-inhalt { min-width: 0; }
.auto-inhalt > .abschnitt:first-child, .auto-inhalt > .al-abschnitt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* offener Editor (Teil C): ohne Navigation und ohne eigenen Rahmen, Breite und Ränder bestimmt der Editor wie bisher */
.auto-rahmen:has(.bk) { display: block; padding: 0; margin: 0; max-width: none; }
.auto-rahmen:has(.bk) > .auto-nav { display: none; }
.auto-seite:has(.bk) .auto-kopf { padding: 0; }

/* Mittlere Breite: Navigation als waagrechte Reiterzeile über dem Inhalt (wie die ManyChat-App) */
@media (max-width: 1099px) {
  .auto-rahmen { grid-template-columns: minmax(0, 1fr); gap: var(--abst-16); padding-top: 0; }
  .auto-nav { position: static; display: flex; gap: var(--abst-4); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--abst-32)); padding: var(--abst-8) var(--abst-32);
    border-bottom: 1px solid var(--mc-rand); scroll-snap-type: x proximity; }
  .auto-nav::-webkit-scrollbar { display: none; }
  .auto-nav a { flex: none; scroll-snap-align: start; padding: 0 var(--abst-12); }
  .auto-nav .ki-zahl { margin-left: var(--abst-4); }
}
@media (max-width: 759px) {
  .auto-kopf { padding: 0 var(--abst-16); margin: calc(-1 * var(--abst-12)) 0 0; }
  .auto-kopf .seite-kopf h1 { font-size: var(--sg-20); line-height: 28px; }
  .seite.auto-seite .auto-kopf .seite-kopf { padding: var(--abst-4) 0 var(--abst-8); }
  .auto-rahmen { padding: 0 var(--abst-16) var(--abst-32); gap: var(--abst-12); }
  .auto-nav { margin: 0 calc(-1 * var(--abst-16)); padding: var(--abst-4) var(--abst-16); background: var(--mc-seite); }
  .auto-nav a { height: var(--ziel); }
  .auto-nav a .ic { display: none; }
}

/* ---------- Zustände ---------- */
/* Liste: Lozenge wie ManyChat (LIVE rot gefüllt, AUS und ENTWURF grau), gelber Punkt davor bei offenem Entwurf */
.al-zustand { display: inline-flex; align-items: center; gap: var(--abst-8); }
.al-entwurf-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--mc-entwurf); }

/* Protokoll unter der Liste: Ergebnis als Punkt mit Wort, Probe als Ring */
.status-chip.erg { background: transparent; padding: 0; gap: 6px; color: var(--t); }
.status-chip.erg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pk, var(--p)); flex: none; }
.status-chip.erg.ring::before { background: transparent; box-shadow: inset 0 0 0 2px var(--pk, var(--p)); }

/* Hauptschalter in der Kopfzeile der Liste: Info-Blau wie ManyChat-Hinweise, an = voller Punkt, aus = Ring */
.al-hs { background: var(--mc-info); color: var(--mc-info-text); box-shadow: inset 0 0 0 1px var(--mc-info-rand); }
@media (hover: hover) { .al-hs:hover { background: var(--mc-info); color: var(--mc-info-text); box-shadow: inset 0 0 0 1px var(--mc-blau-text); } }
.al-hs > .ic { color: var(--mc-info-text); }
.al-hs-punkt { background: transparent; box-shadow: inset 0 0 0 2px var(--mc-gruen); }
.al-hs-punkt.an { background: var(--mc-gruen); box-shadow: none; }

/* Menüs wachsen aus ihrem Knopf, unter 300 ms */
.al-menue, .fb-menue { animation: auto-ein 160ms var(--kurve-rein); transform-origin: top left; }

/* Flow-Builder, Schrittliste und Panels: Look steht in flowbuilder.css und baukasten.css */
@media (prefers-reduced-motion: reduce) {
  .al-menue, .fb-menue { animation: none; }
  .auto-nav a { transition: none; }
}