/* My Chicken – Genuss: Pimp your Chicken, Dip-Bar, Glut oder Crunch.
   Nur transform/opacity/Masken animiert. Farben in oklch, Weiß darauf mind. 4.5:1. */

/* =====================================================================
   1 · PIMP YOUR CHICKEN
   ===================================================================== */

/* Bühnenfarben je Sorte (Kontrast zu --weiss: 9.9 / 6.9 / 5.3 / 10.4 / 5.9) */
[data-sorte="paniert"] { --farbe: oklch(0.37 0.145 263); --licht: oklch(0.5 0.15 262); }
[data-sorte="my-drip"] { --farbe: oklch(0.45 0.11 148); --licht: oklch(0.58 0.12 140); }
[data-sorte="garlic-parmesan"] { --farbe: oklch(0.53 0.105 78); --licht: oklch(0.66 0.11 84); }
[data-sorte="bbq"] { --farbe: oklch(0.38 0.12 348); --licht: oklch(0.52 0.13 352); }
[data-sorte="buffalo"] { --farbe: oklch(0.52 0.18 36); --licht: oklch(0.62 0.17 46); }

.pimp {
  --bh: clamp(420px, 124vw, 560px);       /* Bühnenhöhe */
  --hh: calc(var(--bh) * 0.71);            /* Hähnchenhöhe */
  background: var(--farbe); color: var(--weiss);
  isolation: isolate; overflow: clip;
}
@media (min-width: 900px) { .pimp { --bh: clamp(540px, 76svh, 720px); --hh: calc(var(--bh) * 0.76); } }

.pimp-grund { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pimp-flut { position: absolute; left: 0; top: 0; width: 100%; background: var(--farbe); will-change: transform; }
.pimp-rand { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; overflow: visible; will-change: transform; filter: blur(1.2px); }
.pimp-kopf, .pimp-fuss { position: relative; z-index: 3; }
.pimp-kopf .lead { color: oklch(0.97 0.01 80); }
.pimp .marke-zeile { color: var(--weiss); }

.pimp-buehne {
  position: relative; z-index: 1; height: var(--bh);
  margin: var(--r3) calc(-1 * var(--rand)) 0;
  overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.pimp-welle { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.pimp-welle.laeuft { will-change: transform; }
.pimp-ebene {
  position: absolute; left: 0; right: 0; top: 0; height: var(--bh);
  background:
    radial-gradient(52% 50% at 50% 58%, var(--licht), transparent 72%),
    var(--farbe);
}
.pimp-welle.laeuft > .pimp-ebene { will-change: transform; }

.pimp-name {
  position: absolute; left: 0; right: 0; top: 4.5%; margin: 0; max-width: none;
  font-family: var(--slab); font-weight: 400; text-transform: uppercase; text-align: center;
  font-size: var(--name-fs, min(21vw, calc(var(--bh) * 0.28))); line-height: 1.02; letter-spacing: -0.01em;
  color: var(--weiss); white-space: nowrap; pointer-events: none;
}
.pimp-name span { display: block; }
.pimp-name.eine-zeile span { display: inline; }
.pimp-name.eine-zeile span + span::before { content: " "; }

/* Karussell: Mitte groß, Nachbarn links und rechts angeschnitten auf ihrer eigenen Bühnenfarbe */
.pimp-spur { position: absolute; inset: 0; }
.pimp-karte {
  position: absolute; bottom: calc(var(--bh) * 0.045);
  left: calc(50% - var(--hh) * 0.439); width: calc(var(--hh) * 0.878); height: var(--hh);   /* 1229 : 1400 */
  transform-origin: 50% 100%;
}
.mit-js .pimp-karte { will-change: transform, opacity; }
.pimp-teller {
  position: absolute; left: -12%; right: -12%; top: 8%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--licht), var(--farbe) 72%, transparent 100%);
  opacity: 0; pointer-events: none;
}
.pimp-schatten {
  position: absolute; left: 16%; right: 16%; bottom: -2.5%; height: 10%;
  background: radial-gradient(closest-side, oklch(0.12 0.03 40 / 0.5), oklch(0.12 0.03 40 / 0.18) 60%, transparent);
  pointer-events: none;
}
.pimp-huhn { position: absolute; inset: 0; }
.pimp-huhn img {
  position: absolute; height: auto; max-width: none;
  filter: drop-shadow(0 18px 22px oklch(0.12 0.03 40 / 0.35));
  -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none;
}
.pimp-karte.nachbar { cursor: pointer; }

/* Pfeile: weiße Kreise am Bühnenrand, nie über der Mitte */
.pimp-pfeil {
  position: absolute; z-index: 6; top: 76%; width: 56px; height: 56px; margin-top: -28px;
  display: grid; place-items: center; border: 0; border-radius: 50%; padding: 0;
  background: var(--weiss); color: var(--farbe);
  box-shadow: 0 10px 24px -10px oklch(0.1 0.02 40 / 0.65), 0 0 0 4px oklch(1 0 0 / 0.18);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .25s var(--aus-quart), color .4s;
}
.pimp-pfeil svg { width: 26px; height: 26px; stroke-width: 2.6; }
.pimp-pfeil.links { left: calc(12px + var(--sicher-links)); }
.pimp-pfeil.rechts { right: calc(12px + var(--sicher-rechts)); }
.pimp-pfeil:active { transform: scale(.94); }
@media (hover: hover) { .pimp-pfeil:hover { transform: scale(1.06); } }
.pimp-pfeil:focus-visible { outline: 3px solid var(--weiss); outline-offset: 3px; border-radius: 50%; }
@media (min-width: 900px) {
  .pimp-pfeil { top: 56%; width: 64px; height: 64px; margin-top: -32px; }
  .pimp-pfeil.links { left: calc(var(--rand) + var(--sicher-links)); }
  .pimp-pfeil.rechts { right: calc(var(--rand) + var(--sicher-rechts)); }
}

/* Wisch-Andeutung (einmal je Sitzung, nur Touch) */
.pimp-wink {
  position: absolute; z-index: 6; left: 50%; bottom: calc(var(--bh) * 0.03);
  display: flex; align-items: center; gap: 8px; padding: 9px 18px 9px 14px; border-radius: var(--rund);
  background: var(--weiss); color: var(--farbe); box-shadow: 0 10px 24px -12px oklch(0.1 0.02 40 / 0.6);
  font-family: var(--eng); font-weight: 800; font-size: 1rem; letter-spacing: 0.08em; text-transform: uppercase;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--aus-quart), transform .4s var(--aus-expo);
}
.pimp-wink.an { opacity: 1; transform: translate(-50%, 0); }
.pimp-wink svg { width: 24px; height: 24px; }

/* Auswahl: runde Glasurtupfer mit Namen */
.pimp-fuss { margin-top: var(--r3); }
.pimp-wahl {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px;
  max-width: 640px; margin: 0 auto;
}
.pimp-tupfer {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  min-height: 44px; padding: 6px 0 4px; border: 0; background: none; color: var(--weiss);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 14px;
}
.pimp-tupfer i {
  display: block; width: 56px; height: 56px; border-radius: 50%;
  background-color: var(--farbe); background-position: 52% 48%; background-size: 280% auto; background-repeat: no-repeat;
  box-shadow: 0 0 0 2px oklch(1 0 0 / 0.42), 0 8px 16px -8px oklch(0.1 0.02 40 / 0.6);
  transition: transform .35s var(--aus-expo), box-shadow .3s;
}
.pimp-tupfer span {
  font-family: var(--eng); font-weight: 700; font-size: 0.86rem; line-height: 1.1;
  letter-spacing: 0.05em; text-transform: uppercase; text-align: center;
  padding-bottom: 5px; background: linear-gradient(currentColor, currentColor) 50% 100% / 0 3px no-repeat;
  transition: background-size .35s var(--aus-expo);
}
.pimp-tupfer[aria-checked="true"] i { transform: scale(1.1); box-shadow: 0 0 0 3px var(--weiss), 0 0 0 7px oklch(1 0 0 / 0.22), 0 12px 22px -8px oklch(0.1 0.02 40 / 0.7); }
.pimp-tupfer[aria-checked="true"] span { background-size: 26px 3px; }
@media (hover: hover) { .pimp-tupfer:hover i { transform: scale(1.06); } .pimp-tupfer[aria-checked="true"]:hover i { transform: scale(1.1); } }
.pimp-tupfer:focus-visible { outline: 3px solid var(--weiss); outline-offset: 2px; }

.pimp-text { display: flex; flex-direction: column; align-items: center; gap: var(--r2); margin-top: var(--r3); text-align: center; }
.pimp-satz { margin: 0; font-size: var(--fs-4); line-height: 1.45; max-width: 36ch; min-height: 2.9em; }
.pimp-satz strong { font-family: var(--eng); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pimp-knopf.knopf.hell { --k-fg: var(--farbe); white-space: nowrap; flex: none; transition: transform .25s var(--aus-quart), color .4s, box-shadow .25s; }

@media (min-width: 560px) {
  .pimp-tupfer i { width: 64px; height: 64px; }
  .pimp-tupfer span { font-size: 0.95rem; }
}
@media (min-width: 900px) {
  .pimp-kopf { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; column-gap: var(--r5); }
  .pimp-kopf .marke-zeile { grid-column: 1 / -1; justify-self: start; }
  .pimp-kopf .lead { margin: 0; justify-self: end; }
  .pimp-fuss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--r5); margin-top: var(--r4); }
  .pimp-wahl { margin: 0; max-width: none; }
  .pimp-text { flex-direction: row; justify-content: flex-end; text-align: left; margin: 0; gap: var(--r4); }
  .pimp-tupfer i { width: 72px; height: 72px; }
}

/* =====================================================================
   2 · DIP-BAR
   ===================================================================== */
.dips { overflow-x: clip; }
.dips .lead { color: var(--weiss); }   /* Weiß auf Markenrot 4.66:1; der hellrosa Ton aus basis.css erreicht nur 4.28:1 */
.dip-bar {
  --becher-b: clamp(118px, 34vw, 150px);   /* Becherbreite mobil */
  --filet-faktor: 1.6923;                   /* Filet 11 cm : Becher 6,5 cm (setzt dips.js aus MCK.masse) */
  position: relative; margin-top: var(--r4);
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "filet" "theke" "info"; row-gap: var(--r2);
}
.dip-filet-buehne { grid-area: filet; position: relative; z-index: 2; padding: 4px 0 0; }
.dip-filet-buehne::before {
  content: ""; position: absolute; left: 50%; top: 46%; width: min(120%, 620px); aspect-ratio: 2.2; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, oklch(0.68 0.2 32 / 0.75), transparent); pointer-events: none;
}
.dip-filet {
  position: relative; width: calc(var(--becher-b) * var(--filet-faktor)); margin: 0 auto; aspect-ratio: 1400 / 694;
  transform-origin: 96.5% 49.7%; will-change: transform;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.dip-filet.zieht { cursor: grabbing; }
.dip-filet img {
  position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none;
  filter: drop-shadow(0 14px 16px oklch(0.25 0.12 27 / 0.45));
  -webkit-user-drag: none; pointer-events: none;
}
.dip-filet img.weg { opacity: 0; }
.dip-filet img { transition: opacity .18s linear; }
.dip-filet-hinweis {
  margin: 10px 0 0; text-align: center; font-family: var(--eng); font-weight: 700; font-size: 0.9rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--weiss); display: flex; justify-content: center; align-items: center; gap: 8px;
}
.dip-filet-hinweis svg { width: 18px; height: 18px; }

/* Tropfen */
.dip-tropfen {
  position: absolute; width: 12px; height: 12px; margin: -2px 0 0 -6px; pointer-events: none; opacity: 0;
  left: var(--tx, 70%); top: var(--ty, 88%);
}
.dip-tropfen::before {
  content: ""; position: absolute; inset: 0; background: var(--sosse, oklch(0.8 0.08 60));
  border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  box-shadow: inset -2px -2px 0 oklch(0 0 0 / 0.14), 0 1px 2px oklch(0.2 0.1 27 / 0.35);
}
.dip-tropfen::after { content: ""; position: absolute; left: 3px; top: 4px; width: 3px; height: 3px; border-radius: 50%; background: oklch(1 0 0 / 0.75); }

/* Info */
.dip-info { grid-area: info; position: relative; z-index: 1; min-width: 0; padding-top: var(--r2); }
.dip-info-zeile { margin: 0 0 6px; font-family: var(--eng); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--weiss); }
.dip-name { font-family: var(--slab); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 9vw, 4.2rem); line-height: 1.02; margin: 0; letter-spacing: -0.005em; }
.dip-beschreibung { margin: 10px 0 0; color: var(--weiss); font-size: 1rem; line-height: 1.5; max-width: 46ch; }
.dip-werte { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 28px; margin-top: var(--r2); }
.dip-wert { display: grid; gap: 4px; }
.dip-wert-titel { font-family: var(--eng); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--weiss); }
.dip-chilis { display: flex; align-items: center; gap: 4px; min-height: 30px; }
.dip-chilis svg { width: 30px; height: 30px; color: var(--weiss); fill: var(--weiss); opacity: 0.3; transform: rotate(-18deg); transition: opacity .3s, transform .35s var(--aus-expo); }
.dip-chilis svg.an { opacity: 1; transform: rotate(-18deg) scale(1.08); }
.dip-chilis b { margin-left: 6px; font-family: var(--eng); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.04em; text-transform: uppercase; }
.dip-preis { font-size: 1.7rem; line-height: 30px; }
.dip-info .knopf { margin-top: var(--r2); }
.dip-info.leer .dip-werte, .dip-info.leer .knopf { visibility: hidden; }

/* Theke mit Bechern */
.dip-theke { grid-area: theke; position: relative; z-index: 3; margin: 0 calc(-1 * var(--rand)); min-width: 0; }
.dip-theke::before {
  /* heller Thekenstreifen */
  content: ""; position: absolute; left: 0; right: 0; top: calc(18px + var(--becher-b) * 0.6); bottom: 0;
  background: linear-gradient(180deg, var(--weiss) 0, var(--papier) 10px, var(--papier-2) 100%);
  box-shadow: 0 -1px 0 oklch(1 0 0 / 0.6), 0 -18px 30px -18px oklch(0.25 0.12 27 / 0.6);
}
.dip-theke::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: repeating-linear-gradient(90deg, var(--rot) 0 14px, var(--weiss) 14px 28px);
}
.dip-reihe {
  position: relative; list-style: none; margin: 0; display: flex; gap: 4px;
  padding: 18px var(--rand) 26px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.dip-reihe::-webkit-scrollbar { display: none; }
.dip-reihe li { flex: none; width: var(--becher-b); scroll-snap-align: start; }
.dip-becher {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%; min-height: 44px; padding: 0 0 4px; border: 0; background: none; color: var(--text);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 14px;
}
.dip-becher-bild { position: relative; display: block; width: 100%; aspect-ratio: 1.12; transition: transform .45s var(--aus-expo); }
.dip-becher-bild::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -3%; height: 12%; z-index: -1;
  background: radial-gradient(closest-side, oklch(0.25 0.03 40 / 0.35), transparent);
}
.dip-becher img {
  position: absolute; left: 0; bottom: 0; width: 100%; height: auto; max-width: none;
  transform-origin: 50% 100%; -webkit-user-drag: none; pointer-events: none;
}
.dip-becher-name {
  font-family: var(--eng); font-weight: 800; font-size: 0.95rem; line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center; min-height: 2.2em; display: flex; align-items: flex-start; justify-content: center;
  padding: 0 2px;
}
.dip-becher[aria-pressed="true"] .dip-becher-bild { transform: translateY(-8px); }
.dip-becher[aria-pressed="true"] .dip-becher-name { color: var(--rot-tief); }
.dip-becher[aria-pressed="true"] .dip-becher-name::after { content: ""; }
.dip-becher.ziel .dip-becher-bild { transform: translateY(-10px) scale(1.05); }
@media (hover: hover) { .dip-becher:hover .dip-becher-bild { transform: translateY(-6px); } }
.dip-becher:focus-visible { outline: 3px solid var(--kohle); outline-offset: 2px; }
.dip-becher-marke {
  position: absolute; left: 50%; bottom: -7px; width: 30px; height: 4px; margin-left: -15px; border-radius: 2px;
  background: var(--rot); transform: scaleX(0); transition: transform .35s var(--aus-expo);
}
.dip-becher[aria-pressed="true"] .dip-becher-marke { transform: scaleX(1); }

@media (min-width: 900px) {
  .dip-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "info filet" "theke theke"; column-gap: var(--r5); align-items: end; }
  .dip-filet-buehne { padding-bottom: var(--r2); }
  .dip-info { padding-top: 0; }
  .dip-beschreibung { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; min-height: 4.5em; }
  .dip-theke { margin: var(--r2) 0 0; }
  .dip-theke::before { border-radius: 6px 6px 0 0; }
  .dip-bar { --becher-b: min(164px, calc((min(100vw, var(--breite)) - 2 * var(--rand)) / 8 - 8px)); }
  .dip-reihe { overflow: visible; display: grid; grid-template-columns: repeat(8, var(--becher-b)); justify-content: space-between; padding: 18px 0 26px; }
  .dip-reihe li { width: auto; }
}

/* =====================================================================
   3 · GLUT ODER CRUNCH
   ===================================================================== */
.glut { --p: 0.5; position: relative; overflow: clip; }
.glut-buehne { padding: var(--abschnitt) 0 calc(var(--abschnitt) * 0.8); }
.glut-kopf { padding: 0 var(--rand); text-align: center; position: relative; z-index: 2; }
.glut-kopf .marke-zeile { color: var(--gold); }
.glut-kopf h2 { font-size: var(--fs-1); }

.glut-vergleich {
  position: relative; margin-top: var(--r4);
  height: clamp(440px, 118vw, min(85svh, 600px));
  overflow: hidden; isolation: isolate; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; cursor: ew-resize;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 900px) { .glut-vergleich { height: clamp(560px, 80svh, 780px); } }

.glut-seite { position: absolute; inset: 0; overflow: hidden; }
.glut-fenster { position: absolute; inset: 0; overflow: hidden; transform: translateX(calc(var(--p) * 100%)); will-change: transform; z-index: 1; }
.glut-fenster > .glut-seite { transform: translateX(calc(var(--p) * -100%)); will-change: transform; }

/* GLUT: dunkle Bühne, Glut von unten */
.glut-seite-glut {
  background:
    radial-gradient(90% 55% at 50% 0%, var(--kohle-2), transparent 70%),
    var(--kohle);
}
.glut-glimmen { position: absolute; inset: 0; pointer-events: none; }
.glut-glimmen::before, .glut-glimmen::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 62%; }
.glut-glimmen::before {
  background:
    radial-gradient(60% 55% at 22% 108%, oklch(0.74 0.17 55 / 0.55), transparent 70%),
    radial-gradient(55% 50% at 62% 112%, oklch(0.6 0.2 35 / 0.6), transparent 72%),
    radial-gradient(120% 70% at 50% 120%, var(--rot-dunkel), transparent 75%);
}
.glut-glimmen::after {
  background:
    radial-gradient(40% 36% at 35% 104%, oklch(0.83 0.15 70 / 0.5), transparent 70%),
    radial-gradient(34% 30% at 74% 106%, oklch(0.74 0.17 55 / 0.45), transparent 70%);
  opacity: 0.55;
}
.glut.sichtbar .glut-glimmen::after { animation: glut-flackern 3.4s ease-in-out infinite alternate; }
@keyframes glut-flackern { 0% { opacity: .4; } 35% { opacity: .85; } 55% { opacity: .55; } 80% { opacity: 1; } 100% { opacity: .6; } }
.glut-funken { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* CRUNCH: rot, Verpackungsstreifen, Krümel */
.glut-seite-crunch {
  background:
    radial-gradient(70% 50% at 50% 40%, oklch(0.63 0.22 30), transparent 75%),
    var(--rot);
}
.glut-streifen {
  position: absolute; left: 0; right: 0; bottom: 0; height: 21%;
  background: repeating-linear-gradient(90deg, var(--weiss) 0 26px, oklch(0.55 0.23 27) 26px 52px);
  box-shadow: inset 0 14px 18px -10px oklch(0.25 0.12 27 / 0.45);
}
.glut-streifen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: oklch(0.47 0.19 27); }
.glut-kruemel { position: absolute; inset: 0; transform: translateX(calc((var(--p) - 0.5) * -36px)); pointer-events: none; }
.glut-kruemel i { position: absolute; display: block; background: var(--k, oklch(0.8 0.13 75)); box-shadow: inset -1px -1px 0 oklch(0.45 0.1 55 / 0.55), 0 2px 3px oklch(0.25 0.12 27 / 0.35); }

/* Inhalt beider Seiten: bleibt im sichtbaren Teil zentriert */
.glut-inhalt {
  position: absolute; top: 0; bottom: 0; width: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%;
  transform: translateX(calc((var(--p) - 0.5) * 100%)); will-change: transform;
}
.glut-seite-glut .glut-inhalt { left: 0; }
.glut-seite-crunch .glut-inhalt { left: 50%; }
.glut-wort {
  margin: 0; max-width: none; font-family: var(--slab); text-transform: uppercase; line-height: 1.02; white-space: nowrap;
  font-size: clamp(2.6rem, 13.5vw, 11rem); transform-origin: 50% 100%;
  will-change: transform; position: relative; z-index: 1;
}
.glut-seite-glut .glut-wort {
  color: var(--gold); transform: scale(calc(0.55 + 0.9 * var(--p)));
  text-shadow: 0 0 34px oklch(0.74 0.17 55 / 0.55);
}
.glut-seite-crunch .glut-wort {
  color: var(--weiss); font-size: clamp(2rem, 10vw, 8.6rem); transform: scale(calc(1.45 - 0.9 * var(--p)));
  text-shadow: 0.05em 0.05em 0 var(--rot-tief);
}
.glut-bild { position: relative; width: calc(76% * var(--mass, 1)); max-width: calc(470px * var(--mass, 1)); will-change: transform; }
.glut-bild img, .glut-bild canvas { width: 100%; height: auto; -webkit-user-drag: none; pointer-events: none; }
.glut-seite-glut .glut-bild {
  transform: rotate(calc((var(--p) - 0.5) * 14deg));
  filter: drop-shadow(0 24px 28px oklch(0.1 0.02 40 / 0.6));
}
.glut-seite-crunch .glut-bild {
  transform: rotate(calc((var(--p) - 0.5) * 8deg));
  filter: drop-shadow(0 22px 22px oklch(0.25 0.12 27 / 0.55));
  margin-bottom: 6%;
}

/* Teiler */
.glut-teiler { position: absolute; inset: 0; z-index: 3; transform: translateX(calc(var(--p) * 100%)); will-change: transform; pointer-events: none; }
.glut-linie { position: absolute; left: -1.5px; top: 0; bottom: 0; width: 3px; background: var(--weiss); box-shadow: 0 0 0 1px oklch(0.17 0.008 40 / 0.18), 0 0 18px oklch(1 0 0 / 0.35); }
.glut-griff {
  position: absolute; left: -40px; top: 50%; width: 80px; height: 80px; margin-top: -40px;
  border-radius: 50%; pointer-events: auto; cursor: grab; touch-action: pan-y;
  filter: drop-shadow(0 10px 18px oklch(0.1 0.02 40 / 0.55));
  transition: transform .35s var(--aus-expo);
}
.glut-griff img { width: 100%; height: 100%; -webkit-user-drag: none; pointer-events: none; }
.glut-griff::before, .glut-griff::after {
  content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border: solid var(--weiss); border-width: 0 0 3px 3px;
}
.glut-griff::before { left: -20px; transform: rotate(45deg); }
.glut-griff::after { right: -20px; transform: rotate(-135deg); }
.glut-vergleich.zieht .glut-griff { transform: scale(1.08); cursor: grabbing; }
.glut-griff:focus-visible { outline: 3px solid var(--weiss); outline-offset: 4px; border-radius: 50%; }

/* Produkte unter den Seiten */
.glut-produkte {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--r3) var(--r2);
  padding: var(--r4) var(--rand) 0; max-width: var(--breite); margin: 0 auto;
}
.glut-liste h3 { font-size: 1.05rem; letter-spacing: 0.12em; margin: 0 0 var(--r2); color: var(--text-hell-2); display: flex; align-items: center; gap: 10px; }
.glut-liste h3::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--seite); flex: none; }
.glut-liste[data-seite="glut"] { --seite: var(--glut); }
.glut-liste[data-seite="crunch"] { --seite: var(--rot); }
.glut-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.glut-produkt {
  display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; text-decoration: none;
  padding: 10px; border-radius: 16px; background: var(--kohle-2); min-height: 44px;
  transition: background-color .2s, transform .3s var(--aus-quart);
}
.glut-produkt:hover { background: var(--kohle-3); }
.glut-produkt:active { transform: scale(.98); }
.glut-produkt-bild { width: 100%; aspect-ratio: 1.45; display: grid; place-items: center; }
.glut-produkt-bild img { max-width: 100%; max-height: 100%; width: auto; height: 100%; object-fit: contain; }
.glut-produkt.ohne-bild .glut-produkt-bild { display: none; }
.glut-produkt-text { display: grid; gap: 2px; min-width: 0; }
.glut-seite-glut .glut-bild.mit-folge { transform: none; }
.glut-produkt-name { font-family: var(--eng); font-weight: 800; font-size: 1.05rem; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase; color: var(--weiss); }
.glut-produkt-preis { font-family: var(--eng); font-weight: 700; font-size: 1rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.glut-hinweis { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 0.92rem; color: var(--text-hell-2); }
.glut-hinweis svg { width: 18px; height: 18px; flex: none; color: var(--glut); }

@media (min-width: 700px) {
  .glut-produkt { grid-template-columns: 92px 1fr; column-gap: 14px; }
  .glut-produkt-bild { aspect-ratio: 1.2; }
}
@media (min-width: 900px) {
  .glut-produkte { column-gap: var(--r5); }
  .glut-produkt { grid-template-columns: 120px 1fr; }
  .glut-liste ul { grid-template-columns: 1fr; }
}

/* ---------- Ruhige Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .dip-becher-bild, .glut-griff, .pimp-pfeil { transition: none; }
  .glut.sichtbar .glut-glimmen::after { animation: none; }
}