/* ============================================================
   ARTIKEL-KACHEL  —  gemeinsames Aussehen für Vorschau und Speisekarte
   ============================================================

   Wird vom Item-Builder UND von der echten Bestellseite geladen. Was hier
   steht, sieht an beiden Orten gleich aus — sonst wäre die Vorschau eine Lüge.

   Zwei Grundgedanken (dieselben wie bei site.css):

   1. ALLES IN PROZENT. Die Ebenen liegen prozentual auf der Kachel,
      Schriftgrößen rechnen in "cqw" — Prozent der KACHELbreite. Eine Kachel,
      die am 27-Zöller stimmt, stimmt damit auch auf dem Handy.

   2. ANIMATION UND MAUS-EFFEKT LIEGEN AUF VERSCHIEDENEN EBENEN.
      Die Animation bewegt ".sb-anim", der Maus-Effekt ".ic-fx" darin. Beide
      benutzen die Transformation — auf einem gemeinsamen Element würde der
      eine den anderen wegwerfen. So überlagern sie sich sauber.

   Die Animations-Maschine selbst (Keyframes, "Bewegung reduzieren", die
   Pause zwischen zwei Durchläufen) steht in site.css und gilt hier mit,
   weil die Ebenen dieselben Klassen tragen.
   ============================================================ */

/* ==================== Das Raster der Speisekarte ====================
   Bewusst mit eigenem "display: grid": Diese Datei wird auch im
   Item-Builder geladen, wo shop.css nicht dabei ist. Ohne die Zeile stünden
   die Kacheln dort untereinander in voller Breite - und die Vorschau
   "in echter Größe" wäre eine Lüge. */
.grid--ic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ic-min, 220px), 1fr));
  gap: var(--ic-gap, 18px);
  align-items: start;
}

/* ==================== Die Kachel ====================
   Sie ist weiterhin ein <button> - der ganze Bereich öffnet den Artikel.
   Alles, was die klassische Kachel an eigenem Aussehen mitbrachte, wird
   hier abgeräumt: Die Gestaltung kommt jetzt aus den Ebenen. */
.ic-card {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  gap: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;

  /* Das feste Verhältnis ist der Grund, warum die Vorschau maßstäblich
     dasselbe zeigt wie die Speisekarte. Zugleich der Anker für alle
     cqw-Angaben der Ebenen. */
  aspect-ratio: var(--ic-ar, 100 / 132);
  container-type: size;
  container-name: itemcard;
}
.ic-card:hover { transform: none; box-shadow: none; border-color: transparent; }
.ic-card.is-in { transform: none; }
.ic-card:focus-visible { outline: 3px solid var(--primary, #E8A33D); outline-offset: 3px; }

/* Die äußere Ebene: trägt Animation und Maus-Verhalten der GANZEN Kachel
   (eingestellt in der Ebene "Überlagerung"). */
.ic-all { position: absolute; inset: 0; }
.ic-all__fx {
  transform-style: preserve-3d;
  /* DIE KACHEL IST DIE GRENZE (Fehler aus 0.8.6, behoben in 0.8.7).
     Zieht man eine Ebene größer als die Kachel - im Builder zwei
     Mausbewegungen - ragte sie vorher über den Rand und malte über die
     Nachbarkacheln. Gemessen: ein Bild auf 160 % Höhe stand 99 px unter der
     Kachel. Im Kopfbereich ist so ein Überstand erwünscht (das Aktions-Banner
     lebt davon), im Raster einer Speisekarte gibt es dafür keinen Platz.

     Zugeschnitten wird hier und nicht an `.ic-card`: Der Maus-Effekt
     „Kachel hebt sich" verschiebt genau dieses Element, und der darf oben
     nicht abgeschnitten werden. */
  overflow: hidden;
}

/* ============================================================
   ZWEI BEHÄLTER, WENN DIE KACHEL ÜBERSTAND ERLAUBT  (ab 0.9.1)

   Bis 0.9.0 hieß "die Kachel schneidet nicht ab", dass JEDE Ebene über den
   Rand darf. Jetzt entscheidet jede Ebene für sich, und dafür gibt es zwei
   Behälter: einer schneidet an der Kachel ab, der andere nicht.

   Beide liegen deckungsgleich über der ganzen Kachel — die Ebenen behalten
   also ihre Prozentwerte und rutschen nicht. Der äußere liegt oben: Was
   hinausragen darf, soll auch über dem liegen, was abgeschnitten wird.
   ============================================================ */
.ic-inside,
.ic-outside { position: absolute; inset: 0; }
.ic-inside { overflow: hidden; z-index: 0; }
.ic-outside { overflow: visible; z-index: 1; }

/* ==================== Eine Ebene ==================== */
.ic-el { position: absolute; }
.ic-fx {
  position: relative;
  width: 100%;
  height: 100%;
  /* Ein gemeinsamer Übergang für alle Maus-Effekte. Ohne ihn würden sie
     springen statt zu gleiten. */
  transition: transform var(--hv-dur, .28s) ease,
              opacity var(--hv-dur, .28s) ease,
              filter var(--hv-dur, .28s) ease,
              box-shadow var(--hv-dur, .28s) ease;
}

/* ==================== Hintergrund-Fläche ==================== */
.ic-surface { overflow: hidden; }

/* ==================== Bildflächen ====================
   Der eingestellte Zoom steht als Variable, nicht als fertige
   Transformation. Nur so kann der Maus-Effekt "Bild zoomt" oben drauf
   rechnen, ohne den gewählten Ausschnitt zu zerstören. */
.ic-pic, .ic-surface { overflow: hidden; }
.ic-pic { display: flex; align-items: center; justify-content: center; }
.ic-pic__img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  transform: scale(calc(var(--pic-zoom, 1) * var(--pic-hz, 1)))
             translate(var(--pic-hx, 0), var(--pic-hy, 0));
  transition: transform var(--hv-dur, .35s) ease, filter var(--hv-dur, .35s) ease;
}
.ic-pic__ph {
  position: relative;
  line-height: 1;
  filter: saturate(.9);
}

/* ==================== Text ==================== */
.ic-text {
  display: flex;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ic-text__in {
  max-width: 100%;
  /* Zeilenbegrenzung: Ein 40-Zeichen-Name darf die Kachel nicht sprengen. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ic-lines, 2);
  line-clamp: var(--ic-lines, 2);
  overflow: hidden;
}
.ic-text__in--free { display: block; overflow: visible; }

/* ============================================================
   DER DURCHGESTRICHENE ALTE PREIS  (ab 0.9.5)

   Alle Maße in `em` — also relativ zur Schriftgröße der Preis-Ebene. Der
   Item-Builder stellt diese Größe in `cqw` ein (mitwachsend zur Kachel);
   feste Pixel hier würden genau das aushebeln: Auf einer großen Kachel
   säße ein winziger, auf einer kleinen ein überstehender Zweitpreis.
   ============================================================ */
/* Alter und neuer Preis stehen ÜBEREINANDER, nicht nebeneinander:
   oben der durchgestrichene, darunter der gültige. Nebeneinander liest man
   sie als eine Zeile ("2,50 ab 2,25") und muss zweimal hinsehen, welcher
   Betrag nun gilt. Untereinander ist die Reihenfolge eindeutig — und der
   gültige Preis steht dort, wo das Auge ihn ohnehin sucht.

   Nur die Preis-Ebene und nur mit Aktion: Ohne alten Preis bleibt die Ebene
   eine normale Textzeile mit der eingestellten Ausrichtung. */
.ic-el--price .ic-text:has(.ic-price__old) {
  flex-direction: column;
  justify-content: center;
}
/* :has() kennt jeder Browser seit 2023. Für ältere gilt der Rückfall
   darunter — nebeneinander, wie in 0.9.5 zuerst gebaut. Er sieht nicht
   falsch aus, nur weniger deutlich. */

.ic-price__old {
  /* BEFUND beim Nachsehen im Browser: Mit `flex: 0 1 auto` stand hier
     „2,…" statt „2,50 €".

     Schuld ist der Nachbar: `.ic-text__in` ist ein -webkit-box mit
     `max-width: 100%` und beansprucht im Flex-Kasten so viel Platz, wie es
     bekommen kann. Der alte Preis durfte schrumpfen — und wurde bis zur
     Unkenntlichkeit zusammengedrückt, obwohl die Ebene reichlich breit war.

     Deshalb: Der alte Preis schrumpft NICHT (`0 0 auto`). Wird es wirklich
     eng, gibt der neue Preis nach — er ist kurz und steht sowieso zuletzt.
     Ein halber Preis ist kein Preis. */
  flex: 0 0 auto;
  margin-right: 0.4em;
  font-size: 0.72em;
  font-weight: inherit;
  /* Eng gesetzt: Die beiden Beträge sollen als EIN Preis gelesen werden,
     nicht als zwei Zeilen mit Abstand dazwischen. */
  line-height: 1.05;
  text-decoration: line-through;
  /* Die Linie ein wenig kräftiger als die Schrift - bei dünnen Schnitten
     ist sie sonst auf dem Handy praktisch unsichtbar. */
  text-decoration-thickness: 0.09em;

  /* GRAU, nicht in der Preisfarbe.

     Bis eben erbte der alte Preis die Farbe der Preis-Ebene - auf der
     Standardkachel ist die rot. Zwei rote Beträge übereinander sehen aus wie
     zwei Angebote; welcher gilt, muss man am Durchstrich erkennen. Grau sagt
     „das war einmal" auf den ersten Blick, und die Farbe bleibt dem Preis
     vorbehalten, der tatsächlich gilt.

     `currentColor` mit Deckkraft ginge auch - dann wäre es aber ein blasses
     Rot, kein Grau. */
  color: #8A7F76;
  -webkit-text-fill-color: #8A7F76;   /* schlägt einen Farbverlauf der Ebene */
  opacity: 1;
  white-space: nowrap;
}

/* Untereinander braucht der alte Preis keinen seitlichen Abstand mehr —
   und direkt über dem neuen soll er stehen, nicht mit Luft dazwischen. */
.ic-el--price .ic-text:has(.ic-price__old) .ic-price__old {
  margin-right: 0;
  margin-bottom: -0.05em;
  align-self: inherit;
}

/* Der Preistext daneben darf schrumpfen — vorher konnte er es nicht, weil
   `min-width: auto` bei Flex-Kindern gilt. */
.ic-el--price .ic-text__in { flex: 0 1 auto; min-width: 0; }

/* ==================== Etikett (Beliebt / Aktion) ==================== */
.ic-badge {
  display: flex;
  align-items: center;
  gap: .35em;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
}
.ic-badge__ic { flex: 0 0 auto; }
.ic-badge__tx { overflow: hidden; text-overflow: ellipsis; }

/* ==================== Knopf ==================== */
.ic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
}
.ic-btn__tx { position: relative; z-index: 1; }

/* ==================== Überlagerung ====================
   Liegt über allem und nimmt keine Klicks entgegen - der Klick gehört der
   Kachel. */
.ic-el--overlay-visual { position: absolute; inset: 0; pointer-events: none; }

/* KI-Hinweis (ab 1.3.0): ein Rahmen in der Lage des Bildes, direkt unter der
   Überlagerung. Er nimmt selbst keine Klicks an - der Klick gehört weiter
   der Kachel, nur das Symbol darin fängt ihn ab (sitecore.js, ki). Ohne
   Lageangabe (Kategorie) füllt er die ganze Kachel. */
.ki-anker { position: absolute; inset: 0; pointer-events: none; }
.ic-glass { overflow: hidden; }
.ic-glass__veil, .ic-glass__ring { position: absolute; inset: 0; }
.ic-glass__ring { pointer-events: none; }
.ic-glass__sheen {
  position: absolute;
  top: -60%; bottom: -60%;
  left: -40%;
  width: var(--sheen-w, 18%);
  background: linear-gradient(90deg, transparent, var(--sheen-col, #fff), transparent);
  transform: rotate(var(--sheen-ang, 25deg));
  pointer-events: none;
}

/* ============================================================
   MAUS-VERHALTEN

   ZWEI AUSLÖSER (neu in 0.8.7). Bis 0.8.6 feuerte jeder Effekt, sobald die
   Maus irgendwo auf der Kachel war. Für „die ganze Kachel hebt sich" ist das
   richtig — für den Hinzufügen-Knopf falsch: Der soll reagieren, wenn man IHN
   ansteuert, nicht wenn man am anderen Ende der Kachel vorbeifährt.

     data-hover-trigger="card"  → die ganze Kachel löst aus
     data-hover-trigger="self"  → nur das Element selbst

   Auf dem Handy gibt es kein Überfahren. Dort löst das Antippen der Kachel
   beides aus (`.ic-card:active .sb-el`) — sonst bliebe der Knopf dort stumm.

   Die Stellschrauben (--hv-…) setzt itemcore.js je Ebene.
   ============================================================ */

/* "stattdessen": Die Dauer-Animation hält an, solange die Maus darauf liegt.
   Sie friert ein, wo sie gerade ist, statt in die Ausgangslage zu springen. */
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover-mode="replace"] > .sb-anim {
  animation-play-state: paused !important;
}

/* -------------------- für alle Ebenen -------------------- */
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="lift"] > .sb-anim > .ic-fx {
  transform: translateY(calc(var(--hv-amt, 6px) * -1));
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="grow"] > .sb-anim > .ic-fx {
  transform: scale(var(--hv-scale, 1.06));
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="shrink"] > .sb-anim > .ic-fx {
  transform: scale(var(--hv-scale-down, .94));
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="tilt"] > .sb-anim > .ic-fx {
  transform: rotate(var(--hv-ang, 3deg));
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="glow"] > .sb-anim > .ic-fx {
  filter: drop-shadow(0 0 var(--hv-amt, 12px) var(--hv-col, #E8A33D));
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="fade"] > .sb-anim > .ic-fx {
  opacity: var(--hv-op, .6);
}

/* -------------------- nur Bildebenen -------------------- */
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="zoom"] .ic-pic__img {
  --pic-hz: var(--hv-scale, 1.08);
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="pan"] .ic-pic__img {
  --pic-hx: calc(var(--hv-pct, 4%) * -1);
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="bright"] .ic-pic__img {
  filter: brightness(var(--hv-pct, 115%));
}
.sb-el[data-hover="gray2color"] .ic-pic__img { filter: grayscale(1); }
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="gray2color"] .ic-pic__img {
  filter: grayscale(0);
}

/* -------------------- nur Knopf und Etikett -------------------- */
.sb-el[data-hover="fill"] .ic-fx::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--hv-col, #C4452F);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hv-dur, .28s) ease;
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="fill"] .ic-fx::before {
  transform: scaleX(1);
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="popin"] > .sb-anim > .ic-fx {
  transform: scale(var(--hv-scale, 1.14));
  transition-timing-function: cubic-bezier(.34, 1.56, .64, 1);
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="spin"] > .sb-anim > .ic-fx {
  transform: rotate(var(--hv-ang, 90deg));
}
:is(.ic-card:hover .sb-el[data-hover-trigger="card"],
    .ic-card:focus-visible .sb-el[data-hover-trigger="card"],
    .ic-card:active .sb-el,
    .sb-el[data-hover-trigger="self"]:hover)[data-hover="wiggle"] > .sb-anim > .ic-fx {
  animation: ic-wiggle var(--hv-dur, .4s) ease-in-out 2;
}
@keyframes ic-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(calc(var(--hv-ang, 6deg) * -1)); }
  75% { transform: rotate(var(--hv-ang, 6deg)); }
}

/* -------------------- ganze Kachel (Ebene "Überlagerung") --------------------
   Hier gibt es bewusst nur den Auslöser "ganze Kachel": Die Überlagerung IST
   die Kachel, ein "nur über mir" wäre dasselbe in Grün. */
.ic-card:hover .ic-all[data-hover="raise"] > .sb-anim > .ic-fx,
.ic-card:active .ic-all[data-hover="raise"] > .sb-anim > .ic-fx {
  transform: translateY(calc(var(--hv-amt, 6px) * -1));
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .45);
}

.ic-all[data-hover="tilt3d"] > .sb-anim > .ic-fx {
  transform: perspective(760px)
             rotateX(calc(var(--tilt-x, 0) * var(--hv-ang, 8deg)))
             rotateY(calc(var(--tilt-y, 0) * var(--hv-ang, 8deg)));
  transition: transform var(--hv-dur, .15s) ease-out;
}

.ic-card:hover .ic-all[data-hover="ring"] > .sb-anim > .ic-fx,
.ic-card:active .ic-all[data-hover="ring"] > .sb-anim > .ic-fx {
  box-shadow: 0 0 0 var(--hv-amt, 3px) var(--hv-col, #E8A33D);
}

/* Lichtschein: liegt still am linken Rand und zieht beim Überfahren durch. */
.ic-glass__hsheen {
  position: absolute;
  top: -60%; bottom: -60%;
  left: -30%;
  width: var(--hv-pct, 20%);
  background: linear-gradient(90deg, transparent, var(--hv-col, #fff), transparent);
  opacity: 0;
  transform: rotate(20deg);
  pointer-events: none;
}
.ic-card:hover .ic-glass__hsheen,
.ic-card:active .ic-glass__hsheen {
  animation: ic-sheen var(--hv-dur, .75s) ease-out 1;
}
@keyframes ic-sheen {
  from { left: -30%; opacity: .85; }
  to { left: 120%; opacity: 0; }
}

/* ============================================================
   AUSVERKAUFT
   Die Kachel bleibt sichtbar, wird aber sichtbar zurückgenommen - und
   nimmt keine Klicks mehr entgegen (das macht shop.js).
   ============================================================ */
.ic-card.is-out .ic-all__fx { filter: grayscale(.7) opacity(.72); }

/* ============================================================
   HANDY
   ============================================================ */
@media (max-width: 720px) {
  .ic-el[data-hide-mobile="1"] { display: none; }
}

/* ============================================================
   RÜCKSICHT AUF "BEWEGUNG REDUZIEREN"
   Wer das eingeschaltet hat, hat meist einen guten Grund. Farb- und
   Helligkeitswechsel bleiben, alles Bewegte steht still.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ic-fx, .ic-pic__img { transition: none !important; }
  .ic-card:hover .sb-el > .sb-anim > .ic-fx,
  .ic-card:active .sb-el > .sb-anim > .ic-fx,
  .sb-el:hover > .sb-anim > .ic-fx { transform: none !important; }
  .ic-card:hover .sb-el[data-hover="zoom"] .ic-pic__img,
  .sb-el[data-hover="zoom"]:hover .ic-pic__img { --pic-hz: 1; }
  .ic-glass__hsheen { animation: none !important; }
}

/* ============================================================
   ÜBERLAGERUNG UND MILCHGLAS  (ab 0.9.5)
   ============================================================ */

/* Der Verlauf über dem Hintergrundbild. Er liegt innerhalb der Fläche und
   damit unter allen Textebenen — genau dafür ist er da: Man legt einen
   Verlauf nach Weiß, und der Name darüber wird lesbar. */
.ic-surface__ov {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* ---- Milchglas: was die Kachel mit dem HINTERGRUND der Seite macht ----

   Alle drei Arten brauchen eine durchscheinende Füllung. Bei voller
   Deckkraft ist hinter der Kachel nichts zu sehen, das man verschwimmen
   lassen könnte — der Baukasten sagt das auch dazu.

   `-webkit-` steht überall mit: Safari kann backdrop-filter bis heute nur
   mit Präfix. Ohne die Zeile bliebe die Kachel auf jedem iPhone flach. */
.ic-surface[data-backdrop] {
  --ic-bd: 12px;
  isolation: isolate;
}

.ic-surface[data-backdrop="blur"] {
  -webkit-backdrop-filter: blur(var(--ic-bd));
  backdrop-filter: blur(var(--ic-bd));
}

/* Eis: kühl und hell. Mehr Sättigung, etwas heller, dazu ein feiner heller
   Rand innen — so wirkt es wie eine Scheibe und nicht wie ein Schleier. */
.ic-surface[data-backdrop="ice"] {
  -webkit-backdrop-filter: blur(var(--ic-bd)) saturate(1.5) brightness(1.12);
  backdrop-filter: blur(var(--ic-bd)) saturate(1.5) brightness(1.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Flüssigglas: stärker gesättigt, mit einem Lichtstreifen quer darüber.
   Der Streifen ist ein eigenes Element (::after) und kein zweiter
   Hintergrund — sonst läge er unter dem Bild statt darüber. */
.ic-surface[data-backdrop="liquidglass"] {
  -webkit-backdrop-filter: blur(var(--ic-bd)) saturate(1.9) contrast(1.06);
  backdrop-filter: blur(var(--ic-bd)) saturate(1.9) contrast(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5),
              inset 0 -1px 0 rgba(255, 255, 255, 0.16),
              inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.ic-surface[data-backdrop="liquidglass"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.06) 34%,
    rgba(255, 255, 255, 0) 52%,
    rgba(255, 255, 255, 0.10) 78%,
    rgba(255, 255, 255, 0.02) 100%
  );
}

/* Wer die Bewegung reduziert hat, bekommt trotzdem das Glas — nur ohne
   Spielereien. Hier gibt es nichts zu animieren, die Regel steht nur als
   Merkposten, falls jemand später eine Animation ergänzt. */

/* Milchglas kostet Rechenzeit: Jede Kachel zwingt den Browser, den Bereich
   dahinter neu zu zeichnen. Auf sehr schmalen Geräten (Handy) sind das
   schnell zwei Dutzend Kacheln gleichzeitig — dort wird der Effekt
   abgeschwächt statt abgeschaltet, damit die Gestaltung erkennbar bleibt. */
@media (max-width: 560px) {
  .ic-surface[data-backdrop] { --ic-bd: 6px; }
}

/* ============================================================
   KATEGORIE-KACHEL  (Category-Builder, ab 0.9.5)
   ============================================================ */

.cat-card { cursor: pointer; }

/* Rand und Puls, solange auf der Kategorie eine Aktion läuft.

   Als box-shadow und NICHT als border: Ein Rahmen würde die Kachel breiter
   machen. Startet dann eine Aktion, verrutscht das ganze Raster um ein paar
   Pixel — sichtbar, und niemand fände den Grund. */
.cat-card[data-ring] {
  border-radius: inherit;
}
.cat-card[data-ring]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--cat-radius, 18px);
  box-shadow: 0 0 0 var(--cat-ring, 3px) var(--cat-ring-col, #C4452F);
  pointer-events: none;
  z-index: 2;
}
.cat-card[data-ring="pulse"]::before {
  animation: cat-ring-pulse 1.8s ease-in-out infinite;
}
@keyframes cat-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 var(--cat-ring, 3px) var(--cat-ring-col, #C4452F); }
  50%      { box-shadow: 0 0 0 calc(var(--cat-ring, 3px) * 2.4) rgba(196, 69, 47, 0.14); }
}
/* Wer „Bewegung reduzieren" eingestellt hat, bekommt den Rand ohne Puls —
   die Information bleibt, die Unruhe geht. */
@media (prefers-reduced-motion: reduce) {
  .cat-card[data-ring="pulse"]::before { animation: none; }
}

/* Der Abschnitts-Kopf, wenn ihn der Category-Builder baut.

   Er trägt die Kachel in voller Breite der Speisekarte — kein Raster mehr:
   Seit die Kachel DER Abschnitts-Kopf ist, steht je Abschnitt genau eine. */
.section__head--gebaut {
  display: block;
  margin-bottom: 1.4rem;
  padding: 0;
  background: none;
  border-radius: 0;
}
.section__head--gebaut .cat-card { cursor: default; }