/* Automationsliste wie ManyChat (Teil B2c), Raster und Abstände nach wissen/manychat-oberflaeche.md Abschnitt 1 bis 3:
   Karten r10 mit weichem Schatten, Ordnerkacheln 42 hoch, Suche und Auswahl 36 hoch r6, Lozenge 12/16, Menü 245 breit r10,
   Vorlagen-Dialog r8 mit Navigation 196 links, Vorlagenkarten r6. Farben aus den Variablen der App (Mohana statt
   ManyChat-Blau): Live koralle, Entwurfspunkt sonne, Stichwort-Chips koralle hell, Auswahl und Fortschritt salbei.
   Rundungen seit B3b wie ManyChat 6/4/10: Knöpfe und Felder 6, kleine Marken 4, Karten, Menüs und Dialoge 10. */

.al, .al-overlay, .al-menue { --al-rund-karte: 10px; --al-rund-knopf: 6px; --al-rund-klein: 4px; }
.al .knopf, .al .icon-knopf, .al .text-knopf, .al-overlay .knopf, .al-overlay .icon-knopf, .al-overlay .text-knopf, .al-overlay .feld, .al-menue .icon-knopf { border-radius: var(--al-rund-knopf); }
.al .umschalter, .al-overlay .umschalter { border-radius: var(--al-rund-knopf); }
.al .umschalter button, .al-overlay .umschalter button, .al-overlay .umschalter label > span { border-radius: var(--al-rund-klein); }

.al {
  --al-schatten: 0 4px 8px rgb(32 34 36 / .03), 0 1px 2px rgb(0 0 0 / .08), 0 0 0 var(--haar) var(--linie-stark);
  --al-live-g: var(--koralle-t); --al-live-t: #ffffff;
  --al-neu: var(--warm-text);
  --al-sp-laeufe: 72px; --al-sp-ctr: 84px; --al-sp-zeit: 124px; --al-sp-mehr: 36px; --al-sp-schalter: 46px;
  display: grid; gap: var(--abst-16);
}
:root[data-theme="dark"] .al, :root[data-theme="dark"] .al-overlay { --al-live-g: var(--koralle-p); --al-live-t: #2a120b; --al-neu: var(--warm-text); }
.al-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.al-raum { flex: 1; }

/* B4b: kompakter Kopfbereich. Über der Liste steht der Hauptschalter schon als Zeile neben dem Titel, der Untertitel
   der Seite wiederholt ihn nur und entfällt, solange die Liste zu sehen ist (im Editor bleibt er). */
.seite:has(.al-abschnitt) .seite-kopf > p.leise { display: none; }
.seite:has(.al-abschnitt) .seite-kopf { margin-bottom: var(--abst-12); }
.al:not(.al-im-korb) { gap: var(--abst-12); }
.al:not(.al-im-korb) .al-kopf { min-height: 36px; }
.auto-inhalt > .al-abschnitt:first-child { margin-top: 0; }

/* Kopf: Titel 24/36 w700 oder Pfad "Meine Automationen > Ordner", rechts "Neue Automation" */
.al-kopf { display: flex; align-items: center; gap: var(--abst-12); min-height: 40px; }
.al-pfad { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--abst-8); min-width: 0; flex: 1; }
.al-titel { font: 700 var(--sg-24)/36px var(--schrift-marke); letter-spacing: -.015em; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none; }
.al-titel-ordner { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--linie-stark); }
.al-anzahl { font: 400 var(--sg-16)/1 var(--schrift); color: var(--text-3); letter-spacing: 0; }
.al-pfad-link { font-size: var(--sg-14); color: var(--text-2); white-space: nowrap; padding: var(--abst-4) 0; max-width: 200px; overflow: hidden; text-overflow: ellipsis; border-radius: var(--al-rund-klein); }
@media (hover: hover) { .al-pfad-link:hover { color: var(--text); text-decoration: underline; } }
.al-pfad-trenn { width: 16px; height: 16px; color: var(--text-3); }
.al-stift { width: 32px; height: 32px; }
.al-stift .ic { width: 15px; height: 15px; }
.al-neu { flex: none; }

/* B4b: Hauptschalter als kompakte Zeile neben dem Titel (Punkt, kurzer Satz, Konten mit Zugang), Klick klappt die
   Details auf (Hinweis, Rechte je Konto, Webhook); Zustand gemerkt in localStorage (pf.auto.liste, hs) */
.al-hs { display: inline-flex; align-items: center; gap: var(--abst-8); height: 36px; padding: 0 var(--abst-8) 0 var(--abst-12); border-radius: var(--al-rund-knopf); background: var(--flaeche); color: var(--text-2); font-size: var(--sg-13); flex: none; max-width: 100%; min-width: 0; }
@media (hover: hover) { .al-hs:hover { background: var(--flaeche-2); color: var(--text); } }
.al-hs > .ic { width: 14px; height: 14px; color: var(--text-3); transition: transform .15s; }
.al-hs.offen > .ic { transform: rotate(180deg); }
.al-hs-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.al-hs-punkt.an { background: var(--salbei-p); }
.al-hs-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.al-hs-kurz { display: none; }
.al-hs-konto { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.al-hs-konto .ic { width: 12px; height: 12px; }
.al-hs-konto.ok .ic { color: var(--salbei-p); }
.al-hs-konto.teil .ic { color: var(--warm); }
.al-hs-details { display: grid; gap: var(--abst-4); padding: var(--abst-12) var(--abst-16); border-radius: var(--al-rund-karte); background: var(--flaeche); font-size: var(--sg-13); margin-top: calc(-1 * var(--abst-4)); }
.al-hs-details .as-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abst-4) var(--abst-8); }

/* B4b: Werkzeugzeile: Suche, Auslöserart, Zustand links, Papierkorb, Reihenfolge, Sortierung und Ansicht rechts */
.al-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abst-8) var(--abst-16); }
.al-werkzeuge .al-leiste { flex: 1 1 auto; justify-content: flex-end; }
.al-werkzeuge .al-leiste .al-raum { display: none; }
.al-werkzeuge .al-leiste > :first-child { margin-right: auto; }
.al-im-korb .al-werkzeuge .al-leiste { justify-content: flex-start; }

/* Filterzeile: Suche, Auslöserart, Zustand; je 36 hoch, r6, Haarlinie */
.al-filter { display: grid; grid-template-columns: 240px 180px 150px; gap: var(--abst-12); }
.al-suche { position: relative; display: flex; align-items: center; }
.al-suche .ic { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.al-suche input { width: 100%; height: 36px; padding: 0 var(--abst-12) 0 34px; border: var(--haar) solid var(--linie-stark); border-radius: var(--rund-klein); background: var(--grund); font-size: var(--sg-14); outline: none; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.al-suche input:focus, .al-auswahl select:focus { border-color: var(--text-3); box-shadow: 0 0 0 3px var(--flaeche-2); }
.al-suche input::placeholder { color: var(--text-3); }
.al-auswahl, .al-sort-wahl { position: relative; display: flex; align-items: center; }
.al-auswahl select, .al-sort-wahl select { appearance: none; -webkit-appearance: none; width: 100%; height: 36px; padding: 0 32px 0 var(--abst-12); border: var(--haar) solid var(--linie-stark); border-radius: var(--rund-klein); background: var(--grund); color: var(--text); font: inherit; font-size: var(--sg-14); cursor: pointer; outline: none; box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.al-auswahl > .ic, .al-sort-wahl > .ic { position: absolute; right: 10px; width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }
.al-auswahl.klein select { height: 30px; font-size: var(--sg-13); }

/* Ordnerkacheln im Raster (ab 1440 fünf Spalten, damit "Neuer Ordner" mit in die Zeile passt), 42 hoch, r10; "Neuer Ordner" gestrichelt */
.al-ordner { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--abst-12); }
.al-ordner-kachel { display: flex; align-items: center; gap: var(--abst-12); height: 42px; padding: var(--abst-8) var(--abst-12) var(--abst-8) var(--abst-12); background: var(--grund); border-radius: var(--al-rund-karte); box-shadow: 0 4px 6px rgb(32 34 36 / .03), 0 0 0 var(--haar) var(--linie-stark); text-align: left; min-width: 0; font-size: var(--sg-14); font-weight: 500; }
@media (hover: hover) { .al-ordner-kachel:hover { box-shadow: 0 4px 10px rgb(32 34 36 / .07), 0 0 0 var(--haar) var(--text-3); } }
.al-ordner-ic { width: 20px; height: 20px; color: var(--warm); }
.al-ordner-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-ordner-zahl { color: var(--text-3); font-size: var(--sg-12); font-variant-numeric: tabular-nums; }
.al-ordner-neu, .al-neu-flaeche { color: var(--al-neu); background: transparent; box-shadow: none; border: 1px dashed color-mix(in srgb, var(--warm) 55%, transparent); }
.al-ordner-neu .ic { width: 16px; height: 16px; }
.al-ordner-neu > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (hover: hover) { .al-ordner-neu:hover, .al-neu-flaeche:hover { background: var(--koralle-g); box-shadow: none; } }

/* Leiste: Papierkorb links, Sortierung und Ansicht rechts (12 px, leise) */
.al-leiste { display: flex; align-items: center; gap: var(--abst-12); min-height: 32px; }
.al-link { display: inline-flex; align-items: center; gap: var(--abst-8); height: 32px; white-space: nowrap; padding: 0 var(--abst-4); border-radius: var(--rund-mini); font-size: var(--sg-13); font-weight: 500; color: var(--al-neu); }
.al-link.leise { color: var(--text-2); font-weight: 400; font-size: var(--sg-12); }
.al-link .ic { width: 15px; height: 15px; }
@media (hover: hover) { .al-link:hover { text-decoration: underline; } }
.al-link-zahl { color: var(--text-3); font-weight: 400; }
.al-sort-wahl select { height: 32px; font-size: var(--sg-12); color: var(--text-2); border-color: transparent; box-shadow: none; background: transparent; padding-left: var(--abst-8); }
.al-sort-wahl select:hover { background: var(--flaeche); }
.al-korb-hinweis { margin-top: calc(-1 * var(--abst-8)); }
/* Reihenfolge erklärt: kleines i, der Text klappt als Kasten darunter auf */
.al-rang-info { position: relative; }
.al-rang-info > summary { list-style: none; cursor: pointer; }
.al-rang-info > summary::-webkit-details-marker { display: none; }
.al-rang-info-text { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; width: min(360px, calc(100vw - 32px)); padding: var(--abst-12); border-radius: var(--al-rund-karte); background: var(--grund); box-shadow: 0 8px 24px rgb(32 34 36 / .15), 0 0 0 var(--haar) var(--linie-stark); }
.al .al-rang-info-text .bk-rang-kopf { margin: 0; }
.al-fehler-text { color: var(--koralle-t); }
.al > .bk-rang-kopf { margin: calc(-1 * var(--abst-8)) 0 0; }

/* Spaltenköpfe 12 px, bleiben beim Scrollen stehen */
.al-spalten { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--abst-8); height: 36px; padding: 0 var(--abst-24); background: var(--grund); color: var(--text-3); font-size: var(--sg-12); margin-bottom: calc(-1 * var(--abst-8)); }
.al-spalte { display: inline-flex; align-items: center; gap: var(--abst-4); font-size: var(--sg-12); color: var(--text-3); white-space: nowrap; }
button.al-spalte:hover { color: var(--text); }
.al-sp-name { flex: 1; min-width: 0; }
.al-sp-zahl { justify-content: flex-end; }
.al-spalten > :nth-child(2) { width: var(--al-sp-laeufe); flex: none; justify-content: flex-end; }
.al-spalten > :nth-child(3) { width: var(--al-sp-ctr); flex: none; justify-content: flex-end; }
.al-sp-zeit { width: var(--al-sp-zeit); flex: none; padding-left: var(--abst-16); }
.al-sp-mehr { width: var(--al-sp-mehr); flex: none; }
.al-sort-pfeil { display: inline-grid; }
.al-sort-pfeil .ic { width: 13px; height: 13px; }
.al-sort-pfeil:not(.ab):not(.leer) .ic { transform: rotate(180deg); }
.al-sort-pfeil.leer { opacity: .6; padding: 0; height: auto; gap: 0; } /* B4b: sonst erbt der Pfeil das globale .leer (48 px Polster) und überdeckt Ordnerkacheln und erste Karte */

/* Karte je Automation: weiß, r10, padding 24, Abstand 16, weicher Schatten */
.al-karten { display: grid; gap: var(--abst-16); }
.al-karte { background: var(--grund); border-radius: var(--al-rund-karte); box-shadow: var(--al-schatten); padding: var(--abst-20) var(--abst-24); display: grid; gap: var(--abst-12); cursor: pointer; }
.al-im-korb .al-karte { cursor: default; }
@media (hover: hover) { .al-karte:hover { box-shadow: 0 6px 14px rgb(32 34 36 / .06), 0 1px 2px rgb(0 0 0 / .08), 0 0 0 var(--haar) var(--text-3); } }
.al-k-kopf, .al-az { display: flex; align-items: center; gap: var(--abst-8); min-width: 0; }
.al-zustand { display: inline-flex; align-items: center; gap: var(--abst-8); flex: none; }
.al-loz { display: inline-flex; align-items: center; height: 22px; padding: 3px 7px; border-radius: var(--rund-mini); font: 500 var(--sg-12)/16px var(--schrift); letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; }
.al-loz-live { background: var(--al-live-g); color: var(--al-live-t); }
.al-loz-entwurf, .al-loz-aus { background: var(--flaeche-2); color: var(--text-2); }
.al-loz-beliebt { height: 18px; padding: 1px 6px; font-size: var(--sg-11); letter-spacing: .6px; background: var(--sonne-p); color: #2b1d00; }
.al-entwurf-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--sonne-p); flex: none; }
.al-k-name { flex: 1; min-width: 0; font: 600 var(--sg-16)/20px var(--schrift-marke); }
.al-k-name > * { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font: inherit; }
@media (hover: hover) { .al-name-knopf:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } }
.al-im-ordner { display: inline-flex; align-items: center; gap: var(--abst-4); flex: none; }
.al-im-ordner .ic { width: 13px; height: 13px; }
.al-zahl { width: var(--al-sp-laeufe); flex: none; text-align: right; font-size: var(--sg-14); font-weight: 500; font-variant-numeric: tabular-nums; }
.al-z-ctr { width: var(--al-sp-ctr); }
.al-z-name { display: none; }
.al-zeit { width: var(--al-sp-zeit); flex: none; padding-left: var(--abst-16); font-size: var(--sg-14); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-mehr, .al-mehr-platz { width: var(--al-sp-mehr); height: 32px; flex: none; }
.al-mehr .ic { width: 18px; height: 18px; }
@media (hover: hover) { .al-karte .al-mehr { opacity: 0; } .al-karte:hover .al-mehr, .al-karte:focus-within .al-mehr, .al-mehr[aria-expanded="true"] { opacity: 1; } }

/* Auslöserzeilen: Instagram-Zeichen, Satz mit Chips, Schalter beim Hover, Läufe und Klickrate je Auslöser (12 px) */
.al-ausloeser { display: grid; gap: var(--abst-4); }
.al-az { min-height: 26px; }
.al-az-ic { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: var(--koralle-g); color: var(--koralle-t); flex: none; }
.al-az-ic .ic { width: 12px; height: 12px; }
.al-az-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--abst-4); font-size: var(--sg-12); color: var(--text-2); white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
.al-az-zus { color: var(--text-3); }
.al-chip { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; padding: 1px 6px; border-radius: var(--al-rund-klein); background: var(--koralle-g); color: var(--koralle-t); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--koralle-p) 35%, transparent); font-size: var(--sg-12); line-height: 16px; letter-spacing: .2px; text-transform: uppercase; flex: none; }
.al-az .al-zahl, .al-az .al-zeit { font-size: var(--sg-12); color: var(--text-3); }
.al-schalter, .al-schalter-platz { width: var(--al-sp-schalter); flex: none; justify-content: flex-end; }
.al-schalter .schalter-bahn { width: 26px; height: 16px; }
.al-schalter .schalter-bahn::after { width: 12px; height: 12px; }
.al-schalter input:checked + .schalter-bahn::after { transform: translateX(10px); }
@media (hover: hover) { .al-karte .al-schalter:not(.an) { opacity: 0; transition: opacity .12s; } .al-karte:hover .al-schalter, .al-karte .al-schalter:focus-within { opacity: 1; } .al-karte .al-schalter.gesperrt:not(.an) { opacity: 0; } .al-karte:hover .al-schalter.gesperrt { opacity: .5; } }
.al-pruef { display: flex; align-items: center; gap: var(--abst-8); color: var(--koralle-t); }
.al-pruef .ic { width: 14px; height: 14px; }
.al-rang:empty { display: none; }
.al-rang .bk-rang { margin: 0; padding-top: var(--abst-8); border-top: var(--haar) solid var(--linie); }
.al-karte .probe { cursor: default; }

/* Rasteransicht: Karten mit Vorschau der Arbeitsfläche (142 hoch auf grauem Grund), darunter Name und Kebab */
.al-raster .al-karten { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--abst-16); }
.al-kachel { background: var(--grund); border-radius: var(--al-rund-karte); box-shadow: var(--al-schatten); overflow: hidden; display: grid; grid-template-rows: 142px auto; }
@media (hover: hover) { .al-kachel:hover { box-shadow: 0 6px 14px rgb(32 34 36 / .06), 0 0 0 var(--haar) var(--text-3); } }
.al-kachel-bild { position: relative; display: block; width: 100%; height: 142px; background: var(--flaeche); border-bottom: var(--haar) solid var(--linie); padding: var(--abst-8); border-radius: var(--al-rund-karte) var(--al-rund-karte) 0 0; }
.al-kachel-zustand { position: absolute; left: var(--abst-8); top: var(--abst-8); }
.al-kachel-zustand .al-loz { height: 20px; padding: 2px 6px; font-size: var(--sg-11); }
.al-vorschau { width: 100%; height: 100%; }
.al-vs-rumpf { fill: var(--grund); stroke: var(--linie-stark); stroke-width: .75; }
.al-vs-kopf { stroke: none; }
.al-vs-kopf.f-koralle { fill: var(--koralle-p); } .al-vs-kopf.f-sand { fill: var(--sand-p); } .al-vs-kopf.f-meer { fill: var(--meer-p); }
.al-vs-kopf.f-lavendel { fill: var(--lavendel-p); } .al-vs-kopf.f-salbei { fill: var(--salbei-p); } .al-vs-kopf.f-grau { fill: var(--grau-p); }
.al-vs-zeile { fill: var(--flaeche-2); }
.al-vs-linien path { fill: none; stroke: var(--text-3); stroke-opacity: .55; stroke-width: 1.2; }
.al-kachel-fuss { display: flex; align-items: center; gap: var(--abst-8); padding: var(--abst-8) var(--abst-4) var(--abst-8) var(--abst-12); min-width: 0; }
.al-kachel-name { flex: 1; min-width: 0; font: 600 var(--sg-16)/22px var(--schrift-marke); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-kachel .al-mehr { opacity: 1; }

.al-leer { display: grid; justify-items: start; gap: var(--abst-8); padding: var(--abst-32) var(--abst-24); background: var(--grund); border-radius: var(--al-rund-karte); box-shadow: var(--al-schatten); }
.al-leer .knopf { margin-top: var(--abst-8); }

/* Kebab-Menü: 245 breit, r10, Einträge 40 hoch, Icon 18, Abstand 16, Gefahr in koralle */
.al-menue { position: fixed; z-index: 96; width: 245px; max-width: calc(100vw - 16px); padding: var(--abst-8) 0; background: var(--grund); border-radius: var(--al-rund-karte); box-shadow: 0 8px 24px rgb(32 34 36 / .15), 0 0 0 var(--haar) var(--linie-stark); }
.al-menue-punkt { display: flex; align-items: center; gap: var(--abst-16); width: 100%; min-height: 40px; padding: var(--abst-8) var(--abst-16); font-size: var(--sg-14); text-align: left; color: var(--text); }
.al-menue-punkt .ic { width: 18px; height: 18px; color: var(--text-2); }
.al-menue-punkt.gefahr, .al-menue-punkt.gefahr .ic { color: var(--koralle-t); }
.al-menue-punkt:hover, .al-menue-punkt:focus-visible { background: var(--flaeche); outline: none; }

/* Dialoge: Overlay 50 % dunkel, kleiner Dialog r10, Vorlagen-Dialog r8 */
.al-overlay { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: var(--abst-16); background: rgb(0 0 0 / .5); }
.al-dlg { width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: var(--abst-12); padding: var(--abst-20); background: var(--grund); border-radius: var(--al-rund-karte); box-shadow: 0 12px 32px rgb(0 0 0 / .2); }
.al-dlg h2 { font: 700 var(--sg-20)/28px var(--schrift-marke); }
.al-dlg-feld .feld { height: 40px; }
.al-dlg-fehler { color: var(--koralle-t); font-size: var(--sg-13); }
.al-dlg-knoepfe { display: flex; justify-content: flex-end; gap: var(--abst-8); margin-top: var(--abst-4); }
.knopf.al-gefahr { background: var(--koralle-t); border-color: var(--koralle-t); color: #fff; }
:root[data-theme="dark"] .knopf.al-gefahr { background: var(--koralle-p); border-color: var(--koralle-p); color: #2a120b; }
.al-wahl-liste { display: grid; gap: var(--abst-4); max-height: 44dvh; overflow: auto; }
.al-wahl { display: flex; align-items: center; gap: var(--abst-12); min-height: 44px; padding: 0 var(--abst-12); border-radius: var(--rund-klein); cursor: pointer; font-size: var(--sg-14); }
.al-wahl:hover { background: var(--flaeche); }
.al-wahl:has(input:checked) { background: var(--salbei-g); color: var(--salbei-t); }
.al-wahl input { accent-color: var(--salbei-p); width: 16px; height: 16px; margin: 0; }
.al-wahl-text { display: inline-flex; align-items: center; gap: var(--abst-8); }
.al-wahl-text .ic { width: 16px; height: 16px; }
.al-wahl { padding-left: calc(var(--abst-12) + var(--al-tiefe, 0) * 20px); }
.al-neu-flaeche { display: inline-flex; align-items: center; justify-content: center; gap: var(--abst-8); min-height: 40px; padding: 0 var(--abst-12); border-radius: var(--rund-klein); font-size: var(--sg-14); font-weight: 500; }
.al-neu-flaeche .ic { width: 15px; height: 15px; }

/* Vorlagen-Dialog: 1200 breit, Kopf 20/32 w700, Suche über die volle Breite, Navigation 196 links */
.al-nd { width: min(1200px, 100%); height: min(680px, calc(100dvh - 32px)); display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: var(--grund); border-radius: var(--al-rund-karte); box-shadow: 0 16px 48px rgb(0 0 0 / .25); overflow: hidden; }
.al-nd-kopf { display: flex; align-items: center; gap: var(--abst-12); padding: var(--abst-12) var(--abst-16); border-bottom: var(--haar) solid var(--linie); }
.al-nd-kopf h2 { font: 700 var(--sg-20)/32px var(--schrift-marke); white-space: nowrap; }
.al-nd-konto { margin-left: var(--abst-8); }
.al-nd-suche { padding: var(--abst-16) var(--abst-16) 0; }
.al-nd-suche .al-suche input { height: 36px; }
.al-nd-rumpf { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: var(--abst-24); padding: var(--abst-16); min-height: 0; }
.al-nd-nav { display: flex; flex-direction: column; gap: var(--abst-2); overflow: auto; min-height: 0; }
.al-nd-np { display: flex; align-items: center; gap: var(--abst-8); min-height: 36px; padding: var(--abst-8); border-radius: var(--rund-klein); text-align: left; font-size: var(--sg-14); color: var(--text); }
.al-nd-np .ic { width: 15px; height: 15px; color: var(--text-2); }
.al-nd-np:hover { background: var(--flaeche); }
.al-nd-np[aria-current="true"] { background: var(--flaeche-2); font-weight: 500; }
.al-nd-gruppe { font: 500 var(--sg-16)/24px var(--schrift-marke); margin: var(--abst-20) 0 var(--abst-8) var(--abst-8); }
.al-nd-trenn { height: 0; border-top: var(--haar) solid var(--linie); margin: var(--abst-16) var(--abst-8); }
.al-nd-inhalt { overflow: auto; min-height: 0; padding-right: var(--abst-4); }
.al-nd-abschnitt { font: 700 var(--sg-20)/32px var(--schrift-marke); margin: 0 0 var(--abst-12); }
.al-nd-karten + .al-nd-abschnitt { margin-top: var(--abst-32); }
.al-nd-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--abst-16); }
.al-nd-fehler { margin-bottom: var(--abst-12); }
.al-nd-nichts { padding: var(--abst-16) 0; }
.al-nd-mc .abschnitt { padding-top: 0; border-top: 0; }

/* Vorlagenkarte: Rand, r6, padding 16; Titel 20/28 w700, Beschreibung 14 leise; unten Art und Kennzeichen */
.al-vk { display: flex; flex-direction: column; gap: var(--abst-8); min-height: 212px; padding: var(--abst-16); border: 1px solid var(--linie-stark); border-radius: var(--rund-klein); background: var(--grund); text-align: left; transition: border-color .12s, box-shadow .12s; }
.al-vk:hover:not(:disabled) { border-color: var(--warm); box-shadow: 0 4px 12px rgb(32 34 36 / .06); }
.al-vk:disabled { opacity: .6; cursor: progress; }
.al-vk[aria-busy="true"] { opacity: 1; border-color: var(--warm); }
.al-vk-titel { font: 700 var(--sg-20)/28px var(--schrift-marke); letter-spacing: -.015em; color: var(--text); }
.al-vk-text { font-size: var(--sg-14); line-height: 20px; color: var(--text-2); }
.al-vk-link { font-size: var(--sg-12); color: var(--text-3); overflow-wrap: anywhere; }
.al-vk-fuss { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--abst-8); }
.al-vk-art { display: inline-flex; align-items: center; gap: var(--abst-4); font-size: var(--sg-12); color: var(--text-2); }
.al-vk-art .ic { width: 14px; height: 14px; }

/* Kommentar-Assistent: Schritt x von 3, Balken 3 px (salbei), Frage 20 w700, Optionskarten mit Rahmen 2 px bei Auswahl */
.al-as { max-width: 560px; display: grid; gap: var(--abst-12); }
.al-as-kopf { display: flex; align-items: center; gap: var(--abst-8); margin-left: calc(-1 * var(--abst-8)); }
.al-as-name { font-size: var(--sg-13); color: var(--text-3); }
.al-as-schritt { font-size: var(--sg-14); color: var(--text-2); margin-top: var(--abst-4); }
.al-as-balken { height: 3px; border-radius: 2px; background: var(--linie-stark); overflow: hidden; }
.al-as-balken span { display: block; height: 100%; background: var(--salbei-p); transition: width .2s ease-out; }
.al-as-frage { font: 700 var(--sg-20)/28px var(--schrift-marke); margin: var(--abst-8) 0 var(--abst-4); outline: none; }
.al-as-optionen { display: grid; gap: var(--abst-12); }
.al-as-wahl { position: relative; display: grid; gap: var(--abst-12); padding: var(--abst-16); border: 1px solid var(--linie-stark); border-radius: var(--al-rund-karte); cursor: pointer; background: var(--grund); }
.al-as-wahl input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.al-as-wahl.gewaehlt { border-color: var(--salbei-p); box-shadow: inset 0 0 0 1px var(--salbei-p); cursor: default; }
.al-as-wahl:has(input[type=radio]:focus-visible) { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.al-as-wahl-titel { font-size: var(--sg-15); font-weight: 500; }
.al-as-wahl-inhalt { display: grid; gap: var(--abst-8); cursor: auto; }
.al-as-modus { display: flex; align-items: center; gap: var(--abst-8); flex-wrap: wrap; }
.al-as-pillen { display: flex; flex-wrap: wrap; gap: var(--abst-8); }
.al-pille { display: inline-flex; align-items: center; gap: var(--abst-2); height: 32px; padding: 0 var(--abst-4) 0 var(--abst-12); border-radius: 18px; background: var(--flaeche); box-shadow: inset 0 0 0 var(--haar) var(--linie-stark); font-size: var(--sg-14); }
.al-pille-weg { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--text-3); }
.al-pille-weg .ic { width: 13px; height: 13px; }
.al-pille-weg:hover { background: var(--flaeche-2); color: var(--text); }
.al-pille-neu { padding: 0 var(--abst-4); background: transparent; box-shadow: none; border: 1px dashed var(--text-3); }
.al-pille-neu input { width: 120px; height: 28px; border: 0; background: transparent; padding: 0 var(--abst-8); outline: none; font-size: var(--sg-14); }
.al-as-antworten { display: grid; gap: var(--abst-8); }
.al-as-antwort { display: flex; gap: var(--abst-4); align-items: center; }
.al-as-antwort .feld { height: 38px; }
.al-as-fuss { display: flex; align-items: center; gap: var(--abst-8); padding-top: var(--abst-12); border-top: var(--haar) solid var(--linie); margin-top: var(--abst-4); }
.al-as-pfeil { width: 36px; padding: 0; }
.al-as-pfeil .ic { width: 16px; height: 16px; }

/* B4b: Ziehen in Ordner. Die gezogene Karte wird blass, ein kleines Schild folgt dem Zeiger, das Ziel bekommt einen
   salbeifarbenen Rahmen. Auf Touch-Geräten kein Markieren und kein Kontextmenü beim langen Druck. */
.al-geist { position: fixed; left: 0; top: 0; z-index: 120; display: inline-flex; align-items: center; gap: var(--abst-8); max-width: 260px; padding: var(--abst-8) var(--abst-12); border-radius: var(--al-rund-knopf, 6px); background: var(--text); color: var(--grund); font-size: var(--sg-13); font-weight: 500; pointer-events: none; box-shadow: 0 8px 24px rgb(0 0 0 / .2); }
.al-geist span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-geist .ic { width: 15px; height: 15px; flex: none; }
.al-gezogen { opacity: .45; }
.al-zieht-global, .al-zieht-global * { user-select: none !important; -webkit-user-select: none !important; cursor: grabbing !important; }
.al-zieht [data-al-drop] { transition: box-shadow .12s, background .12s; }
.al-zieht .al-ordner-kachel[data-al-drop] { outline: 1px dashed var(--linie-stark); outline-offset: 2px; }
.al-drop-ziel, .al-zieht .al-ordner-kachel.al-drop-ziel { background: var(--salbei-g) !important; color: var(--salbei-t) !important; box-shadow: 0 0 0 2px var(--salbei-p) !important; }
.al-pfad-link.al-drop-ziel { padding-left: var(--abst-4); padding-right: var(--abst-4); }
@media (pointer: coarse) { .al-karte, .al-kachel { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }

/* Handy: Karten zweizeilig (Zustand, Name, Menü; darunter Auslöser und Zahlen), Ziele mindestens 44 px, Dialog voll */
@media (max-width: 759px) {
  .al { gap: var(--abst-12); }
  .al-kopf { flex-wrap: wrap; }
  .al-titel { font-size: var(--sg-20); line-height: 28px; }
  .al-neu { height: 44px; }
  .al-filter { grid-template-columns: 1fr 1fr; flex: 1 1 100%; }
  .al-pfad { flex-basis: 100%; }
  .al-hs { flex: 1 1 0; height: 44px; }
  .al-hs-lang, .al-hs .al-hs-konto { display: none; }
  .al-hs-kurz { display: inline; }
  [data-al-ansicht] > span { display: none; }
  [data-al-ansicht], .al-rang-info > summary { min-width: 44px; min-height: 44px; justify-content: center; display: inline-flex; align-items: center; }
  .al-werkzeuge .al-leiste { gap: var(--abst-4); }
  .al-werkzeuge { gap: var(--abst-8); }
  .al-suche { grid-column: 1 / -1; }
  .al-suche input, .al-auswahl select { height: 44px; font-size: var(--sg-15); }
  .al-ordner { grid-template-columns: 1fr 1fr; gap: var(--abst-8); }
  .al-ordner-kachel { height: 44px; }
  .al-link, .al-sort-wahl select { height: 44px; }
  .al-spalten { display: none; }
  .al-karte { padding: var(--abst-16); gap: var(--abst-8); }
  .al-k-kopf { flex-wrap: wrap; row-gap: var(--abst-4); }
  .al-k-name { flex: 1 1 calc(100% - 150px); }
  .al-k-kopf .al-zahl, .al-k-kopf .al-zeit { order: 5; width: auto; padding-left: 0; font-size: var(--sg-12); color: var(--text-3); text-align: left; }
  .al-k-kopf .al-zahl + .al-zahl::before, .al-k-kopf .al-zeit::before { content: "·"; margin: 0 var(--abst-4) 0 0; }
  .al-z-name { display: inline; margin-right: var(--abst-4); }
  .al-k-kopf .al-mehr { order: 3; width: 44px; height: 44px; margin: -6px -10px -6px 0; }
  .al-k-kopf .kz, .al-im-ordner { order: 4; }
  .al-az .al-zahl, .al-az .al-zeit, .al-az .al-mehr-platz { display: none; }
  .al-schalter { min-height: 44px; min-width: 44px; margin: -9px -6px -9px 0; }
  .al-chip { max-width: 120px; }
  .al .bk-rang .icon-knopf { width: 44px; height: 44px; }
  .al-raster .al-karten { grid-template-columns: 1fr 1fr; gap: var(--abst-12); }
  .al-kachel { grid-template-rows: 112px auto; }
  .al-kachel-bild { height: 112px; }
  .al-kachel-name { font-size: var(--sg-14); }
  .al-kachel .al-mehr { width: 44px; height: 44px; }
  .al-menue-punkt { min-height: 48px; }
  .al-overlay-gross { padding: 0; }
  .al-nd { width: 100%; height: 100dvh; border-radius: 0; }
  .al-nd-kopf { flex-wrap: wrap; padding: calc(var(--abst-8) + var(--so)) var(--abst-12) var(--abst-8); row-gap: var(--abst-8); }
  .al-nd-kopf { column-gap: var(--abst-8); }
  .al-nd-kopf .icon-knopf { width: 44px; height: 44px; order: -1; margin-left: calc(-1 * var(--abst-8)); }
  .al-nd-leer { height: 44px; padding: 0 var(--abst-12); }
  .al-nd-leer .ic { display: none; }
  .al-nd-konto { order: 5; flex: 1 1 100%; margin-left: 0; display: flex; }
  .al-nd-konto button { flex: 1; height: 44px; }
  .al-nd-konto { padding: var(--abst-2); }
  .al-nd-suche { padding: var(--abst-12) var(--abst-12) 0; }
  .al-nd-suche .al-suche input { height: 44px; }
  .al-nd-rumpf { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--abst-12); padding: var(--abst-12); }
  .al-nd-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: var(--abst-8); margin: 0 calc(-1 * var(--abst-12)); padding: 0 var(--abst-12); }
  .al-nd-nav::-webkit-scrollbar { display: none; }
  .al-nd-gruppe, .al-nd-trenn { display: none; }
  .al-nd-np { flex: none; min-height: 44px; padding: 0 var(--abst-12); border-radius: var(--rund-voll); box-shadow: inset 0 0 0 var(--haar) var(--linie-stark); white-space: nowrap; }
  .al-nd-np[aria-current="true"] { background: var(--tinte); color: var(--tinte-text); box-shadow: none; }
  .al-nd-np[aria-current="true"] .ic { color: inherit; }
  .al-nd-karten { grid-template-columns: 1fr; gap: var(--abst-12); }
  .al-vk { min-height: 0; }
  .al-vk-titel { font-size: var(--sg-16); line-height: 24px; }
  .al-as-pfeil { width: 44px; height: 44px; }
  .al-as-fuss .knopf.primaer { height: 44px; }
  .al-pille { height: 44px; padding-right: 0; }
  .al-pille-weg { width: 44px; height: 44px; }
  .al-pille-neu input { height: 40px; }
  .al-as-kopf .text-knopf { height: 44px; }
  .al-auswahl.klein select { height: 44px; }
  .al-as-antwort .icon-knopf { width: 44px; height: 44px; }
  .al-dlg-knoepfe .knopf { height: 44px; }
}

/* Beitragsauswahl im Kommentar-Assistenten (B2e): Raster wie ManyChat "Specific Post or Reel", Auswahl salbei */
.al-bt-platz { display: grid; gap: var(--abst-8); }
.al-bt-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--abst-8); }
.al-bt { display: grid; gap: var(--abst-4); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.al-bt-rahmen { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--rund-klein); overflow: hidden; background: var(--flaeche-2); box-shadow: inset 0 0 0 var(--haar) var(--linie); }
.al-bt-bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-bt-ohne { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); }
.al-bt-ohne .ic { width: 22px; height: 22px; }
.al-bt-art { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .45)); }
.al-bt-art .ic { width: 16px; height: 16px; }
.al-bt-haken { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .85); box-shadow: inset 0 0 0 1.5px rgb(32 34 36 / .35); color: transparent; }
.al-bt-haken .ic { width: 13px; height: 13px; stroke-width: 2.6; }
.al-bt.gewaehlt .al-bt-rahmen { box-shadow: inset 0 0 0 2px var(--salbei-p); }
.al-bt.gewaehlt .al-bt-haken { background: var(--salbei-p); box-shadow: none; color: #fff; }
.al-bt:focus-visible { outline: none; }
.al-bt:focus-visible .al-bt-rahmen { outline: 2px solid var(--akzent-hell); outline-offset: 2px; }
.al-bt-zeile { display: flex; justify-content: space-between; align-items: center; gap: var(--abst-4); min-height: 16px; font-size: var(--sg-12); line-height: 16px; color: var(--text-3); white-space: nowrap; }
.al-bt-kom { display: inline-flex; align-items: center; gap: 3px; }
.al-bt-kom .ic { width: 12px; height: 12px; }
.al-bt-skelett { cursor: default; }
.al-bt-skelett .al-bt-rahmen { animation: al-bt-puls 1.2s ease-in-out infinite; }
.al-bt-skelett .al-bt-zeile { width: 60%; height: 10px; min-height: 0; margin-top: 3px; border-radius: 4px; background: var(--flaeche-2); }
@keyframes al-bt-puls { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .al-bt-skelett .al-bt-rahmen { animation: none; } }
.al-bt-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--abst-8); flex-wrap: wrap; }
.al-bt-leer { margin: 0; font-size: var(--sg-14); }
.al-bt-hand { font-size: var(--sg-14); }
.al-bt-hand > summary { cursor: pointer; color: var(--text-2); width: fit-content; padding: var(--abst-4) 0; }
.al-bt-hand[open] { display: grid; gap: var(--abst-8); }
@media (hover: hover) { .al-bt:not(.al-bt-skelett):hover .al-bt-rahmen { box-shadow: inset 0 0 0 1px var(--text-3); } .al-bt.gewaehlt:hover .al-bt-rahmen { box-shadow: inset 0 0 0 2px var(--salbei-p); } .al-bt-hand > summary:hover { color: var(--text); } }
@media (max-width: 759px) {
  .al-bt-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .al-bt-fuss .text-knopf, .al-bt-leer .text-knopf { min-height: 44px; }
  .al-bt-hand > summary { min-height: 44px; display: flex; align-items: center; }
}

/* ---------- B3b: weitere Auslöser in der Karte, Import aus Datei, gewählte Beiträge im Auslöser-Panel ---------- */
.al-az.aus .al-az-text { color: var(--text-3); }
.al-az.aus .al-az-ic { opacity: .55; }
.al-nd-datei { display: grid; gap: var(--abst-12); max-width: 560px; padding: var(--abst-8) 0; }
.al-nd-datei p { margin: 0; }
.al-datei-feld { display: inline-flex; align-items: center; gap: var(--abst-12); flex-wrap: wrap; cursor: pointer; width: fit-content; }
.al-datei-feld input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.al-datei-feld .knopf { pointer-events: none; display: inline-flex; align-items: center; gap: var(--abst-8); }
.al-datei-feld:focus-within .knopf { outline: 2px solid var(--akzent); outline-offset: 2px; }
.al-datei-vorschau { display: grid; gap: var(--abst-4); padding: var(--abst-16); border: 1px solid var(--linie-stark); border-radius: var(--al-rund-karte); background: var(--grund); }
.al-datei-vorschau strong { font-size: var(--sg-16); }
.al-datei-hinweise { margin: var(--abst-8) 0 0; padding-left: 18px; display: grid; gap: var(--abst-4); font-size: var(--sg-13); color: var(--warm-text, var(--text-2)); }
.al-datei-knoepfe { display: flex; justify-content: flex-end; gap: var(--abst-8); margin-top: var(--abst-8); flex-wrap: wrap; }
.al-bt-gewaehlt { display: flex; flex-wrap: wrap; gap: var(--abst-8); }
.al-bt-mini { position: relative; width: 56px; display: grid; gap: 2px; }
.al-bt-mini .al-bt-rahmen { border-radius: 4px; box-shadow: inset 0 0 0 2px var(--salbei-p); }
.al-bt-id { font-size: 10.5px; line-height: 12px; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.al-bt-weg { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--grund); color: var(--text-2); box-shadow: var(--schatten-klein), 0 0 0 var(--haar) var(--linie-stark); }
.al-bt-weg .ic { width: 12px; height: 12px; }
@media (hover: hover) { .al-bt-weg:hover { color: var(--text); } }
@media (max-width: 759px) { .al-bt-weg { width: 28px; height: 28px; top: -8px; right: -8px; } }

/* B4b: Sammelaktionen der Chatliste (Dialoge aus app.js, "Mehr" in der Auswahl-Leiste) */
.ktd-dauer { grid-template-columns: auto minmax(0, 1fr); min-height: 44px; }
.ktd-dauer input { grid-row: auto; }
.ktd-bestaetigen { display: flex; align-items: center; gap: var(--abst-8); min-height: 44px; font-size: var(--sg-14); cursor: pointer; }
.ktd-bestaetigen input { width: 18px; height: 18px; accent-color: var(--koralle-t); flex: none; }
.al-sammel-mehr .al-labels { width: 270px; }
.al-sammel-mehr .pop-zeile { white-space: nowrap; }
.al-sammel-mehr .pop-zeile .ic { width: 16px; height: 16px; flex: none; }
.knopf.primaer.kt-gefahr-voll:disabled { opacity: .45; cursor: not-allowed; }

/* B3e: Mit KI entwerfen (Kopf-Knopf und Ansicht im Neu-Dialog) */
.al-ki-entwurf { gap: var(--abst-8); }
.al-ki-entwurf .ic { width: 16px; height: 16px; color: var(--sand-t); }
.al-ki { display: grid; gap: var(--abst-12); max-width: 720px; align-content: start; }
.al-ki-aus { display: flex; align-items: flex-start; gap: var(--abst-8); padding: var(--abst-12); border-radius: var(--al-rund-knopf); background: var(--sand-g); color: var(--sand-t); font-size: var(--sg-13); }
.al-ki-aus .ic { width: 16px; height: 16px; flex: none; }
.al-ki-feld { display: grid; gap: var(--abst-4); }
.al-ki-label { font-size: var(--sg-13); font-weight: 600; }
.al-ki-feld textarea { min-height: 96px; resize: vertical; }
.al-ki-zahl { justify-self: end; }
.al-ki-beispiele { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abst-4) var(--abst-8); }
.al-ki-knoepfe { display: flex; align-items: center; gap: var(--abst-12); flex-wrap: wrap; }
.al-ki-ergebnis { display: grid; gap: var(--abst-8); padding: var(--abst-16); border-radius: var(--al-rund-karte); background: var(--flaeche); }
.al-ki-ergebnis h4 { font-size: var(--sg-14); font-weight: 600; }
.al-ki-schritte { margin: 0; padding-left: var(--abst-20); display: grid; gap: var(--abst-8); }
.al-ki-schritte li { display: grid; gap: var(--abst-2); font-size: var(--sg-13); overflow-wrap: anywhere; }