/*
 * Deliverant – partner portal, page "Speisekarte" (SK-2 "Übersicht & Bedienung", SK-3 "Reihenfolge & Verschieben",
 * SK-4 "Zeiten", SK-5 "Rabatte" + SK-0 template preview), 08.10.2026; SK-8b "Bilder" (block at the end), 09.10.2026.
 * Markup: partner.html #s-menu and the dialogs KM, AM, PVM, PEM, POM, AZM, ZM, VM, MRM, skBestM, skHilfeM,
 * skVorlVorschauM, skZielM, skFolgenM, skZeitenM, skBildM, skBilderM; behaviour: js/speisekarte-partner.js,
 * js/speisekarte-ziehen.js, js/speisekarte-zeiten.js, js/speisekarte-bilder.js.
 * Design: docs/aufgaben/2026-10-07-speisekarte-design.md §6 (colours, sizes), §8.7 (motion),
 * §11 (layout), §12 (targets ≥ 44 px, visible focus).
 *
 * The layout follows the width of the content, not of the window (from 769 px the sidebar takes 210 px): header,
 * toolbar, list and "Gelöscht" are size containers named "sk". Below 640 px phone layout, 640–1023 tablet, from
 * 1024 desktop. Note for later packages: a size container is the containing block of fixed descendants – a bar fixed
 * to the bottom of the window belongs outside these containers.
 */
:root{--p-text:#a5580a;--t2-dunkel:#565b78}

.sk-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sk-meta{font-size:12px;color:var(--t2)}

/* ── Header ── */
.sk-kopf{container:sk/inline-size;justify-content:flex-start;margin-bottom:12px;gap:8px}
.sk-kopf h1{margin-right:auto}
.sk-kopf .btn{min-height:44px}
.sk-kopf .sk-shop{display:none;text-decoration:none}
@container sk (min-width:640px){.sk-kopf .sk-shop:not([hidden]){display:inline-flex}}
.sk-kopf .sk-neu-kat{order:3}
.sk-kopf .sk-mehr{order:2}
@container sk (min-width:640px){.sk-kopf .sk-mehr{order:0}.sk-kopf .sk-neu-kat{order:0}}

/* ── First-visit hint ── */
.sk-hinweis{display:flex;align-items:flex-start;gap:10px;padding:0 4px 0 14px;margin-bottom:12px;background:var(--card);border:1px solid var(--brd);border-radius:10px;font-size:13px}
.sk-hinweis[hidden]{display:none}
.sk-hinweis>.fa-info-circle{color:var(--p);margin-top:14px;flex:none}
.sk-hinweis p{flex:1;margin:12px 0;color:var(--t);line-height:1.5}

/* ── Toolbar: search, "Zeigen", status line ── */
.sk-werkzeug{container:sk/inline-size;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.sk-werkzeug[hidden]{display:none}
.sk-suche{position:relative;flex:1 1 100%;min-width:0}
@container sk (min-width:640px){.sk-suche{flex:0 1 360px}}
.sk-suche input{width:100%;min-height:44px;padding:10px 44px 10px 38px;background:#fff;border:1.5px solid var(--brd);border-radius:8px;color:var(--t);font-size:14px;font-family:inherit}
.sk-suche input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sk-suche input:focus{border-color:var(--focus)}
.sk-suche .fa-search{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--t2);pointer-events:none}
.sk-suche-x{position:absolute;right:0;top:0;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:var(--t2);font-size:16px;cursor:pointer}
.sk-suche-x[hidden]{display:none}
.sk-suche-x:hover{color:var(--t)}
.sk-filter{display:none;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;border:0;min-width:0}
.sk-filter-titel{float:left;margin-right:2px;padding:0;font-size:13px;color:var(--t2-dunkel)}
.sk-filter-opt{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:1.5px solid var(--brd);border-radius:999px;background:var(--card);color:var(--t);font-size:13px;cursor:pointer}
.sk-filter-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.sk-filter-opt:has(input:checked){border-color:var(--p);background:#fdf6ea;font-weight:600}
.sk-filter-opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.sk-zahl{font-variant-numeric:tabular-nums;color:var(--t2-dunkel)}
.sk-filter-wahl{display:flex;align-items:center;gap:8px;flex:1 1 auto}
.sk-filter-wahl label{font-size:13px;color:var(--t2-dunkel)}
.sk-filter-wahl select{flex:1;min-height:44px;padding:8px 10px;background:#fff;border:1.5px solid var(--brd);border-radius:8px;color:var(--t);font-size:14px}
@container sk (min-width:640px){.sk-filter{display:flex}.sk-filter-wahl{display:none}}
.sk-stand-zeile{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-height:44px}
.sk-stand{margin:0;font-size:12px;color:var(--t2-dunkel)}
.sk-link{min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--p-text);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.sk-werkzeug .sk-alle{display:none}
@container sk (min-width:640px){.sk-werkzeug .sk-alle:not([hidden]){display:inline-flex;min-height:44px}}

/* ── List: categories ── */
.sk-liste{container:sk/inline-size}
.sk-kat{background:var(--card);border:1px solid var(--brd);border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow);overflow:hidden}
.sk-kat-kopf{display:flex;align-items:flex-start;gap:4px;padding:6px 8px;min-height:56px;cursor:pointer}
.sk-kat-kopf:hover{background:var(--bg)}
.sk-kat-links{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;min-height:44px}
@container sk (min-width:640px){.sk-kat-links{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;column-gap:10px}}
.sk-kat-kopf>.p-sw,.sk-art-kopf>.p-sw{flex:none}
.sk-kat-name,.sk-art-titel,.sk-geloescht-titel{margin:0;font:inherit}
.sk-name{display:inline-flex;align-items:center;gap:6px;min-height:44px;max-width:100%;padding:0 4px;border:0;border-radius:8px;background:transparent;color:var(--t);font:inherit;text-align:left;cursor:pointer}
.sk-kat-name .sk-name{font-size:15px;font-weight:700}
.sk-name-text{overflow-wrap:anywhere}
.sk-symbol{flex:none}
.sk-pfeil{flex:none;font-size:12px;color:var(--t2);transition:transform .15s ease-out}
.sk-name[aria-expanded="true"] .sk-pfeil{transform:rotate(180deg)}
.sk-geloescht-titel .sk-name[aria-expanded="true"] .sk-pfeil{transform:rotate(90deg)}
.sk-anzahl{font-size:12px;font-weight:400;color:var(--t2);white-space:nowrap}
.sk-anzahl-lang{display:none}
@container sk (min-width:640px){.sk-anzahl-lang{display:inline}.sk-anzahl-kurz{display:none}}
.sk-chips{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sk-chips:empty{display:none}
.sk-kat-links>.sk-chips{padding:0 0 6px 4px}
@container sk (min-width:640px){.sk-kat-links>.sk-chips{padding-bottom:0}}

/* Badges (design 6.1): text on its own colour surface, never smaller than 11 px */
.sk-chip{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:2px 8px;border:1px solid transparent;border-radius:999px;background:var(--c2);color:var(--t);font-size:11px;font-weight:600;line-height:1.3}
.sk-chip--aus{background:#fde2e2;color:#b91c1c}
.sk-chip--gelb{background:#fef3c7;color:#92400e}
.sk-chip--ok{background:#dcfce7;color:#166534}
.sk-chip--kuerzel{min-width:22px;justify-content:center}
.sk-chip--knopf{position:relative;min-height:32px;padding:4px 10px;border-color:var(--brd);font-family:inherit;text-align:left;cursor:pointer}
.sk-chip--knopf::after{content:'';position:absolute;inset:-6px -2px}
.sk-chip--knopf:hover{border-color:var(--focus)}
.sk-chip--knopf.sk-chip--gelb{border-color:#f5d48a}
/* Neutral badges turn white on the grey blocks of an open article; the SK-6b and SK-8b badges keep their own surface */
.art-sec .sk-chip:not(.sk-chip--aus):not(.sk-chip--ok):not(.sk-chip--gelb):not(.sk-chip--kuerzel):not(.sk-chip--gemeinsam):not(.sk-chip--nurhier):not(.sk-chip--wartet):not(.sk-chip--abgelehnt){background:var(--card)}

/* Icon buttons 44×44 (edit, ⋯, delete) */
.sk-icon-knopf{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--t2);font-size:14px;cursor:pointer}
.sk-icon-knopf:hover{background:var(--c2);color:var(--t)}
.art-sec .sk-icon-knopf:hover{background:var(--c3)}
.sk-icon-knopf.sk-gefahr:hover{background:#fde2e2;color:#b91c1c}
.sk-mehr[aria-expanded="true"]{background:var(--c3);color:var(--t)}
.sk-kopf .sk-mehr{border:1px solid var(--brd);background:var(--card)}
.sk-bearb{display:none}
@container sk (min-width:1024px){.sk-bearb{display:inline-flex}}

/* Open category */
.sk-kat-inhalt{border-top:1px solid var(--brd)}
.sk-kat-inhalt[hidden]{display:none}
.sk-kat-oben{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:12px 12px 0}
.sk-kat-bild{width:180px;max-width:100%;height:auto;max-height:120px;aspect-ratio:3/2;object-fit:cover;border-radius:8px;background:var(--c2)}
.sk-kat-beschr{flex:1 1 200px;margin:0;line-height:1.5}
.sk-kat-neu,.sk-kat-leer{padding:12px}
.sk-kat-leer p{margin:0 0 10px;font-size:13px;color:var(--t)}
.sk-neu{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;padding:8px 12px;border:1.5px dashed var(--brd);border-radius:10px;background:transparent;color:var(--t);font:inherit;font-size:13px;font-weight:600;text-align:center;cursor:pointer}
.sk-neu:hover{border-color:var(--focus);background:var(--bg)}

/* ── List: articles ── */
.sk-art-liste{list-style:none;margin:0;padding:0}
.sk-art{border-top:1px solid var(--brd);transition:background-color .3s}
.sk-art-kopf{display:flex;align-items:flex-start;gap:4px;padding:6px 8px}
.sk-art-info{flex:1 1 auto;min-width:0;cursor:pointer}
.sk-art .sk-name{display:flex;flex-wrap:wrap;width:100%;column-gap:8px;font-size:14px;font-weight:600}
.sk-art .sk-name-text{flex:1 1 100%}
@container sk (min-width:640px){.sk-art .sk-name-text{flex:1 1 auto}}
.sk-art.ist-aus .sk-name-text{color:var(--t2)}
.sk-preis{color:var(--p-text);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.sk-preis-abh{display:block;font-size:12px;font-weight:400;color:var(--t2)}
.sk-art-beschr{margin:0 0 4px;padding-left:4px;font-size:12px;line-height:1.45;color:var(--t2);overflow-wrap:anywhere}
.sk-art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:0 0 6px 4px}
.sk-art-meta:empty{display:none}
.sk-art-inhalt{padding:0 12px 12px}
.sk-art-inhalt[hidden]{display:none}
.sk-art-inhalt>.art-sec:first-child{margin-top:4px}
.sk-art-bearb{margin-top:10px;min-height:44px}
.sk-hervor{background:#fdf6ea!important}
.sk-liste mark{background:#fef3c7;color:var(--t);border-radius:3px;padding:0 1px}

/* Blocks in an open article: sizes, extras, allergens (.art-sec, .grp-card from partner.html) */
.art-sec .art-sec-head h4{color:var(--t)}
.sk-block-knopf,.sk-extra-neu{min-height:40px}
.sk-block-knoepfe{display:flex;flex-wrap:wrap;gap:6px}
.sk-block-leer{margin:0;font-size:12px;color:var(--t2-dunkel)}
.sk-zeilen{list-style:none;margin:0;padding:0}
.sk-zeile{display:flex;align-items:center;gap:2px;margin-top:4px;padding:2px 2px 2px 10px;min-height:48px;background:var(--card);border:1px solid var(--brd);border-radius:8px}
.sk-zeile-text{flex:1 1 auto;min-width:0;padding:4px 0;font-size:13px;line-height:1.4}
.sk-zeile-name{font-weight:600;overflow-wrap:anywhere}
.sk-zeile-preis{color:var(--t2);font-variant-numeric:tabular-nums}
.sk-zeile .sk-chip{vertical-align:middle}
.sk-aus-marke{display:none}
.sk-zeile-text.p-aus{opacity:1}
.sk-zeile-text.p-aus .sk-zeile-name{color:var(--t2);text-decoration:line-through}
.sk-zeile-text.p-aus .sk-aus-marke{display:inline-flex}
.sk-grp{padding:8px 4px 10px 12px}
.sk-grp-kopf{display:flex;align-items:center;gap:2px}
.sk-grp-titel{flex:1 1 auto;min-width:0;font-size:13px;overflow-wrap:anywhere}
.sk-grp-zusammen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:4px 8px 0 0;font-size:12px;color:var(--t2)}
.sk-grp-zusammen .btn{min-height:40px}
.sk-extra-neu{margin-top:8px}

/* ── Empty, loading ── */
.sk-leer{padding:28px 16px;text-align:center;background:var(--card);border:1px solid var(--brd);border-radius:12px}
.sk-leer p{margin:0 0 14px;font-size:14px;color:var(--t);line-height:1.5}
.sk-leer .btn{min-height:44px;margin:0 4px 6px}
.sk-platzhalter{height:56px;margin-bottom:8px;border-radius:12px;background:linear-gradient(90deg,var(--c2) 0%,var(--c3) 50%,var(--c2) 100%);background-size:200% 100%;animation:skLaden 1.2s linear infinite}
@keyframes skLaden{from{background-position:200% 0}to{background-position:0 0}}

/* ── Deleted articles ── */
.sk-geloescht{container:sk/inline-size;margin-top:16px}
.sk-geloescht[hidden]{display:none}
.sk-geloescht-titel .sk-name{font-size:14px;font-weight:700}
.sk-geloescht .sk-meta{margin:4px 0 8px;color:var(--t2-dunkel)}
.sk-gel-liste{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--brd);border-radius:12px}
.sk-gel-liste:empty{display:none}
.sk-gel-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 8px 6px 12px;border-top:1px solid var(--brd)}
.sk-gel-zeile:first-child{border-top:0}
.sk-gel-name{flex:1 1 160px;font-size:14px;font-weight:600;overflow-wrap:anywhere}
.sk-gel-zeile .btn{min-height:44px}

/* ── ⋯ menus: popover, below 640 px a sheet from the bottom ── */
.sk-menue{position:absolute;z-index:180;min-width:230px;max-width:min(320px,calc(100vw - 16px));padding:6px;background:var(--card);border:1px solid var(--brd);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.sk-menue[hidden],.sk-menue-hg[hidden]{display:none}
.sk-menue-titel{padding:6px 12px 4px;font-size:12px;color:var(--t2);overflow-wrap:anywhere}
.sk-menue-eintrag{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--t);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer}
.sk-menue-eintrag i{width:16px;text-align:center;color:var(--t2)}
.sk-menue-eintrag:hover,.sk-menue-eintrag:focus{background:var(--c2)}
.sk-menue-eintrag.gefahr,.sk-menue-eintrag.gefahr i{color:#b91c1c}
.sk-menue-trenner{height:1px;margin:6px 4px;background:var(--brd)}
.sk-menue.als-leiste{position:fixed;left:0;right:0;bottom:0;max-width:none;border-radius:16px 16px 0 0;padding:8px 8px max(8px,env(safe-area-inset-bottom))}
.sk-menue.als-leiste .sk-menue-eintrag{min-height:48px}
.sk-menue-hg{position:fixed;inset:0;z-index:179;background:rgba(0,0,0,.35)}

/* ── Dialogs of the menu ── */
/* Text fields and the link to sizes/extras reach 44 px (design 12); dark green keeps the shop state readable (6.3). */
:is(#KM,#AM,#PVM,#PEM,#POM,#VM) .fg input:not([type=checkbox]):not([type=radio]){min-height:44px}
#AGELink{display:inline-flex;align-items:center;min-height:44px}
.p-age-hinweis.p-shop-stand{color:#166534}
.ml.sk-breit{width:760px}
.sk-dlg-ort{margin:-8px 0 14px;font-size:13px;color:var(--t2)}
.sk-dlg-ort[hidden]{display:none}
/* Footer stays in view while a long dialog scrolls (design 11: "Fuß fest"); it covers the padding of .ml (24 px). */
.sk-dlg-fuss{position:sticky;bottom:-24px;z-index:1;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:16px -24px -24px;padding:12px 24px 24px;background:var(--card);border-top:1px solid var(--brd);border-radius:0 0 14px 14px}
.sk-dlg-fuss .btn{min-height:44px}
.sk-dlg-fuss .sk-dlg-links{margin-right:auto}
.sk-betrag{position:relative}
.sk-betrag input{padding-right:34px}
.sk-betrag>span{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--t2);pointer-events:none}
.sk-feld-kurz{max-width:200px}
.sk-haken{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--t);cursor:pointer}
.sk-haken input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--p)}
.sk-wahl{margin:0 0 14px;padding:0;border:0}
.sk-wahl legend{margin-bottom:4px;padding:0;font-size:13px;font-weight:500;color:var(--t2)}
.sk-wahl>label{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14px;color:var(--t);cursor:pointer}
.sk-wahl input[type=radio]{flex:none;width:20px;height:20px;margin:0;accent-color:var(--p)}
.sk-wahl .sk-max{width:80px;min-height:40px;padding:6px 10px;border:1.5px solid var(--brd);border-radius:8px;font-size:14px}
.sk-warn{margin:6px 0 0;padding:8px 10px;border-radius:8px;background:#fef3c7;color:#92400e;font-size:12px;line-height:1.45}
.sk-warn[hidden]{display:none}
.sk-kennz{display:flex;flex-wrap:wrap;gap:0 16px;margin:0 0 14px;padding:0;border:0}
.sk-kennz legend{width:100%;margin-bottom:2px;padding:0;font-size:13px;font-weight:500;color:var(--t2)}
.sk-kennz label{display:flex;align-items:center;gap:8px;min-height:44px;font-size:14px;cursor:pointer}
.sk-kennz input{width:20px;height:20px;accent-color:var(--p)}
.sk-preisraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.sk-preisraster label{display:block;margin-bottom:4px;font-size:12px;color:var(--t2);overflow-wrap:anywhere}
.sk-preisraster input{width:100%;min-height:40px;padding:8px 30px 8px 10px;background:#fff;border:1.5px solid var(--brd);border-radius:8px;color:var(--t);font-size:14px}
.sk-preisraster input[aria-invalid="true"]{border-color:#ef4444}
/* Times of a category (dialog skZeitenM, SK-4): day buttons 44×44 with aria-pressed (design 7.9) */
.sk-zeitfenster{margin-bottom:8px;padding:10px 12px;background:var(--c2);border:1px solid var(--brd);border-radius:10px}
.sk-zeitfenster-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:13px;font-weight:600}
/* Seven equal columns: the week stays on one line down to 320 px (each day at least 40 px wide, 44 px high) */
.sk-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;max-width:364px;margin-bottom:8px;border-radius:8px}
.sk-tage[aria-invalid="true"]{outline:2px solid #ef4444;outline-offset:2px}
.sk-tag{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:0 2px;border:1.5px solid var(--brd);border-radius:8px;background:var(--card);color:var(--t);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sk-tag[aria-pressed="true"]{background:var(--p-text);border-color:var(--p-text);color:#fff}
.sk-uhr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.sk-uhr input{min-height:44px;padding:6px 8px;border:1.5px solid var(--brd);border-radius:8px;background:#fff;color:var(--t);font-size:14px}
.sk-uhr input[aria-invalid="true"]{border-color:#ef4444}
.sk-zeit-nacht{flex-basis:100%;font-size:12px;color:var(--t2-dunkel)}
.sk-zeit-nacht[hidden]{display:none}
.sk-zeit-neu{min-height:44px;margin-bottom:10px}
.sk-zeit-neu[hidden]{display:none}
.sk-zeit-schnell{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px}
.sk-zeit-schnell[hidden]{display:none}
.sk-zeit-schnell-titel{font-size:13px;color:var(--t2)}
.sk-zeit-vorlagen{display:flex;flex-wrap:wrap;gap:6px}
.sk-zeit-vorlage{min-height:44px}
.sk-zeit-satz{margin:4px 0 12px;padding:10px 12px;border:1px solid #f3ce86;border-radius:10px;background:#fdf6ea;color:var(--t);font-size:13px;line-height:1.5}
.sk-zeit-andere{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 12px;margin:0 0 12px;padding:4px 10px;border:1px solid var(--brd);border-radius:10px}
.sk-zeit-andere[hidden]{display:none}
.sk-zeit-andere .sk-haken{font-size:13px}
.vo-zeile{margin-bottom:8px;padding:8px;background:var(--c2);border:1px solid var(--brd);border-radius:8px}
.vo-kopf{display:grid;grid-template-columns:minmax(0,1fr) 96px 44px 44px;gap:6px;align-items:center}
.vo-kopf input:not([type=checkbox]){width:100%;min-height:40px;padding:8px 10px;background:var(--card);border:1.5px solid var(--brd);border-radius:8px;color:var(--t);font-size:13px}
.vo-kopf input[aria-invalid="true"],.vo-sp[aria-invalid="true"]{border-color:#ef4444}
.vo-std-l{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;font-size:18px;cursor:pointer}
.vo-std-l input{position:absolute;opacity:0;width:1px;height:1px}
.vo-std-l:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}
.vo-staffel{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;margin-top:6px}
.vo-staffel label{display:block;font-size:11px;color:var(--t2-dunkel);overflow-wrap:anywhere}
.vo-sp{width:100%;min-height:36px;padding:6px;background:var(--card);border:1.5px solid var(--brd);border-radius:6px;color:var(--t);font-size:12px;text-align:center}
.sk-vorl-wahl{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px;padding:10px 12px;background:var(--c2);border:1.5px solid var(--brd);border-radius:10px;cursor:pointer}
.sk-vorl-wahl:has(input:checked){background:#fdf6ea;border-color:var(--p)}
.sk-vorl-wahl input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--p)}
.sk-vorl-wahl strong{font-size:13px}
.sk-vorl-wahl .sk-meta{display:block;margin-top:2px;color:var(--t2-dunkel);overflow-wrap:anywhere}

.sk-az-wahl{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:2px;padding:0 10px;background:var(--c2);border-radius:8px;font-size:13px;cursor:pointer}
.sk-az-wahl input{width:18px;height:18px;accent-color:var(--p)}

/* Help */
.sk-hilfe dt{margin-top:14px;font-size:14px;font-weight:700;color:var(--t)}
.sk-hilfe dt:first-child{margin-top:0}
.sk-hilfe dd{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--t)}

/* SK-0: template preview */
.sk-vs-titel{margin:16px 0 6px;font-size:14px}
.sk-vs-liste{list-style:none;margin:0 0 10px;padding:0}
.sk-vs-liste li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;padding:4px 0;font-size:13px;line-height:1.45;border-top:1px dashed var(--brd)}
.sk-vs-summe li{flex-wrap:nowrap;border-top:0}
.sk-vs-liste li:first-child{border-top:0}
.sk-vs-ok{color:#166534}
.sk-vs-warn{color:#92400e}
.sk-vs-hinweis{margin:0 0 8px;padding:8px 10px;border-radius:8px;background:#fef3c7;color:#92400e;font-size:12px;line-height:1.45}
.sk-vs-gruppe{margin-bottom:8px;padding:8px 12px;border:1px solid var(--brd);border-radius:10px}
.sk-vs-gruppe-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 4px;font-size:13px}
.sk-vs-alt{color:var(--t2);text-decoration:line-through}
.sk-vs-details summary{display:flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;cursor:pointer}

/* ───────── SK-3: grips, dragging, moving (design 6.6, 7.7, 8.2, 8.7) ───────── */
.sk-griff{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--t2);font-size:15px;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.sk-griff:hover{background:var(--c2);color:var(--t)}
.art-sec .sk-griff:hover{background:var(--c3)}
.sk-griff--klein{width:40px}
.sk-griff[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.sk-griff[aria-expanded="true"]{background:var(--c3);color:var(--t)}
.sk-griff.laedt{cursor:progress}
.sk-zeile>.sk-griff{margin-left:-8px}
.sk-grp-kopf>.sk-griff{margin-left:-8px}
body.sk-zieht,body.sk-zieht *{cursor:grabbing!important;-webkit-user-select:none!important;user-select:none!important}
.sk-gehoben{display:none!important}
.sk-platz{list-style:none;margin:0 0 8px;border:2px dashed var(--focus);border-radius:10px;background:rgba(166,108,15,.06)}
.sk-art-liste>.sk-platz,.sk-zeilen>.sk-platz{margin:4px 0}
.sk-geist{position:fixed;z-index:190;margin:0;pointer-events:none;opacity:.97;transition:opacity .1s}
.sk-geist>ul,.sk-geist>.sk-art-liste{margin:0;padding:0;list-style:none}
.sk-geist .sk-kat,.sk-geist .sk-art,.sk-geist .sk-zeile,.sk-geist .sk-grp{margin:0;border:1px solid var(--brd);border-radius:12px;background:var(--card);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.sk-geist--draussen{opacity:.55}
.sk-kats-zu .sk-kat-inhalt{display:none}
.sk-kat-kopf.sk-ablage-ziel{outline:2px solid var(--focus);outline-offset:-2px;background:#fdf6ea}
.sk-geist--kopf{opacity:.82}
.sk-geist .sk-ablage-text{position:absolute;left:52px;top:-14px;max-width:calc(100% - 64px);padding:4px 10px;border-radius:999px;background:var(--card);border:1.5px solid var(--focus);color:var(--t);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.sk-menue-eintrag.gesperrt,.sk-menue-eintrag.gesperrt i{color:var(--t2-dunkel);cursor:default}
.sk-menue-eintrag.gesperrt:hover{background:transparent}

/* Message with "Rückgängig" (design 6.6 .toast-aktion, 8.4) */
.sk-toast{align-items:center}
.toast-aktion{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 12px;border:1.5px solid currentColor;border-radius:8px;background:transparent;color:inherit;font:inherit;font-weight:700;cursor:pointer}
.toast-aktion:hover{background:rgba(255,255,255,.15)}
.toast-x{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:inherit;opacity:.8;cursor:pointer}
.toast-x:hover{opacity:1}

/* "In andere Warengruppe …" and the consequences before a move */
.sk-ziel-wahl{margin:0 0 6px;padding:0;border:0;max-height:min(52vh,420px);overflow:auto}
.sk-ziel-opt{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:48px;padding:6px 10px;border-radius:10px;cursor:pointer}
.sk-ziel-opt:hover{background:var(--c2)}
.sk-ziel-opt:has(input:checked){background:#fdf6ea;outline:1.5px solid var(--p);outline-offset:-1.5px}
.sk-ziel-opt input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--p)}
.sk-ziel-opt.ist-hier{cursor:default;color:var(--t2-dunkel)}
.sk-ziel-name{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.sk-folgen .sk-folgen-liste{margin:6px 0 10px;padding-left:20px}
.sk-folgen .sk-folgen-liste li{margin:4px 0;color:var(--t)}
.sk-folgen .sk-folgen-name{margin:10px 0 0}
.sk-folgen .cs-cfm-txt p{margin:0 0 4px;color:var(--t)}

/* Selection mode and its bar (design 7.8; the bar sits outside the size containers, see header) */
.sk-stand-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.sk-stand-knoepfe .btn{min-height:44px}
.sk-stand-knoepfe .btn[hidden]{display:none}
.sk-auswahl-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px;padding:8px 8px 8px 14px;background:#fdf6ea;border:1px solid #f3ce86;border-radius:10px}
.sk-auswahl-kopf[hidden]{display:none}
.sk-auswahl-text{flex:1 1 auto;margin:0;font-size:13px;color:var(--t)}
.sk-auswahl-zahl{font-weight:700}
.sk-auswahl-filter{flex:1 1 100%;order:3;margin:0;font-size:12px;color:var(--t2-dunkel)}
.sk-auswahl-filter[hidden]{display:none}
.sk-auswahl-kopf .btn{min-height:44px}
.sk-wahl-feld{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;cursor:pointer}
.sk-wahl-feld[hidden]{display:none}
.sk-wahl-feld input{width:20px;height:20px;margin:0;accent-color:var(--p-text);cursor:pointer}
.sk-wahl-zahl{font-size:12px;font-weight:600;color:var(--p-text);white-space:nowrap}
.sk-art-wahl{cursor:pointer}
.sk-art-wahl .sk-art-info{display:block;padding:6px 0 4px}
.sk-art-wahl .sk-art-titel{display:flex;flex-wrap:wrap;column-gap:8px;font-size:14px;font-weight:600}
.sk-art-wahl .sk-art-beschr{display:block}
.sk-art-wahl .sk-art-meta{display:flex}
.sk-art.ist-gewaehlt{background:#fdf6ea}
.sk-sammel{position:fixed;left:0;right:0;bottom:0;z-index:170;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 16px max(10px,env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--brd);box-shadow:0 -6px 20px rgba(0,0,0,.12)}
.sk-sammel[hidden]{display:none}
.sk-sammel .btn{min-height:44px}
.sk-sammel-zahl{margin:0;font-size:14px;font-weight:700;color:var(--t)}
.sk-sammel-knoepfe{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto}
.sk-sammel-knoepfe .btn[hidden]{display:none}
.sk-sammel-menue{display:none!important;margin-left:auto}
@media (min-width:769px){.sk-sammel{left:210px}}
@media (max-width:639px){.sk-sammel-knoepfe,.sk-sammel-weg{display:none!important}.sk-sammel-menue{display:inline-flex!important}}
#s-menu.sk-mit-leiste{padding-bottom:96px}
@media (pointer:coarse){.sk-art-kopf{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}

/* ───────── SK-5: discount badges (design 6.1 orange, 7.10) ───────── */
.sk-chip--rabatt{background:#fdf6ea;border-color:#f3ce86;color:#7d510b}
.sk-chip--knopf.sk-chip--rabatt{border-color:#f3ce86}

/* Category dialog: overview "Im Shop" (design 7.5) */
.sk-km-shop{margin:4px 0 14px;padding:10px 12px;border:1px solid var(--brd);border-radius:10px;background:var(--c2)}
.sk-km-shop[hidden]{display:none}
.sk-km-shop>h3{margin:0 0 6px;font-size:13px;color:var(--t)}
.sk-km-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:4px 0;border-top:1px solid var(--brd);font-size:13px}
.sk-km-zeile:first-of-type{border-top:0}
.sk-km-zeile[hidden]{display:none}
.sk-km-feld{flex:0 0 64px;color:var(--t2-dunkel);font-weight:600}
.sk-km-wert{flex:1 1 180px;min-width:0;color:var(--t);overflow-wrap:anywhere}
.sk-km-zeile>.btn{margin-left:auto;min-height:44px}
.sk-km-eintrag{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding:2px 0}
.sk-km-eintrag .btn{margin-left:auto;min-height:44px}
#KMNeuHinweis{margin:-4px 0 14px;font-size:12px;color:var(--t2-dunkel)}
:is(#AM) .fg select{min-height:44px}
/* Discount dialog MRM, now also opened from the menu: targets of 44 px and dark text on the chosen tile (design 12) */
#MRM .mr-opt{min-height:44px;color:var(--t)}
#MRM .fg input:not([type=checkbox]):not([type=radio]){min-height:44px}
#MRM #MRAktivZeile{min-height:44px}
/* Outlined buttons on the menu page and in its dialogs: the hover colour stays readable (on touch it stays after a tap) */
:is(#s-menu,#skSammel,#KM,#AM,#MRM,#skZeitenM,#skZielM,#skFolgenM,#skBestM) .btn-o:hover{color:var(--p-text)}
/* Meta text on the orange-tinted rows (selected, highlighted) needs the darker grey (design 6.1 --t2-dunkel) */
:is(.sk-art.ist-gewaehlt,.sk-hervor) :is(.sk-art-beschr,.sk-meta,.sk-preis-abh){color:var(--t2-dunkel)}

/* ───────── SK-6b: shared extra groups (design 6.1 blue, 6.6, 7.2, 7.15, 11, 12) ─────────
   Badges and line at an extra group in an open article (js/speisekarte-partner.js), the dialogs PEM/POM of a shared
   group (partner.html), the hint bar #skZusHinweis and the assistant #skZusammenM (js/speisekarte-gruppen.js). */
.sk-chip--gemeinsam{background:rgba(59,130,246,.15);color:#1d4ed8}
.sk-chip--nurhier{background:var(--c2);color:var(--t)}
.sk-grp-titel .sk-chip{vertical-align:middle}
.sk-grp-gemeinsam{margin:4px 8px 0 0;font-size:12px;line-height:1.45;color:var(--t2)}
.sk-dlg-gemeinsam{display:flex;align-items:flex-start;gap:8px;margin:-6px 0 14px;padding:8px 10px;border-radius:8px;background:#e6eefe;color:#1d4ed8;font-size:13px;line-height:1.45}
.sk-dlg-gemeinsam[hidden]{display:none}
.sk-dlg-gemeinsam>i{flex:none;margin-top:3px}

/* Hint bar above the menu: the yellow notice of design 6.6 (.sk-hinweis--warn, also the SK-8b bar #skBildHinweis) */
.sk-hinweis--warn{flex-wrap:wrap;align-items:center;padding:8px 8px 8px 14px;background:#fef3c7;border-color:#f5d48a;color:#92400e}
.sk-hinweis--warn .btn{min-height:44px;margin-left:auto;background:var(--card)}
.sk-zus-hinweis>.fa-link{flex:none;align-self:flex-start;margin-top:12px;color:#92400e}
.sk-zus-hinweis-text{flex:1 1 260px;min-width:0}
.sk-zus-hinweis-titel{margin:8px 0 2px;font-size:13px;font-weight:700;color:#92400e}
.sk-zus-hinweis-text p{margin:0 0 6px;font-size:13px;line-height:1.5;color:#92400e}
.sk-zus-hinweis-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.sk-zus-hinweis .sk-zus-hinweis-knoepfe .btn{margin-left:0}

/* Assistant: the dialog is its own size container (phone layout below 560 px of dialog width) */
.sk-zus{container:skz/inline-size}
#skZusammenM .btn-o:hover{color:var(--p-text)}
.sk-schritte{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:-4px 0 14px;padding:0;list-style:none}
.sk-schritte[hidden]{display:none}
.sk-schritt{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t2-dunkel)}
.sk-schritt+.sk-schritt::before{content:'';display:inline-block;width:14px;height:1px;margin-right:2px;background:var(--t2)}
.sk-schritt-nr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1.5px solid var(--t2);border-radius:50%;font-size:11px;font-weight:700}
.sk-schritt--aktuell{color:var(--t);font-weight:700}
.sk-schritt--aktuell .sk-schritt-nr{border-color:var(--p-text);background:var(--p-text);color:#fff}
.sk-schritt--erledigt .sk-schritt-nr{border-color:#166534;background:#dcfce7;color:#166534}
.sk-zus-schritt-titel{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--t)}
.sk-zus-text{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--t)}
.sk-zus-laden{margin:24px 0;font-size:14px;color:var(--t)}
.sk-zus-notiz{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:8px 10px;border-radius:8px;font-size:13px;line-height:1.45}
.sk-zus-notiz>i{flex:none}
.sk-zus-notiz-text{flex:1 1 220px;min-width:0}
.sk-zus-notiz--warn{background:#fef3c7;color:#92400e}
.sk-zus-notiz--fehler{background:#fde2e2;color:#b91c1c}
.sk-zus-notiz .btn{min-height:44px;background:var(--card)}
.sk-zus-alle{margin:4px 0 6px}
.sk-zus-wahl{margin:0;padding:0;border:0;min-width:0}
.sk-zus-liste{list-style:none;margin:0 0 6px;padding:0}
.sk-zus-satz{margin-bottom:8px;padding:6px 8px 10px 10px;border:1.5px solid var(--brd);border-radius:10px;background:var(--card)}
.sk-zus-satz.ist-gewaehlt{border-color:var(--p);background:#fdf6ea}
.sk-zus-satz.ist-gesperrt{background:var(--c2)}
.sk-zus-satz-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.sk-zus-satz-wahl{display:flex;align-items:center;gap:10px;flex:1 1 200px;min-width:0;min-height:44px;cursor:pointer}
.sk-zus-satz-wahl input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--p-text)}
.sk-zus-satz.ist-gesperrt .sk-zus-satz-wahl{cursor:default}
.sk-zus-name{font-size:14px;font-weight:700;color:var(--t);overflow-wrap:anywhere}
.sk-zus-zusatz{font-weight:400;color:var(--t2-dunkel)}
.sk-zus-ansehen{min-height:44px}
.sk-zus-meta{margin:0 0 2px 30px;font-size:12px;color:var(--t2-dunkel)}
.sk-zus-marke{display:flex;gap:6px;margin:4px 0 0 30px;font-size:12px;line-height:1.45;color:var(--t)}
.sk-zus-marke>i{flex:none;margin-top:2px;color:var(--t2-dunkel)}
.sk-zus-marke--warn,.sk-zus-marke--warn>i{color:#92400e}
.sk-zus-details{margin:8px 0 0 30px;padding:8px 12px;border-radius:8px;background:var(--c2);font-size:12px;line-height:1.5;color:var(--t)}
.sk-zus-details[hidden]{display:none}
.sk-zus-details--breit{margin-left:0}
.sk-zus-d-titel{margin:8px 0 4px;font-size:12px;font-weight:700;color:var(--t)}
.sk-zus-d-titel:first-child{margin-top:0}
.sk-zus-d-regel{font-weight:400;color:var(--t2-dunkel)}
.sk-zus-d-liste{margin:0 0 4px;padding-left:18px}
.sk-zus-d-liste li{margin:2px 0;overflow-wrap:anywhere}
.sk-zus-d-name{font-weight:600}
.sk-zus-d-preis{font-variant-numeric:tabular-nums;color:var(--t2-dunkel)}
.sk-zus-d-zustand{color:#92400e}
.sk-zus-d-artikel{margin:0 0 4px;overflow-wrap:anywhere}
.sk-zus-abw+.sk-zus-abw{margin-top:8px;padding-top:8px;border-top:1px solid var(--brd)}
.sk-zus-stand{margin:0 0 4px;font-size:12px;color:var(--t2-dunkel)}
.sk-zus-abschnitt{margin-top:16px;padding-top:12px;border-top:1px solid var(--brd)}
.sk-zus-abschnitt-titel{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--t)}
.sk-zus-abschnitt-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.sk-zus-abschnitt-zeile .sk-zus-text{flex:1 1 260px;margin:0}
.sk-zus-gem-liste{list-style:none;margin:0 0 6px;padding:0}
.sk-zus-gem{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:4px 0}
.sk-zus-gem-text{flex:1 1 220px;min-width:0;font-size:13px;overflow-wrap:anywhere}
.sk-zus-gem .btn{min-height:44px}
.sk-zus-gem .sk-meta{color:var(--t2-dunkel)}
/* Step 2: one row per differing extra – a list on the phone, columns from 560 px dialog width */
.sk-zus-klaeren+.sk-zus-klaeren{margin-top:18px;padding-top:12px;border-top:1px solid var(--brd)}
.sk-zus-satz-titel{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--t)}
.sk-zus-k-kopf{display:none}
.sk-zus-k-liste{margin:4px 0 8px;border:1px solid var(--brd);border-radius:10px;overflow:hidden}
.sk-zus-k{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 10px;align-items:center;padding:6px 10px}
.sk-zus-k+.sk-zus-k{border-top:1px solid var(--brd)}
.sk-zus-k-name{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.sk-zus-k-jetzt{font-size:12px;color:var(--t2-dunkel)}
.sk-zus-k-wahl{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sk-zus-k-wahl>.sk-zus-k-label{font-size:12px;color:var(--t2-dunkel)}
.sk-zus-radio{display:inline-flex;align-items:center;gap:6px;min-width:72px;min-height:44px;padding:0 12px;border:1.5px solid var(--brd);border-radius:8px;background:var(--card);font-size:13px;cursor:pointer}
.sk-zus-radio:has(input:checked){border-color:var(--p-text);background:#fdf6ea;font-weight:700}
.sk-zus-radio input{width:18px;height:18px;margin:0;accent-color:var(--p-text)}
@container skz (min-width:560px){
.sk-zus-k-kopf{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) auto;gap:10px;padding:0 10px 4px;font-size:12px;font-weight:600;color:var(--t2-dunkel)}
.sk-zus-k{grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) auto}
.sk-zus-k-label{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
}
.sk-zus-vorbelegt{margin:0 0 6px;color:var(--t2-dunkel)}
.sk-zus-k-alle{display:flex;flex-wrap:wrap;gap:6px}
.sk-zus-k-alle .btn{min-height:44px}
/* Step 3 and done: what happens, with a symbol per line (✓ / ! / i) */
.sk-zus-pruef{list-style:none;margin:0 0 10px;padding:0}
.sk-zus-pruef>li{display:flex;gap:8px;padding:5px 0;font-size:13px;line-height:1.5;color:var(--t)}
.sk-zus-pruef>li>i{flex:none;width:16px;margin-top:3px;text-align:center}
.sk-zus-pruef p{margin:0}
.sk-zus-pruef ul{margin:4px 0 0;padding-left:18px}
.sk-zus-pruef ul li{margin:2px 0;overflow-wrap:anywhere}
.sk-zus-sym-ok{color:#166534}
.sk-zus-sym-warn{color:#92400e}
.sk-zus-sym-info{color:var(--t2-dunkel)}
@container skz (max-width:559px){.sk-zus-meta,.sk-zus-marke,.sk-zus-details{margin-left:0}}
/* Phone: each step is a full screen page, "Zurück" and "Weiter" stay at the bottom (design 11 "Assistenten") */
@media (max-width:639px){.mo .ml.sk-zus{display:flex;flex-direction:column}.sk-zus>#skZusInhalt{flex:1 0 auto}}

/* Phone: long dialogs fill the screen, head and buttons stay in view (design 11 "Vollbild") */
@media (max-width:639px){
.mo:has(>.ml.sk-vollbild){padding:0}
.mo .ml.sk-vollbild{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left))}
.mo .ml.sk-vollbild .sk-dlg-fuss{bottom:-16px;margin:16px -16px -16px;padding:12px 16px max(16px,env(safe-area-inset-bottom));border-radius:0}
}

/* ───────── SK-8b: pictures (design 6.1, 6.6, 7.20–7.22, 8.5, 8.6, 11; behaviour js/speisekarte-bilder.js) ───────── */
/* Badges: yellow = waiting, red = rejected (design 6.1) */
.sk-chip--wartet{background:#fef3c7;color:#92400e}
.sk-chip--knopf.sk-chip--wartet{border-color:#f5d48a}
.sk-chip--abgelehnt{background:#fde2e2;color:#b91c1c}
.sk-chip--knopf.sk-chip--abgelehnt{border-color:#f3b4b4}

/* Thumbnails in the rows: category 48×32 (3:2), article 48×36 (4:3), only from 640 px list width (design 7.1) */
.sk-mini-platz{display:none;flex:none;align-self:flex-start}
@container sk (min-width:640px){.sk-mini-platz{display:inline-flex}}
.sk-mini-platz:empty{display:none}
.sk-kat-kopf .sk-mini-platz{margin-top:6px}
.sk-art-kopf .sk-mini-platz{margin-top:4px}
.sk-mini{position:relative;display:inline-flex;line-height:0;border-radius:6px;cursor:pointer}
.sk-mini[hidden]{display:none}
.sk-mini img{width:48px;height:32px;object-fit:cover;border-radius:6px;border:1px solid var(--brd);background:var(--c2)}
.sk-mini--artikel img{height:36px}
.sk-mini:hover img,.sk-kat-bild-knopf:hover img,.sk-bild-block-bild:hover img{outline:2px solid var(--focus);outline-offset:1px}
.sk-mini-punkt{position:absolute;top:-4px;right:-4px;width:12px;height:12px;border:2px solid var(--card);border-radius:50%}
.sk-mini-punkt--wartet{background:var(--warn)}
.sk-mini-punkt--abgelehnt{background:var(--no)}
.sk-kat-bild-knopf{display:inline-flex;max-width:100%;cursor:pointer;border-radius:8px}
.sk-kat-bild-knopf[hidden]{display:none}
img.sk-bild-fehlt{visibility:hidden}

/* Block "Bild" in an open article and row "Bild" of the category dialog */
.sk-bild-block-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sk-bild-block-bild{display:inline-flex;line-height:0;cursor:pointer;border-radius:6px}
.sk-bild-block-bild[hidden]{display:none}
.sk-bild-block-bild img{width:80px;height:60px;object-fit:cover;border-radius:6px;border:1px solid var(--brd);background:var(--card)}
.sk-bild-block-text{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--t)}
.sk-km-bild{width:96px;height:64px;margin-right:8px;object-fit:cover;vertical-align:middle;border-radius:6px;border:1px solid var(--brd);background:var(--card)}

/* Menu counter for rejected pictures (design 5.1): white on --no reaches 4.8:1 */
.sk-nav-zaehler-box{display:inline-flex;margin-left:auto}
.sk-nav-zaehler{min-width:20px;padding:1px 6px;border-radius:10px;background:var(--no);color:#fff;font-size:11px;font-weight:700;line-height:1.5;text-align:center}

/* Notice bar above the list (design 7.22; .sk-hinweis--warn itself stands in the SK-6b block) */
.sk-hinweis--warn>.fa-exclamation-circle{margin-top:0;color:#92400e}
.sk-bild-hinweis-text{flex:1 1 220px;min-width:0}
.sk-bild-hinweis-text p{margin:4px 0 2px;color:#92400e}
.sk-bild-hinweis-text ul{margin:0 0 4px;padding-left:18px;font-size:13px;line-height:1.5;color:#92400e;overflow-wrap:anywhere}

/* Dialog "Bild" (design 7.20): overview */
.sk-bild-fehler{margin-bottom:12px}
.sk-bild-fehler[hidden]{display:none}
.sk-bild-fehler .btn{margin-left:6px;min-height:40px}
.sk-bild-abgelehnt{display:flex;gap:10px;margin-bottom:14px;padding:12px;border-radius:10px;background:#fde2e2;color:#b91c1c}
.sk-bild-abgelehnt>.fa-ban{margin-top:3px}
.sk-bild-abgelehnt-text{flex:1;min-width:0}
.sk-bild-abgelehnt-text p{margin:0 0 4px;font-size:13px;line-height:1.45;overflow-wrap:anywhere}
.sk-bild-abgelehnt .btn{background:var(--card)}
.sk-bild-abgeblendet{margin:6px 0 2px;line-height:0}
.sk-bild-klein{width:96px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:1px solid var(--brd);background:var(--card);opacity:.6;filter:grayscale(.5)}
.sk-bild-stand{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:12px}
@media (min-width:640px){.sk-bild-stand--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sk-bild-titel{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--t2-dunkel)}
.sk-bild-gross{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--brd);background:var(--c2)}
.sk-bild-gross--kategorie{aspect-ratio:3/2}
.sk-bild-leer{display:flex;align-items:center;justify-content:center;max-width:320px;aspect-ratio:4/3;margin:0;border:1.5px dashed var(--brd);border-radius:10px;background:var(--c2);color:var(--t2-dunkel);font-size:13px}
.sk-bild-leer--kategorie{aspect-ratio:3/2}
.sk-bild-platzhalter{display:flex;align-items:center;justify-content:center;padding:6px;text-align:center;font-size:12px;line-height:1.3;color:var(--t2-dunkel);opacity:1;filter:none}
.sk-bild-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.sk-bild-knoepfe .btn{min-height:44px}
.sk-bild-satz{margin:0 0 12px;padding:8px 10px;border:1px solid #f3ce86;border-radius:8px;background:#fdf6ea;color:var(--t);font-size:13px;line-height:1.45}
.sk-ablage{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;border:2px dashed var(--brd);border-radius:12px;background:var(--card);text-align:center;transition:border-color .15s,background-color .15s}
.sk-ablage.ist-ziel{border-color:var(--focus);background:#fdf6ea}
.sk-ablage-symbol{font-size:28px;color:var(--t2)}
.sk-ablage-titel{margin:0;font-size:14px;font-weight:600;color:var(--t)}
.sk-ablage-oder{font-size:13px;color:var(--t2-dunkel)}
.sk-ablage .sk-bild-knoepfe{justify-content:center;margin-top:0}
.sk-ablage .sk-meta{margin:0;color:var(--t2-dunkel)}
.sk-bild-pruefung{margin:12px 0 0;color:var(--t2-dunkel)}
.sk-bild-lesen{margin:24px 0;font-size:14px;color:var(--t)}

/* Dialog "Bild": crop (design 7.20 state B, 8.6) */
.sk-zs-bereich{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media (min-width:640px){.sk-zs-bereich{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}
.sk-zuschnitt{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:#1a1d2e;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.sk-zuschnitt--kategorie{aspect-ratio:3/2}
.sk-zuschnitt:active{cursor:grabbing}
.sk-zuschnitt canvas{position:absolute;inset:0;width:100%;height:100%}
.sk-zs-raster{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .15s;
  background-image:linear-gradient(to right,transparent calc(33.333% - 1px),rgba(255,255,255,.75) calc(33.333% - 1px),rgba(255,255,255,.75) 33.333%,transparent 33.333%,transparent calc(66.667% - 1px),rgba(255,255,255,.75) calc(66.667% - 1px),rgba(255,255,255,.75) 66.667%,transparent 66.667%),
    linear-gradient(to bottom,transparent calc(33.333% - 1px),rgba(255,255,255,.75) calc(33.333% - 1px),rgba(255,255,255,.75) 33.333%,transparent 33.333%,transparent calc(66.667% - 1px),rgba(255,255,255,.75) calc(66.667% - 1px),rgba(255,255,255,.75) 66.667%,transparent 66.667%)}
.sk-zuschnitt.bewegt .sk-zs-raster{opacity:1}
.sk-zs-band{position:absolute;left:0;right:0;top:25%;height:50%;border-top:2px dashed rgba(255,255,255,.9);border-bottom:2px dashed rgba(255,255,255,.9);pointer-events:none}
.sk-zs-name{position:absolute;left:0;right:0;bottom:0;height:25%;background:rgba(26,29,46,.5);pointer-events:none}
.sk-zs-band span,.sk-zs-name span{position:absolute;left:8px;top:6px;max-width:calc(100% - 16px);padding:2px 8px;border-radius:999px;background:rgba(26,29,46,.82);color:#fff;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-zs-hilfe{margin:6px 0 0}
.sk-zs-steuer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.sk-zs-steuer .btn{min-height:44px}
.sk-zs-groesse{display:flex;align-items:center;gap:2px;flex:1 1 100%}
.sk-zs-groesse label{margin-right:4px;font-size:13px;color:var(--t2-dunkel)}
.sk-zs-groesse input[type=range]{flex:1;min-width:80px;height:44px;margin:0;accent-color:var(--p-text)}
.sk-vs-titel{margin:0 0 8px;font-size:13px;color:var(--t)}
.sk-vs-name{margin:8px 0 4px;font-size:12px;color:var(--t2-dunkel)}
.sk-vorschau-figur{margin:0}
.sk-vorschau-liste{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--brd);border-radius:10px;background:var(--card)}
.sk-vorschau-liste canvas{flex:none;width:104px;height:78px;border-radius:8px}
.sk-vorschau-text{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:13px;font-weight:600;color:var(--t);overflow-wrap:anywhere}
.sk-vorschau-preis{color:var(--p-text);font-variant-numeric:tabular-nums}
.sk-vorschau-gross{display:block;width:100%;max-width:280px;height:auto;aspect-ratio:4/3;border-radius:10px}
.sk-vorschau-kat{position:relative;overflow:hidden;border-radius:10px;background:var(--c2)}
.sk-vorschau-kat canvas{display:block;width:100%;height:auto}
.sk-vorschau-kat::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);pointer-events:none}
.sk-vorschau-katname{position:absolute;z-index:1;left:10px;right:10px;bottom:6px;color:#fff;font-size:14px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk-qualitaet{display:flex;align-items:center;gap:6px;margin:12px 0 4px;font-size:13px;font-weight:600}
.sk-qualitaet--ok{color:#166534}
.sk-qualitaet--warn{color:#92400e}
.sk-qualitaet--fehler{color:#b91c1c}
.sk-rechte{align-items:flex-start;padding:10px 0 4px;line-height:1.45}
.sk-rechte input{margin-top:2px}
:is(#skBildM,#skBilderM) .btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
:is(#skBildM,#skBilderM) .btn-o:hover{color:var(--p-text)}
/* Phone (design 11): the crop takes the full width, the previews stand below it in one row; with little content the
   buttons still stand at the bottom of the screen ("Fuß fest") */
@media (max-width:639px){
.mo .ml.sk-vollbild.sk-bild-dlg{display:flex;flex-direction:column}
.mo .ml.sk-vollbild.sk-bild-dlg>.sk-dlg-fuss{margin-top:auto}
.sk-bild-dlg #skBildInhalt,.sk-bild-dlg #skBilderInhalt{padding-bottom:16px}
.sk-vorschau-reihe{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.sk-vorschau-reihe>*{flex:0 0 auto}
.sk-vorschau-figur{width:180px}
.sk-vorschau-liste{width:240px}
.sk-vorschau-gross{width:160px}
}

/* Dialog "Bilder zuordnen" (design 7.21) */
.sk-mehr-kopf{margin:-6px 0 10px}
.sk-mehr-liste{list-style:none;margin:0 0 10px;padding:0}
.sk-mehr-zeile{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 12px;align-items:center;padding:10px 0;border-top:1px solid var(--brd)}
.sk-mehr-zeile:first-child{border-top:0}
.sk-mehr-daumen{width:64px;height:48px;border-radius:6px;background:var(--c2);line-height:0;overflow:hidden}
.sk-mehr-daumen img{width:64px;height:48px;object-fit:cover}
.sk-mehr-info{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0;font-size:13px}
.sk-mehr-name{font-weight:600;overflow-wrap:anywhere}
.sk-mehr-notiz{flex:1 1 100%;font-size:12px;color:var(--t2-dunkel)}
.sk-mehr-notiz--warn{color:#92400e}
.sk-mehr-notiz--fehler{color:#b91c1c}
.sk-mehr-wahl{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sk-mehr-wahl select{flex:1 1 200px;min-width:0;min-height:44px;padding:8px 10px;border:1.5px solid var(--brd);border-radius:8px;background:#fff;color:var(--t);font-size:14px}
.sk-mehr-wahl .btn{min-height:44px}
.sk-mehr-wahl .btn[hidden],.sk-mehr-wahl .sk-icon-knopf[hidden]{display:none}
.sk-mehr-stand{grid-column:1/-1;font-size:12px;color:var(--t)}
.sk-mehr-stand:empty{display:none}
.sk-mehr-stand .btn{min-height:40px;margin-left:6px}
.sk-mehr-ok{color:#166534;font-weight:600}
.sk-mehr-dazu{min-height:44px;margin-bottom:6px}
.sk-mehr-rechte-titel{margin:10px 0 0}
.sk-mehr-summe{margin:8px 0 0;font-size:13px;color:var(--t)}
@media (min-width:640px){.sk-mehr-zeile{grid-template-columns:64px minmax(0,1fr) minmax(0,1.3fr)}.sk-mehr-wahl{grid-column:auto}}
#skBilderSenden[hidden]{display:none}

/* Files dragged over the page (design 8.5) */
.sk-datei-ziel{position:relative;outline:2px solid var(--focus);outline-offset:-2px;background:#fdf6ea!important}
.sk-datei-text{position:absolute;z-index:2;right:8px;top:50%;max-width:60%;padding:4px 10px;transform:translateY(-50%);border:1.5px solid var(--focus);border-radius:999px;background:var(--card);color:var(--t);font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 6px rgba(0,0,0,.12);pointer-events:none}
.sk-datei-seite{position:fixed;z-index:185;left:50%;bottom:16px;display:flex;align-items:center;gap:8px;padding:12px 18px;transform:translateX(-50%);border-radius:12px;background:var(--t);color:#fff;font-size:14px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none}
.sk-datei-seite[hidden]{display:none}