/* ============================================================
   consent.css  —  Der Cookie-Hinweis auf der Kundenseite (ab 0.9.9)
   ============================================================

   EINE REGEL IST HIER NICHT GESCHMACKSSACHE

   „Alle ablehnen" und „Alle annehmen" tragen dieselbe Klasse, stehen
   nebeneinander, haben dieselbe Größe, dieselbe Schriftstärke und denselben
   Kontrast. Nur die Farbe unterscheidet sie, und auch die nicht in ihrer
   Auffälligkeit.

   Wer daraus einen grauen Textlink neben einem großen grünen Knopf macht,
   macht aus einer Wahl eine Lenkung — und damit aus einer Einwilligung eine
   unwirksame. Der ganze Dialog wäre dann für nichts. Das gilt auch für
   scheinbar harmlose Eingriffe: „Ablehnen" kleiner, blasser, weiter unten
   oder erst nach einem Klick auf „Einstellungen".

   Die Leiste liegt UNTEN und deckt die Seite nicht ab. Es gibt keine
   Cookie-Wall: Die Speisekarte bleibt lesbar und die Bestellung möglich,
   ohne dass jemand etwas anklicken muss.
   ============================================================ */

.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 4000;
  padding: clamp(.7rem, 2vw, 1.1rem);
  display: flex; justify-content: center;
  /* pointer-events auf dem Rahmen aus, auf der Karte an: Die Fläche neben
     der Karte bleibt anklickbar, damit die Leiste nichts blockiert, was sie
     nicht selbst ausfüllt. */
  pointer-events: none;
}
.consent__box {
  pointer-events: auto;
  width: 100%; max-width: 720px;
  background: var(--card, #fff);
  color: var(--text, #1a1614);
  border: 1px solid var(--line, #ece5db);
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.45);
  max-height: 82vh; overflow-y: auto;
  animation: consentIn .28s ease both;
}
@keyframes consentIn { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  .consent__box { animation: none; }
}

.consent__title { font-size: 1.05rem; font-weight: 800; margin: 0 0 .35rem; }
.consent__text {
  margin: 0; font-size: .92rem; line-height: 1.5;
  color: var(--muted, #6b625a);
}

/* -------------------- Die Kategorien -------------------- */
.consent__opts {
  margin-top: .9rem; display: flex; flex-direction: column; gap: .5rem;
}
.consent__opt {
  display: flex; gap: .7rem; align-items: flex-start;
  border: 1px solid var(--line, #ece5db); border-radius: 12px;
  padding: .7rem .85rem; cursor: pointer;
}
.consent__opt input { margin-top: .2rem; width: 17px; height: 17px; flex: none; }
.consent__opt b { display: block; font-size: .92rem; }
.consent__opt small {
  display: block; margin-top: .15rem;
  font-size: .82rem; line-height: 1.45; color: var(--muted, #6b625a);
}
/* „Notwendig" ist keine Wahl. Der Schalter ist sichtbar an und nicht
   bedienbar — eine Attrappe, die sich umlegen lässt, wäre schlimmer. */
.consent__opt--fix { cursor: default; opacity: .75; }

/* -------------------- Die Knöpfe -------------------- */
.consent__actions {
  margin-top: 1rem;
  display: flex; gap: .6rem; flex-wrap: wrap;
}
/* GLEICHE Gestaltung für Ablehnen und Annehmen: gleiche Grundfläche, gleiche
   Schriftstärke, gleiche Höhe. Siehe Kopf dieser Datei. */
.consent__btn {
  flex: 1 1 0; min-width: 150px;
  font-family: inherit; font-size: .95rem; font-weight: 700;
  padding: .75rem 1rem; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--paprika, #C4452F);
  background: var(--card, #fff); color: var(--paprika, #C4452F);
  transition: filter .12s, transform .12s;
}
.consent__btn:hover { filter: brightness(.97); }
.consent__btn:active { transform: translateY(1px); }
#consentAccept { background: var(--paprika, #C4452F); color: #fff; }
.consent__btn--save { background: var(--paprika, #C4452F); color: #fff; }
.consent__btn:focus-visible {
  outline: 3px solid var(--mango, #E8A33D); outline-offset: 2px;
}

/* -------------------- Nebenlinks -------------------- */
.consent__more {
  margin-top: .7rem;
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.consent__link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: .84rem;
  color: var(--muted, #6b625a); text-decoration: underline;
}
.consent__link:hover { color: var(--text, #1a1614); }

@media (max-width: 520px) {
  /* Untereinander, aber in derselben Reihenfolge und Größe — nicht
     „Ablehnen" nach unten schieben. */
  .consent__actions { flex-direction: column; }
  .consent__btn { flex: none; width: 100%; }
}