/* ==========================================================================
   KLINGE — 50-hier.css · Adresse, Öffnungszeiten, Anfahrt
   Kohle mit Ladenfront. Links das hohe Bild, rechts Kopf und Datenpanel.
   ========================================================================== */

.hier { background: var(--c-coal); }

/* Zwei Spalten, zwei Zeilen: das Bild trägt links über die volle Höhe,
   rechts stapeln sich Kopf (auto) und Panel (Rest).                        */
.hier__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: clamp(1.5rem, 2.6vw, 2.75rem) clamp(1.75rem, 3.4vw, 3.5rem);
  align-items: stretch;
}
.hier__media { grid-column: 1; grid-row: 1 / span 2; }
.hier__head  { grid-column: 2; grid-row: 1; }
.hier__panel { grid-column: 2; grid-row: 2; }

/* ---- Kopf ---------------------------------------------------------------- */
.hier__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.9rem, 1.4vw, 1.35rem);
}
.hier__title { max-width: 14ch; }
/* Big Shoulders setzt die Umlautpunkte über die Versalhöhe. Die Zeilenmaske
   bekommt oben Luft und wird um denselben Betrag wieder hochgezogen —
   der Rhythmus bleibt, das „Ü“ behält seine Punkte.                        */
.hier__title .line {
  padding-top: 0.2em;
  margin-top: -0.145em;
}
.hier__lead { max-width: 36ch; }

/* ---- Medium: Ladenfront mit Parallax ------------------------------------- */
.hier__media {
  position: relative;
  min-height: clamp(21rem, 40vw, 34rem);
  margin: 0;
}
/* Überhöhe, damit der Parallax-Weg nie eine Kante freilegt.
   Die Transform-Transition aus .tone wird bewusst entfernt — GSAP schreibt
   den Wert pro Bild, eine Übergangszeit würde nachhinken.                   */
.hier__media img {
  position: absolute;
  inset: -11% 0 auto 0;
  width: 100%;
  height: 122%;
  object-fit: cover;
  object-position: 12% 38%;
  transition: filter var(--d-epic) var(--e-sleek);
}

/* Typenschild in der Ecke des Rahmens — massiv, nicht transparent */
.hier__plate {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 0.95rem 0.62rem 0.75rem;
  background: var(--c-coal);
  border-radius: 0 var(--r-sm) 0 var(--r-core);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hier__plate-ico { display: grid; place-items: center; color: var(--c-signal); }
.hier__plate-ico svg { width: 15px; height: 15px; }
.hier__plate-t { color: var(--t-body); }

/* ---- Datenpanel: Schale + konzentrischer Kern ----------------------------- */
.hier__panel { display: flex; }
.hier__core {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.05rem, 1.7vw, 1.5rem);
  padding: clamp(1.35rem, 2.2vw, 2.15rem);
}

/* Status: Punkt, Klartext, Zusatz — Werte kommen aus js/status.js */
.hier__status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.hier__status-t {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--t-strong);
  letter-spacing: 0.01em;
}
.hier__status-u { color: var(--t-muted); }
.hier__status .dot.is-closed { background: var(--c-blade); }
.hier__status .dot.is-closed::after { opacity: 0; animation: none; }

/* Adresse */
.hier__adr {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.hier__street { display: block; }
.hier__city {
  font-size: var(--fs-sm);
  color: var(--t-body);
  letter-spacing: 0.015em;
}

/* Öffnungszeiten: Mono-Label, Punktlinie, Mono-Ziffern */
.hier__hours {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hier__row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.hier__row dt {
  flex: none;
  min-width: 3.4rem;
}
.hier__val {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
}
.hier__val::before {
  content: '';
  flex: 1;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--t-faint) 0 1px, transparent 1px 5px);
}
.hier__off {
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  color: var(--t-muted);
}

.hier__rule { background: var(--line-soft); }

/* Anfahrt: Icon, Mono-Schlüssel, Klartext */
.hier__ways {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.hier__way {
  display: grid;
  grid-template-columns: 1.7rem 4.1rem minmax(0, 1fr);
  align-items: center;
  gap: 0.3rem 0.8rem;
}
.hier__ico {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--r-sm);
  background: var(--surface-deep);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--c-blade);
}
.hier__ico svg { width: 15px; height: 15px; }
.hier__way-v {
  font-size: var(--fs-sm);
  color: var(--t-body);
}

/* Zahlung — auf die Schlüsselspalte der Anfahrt eingerückt */
.hier__pay {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding-left: 2.5rem;
}
.hier__pay-v {
  color: var(--t-body);
  letter-spacing: 0.14em;
}

.hier__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 0.3rem;
}

/* ---- Ab Tablet abwärts: eine Spalte, Bild zwischen Kopf und Panel --------- */
@media (max-width: 1023px) {
  .hier__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .hier__media,
  .hier__head,
  .hier__panel {
    grid-column: 1;
    grid-row: auto;
  }
  .hier__media {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .hier__title { max-width: none; }
}

@media (max-width: 767px) {
  .hier__media { aspect-ratio: 4 / 5; }
  .hier__way {
    grid-template-columns: 1.7rem minmax(0, 1fr);
    gap: 0.15rem 0.8rem;
  }
  .hier__way-k,
  .hier__way-v { grid-column: 2; }
  .hier__ico { grid-row: 1 / span 2; align-self: start; }
  .hier__pay { padding-left: 0; }
  .hier__cta .btn {
    flex: 1 1 100%;
    justify-content: space-between;
  }
}

/* ==========================================================================
   V2 — Vollbreites Band statt halber Spalte.
   Die Ladenfront läuft über die ganze Breite, die Adresse steht im Überformat
   darauf, der Datenblock schiebt sich von unten ins Bild.
   ========================================================================== */
.hier__top { margin-bottom: clamp(2rem, 4vw, 3.4rem); }

.hier__band {
  position: relative;
  width: 100%;
  height: clamp(24rem, 56vh, 38rem);
  overflow: hidden;
  background: var(--c-steel);
}
.hier__media {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 0;
}
.hier__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 38%;
  /* Die Ladenfront ist eine Nachtaufnahme — sie braucht Licht, sonst versinkt sie */
  filter: grayscale(0.55) contrast(1.1) brightness(1.42) saturate(0.85);
}
.hier__band-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, var(--c-coal) 0% 4%,
      color-mix(in srgb, var(--c-coal) 38%, transparent) 40%,
      color-mix(in srgb, var(--c-coal) 0%, transparent) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--c-coal) 58%, transparent) 0%,
      color-mix(in srgb, var(--c-coal) 0%, transparent) 52%);
}

/* Die Adresse im Überformat, unten links im Band */
.hier__big {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1rem, 2.6vw, 2.4rem);
  margin: 0;
  max-width: min(62rem, 74%);
  color: var(--t-strong);
  text-shadow: 0 2px 30px rgba(11, 11, 12, 0.7);
  pointer-events: none;
}

/* Der Datenblock überlappt das Band */
.hier__bottom { position: relative; z-index: var(--z-base); }
.hier__panel { margin-top: clamp(-7rem, -6vw, -3rem); max-width: 46rem; margin-left: auto; }

/* Die Plakette sitzt jetzt oben rechts im Band statt unten links am Bild */
.hier__plate {
  inset: auto var(--gutter) auto auto;
  top: clamp(1rem, 2.4vw, 2rem);
  bottom: auto;
  left: auto;
}

@media (max-width: 767px) {
  .hier__band { height: clamp(18rem, 46vh, 26rem); }
  .hier__big { position: static; padding: 1.1rem var(--gutter) 0; max-width: none; }
  .hier__band { height: auto; }
  .hier__media { position: relative; height: clamp(16rem, 40vh, 22rem); }
  .hier__panel { margin-top: 1.5rem; margin-left: 0; max-width: none; }
}