/*
====================================================================
Titel:        basis.css - Brücke zum Design-System, Schriften, Dichte, Rahmen, Bausteine
Version:      1.1.1
Autor:        Andreas Grundke IT-Service (erstellt mit Claude)
Datum:        15.10.2026
Beschreibung: Farben, Radien, Schatten und Schriften kommen aus css/tokens.css
              (Design-System KMU-Plattform v0.1, Kopie). Das Mandantenprofil setzt
              data-profil am <html>: "restaurant-warm" oder "hotel-ruhig".
              Diese Datei übersetzt die Tokens in die Namen der Demo-Bausteine
              und legt je Profil Titelschrift, Navigation und Linienfarbe fest.
              Status: Abstufungen der Markenfarbe (Phase), Gelb nur für "offen",
              Rot nur für "kritisch".
Ablauf:       0 Schriften  1 Brücke und Profile  2 Dichte  3 Grundlagen  4 Demo-Band
              5 Rahmen  6 Bausteine  7 Phasen  8 Menü je Zeile
Aenderungen:  1.0.0 (15.10.2026) Neutrale Fassung für die öffentliche Demo
              1.1.0 (15.10.2026) Design-System, Phasen aus der Marke, Radien je Bauteil
              1.1.1 (16.10.2026) KI-Hinweis neutral mit Markenstreifen
====================================================================
*/

/* ---------- 0. Titelschriften der Demo-Betriebe (lokal, SIL OFL) ---------- */
@font-face{font-family:"EB Garamond";src:url("fonts/eb-garamond-latin-wght-normal.woff2") format("woff2-variations"),url("fonts/eb-garamond-latin-wght-normal.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}

/* ---------- 1. Brücke: Demo-Namen auf Tokens, dazu was je Profil abweicht ---------- */
:root,[data-profil]{
  --font:var(--schrift-ui);
  --font-titel:var(--schrift-marke);
  --titel-gewicht:680;
  --bg:var(--seite);
  --text:var(--text-1); --text2:var(--text-2); --text3:var(--text-2);
  --flaeche:var(--marke-fl-1); --hover:var(--flaeche-hover);
  --offen-bg:var(--warnung-fl); --offen-text:var(--warnung-text); --offen-rand:var(--warnung-rand);
  --krit:var(--fehler-text); --krit-bg:var(--fehler-fl); --krit-rand:var(--fehler-rand); --ok:var(--erfolg-text);
  --radius-k:var(--r-knopf); --radius:var(--r-karte);
  --dunkel:var(--n-12);
  --linie:var(--rand); --linie-stark:var(--dunkel);
  --nav-bg:#12263f; --nav-text:#ecf0f6; --nav-text2:#b6c3d6; --nav-aktiv:rgba(255,255,255,.12); --nav-aktiv-text:#fff; --nav-hover:rgba(255,255,255,.08); --nav-rand:rgba(255,255,255,.16); --nav-fokus:#fff; --nav-linie:var(--akzent);
  --nav-zahl-bg:var(--akzent-solid); --nav-zahl-text:var(--auf-akzent);
  --bild-linie:var(--dunkel); --bild-akzent:var(--marke-solid); --bild-text:var(--text-2); --bild-name:var(--dunkel); --bild-baum:var(--marke-fl-2); --bild-flaeche:var(--karte);
  --ci-blau:#0c4da2; --ci-cyan:#26bdef; --band-bg:#0f1117; --band-text:#e4e9f2;
  --demo-h:var(--demo-h0,44px); --nav-b:248px;
  --schatten:var(--schatten-3);
  --kurve:var(--ease-aus);
}
/* Gasthaus: Terrakotta auf Sand, Navigation in Ziegel (Radix Tomato 12), Titel in EB Garamond */
[data-profil="restaurant-warm"]{
  --schrift-marke:"EB Garamond",Georgia,serif; --titel-gewicht:600;
  --dunkel:#5c271f;
  --nav-bg:#5c271f; --nav-text:#fff8f7; --nav-text2:#fdbdaf; --nav-aktiv:rgba(255,248,247,.14); --nav-hover:rgba(255,248,247,.08); --nav-rand:rgba(255,248,247,.18); --nav-linie:#fdbdaf;
  --bild-baum:var(--akzent-fl); --bild-akzent:var(--marke-solid);
}
/* Hotel: Petrol auf Cloud Dancer, helle Navigation, Titel in Barlow, Knöpfe eckiger */
[data-profil="hotel-ruhig"]{
  --schrift-marke:"Barlow","Manrope",sans-serif; --titel-gewicht:500;
  --r-knopf:4px;
  --dunkel:#0d3d38;
  --nav-bg:var(--karte); --nav-text:var(--text-1); --nav-text2:var(--text-2); --nav-aktiv:var(--marke-fl-3); --nav-aktiv-text:var(--dunkel); --nav-hover:var(--flaeche-hover); --nav-rand:var(--rand); --nav-fokus:var(--fokus); --nav-linie:var(--akzent);
  --bild-baum:var(--marke-fl-2); --bild-akzent:var(--akzent);
}

/* ---------- 2. Dichte: folgt dem Eingabegerät, per Umschalter überschreibbar ---------- */
:root{--fs:15px;--ctl:40px;--ctl-s:34px;--td-py:9px;--td-px:12px;--gap-b:22px;--gap-s:12px;--main-py:24px;--main-px:32px;--row-py:11px;--fs-in:15px;--tagbtn-h:72px;--check-h:52px;
  --h1:clamp(1.55rem,1.2rem + 1.6vw,2.2rem);--demo-h0:44px;
  --vz-cols:124px 124px minmax(130px,1fr) 52px 100px 168px 92px;--vz-cols-s:118px 112px minmax(100px,1fr) 48px 162px}
@media (pointer:fine) and (hover:hover){:root{--fs:13.5px;--ctl:30px;--ctl-s:26px;--td-py:6px;--td-px:10px;--gap-b:14px;--gap-s:8px;--main-py:14px;--main-px:20px;--row-py:5px;--fs-in:13.5px;--tagbtn-h:58px;--check-h:38px;--h1:1.6rem;--demo-h0:38px;
  --vz-cols:118px 112px minmax(110px,1fr) 38px 92px 150px 84px;--vz-cols-s:114px 104px minmax(100px,1fr) 40px 150px}}
@media (pointer:coarse){:root{--fs:16px;--ctl:48px;--ctl-s:40px;--td-py:13px;--td-px:14px;--gap-b:22px;--gap-s:8px;--main-py:14px;--main-px:24px;--row-py:10px;--fs-in:16px;--tagbtn-h:84px;--check-h:64px;--demo-h0:46px;
  --vz-cols:136px 132px minmax(140px,1fr) 56px 110px 176px 100px;--vz-cols-s:134px 124px minmax(110px,1fr) 56px 176px}}
html[data-dichte=kompakt]{--fs:13.5px;--ctl:30px;--ctl-s:26px;--td-py:6px;--td-px:10px;--gap-b:14px;--gap-s:8px;--main-py:14px;--main-px:20px;--row-py:5px;--fs-in:13.5px;--tagbtn-h:58px;--check-h:38px;--h1:1.6rem;--demo-h0:38px;
  --vz-cols:118px 112px minmax(110px,1fr) 38px 92px 150px 84px;--vz-cols-s:114px 104px minmax(100px,1fr) 40px 150px}
html[data-dichte=normal]{--fs:15px;--ctl:40px;--ctl-s:34px;--td-py:9px;--td-px:12px;--gap-b:22px;--gap-s:12px;--main-py:24px;--main-px:32px;--row-py:11px;--fs-in:15px;--tagbtn-h:72px;--check-h:52px;--h1:clamp(1.55rem,1.2rem + 1.6vw,2.2rem);--demo-h0:44px;
  --vz-cols:124px 124px minmax(130px,1fr) 52px 100px 168px 92px;--vz-cols-s:118px 112px minmax(100px,1fr) 48px 162px}
html[data-dichte=gross]{--fs:16px;--ctl:48px;--ctl-s:40px;--td-py:13px;--td-px:14px;--gap-b:22px;--gap-s:8px;--main-py:14px;--main-px:24px;--row-py:10px;--fs-in:16px;--tagbtn-h:84px;--check-h:64px;--demo-h0:46px;
  --vz-cols:136px 132px minmax(140px,1fr) 56px 110px 176px 100px;--vz-cols-s:134px 124px minmax(110px,1fr) 56px 176px}
@media (min-width:1100px){:root{--nav-b:248px}}
@media (min-width:1100px) and (pointer:fine) and (hover:hover){:root{--nav-b:204px}}
@media (min-width:1100px){html[data-dichte=kompakt]{--nav-b:204px}html[data-dichte=normal],html[data-dichte=gross]{--nav-b:248px}}

/* ---------- 3. Grundlagen ---------- */
*{box-sizing:border-box}
html{font-size:var(--fs,15px);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--demo-h) + 12px);scrollbar-color:var(--n-8) transparent;accent-color:var(--marke-solid)}
body{margin:0;background:var(--bg);color:var(--text);font:var(--gewicht-normal) 1rem/1.5 var(--font);padding-top:var(--demo-h);caret-color:var(--marke-text)}
::selection{background:var(--auswahl);color:var(--text-1)}
h1,h2,h3{font-family:var(--font-titel,var(--font));color:var(--dunkel);margin:0;text-wrap:balance;font-weight:var(--titel-gewicht)}
h1{font-size:var(--h1);line-height:1.15;letter-spacing:var(--laufweite-titel)}
h2{font-size:1.22rem;line-height:1.25}
h3{font-size:1.02rem}
p{margin:0}
a{color:var(--marke-text);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--marke-hover);text-decoration-thickness:2px}
:focus-visible{outline:var(--fokus-breite) solid var(--fokus);outline-offset:var(--fokus-abstand);border-radius:var(--r-chip)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--karte);color:var(--dunkel);padding:10px 14px;border-radius:var(--r-knopf);border:2px solid var(--fokus)}
.skip:focus{top:calc(var(--demo-h) + 6px)}
.num{font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.zahl,td.num,.vz-zeit,.vz-gaeste,dd.num{font-family:var(--schrift-zahlen);font-variant-numeric:tabular-nums slashed-zero;font-size:.92em;letter-spacing:-.01em}
.muted{color:var(--text2)}
svg.ic{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- 4. Demo-Band (Grundke, CI 2026.01 dunkel) ---------- */
.band{position:fixed;inset:0 0 auto 0;height:var(--demo-h);background:var(--band-bg);color:var(--band-text);z-index:60;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:2px solid var(--ci-cyan);font:500 .87rem/1.2 "Manrope","Segoe UI",sans-serif}
.band__demo{display:flex;align-items:center;gap:10px;white-space:nowrap}
.band__demo b{background:var(--ci-cyan);color:#0f1117;border-radius:4px;padding:2px 8px;font-weight:700;letter-spacing:.04em}
.band__demo span{font-weight:600;color:#fff}
.band__ctl{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0}
.band__betrieb{color:#b6c3d6;white-space:nowrap}
.band__link{color:#fff;white-space:nowrap}
.band__link:hover{color:var(--ci-cyan)}
.band__feld{display:flex;align-items:center;gap:8px;color:var(--band-text)}
.band select{min-height:28px;padding:2px 8px;width:auto;background:#1a1f2e;color:var(--band-text);border:1px solid #3a4560;border-radius:6px;font:inherit}
.band select:hover{border-color:var(--ci-cyan)}
.band__rollen{display:flex;gap:2px;background:#1a1f2e;border-radius:8px;padding:2px}
.band__rollen button{font:inherit;color:var(--band-text);background:none;border:0;border-radius:6px;padding:3px 10px;min-height:28px;cursor:pointer}
.band__rollen button:hover{background:#2a3247}
.band__rollen button[aria-checked=true]{background:var(--ci-blau);color:#fff;font-weight:600}
.band .kurz{display:none}
.band__reset{font:inherit;font-weight:600;color:#0f1117;background:var(--ci-cyan);border:0;border-radius:8px;padding:3px 12px;min-height:28px;cursor:pointer;white-space:nowrap}
.band__reset:hover{background:#7fd6f6}
.band a:focus-visible,.band button:focus-visible,.band select:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- 5. Rahmen ---------- */
.app{display:grid;grid-template-columns:var(--nav-b) minmax(0,1fr);min-height:calc(100vh - var(--demo-h))}
.nav{background:var(--nav-bg);color:var(--nav-text);position:sticky;top:var(--demo-h);height:calc(100vh - var(--demo-h));display:flex;flex-direction:column;padding:var(--gap-b) 10px 12px;overflow-y:auto;border-right:1px solid var(--nav-rand)}
.nav__marke{display:block;padding:2px 6px 0;margin:0 0 4px;border-radius:var(--r-chip)}
.nav__marke img{display:block;height:44px;width:auto;max-width:100%}
.nav__modul{margin:4px 6px 14px;font-size:.84rem;color:var(--nav-text2)}
.nav ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.nav__link{display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:var(--r-eingabe);color:var(--nav-text);text-decoration:none;min-height:var(--ctl);transition:background var(--dauer) var(--kurve)}
.nav__link:hover{background:var(--nav-hover);color:var(--nav-text)}
.nav__link[aria-current=page]{background:var(--nav-aktiv);color:var(--nav-aktiv-text);font-weight:650}
.nav__zahl{margin-left:auto;background:var(--nav-zahl-bg);color:var(--nav-zahl-text);border-radius:var(--r-chip);padding:0 6px;font:600 .78rem/1.5 var(--schrift-zahlen)}
.nav :focus-visible{outline-color:var(--nav-fokus)}
.nav__fuss{margin-top:auto;padding:14px 6px 0;border-top:1px solid var(--nav-rand);font-size:.8rem;color:var(--nav-text2);display:grid;gap:6px}
.nav__nutzer{color:var(--nav-text);font-size:.86rem}
.nav__knoepfe{display:flex;gap:6px;flex-wrap:wrap}
.nav__klein{font:inherit;font-size:.84rem;display:inline-flex;align-items:center;gap:6px;color:var(--nav-text);background:transparent;border:1px solid var(--nav-rand);border-radius:var(--r-knopf);padding:4px 10px;min-height:var(--ctl-s);cursor:pointer;text-decoration:none}
.nav__klein:hover{background:var(--nav-hover);color:var(--nav-text)}
.herkunft{font-size:.8rem;line-height:1.4;color:inherit}
.herkunft a{color:inherit;text-decoration-color:currentColor}
.herkunft b{font-weight:600}
.herkunft__v{display:block;opacity:.85}
.ci-zeile{font-size:.75rem;opacity:.85}
main{padding:var(--main-py) var(--main-px) 40px;min-width:0;max-width:2200px;width:100%}
main:focus,#inhalt:focus,h1[tabindex='-1']:focus{outline:none}
.fuss-mobil{display:none}
.seitenkopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;margin-bottom:var(--gap-b)}
.seitenkopf p{color:var(--text2);margin-top:4px;max-width:72ch}
.rollenhinweis{background:var(--marke-fl-1);border:1px solid var(--marke-rand);border-radius:var(--r-zelle);padding:8px 12px;font-size:.93rem;margin-bottom:14px;color:var(--dunkel)}
.solo{min-height:calc(100vh - var(--demo-h))}

/* ---------- 6. Bausteine ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .95rem/1.2 var(--font);min-height:var(--ctl);padding:0 calc(var(--ctl)*.42);border-radius:var(--r-knopf);border:1px solid var(--marke-solid);background:var(--marke-solid);color:var(--auf-marke);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dauer-kurz) var(--kurve),transform var(--dauer-kurz) var(--kurve)}
.btn:hover{background:var(--marke-hover);border-color:var(--marke-hover);color:var(--auf-marke)}
.btn:active{background:var(--marke-aktiv);transform:translateY(1px)}
.btn--zweit{background:var(--karte);color:var(--marke-text);border-color:var(--rand-eingabe)}
.btn--zweit:hover{background:var(--marke-fl-1);color:var(--marke-text);border-color:var(--marke-solid)}
.btn--text{background:none;border-color:transparent;color:var(--marke-text);padding:0 8px}
.btn--text:hover{background:var(--marke-fl-1);border-color:transparent;color:var(--marke-text)}
.btn--klein{min-height:var(--ctl-s);padding:0 10px;font-size:.88rem}
.btn[disabled],.btn[aria-disabled=true]{background:var(--flaeche-hover);border-color:var(--rand);color:var(--text-aus);cursor:not-allowed;transform:none}
.knopfreihe{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.offen{display:inline-block;background:var(--offen-bg);color:var(--offen-text);border:1px solid var(--offen-rand);border-radius:var(--r-chip);padding:0 6px;font-size:.86rem;font-weight:550;white-space:nowrap}
.offen--chip{font-weight:650}
.geaendert{display:inline-flex;align-items:center;gap:5px;background:var(--krit-bg);color:var(--krit);border:1px solid var(--krit-rand);border-radius:var(--r-chip);padding:0 6px;font-size:.8rem;font-weight:650;white-space:nowrap}
.chip-klein{display:inline-block;margin-left:8px;padding:0 6px;border-radius:var(--r-chip);background:transparent;color:var(--text2);border:1px solid var(--rand-stark);font-size:.78rem;font-weight:600;white-space:nowrap;vertical-align:middle}
.status-text{font-size:.9rem;color:var(--text2)}
.status-text--aus{color:var(--text-aus)}
label.feld{display:grid;gap:4px;font-size:.9rem;font-weight:550;color:var(--text2)}
input[type=text],input[type=search],input[type=date],input[type=time],input[type=number],input[type=email],input[type=password],select,textarea{font:var(--gewicht-normal) var(--fs-in,1rem)/1.4 var(--font);color:var(--text);background:var(--karte);border:1px solid var(--rand-eingabe);border-radius:var(--r-eingabe);padding:4px 10px;min-height:var(--ctl);width:100%}
textarea{resize:vertical;min-height:120px}
input:hover,select:hover,textarea:hover{border-color:var(--marke-solid)}
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 3px var(--marke-fl-2)}
input:disabled,select:disabled,textarea:disabled{background:var(--flaeche-hover);color:var(--text2);border-color:var(--rand)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--marke-solid);margin:0;flex:none}
.eingabe-zahl,input.eingabe-zahl{width:5.5em;text-align:right;font-family:var(--schrift-zahlen)}
.eingabe-zeit,input.eingabe-zeit{width:6.5em;font-family:var(--schrift-zahlen)}
.feldreihe{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.feldreihe>*{flex:1 1 180px}
.feldreihe .btn{flex:0 0 auto}
.segment{display:inline-flex;border:1px solid var(--rand-eingabe);border-radius:var(--r-knopf);overflow:hidden;background:var(--karte)}
.segment button{font:600 .93rem var(--font);min-height:var(--ctl);padding:0 13px;border:0;background:none;color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.segment button+button{border-left:1px solid var(--rand-eingabe)}
.segment button:hover{background:var(--flaeche-hover);color:var(--text)}
.segment button[aria-pressed=true]{background:var(--dunkel);color:#fff}
.segment button[disabled]{color:var(--text-aus);cursor:not-allowed}
.filterchips{display:flex;flex-wrap:wrap;gap:4px}
.filterchips button{font:550 .86rem var(--font);min-height:var(--ctl-s);border-radius:var(--r-chip);border:1px solid var(--rand);background:var(--karte);color:var(--text2);padding:0 9px;cursor:pointer}
.filterchips button:hover{border-color:var(--rand-eingabe);color:var(--text)}
.filterchips button[aria-pressed=true]{background:var(--marke-fl-3);border-color:var(--marke-rand);color:var(--dunkel);font-weight:650}
.leer{padding:22px 18px;border:1px dashed var(--rand-stark);border-radius:var(--r-zelle);color:var(--text2);text-align:center}
.hinweisbox{border:1px solid var(--rand);background:var(--karte);border-radius:var(--r-zelle);padding:8px 12px;display:flex;gap:10px;align-items:flex-start;font-size:.94rem}
.hinweisbox--warn{background:var(--offen-bg);border-color:var(--offen-rand);color:var(--offen-text)}
.hinweisbox--krit{background:var(--krit-bg);border-color:var(--krit-rand);color:#8c1d22}
.hinweisbox--ki{background:var(--karte-2);border-color:var(--rand);border-left:3px solid var(--marke-solid);color:var(--dunkel)}
.hinweisbox a{color:inherit;font-weight:600}
.abschnitt{margin-top:var(--gap-b)}
.abschnitt>h2{margin-bottom:10px}
.schalter{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--rand);border-radius:var(--r-zelle);background:var(--karte);cursor:pointer;margin-bottom:var(--gap-b);max-width:90ch}
.schalter input{margin-top:2px}
.fehler{color:var(--krit);font-weight:600;min-height:1.4em}
.fehler:empty{min-height:0}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--dunkel);color:#fff;border-radius:var(--r-zelle);padding:11px 16px;z-index:90;max-width:min(560px,calc(100vw - 32px));opacity:0;pointer-events:none;transition:opacity var(--dauer-panel) var(--kurve),transform var(--dauer-panel) var(--kurve);box-shadow:var(--schatten-3)}
.toast.an{opacity:1;transform:translate(-50%,0)}
table.tab{width:100%;border-collapse:collapse}
table.tab th{text-align:left;font-weight:650;color:var(--text2);background:transparent;padding:calc(var(--td-py) - 1px) var(--td-px);border-bottom:2px solid var(--linie-stark);font-size:.86rem;white-space:nowrap}
table.tab td{padding:var(--td-py) var(--td-px);border-bottom:1px solid var(--linie);vertical-align:top}
table.tab .r,table.tab th.r{text-align:right}
table.tab tr.summe td{font-weight:700;border-top:2px solid var(--linie-stark);border-bottom:0;background:var(--karte)}
table.tab tbody tr:hover{background:var(--hover)}
table.tab tr.aus td{color:var(--text2)}
table.dicht td{padding:calc(var(--td-py) - 1px) 8px;vertical-align:middle}
table.dicht th{padding:calc(var(--td-py) - 2px) 8px}
table.dicht .erste a{font-weight:600}
table.tab td a{color:var(--text-1);text-decoration-color:var(--rand-stark)}
table.tab td a:hover{color:var(--marke-text);text-decoration-color:currentColor}
tr.gewaehlt td{background:var(--zeile-gewaehlt);font-weight:600}
.tabbox{background:var(--karte);border:1px solid var(--rand);border-radius:var(--r-zelle);overflow:visible}
.tabbox table.tab th{background:var(--karte-2)}
.tabbox table.tab td{vertical-align:middle}
td[data-l="Erstellt"],td[data-l="Gültig bis"]{white-space:nowrap}
.tabbox table.tab tr:first-child th:first-child{border-top-left-radius:var(--r-zelle)}
.tabbox table.tab tr:first-child th:last-child{border-top-right-radius:var(--r-zelle)}
.kv{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:0;margin:0}
.kv dt{font-weight:600;color:var(--text2);padding:calc(var(--td-py) - 1px) 12px calc(var(--td-py) - 1px) 0;border-bottom:1px solid var(--linie)}
.kv dd{margin:0;padding:calc(var(--td-py) - 1px) 0;border-bottom:1px solid var(--linie);min-width:0;overflow-wrap:anywhere}
.kv2{display:grid;grid-template-columns:minmax(0,1fr) auto;margin:0}
.kv2 dt{padding:calc(var(--td-py) - 1px) 16px calc(var(--td-py) - 1px) 0;border-bottom:1px solid var(--linie);color:var(--text2)}
.kv2 dd{margin:0;padding:calc(var(--td-py) - 1px) 0;border-bottom:1px solid var(--linie);font-weight:600;text-align:right}
.hinweis-klein{font-size:.88rem;color:var(--text2);margin-top:8px}
.keine{color:var(--text2);padding:8px 0;border-bottom:1px solid var(--linie)}
.ok-leer{display:flex;gap:8px;align-items:center;color:var(--ok);font-weight:600}

/* ---------- 7. Phasen: Abstufungen der Markenfarbe, sechs Striche zeigen den Fortschritt ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-chip);padding:0 6px;font-size:.8rem;font-weight:650;line-height:1.55;white-space:nowrap;border:1px solid transparent;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip__t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pips{display:inline-grid;grid-template-columns:repeat(6,3px);gap:1.5px;flex:none}
.pips i{width:3px;height:9px;border-radius:1px;background:currentColor;opacity:.25}
.pips i.an{opacity:1}
.st-vorlauf{background:var(--karte);color:var(--marke-text);border-color:var(--marke-rand)}
.st-verbindlich{background:var(--marke-fl-2);color:var(--dunkel);border-color:var(--marke-rand)}
.st-vorbereitung{background:var(--marke-solid);color:var(--auf-marke);border-color:var(--marke-solid)}
.st-durchfuehrung{background:var(--dunkel);color:#fff;border-color:var(--dunkel)}
.st-nachlauf{background:var(--karte);color:var(--text2);border-color:var(--rand-eingabe);border-style:dashed}
.st-abschluss{background:transparent;color:var(--text2);border-color:transparent;padding-left:0}
.st-storno{background:transparent;color:var(--text2);border-color:var(--rand-eingabe);border-style:dashed;text-decoration:line-through}
.st-storno .pips{display:none}

/* ---------- 8. Menü je Zeile (Aktionen bündeln statt Knopfwand) ---------- */
.zmenue{position:relative;display:inline-block}
.zmenue>summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;min-width:var(--ctl-s);min-height:var(--ctl-s);border-radius:var(--r-knopf);color:var(--text2);cursor:pointer;border:1px solid transparent}
.zmenue>summary::-webkit-details-marker{display:none}
.zmenue>summary:hover{background:var(--flaeche-hover);color:var(--text)}
.zmenue[open]>summary{background:var(--flaeche-aktiv);color:var(--text)}
.zmenue__liste{position:absolute;right:0;top:calc(100% + 4px);z-index:var(--z-menue);min-width:220px;background:var(--karte);border:1px solid var(--rand);border-radius:var(--r-zelle);box-shadow:var(--schatten-2);padding:4px;display:grid;gap:1px}
.zmenue__liste button,.zmenue__liste a{font:inherit;font-size:.92rem;text-align:left;display:flex;align-items:center;gap:8px;min-height:var(--ctl);padding:0 10px;border:0;border-radius:var(--r-chip);background:none;color:var(--text);cursor:pointer;text-decoration:none;white-space:nowrap}
.zmenue__liste button:hover,.zmenue__liste a:hover{background:var(--flaeche-hover)}
.zmenue__liste .gefahr{color:var(--krit)}
.zmenue__liste [disabled]{color:var(--text-aus);cursor:not-allowed;background:none}
td.zeilenaktion{text-align:right;white-space:nowrap;vertical-align:middle}
td.zeilenaktion>*{vertical-align:middle}
/* EB Garamond hat eine kleine x-Höhe: Titel auf die Augenhöhe von Manrope bringen */
[data-profil="restaurant-warm"] :is(h1,h2,h3,h4,caption),[data-profil="restaurant-warm"] .bild text.n{font-size-adjust:.47}