/* ============================================================
   BEISPIEL: neue Fotos von Marius Fritsch
   Hintergründe: hg-milchschaum, hg-kaffeebohnen, hg-kaffee-gemahlen, hg-matcha
   ============================================================ */

/* Philosophie: Milchschaum als heller, ruhiger Hintergrund */
.philosophy{
  position: relative; isolation: isolate;
  padding: clamp(4.5rem, 10vw, 7.5rem) 0;
  background: url("../bilder/fotos/hg-milchschaum.jpg") center / cover no-repeat;
}
.philosophy::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(254,250,249,.88), rgba(254,250,249,.68) 50%, rgba(254,250,249,.88));
}

/* Laufband: Kaffeebohnen, dunkel abgetönt, helle Schrift */
.marquee--photo{
  position: relative; isolation: isolate;
  border: none;
  padding: 1.6rem 0;
  background: url("../bilder/fotos/hg-kaffeebohnen.jpg") center / cover no-repeat;
  -webkit-mask-image: none; mask-image: none;
}
.marquee--photo::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(40,26,12,.72);
}
.marquee--photo .marquee-track span{ color: var(--warmweiss); }
.marquee--photo .marquee-track span::after{ color: var(--hellgold); }

/* Galerie: Fotos wirken größer und ruhiger */
.gallery-grid .img-placeholder{ background: var(--creme); }

/* ============================================================
   KOPFBILD DER KARTENSEITEN
   ============================================================ */
.page-banner{
  position: relative; isolation: isolate;
  min-height: clamp(280px, 42vh, 420px);
  display: flex; align-items: flex-end;
  padding: calc(88px + 2.5rem) 0 clamp(2.5rem, 6vw, 3.5rem);
  text-align: center;
  background: var(--espresso) center / cover no-repeat;
}
.page-banner::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(33,22,10,.55) 0%, rgba(33,22,10,.70) 100%);
}
.page-banner .container{ width: 100%; }
.page-banner .kicker{ color: var(--hellgold); }
.page-banner .headline{
  margin-top: .7rem;
  font-size: clamp(2.6rem, 6vw, 4rem);
  color: var(--warmweiss);
}
.page-banner .rule{ background: var(--hellgold); }
.page-banner > .container > *{ animation: rise .9s var(--ease-out) both; }
.page-banner > .container > *:nth-child(2){ animation-delay: 80ms; }
.page-banner > .container > *:nth-child(3){ animation-delay: 160ms; }

.page-banner--kaffeebohnen{ background-image: url("../bilder/fotos/hg-kaffeebohnen.jpg"); }
.page-banner--kaffee-gemahlen{ background-image: url("../bilder/fotos/hg-kaffee-gemahlen.jpg"); }
.page-banner--matcha{ background-image: url("../bilder/fotos/hg-matcha.jpg"); }
.page-banner--matcha::before{
  background: linear-gradient(180deg, rgba(33,22,10,.45) 0%, rgba(33,22,10,.68) 100%);
}

/* Überschrift steht jetzt im Kopfbild – im Kartenbereich ausblenden.
   Der Wochen-Text des Mittagsmenüs bleibt sichtbar (wird auch von der
   Startseite ausgelesen). */
.has-banner .menu-header .kicker,
.has-banner .menu-header h2,
.has-banner .menu-header .rule{ display: none; }
.has-banner .menu-header{ margin-bottom: 2rem; }
.has-banner .menu-header p{ margin-top: 0; }
.has-banner .menu-section{ padding-top: clamp(2.5rem, 6vw, 3.5rem); }

/* Header über dunklem Kopfbild: von Anfang an hell hinterlegt */
.has-banner .site-header{
  background: rgba(254,250,249,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom-color: rgba(201,146,58,.25);
}

@media (prefers-reduced-motion: reduce){
  .page-banner > .container > *{ animation: none; }
}

/* Galerie am Handy: kompaktes 2-Spalten-Raster statt 6 hoher Einzelbilder */
@media (max-width: 720px){
  .gallery-grid{ gap: .6rem; }
  .gallery-grid .img-placeholder{ grid-column: span 1 !important; --ratio: 3 / 4 !important; }
  .gallery-grid .img-placeholder:nth-child(1),
  .gallery-grid .img-placeholder:nth-child(6){ grid-column: span 2 !important; --ratio: 4 / 3 !important; }
}