/* Chat Tower Companion -- pages/shop.css
 * ui-557: Shop-Tab-Rahmen (Angebot des Tages voll; Saison-Pass/Hexa-Club
 * waren zunaechst "kommt in Kuerze"-Einhaenge-Stellen, seit ui-556/ui-558
 * beide verdrahtet -- die reine Rahmen-/Sub-Nav-Optik unten bleibt
 * unveraendert, die eigentlichen Kaufsicht-Klassen (`.club-*`/`.sp-shop-*`)
 * leben in pages/achievements.css, s. dortiger Kommentar). Design-Quelle:
 * Prototyp `.claude/sprint/prototypes/season-pass.html` (`?view=offer`),
 * Klassen-Namen weitgehend 1:1 uebernommen -- ABER: Karten-Optik selbst
 * kommt NICHT aus eigenen `.flip-front`-Farb-/Gradient-Regeln (wie im
 * Prototyp), sondern WIEDERVERWENDET die echte `.cs-card`/`.cs-card-*`-
 * Familie + `.cs-do-grid` (beide oben in components.css) -- Ticket-Lock
 * "kein Fork der Karten-Optik". Nur die 3D-Flip-Mechanik selbst
 * (`.flip-slot`/`.flip-inner`/`.flip-face`) ist neu, weil es dafuer noch
 * keine Entsprechung im Bestand gab.
 *
 * Kaskaden-Lock: keine Abhaengigkeit zu Nachbar-Dateien (eigener
 * shop-/pack-/flip-/offer- Namensraum, s. layout.js Link-Reihenfolge-
 * Kommentar) -- Position zwischen dashboard.css und shared-mobile.css ist
 * daher unkritisch.
 *
 * Karten-Grid: `.pack-cards` traegt `.cs-do-grid` IMMER direkt (SSR-Markup,
 * views/shop.js) -- responsive `repeat(auto-fill, minmax(122px, 1fr))`
 * kommt von DORT, keine eigene Grid-Regel hier noetig (bei ~375px
 * Viewport-Breite ergeben sich daraus automatisch 2 Spalten, Ticket-AK).
 * ui-575: Vor-Reveal- UND aufgedeckter Zustand teilen sich seither dasselbe
 * `.pack-cards`-Element OHNE Zwei-Layer-Aufbau (der vormalige ui-562-
 * Spread/Fan-Crossfade -- `.pack-cards-spread`/`.pack-cards-stack` -- ist
 * ERSATZLOS entfallen, s. "Einzel-Interaktion (ui-575 AK1/AK2)"-Abschnitt
 * unten + web/spec/monetarisierung.md § "Pack-Reveal Karte-für-Karte"). */

/* ---------- Shop-Sub-Navigation (Angebot/Saison-Pass/Club) ----------
   ui-628: `.shop-subnav`/`.shop-subtab` bleiben die Desktop-Basisregeln
   (Lock 3, unveraendert); die Markup-Stelle (views/shop.js) traegt daneben
   `subnav subnav-seg`/`subnav-seg-btn` (Lock 1 "ein Muster", immer 3
   Eintraege -> Lock 6 -> Segment). Die geteilten `.subnav.subnav-seg`-Regeln
   (components.css) haben hoehere Spezifitaet (0,2,0) und schalten ≤600px
   auf die Segment-Optik um, OHNE dass diese Basisregeln hier angefasst
   werden. */
.shop-panel { display: flex; flex-direction: column; gap: var(--sp-l); }
.shop-subnav { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.shop-subtab {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.5em 0.95em; min-height: 44px;
  border-radius: 99px; border: 1px solid var(--line-2);
  background: none; color: var(--muted);
  font-size: var(--fs-small); font-weight: 700; font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.shop-subtab--active { color: var(--bg); background: var(--cyan); border-color: var(--cyan); }
/* ui-573: Hover-Kanon nach .ach-scope-tab-Vorbild (achievements.css) --
   OHNE eigene :hover-Regeln erbte die Pille den generischen
   `button:hover:not(:disabled)` (base.css: border-color/color cyan,
   KEIN background) -- auf der bereits aktiven Pille (permanent cyan
   gefuellter Hintergrund via .shop-subtab--active) ueberschrieb das den
   Text auf ebenfalls cyan: cyan auf cyan, unlesbar (PTR-Fund Fifty,
   Hexa-Club-Pille). Per CDP (CSS.getMatchedStylesForNode) verifiziert:
   `button:hover:not(:disabled)` hat Spezifitaet (0,2,1) -- ein woertlich
   vom Vorbild uebernommenes `.shop-subtab--active:hover` allein waere nur
   (0,2,0) (Klassen-Spalte gleich, Element-Spalte 0<1) und würde GEGEN den
   generischen Button-Hover verlieren, unabhaengig von der Ladereihenfolge
   (Kaskade vergleicht Spalte fuer Spalte, IDs->Klassen->Elemente -- ein
   Unentschieden in der Klassen-Spalte wird durch die Element-Spalte
   entschieden, nicht durch Quellreihenfolge). Derselbe CDP-Check bestaetigt:
   GENAU dieses Muster ist im Vorbild `.ach-scope-tab--active:hover`
   (achievements.css) bereits vorhanden und daher SELBST unwirksam (toter
   Override, button:hover gewinnt dort ebenfalls) -- dort unveraendert
   gelassen (Read-Only-Vorbild, kein Fix-Scope hier). Der doppelte
   Klassen-Selektor unten (.shop-subtab.shop-subtab--active) hebt die
   Klassen-Spalte auf 3 an und gewinnt dadurch GARANTIERT, unabhaengig von
   Datei-Ladereihenfolge -- kein Wettlauf mit base.css. Die INAKTIVE Regel
   direkt darunter braucht diesen Kniff nicht: `:not(.shop-subtab--active)`
   zaehlt bereits als eigene Klassen-Spezifitaet (0,3,0), schlaegt den
   generischen Button-Hover ebenfalls sauber. */
.shop-subtab:hover:not(.shop-subtab--active) {
  border-color: var(--cyan);
  color: var(--text);
  background: rgba(56, 225, 255, 0.08);
}
.shop-subtab--active:hover,
.shop-subtab.shop-subtab--active:hover {
  background: var(--cyan);
  color: var(--bg);
}
/* ui-374/ui-377-Kanon: Saison-Pass/Hexa-Club-Pillen tragen echte SVG-Icons
   statt literaler ◈/⬡-Zeichen (views/shop.js) — Wrapper zentriert das
   1em-skalierte Icon (svg.cur-ic--text, components.css) in der Flex-Zeile. */
.shop-subtab-icon { display: inline-flex; align-items: center; }
.panel-title .shop-subtab-icon { margin-right: 0.15em; }
.shop-subtab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.3em; height: 1.3em; padding: 0 0.35em;
  background: var(--orange); color: var(--bg);
  border-radius: 99px; font-size: var(--fs-caption); font-weight: 800;
}
.shop-subtab-badge--hidden { display: none; }
.shop-sub-panel { display: none; }
.shop-sub-panel--active { display: block; }

/* ---------- Angebot-Kopf ---------- */
.offer-head {
  display: flex; flex-wrap: wrap; gap: var(--sp-l); align-items: flex-start; justify-content: space-between;
  background: linear-gradient(135deg, #131a35 0%, #0d1322 70%);
  border: 1px solid var(--line-2); border-radius: 12px; padding: var(--sp-l);
}
.offer-head-right { display: flex; flex-direction: column; gap: var(--sp-xs); align-items: flex-end; }
.oh-reset { font-size: var(--fs-small); color: var(--text-dim); }
.oh-countdown { font-variant-numeric: tabular-nums; color: var(--yellow); font-weight: 700; }
.btn-flipall {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: none; border: 1px solid var(--cyan); color: var(--cyan);
  border-radius: 9px; padding: 0.5em 1em; font-size: var(--fs-small); font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.btn-flipall:hover { background: rgba(56, 225, 255, 0.08); }
.btn-flipall:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Gast-Gate + Zweiter-Kauf-Hinweis ---------- */
.shop-guest-gate {
  border: 1px solid var(--cyan); border-radius: 10px; padding: var(--sp-m) var(--sp-l);
  background: rgba(56, 225, 255, 0.05); font-size: var(--fs-small); line-height: 1.5;
}
.shop-guest-gate b { color: var(--cyan); }
.offer-second-hint {
  display: flex; align-items: center; gap: var(--sp-m); flex-wrap: wrap;
  border: 1px dashed var(--line-2); border-radius: 10px; padding: var(--sp-s) var(--sp-l);
  color: var(--text-dim); font-size: var(--fs-small); line-height: 1.5;
}
.offer-second-hint-dismiss {
  margin-left: auto; background: none; border: none; color: var(--muted);
  font-size: var(--fs-body); line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px;
}
.offer-second-hint-dismiss:hover { color: var(--text); }

/* ---------- Pakete ---------- */
.offer-grid { display: flex; flex-direction: column; gap: var(--sp-l); }
.pack {
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px;
  padding: var(--sp-l); display: flex; flex-direction: column; gap: var(--sp-m);
}
.pack--big { border-color: #4a3a12; }
.pack-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-s); flex-wrap: wrap; }
.pack-head h3 { margin: 0; font-size: var(--fs-h3); }
.pack-count { font-size: var(--fs-small); color: var(--text-dim); font-weight: 700; white-space: nowrap; }
.pack-count .bonus { color: var(--green); }
.pack.pack-is-bought .pack-cards { opacity: 0.45; }

/* ---------- Erstkauf-Einstieg (ui-599) ----------
   Pille "Einstieg" im Starter-Kopf + Akzent-Rahmen + EIN Satz -- NUR beim
   allerersten Shop-Besuch (kein abgeschlossener Kauf, kein Gast, s.
   routes/dashboard.js hasAnyCompletedPurchase() + views/shop.js
   renderOfferPanel() `einstieg`). Endet automatisch mit dem ersten
   abgeschlossenen Kauf (jedes Produkt) -- kein X, kein Coachmark-Zustand
   noetig (Fifty-Entscheid Variante C). Cyan = Orientierung/Primaer (Style
   Guide), NICHT Gold (Gold bleibt Preis/Kaufen, s. .pack-price/.btn-buy
   oben) -- kein Countdown-/Scarcity-Element (Ticket-Lock). */
.einstieg-pill {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-on-accent); background: var(--cyan);
  border-radius: 999px; padding: 0.15em 0.6em; white-space: nowrap; vertical-align: middle;
}
.pack--einstieg {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(56, 225, 255, 0.25), 0 0 26px rgba(56, 225, 255, 0.10);
}
.pack-einstieg-line { font-size: var(--fs-small); color: var(--text-dim); line-height: 1.45; margin: -0.2em 0 0; }
.pack-einstieg-line b { color: var(--cyan); }

/* Karten-Grid nach Reveal — .cs-do-grid liefert die Spaltenregel (s. Datei-Kopf).
   .cs-card wird INNERHALB des Flip-Mechanismus wiederverwendet (nicht
   draggable hier -- cursor:grab der Sockel-Variante passt nicht). */
.pack-cards .cs-card { cursor: default; }
.pack-cards .cs-card:hover { transform: none; }

/* ---------- Sortieren/Zusammenlegen (ui-575 AK4) ---------- */
.pack-actions { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }

/* ---------- Flip-Mechanik (keine Bestands-Entsprechung) ---------- */
.flip-slot {
  position: relative; aspect-ratio: 3 / 4; perspective: 900px;
  /* ui-575 AK4: FLIP-Reorder (Sortieren) + Nachruecken nach dem Entfernen
     verschmolzener Duplikate (Zusammenlegen) animieren ueber GENAU diese
     transform-Transition — der JS-FLIP-Mechanismus (flipReorder(),
     client/companion/shop.js) setzt transform inline + erzwingt einen
     Reflow, die eigentliche Bewegung zum Zielwert (transform:'') laeuft
     dann ueber diese Regel. opacity zusaetzlich fuers Merge-Ausblenden
     (.card-merging-out unten). */
  transition: transform 0.35s ease, opacity 0.3s ease;
}
.flip-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(.2, .7, .3, 1);
}
.flip-slot.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 10px; overflow: hidden;
}
.flip-back {
  background: linear-gradient(155deg, #10163a 0%, #0a0f28 100%);
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
}
.flip-back::after { content: '⬡'; font-size: 2.6rem; color: var(--cyan); opacity: 0.18; }
.flip-front { transform: rotateY(180deg); }

/* ---------- Einzel-Interaktion (ui-575 AK1/AK2) ----------
   Jeder noch verdeckte .flip-slot ist EINZELN interaktiv (role="button",
   s. views/shop.js renderPackBackSlot()/renderFlipSlot()) -- Hover/Klick/
   Tastatur flippt GENAU diesen einen Ruecken (client/companion/shop.js).
   Sobald geflippt, entfaellt die Zeige-Hand wieder (reiner Betrachtungs-
   Zustand, kein zweiter Flip vorgesehen). */
.flip-slot[role="button"] { cursor: pointer; }
.flip-slot[role="button"].flipped { cursor: default; }
.flip-slot[role="button"]:not(.flipped):hover .flip-back,
.flip-slot[role="button"]:not(.flipped):focus-visible .flip-back {
  border-color: var(--cyan); filter: brightness(1.1);
}
.flip-slot[role="button"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- Zusammenlegen (ui-575 AK4) — Duplikate schrumpfen weg ---------- */
.flip-slot.card-merging-out { transform: scale(0.55); opacity: 0; pointer-events: none; }

/* ui-589: die vormalige .flip-slot--enter-„Pop-in"-Animation frisch
   eingefuegter Reveal-Slots (@keyframes flipSlotArrive, ui-562 "entstapelt
   Karte fuer Karte") ist ERSATZLOS entfernt — seit dem ui-575-Vor-Reveal-Grid
   zeigen die Rueckseiten VOR und NACH dem fetchAndInsertPack()-Innenraum-
   Tausch dasselbe Markup, ein erneutes Einblenden war gegenstandslos
   (Fiftys PTR-Fund 2026-09-03). s. views/shop.js renderFlipSlot()-Kommentar. */

@media (prefers-reduced-motion: reduce) {
  .flip-slot { transition: none; } /* Sortieren/Zusammenlegen springen statt zu gleiten */
}

/* ---------- Kauf-CTA ---------- */
/* web-291 AK1: gestapelt (Preis -> Zustimmungs-Block -> Kaufen-Button) statt
   der vormaligen Preis-links/Button-rechts-Zeile — der Zustimmungs-Block
   (components.css .checkout-consent) braucht die volle Breite "unter dem
   Preis" (Design-Lock, Ticket-Wortlaut). .pack-cta ist ausschliesslich der
   Kauf-Zweig von renderPack() (Muster achievements.css .buy-cta). */
.pack-cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-s); }
.pack-price { font-size: var(--fs-h3); font-weight: 900; color: var(--gold); }
.pack-price small { display: block; font-size: var(--fs-caption); color: var(--muted); font-weight: 400; }
.btn-buy {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: 9px; padding: 0.6em 1.3em; cursor: pointer; font-family: inherit;
  font-weight: 800; font-size: var(--fs-small); border: 1px solid transparent; letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--gold), #ffcf7d); color: #201502;
  box-shadow: 0 0 14px rgba(240, 179, 80, 0.33);
}
.btn-buy:hover { filter: brightness(1.08); }
.btn-buy:disabled { opacity: 0.6; cursor: not-allowed; filter: none; }
.pack-bought {
  border: 1px solid rgba(94, 255, 138, 0.4); background: rgba(94, 255, 138, 0.06); border-radius: 9px;
  padding: var(--sp-s) var(--sp-m); font-size: var(--fs-small); color: var(--green); font-weight: 700; text-align: center;
}
.pack-bought small { display: block; color: var(--muted); font-weight: 400; font-size: var(--fs-caption); margin-top: 0.15em; }

.offer-foot { color: var(--muted); font-size: var(--fs-caption); line-height: 1.6; }

/* ---------- Kauf-Begrüßung (ui-608) ----------
   Danke-/Warte-Block ganz oben im aktiven Shop-Sub-Panel (Angebot/Saison-Pass/
   Hexa-Club, s. views/shop.js renderKaufGreeting()) -- oberhalb .offer-head im
   Angebot-Panel. Uebernommen aus dem Prototyp-Abschnitt "SOLL -- neu fuer
   ui-608" (.claude/sprint/prototypes/ui-608.html), EIN Aendern gegenueber dem
   Prototyp: `.pack.pack--fresh`/`.pack.pack--pending` (Doppel-Klassen-
   Compound) sind hier `.pack--fresh`/`.pack--pending` (einzelne Modifier-
   Klasse, Muster `.pack--einstieg`/`.pack--big` oben in dieser Datei) --
   funktional identisch (die Klassen sitzen ohnehin nur auf `.pack`-Elementen),
   aber `pack-` ist bereits ein registrierter Praefix (css-namespaces.mjs) und
   der Namensraum-Guard (ui-602) klassifiziert einen 1-Klassen-Compound wie
   `.pack` selbst (ohne Praefix-Treffer) als bare -- die Doppel-Klassen-Form
   haette einen neuen Baseline-Eintrag gebraucht, die Einzel-Klassen-Form
   nicht. Drei Zustaende: `pending` (Webhook noch nicht da), `done` (verbucht),
   `late` (60s-Poll-Timeout, client-seitig, s. client/companion/shop.js) --
   `late` hat kein eigenes SSR-Markup, nur die clientseitige Klassen-/Text-
   Umschaltung auf DIESEM EINEN Element (kein zweiter Paket-/Karten-Renderer,
   Architektur-Lock). */
.kauf-greeting { display: flex; gap: var(--sp-l); align-items: center; border-radius: 12px; padding: var(--sp-l);
  border: 1px solid rgba(94,255,138,.45); background: linear-gradient(135deg, rgba(94,255,138,.10), rgba(94,255,138,.03));
  box-shadow: 0 0 0 1px rgba(94,255,138,.08), 0 10px 40px rgba(94,255,138,.08); animation: kg-in .35s cubic-bezier(.2,.7,.3,1); }
@keyframes kg-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.kg-glyph { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 800;
  color: #06110a; background: linear-gradient(135deg, var(--green), #b9ffcc); box-shadow: 0 0 22px rgba(94,255,138,.45); }
.kg-body { flex: 1 1 auto; min-width: 0; }
.kg-title { margin: 0; font-size: var(--fs-h3); font-weight: 800; color: var(--text); }
.kg-title b { color: var(--green); }
.kg-sub { margin: .3em 0 0; color: var(--text-dim); font-size: var(--fs-small); line-height: 1.5; }
.kg-sub .kg-amount { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.kg-actions { display: flex; gap: var(--sp-s); flex-wrap: wrap; align-items: center; margin-top: var(--sp-m); }
.kg-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.2em; border-radius: 9px; font-weight: 800; font-size: var(--fs-small);
  font-family: inherit; cursor: pointer; border: 1px solid transparent; background: linear-gradient(135deg, var(--green), #9dffb8); color: #06110a; text-decoration: none; }
.kg-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1em; border-radius: 9px; font-weight: 700; font-size: var(--fs-small);
  font-family: inherit; cursor: pointer; background: none; border: 1px solid var(--line-2); color: var(--text); text-decoration: none; }
.kg-secondary:hover, .kg-primary:hover { filter: brightness(1.08); }
.kg-link { color: var(--cyan); font-size: var(--fs-small); text-decoration: none; margin-left: auto; }
.kg-link:hover { text-decoration: underline; }
/* pending: neutraler Cyan-Rahmen + Spinner statt Haken */
.kauf-greeting--pending { border-color: rgba(56,225,255,.45); background: linear-gradient(135deg, rgba(56,225,255,.10), rgba(56,225,255,.03)); box-shadow: 0 0 0 1px rgba(56,225,255,.08); }
.kauf-greeting--pending .kg-glyph { background: none; box-shadow: none; border: 3px solid rgba(56,225,255,.25); border-top-color: var(--cyan); animation: kg-spin .9s linear infinite; }
@keyframes kg-spin { to { transform: rotate(360deg); } }
/* late: Bernstein, ruhig, keine Fehlerfarbe */
.kauf-greeting--late { border-color: rgba(240,179,80,.5); background: linear-gradient(135deg, rgba(240,179,80,.10), rgba(240,179,80,.03)); box-shadow: 0 0 0 1px rgba(240,179,80,.08); }
.kauf-greeting--late .kg-glyph { background: linear-gradient(135deg, var(--gold), #ffcf7d); box-shadow: 0 0 22px rgba(240,179,80,.35); color: #201502; }
/* Gekauftes Paket im Begrüßungsmoment: nach OBEN sortiert (views/shop.js
   renderOfferPanel()), Karten voll sichtbar (kein 0.45-Dimmen), Gold-Schimmer
   am Rahmen. Nach "Weiter stöbern"/naechstem Besuch: normaler
   pack-is-bought-Zustand (Karten wieder 0.45, s. .pack.pack-is-bought
   .pack-cards oben). */
.pack--fresh { border-color: rgba(94,255,138,.55); box-shadow: 0 0 0 1px rgba(94,255,138,.12), 0 0 28px rgba(94,255,138,.12); animation: kg-glow 2.4s ease-in-out 1; }
.pack--fresh .pack-cards { opacity: 1; }
@keyframes kg-glow { 0% { box-shadow: 0 0 0 1px rgba(240,179,80,.5), 0 0 40px rgba(240,179,80,.35); } 100% { box-shadow: 0 0 0 1px rgba(94,255,138,.12), 0 0 28px rgba(94,255,138,.12); } }
.pack--fresh .pack-head h3::after,
.pack--pending .pack-head h3::after { content: "Gerade gekauft"; margin-left: .6em; font-size: var(--fs-caption); font-weight: 800; color: #06110a; background: var(--green); border-radius: 999px; padding: .2em .6em; vertical-align: middle; }
/* pending: Karten bleiben gedimmt, Chip statt Danke-Zeile. Hinweis: dieser
   Marker wird aktuell von KEINEM Aufrufer gesetzt (renderPack() kennt
   `fresh`, aber keinen `pending`-Zustand fuer ein einzelnes Paket) -- waehrend
   `pending` ist der gekaufte Pack-Typ strukturell unbekannt (s. views/shop.js
   renderKaufGreeting()-Kopfkommentar). Die Regel bleibt fuer den Fall stehen,
   dass ein kuenftiges Ticket den Produkttyp doch vor der Bestaetigung kennt. */
.pack--pending .pack-head h3::after { content: "wird gutgeschrieben …"; background: var(--cyan); }
.pack--pending .pack-cards { opacity: .45; }
.pack--pending .pack-bought { display: none; }
/* Waehrend die Begruessung sichtbar ist, schweigt der „zweiter Kauf"-Hinweis
   (Laerm im Danke-Moment) -- Scope sitzt auf dem umgebenden .shop-sub-panel
   (views/shop.js renderShopTab()), nicht auf .kauf-greeting selbst. */
.shop-sub-panel.has-greeting .offer-second-hint { display: none; }

/* ui-214 Breakpoint-Kanon -- volle Doku in pages/shared-mobile.css. */
@media (max-width: 600px) {
  .offer-head { flex-direction: column; align-items: stretch; }
  .offer-head-right { align-items: flex-start; }
  /* ui-599: zweiter Satz der Einstieg-Zeile entfaellt auf Mobile, damit die
     Zeile zweizeilig bleibt (AK5) statt dreizeilig zu umbrechen. */
  .oe-more { display: none; }
  /* ui-608 (DL-7): Kauf-Begruessung stapelt vertikal, Buttons volle Breite,
     Link zentriert. */
  .kauf-greeting { flex-direction: column; align-items: stretch; text-align: left; }
  .kg-glyph { width: 44px; height: 44px; font-size: 22px; }
  .kg-actions { flex-direction: column; align-items: stretch; }
  .kg-link { margin-left: 0; text-align: center; padding: .6em 0; }
}