/* TischDa: zusätzliche Designs. Ohne data-design bleibt TischDa unverändert. */
:root[data-design="krone"]{
  --bg:#F8F4E9; --panel:#FFFDFA; --panel2:#EEE6D3;
  --fill:rgba(42,83,62,.09); --fill2:rgba(42,83,62,.17); --fill3:rgba(42,83,62,.045);
  --line:rgba(61,88,60,.26); --line2:rgba(61,88,60,.16); --line-strong:rgba(61,88,60,.45); --line-ctrl:rgba(61,88,60,.35);
  --text:#223C30; --muted:#505E4C; --muted2:#54604E;
  --bar:rgba(255,253,246,.96);
  --accent:#1C654E; --accent-soft:#E3F0E6; --accent-text:#FFFFFF;
  --gold:#8B620D; --gold-soft:#F5EAC9; --krone:#987016;
  --frei:#FFFDFA; --frei-line:#8EAC96;
  --grid-h:rgba(53,84,61,.45); --grid-m:rgba(53,84,61,.28); --grid-q:rgba(53,84,61,.15); --tl-line:rgba(53,84,61,.26); --tl-zebra:rgba(42,83,62,.04);
  --shadow:0 14px 38px rgba(51,56,32,.16); --shadow-s:0 4px 18px rgba(51,56,32,.06);
  --action:#E6C56A; --action-text:#203F30; --action-alt:#D5E8D9;
  --design-action-shadow:0 4px 16px rgba(141,108,24,.14);
  --design-toast-bg:#18392B; --design-toast-text:#FFF8E6; --design-toast-border:#91B799;
  --design-toast-button:#315540; --design-toast-button-text:#F5D982;
}
:root[data-design="krone"][data-theme="dark"]{
  --bg:#0E1B16; --panel:#182A22; --panel2:#263C31;
  --fill:rgba(158,191,163,.14); --fill2:rgba(158,191,163,.24); --fill3:rgba(158,191,163,.075);
  --line:rgba(177,203,175,.29); --line2:rgba(177,203,175,.18); --line-strong:rgba(177,203,175,.58); --line-ctrl:rgba(177,203,175,.43);
  --text:#F7F3E8; --muted:#C2CCBC; --muted2:#B4C2AF;
  --bar:rgba(15,29,23,.96);
  --accent:#94D6AE; --accent-soft:#244338; --accent-text:#19372C;
  --gold:#F1D384; --gold-soft:#423B24; --krone:#F1D384;
  --frei:#223A2E; --frei-line:#728B79;
  --grid-h:rgba(183,208,178,.43); --grid-m:rgba(183,208,178,.26); --grid-q:rgba(183,208,178,.14); --tl-line:rgba(177,203,175,.3); --tl-zebra:rgba(158,191,163,.06);
  --shadow:0 16px 40px rgba(0,12,5,.5); --shadow-s:0 4px 18px rgba(0,12,5,.16);
  --action:#E9C76B; --action-text:#19372C; --action-alt:#97D7B0;
  --design-action-shadow:0 4px 16px rgba(0,10,5,.2);
  --design-toast-bg:#F4F0E3; --design-toast-text:#203F30; --design-toast-border:#94D6AE;
  --design-toast-button:#D5E8D9; --design-toast-button-text:#203F30;
}
:root[data-design="lounge"]{
  --bg:#F4F0FB; --panel:#FFFDFE; --panel2:#E9DEF5;
  --fill:rgba(97,58,136,.09); --fill2:rgba(97,58,136,.17); --fill3:rgba(97,58,136,.045);
  --line:rgba(95,63,130,.26); --line2:rgba(95,63,130,.16); --line-strong:rgba(95,63,130,.45); --line-ctrl:rgba(95,63,130,.35);
  --text:#29203E; --muted:#60536E; --muted2:#625270;
  --bar:rgba(252,248,255,.96);
  --accent:#6B3CAA; --accent-soft:#EFE4FA; --accent-text:#FFFFFF;
  --gold:#876008; --gold-soft:#F8E8CB; --krone:#98640C;
  --frei:#FFFDFE; --frei-line:#AF99C5;
  --grid-h:rgba(95,63,130,.45); --grid-m:rgba(95,63,130,.28); --grid-q:rgba(95,63,130,.15); --tl-line:rgba(95,63,130,.26); --tl-zebra:rgba(97,58,136,.04);
  --shadow:0 14px 38px rgba(64,35,96,.16); --shadow-s:0 4px 18px rgba(64,35,96,.06);
  --action:#FFC0A8; --action-text:#432339; --action-alt:#DFC8FF;
  --design-action-shadow:0 4px 16px rgba(174,75,58,.14);
  --design-toast-bg:#332144; --design-toast-text:#FFF3FB; --design-toast-border:#C497E6;
  --design-toast-button:#563767; --design-toast-button-text:#FFD0BB;
}
:root[data-design="lounge"][data-theme="dark"]{
  --bg:#160F25; --panel:#251B38; --panel2:#37264D;
  --fill:rgba(186,148,222,.14); --fill2:rgba(186,148,222,.24); --fill3:rgba(186,148,222,.075);
  --line:rgba(205,173,229,.29); --line2:rgba(205,173,229,.18); --line-strong:rgba(205,173,229,.58); --line-ctrl:rgba(205,173,229,.43);
  --text:#FFF3FB; --muted:#D3BDD9; --muted2:#C5B0CF;
  --bar:rgba(26,17,43,.96);
  --accent:#D4B2FF; --accent-soft:#422D5F; --accent-text:#2A1745;
  --gold:#F8CB83; --gold-soft:#483429; --krone:#F8CB83;
  --frei:#322345; --frei-line:#8D75A3;
  --grid-h:rgba(213,180,236,.43); --grid-m:rgba(213,180,236,.26); --grid-q:rgba(213,180,236,.14); --tl-line:rgba(205,173,229,.3); --tl-zebra:rgba(186,148,222,.06);
  --shadow:0 16px 40px rgba(13,0,25,.5); --shadow-s:0 4px 18px rgba(13,0,25,.16);
  --action:#FFB395; --action-text:#442039; --action-alt:#CEAAFF;
  --design-action-shadow:0 4px 16px rgba(15,0,25,.2);
  --design-toast-bg:#F8EDF9; --design-toast-text:#432339; --design-toast-border:#D4B2FF;
  --design-toast-button:#E6CEF9; --design-toast-button-text:#432339;
}
/* In der Basis sind Menüfarben und Toasts fest eingefärbt. Diese Regeln
   wechseln ausschließlich die dekorativen Flächen; Statusfarben bleiben gleich. */
:root:is([data-design="krone"],[data-design="lounge"]) .btn.primaer,
:root:is([data-design="krone"],[data-design="lounge"]) .fab{box-shadow:var(--design-action-shadow)}
:root:is([data-design="krone"],[data-design="lounge"]) .menue-zeile .mi{background:var(--accent-soft) !important;color:var(--accent)}
:root:is([data-design="krone"],[data-design="lounge"]) .menue-zeile[data-aktion="abmelden"] .mi{background:var(--action-alt) !important;color:var(--action-text)}
:root:is([data-design="krone"],[data-design="lounge"]) .toast{background:var(--design-toast-bg);color:var(--design-toast-text);border-color:var(--design-toast-border)}
:root:is([data-design="krone"],[data-design="lounge"]) .toast button{background:var(--design-toast-button);color:var(--design-toast-button-text)}

/* Drei benannte Designs, unabhängig von der Helligkeit wählbar. */
.design-auswahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.design-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;min-height:132px;padding:14px;border:1.5px solid var(--line-ctrl);border-radius:14px;background:var(--panel);color:var(--text);text-align:left;transition:border-color .15s,background .15s,transform .1s}
.design-option:active{transform:scale(.98)}
.design-option b{padding-right:22px;font-size:16px;line-height:1.2;font-weight:700}
.design-option small{display:block;font-size:13px;line-height:1.35;color:var(--muted)}
.design-option.an,.design-option[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.design-option.an::after,.design-option[aria-pressed="true"]::after{content:"✓";position:absolute;right:10px;top:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--action);color:var(--action-text);font-size:14px;font-weight:800}
.design-farben{display:flex;gap:5px;align-items:center;margin-top:auto;padding-top:4px}
.design-punkt{display:block;width:24px;height:24px;flex:none;border-radius:50%;background:var(--farbe,var(--accent));box-shadow:inset 0 0 0 1px rgba(0,0,0,.16)}
@media (max-width:600px){
  .design-auswahl{grid-template-columns:1fr;gap:8px}
  .design-option{min-height:104px;padding:12px 14px;gap:4px}
  .design-option b{font-size:17px}
  .design-farben{margin-top:2px;padding-top:2px}
  .design-punkt{width:20px;height:20px}
}
@media (prefers-reduced-motion:reduce){.design-option{transition:none}}

/* Product and restaurant identity remain separate. Both PNGs preserve alpha. */
.tischda-marke{text-align:center}
.tischda-logo{max-width:340px;margin:0 auto}
.tischda-logo img{display:block;width:100%;height:auto}
.logo-fuer-dunkel{display:none!important}
:root[data-theme="dark"] .logo-fuer-hell{display:none!important}
:root[data-theme="dark"] .logo-fuer-dunkel{display:block!important}
.restaurant-logo-vorschau{display:inline-flex;align-items:center;justify-content:center;min-width:96px;min-height:58px;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.restaurant-logo-vorschau img{max-height:48px;max-width:190px;width:auto;height:auto;object-fit:contain}
.logo-hilfe{margin-top:14px;padding:14px;border-radius:12px;background:var(--fill3);color:var(--muted);font-size:14px;line-height:1.45}
.logo-hilfe b{color:var(--text)}
.logo-hilfe p{margin:6px 0 0}
.design-gewaehlt{font-size:12px;color:var(--accent);font-weight:700}

/* Feste App-Marke TischDa und die eigene Restaurant-Marke. */
.marke{align-items:flex-start;flex-direction:column;justify-content:center;gap:0;max-width:290px;padding:2px 0}
.app-marke{display:flex;align-items:center;justify-content:center;flex:none;width:135px;max-width:100%;height:34px}
.app-marke img,.marke .app-marke img{display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:contain;flex:none}
.restaurant-marke{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;min-height:36px}
.restaurant-marke .markentext{min-width:0}
.app-sperr-marke{width:220px;max-width:80vw;height:74px;margin:0 auto}
@media (min-width:1300px){
  .marke{flex-direction:row;align-items:center;gap:14px;max-width:390px;min-height:54px}
  .marke .app-marke{width:135px;height:42px}
  .restaurant-marke{padding-left:14px;border-left:1px solid var(--line-strong);gap:8px;min-height:38px}
}
@media (min-width:900px) and (max-width:1120px){
  header.kopf{column-gap:10px}
  .marke{max-width:215px}
  .marke .app-marke{width:125px;height:32px}
  .desk-tabs button{padding:0 9px}
  .kopf .datumnav .pill{min-width:120px}
}
@media (max-width:600px){
  header.kopf{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"appmarke rechts" "restaurant restaurant" "nav nav" "unter unter";row-gap:0}
  .marke{display:contents}
  .marke .app-marke{grid-area:appmarke;justify-self:start;width:135px;max-width:100%;height:36px}
  .kopfrechts{align-self:center}
  .restaurant-marke{grid-area:restaurant;width:100%;max-width:100%;min-height:36px;gap:7px;padding:0 0 3px}
  .restaurant-marke .krone{font-size:25px}
  .restaurant-marke .markename{font-size:16px}
  .restaurant-marke .unter{font-size:10px;letter-spacing:.08em}
  .restaurant-marke #logoImg{width:auto;height:auto;max-width:120px;max-height:30px}
}

.app-sperr-marke .app-marke{width:220px;max-width:100%;height:74px}
/* Tabletbreiten: volle Restaurantmarke und Platz auch für Rückgängig. */
@media (min-width:900px) and (max-width:1120px){
  header.kopf{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"marke nav rechts" "tabs tabs tabs" "unter unter unter";row-gap:4px}
  .marke{max-width:290px}
  .desk-tabs{justify-self:center}
}