/* Seite Eiscreme – nur seitenspezifische Ergänzungen (Variablen aus tokens.css) */

/* Abstand Tabs unter dem Einleitungstext */
.eis-sortiment .tabs { margin-top: var(--space-5); }

/* Kugelpreis (nur Sorten/Sorbets) + Zusatz-Hinweis (per Schalter in page.json) */
.eis-kugelpreis, .eis-tab-intro { text-align: center; font-size: var(--fs-small); color: var(--c-text-dim); margin: 0 0 var(--space-4); }
.eis-tab-intro { margin-top: calc(-1 * var(--space-3)); }
.eis-zusaetze { text-align: center; margin: var(--space-4) 0 0; }
.eis-zusaetze .btn--text { font-size: var(--fs-xs); text-decoration: underline; text-underline-offset: 4px; color: var(--c-gold); }
.eis-zusaetze .btn--text:hover, .eis-zusaetze .btn--text:focus-visible { color: var(--c-text); }

/* Eisbecher: Archivfotos im Hochformat auf Weiß – ganz zeigen statt beschneiden */
.products--becher .tile__img { background: #fff; }
.products--becher .tile__img img { object-fit: contain; padding: 6%; }
.products--becher .tile__placeholder { background: var(--c-bg); }
.products--becher .product-dialog__img { background: #fff; }
.products--becher .product-dialog__img img { object-fit: contain; padding: 4%; }

/* Karussell „Besondere Kreationen“: Kurztext unter dem Namen */
.eis-kreation__text { font-size: var(--fs-xs); line-height: 1.6; color: var(--c-text-dim); text-align: center; margin: 6px 0 0; opacity: 0; transition: opacity .3s ease; }
.carousel__slide.is-center .eis-kreation__text { opacity: 1; }

/* Popups ohne Bild (Zusätze, Produkte ohne Foto): einspaltig und schmaler
   (Basis-CSS setzt immer zwei Spalten, siehe _koordination/eiscreme.md) */
.eis-zusaetze-dialog, .eis-sortiment .product-dialog:not(:has(.product-dialog__img)) { width: min(560px, calc(100% - 32px)); }
.eis-zusaetze-dialog .dialog__box, .eis-sortiment .product-dialog .dialog__box:not(:has(.product-dialog__img)) { grid-template-columns: 1fr; }

/* Becher ohne Foto: Piktogramm auf dunklem Grund statt Grau */
.products--becher .tile__img:has(.tile__placeholder) { background: transparent; }

/* Hero: einzelner Button auch mobil mittig */
.eis-hero .hero__buttons { justify-content: center; }

/* Karussell mobil: wie live genau eine Folie, ohne schmale Nachbar-Streifen neben den Pfeilen
   (Basis-CSS zeigt 1,25 Folien und zieht --c-pad doppelt ab, siehe _koordination/eiscreme.md Punkt 1).
   Kann raus, sobald das Fundament mobil eine Einzelfolie anbietet. */
@media (max-width: 767px) {
  .eis-kreationen .carousel { --pv: 1; }
  .eis-kreationen .carousel__track { --slide-w: 100cqw; }
  .eis-kreationen .carousel--center .carousel__track { padding-inline: 0; padding-block: 16px; }
  .eis-kreationen .carousel--center .carousel__slide,
  .eis-kreationen .carousel--center .carousel__slide.is-center { transform: none; padding: 0 12%; }
}

/* Kachel ohne Foto (Sicherheitsnetz, falls ein Foto fehlt): Name immer zeigen, Piktogramm kräftiger.
   Gehört eigentlich ins Fundament, siehe _koordination/eiscreme.md Punkt 9. */
.eis-sortiment .tile:has(.tile__placeholder) .tile__name { opacity: 1; }
.eis-sortiment .tile__placeholder { opacity: .85; }