/* =============================================================
   08 – SLOW BREWING
   Vollflächiges Hintergrundbild (Hopfendolden), Inhalt rechts auf
   einer weißen Kachel mit invertierten Ecken + gelber Kontur.
   ============================================================= */

.slow {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}
/* Vollflächiges Bild als eigenes Element → per JS parallax-verschiebbar.
   Bewusst über die Sektion hinaus (oben/unten), damit beim Verschieben
   keine Kante sichtbar wird. */
.slow__bg {
  position: absolute; left: 0; right: 0; top: -14%;
  width: 100%; height: 128%; object-fit: cover;
  z-index: 0; will-change: transform;
}
.slow::after {   /* leichter Scrim (Tiefe/Lesbarkeit) */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(0, 26, 44, 0.42) 0%, rgba(0, 26, 44, 0.10) 55%, rgba(0, 26, 44, 0.28) 100%);
}

/* Inhalt rechts ausrichten (über Bild + Scrim) */
.slow__inner {
  position: relative; z-index: 2;
  display: flex;
  justify-content: flex-end;
}

/* ---- Inhalts-Kachel: weiß, invertierte Ecken, gelbe Kontur ---- */
.slow__card {
  position: relative;
  isolation: isolate;            /* hält die Rahmen-Ebene (z-index:-1) in der Kachel */
  max-width: 620px;
  padding: clamp(2.2rem, 4vw, 3.2rem);
}
.slow__card-frame {
  position: absolute; inset: 0; z-index: -1;
  filter:
    drop-shadow(1.5px 0 0 var(--c-yellow))
    drop-shadow(-1.5px 0 0 var(--c-yellow))
    drop-shadow(0 1.5px 0 var(--c-yellow))
    drop-shadow(0 -1.5px 0 var(--c-yellow))
    drop-shadow(0 24px 44px rgba(0, 15, 30, 0.4));
}
.slow__card-frame-inner {
  --notch: 22px;                 /* Radius der nach innen gekehrten Ecken */
  position: absolute; inset: 0; display: block;
  background: var(--grain-strong), #fff;   /* Grain-Hintergrund (identisch zum Braukunst-Feature) */
  -webkit-mask:
    radial-gradient(circle at left  top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  top    / 51% 51% no-repeat,
    radial-gradient(circle at right top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right top    / 51% 51% no-repeat,
    radial-gradient(circle at left  bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  bottom / 51% 51% no-repeat,
    radial-gradient(circle at right bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right bottom / 51% 51% no-repeat;
          mask:
    radial-gradient(circle at left  top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  top    / 51% 51% no-repeat,
    radial-gradient(circle at right top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right top    / 51% 51% no-repeat,
    radial-gradient(circle at left  bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  bottom / 51% 51% no-repeat,
    radial-gradient(circle at right bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right bottom / 51% 51% no-repeat;
}

/* Textfarben auf der hellen Kachel (nicht die section--dark-Farben erben) */
.slow .section__title {
  color: var(--c-ink);
  font-size: clamp(2rem, 3.4vw, 2.9rem);   /* kompakter als Sektions-Head-Titel */
}
.slow__copy { color: var(--c-ink-soft); margin-top: 1.1rem; font-size: clamp(1.02rem, 1.4vw, 1.15rem); }
.slow__btn { margin-top: 1.6rem; }

/* Slow-Brewing-Badge (Gold-Siegel): links oben, ragt leicht über die Kachel
   hinaus. Weißer Kreis mit gelbem Rand hebt es vom Foto-Hintergrund ab. */
.slow__badge {
  position: absolute;
  top: clamp(-90px, -6.2vw, -72px);    /* sitzt überwiegend ÜBER der Kachelkante */
  left: clamp(-46px, -3.2vw, -30px);
  width: clamp(110px, 10vw, 150px);
  padding: clamp(8px, 0.8vw, 12px);
  background: #fff;
  border: 3px solid var(--c-yellow);
  border-radius: 50%;
  transform: rotate(-8deg);
  box-shadow: 0 14px 26px rgba(0, 15, 30, 0.35);
  pointer-events: none;
  z-index: 1;
}
.slow__card { padding-top: clamp(3rem, 4.5vw, 4rem); }   /* Titel beginnt unterhalb des Badges */

@media (max-width: 720px) {
  .slow { min-height: 0; }
  .slow__card { max-width: none; width: 100%; }
}