/* =====================================================================
   DESIGN-PRESETS: Modern / Elegant / Klassisch + (Premium) Saison & Feiertage
   Zentral hier -- keine restaurantspezifischen Sonderregeln. Gewaehlt wird
   ueber Attribute am <html>-Element (gesetzt von theme.js):
     data-theme="modern | elegant | classic | spring | summer | autumn | winter | christmas | easter | halloween"
     data-category-layout="image | compact"
     data-dish-layout="image | compact"
   Dieselben Attribute funktionieren an jedem Element (die Design-Vorschau im
   Admin nutzt sie an einem Container), deshalb stehen die Token-Bloecke
   unter [data-theme="..."] und nicht unter :root[data-theme].

   AUFBAU
   1. Abgeleitete Tokens (an jedem Element neu berechnet).
   2. Token-Bloecke je Preset (Farben, Radien, Schatten, Schrift, Masse).
   3. Strukturregeln je Preset (was ueber Tokens allein nicht geht:
      Linien, Kartencharakter, Ueberschriften-Zierde ...).
   4. Kompakt-Layouts fuer Kategorien/Gerichte (presetuebergreifend).

   "Modern" entspricht dem bisherigen Gastdesign; seine Werte stehen in
   tokens.css bzw. hier nur dort, wo ein Preset-Wechsel sie zuruecksetzen
   muss. Die Strukturregeln der Gastansicht sind mit ".phone" begrenzt, damit
   sie nie Admin-Elemente treffen.
   ===================================================================== */

/* ---- 1. Abgeleitete Tokens ----------------------------------------- */
:root,
[data-theme] {
  --c-accent-ring: color-mix(in srgb, var(--c-accent) 35%, transparent);
  --c-accent-icon: var(--c-accent);
  --c-float-bg:  rgba(255, 255, 255, 0.94); /* Sprachpille im Hero */
  --c-float-ink: var(--c-ink);
  --c-bar-bg:    var(--c-ink);              /* "Meine Auswahl"-Leiste */
  --c-bar-ink:   #FFFFFF;
  --c-bar-border: transparent;
  --hero-bg-a: var(--c-accent);
  --hero-bg-b: var(--c-accent-2);
}

/* ---- 2a. MODERN (Standard) ----------------------------------------- */
[data-theme="modern"] {
  --c-bg:#F7F3EC; --c-surface:#FFFFFF; --c-card:#FFFFFF; --c-ink:#262220; --c-ink-soft:#8A8078;
  --c-accent:#B5652F; --c-accent-2:#8C4A22; --c-accent-soft:#F0E0CE; --c-on-accent:#FFFFFF;
  --c-border:#E7DFD2; --c-line:#EFE8DC;
  --c-text-body:#625a53; --c-text-meta:#A3A19B; --c-text-faint:#C2C0B9; --c-tab-ink:#6F6A63; --c-bookmark:#C2BFB6;
  --c-hover:rgba(0,0,0,0.05); --c-hover-strong:rgba(0,0,0,0.04);
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --sh-sm:0 1px 3px rgba(38,34,32,0.06); --sh-md:0 6px 16px -6px rgba(38,34,32,0.14); --sh-lg:0 14px 32px -14px rgba(38,34,32,0.22);
  --card-radius:var(--r-lg); --dish-radius:18px; --thumb-radius:14px; --chip-radius:999px; --tab-radius:18px;
  --search-radius:999px; --sheet-radius:24px 24px 0 0;
  --card-border:none; --card-shadow:var(--sh-md); --card-shadow-hover:var(--sh-lg);
  --dish-shadow:0 10px 22px -12px rgba(20,20,20,0.14), 0 2px 6px rgba(20,20,20,0.03);
  --dish-thumb:58px; --fs-h1:27px;
  --font-display:'Fraunces', 'Source Serif 4', 'Noto Naskh Arabic', serif; --font-body:'Inter', 'Noto Sans Arabic', sans-serif; --font-dish:'Inter', 'Noto Sans Arabic', sans-serif;
  --hero-name-tracking:0.03em;
  --hero-overlay-top:rgba(20,16,12,0.55); --hero-overlay-mid:rgba(20,16,12,0.08); --hero-overlay-bottom:rgba(20,16,12,0.6);
  --c-float-bg:rgba(255,255,255,0.94);
  --c-bar-bg:#262220; --c-bar-ink:#FFFFFF;
}

/* ---- 2b. ELEGANT: dunkles Anthrazit, Champagner-Gold, feine Linien -- */
[data-theme="elegant"] {
  --c-bg:#14110F; --c-surface:#1E1A17; --c-card:#1E1A17; --c-ink:#F2EBDD; --c-ink-soft:#A89F93;
  --c-accent:#C9A96E; --c-accent-2:#D8BC85; --c-accent-soft:#2B241B; --c-on-accent:#1A1512;
  --c-border:#3A322A; --c-line:#2B2621;
  --c-text-body:#BDB4A8; --c-text-meta:#A89F93; --c-text-faint:#8F867A; --c-tab-ink:#B9B0A4; --c-bookmark:#7C7367;
  --c-hover:rgba(255,255,255,0.06); --c-hover-strong:rgba(255,255,255,0.05);
  --r-sm:4px; --r-md:6px; --r-lg:8px;
  --sh-sm:0 0 0 1px rgba(201,169,110,0.12); --sh-md:0 12px 26px -16px rgba(0,0,0,0.7); --sh-lg:0 16px 34px -16px rgba(0,0,0,0.8);
  --card-radius:6px; --dish-radius:0px; --thumb-radius:4px; --chip-radius:5px; --tab-radius:5px;
  --search-radius:8px; --sheet-radius:14px 14px 0 0;
  --card-border:1px solid rgba(201,169,110,0.30); --card-shadow:var(--sh-md); --card-shadow-hover:var(--sh-lg);
  --dish-shadow:none;
  --dish-thumb:72px; --fs-h1:31px;
  --font-display:'Cormorant Garamond', 'Source Serif 4', 'Noto Naskh Arabic', 'Times New Roman', serif; --font-body:'Inter', 'Noto Sans Arabic', sans-serif; --font-dish:'Cormorant Garamond', 'Source Serif 4', 'Noto Naskh Arabic', 'Times New Roman', serif;
  --hero-name-tracking:0.14em;
  --hero-overlay-top:rgba(10,8,6,0.72); --hero-overlay-mid:rgba(10,8,6,0.25); --hero-overlay-bottom:rgba(20,17,15,0.94);
  --hero-logo-vignette-color:rgba(10,8,6,0.5);
  --c-float-bg:rgba(20,17,15,0.78); --c-float-ink:#F2EBDD;
  --c-bar-bg:#26201A; --c-bar-ink:#F2EBDD; --c-bar-border:rgba(201,169,110,0.55);
  --hero-bg-a:#2A231B; --hero-bg-b:#14110F;
}

/* ---- 2c. KLASSISCH: Papier-Creme, warmes Braun, Bordeaux, feine Linien -- */
[data-theme="classic"] {
  --c-bg:#F6EFDF; --c-surface:#FBF7EB; --c-card:#FBF7EB; --c-ink:#2F2119; --c-ink-soft:#6B5644;
  --c-accent:#7A2E2A; --c-accent-2:#7A2E2A; --c-accent-soft:#EBD7C4; --c-on-accent:#FFF8EC;
  --c-border:#D3C19D; --c-line:#E4D6B8; --c-rule:#B9A57E;
  --c-text-body:#4F3D2F; --c-text-meta:#6B5644; --c-text-faint:#76624F; --c-tab-ink:#5F4C3B; --c-bookmark:#96806A;
  --c-hover:rgba(58,42,31,0.06); --c-hover-strong:rgba(58,42,31,0.05);
  --r-sm:2px; --r-md:3px; --r-lg:4px;
  --sh-sm:none; --sh-md:none; --sh-lg:0 6px 14px -8px rgba(60,40,20,0.30);
  --card-radius:2px; --dish-radius:0px; --thumb-radius:2px; --chip-radius:3px; --tab-radius:0px;
  --search-radius:3px; --sheet-radius:6px 6px 0 0;
  --card-border:1px solid var(--c-rule); --card-shadow:none; --card-shadow-hover:none;
  --dish-shadow:none;
  --dish-thumb:46px; --fs-h1:27px;
  --font-display:'Lora', 'Source Serif 4', 'Noto Naskh Arabic', Georgia, serif; --font-body:'Lora', 'Source Serif 4', 'Noto Naskh Arabic', Georgia, serif; --font-dish:'Lora', 'Source Serif 4', 'Noto Naskh Arabic', Georgia, serif;
  --hero-name-tracking:0.1em;
  --hero-overlay-top:rgba(40,22,10,0.62); --hero-overlay-mid:rgba(40,22,10,0.12); --hero-overlay-bottom:rgba(50,28,14,0.66);
  --c-float-bg:rgba(251,247,235,0.94); --c-float-ink:#2F2119;
  --c-bar-bg:#3A2A1F; --c-bar-ink:#FBF7EB;
  --hero-bg-a:#7A2E2A; --hero-bg-b:#4E1B18;
}


/* =====================================================================
   2d. SAISON & FEIERTAGE (Premium): Fruehling, Sommer, Herbst, Winter, Weihnachten, Ostern, Halloween
   Nur Tokens plus eine dezente SVG-Zierde unter dem Restaurantnamen und unter Kategorieueberschriften -- keine Bilddateien,
   keine Veraenderung von Logo/Fotos/Inhalten. Struktur wie "Modern"; die dunklen Varianten (Weihnachten, Halloween)
   uebernehmen nur die noetigen Kontrast-/Linienregeln. Kontraste sind in tests/frontend/seasonalThemes.test.js abgesichert.
   ===================================================================== */
[data-theme="spring"] {
  --c-bg:#F3F8EC; --c-surface:#FFFFFF; --c-card:#FFFFFF; --c-ink:#1F2D1B; --c-ink-soft:#56664F;
  --c-accent:#3A7A3A; --c-accent-2:#2C5F2E; --c-accent-soft:#E1EFD3; --c-on-accent:#FFFFFF;
  --c-border:#D6E3C6; --c-line:#E5EEDA;
  --c-text-body:#445240; --c-text-meta:#5C6B55; --c-text-faint:#8B9985; --c-tab-ink:#4E5F49; --c-bookmark:#A9B7A0;
  --c-hover:rgba(0,0,0,0.05); --c-hover-strong:rgba(0,0,0,0.04);
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --sh-sm:0 1px 3px rgba(31,45,27,0.06); --sh-md:0 6px 16px -6px rgba(31,45,27,0.14); --sh-lg:0 14px 32px -14px rgba(31,45,27,0.22);
  --card-radius:var(--r-lg); --dish-radius:18px; --thumb-radius:14px; --chip-radius:999px; --tab-radius:18px;
  --search-radius:999px; --sheet-radius:24px 24px 0 0;
  --card-border:none; --card-shadow:var(--sh-md); --card-shadow-hover:var(--sh-lg);
  --dish-shadow:0 10px 22px -12px rgba(20,20,20,0.14), 0 2px 6px rgba(20,20,20,0.03);
  --dish-thumb:58px; --fs-h1:27px;
  --font-display:'Fraunces', 'Source Serif 4', 'Noto Naskh Arabic', serif; --font-body:'Inter', 'Noto Sans Arabic', sans-serif; --font-dish:'Inter', 'Noto Sans Arabic', sans-serif;
  --hero-name-tracking:0.03em;
  --hero-overlay-top:rgba(14,12,10,0.55); --hero-overlay-mid:rgba(14,12,10,0.08); --hero-overlay-bottom:rgba(14,12,10,0.6);
  --c-float-bg:rgba(255,255,255,0.94); --c-float-ink:#1F2D1B;
  --c-bar-bg:#1F2D1B; --c-bar-ink:#FFFFFF;
  --hero-bg-a:#3A7A3A; --hero-bg-b:#2C5F2E;
  --deco-ornament:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2020'%3E%3Cpath%20d%3D'M8%2010h40M72%2010h40'%20fill%3D'none'%20stroke%3D'%233A7A3A'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M60%203c-5%203-5%2011%200%2014%205-3%205-11%200-14zM60%2017v-9'%20fill%3D'none'%20stroke%3D'%233A7A3A'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
}
[data-theme="summer"] {
  --c-bg:#FFF7E8; --c-surface:#FFFFFF; --c-card:#FFFFFF; --c-ink:#2A2214; --c-ink-soft:#6A5A3E;
  --c-accent:#B8520A; --c-accent-2:#8E3F08; --c-accent-soft:#FCE6C2; --c-on-accent:#FFFFFF;
  --c-border:#EFDDB9; --c-line:#F6E9CE;
  --c-text-body:#54472F; --c-text-meta:#6E5F44; --c-text-faint:#9C8F76; --c-tab-ink:#5F5139; --c-bookmark:#C9BBA0;
  --c-hover:rgba(0,0,0,0.05); --c-hover-strong:rgba(0,0,0,0.04);
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --sh-sm:0 1px 3px rgba(42,34,20,0.06); --sh-md:0 6px 16px -6px rgba(42,34,20,0.14); --sh-lg:0 14px 32px -14px rgba(42,34,20,0.22);
  --card-radius:var(--r-lg); --dish-radius:18px; --thumb-radius:14px; --chip-radius:999px; --tab-radius:18px;
  --search-radius:999px; --sheet-radius:24px 24px 0 0;
  --card-border:none; --card-shadow:var(--sh-md); --card-shadow-hover:var(--sh-lg);
  --dish-shadow:0 10px 22px -12px rgba(20,20,20,0.14), 0 2px 6px rgba(20,20,20,0.03);
  --dish-thumb:58px; --fs-h1:27px;
  --font-display:'Fraunces', 'Source Serif 4', 'Noto Naskh Arabic', serif; --font-body:'Inter', 'Noto Sans Arabic', sans-serif; --font-dish:'Inter', 'Noto Sans Arabic', sans-serif;
  --hero-name-tracking:0.03em;
  --hero-overlay-top:rgba(14,12,10,0.55); --hero-overlay-mid:rgba(14,12,10,0.08); --hero-overlay-bottom:rgba(14,12,10,0.6);
  --c-float-bg:rgba(255,255,255,0.94); --c-float-ink:#2A2214;
  --c-bar-bg:#2A2214; --c-bar-ink:#FFFFFF;
  --hero-bg-a:#B8520A; --hero-bg-b:#8E3F08;
  --deco-ornament:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2020'%3E%3Cpath%20d%3D'M8%2010h40M72%2010h40'%20fill%3D'none'%20stroke%3D'%23B8520A'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Ccircle%20cx%3D'60'%20cy%3D'10'%20r%3D'3.4'%20fill%3D'none'%20stroke%3D'%23B8520A'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M60%202.5v2M60%2015.5v2M52.5%2010h2M65.5%2010h2M54.7%204.7l1.4%201.4M63.9%2013.9l1.4%201.4M54.7%2015.3l1.4-1.4M63.9%206.1l1.4-1.4'%20fill%3D'none'%20stroke%3D'%23B8520A'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
}
[data-theme="autumn"] {
  --c-bg:#F5ECDF; --c-surface:#FFFBF4; --c-card:#FFFBF4; --c-ink:#2C2017; --c-ink-soft:#6C5744;
  --c-accent:#9A4818; --c-accent-2:#7A3813; --c-accent-soft:#EBD3B5; --c-on-accent:#FFFFFF;
  --c-border:#DDC5A5; --c-line:#EADBC3;
  --c-text-body:#4E3E30; --c-text-meta:#6C5744; --c-text-faint:#988470; --c-tab-ink:#5A4838; --c-bookmark:#BBA68E;
  --c-hover:rgba(0,0,0,0.05); --c-hover-strong:rgba(0,0,0,0.04);
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --sh-sm:0 1px 3px rgba(44,32,23,0.06); --sh-md:0 6px 16px -6px rgba(44,32,23,0.14); --sh-lg:0 14px 32px -14px rgba(44,32,23,0.22);
  --card-radius:var(--r-lg); --dish-radius:18px; --thumb-radius:14px; --chip-radius:999px; --tab-radius:18px;
  --search-radius:999px; --sheet-radius:24px 24px 0 0;
  --card-border:none; --card-shadow:var(--sh-md); --card-shadow-hover:var(--sh-lg);
  --dish-shadow:0 10px 22px -12px rgba(20,20,20,0.14), 0 2px 6px rgba(20,20,20,0.03);
  --dish-thumb:58px; --fs-h1:27px;
  --font-display:'Fraunces', 'Source Serif 4', 'Noto Naskh Arabic', serif; --font-body:'Inter', 'Noto Sans Arabic', sans-serif; --font-dish:'Inter', 'Noto Sans Arabic', sans-serif;
  --hero-name-tracking:0.03em;
  --hero-overlay-top:rgba(14,12,10,0.55); --hero-overlay-mid:rgba(14,12,10,0.08); --hero-overlay-bottom:rgba(14,12,10,0.6);
  --c-float-bg:rgba(255,255,255,0.94); --c-float-ink:#2C2017;
  --c-bar-bg:#2C2017; --c-bar-ink:#FFFFFF;
  --hero-bg-a:#9A4818; --hero-bg-b:#7A3813;
  --deco-ornament:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2020'%3E%3Cpath%20d%3D'M8%2010h40M72%2010h40'%20fill%3D'none'%20stroke%3D'%239A4818'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M54%2014c0-6%204-10%2011-10%200%207-4%2011-11%2010zM54%2014l7-7'%20fill%3D'none'%20stroke%3D'%239A4818'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
}
[data-theme="winter"] {
  --c-bg:#EDF3F9; --c-surface:#FFFFFF; --c-card:#FFFFFF; --c-ink:#172636; --c-ink-soft:#4D6073;
  --c-accent:#2A5C8C; --c-accent-2:#1F4870; --c-accent-soft:#D8E7F4; --c-on-accent:#FFFFFF;
  --c-border:#C9D9E8; --c-line:#DCE7F1;
  --c-text-body:#33475A; --c-text-meta:#52667A; --c-text-faint:#8294A6; --c-tab-ink:#41566A; --c-bookmark:#AEBBC8;
  --c-hover:rgba(0,0,0,0.05); --c-hover-strong:rgba(0,0,0,0.04);
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --sh-sm:0 1px 3px rgba(23,38,54,0.06); --sh-md:0 6px 16px -6px rgba(23,38,54,0.14); --sh-lg:0 14px 32px -14px rgba(23,38,54,0.22);
  --card-radius:var(--r-lg); --dish-radius:18px; --thumb-radius:14px; --chip-radius:999px; --tab-radius:18px;
  --search-radius:999px; --sheet-radius:24px 24px 0 0;
  --card-border:none; --card-shadow:var(--sh-md); --card-shadow-hover:var(--sh-lg);
  --dish-shadow:0 10px 22px -12px rgba(20,20,20,0.14), 0 2px 6px rgba(20,20,20,0.03);
  --dish-thumb:58px; --fs-h1:27px;
  --font-display:'Fraunces', 'Source Serif 4', 'Noto Naskh Arabic', serif; --font-body:'Inter', 'Noto Sans Arabic', sans-serif; --font-dish:'Inter', 'Noto Sans Arabic', sans-serif;
  --hero-name-tracking:0.03em;
  --hero-overlay-top:rgba(14,12,10,0.55); --hero-overlay-mid:rgba(14,12,10,0.08); --hero-overlay-bottom:rgba(14,12,10,0.6);
  --c-float-bg:rgba(255,255,255,0.94); --c-float-ink:#172636;
  --c-bar-bg:#172636; --c-bar-ink:#FFFFFF;
  --hero-bg-a:#2A5C8C; --hero-bg-b:#1F4870;
  --deco-ornament:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2020'%3E%3Cpath%20d%3D'M8%2010h40M72%2010h40'%20fill%3D'none'%20stroke%3D'%232A5C8C'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M60%203v14M53.9%206.5l12.2%207M53.9%2013.5l12.2-7'%20fill%3D'none'%20stroke%3D'%232A5C8C'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
}
[data-theme="christmas"] {
  --c-bg:#0E261D; --c-surface:#153326; --c-card:#153326; --c-ink:#F5F0E3; --c-ink-soft:#B9C8B8;
  --c-accent:#D6B66C; --c-accent-2:#E4CB93; --c-accent-soft:#1E4332; --c-on-accent:#1A1510;
  --c-border:#2E5642; --c-line:#1F4332;
  --c-text-body:#D2DBCB; --c-text-meta:#AFC0AE; --c-text-faint:#8FA38F; --c-tab-ink:#C4D2C3; --c-bookmark:#6F8A77;
  --c-hover:rgba(255,255,255,0.06); --c-hover-strong:rgba(255,255,255,0.05);
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sh-sm:0 0 0 1px rgba(214,182,108,0.14); --sh-md:0 12px 26px -16px rgba(0,0,0,0.7); --sh-lg:0 16px 34px -16px rgba(0,0,0,0.8);
  --card-radius:var(--r-lg); --dish-radius:14px; --thumb-radius:10px; --chip-radius:999px; --tab-radius:14px;
  --search-radius:999px; --sheet-radius:24px 24px 0 0;
  --card-border:1px solid #2E5642; --card-shadow:var(--sh-md); --card-shadow-hover:var(--sh-lg);
  --dish-shadow:none;
  --dish-thumb:58px; --fs-h1:27px;
  --font-display:'Fraunces', 'Source Serif 4', 'Noto Naskh Arabic', serif; --font-body:'Inter', 'Noto Sans Arabic', sans-serif; --font-dish:'Inter', 'Noto Sans Arabic', sans-serif;
  --hero-name-tracking:0.03em;
  --hero-overlay-top:rgba(14,12,10,0.55); --hero-overlay-mid:rgba(14,12,10,0.08); --hero-overlay-bottom:rgba(14,12,10,0.6);
  --c-float-bg:rgba(14,38,29,0.78); --c-float-ink:#F5F0E3;
  --c-bar-bg:#1E4332; --c-bar-ink:#F5F0E3; --c-bar-border:rgba(214,182,108,0.5);
  --hero-bg-a:#0E261D; --hero-bg-b:#153326;
  --deco-ornament:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2020'%3E%3Cpath%20d%3D'M8%2010h40M72%2010h40'%20fill%3D'none'%20stroke%3D'%23D6B66C'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M60%203l2.2%204.8%205.2.6-3.9%203.5%201.1%205.1-4.6-2.6-4.6%202.6%201.1-5.1-3.9-3.5%205.2-.6z'%20fill%3D'none'%20stroke%3D'%23D6B66C'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
}
[data-theme="easter"] {
  --c-bg:#FAF7F2; --c-surface:#FFFFFF; --c-card:#FFFFFF; --c-ink:#2A2633; --c-ink-soft:#5D5670;
  --c-accent:#7050A0; --c-accent-2:#573C82; --c-accent-soft:#EDE5F6; --c-on-accent:#FFFFFF;
  --c-border:#E3DAEE; --c-line:#EEE8F4;
  --c-text-body:#46405A; --c-text-meta:#625B76; --c-text-faint:#9890AA; --c-tab-ink:#524B66; --c-bookmark:#BDB6CC;
  --c-hover:rgba(0,0,0,0.05); --c-hover-strong:rgba(0,0,0,0.04);
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --sh-sm:0 1px 3px rgba(42,38,51,0.06); --sh-md:0 6px 16px -6px rgba(42,38,51,0.14); --sh-lg:0 14px 32px -14px rgba(42,38,51,0.22);
  --card-radius:var(--r-lg); --dish-radius:18px; --thumb-radius:14px; --chip-radius:999px; --tab-radius:18px;
  --search-radius:999px; --sheet-radius:24px 24px 0 0;
  --card-border:none; --card-shadow:var(--sh-md); --card-shadow-hover:var(--sh-lg);
  --dish-shadow:0 10px 22px -12px rgba(20,20,20,0.14), 0 2px 6px rgba(20,20,20,0.03);
  --dish-thumb:58px; --fs-h1:27px;
  --font-display:'Fraunces', 'Source Serif 4', 'Noto Naskh Arabic', serif; --font-body:'Inter', 'Noto Sans Arabic', sans-serif; --font-dish:'Inter', 'Noto Sans Arabic', sans-serif;
  --hero-name-tracking:0.03em;
  --hero-overlay-top:rgba(14,12,10,0.55); --hero-overlay-mid:rgba(14,12,10,0.08); --hero-overlay-bottom:rgba(14,12,10,0.6);
  --c-float-bg:rgba(255,255,255,0.94); --c-float-ink:#2A2633;
  --c-bar-bg:#2A2633; --c-bar-ink:#FFFFFF;
  --hero-bg-a:#7050A0; --hero-bg-b:#573C82;
  --deco-ornament:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2020'%3E%3Cpath%20d%3D'M8%2010h40M72%2010h40'%20fill%3D'none'%20stroke%3D'%237050A0'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M60%203c-4%200-7%206-7%2010a7%207%200%200014%200c0-4-3-10-7-10zM54%2012l3%20-2%203%202%203%20-2%203%202'%20fill%3D'none'%20stroke%3D'%237050A0'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
}
[data-theme="halloween"] {
  --c-bg:#121014; --c-surface:#1C1920; --c-card:#1C1920; --c-ink:#F2ECE6; --c-ink-soft:#B8AFBA;
  --c-accent:#F08A24; --c-accent-2:#FFA95A; --c-accent-soft:#2D2113; --c-on-accent:#1A1008;
  --c-border:#383240; --c-line:#27222D;
  --c-text-body:#D4CCD6; --c-text-meta:#B0A6B3; --c-text-faint:#8F8593; --c-tab-ink:#C9C0CC; --c-bookmark:#6E6574;
  --c-hover:rgba(255,255,255,0.06); --c-hover-strong:rgba(255,255,255,0.05);
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sh-sm:0 0 0 1px rgba(240,138,36,0.14); --sh-md:0 12px 26px -16px rgba(0,0,0,0.7); --sh-lg:0 16px 34px -16px rgba(0,0,0,0.8);
  --card-radius:var(--r-lg); --dish-radius:14px; --thumb-radius:10px; --chip-radius:999px; --tab-radius:14px;
  --search-radius:999px; --sheet-radius:24px 24px 0 0;
  --card-border:1px solid #383240; --card-shadow:var(--sh-md); --card-shadow-hover:var(--sh-lg);
  --dish-shadow:none;
  --dish-thumb:58px; --fs-h1:27px;
  --font-display:'Fraunces', 'Source Serif 4', 'Noto Naskh Arabic', serif; --font-body:'Inter', 'Noto Sans Arabic', sans-serif; --font-dish:'Inter', 'Noto Sans Arabic', sans-serif;
  --hero-name-tracking:0.03em;
  --hero-overlay-top:rgba(14,12,10,0.55); --hero-overlay-mid:rgba(14,12,10,0.08); --hero-overlay-bottom:rgba(14,12,10,0.6);
  --c-float-bg:rgba(18,16,20,0.78); --c-float-ink:#F2ECE6;
  --c-bar-bg:#2D2113; --c-bar-ink:#F2ECE6; --c-bar-border:rgba(240,138,36,0.5);
  --hero-bg-a:#121014; --hero-bg-b:#1C1920;
  --deco-ornament:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2020'%3E%3Cpath%20d%3D'M8%2010h40M72%2010h40'%20fill%3D'none'%20stroke%3D'%23F08A24'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M60%205c-6%200-9%203-9%206s3%206%209%206%209-3%209-6-3-6-9-6zM60%205v12M56%206c-2%203-2%208%200%2011M64%206c2%203%202%208%200%2011M60%205c0-2%201-3%203-3'%20fill%3D'none'%20stroke%3D'%23F08A24'%20stroke-width%3D'1.4'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3C%2Fsvg%3E");
}

/* Gemeinsame Zierde der Saison-Designs: kleine Ornamentlinie unter dem Restaurantnamen und unter Kategorieueberschriften */
:is([data-theme="spring"], [data-theme="summer"], [data-theme="autumn"], [data-theme="winter"], [data-theme="christmas"], [data-theme="easter"], [data-theme="halloween"]) .phone .hero-body h1::after,
:is([data-theme="spring"], [data-theme="summer"], [data-theme="autumn"], [data-theme="winter"], [data-theme="christmas"], [data-theme="easter"], [data-theme="halloween"]) .phone .item-header h2::after {
  content: '';
  display: block;
  width: 120px;
  height: 20px;
  margin: 6px auto 0;
  background: var(--deco-ornament) center / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
:is([data-theme="spring"], [data-theme="summer"], [data-theme="autumn"], [data-theme="winter"], [data-theme="christmas"], [data-theme="easter"], [data-theme="halloween"]) .phone .item-header h2::after { margin-left: 0; opacity: 0.75; }
/* Dunkle Saison-Designs: Linien/Raender statt heller Schatten (wie Elegant, nur die noetigen Regeln) */
:is([data-theme="christmas"], [data-theme="halloween"]) .phone .search,
:is([data-theme="christmas"], [data-theme="halloween"]) .phone .filter-btn,
:is([data-theme="christmas"], [data-theme="halloween"]) .phone .back-btn,
:is([data-theme="christmas"], [data-theme="halloween"]) .phone .lang-select { border: 1px solid var(--c-border); box-shadow: none; }
:is([data-theme="christmas"], [data-theme="halloween"]) .phone .item-header { box-shadow: 0 1px 0 var(--c-border); }
:is([data-theme="christmas"], [data-theme="halloween"]) .phone .dish { border-bottom: 1px solid var(--c-line); }
[data-theme="christmas"] .phone .dish-highlight { color: #E8837D; }

/* Sehr schmale Bildschirme: groessere Bildchen der Presets etwas verkleinern,
   damit Name und Preis genug Platz behalten. */
@media (max-width: 360px) {
  [data-theme="elegant"] { --dish-thumb: 54px; }
}

/* =====================================================================
   3. STRUKTURREGELN JE PRESET (nur Gastansicht, begrenzt mit .phone)
   ===================================================================== */

/* Buttons erben die Schrift nicht von selbst -- in Elegant/Klassisch soll
   auch der Kartentext (Anzahl) die Preset-Schrift tragen. In Modern bleibt
   alles wie bisher. */
[data-theme="elegant"] .phone .cat-card,
[data-theme="classic"] .phone .cat-card { font-family: var(--font-body); }
/* Hat der Wirt bewusst einen Schriftstil gewaehlt (data-font-style, siehe
   theme.js), soll auch die Kategoriekarte (ein <button>) ihn tragen --
   ohne Override bleibt alles wie zuvor. */
[data-font-style] .phone .cat-card { font-family: var(--font-body); }

/* ---------- ELEGANT ---------- */
[data-theme="elegant"] .phone h1 {
  font-weight: 500;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
[data-theme="elegant"] .phone .hero-body h1::after {
  content: '';
  display: block;
  width: 46px;
  height: 1px;
  margin: 10px auto 0;
  background: var(--c-accent);
}
[data-theme="elegant"] .phone .brand-name { font-weight: 600; }
[data-theme="elegant"] .phone .lang-select { border: 1px solid rgba(201, 169, 110, 0.4); }
[data-theme="elegant"] .phone .search { border: 1px solid var(--c-border); box-shadow: none; }
[data-theme="elegant"] .phone .filter-btn { border: 1px solid var(--c-border); box-shadow: none; border-radius: 8px; }
[data-theme="elegant"] .phone .back-btn { border: 1px solid var(--c-border); box-shadow: none; }
[data-theme="elegant"] .phone .item-header { box-shadow: 0 1px 0 var(--c-border); }
[data-theme="elegant"] .phone .item-header h2 { font-size: 27px; font-weight: 600; letter-spacing: 0.01em; }
[data-theme="elegant"] .phone .cat-thumb,
[data-theme="elegant"] .phone .dish-thumb { background: var(--c-line); }
[data-theme="elegant"] .phone .dish-thumb { border: 1px solid var(--c-border); }
[data-theme="elegant"] .phone .cat-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: 0.01em; }
[data-theme="elegant"] .phone .cat-count { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; }
[data-theme="elegant"] .phone .cat-card.no-image .cat-overlay { border-top: 1px solid var(--c-border); }
/* Gerichte als ruhige Liste mit feinen Trennlinien statt schwebender Karten */
[data-theme="elegant"] .phone .items { gap: 0; padding-top: 8px; }
[data-theme="elegant"] .phone .dish {
  background: transparent;
  border-bottom: 1px solid var(--c-border);
  padding: 18px 0;
}
[data-theme="elegant"] .phone .dish-name { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: 0.005em; }
[data-theme="elegant"] .phone .dish-price { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
[data-theme="elegant"] .phone .dish-desc { font-size: 14px; }
[data-theme="elegant"] .phone .dish-highlight { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; }
[data-theme="elegant"] .phone .dish-variant-name { font-weight: 400; letter-spacing: 0.01em; }
[data-theme="elegant"] .phone .dish-variant-price { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
[data-theme="elegant"] .phone .legend .legend-title { letter-spacing: 0.12em; }
[data-theme="elegant"] .phone .legend .legend-key { border-radius: 3px; }
[data-theme="elegant"] .phone .filter-chip:not(.active) { background: transparent; letter-spacing: 0.02em; }
/* Elegant: feine Linie auf transparentem Grund, leicht gesperrte Schrift, kein Schatten */
[data-theme="elegant"] .phone .contact-widget { background: transparent; letter-spacing: 0.04em; box-shadow: none; }
[data-theme="elegant"] .phone .contact-widget[data-kind="google_review"] { border-color: var(--c-accent); }
[data-theme="elegant"] .phone .subtabs button { box-shadow: none; border: 1px solid var(--c-border); }
[data-theme="elegant"] .phone .subtabs button:not(.active) { background: transparent; }
[data-theme="elegant"] .phone .subtabs button.active { border-color: var(--c-accent); }
[data-theme="elegant"] .phone .fs-sheet { border-top: 1px solid rgba(201, 169, 110, 0.4); }
[data-theme="elegant"] .phone .fs-btn-reset { background: transparent; border: 1px solid var(--c-border); }
[data-theme="elegant"] .phone .selection-bar { border: 1px solid var(--c-bar-border); }
[data-theme="elegant"] .phone .soldout-badge { border: 1px solid var(--c-border); background: transparent; }

/* ---------- KLASSISCH: wie eine gedruckte Speisekarte ----------
   Papierflaeche, feine warme Linien, kaum Schatten, Serifenschrift.
   Gerichte als Liste (Name ... Preis mit Punktlinie), Kategorien als
   gerahmte Fotos bzw. Menuezeilen. Bordeaux nur fuer Preise, aktive
   Elemente und kleine Linien. */
[data-theme="classic"] .phone h1 {
  font-weight: 600;
  font-size: 25px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
[data-theme="classic"] .phone .hero-body h1::after {
  content: '';
  display: block;
  width: 72px;
  height: 5px;
  margin: 12px auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}
[data-theme="classic"] .phone .brand-name { font-weight: 700; }
[data-theme="classic"] .phone .lang-select { border: 1px solid var(--c-rule); border-radius: 4px; box-shadow: none; }
[data-theme="classic"] .phone .search { border: 1px solid var(--c-rule); box-shadow: none; }
[data-theme="classic"] .phone .filter-btn { border: 1px solid var(--c-rule); box-shadow: none; border-radius: 3px; }
[data-theme="classic"] .phone .back-btn { border: 1px solid var(--c-rule); box-shadow: none; border-radius: 3px; background: transparent; }
[data-theme="classic"] .phone .item-header { box-shadow: 0 1px 0 var(--c-rule); }
/* Kategorieueberschrift mit schlichter Doppellinie in Bordeaux */
[data-theme="classic"] .phone .item-header h2 { font-weight: 700; font-size: 24px; letter-spacing: 0.02em; }
[data-theme="classic"] .phone .item-header h2::after {
  content: '';
  display: block;
  width: 52px;
  height: 4px;
  margin-top: 7px;
  border-top: 1px solid var(--c-accent);
  border-bottom: 1px solid var(--c-accent);
}
[data-theme="classic"] .phone .item-subtitle { font-style: italic; margin-top: 8px; }
[data-theme="classic"] .phone .selection-bar { border-radius: 4px; box-shadow: none; }

/* Kategorien (Bild-Layout): gerahmtes Restaurantfoto im Querformat mit
   ruhiger Beschriftung DARUNTER auf dem Papier -- keine Bildkachel. */
[data-theme="classic"][data-category-layout="image"] .phone .cat-card {
  padding: 5px 5px 0;
  background: var(--c-card);
  border-radius: 2px;
}
[data-theme="classic"][data-category-layout="image"] .phone .cat-thumb {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  background: transparent;
  overflow: visible;
}
[data-theme="classic"][data-category-layout="image"] .phone .cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--tint, var(--c-line));
  border: 1px solid var(--c-rule);
  overflow: hidden;
  position: relative;
  font-size: 30px;
}
[data-theme="classic"][data-category-layout="image"] .phone .cat-icon img { position: absolute; inset: 0; }
[data-theme="classic"][data-category-layout="image"] .phone .cat-scrim { display: none; }
[data-theme="classic"][data-category-layout="image"] .phone .cat-overlay,
[data-theme="classic"][data-category-layout="image"] .phone .cat-card.no-image .cat-overlay {
  position: static;
  padding: 9px 3px 10px;
  background: transparent;
  align-items: flex-start;
}
[data-theme="classic"] .phone .cat-name,
[data-theme="classic"] .phone .cat-card.no-image .cat-name {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--c-ink);
  text-shadow: none;
  line-height: 1.3;
}
[data-theme="classic"] .phone .cat-count,
[data-theme="classic"] .phone .cat-card.no-image .cat-count {
  font-style: italic;
  font-size: 12px;
  color: var(--c-ink-soft);
  text-shadow: none;
}
[data-theme="classic"] .phone .cat-chevron,
[data-theme="classic"] .phone .cat-card.no-image .cat-chevron { color: var(--c-accent); filter: none; width: 16px; height: 16px; margin-bottom: 2px; }

/* Gerichte: Liste statt Karten. Name links, Preis rechts, dazwischen eine
   feine Punktlinie; Beschreibung kursiv darunter; duenne Trennlinie. */
[data-theme="classic"] .phone .items { gap: 0; padding-top: 10px; }
[data-theme="classic"] .phone .dish {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  box-shadow: none;
  padding: 15px 0 14px;
}
[data-theme="classic"] .phone .dish-thumb { border: 1px solid var(--c-rule); opacity: 0.95; }
[data-theme="classic"] .phone .dish-top { display: flex; align-items: baseline; gap: 8px; }
[data-theme="classic"] .phone .dish-top > div:first-child { order: 1; flex: 0 1 auto; min-width: 0; }
[data-theme="classic"] .phone .dish-top::before {
  content: '';
  order: 2;
  flex: 1 1 14px;
  min-width: 10px;
  border-bottom: 1px dotted var(--c-rule);
  transform: translateY(-0.28em);
}
[data-theme="classic"] .phone .dish-top:has(.dish-price:empty)::before { display: none; }
[data-theme="classic"] .phone .dish-price {
  order: 3;
  flex: 0 0 auto;
  min-width: 0;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
}
[data-theme="classic"] .phone .dish-bottom { margin-top: 2px; }
[data-theme="classic"] .phone .dish-name { font-size: 16.5px; font-weight: 600; line-height: 1.35; }
[data-theme="classic"] .phone .dish-desc { font-style: italic; font-size: 13.5px; margin-top: 4px; }
[data-theme="classic"] .phone .dish-highlight { text-transform: uppercase; letter-spacing: 0.1em; font-size: 9.5px; }
[data-theme="classic"] .phone .allergens span { background: transparent; padding: 0 5px 0 0; border-radius: 0; font-size: 11px; }
[data-theme="classic"] .phone .allergens span.additive-badge { border: none; padding: 0 5px 0 0; }
[data-theme="classic"] .phone .dish-variant-leader { border-bottom-color: var(--c-rule); }
[data-theme="classic"] .phone .dish-variant-name { font-weight: 400; }
[data-theme="classic"] .phone .dish-variant-price { font-weight: 700; }
[data-theme="classic"] .phone .legend .legend-key { border-radius: 2px; background: transparent; border: 1px solid var(--c-rule); }
[data-theme="classic"] .phone .legend .allergen-disclaimer { border-top-color: var(--c-rule); }
[data-theme="classic"] .phone .dish-category-label { letter-spacing: 0.08em; }

/* Filter, Reiter, Widgets: rechteckig, mit feiner Linie */
[data-theme="classic"] .phone .filter-chip:not(.active) { background: transparent; border-color: var(--c-rule); }
[data-theme="classic"] .phone .filter-chip { font-weight: 600; }
/* Klassisch: rechteckig, feine Linie in --c-rule, kein Schatten */
[data-theme="classic"] .phone .contact-widget { background: transparent; border-color: var(--c-rule); box-shadow: none; font-weight: 700; }
[data-theme="classic"] .phone .contact-widget[data-kind="google_review"] { border-color: var(--c-accent); }
/* Adresse/Oeffnungszeiten: Elegant mit feiner Sperrung, Klassisch mit eckigem Pfeil */
[data-theme="elegant"] .phone .hours-title { letter-spacing: 0.04em; }
[data-theme="elegant"] .phone .hours-chevron { background: transparent; }
[data-theme="classic"] .phone .hours-chevron { border-radius: 2px; border-color: var(--c-rule); background: transparent; }
[data-theme="classic"] .phone .hours-title { font-weight: 700; }
[data-theme="classic"] .phone .subtabs { gap: 18px; padding-left: 24px; border-bottom: 1px solid var(--c-border); margin: 0 0 4px; }
[data-theme="classic"] .phone .subtabs button,
[data-theme="classic"] .phone .subtabs button.active {
  background: transparent;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 2px 9px;
  margin-bottom: -1px;
  font-weight: 600;
}
[data-theme="classic"] .phone .subtabs button.active { color: var(--c-ink); border-bottom-color: var(--c-accent); }
[data-theme="classic"] .phone .fs-btn-reset { background: transparent; border: 1px solid var(--c-rule); }
[data-theme="classic"] .phone .fs-sheet { border-top: 1px solid var(--c-rule); }
[data-theme="classic"] .phone .soldout-badge { border: 1px solid var(--c-border); background: transparent; border-radius: 2px; }
[data-theme="classic"] .phone footer { font-style: italic; }

/* =====================================================================
   4. KOMPAKT-LAYOUTS (presetuebergreifend, nur ueber Tokens/Farben)
   ===================================================================== */

/* Kategorien "Kompakt": schmale Zeilen mit kleinem Bildchen (oder Icon)
   statt grosser Bildkacheln. Ein Bild, das nicht laedt, ergibt wie
   gewohnt das Icon (siehe guest.js: .cat-icon). */
[data-category-layout="compact"] .phone .grid { grid-template-columns: 1fr; gap: 10px; }
[data-category-layout="compact"] .phone .cat-card { border-radius: min(var(--card-radius), 16px); }
[data-category-layout="compact"] .phone .cat-thumb {
  aspect-ratio: auto;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 9px 12px 9px 9px;
  background: var(--c-card);
  font-size: 15px;
}
[data-category-layout="compact"] .phone .cat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: var(--thumb-radius);
  background: var(--tint, var(--c-line));
  overflow: hidden;
  font-size: 24px;
}
[data-theme="elegant"][data-category-layout="compact"] .phone .cat-icon { background: var(--c-line); }
[data-category-layout="compact"] .phone .cat-scrim { display: none; }
[data-category-layout="compact"] .phone .cat-overlay,
[data-category-layout="compact"] .phone .cat-card.no-image .cat-overlay {
  position: static;
  flex: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
  border-top: none;
  align-items: center;
}
[data-category-layout="compact"] .phone .cat-name,
[data-category-layout="compact"] .phone .cat-card.no-image .cat-name { color: var(--c-ink); text-shadow: none; font-size: 15px; }
[data-theme="elegant"][data-category-layout="compact"] .phone .cat-name { font-size: 18px; }
[data-category-layout="compact"] .phone .cat-count,
[data-category-layout="compact"] .phone .cat-card.no-image .cat-count { color: var(--c-ink-soft); text-shadow: none; }
[data-category-layout="compact"] .phone .cat-chevron,
[data-category-layout="compact"] .phone .cat-card.no-image .cat-chevron { color: var(--c-ink-soft); filter: none; }
/* Das Highlight-Ornament braucht die grosse Bild-Kachel -- im schmalen
   Kompakt-Zeilenlayout passt nur die dezente Flagge/der Rahmen. */
[data-category-layout="compact"] .phone .cat-card.is-highlight .cat-highlight-ornament { display: none; }
[data-category-layout="compact"] .phone .cat-card.is-highlight.no-image .cat-thumb::after { content: none; }
[data-category-layout="compact"] .phone .cat-card.is-highlight.no-image .cat-thumb { background: var(--c-card); }
[data-theme="classic"][data-category-layout="compact"] .phone .cat-card.is-highlight.no-image .cat-thumb { background: transparent; }
[data-category-layout="compact"] .phone .cat-highlight-flag {
  position: static; width: 20px; height: 20px; font-size: 11px; margin-right: 2px;
  background: var(--tint, var(--c-line)); color: var(--c-accent); box-shadow: none; backdrop-filter: none; text-shadow: none;
}
/* Klassisch + Kompakt: Kategorien als Menuezeilen mit feinem Separator */
[data-theme="classic"][data-category-layout="compact"] .phone .grid { gap: 0; padding-top: 4px; }
[data-theme="classic"][data-category-layout="compact"] .phone .cat-card {
  padding: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--c-border);
  border-radius: 0;
  overflow: visible;
}
[data-theme="classic"][data-category-layout="compact"] .phone .grid .cat-card:first-child { border-top: 1px solid var(--c-border); }
[data-theme="classic"][data-category-layout="compact"] .phone .cat-thumb { background: transparent; min-height: 62px; padding: 8px 2px; }
[data-theme="classic"][data-category-layout="compact"] .phone .cat-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  aspect-ratio: auto;
  border: 1px solid var(--c-rule);
  border-radius: 2px;
  background: var(--tint, var(--c-line));
}
[data-theme="classic"][data-category-layout="compact"] .phone .cat-name { font-size: 16.5px; }
[data-theme="classic"][data-category-layout="compact"] .phone .cat-overlay { align-items: center; }

/* Gerichte "Kompakt": stärker textorientiert -- Bild/Emoji-Bildchen
   entfallen, die Karte wird schmaler. Gerichtedaten bleiben unveraendert. */
[data-dish-layout="compact"] .phone .dish-thumb { display: none; }
[data-dish-layout="compact"] .phone .dish { padding: 12px 14px; }
[data-theme="elegant"][data-dish-layout="compact"] .phone .dish { padding: 14px 0; }
[data-dish-layout="compact"] .phone .items { gap: 10px; }
[data-theme="elegant"][data-dish-layout="compact"] .phone .items { gap: 0; }
[data-theme="classic"][data-dish-layout="compact"] .phone .items { gap: 0; }
[data-theme="classic"][data-dish-layout="compact"] .phone .dish { padding: 14px 0 12px; }