/* ============================================================
   HB Catering — site styles. Day & Night mode.
   ============================================================ */

:root {
  --gold: #C9A961;
  --gold-deep: #9A7A3F;
  --gold-light: #E8CB8A;
  --gold-glow: rgba(201, 169, 97, 0.18);
  --sage: #8DA38B;
  --plum: #5D2335;
  --cream: #F6F0E4;
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 8px;
  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 64px);
}

[data-theme="dark"] {
  --bg: #0B0A08;
  --bg-2: #15120F;
  --bg-3: #211C17;
  --panel: #171B16;
  --ink: #F2EBDB;
  --ink-2: #C9C2B2;
  --ink-3: #8A8474;
  --line: rgba(201, 169, 97, 0.22);
  --line-soft: rgba(242, 235, 219, 0.08);
  --accent: #E8CB8A;
  --accent-2: #C9A961;
  --shadow: 0 30px 80px -20px rgba(0,0,0,0.8);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #FAF7EF;
  --bg-2: #F1E8D8;
  --bg-3: #E6D9C4;
  --panel: #EEF2EA;
  --ink: #1A1612;
  --ink-2: #4A4238;
  --ink-3: #7A6F5E;
  --line: rgba(154, 122, 63, 0.28);
  --line-soft: rgba(26, 22, 18, 0.08);
  --accent: #A88547;
  --accent-2: #7A5C2E;
  --shadow: 0 30px 80px -30px rgba(122, 92, 46, 0.25);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.5s ease, color 0.5s ease;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- Display type ---------- */
.display, .h2, h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
  color: var(--ink);
  text-wrap: balance;
}
.display em, .h2 em { font-style: italic; color: var(--accent); }

.display {
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.98;
  max-width: 11ch;
}
.h2 {
  font-size: clamp(36px, 4.4vw, 64px);
}
h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
}
h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
}
h5 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.lede {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.lede.light { color: var(--bg-2); }

/* ---------- Eyebrow / tag ---------- */
.eyebrow, .section-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--gold-glow);
}
.section-tag.light { color: var(--gold-light); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.3s ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px var(--gold-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-form { width: 100%; justify-content: center; padding: 18px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  /* minmax(0, 1fr) statt 1fr: eine 1fr-Spur wird nie schmaler als ihr Inhalt.
     Die Verwaltungsnavigation mit sechs Punkten sprengte damit den Kopf, und
     er stand links und rechts ueber den Bildschirmrand hinaus. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 28px clamp(28px, 5vw, 80px);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-mark {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-img {
  height: 64px;
  width: auto;
  display: block;
}
.nav-logo-transparent {
  height: 58px;
  object-fit: contain;
}
.logo-light { display: none !important; }
[data-theme="light"] .logo-dark { display: none !important; }
[data-theme="light"] .logo-light { display: block !important; }
.hero-logo-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
}
.footer-logo-img {
  height: 36px;
  width: auto;
  display: block;
}
.nav-mark-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.nav-mark-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav-mark-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.nav-links {
  display: flex;
  gap: 44px;
  justify-content: center;
  list-style: none;
}
.nav-links a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  position: relative;
  padding: 4px 0;
  transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-cta {
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  transition: all 0.25s ease;
}
.nav-cta:hover {
  background: var(--accent);
  color: var(--bg);
}
/* Kundenlogin: bewusst als Textlink, damit der Anfragen-CTA der einzige
   Rahmen-Button in der Navigation bleibt. */
.nav-login {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.nav-login:hover { color: var(--accent); }

/* Kontomenue: <details> statt Dropdown-JS */
.nav-konto { position: relative; }
.nav-konto > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-konto > summary::-webkit-details-marker { display: none; }
.nav-konto > summary::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.2s ease;
}
.nav-konto[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nav-konto-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 210px;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  z-index: 1100;
}
.nav-konto-titel {
  padding: 8px 16px 4px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0.75;
}
.nav-konto-menu a {
  padding: 9px 16px;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.nav-konto-menu a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.nav-konto-abmelden {
  margin-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  padding-top: 12px !important;
}

/* Theme toggle */
.theme-toggle {
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
}
.tt-track {
  width: 52px;
  height: 26px;
  border-radius: 999px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  position: relative;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}
.tt-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.tt-thumb::before {
  content: "☾";
  font-size: 12px;
  line-height: 1;
}
.tt-track.light .tt-thumb::before { content: "☼"; }
.tt-track.dark .tt-thumb { transform: translateX(0); }
.tt-track.light .tt-thumb { transform: translateX(26px); }

/* ---------- Section head ---------- */
.section-head {
  margin-bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.section-lede {
  color: var(--ink-2);
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- Hero ---------- */
.hero {
  padding: clamp(40px, 6vw, 96px) var(--pad) clamp(60px, 8vw, 120px);
  position: relative;
  overflow: hidden;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
}
.hero-stats div { display: flex; flex-direction: column; gap: 6px; }
.hero-stats dt {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  color: var(--accent);
  line-height: 1;
}
.hero-stats dd {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Angebot ---------- */
.angebot {
  padding: clamp(60px, 8vw, 120px) var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
}
.angebot-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.angebot-card {
  position: relative;
  padding: clamp(32px, 3.5vw, 56px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all 0.4s ease;
}
.angebot-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 30px 60px -30px var(--gold-glow);
}
.angebot-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  color: var(--accent);
  line-height: 1;
  opacity: 0.5;
}
.angebot-card h3 { color: var(--ink); }
.angebot-card p { color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.angebot-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.angebot-card li {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  position: relative;
  padding-left: 22px;
}
.angebot-card li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 8px;
  top: 7px;
}
.card-link {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--line-soft);
  transition: color 0.2s ease;
}
.card-link:hover { color: var(--accent-2); }

/* ---------- Buffets ---------- */
.buffets {
  padding: clamp(60px, 8vw, 120px) var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--line-soft);
}
.buffets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.buffet-card {
  background: var(--bg);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: background 0.3s ease;
}
.buffet-card:hover { background: var(--bg-2); }
.buffet-card header { display: flex; flex-direction: column; gap: 8px; }
.buffet-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.buffet-card h3 { font-size: 30px; }
.buffet-kind {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.buffet-desc { color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.buffet-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-2);
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.buffet-items li { padding-left: 18px; position: relative; }
.buffet-items li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.buffet-card footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.buffet-price { display: flex; flex-direction: column; gap: 2px; }
.buffet-price-num {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
}
.buffet-price-per {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Anlässe ---------- */
.anlaesse {
  padding: clamp(60px, 8vw, 120px) var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--line-soft);
}
.anlaesse-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 40px;
}
.anlass {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.anlass-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.anlass h4 { color: var(--ink); }
.anlass p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }

/* ---------- Galerie ---------- */
.galerie {
  padding: clamp(60px, 8vw, 120px) var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--line-soft);
}
.galerie-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.galerie-frame {
  position: relative;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-2);
}
.galerie-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.galerie-frame:hover img { transform: scale(1.04); }
.galerie-frame.tall { grid-row: span 2; }
.galerie-frame.wide { grid-column: span 2; }

/* ---------- Process ---------- */
.process {
  padding: clamp(60px, 8vw, 120px) var(--pad);
  max-width: var(--maxw);
  margin: 0 auto;
  border-top: 1px solid var(--line-soft);
}
.process-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.process-list li {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 20px;
  border-top: 2px solid var(--accent);
}
.process-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 48px;
  color: var(--accent);
  line-height: 1;
}
.process-list h4 { font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.process-list p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* ---------- Kontakt ---------- */
.kontakt {
  margin: clamp(60px, 8vw, 120px) var(--pad) 0;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  background: #0A0908;
  position: relative;
  overflow: hidden;
}
.kontakt-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  padding: clamp(48px, 6vw, 96px);
}
.kontakt-copy { display: flex; flex-direction: column; gap: 24px; color: #F2EBDB; }
.kontakt-copy .h2.light { color: #F2EBDB; }
.kontakt-copy .h2.light em { color: var(--gold-light); }
.kontakt-details {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  border-top: 1px solid rgba(201, 169, 97, 0.22);
}
.kontakt-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(201, 169, 97, 0.15);
  align-items: baseline;
}
.kontakt-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.kontakt-value {
  font-family: var(--serif);
  font-size: 22px;
  color: #F2EBDB;
  line-height: 1.2;
}
a.kontakt-row:hover .kontakt-value { color: var(--gold-light); }

.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(242, 235, 219, 0.04);
  border: 1px solid rgba(201, 169, 97, 0.22);
  padding: clamp(28px, 3vw, 40px);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kontakt-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kontakt-form label > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.kontakt-form input,
.kontakt-form select,
.kontakt-form textarea {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid rgba(201, 169, 97, 0.28);
  color: #F2EBDB;
  font-family: var(--sans);
  font-size: 14px;
  border-radius: 0;
  resize: vertical;
  transition: border-color 0.2s ease;
}
.kontakt-form input:focus,
.kontakt-form select:focus,
.kontakt-form textarea:focus {
  outline: none;
  border-color: var(--gold-light);
}
.kontakt-form select option { background: #0A0908; color: #F2EBDB; }
.kontakt-form .btn-primary {
  background: var(--gold);
  color: #0A0908;
  border-color: var(--gold);
  margin-top: 8px;
}
.kontakt-form .btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); }

/* ---------- Footer ---------- */
.footer {
  padding: clamp(60px, 8vw, 96px) var(--pad) 32px;
  border-top: 1px solid var(--line-soft);
  margin-top: clamp(60px, 8vw, 120px);
}
.footer-top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 40px;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.footer-tagline {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-2);
  line-height: 1.4;
  font-style: italic;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: var(--maxw);
  margin: 0 auto 48px;
}
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-grid a, .footer-grid li {
  font-size: 14px;
  color: var(--ink-2);
  transition: color 0.2s ease;
}
.footer-grid a:hover { color: var(--accent); }
.footer-bottom {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav { grid-template-columns: 1fr auto; }
  .angebot-grid,
  .buffets-grid,
  .anlaesse-grid,
  .process-list,
  .kontakt-inner,
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .galerie-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero-stats { grid-template-columns: 1fr; gap: 16px; }
  .angebot-grid,
  .buffets-grid,
  .anlaesse-grid,
  .process-list,
  .kontakt-inner,
  .footer-grid,
  .galerie-grid { grid-template-columns: 1fr; }
  .galerie-frame.tall, .galerie-frame.wide { grid-row: auto; grid-column: auto; }
  .form-row { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ---------- Frontend designer pass ---------- */
.site {
  min-height: 100vh;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 22%, transparent), transparent 520px),
    var(--bg);
}

.nav {
  padding-block: 18px;
}

.nav-logo-img {
  height: 56px;
}

.nav-logo-transparent {
  height: 52px;
}

.nav-cta,
.btn,
.kontakt-form input,
.kontakt-form select,
.kontakt-form textarea {
  border-radius: var(--radius);
}

.theme-toggle {
  min-width: 52px;
  min-height: 32px;
  justify-content: center;
}

.hero {
  padding-top: clamp(34px, 5vw, 72px);
  padding-bottom: clamp(34px, 5vw, 64px);
}

.hero-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.88fr);
  align-items: stretch;
  min-width: 0;
}

.hero-copy {
  justify-content: center;
  min-width: 0;
}

.hero-visual {
  display: grid;
  grid-template-rows: minmax(420px, 1fr) auto;
  gap: 16px;
  min-width: 0;
  max-width: 100%;
}

.hero-visual-main {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 82%, black), var(--bg-3));
  box-shadow: var(--shadow);
}

.hero-visual-main::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 14px;
  pointer-events: none;
}

.hero-visual-main .hero-logo-img {
  width: min(78%, 430px);
  max-height: 340px;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.36));
}

.hero-food-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.05);
}

.hero-transparent-logo {
  display: block !important;
}

.hero-service-card {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: min(250px, calc(100% - 40px));
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(12px);
}

.hero-service-card span,
.panel-kicker,
.service-rail span,
.intro-facts span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-service-card strong {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
}

.hero-menu-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--panel);
  min-width: 0;
}

.hero-menu-panel strong {
  display: block;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
}

.hero-menu-panel ul {
  display: grid;
  gap: 6px;
  list-style: none;
  color: var(--ink-2);
  font-size: 14px;
}

.hero-menu-panel li {
  position: relative;
  padding-left: 18px;
}

.hero-menu-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
}

.service-rail {
  max-width: var(--maxw);
  margin: clamp(26px, 4vw, 44px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-2) 78%, transparent);
}

.service-rail div {
  padding: 22px 24px;
  min-width: 0;
}

.service-rail div + div {
  border-left: 1px solid var(--line-soft);
}

.service-rail strong {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}

.intro-band {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(34px, 5vw, 64px) var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.intro-copy p {
  margin-top: 16px;
  max-width: 72ch;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.18;
  color: var(--ink);
}

.intro-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(104px, 1fr));
  gap: 10px;
}

.intro-facts span {
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-2);
}

.section-head.split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
}

.angebot-card {
  border-radius: 16px;
  overflow: hidden;
}

.angebot-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--sage));
}

.angebot-card.cold::after {
  background: linear-gradient(90deg, var(--sage), var(--plum));
}

.buffets-grid {
  gap: 18px;
  background: transparent;
  border: none;
}

.buffet-card {
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  min-height: 100%;
}

.buffet-card.featured {
  background: color-mix(in srgb, var(--panel) 84%, var(--bg));
  border-color: var(--line);
}

.buffet-card footer {
  gap: 18px;
}

.anlass {
  border-top-color: var(--line-soft);
  min-height: 132px;
}

.galerie-frame {
  border-radius: 16px;
}

.galerie-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.58));
  pointer-events: none;
}

.galerie-frame figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(10, 9, 8, 0.72);
  color: #F2EBDB;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.process-list li {
  border-top-color: color-mix(in srgb, var(--accent) 76%, var(--sage));
  border-radius: 14px;
  padding: 22px 18px 18px;
  background: color-mix(in srgb, var(--bg-2) 74%, transparent);
}

.kontakt {
  border-radius: 18px;
  background:
    linear-gradient(135deg, #0A0908, #171B16 72%, #211016);
}

.kontakt-form {
  border-radius: 16px;
}

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
    grid-template-rows: auto auto;
  }

  .hero-visual-main {
    min-height: 360px;
  }

  .section-head.split,
  .intro-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .nav {
    gap: 14px;
    padding-inline: 16px;
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .nav-mark-text {
    display: none;
  }

  .nav-logo-img {
    height: 48px;
  }

  .nav-logo-transparent {
    height: 46px;
  }

  .nav-actions {
    gap: 8px;
  }

  .nav-cta {
    display: none;
  }

  /* Der Anfragen-CTA faellt hier weg, der Kundenlogin bleibt sichtbar —
     nur enger gesetzt, damit er neben Theme-Toggle und Burger passt. */
  .nav-login {
    font-size: 11px;
    letter-spacing: 0.06em;
  }

  .eyebrow,
  .section-tag {
    display: block;
    max-width: 100%;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .eyebrow-dot {
    display: block;
    margin-bottom: 10px;
  }

  .hero,
  .hero-grid,
  .hero-copy,
  .hero-visual,
  .service-rail {
    width: 100%;
    max-width: 100%;
  }

  .display {
    max-width: 100%;
    font-size: clamp(42px, 13vw, 58px);
  }

  .lede,
  .section-lede,
  .hero-copy {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero-copy {
    padding-right: 14px;
  }

  .hero-copy .lede {
    max-width: 33ch;
  }

  .hero-visual-main {
    min-height: 300px;
  }

  .hero-visual {
    order: 0;
  }

  .hero-visual-main .hero-logo-img {
    width: min(78%, 280px);
  }

  .hero-food-img {
    min-height: 300px;
  }

  .hero-service-card {
    position: static;
    width: calc(100% - 32px);
    margin: -76px 16px 16px;
    z-index: 1;
  }

  .hero-menu-panel,
  .service-rail,
  .intro-facts {
    grid-template-columns: 1fr;
  }

  .hero-menu-panel {
    gap: 14px;
  }

  .service-rail div + div {
    border-left: none;
    border-top: 1px solid var(--line-soft);
  }

  .kontakt {
    border-radius: 0;
    margin-inline: 0;
  }

  .kontakt-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .kontakt-value {
    font-size: 19px;
    overflow-wrap: anywhere;
  }
}

/* ===== Mobile Hamburger Menu (appended) ===== */
.nav-burger {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  margin-left: .5rem;
  cursor: pointer;
  width: 44px;
  height: 44px;
  color: var(--ink);
  position: relative;
  z-index: 1001;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] { color: var(--accent); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav-burger { display: block; }
}

/* Das geoeffnete Menue bis 1200 px, nicht nur bis 1024: die
   Verwaltungsnavigation klappt frueher zusammen (sechs Punkte), und ohne
   diese Breite haette ihr Burger zwar aufgemacht, die Punkte waeren aber
   inline in den Kopf gefallen statt als Overlay zu erscheinen.
   Die Regeln greifen ohnehin nur, wenn das Menue offen ist — fuer die
   Website-Navigation, deren Burger erst ab 1024 px erscheint, aendert die
   groessere Breite deshalb nichts. */
@media (max-width: 1200px) {
  body[data-menu-open="true"] {
    overflow: hidden;
  }
  /* backdrop-filter auf .nav macht sie sonst zum containing block fuer
     position:fixed -> Overlay-Menue wuerde nur auf Navbar-Hoehe begrenzt. */
  body[data-menu-open="true"] .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body[data-menu-open="true"] .nav-links {
    display: flex !important;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 6rem 2rem 2rem;
    gap: 0;
    background: var(--bg);
    list-style: none;
    margin: 0;
    z-index: 1000;
    overflow-y: auto;
    animation: hbMenuIn .25s ease;
  }
  body[data-menu-open="true"] .nav-links li {
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  }
  body[data-menu-open="true"] .nav-links a {
    display: block;
    padding: 1.1rem 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--ink);
    text-decoration: none;
  }
  body[data-menu-open="true"] .nav-links a::after { display: none; }
}

@keyframes hbMenuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Auth pages (login / register / forgot / reset / profile) ---------- */
.auth-page {
  flex: 1;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 8vw, 96px) var(--pad);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--gold-glow), transparent 70%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 48px);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--sans);
}
.auth-card > .section-tag {
  display: inline-flex;
  margin-bottom: 18px;
}
.auth-card h1,
.auth-card h2,
.auth-card h3,
.auth-card h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 22px;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
}
.auth-card hr {
  border: none;
  border-top: 1px solid var(--line-soft);
  margin: 20px 0;
}
.auth-card p { color: var(--ink-2); margin-bottom: 16px; }
.auth-card .fa { display: none; }

.auth-card form,
.auth-card .login-form { display: flex; flex-direction: column; gap: 16px; }

.auth-card .form-data,
.auth-card .form-input-wrapper { display: flex; flex-direction: column; gap: 8px; }
.auth-card .form-data.rememberme .form-input-wrapper,
.auth-card .form-data.rememberme { flex-direction: row; align-items: center; gap: 8px; }

.auth-card label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.auth-card label.inline { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 13px; }

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 14px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  transition: border-color 0.2s ease;
}
.auth-card input[type="text"]:focus,
.auth-card input[type="email"]:focus,
.auth-card input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
}
.auth-card input[type="checkbox"] { accent-color: var(--accent); }

.auth-card .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.auth-card .button,
.auth-card button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.25s ease;
  cursor: pointer;
}
.auth-card .button.primary,
.auth-card button[type="submit"] {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.auth-card .button.primary:hover,
.auth-card button[type="submit"]:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  transform: translateY(-1px);
}
.auth-card .button.secondary,
.auth-card .button.logout {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
}
.auth-card .button.secondary:hover,
.auth-card .button.logout:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.auth-card a { color: var(--accent); }
.auth-card a:hover { color: var(--accent-2); }
.auth-card .alert,
.auth-card ul.errors,
.auth-card .form-message.error {
  color: #E0645C;
  font-size: 13px;
}
.auth-card .form-message.success { color: var(--sage); font-size: 13px; }

.auth-footer {
  padding: 24px var(--pad);
  border-top: 1px solid var(--line-soft);
  margin-top: 0;
}
.auth-footer .footer-bottom {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-align: center;
}
.site:has(.auth-page) { display: flex; flex-direction: column; min-height: 100vh; }

/* Neutralize user/plugins/login/css/login.css's #grav-login box (id selector
   otherwise outranks .auth-card and forces a white boxed-in-a-box look). */
.auth-card #grav-login {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
}
.auth-card #grav-login .form-actions { text-align: left; }
.auth-card #grav-login .delimiter { color: var(--ink-3); }
.auth-card #grav-login .delimiter::before,
.auth-card #grav-login .delimiter::after { background-color: var(--line); background-image: none; }

/* Neutralize user/plugins/markdown-notices' global light-mode .notices boxes
   inside the dark auth card. */
.auth-card .notices {
  padding: 12px 16px;
  margin: 0 0 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--sans);
  font-size: 14px;
}
.auth-card .notices p { margin: 0; }
.auth-card .notices.green {
  border-left: 3px solid var(--sage);
  background: color-mix(in srgb, var(--sage) 14%, var(--bg-2));
  color: var(--ink);
}
.auth-card .notices.red {
  border-left: 3px solid #E0645C;
  background: color-mix(in srgb, #E0645C 14%, var(--bg-2));
  color: var(--ink);
}
.auth-card .notices.yellow {
  border-left: 3px solid var(--gold-light);
  background: color-mix(in srgb, var(--gold-light) 14%, var(--bg-2));
  color: var(--ink);
}
.auth-card .notices.blue {
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
  color: var(--ink);
}

/* Hinweis auf der Anmeldeseite */
.login-hinweis {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.login-hinweis a { color: var(--accent); text-decoration: underline; }

/* ============================================================
   Shop, Konto und Verwaltung im Seitenlayout
   Eigene Klassen statt der frueheren Inline-Stile je Dokument,
   durchgehend auf den Farbtokens der Website.
   ============================================================ */
:root { --app-nav-h: 90px; }

.app-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px var(--pad) 80px;
}
.app-nav .app-links a { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.app-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.app-titel { font-size: clamp(28px, 3.4vw, 42px); }
.app-unter { color: var(--ink-2); margin-top: 6px; font-size: 15px; }
.app-kopf-aktionen { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.app-footer { padding-top: 0; }

/* Karten und Kennzahlen */
/* min(430px, 100%) statt 430px: auf einem Telefon ist der Bildschirm
   schmaler als die Mindestbreite, und die Spur haette ihn ueberragt — die
   Seite liess sich seitlich wegschieben. Mit dem min() faellt das Raster von
   selbst auf eine Spalte, ohne Media Query und in jedem Bereich. */
.app-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); gap: 20px; align-items: start; }
.app-karte {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.app-karte h2 { font-family: var(--sans); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.app-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 28px; }
.app-kennzahl { background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 18px 20px; }
.app-kennzahl .wert { font-family: var(--serif); font-size: 34px; line-height: 1.05; }
.app-kennzahl .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.app-kennzahl.betont .wert { color: var(--accent); }

/* Tabellen */
.app-tabelle { overflow-x: auto; }
.app-tabelle table { width: 100%; border-collapse: collapse; font-size: 14px; }
.app-tabelle th {
  text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line); padding: 10px 10px;
}
.app-tabelle td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
.app-tabelle tr:last-child td { border-bottom: none; }
.app-tabelle td a { color: var(--accent); }
.app-tabelle td a:hover { text-decoration: underline; }
.app-tabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.app-tabelle .datum { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Formulare */
.app-feld-reihe { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.app-feld { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; font-size: 14px; }
.app-feld > span { color: var(--ink-2); font-size: 13px; }
.app-feld input, .app-feld textarea, .app-feld select {
  font: inherit; font-size: 15px; padding: 11px 13px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.app-feld input:focus, .app-feld textarea:focus, .app-feld select:focus { outline: none; border-color: var(--accent); }
.app-feld input[readonly] { color: var(--ink-3); background: var(--bg-3); }
.app-block {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 24px; background: var(--bg-2);
}
.app-block > legend, .app-block > .legende {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); padding: 0 6px;
}

/* Meldungen */
.app-meldung { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 20px; font-size: 15px; border: 1px solid; }
.app-meldung.erfolg { background: color-mix(in srgb, #6FA86A 14%, transparent); border-color: #6FA86A; color: var(--ink); }
.app-meldung.fehler { background: color-mix(in srgb, #C0642F 16%, transparent); border-color: #C0642F; color: var(--ink); }
.app-meldung.warnung { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); color: var(--ink); word-break: break-word; }
.app-meldung a { color: var(--accent); text-decoration: underline; }

.app-leer { color: var(--ink-3); padding: 16px 0; }
.app-status {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 20px; background: var(--bg-3); color: var(--ink-2); white-space: nowrap;
}
.app-marker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 20px; }
.app-marker.ja { background: color-mix(in srgb, #6FA86A 22%, transparent); color: var(--ink); }
.app-marker.warn { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.app-marker.neutral { background: var(--bg-3); color: var(--ink-3); }
.app-zurueck { display: inline-block; margin-bottom: 10px; color: var(--accent); font-size: 13px; }
.app-zurueck:hover { text-decoration: underline; }

/* Listen mit Statuspunkt (offene Aufgaben) */
.app-liste { list-style: none; }
.app-liste li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.app-liste li:last-child { border-bottom: none; }
.app-liste a { color: var(--ink-2); }
.app-liste a:hover { color: var(--accent); text-decoration: underline; }
.app-punkt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--bg-3); }
.app-punkt.dringend { background: var(--accent); }

/* Filterleiste ueber Listen */
.app-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.app-filter a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--line-soft); color: var(--ink-2);
}
.app-filter a:hover { border-color: var(--line); color: var(--ink); }
.app-filter a.aktiv { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* Produktauswahl beim Anlegen einer Bestellung */
.app-produkte { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.app-produkt { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 16px 18px; }
.app-produkt h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 4px; }
.app-produkt .preis { color: var(--accent); font-size: 14px; font-variant-numeric: tabular-nums; }
.app-produkt .allergene { font-size: 12px; color: var(--muted, #7a7264); margin-top: 4px; letter-spacing: .02em; }
.allergen-legende { font-size: 12px; line-height: 1.6; }
.app-produkt .menge { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.app-produkt .menge input {
  width: 90px; font: inherit; font-size: 15px; padding: 8px 10px;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
}

/* Kleinteile */
.btn-klein { padding: 9px 16px; font-size: 11px; letter-spacing: 0.1em; }
.app-aktionen { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.app-hinweis { color: var(--ink-3); font-size: 13px; line-height: 1.6; margin-top: 10px; }
.app-daten { color: var(--ink-2); font-size: 15px; line-height: 1.8; }
.app-daten strong { color: var(--ink); }
.app-feld.voll { flex: 1 1 100%; }
.app-feld.schmal { flex: 0 1 140px; }
.app-feld textarea { resize: vertical; }
/* Bearbeiten-Modus: die Maske wechselt vom Anlegen zum Aendern. */
.app-block.bearbeiten { border-color: var(--accent); }
.app-aufklapp summary {
  cursor: pointer; color: var(--accent);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
}
.app-aufklapp[open] summary { margin-bottom: 12px; }


/* ------------------------------------------------------------
   Bestellstrecke im Shop
   ------------------------------------------------------------ */
/* Flex- und Grid-Elemente ignorieren hidden sonst — die Schritte des
   Bestellformulars werden genau darueber ein- und ausgeblendet. */
[hidden] { display: none !important; }

.app-schritte { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin-bottom: 24px; font-size: 13px; color: var(--ink-3); }
.app-schritte li { display: flex; align-items: center; gap: 8px; }
.app-schritte li + li::before { content: "→"; color: var(--line); }
.app-schritte .nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); font-family: var(--mono); font-size: 11px;
}
.app-schritte li[aria-current="step"] { color: var(--ink); }
.app-schritte li[aria-current="step"] .nr { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* Mitlaufende Summe. Klebt unter der Kopfleiste, die selbst sticky ist. */
.app-summenleiste {
  position: sticky; top: var(--app-nav-h); z-index: 20;
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 12px 18px; margin-bottom: 22px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.app-summenleiste .zahlen { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.app-summenleiste .zahlen > div { display: flex; flex-direction: column; gap: 2px; }
.app-summenleiste .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.app-summenleiste .wert { font-size: 15px; font-variant-numeric: tabular-nums; }
.app-summenleiste .gesamt .wert { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--accent); }

.app-kategorie { margin-bottom: 28px; }
.app-kategorie h2 {
  font-family: var(--serif); font-size: 26px; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 16px;
}

.app-produkt { display: flex; flex-direction: column; }
.app-produkt .beschreibung { font-size: 13px; color: var(--ink-2); line-height: 1.55; margin: 6px 0 10px; }
.app-produkt .menge { margin-top: auto; }
.app-produkt .zeilensumme { margin-top: 8px; font-size: 12px; color: var(--ink-3); min-height: 1.2em; }
.app-produkt .zeilensumme strong { color: var(--ink); }
.app-produkt.hat-menge { border-color: var(--accent); }

.app-notiz {
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 18px; font-size: 14px; color: var(--ink-2); line-height: 1.6;
}
.app-notiz strong { color: var(--ink); }

.app-zusammenfassung {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 20px; font-size: 14px; color: var(--ink-2);
}
.app-zusammenfassung button {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}

.app-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin-top: 16px; font-size: 15px; }
.app-dl dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); align-self: center; }
.app-dl dd { color: var(--ink); }
.app-tabelle tr.summe td { color: var(--ink); font-weight: 600; border-bottom: none; }


@media (max-width: 1024px) {
  .app-nav .app-links { display: none; }
  body[data-menu-open="true"] .app-links { display: flex !important; }
}

/* Die Verwaltungsnavigation traegt sechs Punkte, die Website-Navigation fuenf
   — und die sechs stehen zusaetzlich in Grossbuchstaben mit Sperrung. Sie
   braucht deshalb frueher das Burger-Menue als die Website, sonst quetscht
   sie sich zwischen 1025 und 1200 Pixeln aus dem Kopf heraus. */
@media (max-width: 1200px) {
  .app-nav .app-links { display: none; }
  .app-nav { grid-template-columns: 1fr auto; }
  .app-nav .nav-burger { display: block; }
  body[data-menu-open="true"] .app-links { display: flex !important; }
}

.app-feld-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.app-feld-check input { margin-top: 3px; flex: none; }

/* Allergenangabe im Katalog und an Positionen: 14 Ankreuzfelder im Raster. */
.allergen-feld input[type="checkbox"] { padding: 0; width: auto; accent-color: var(--accent); }
.allergen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }
.allergen-raster .app-feld-check { font-size: 13px; }
.allergen-keine { margin-bottom: 4px; }

/* Wahl zwischen zwei Wegen (Bestellung/Kostproben, Lieferung/Abholung):
   Karten statt nackter Radios, damit die Erklaerung dazu Platz hat. */
.app-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.app-wahl-karte {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line, #d9d4ca); border-radius: 10px; cursor: pointer;
  background: var(--bg-2, transparent);
}
.app-wahl-karte input { margin-top: 3px; }
.app-wahl-karte .titel { font-weight: 600; font-size: 14px; }
.app-wahl-karte .text { grid-column: 2; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.app-wahl-karte:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.app-produkt .preis .mindestmenge { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; letter-spacing: 0; }
.app-produkt .preis .mindestmenge[hidden] { display: none; }

.app-storno { margin-top: 16px; border-top: 1px solid var(--line-soft, #e3e0d9); padding-top: 12px; }
.app-storno summary { cursor: pointer; font-size: 14px; color: var(--muted, #7a7264); }
.app-storno summary:focus-visible { outline: 2px solid var(--accent, #96702a); outline-offset: 2px; }

/* ==========================================================================
   Shop: Katalog mit Suche, Chips, Stepper, Liste/Kacheln, Warenkorbleiste
   ========================================================================== */
.visuell-versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.shop-werkzeuge { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.shop-suche { position: relative; flex: 1; min-width: 0; }
.shop-suche input {
  width: 100%; padding: 12px 40px 12px 14px; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--ink);
  -webkit-appearance: none;
}
.shop-suche input:focus { outline: none; border-color: var(--accent); }
.shop-suche button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--bg-3); color: var(--ink-2);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.shop-sortierung select {
  height: 100%; padding: 12px 32px 12px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--ink);
}
.shop-ansicht { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.shop-ansicht button {
  width: 42px; border: none; background: transparent; color: var(--ink-3); font-size: 16px; cursor: pointer;
}
.shop-ansicht button + button { border-left: 1px solid var(--line); }
.shop-ansicht button[aria-pressed="true"] { background: var(--accent); color: var(--bg); }

/* Chips: eine Zeile, auf dem Handy seitlich scrollbar statt umbrechend —
   so bleibt die Zeile flach und die Kategorien liegen unter dem Daumen. */
.shop-chips {
  display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 4px 0 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.shop-chips::-webkit-scrollbar { display: none; }
.shop-chips-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.shop-kategorien { position: sticky; top: 0; z-index: 5; background: var(--bg); margin: 0 -4px; padding-left: 4px; padding-right: 4px; }
.chip {
  flex: none; padding: 8px 14px; min-height: 36px;
  border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); color: var(--ink-2);
  font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.chip.klein { padding: 6px 12px; min-height: 32px; font-size: 12px; }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.chip.betont[aria-pressed="false"] { border-style: dashed; }

/* Produkte: Kacheln als Vorgabe auf dem Desktop, Liste auf dem Handy. */
.shop-produkte { margin-top: 8px; }
.shop-kategorie-titel {
  grid-column: 1 / -1;
  font-family: var(--serif); font-size: 24px; margin: 12px 0 0; color: var(--ink);
}
.shop-produkte .app-produkt .kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.shop-produkte .app-produkt .kopf h3 { margin: 0; flex: 1; }
.shop-produkte .app-produkt .preis { white-space: nowrap; }
.shop-produkte .app-produkt .einheit { color: var(--ink-3); font-size: 12px; }
.shop-produkte .app-produkt .menge { gap: 0; }
.shop-produkte .app-produkt .menge input {
  width: 64px; text-align: center; border-radius: 0; font-size: 16px; padding: 8px 4px;
  -moz-appearance: textfield;
}
.shop-produkte .app-produkt .menge input::-webkit-outer-spin-button,
.shop-produkte .app-produkt .menge input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper {
  width: 42px; height: 42px; flex: none;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.stepper[data-minus] { border-radius: var(--radius) 0 0 var(--radius); }
.stepper[data-plus] { border-radius: 0 var(--radius) var(--radius) 0; }
.stepper:active { background: var(--bg-3); }
.shop-produkte .app-produkt .zeilensumme { margin: 0 0 0 12px; min-height: 0; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Liste: ein Artikel je Zeile, Beschreibung weg, Mengenfeld rechts. */
.shop-produkte.liste { display: block; }
.shop-produkte.liste .shop-kategorie-titel { font-size: 20px; margin: 18px 0 6px; }
.shop-produkte.liste .app-produkt {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "kopf menge" "allergene menge";
  align-items: center; gap: 2px 12px; padding: 10px 12px; margin-bottom: 6px;
}
.shop-produkte.liste .app-produkt .kopf { grid-area: kopf; flex-direction: column; align-items: flex-start; gap: 0; }
.shop-produkte.liste .app-produkt .kopf h3 { font-size: 17px; }
.shop-produkte.liste .app-produkt .beschreibung { display: none; }
.shop-produkte.liste .app-produkt .allergene { grid-area: allergene; margin: 0; }
.shop-produkte.liste .app-produkt .menge { grid-area: menge; margin: 0; flex-wrap: wrap; justify-content: flex-end; }
.shop-produkte.liste .app-produkt .zeilensumme { width: 100%; text-align: right; margin: 4px 0 0; }
.shop-keine-treffer { padding: 24px 0; }
.shop-vorschlag { font-size: 12px; color: var(--ink-3); font-style: normal; margin-left: 6px; }

/* Warenkorbleiste: klebt unten, solange man im Katalog ist. */
.shop-warenkorbleiste {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 20px -4px 0; padding: 12px 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 -10px 30px -12px rgba(0,0,0,0.5);
}
.shop-warenkorbleiste .stand { display: flex; flex-direction: column; min-width: 0; }
.shop-warenkorbleiste .positionen { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.shop-warenkorbleiste .summe { font-family: var(--serif); font-size: 26px; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.shop-warenkorbleiste .details { font-size: 12px; color: var(--ink-3); }
.shop-warenkorbleiste .btn:disabled { opacity: 0.5; cursor: default; }
.shop-mit-leiste .app-main { padding-bottom: 20px; }

.shop-pruefung table td.shop-hinweis-zeile { font-size: 13px; color: var(--ink-3); text-align: left; }
.shop-pruefung tr.pauschale td { color: var(--ink-2); }
.shop-pruefung tfoot td { border-top: 1px solid var(--line-soft); }
.shop-pruefung tfoot tr.summe td { font-weight: 600; color: var(--accent); border-top: 1px solid var(--accent); }

@media (max-width: 640px) {
  .shop-werkzeuge { flex-wrap: wrap; }
  .shop-suche { flex: 1 1 100%; }
  .shop-sortierung { flex: 1; }
  .shop-sortierung select { width: 100%; }
  .shop-warenkorbleiste { margin-left: -12px; margin-right: -12px; border-radius: var(--radius) var(--radius) 0 0; }
  .shop-warenkorbleiste .details { display: none; }
  .shop-warenkorbleiste .btn { padding-left: 16px; padding-right: 16px; }
}

/* Eigene Artikel: jede Zeile ein Kaertchen, Plus fuer die naechste. */
.shop-wunsch-zeilen { display: grid; gap: 10px; }
.shop-wunsch {
  position: relative;
  display: grid; grid-template-columns: 1fr 110px; gap: 10px 12px;
  padding: 14px 44px 14px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg);
}
.shop-wunsch .app-feld { margin: 0; }
.shop-wunsch .app-feld.voll { grid-column: 1 / -1; }
.shop-wunsch-entfernen {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink-3);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.shop-wunsch-entfernen:hover { color: var(--ink); border-color: var(--accent); }
.shop-wunsch-plus {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 10px; padding: 12px 14px; min-height: 48px;
  border: 1px dashed var(--line); border-radius: var(--radius); background: transparent;
  color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.shop-wunsch-plus:hover { border-color: var(--accent); color: var(--ink); }
.shop-wunsch-plus .plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--bg);
  font-size: 20px; line-height: 1; flex: none;
}
@media (max-width: 480px) {
  .shop-wunsch { grid-template-columns: 1fr 90px; }
}

/* Auftrag: Positionen als Zeilenformulare, solange der Auftrag offen ist. */
.positionen-tabelle td.position-form { padding: 6px 0; }
.position-zeile { display: grid; grid-template-columns: 1fr 70px 100px 60px 90px 80px; gap: 6px; align-items: center; }
.position-zeile .feld input {
  width: 100%; padding: 8px 10px; font-size: 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg); color: var(--ink);
}
.position-zeile .feld input:focus { outline: none; border-color: var(--accent); }
.position-zeile .feld:not(.bezeichnung) input { text-align: right; font-variant-numeric: tabular-nums; }
.position-zeile .feld.bezeichnung .app-marker { display: inline-block; margin-top: 4px; }
.position-zeile .feld.bezeichnung .hinweis { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.position-zeile .feld.summe { text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; }
.position-zeile .feld.aktionen { display: flex; gap: 4px; justify-content: flex-end; }
.position-zeile .feld.aktionen .btn { padding: 8px 10px; }
@media (max-width: 720px) {
  .position-zeile { grid-template-columns: 1fr 1fr 1fr; }
  .position-zeile .feld.bezeichnung { grid-column: 1 / -1; }
  .position-zeile .feld.summe { grid-column: 1 / 3; text-align: left; }
}