/* ════════════════════════════════════════════════════════════════
   Die Schale der Probefassung.

   Geladen NACH shop.css und nur von probe.html. Alles hier hängt an
   `.ist-probe` an der Wurzel — so bleiben Kasse, Warenkorb, alle
   Blätter und die Verfolgung dieselben Bauteile mit denselben Regeln,
   und nur die Anordnung darüber ist neu. Das ist die Bedingung dafür,
   dass ein A/B-Test später EINEN Unterschied misst und nicht zwei.

   Die Bruchstelle zwischen schmal und breit steht wie im ganzen
   Projekt an einer Stelle: 62 rem, ganz unten in dieser Datei.
   ═══════════════════════════════════════════════════════════════ */

/* Rückfallwert bis zur ersten Messung. Gemessen wird in
   `frontend/probe/kopfhoehe.js`, und die Angabe landet als Stilangabe
   am Wurzelelement — deshalb steht sie hier auf `:root` und NICHT auf
   `.ist-probe`: eine Klassenregel schlüge die Wurzelangabe sonst für
   alles innerhalb der Schale. */
:root { --probe-kopf: 76px; }

/* Die Mindesthöhe der Kopfzeile ist eine EIGENE Angabe und ausdrücklich
   nicht `--probe-kopf`. Stünde dort der gemessene Wert, flösse er in
   die Höhe zurück, die er misst: der Beobachter meldet 108, daraus wird
   die Mindesthöhe 108, der Kopf wird höher, der Beobachter meldet mehr.
   Beim ersten Versuch wuchs der Kopf so auf 2466 Pixel. */
:root { --probe-kopfzeile: 58px; }

.ist-probe {
  --probe-spalte: 25rem;
  /* Breiter als die Startseite (74 rem). Der Entwurf nutzt die ganze
     Fensterbreite, und mit der Warenkorbspalte daneben blieben der
     Karte sonst 678 px — gerade zwei Kacheln nebeneinander statt
     vier. Nachgemessen, nicht geschätzt. */
  --breite: 88rem;
}

/* ── Servicezeile ─────────────────────────────────────────────── */

.probe-service {
  background: var(--dunkel);
  color: #F2E7E0;
  font-size: 13px;
}
.probe-service-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 38px; flex-wrap: wrap;
}
.probe-slogan { margin: 0; font-weight: 500; letter-spacing: .01em; }
.probe-service-rechts { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.probe-servicefeld {
  display: inline-flex; align-items: center; gap: 7px;
  color: inherit; text-decoration: none; opacity: .88;
}
.probe-servicefeld b { font-weight: 600; }
.probe-servicefeld span + span::before { content: ' · '; opacity: .5; }
a.probe-servicefeld:hover { opacity: 1; text-decoration: underline; }
.probe-versprechen { display: flex; gap: 18px; }
.probe-versprechen span { display: inline-flex; align-items: center; gap: 6px; opacity: .8; }
.probe-versprechen .sinnbild { color: var(--gold); }

/* ── Kopfzeile ────────────────────────────────────────────────── */

.probe-kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  box-shadow: var(--schatten);
}
.probe-kopf-innen {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--probe-kopfzeile); padding-block: 9px;
  /* Nicht umbrechen: bricht die Zeile, wächst der Kopf, und
     `--probe-kopf` stimmt nicht mehr — daran hängt der klebende
     Abstand der Kategorienleiste und das Sprungziel der Abschnitte.
     Was nicht passt, wird schmaler oder weicht der Medienabfrage. */
  flex-wrap: nowrap;
}

.probe-marke {
  display: flex; align-items: center; gap: 10px; flex: none;
  text-decoration: none; color: inherit;
}
.probe-marke .logo-rund { border-radius: 50%; }
.probe-marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.probe-marke-text b { font-size: 19px; color: var(--akzent); letter-spacing: -.01em; white-space: nowrap; }
.probe-marke-text span {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--leise); white-space: nowrap;
}

.probe-werkzeuge { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.probe-rund,
.probe-konto {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--linie); background: var(--flaeche);
  border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 14px;
  color: var(--text); cursor: pointer;
  transition: border-color var(--takt), background var(--takt);
}
.probe-rund { padding: 9px; }
.probe-rund:hover,
.probe-konto:hover { border-color: var(--linie-satt); background: var(--flaeche-2); }
.probe-konto.ist-an { border-color: var(--akzent); color: var(--akzent); }

.probe-korb {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; background: var(--flaeche-2); border-radius: 999px;
  padding: 9px 16px 9px 12px; font: inherit; font-size: 15px;
  color: var(--text); cursor: pointer;
  transition: background var(--takt), transform var(--takt);
}
.probe-korb:hover { background: var(--flaeche-3); }
.probe-korb.hat-inhalt { background: var(--akzent); color: var(--auf-akzent); }
.probe-korb.hat-inhalt:hover { background: var(--akzent-hell); }
.probe-korb.hupft { animation: probe-hupf 620ms ease; }
.probe-korb-zeichen { position: relative; display: inline-flex; }
.probe-korb-zeichen .zahl {
  position: absolute; top: -7px; right: -9px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: grid; place-items: center;
  background: var(--gold); color: var(--auf-gold);
  border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1;
}
@keyframes probe-hupf {
  0%, 100% { transform: none; }
  30% { transform: translateY(-4px) scale(1.05); }
  60% { transform: translateY(0) scale(.99); }
}

/* ── Held ─────────────────────────────────────────────────────── */

.probe-held {
  position: relative;
  border-radius: var(--rund); margin-top: 18px;
  background:
    radial-gradient(120% 140% at 82% 0%, rgba(242,179,61,.20), transparent 58%),
    linear-gradient(122deg, var(--dunkel) 0%, var(--band-2) 46%, var(--akzent) 100%);
  color: #FFF6F1;
  overflow: hidden;
}
/* Bildebene: eine je Werbeband, alle über der ganzen Karte, und es
   blendet über. Läge das Bild in der Rolle, bedeckte es nur den
   Textbereich und unter den Merkmalen liefe ein Streifen Verlauf mit —
   eine Naht quer durch den Kopf. */
.probe-held-bild {
  position: absolute; inset: 0;
  background-image: var(--held-bild);
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 620ms ease;
}
.probe-held-bild.ist-an { opacity: .55; }

/* ── Ken Burns ────────────────────────────────────────────────────
   Das Bild steht auf `cover`, ist also beschnitten — bei einem
   Querformat über einer flachen Karte fehlt oben und unten das meiste.
   Statt es kleiner zu rechnen (dann liefe an den Seiten der Verlauf
   mit), fährt es langsam zurück: Es beginnt um 16 % vergrößert und
   endet bei 1. Der Ausschnitt wird also über die Standzeit hinweg
   weiter, und man sieht Stück für Stück mehr.

   Nicht weiter als bis 1 — darunter wäre die Karte breiter als das
   Bild und an den Rändern käme der Hintergrund zum Vorschein.

   Die Animation hängt an `.ist-an`, nicht am Element: So beginnt sie
   jedes Mal von vorn, wenn ein Blatt nach vorn kommt, und wer eine
   Runde später wieder hier landet, sieht dieselbe Fahrt und nicht ein
   längst ausgelaufenes Standbild.

   9 s bei 7 s Standzeit: Die Fahrt ist noch im Gang, wenn übergeblendet
   wird. Das ist Absicht — ein Bild, das zwei Sekunden lang stillsteht,
   bevor es geht, wirkt hängengeblieben. Hält die Rolle an, weil jemand
   hinsieht, läuft sie aus und bleibt beim normalen Ausschnitt stehen. */
@media (prefers-reduced-motion: no-preference) {
  .probe-held-bild.ist-an { animation: held-fahrt 9s ease-out forwards; }
  @keyframes held-fahrt {
    from { transform: scale(1.16); }
    to   { transform: scale(1); }
  }
  /* Drei Ursprünge im Wechsel. Beim Zurückfahren wandert der
     Bildinhalt vom Ursprung weg — jedes Blatt bekommt so seine eigene
     Richtung, statt dass dreimal dieselbe Bewegung läuft. Die
     Bildebenen sind die einzigen `span` in der Karte, `nth-of-type`
     zählt also genau sie. */
  .probe-held-bild:nth-of-type(3n+1) { transform-origin: 32% 38%; }
  .probe-held-bild:nth-of-type(3n+2) { transform-origin: 68% 60%; }
  .probe-held-bild:nth-of-type(3n+3) { transform-origin: 50% 22%; }
}

/* Das Streumuster ersetzt das fehlende Foto — gezeichnet, nicht
   geladen: dieses Projekt holt keine Bilder von fremden Servern. */
.probe-held::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 26%, rgba(255,255,255,.09) 2px, transparent 2.4px),
    radial-gradient(circle at 63% 71%, rgba(255,255,255,.07) 2px, transparent 2.4px),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.06) 3px, transparent 3.4px);
  background-size: 190px 150px, 240px 190px, 300px 240px;
}
/* Über einem Foto braucht die Schrift etwas mehr Grund unter sich. */
.probe-held.hat-bild::after { background-color: rgba(42,29,24,.30); }

.probe-held-buehne { position: relative; z-index: 1; }

.probe-held-rolle {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.probe-held-rolle::-webkit-scrollbar { display: none; }
.probe-held-blatt {
  flex: 0 0 100%; min-width: 0; scroll-snap-align: start;
  /* Gleiche Mindesthöhe für alle Blätter: sonst springt die Karte,
     sobald ein Band eine Unterzeile hat und das nächste nicht. */
  /* Höher als für den Text nötig: das Bild soll zu sehen sein, nicht
     nur als Grund unter der Schrift durchschimmern. Der Text steht
     oben, der Knopf unten — dazwischen bleibt Bild. */
  min-height: clamp(200px, 20vw, 340px);
  padding: clamp(24px, 3.4vw, 44px) clamp(22px, 3.5vw, 46px) 0;
}

.probe-held-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #FFF6F1;
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: background var(--takt);
}
.probe-held-pfeil:hover { background: rgba(255,255,255,.3); }
.probe-held-pfeil.links  { left: 10px; }
.probe-held-pfeil.rechts { right: 10px; }

.probe-held-marke {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .19em;
  text-transform: uppercase; opacity: .75;
}
/* Gilt für das <h1> des ersten Blattes UND für die <p> der weiteren.
   Genau diese Regel ging beim Umbau auf die Rolle verloren: dann trug
   nur das <h1> seine Browservorgabe — 2em und fett — und alle anderen
   Blätter sahen aus wie Fließtext. */
.probe-held-titel {
  margin: 0; font-size: clamp(1.75rem, 4.4vw, 2.9rem); line-height: 1.05;
  letter-spacing: -.03em; font-weight: 800; text-transform: uppercase;
}
.probe-held-titel em {
  display: inline-block; font-style: normal; text-transform: none;
  font-weight: 500; letter-spacing: -.01em; color: var(--gold);
  font-size: .78em; transform: rotate(-2.5deg);
}
.probe-held-unter { margin: 12px 0 0; font-size: 16px; opacity: .9; max-width: 44ch; }

.probe-held-fest {
  position: relative; z-index: 1;
  padding: 4px clamp(22px, 3.5vw, 46px) clamp(20px, 3vw, 34px);
}
.probe-held-zeile {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 12px 16px;
}

.probe-held-punkte { margin-left: auto; display: flex; gap: 7px; }
.probe-held-punkt {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.34); cursor: pointer;
  transition: background var(--takt), transform var(--takt);
}
.probe-held-punkt:hover { background: rgba(255,255,255,.6); }
.probe-held-punkt.ist-an { background: var(--gold); transform: scale(1.25); }

.probe-held-knopf { flex: none; }
.probe-held-zu {
  margin: 0; font-size: 14px;
  background: rgba(0,0,0,.34); border-radius: 999px;
  padding: 8px 16px;
}

/* ── Körper: Karte und Spalte ─────────────────────────────────── */

/* Unten wenig Luft: Darunter folgen die drei Bänder, die selbst schon
   einen eigenen Abstand mitbringen. Zusammen mit dem Fuß der Karte
   standen hier auf dem Telefon fast zwei Fingerbreit Leere zwischen
   dem Kennzeichnungshinweis und dem ersten Band. */
.probe-koerper { padding-block: 22px 10px; }
.ist-probe .shopkoerper { display: contents; }
.probe-haupt { min-width: 0; }
.probe-karte-schmal { margin-bottom: 18px; }

/* ── Bestellkarte ─────────────────────────────────────────────── */

.probe-bestellkarte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 16px; box-shadow: var(--schatten);
}
.probe-karte-kopf {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; margin-bottom: 12px;
}
.probe-karte-kopf .sinnbild { color: var(--akzent); }
.probe-karte-kopf.ist-korb { margin-bottom: 4px; }
.probe-korbanzahl { margin-left: auto; font-weight: 400; color: var(--leise); font-size: 13px; }

/* Zwölf Spalten, damit beide Zeilen ihre eigenen Verhältnisse bekommen.
   Vorher standen hier zwei Spalten „1fr 74px": weil PLZ und Ort in der
   zweiten Zeile stehen, erbte die fünfstellige Postleitzahl die breite
   Spalte und der Ortsname die schmale — genau verkehrt herum.

   Vier gleiche Spalten wären der naheliegende nächste Griff und auf dem
   Telefon um sechs Pixel zu eng: „06886" wurde hinter der letzten Ziffer
   abgeschnitten. Nachgemessen bei 390 px, nicht überschlagen. */
.probe-adressfelder {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; margin-top: 12px;
  min-width: 0;
}
.probe-adressfelder .strasse { grid-column: span 9; }
.probe-adressfelder .nr      { grid-column: span 3; }
.probe-adressfelder .plz     { grid-column: span 4; }
.probe-adressfelder .ort     { grid-column: span 8; }
.probe-adressfelder .feld    { min-width: 0; }
.probe-bestellkarte .zonenstand { margin-top: 10px; font-size: 13.5px; }

.probe-zeitwahl {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie);
}
.probe-zeitwahl.ist-noetig .probe-karte-kopf { color: var(--gold-tief); }
.probe-zeitwahl.ist-noetig .probe-karte-kopf .sinnbild { color: var(--gold-tief); }
.probe-zeitfelder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.probe-feldpaar { display: flex; flex-direction: column; gap: 5px; }
.probe-feldname { font-size: 12px; color: var(--leise); font-weight: 600; }

/* ── Warenkorbspalte ──────────────────────────────────────────── */

.probe-spalte { display: none; }
.probe-spalte-korb {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 16px; box-shadow: var(--schatten);
}
.probe-spalte .warenkorb,
.probe-spalte .warenkorb-leer { padding: 0; }
/* Der Pfeil gehört zur Anordnung, nicht zum Baustein: der Knopf im
   Warenkorb ist derselbe wie im Blatt der Startseite. */
.probe-spalte .knopf-haupt.breit::after { content: ' →'; }

/* ── Kategorienleiste ─────────────────────────────────────────── */

.ist-probe .kartenkopf {
  top: var(--probe-kopf);
  padding-block: 10px;
  border-bottom: 1px solid var(--linie);
}
/* Beide Summanden werden gemessen, nicht gesetzt: die Kopfhöhe in
   `kopfhoehe.js`, die Leistenhöhe in `Kategoriereiter.jsx`. Ein
   angesprungener Abschnitt landet damit exakt an der Unterkante der
   Leiste — derselben Linie, an der der Mitlauf entscheidet. Die
   Rückfallwerte gelten nur bis zur ersten Messung. */
.ist-probe .kategorieblock {
  scroll-margin-top: calc(var(--probe-kopf) + var(--probe-leiste, 150px));
}

.probe-reiter {
  display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 2px;
}
.probe-reiter::-webkit-scrollbar { display: none; }
.probe-reiter-kachel {
  flex: 0 0 auto; width: 124px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  border: 1px solid transparent; background: transparent;
  border-radius: var(--rund); padding: 10px 8px;
  font: inherit; color: var(--leise); cursor: pointer;
  transition: background var(--takt), color var(--takt), border-color var(--takt);
}
.probe-reiter-kachel:hover { background: var(--flaeche-2); color: var(--text); }
.probe-reiter-zeichen {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--flaeche-2); color: var(--leise);
  transition: background var(--takt), color var(--takt);
}
.probe-reiter-name {
  font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center;
  /* Umbrechen statt abschneiden: „Knusprig gebackene Ente mit
     Duftreis" mit drei Punkten am Ende beantwortet die Frage nicht,
     für die diese Leiste da ist. Drei Zeilen, weil zwei bei diesen
     Namen genau wieder auf Auslassungspunkte hinausliefen — nachgesehen,
     nicht geschätzt. Der lange Wortteil darf notfalls brechen, damit
     „Bratnudeln" nicht über den Rand steht. */
  hyphens: auto; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.probe-reiter-kachel.ist-an { color: var(--akzent); border-color: var(--akzent-weich); background: var(--akzent-weich); }

/* Der Kreis der aktiven Kategorie trägt denselben fließenden Rand wie
   die aktive Pille auf `/`. Die Mechanik steht in `shop.css` unter
   `.metall`: ein drehender Kegelverlauf im `::before`, davor ein
   `::after` mit 2 px Abstand, das die Füllung trägt.

   `background: transparent` ist deshalb Absicht und kein Versehen —
   der Verlauf liegt über dem eigenen Hintergrund des Elements, und
   eine Farbe darunter wäre nur eine Angabe, die nie zu sehen ist.
   Genau so steht es auch bei `.kategorie.ist-an`. Die Füllung kommt
   aus dem `::after` darunter. */
.probe-reiter-kachel.ist-an .probe-reiter-zeichen {
  background: transparent; color: var(--auf-akzent);
}
.probe-reiter-zeichen.metall::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0) 42%),
              linear-gradient(180deg, var(--knopf-oben) 0%, var(--knopf-unten) 100%);
}

/* ── Artikelkacheln: Bild oben statt links ────────────────────── */

.ist-probe .artikelliste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.ist-probe .artikel {
  flex-direction: column; align-items: stretch; height: 100%;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--flaeche); overflow: hidden; padding: 0;
  box-shadow: var(--schatten);
  transition: box-shadow var(--takt), transform var(--takt);
}
.ist-probe .artikel:hover { box-shadow: var(--schatten-2); transform: translateY(-2px); }
.ist-probe .artikel-bildflaeche {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 0;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--flaeche-2), var(--flaeche-3));
  color: var(--linie-satt);
}
.ist-probe .artikel-bild { width: 100%; height: 100%; object-fit: cover; }
.ist-probe .artikel-inhalt { display: flex; flex-direction: column; flex: 1; padding: 13px 14px 14px; gap: 8px; }
.ist-probe .artikel-fuss { margin-top: auto; }
.ist-probe .artikel-preis { font-size: 18px; font-weight: 700; color: var(--akzent); }

/* Das Abzeichen der beliebtesten Gerichte. */
.ist-probe .artikel-abzeichen {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--akzent); color: var(--auf-akzent);
  border-radius: 999px; padding: 4px 11px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  box-shadow: var(--schatten);
}
.ist-probe .artikel-abzeichen.ist-beliebt { background: var(--gold); color: var(--auf-gold); }
.ist-probe .artikel { position: relative; }

/* ── Beliebteste Gerichte ─────────────────────────────────────── */

.probe-beliebt { margin-bottom: 30px; }
.probe-beliebt-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.probe-beliebt-kopf h2 {
  display: flex; align-items: center; gap: 9px;
  margin: 0; font-size: 23px; letter-spacing: -.02em;
}
.probe-beliebt-kopf h2 .sinnbild { color: var(--gold); }
.probe-beliebt-kopf .verweis {
  margin-left: auto; border: 0; background: none; font: inherit;
  color: var(--akzent); font-weight: 600; cursor: pointer;
}
.probe-beliebt-kopf .verweis:hover { text-decoration: underline; }
.probe-beliebt-unter { margin: 0 0 14px; color: var(--leise); font-size: 14px; }

/* ── Bänder am Fuß ────────────────────────────────────────────── */

.probe-baender {
  display: grid; grid-template-columns: 1fr; gap: 12px; margin: 4px 0 34px;
}
/* Verlauf und Schein statt flacher Fläche: Die Bänder stehen am Ende
   einer langen Karte zwischen vielen gleichförmigen Kacheln und sollen
   dort auffallen. Jedes Band leitet alles aus EINER Farbe ab (`--ton`),
   die Kante, Schein und Symbolhof bekommen sie per `color-mix` — so
   greift dieselbe Regel in hell und dunkel, ohne Töne doppelt zu
   pflegen. Der Verlauf läuft nur zwischen Grundfläche und einem Hauch
   Farbe; die Schrift bleibt auf jeder Stelle so lesbar wie vorher. */
.probe-band {
  --ton: var(--akzent);
  --grund: var(--akzent-weich);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--rund); padding: 16px 18px;
  background: linear-gradient(125deg,
    color-mix(in srgb, var(--ton) 20%, var(--grund)) 0%,
    var(--grund) 58%,
    color-mix(in srgb, var(--ton) 9%, var(--grund)) 100%);
  border: 1px solid color-mix(in srgb, var(--ton) 30%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ton) 6%, transparent),
    0 10px 30px -12px color-mix(in srgb, var(--ton) 55%, transparent);
  transition: box-shadow .25s ease, border-color .25s ease;
}
/* Ein weicher Lichtfleck oben links, als fiele Licht auf die Karte. */
.probe-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--ton) 22%, transparent), transparent 55%);
}
.probe-band:hover {
  border-color: color-mix(in srgb, var(--ton) 50%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ton) 12%, transparent),
    0 12px 38px -10px color-mix(in srgb, var(--ton) 70%, transparent);
}
.probe-band-zeichen {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ton) 24%, transparent), color-mix(in srgb, var(--ton) 8%, transparent) 70%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--ton) 38%, transparent);
}
.probe-band-text { display: flex; flex-direction: column; line-height: 1.3; }
.probe-band-text b { font-size: 16px; }
.probe-band-text span { font-size: 13.5px; opacity: .85; }
.probe-band.ist-warm { color: var(--akzent); }
.probe-band.ist-gruen { --ton: var(--gut); --grund: var(--gut-weich); color: var(--gut); }
/* Das dritte Band bleibt dunkel, bekommt aber das warme Rot als
   Schein — sonst wäre es das einzige ohne Farbe. */
.probe-band.ist-dunkel { --ton: var(--akzent-hell); --grund: var(--dunkel); color: #F2E7E0; }
.probe-band.ist-dunkel .probe-band-zeichen { color: var(--akzent-hell); }

/* Der Symbolhof atmet langsam — genug, dass der Blick hängen bleibt,
   zu ruhig, um beim Lesen zu stören. Versetzt, damit nicht alle drei
   im Gleichtakt pulsieren. */
@media (prefers-reduced-motion: no-preference) {
  .probe-band-zeichen { animation: band-schein 4.5s ease-in-out infinite; }
  .probe-band:nth-child(2) .probe-band-zeichen { animation-delay: -1.5s; }
  .probe-band:nth-child(3) .probe-band-zeichen { animation-delay: -3s; }
  @keyframes band-schein {
    0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, var(--ton) 28%, transparent); }
    50%      { box-shadow: 0 0 26px color-mix(in srgb, var(--ton) 55%, transparent); }
  }
}

/* ── Kasse als eigene Seite ───────────────────────────────────── */
/*
   Gilt nur breit. Die Schale montiert die Kassenseite gar nicht erst,
   wenn der Breitenfühler unten „schmal" meldet — schmal bleibt es das
   Blatt von unten. Diese Regeln brauchen deshalb keine eigene
   Medienabfrage: unter 62 rem gibt es kein Element, an dem sie
   greifen könnten.
*/
.probe-kassenkopf {
  position: sticky; top: 0; z-index: 30;
  background: var(--flaeche); border-bottom: 1px solid var(--linie);
}
/* Drei Spalten statt Flex mit `margin: auto`: die Marke soll in der
   MITTE der Seite stehen und nicht in der Mitte des Rests, der links
   und rechts übrig bleibt. Mit einem Knopf links und zwei Dingen
   rechts wäre sie sonst sichtbar nach links verrutscht. */
.probe-kassenkopf-innen {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; min-height: var(--probe-kopfzeile); padding-block: 10px;
}
.probe-kassenwerkzeuge {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
}
.probe-zurueck {
  display: inline-flex; align-items: center; gap: 7px; justify-self: start;
  background: none; border: 0; padding: 8px 10px 8px 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--leise);
}
.probe-zurueck:hover { color: var(--akzent); }

/* Die Marke ist hier bewusst KEIN Verweis. Von der Kasse führt genau
   ein Weg zurück, und der steht links; ein zweiter Ausgang, der
   aussieht wie ein Logo, kostet Bestellungen. */
.probe-kassenmarke {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px;
}
.probe-kassensicher {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--gut);
}
.probe-kassentitel {
  margin: 26px 0 18px; font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -.02em;
}

.kassenseite {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--probe-spalte);
  align-items: start; gap: 26px; padding-bottom: 48px;
}
.kassenspalte {
  display: flex; flex-direction: column; gap: 22px; min-width: 0;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); padding: 20px; box-shadow: var(--schatten);
}

/* Die Zusammenfassung bleibt beim Scrollen stehen: links liegen fünf
   Abschnitte, und wer unten die Zahlart wählt, soll oben weiter sehen,
   was er dafür bezahlt. Mit eigenem Überlauf — sonst wüchse eine
   Bestellung mit zwölf Positionen unten aus dem Bild und nähme den
   Bestellknopf mit. */
.kassenspalte.ist-summe {
  position: sticky; top: calc(var(--probe-kopfzeile) + 26px);
  max-height: calc(100vh - var(--probe-kopfzeile) - 52px);
  overflow-y: auto; scrollbar-width: thin;
}
/* Im Blatt hebt sich die Übersicht als getönter Kasten vom Formular
   ab. Hier IST die Spalte die Übersicht — ein Kasten im Kasten wäre
   nur eine zweite Kante. */
.kassenseite .bestelluebersicht { background: none; padding: 0; }

/* Der Fühler für die Anordnung. Was er tut, steht in
   `frontend/probe/breite.js`; wichtig ist hier nur: er bekommt weder
   `position: fixed` noch einen festen Elternteil, denn bei beidem ist
   `offsetParent` ebenfalls null und die Antwort wäre immer „schmal". */
.probe-breitfuehler { display: none; }

/* ── Schmal: alles unter 62 rem ───────────────────────────────── */

@media (max-width: 61.99rem) {
  /* Die Servicezeile trägt nichts, was man zum Bestellen braucht.
     Auf dem Telefon ist jeder Streifen über der Karte ein Streifen
     weniger Karte. */
  .probe-service { display: none; }

  :root { --probe-kopf: 60px; }
  .probe-kopf-innen { gap: 8px; padding-block: 8px; }
  .probe-konto span { display: none; }
  .probe-konto { padding: 9px; }
  .probe-marke-text span { display: none; }
  .probe-korb b { display: none; }
  .probe-korb { padding: 9px 12px; }

  /* Auf dem Telefon ist der Bildschirm hoch und schmal: dieselbe
     Höhe wie am Rechner drückte die Karte aus dem Bild. */
  .probe-held-blatt { min-height: clamp(150px, 38vw, 210px); }
  .probe-reiter-kachel { width: 104px; }
  .probe-reiter-zeichen { width: 40px; height: 40px; }
  .ist-probe .artikelliste { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* ── Breit: ab 62 rem ─────────────────────────────────────────── */

@media (min-width: 62rem) {

  /* DIE Weiche. Über dieser Breite steht der Warenkorb offen in der
     Spalte — dann darf weder die Pille unten rechts noch die
     Bestellkarte über der Speisekarte ein zweites Mal dasselbe
     anbieten. Der Korbknopf im Kopf bleibt: er scrollt hierher,
     statt ein Blatt zu öffnen (siehe Probekopf.jsx). */
  .ist-probe .korbleiste { display: none; }
  .probe-karte-schmal { display: none; }

  /* Und das ist die Stelle, an der die Kasse zur eigenen Seite wird:
     ab hier meldet der Fühler „breit". */
  .probe-breitfuehler { display: block; width: 0; height: 0; }

  .probe-koerper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--probe-spalte);
    align-items: start; gap: 26px;
    padding-bottom: 36px;
  }
  .probe-spalte {
    display: flex; flex-direction: column; gap: 14px;
    position: sticky; top: calc(var(--probe-kopf) + 16px);
    max-height: calc(100vh - var(--probe-kopf) - 32px);
    overflow-y: auto; scrollbar-width: thin;
  }

  .probe-baender { grid-template-columns: repeat(3, 1fr); }
  /* Text von der rechten Bildhälfte weghalten — dort steht auf
     einem Foto meistens das Motiv. */
  .probe-held-blatt > * { max-width: 64%; }
}

@media (min-width: 83rem) {
  .ist-probe { --probe-spalte: 26.5rem; }
}

/* Bewegung ist Zierde, nicht Bedeutung. */
@media (prefers-reduced-motion: reduce) {
  .probe-korb.hupft { animation: none; }
  .ist-probe .artikel:hover { transform: none; }
}