/* ═══════════════════════════════════════════════════════════════
   HERO (Startseite) — geteiltes Wort an der Mittellinie
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-5) var(--space-3);
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: -1;
}
.hero__bg-half { flex: 1; }
.hero__bg-half--white { background: var(--white); }
.hero__bg-half--blue  { background: var(--blue);  }

/* Beide Wort-Layer übereinander, gleiche Schrift, gleiche Position.
   Per clip-path zeigt jeder Layer nur seine Hälfte. */
.hero__title {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 17vw, 14rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-align: center;
  width: 100%;
}

.hero__word {
  display: block;
  user-select: none;
}
.hero__word--blue {
  color: var(--blue);
  clip-path: inset(0 50% 0 0);
}
.hero__word--white {
  position: absolute;
  inset: 0;
  color: var(--white);
  clip-path: inset(0 0 0 50%);
}
.hero__word-stack { display: none; }

/* Parallax: BLAUWEISS und Bräu schweben beim Scrollen langsamer
   als die übrige Seite. JS setzt --parallax-y, CSS rendert den
   Transform. Mobile media query überschreibt den Transform unten. */
.hero__title,
.hero__sub {
  --parallax-y: 0px;
  will-change: transform;
}
.hero__title { transform: translate3d(0, var(--parallax-y), 0); }
.hero__sub   { transform: translate3d(0, var(--parallax-y), 0); }

@media (prefers-reduced-motion: reduce) {
  .hero__title,
  .hero__sub { transform: none; }
}

/* Schatten: drop-shadow auf dem Parent statt text-shadow auf den
   geclippten Children — sonst schneidet die clip-path den Schatten ab.
   filter sieht das gerenderte Composite (volles Wort) und legt einen
   sauberen Schatten darunter. */
.hero__title,
.hero__sub {
  filter:
    drop-shadow(0 4px 10px rgba(10, 26, 46, 0.18))
    drop-shadow(0 24px 56px rgba(10, 26, 46, 0.30));
}

.hero__sub {
  position: relative;
  width: 100%;
  margin: var(--space-2) 0 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 7.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--blue);
  background: transparent;
  border: 0;
}
.hero__sub-word {
  display: block;
  user-select: none;
}
.hero__sub-word--blue {
  color: var(--blue);
  clip-path: inset(0 50% 0 0);
}
.hero__sub-word--white {
  position: absolute;
  inset: 0;
  color: var(--white);
  clip-path: inset(0 0 0 50%);
}

.hero__tagline {
  margin: var(--space-4) 0 var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: var(--ink-soft);
  background: var(--paper);
  padding: 0.2em 0.8em;
  border-radius: var(--radius);
}

.hero__cta {
  margin-top: var(--space-2);
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--ink);
  padding: 0.95em 1.8em;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transition), border-color var(--transition);
  border-bottom: 1px solid var(--ink);
}
.hero__cta:hover {
  background: transparent;
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 0;
  mix-blend-mode: difference;
  color: rgba(255, 255, 255, 0.7);
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 28px;
  background: currentColor;
  animation: scroll-pulse 2.2s ease-in-out infinite;
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* Mobile: horizontaler Background-Split (oben weiß, unten blau).
   "BLAU" liegt in der weißen Hälfte (blaue Schrift),
   "WEISS" in der blauen Hälfte (weiße Schrift). Das Wort-Stack
   wird absolut zentriert, damit der Schnitt exakt auf der
   Mittellinie sitzt. Die übrigen Hero-Elemente fließen darunter. */
@media (max-width: 640px) {
  .hero {
    justify-content: flex-end;
    padding-top: calc(50svh + 6rem);
    padding-bottom: var(--space-6);
  }
  .hero__bg { flex-direction: column; }

  .hero__word--blue,
  .hero__word--white { display: none; }

  .hero__title {
    position: absolute;
    top: 50%;
    left: 0; right: 0;
    transform: translateY(-50%);
    margin: 0;
    width: 100%;
  }

  .hero__word-stack {
    display: flex;
    flex-direction: column;
    line-height: 0.92;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3.2rem, 19vw, 6rem);
    letter-spacing: -0.03em;
  }
  .hero__word-stack-line {
    display: block;
    text-align: center;
  }
  .hero__word-stack-line--blau  { color: var(--blue); }
  .hero__word-stack-line--weiss { color: var(--white); }

  .hero__sub {
    margin-top: var(--space-3);
    font-size: clamp(2.4rem, 14vw, 5.5rem);
  }
  .hero__sub-word--blue { display: none; }
  .hero__sub-word--white {
    position: static;
    inset: auto;
    clip-path: none;
    color: var(--white);
  }
  .hero__cta {
    background: var(--white);
    color: var(--blue);
    border-color: var(--white);
  }
  .hero__cta:hover {
    background: transparent;
    color: var(--white);
  }
  .hero__tagline {
    color: var(--ink);
  }
}

/* ═══════════════════════════════════════════════════════════════
   STARTSEITE — Sektionen unter dem Hero
   ═══════════════════════════════════════════════════════════════ */
.intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.value {
  text-align: center;
  padding: var(--space-3);
}
.value__icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--space-2);
  color: var(--blue);
}
.value h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-1);
}
.value p { color: var(--ink-soft); margin: 0; }

@media (max-width: 720px) {
  .values-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

.featured-beer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-6);
}
.featured-beer__art {
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.featured-beer__art svg { width: 70%; height: auto; }
@media (max-width: 800px) {
  .featured-beer { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ═══════════════════════════════════════════════════════════════
   BIERÜBERSICHT
   ═══════════════════════════════════════════════════════════════ */
.page-header {
  background: var(--paper);
  padding: var(--space-7) 0 var(--space-5);
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   BIER-DETAIL
   ═══════════════════════════════════════════════════════════════ */
.beer-detail {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--space-6);
  align-items: start;
}

.beer-detail__media {
  background: var(--paper);
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  position: sticky;
  top: 100px;
}
.beer-detail__media svg { width: 75%; height: auto; }

.beer-detail__style {
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.beer-detail h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.beer-detail__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}

.spec-table {
  width: 100%;
  margin: var(--space-4) 0;
  border-top: 1px solid var(--rule);
  border-collapse: collapse;
}
.spec-table tr {
  border-bottom: 1px solid var(--rule);
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: var(--space-2) 0;
  font-size: 0.95rem;
}
.spec-table th {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
  width: 38%;
}
.spec-table td {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.beer-detail__description {
  margin-top: var(--space-4);
  font-size: 1.05rem;
  line-height: 1.75;
}
.beer-detail__description p { margin-bottom: var(--space-3); }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 var(--space-4);
}
.tag-list li {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0.3em 0.9em;
  font-size: 0.88rem;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-soft);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-3);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 0;
}
.back-link:hover { color: var(--blue); }

@media (max-width: 800px) {
  .beer-detail { grid-template-columns: 1fr; gap: var(--space-4); }
  .beer-detail__media { position: static; }
}

/* ═══════════════════════════════════════════════════════════════
   ÜBER UNS
   ═══════════════════════════════════════════════════════════════ */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-6);
}
.story-grid--reverse > :first-child { order: 2; }
.story-grid__art {
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}
.story-grid__art svg { width: 70%; height: auto; color: var(--blue); }

@media (max-width: 800px) {
  .story-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .story-grid--reverse > :first-child { order: 0; }
}

.timeline {
  list-style: none;
  margin: 0; padding: 0;
  border-left: 1px solid var(--rule);
  margin-left: var(--space-2);
}
.timeline li {
  position: relative;
  padding: 0 0 var(--space-4) var(--space-4);
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.4em;
  width: 9px; height: 9px;
  background: var(--blue);
  border-radius: 50%;
}
.timeline__year {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0.2em;
}
.timeline__title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.2em;
}
.timeline p { margin: 0; color: var(--ink-soft); }

/* ═══════════════════════════════════════════════════════════════
   KONTAKT
   ═══════════════════════════════════════════════════════════════ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.contact-grid h3 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-1);
}
.contact-grid p {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: var(--space-3);
}
.contact-grid dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4em var(--space-3);
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin: 0;
}
.contact-grid dt { color: var(--ink-soft); }
.contact-grid dd { margin: 0; }

.map-frame {
  width: 100%;
  height: 420px;
  border: 1px solid var(--rule);
  margin-top: var(--space-4);
  filter: grayscale(0.2);
}

@media (max-width: 720px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* ═══════════════════════════════════════════════════════════════
   404
   ═══════════════════════════════════════════════════════════════ */
.error-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-5) var(--space-3);
}
.error-page__code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 14rem);
  line-height: 1;
  color: var(--blue);
  margin: 0;
}