/* =============================================================
   05 – BRAUKUNST – BILD-FEATURE
   Vollflächiges Hintergrundbild, Textkachel als Overlay links.
   ============================================================= */
.braukunst-feature {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.braukunst-feature__bg {
  position: absolute; left: 0; right: 0; top: -14%; z-index: 0;
  width: 100%; height: 128%; object-fit: cover;   /* über die Sektion hinaus → Parallax-Spielraum */
  will-change: transform;
}
.braukunst-feature::after {   /* Scrim für Tiefe/Lesbarkeit */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(0, 20, 45, 0.55) 0%, rgba(0, 20, 45, 0.18) 44%, transparent 68%),
    linear-gradient(to top, rgba(0, 20, 45, 0.4), transparent 42%);
}
.braukunst-feature__inner {
  position: relative; z-index: 2;
  display: flex; justify-content: flex-start; width: 100%;
  max-width: none;                          /* über die .container-Grenze weiter nach links */
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.braukunst-feature__card {
  position: relative;
  isolation: isolate;            /* hält die Rahmen-Ebene (z-index:-1) in der Kachel */
  max-width: 660px;
  padding: clamp(2.2rem, 3.5vw, 3.4rem);
}
/* Rahmen-Ebene: gelbe Kontur per drop-shadow (Filter auf dem Rahmen), weißer
   Grain-Grund mit konkaven Ecken (Maske auf dem Inneren) – identisch zur Slow-Kachel.
   Trennung nötig, sonst würde die Maske den gelben Drop-Shadow wegschneiden. */
.braukunst-feature__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 28px 50px rgba(0, 20, 45, 0.45));
}
.braukunst-feature__card-frame-inner {
  --notch: 22px;                 /* Radius der nach innen gekehrten Ecken */
  position: absolute; inset: 0; display: block;
  background: var(--grain-strong), #fff;   /* Grain-Hintergrund */
  -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;
}
.braukunst-feature__card .section__title { font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.braukunst-feature__card p { color: var(--c-ink-soft); margin-top: 1.3rem; font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.braukunst-feature__card .btn { margin-top: 2.2rem; }

@media (max-width: 760px) {
  .braukunst-feature { min-height: clamp(520px, 78vh, 720px); }
  .braukunst-feature__inner { justify-content: center; }
  .braukunst-feature__card { max-width: none; width: 100%; }
}