/* Uhrenservice Franz — Premium handwerklicher Auftritt */

:root {
  --bg: #f2f0ea;
  --bg-deep: #e8e4d9;
  --surface: #ffffff;
  --ink: #171c19;
  --ink-soft: #2a3230;
  --muted: #5f6a66;
  --forest: #1e3b32;
  --forest-deep: #152925;
  --line: rgba(23, 28, 25, 0.1);
  --accent: #9e7d4f;
  --accent-soft: rgba(158, 125, 79, 0.15);
  --hero-overlay: linear-gradient(
    120deg,
    rgba(8, 14, 12, 0.93) 0%,
    rgba(12, 22, 19, 0.62) 45%,
    rgba(18, 32, 28, 0.42) 100%
  );
  --meister-accent: #6b2d2d;
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --space: clamp(1.25rem, 4vw, 2.5rem);
  --max: 1180px;
  --narrow: 720px;
  --radius: 2px;
  /* Modernere, weichere Radien & Schatten – nur für Inhalte unterhalb der Hero.
     --radius (2px) bleibt für Hero/Buttons unverändert. */
  --radius-card: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(21, 41, 37, 0.04),
    0 6px 18px rgba(21, 41, 37, 0.05);
  --shadow-md: 0 2px 6px rgba(21, 41, 37, 0.05),
    0 14px 38px rgba(21, 41, 37, 0.08);
  --shadow-lg: 0 4px 12px rgba(21, 41, 37, 0.06),
    0 24px 60px rgba(21, 41, 37, 0.1);
  --line-soft: rgba(23, 28, 25, 0.07);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-parallax-wrap,
  .hero-parallax-img {
    transform: none !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--forest-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--forest);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  z-index: 300;
  font-weight: 500;
}

.skip-link:focus {
  left: var(--space);
  top: var(--space);
}

/* ——— Top bar ——— */
.topbar {
  background: var(--forest-deep);
  color: rgba(242, 240, 234, 0.88);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.55rem var(--space);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
}

.topbar a {
  color: inherit;
  text-decoration: none;
}

.topbar a:hover {
  color: #fff;
}

.topbar-sep {
  opacity: 0.45;
  margin: 0 0.35rem;
}

/* ——— Header ——— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.7rem var(--space);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logo links, Zusatz "Uhrmachermeister · David Franz" daneben — flacher Header. */
.brand {
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}

.brand-logo {
  height: 50px;
  width: auto;
  flex-shrink: 0;
}

.brand-text {
  display: inline-block;
}

.brand-mark {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
}

.brand-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0.5rem 0.85rem;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--ink);
  border-radius: var(--radius);
}

.nav-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-primary a {
  display: block;
  padding: 0.45rem 0.85rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  border-radius: var(--radius);
}

.nav-primary a:hover {
  background: var(--bg);
  color: var(--ink);
}

.nav-primary a.is-active {
  background: var(--forest);
  color: #f4f2ea;
}

/* ——— Hero variants ——— */
.hero {
  position: relative;
}

.hero--home {
  min-height: min(88vh, 920px);
  display: flex;
  align-items: flex-end;
}

.hero--home .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-parallax-wrap {
  position: absolute;
  left: 0;
  width: 100%;
  height: 118%;
  bottom: -8%;
  will-change: transform;
}

.hero-parallax-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.08);
  will-change: transform;
}

.hero-bg__overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay),
    radial-gradient(
      ellipse 90% 55% at 75% 100%,
      rgba(0, 0, 0, 0.35),
      transparent 55%
    );
  pointer-events: none;
}

.hero--home .hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 10vw, 6rem) var(--space);
  width: 100%;
}

/* === Scroll-Scrub Hero (Three.js Video-Frame-Animation) ================== */
/* Neutralisiert das geerbte Flex-Layout von .hero--home – das Layout regelt
   die Sticky-Box. */
.hero--scrub {
  display: block;
  min-height: 0;
}

.hero-scrub-stage {
  position: relative;
}

/* Mobile-Basis: gestapelt — Video-Block oben (Uhr sichtbar), Text darunter. */
.hero-scrub-sticky {
  position: relative;
  min-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--forest-deep);
}

/* Eigenständiger Video-Block oben statt dunkler Vollflächen-Hintergrund. */
.hero--scrub .hero-bg {
  position: relative;
  inset: auto;
  width: 100%;
  height: clamp(240px, 42vh, 460px);
  flex: none;
}

/* Textspalte darunter, füllt den Rest. */
.hero--scrub .hero-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  margin: 0;
  padding: clamp(1.75rem, 7vw, 2.75rem) var(--space) clamp(2.25rem, 8vw, 3rem);
}

/* Aktiv: Stage liefert den Scroll-Weg (per JS gehöht), Sticky bleibt fixiert. */
.hero--scrub.hero-scrub-ready .hero-scrub-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}

/* Natives Video als Anzeige (deckt den Bereich formatfüllend). */
.hero-scrub-video-src {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

/* Mobile: nur ein weicher Übergang am unteren Rand des Video-Blocks in die
   Textspalte — die Uhr selbst bleibt unverdeckt sichtbar. */
.hero--scrub .hero-bg__overlay {
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(21, 41, 37, 0) 55%,
    var(--forest-deep) 100%
  );
}

.hero--scrub .hero-parallax-wrap {
  transition: opacity 0.6s var(--ease);
}

/* Erstes Videoframe steht: Poster aus, Video ein. */
.hero--scrub.hero-video-ready .hero-parallax-wrap {
  opacity: 0;
}
.hero--scrub.hero-video-ready .hero-scrub-video-src {
  opacity: 1;
}

/* Dezenter Scroll-Hinweis. */
.hero-scrub-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 242, 234, 0.65);
}
.hero-scrub-hint__dot {
  width: 1.5px;
  height: 26px;
  background: linear-gradient(
    to bottom,
    rgba(244, 242, 234, 0.7),
    rgba(244, 242, 234, 0)
  );
  animation: heroScrubHint 1.8s var(--ease) infinite;
  transform-origin: top;
}
@keyframes heroScrubHint {
  0% {
    transform: scaleY(0.3);
    opacity: 0.2;
  }
  45% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.3);
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scrub-hint__dot {
    animation: none;
  }
}

/* Desktop: Split-Layout — Text links, Video-Panel rechts neben dem Text.
   Unter 900px bleibt das Video als formatfüllender Hintergrund (kein Platz
   für zwei Spalten). */
@media (min-width: 900px) {
  .hero--scrub .hero-scrub-sticky {
    flex-direction: row;
    align-items: stretch;
    background: var(--forest-deep);
  }

  /* Video-Panel rechts (DOM-Reihenfolge per order umgekehrt). */
  .hero--scrub .hero-bg {
    position: relative;
    inset: auto;
    order: 2;
    flex: 0 0 52%;
    height: 100%;
    z-index: 0;
  }

  /* Textspalte links, vertikal zentriert. */
  .hero--scrub .hero-inner {
    order: 1;
    flex: 1 1 48%;
    align-self: center;
    max-width: none;
    margin: 0;
    padding: clamp(3rem, 6vw, 6rem) clamp(2.25rem, 5vw, 5rem);
  }

  /* Weicher Übergang von der Textspalte ins Video (statt Vollflächen-Dunkel). */
  .hero--scrub .hero-bg__overlay {
    background: linear-gradient(
      90deg,
      var(--forest-deep) 0%,
      rgba(21, 41, 37, 0) 22%
    );
  }
}

/* Mobil/Tablet-Hoch (unter dem Desktop-Split): das Hochformat-Uhrvideo
   VOLLSTÄNDIG zeigen statt oben/unten zu beschneiden — mehr Videohöhe und
   object-fit: contain, damit die ganze Uhr beim Scrollen sichtbar bleibt. */
@media (max-width: 899px) {
  /* Mobil: Video als VOLLFLÄCHIGER Hintergrund des gepinnten Bereichs -> große
     Uhr auf jeder Bildschirmhöhe. Der Text liegt als lesbares Overlay unten mit
     Farbverlauf. So konkurrieren Uhr und Text nicht mehr um die Höhe und der
     Text kann nie abgeschnitten werden. */
  .hero--scrub .hero-scrub-sticky {
    display: block;
  }
  .hero--scrub .hero-bg {
    position: absolute;
    inset: 0;
    height: auto;
    z-index: 0;
    background: var(--forest-deep);
  }
  /* Uhr GROSS: Video füllt die Fläche (cover). */
  .hero-scrub-video-src,
  .hero--scrub .hero-parallax-img {
    object-fit: cover;
    object-position: center 42%;
    transform: none;
  }
  /* Basis-Overlay (dunkler Rand unten) hier nicht nötig -> der Text bringt
     seinen eigenen Verlauf mit. */
  .hero--scrub .hero-bg__overlay {
    display: none;
  }
  .hero--scrub .hero-inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    padding: 3rem var(--space) clamp(1.5rem, 6vw, 2.25rem);
    background: linear-gradient(
      to top,
      rgba(21, 41, 37, 0.98) 0%,
      rgba(21, 41, 37, 0.95) 52%,
      rgba(21, 41, 37, 0.82) 74%,
      rgba(21, 41, 37, 0.45) 90%,
      rgba(21, 41, 37, 0) 100%
    );
  }
  /* Textschatten für sichere Lesbarkeit über dem Videobild. */
  .hero--scrub .hero-kicker,
  .hero--scrub .hero-title,
  .hero--scrub .hero-lead {
    text-shadow: 0 1px 14px rgba(8, 14, 12, 0.7);
  }
  .hero-scrub-hint {
    display: none;
  }
  /* Scroll-Scrub direkt UNTER dem Header (an der Linie) fixieren statt bei
     top:0 hinter dem Header. --hero-sticky-top = Header-Höhe (per JS gesetzt). */
  .hero--scrub.hero-scrub-ready .hero-scrub-sticky {
    top: var(--hero-sticky-top, 0px);
    height: calc(100vh - var(--hero-sticky-top, 0px));
  }
}

.hero--compact {
  background: var(--forest);
  color: #e8e4d9;
  padding: clamp(2.5rem, 6vw, 4rem) var(--space);
}

.hero--compact .hero-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.hero--compact .hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0 0 1rem;
}

.hero-kicker {
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 242, 234, 0.75);
  margin: 0 0 1rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.35rem, 5.5vw, 3.75rem);
  line-height: 1.08;
  color: #faf8f2;
  margin: 0 0 1.25rem;
  max-width: 16ch;
}

.hero-lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: rgba(242, 240, 234, 0.88);
  max-width: 42ch;
  margin: 0 0 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.btn--primary {
  background: #faf8f2;
  color: var(--forest-deep);
  border-color: #faf8f2;
}

.btn--primary:hover {
  background: var(--accent-soft);
  color: #faf8f2;
  border-color: var(--accent);
}

.btn--ghost {
  background: transparent;
  color: #faf8f2;
  border-color: rgba(250, 248, 242, 0.45);
}

.btn--ghost:hover {
  border-color: #faf8f2;
  background: rgba(250, 248, 242, 0.06);
}

.hero-title--compact {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.85rem);
  font-weight: 500;
  margin: 0 0 0.75rem;
  color: #faf8f2;
}

.hero-desc--compact {
  margin: 0;
  max-width: 55ch;
  color: rgba(232, 228, 217, 0.88);
}

/* ——— Trust strip ——— */
.trust-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.trust-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 2.75rem) var(--space);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.trust-item {
  position: relative;
  padding-left: 1.4rem;
}

.trust-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    var(--accent),
    rgba(158, 125, 79, 0.25)
  );
}

.trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--forest);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

.trust-item span {
  font-size: 0.9375rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ——— Sections ——— */
.section {
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--space);
}

.section--alt {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-inner {
  max-width: var(--max);
  margin: 0 auto;
}

.section-head {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.9rem;
  font-weight: 600;
}

.section-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.section-intro {
  margin: 1.1rem 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.05rem;
}

.grid-2 {
  display: grid;
  gap: 2.5rem 3.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.welcome-media {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.figure-archive {
  margin: 0;
  width: 100%;
}

.figure-archive img {
  width: 100%;
  height: auto;
}

.figure-panorama {
  margin-top: 2rem;
}

.figure-panorama img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  object-position: center;
}

.prose {
  max-width: 65ch;
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 500;
  color: var(--ink);
  margin: 2rem 0 0.75rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0 0 1.1rem;
}

.prose ul {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
}

.figure-frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line-soft);
}

.figure-frame figcaption {
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--surface);
}

.stat-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.stat-panel div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--forest);
  font-weight: 600;
  line-height: 1;
}

.stat-panel div span {
  font-size: 0.875rem;
  color: var(--muted);
}

/* ——— Cards (Leistungen) ——— */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 1.9rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease),
    transform 0.35s var(--ease);
}

.card:hover {
  border-color: rgba(158, 125, 79, 0.3);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.card h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: var(--forest);
}

.card p {
  margin: 0;
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ——— Zentrierter Section-Kopf (Landingpage) ——— */
.section-head--center {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.section-head--center .section-eyebrow {
  justify-content: center;
}

.section-head--center .section-intro {
  margin-left: auto;
  margin-right: auto;
}

/* ——— USP / Nutzenversprechen ——— */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  margin-top: 2.75rem;
}

.usp {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.usp:hover {
  border-color: rgba(158, 125, 79, 0.3);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.usp__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.15rem;
}

.usp h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--forest);
  margin: 0 0 0.5rem;
}

.usp p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ——— Ablauf / Prozess-Schritte ——— */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.step {
  position: relative;
  padding: 2.25rem 1.75rem 2rem;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}

.step__num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
  display: block;
  margin-bottom: 0.85rem;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--forest);
  margin: 0 0 0.5rem;
}

.step p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ——— Logo-Block im Kontaktbereich (ersetzt die Karte) ——— */
.contact-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 2.25rem 1rem 1.5rem;
  margin: 0.5rem 0 0.75rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.contact-logo__mark {
  height: 140px;
  width: auto;
}

.contact-logo__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
}

.contact-logo__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.45rem;
}

.brands-panel {
  margin-top: 2.5rem;
  padding: 2.25rem 2rem;
  background: var(--forest);
  color: #e0dcd0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}

.brands-panel h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
  color: #faf8f2;
}

.brands-panel p {
  margin: 0 0 1rem;
  color: rgba(224, 220, 208, 0.88);
  max-width: 70ch;
}

.brand-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.brand-chips span {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(250, 248, 242, 0.25);
  color: #faf8f2;
}

/* ——— Partners ——— */
.partner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem 2rem;
}

@media (min-width: 700px) {
  .partner-list {
    grid-template-columns: 1fr 1fr;
  }
}

.partner-list li {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}

/* ——— Portrait schwarzweiß ——— */
.figure-bw {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--line);
}

.figure-bw::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(250, 248, 242, 0.06);
  pointer-events: none;
  z-index: 1;
}

.figure-bw img {
  width: 100%;
  filter: contrast(1.03) grayscale(1);
  mix-blend-mode: normal;
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}

.figure-bw:hover img {
  filter: contrast(1.06) grayscale(1);
  transform: scale(1.015);
}

.figure-bw figcaption {
  background: var(--forest-deep);
  color: rgba(232, 228, 217, 0.9);
}

/* ——— Meisterbrief-Karte ——— */
.meister-block {
  display: grid;
  gap: 2rem 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .meister-block {
    grid-template-columns: 1fr 1fr;
  }
}

.meister-card {
  position: relative;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: linear-gradient(145deg, #2a2420 0%, #1a1816 100%);
  border: 1px solid rgba(158, 125, 79, 0.28);
  box-shadow: 0 18px 48px rgba(10, 14, 12, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
  aspect-ratio: 4 / 5;
  max-height: 600px;
  margin-inline: auto;
}

.meister-card:hover {
  box-shadow: 0 26px 64px rgba(10, 14, 12, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: translateY(-3px);
}

.meister-card a {
  display: block;
  height: 100%;
  text-decoration: none;
}

.meister-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0.97;
  transition: opacity 0.35s var(--ease), transform 0.5s var(--ease);
}

.meister-card:hover img {
  opacity: 1;
  transform: scale(1.02);
}

.meister-card__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.2rem;
  background: linear-gradient(transparent, rgba(8, 10, 9, 0.92));
  color: #f0ebe2;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.meister-card__cap strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  color: #faf8f2;
}

.meister-strip {
  display: block;
  width: 3px;
  height: 2.5rem;
  background: linear-gradient(
    180deg,
    var(--meister-accent),
    rgba(158, 125, 79, 0.9)
  );
  margin-bottom: 0.75rem;
}

/* ——— Kompetenz: Text + Bild auf gleicher Höhe ——— */
.kompetenz-layout {
  display: grid;
  gap: 2.5rem 3.5rem;
  align-items: stretch;
}

.kompetenz-head {
  margin-bottom: 1.75rem;
}

.kompetenz-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kompetenz-media {
  margin: 0;
  align-self: start; /* nicht auf Texthöhe strecken -> Panorama nicht verzerren */
}

.kompetenz-media img {
  width: 100%;
  height: auto; /* volles (breites) Panorama zeigen, nichts beschneiden */
  display: block;
}

@media (min-width: 900px) {
  .kompetenz-layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* ——— Werkstatt + Makro ——— */
.studio-split {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 800px) {
  .studio-split {
    grid-template-columns: 1.45fr 1fr;
    align-items: stretch;
  }
}

.studio-shot {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
  min-height: 220px;
}

.studio-shot--hero {
  min-height: 280px;
}

.studio-shot img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: 50% 55%;
  transition: transform 0.65s var(--ease);
}

.studio-shot:hover img {
  transform: scale(1.02);
}

.studio-shot__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.15rem;
  font-size: 0.875rem;
  color: rgba(250, 248, 242, 0.92);
  background: linear-gradient(transparent, rgba(21, 41, 37, 0.88));
}

.studio-macro {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}

.studio-macro a {
  display: block;
  line-height: 0;
  transition: opacity 0.3s var(--ease);
}

.studio-macro a:hover {
  opacity: 0.95;
}

.studio-macro img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
}

.studio-macro figcaption {
  padding: 1rem 1.15rem;
  font-size: 0.875rem;
  color: var(--muted);
}

/* ——— Showcase-Slider ——— */
.showcase {
  position: relative;
  margin-top: 0.5rem;
}

.showcase-viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  max-height: min(72vh, 660px);
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-lg);
  background: var(--forest-deep);
}

.showcase-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.65s var(--ease);
  pointer-events: none;
}

.showcase-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

/* Blurred-Fill-Bühne: füllt die Fläche mit einer unscharfen, abgedunkelten
   Kopie des Mediums – funktioniert für jedes Seitenverhältnis (Hoch-, Quer-
   und Videoformat). */
.showcase-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.2);
  filter: blur(30px) brightness(0.5) saturate(1.15);
  z-index: 0;
  pointer-events: none;
}

/* Eigentliches Medium: vollständig sichtbar, mittig schwebend. */
.showcase-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
}

.showcase-slide figcaption {
  z-index: 2;
}

.showcase-slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(transparent, rgba(8, 12, 11, 0.88));
  color: #f2f0ea;
  font-size: 0.9rem;
  line-height: 1.45;
}

.showcase-slide figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.showcase-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(250, 248, 242, 0.35);
  background: rgba(23, 28, 25, 0.55);
  backdrop-filter: blur(8px);
  color: #faf8f2;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}

.showcase-nav:hover {
  background: rgba(30, 59, 50, 0.75);
  border-color: rgba(250, 248, 242, 0.55);
  transform: translateY(-50%) scale(1.04);
}

.showcase-prev {
  left: 0.65rem;
}

.showcase-next {
  right: 0.65rem;
}

.section-block-media {
  /* Breite exakt an die tatsächliche Viewport-Breite koppeln (Höhe via
     aspect-ratio gedeckelt), damit das Medium mittig sitzt und die Pfeile
     symmetrisch am Bildrand liegen statt rechts im Leeren zu schweben. */
  max-width: calc(min(72vh, 660px) * 4 / 3);
  margin-left: auto;
  margin-right: auto;
}

.showcase-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 1.1rem;
}

.showcase-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.showcase-dots button.is-active {
  background: var(--forest);
  transform: scale(1.15);
}

.showcase-dots button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.showcase-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media (max-width: 599px) {
  .showcase-nav {
    width: 38px;
    height: 38px;
    font-size: 1.15rem;
  }
}

/* ——— Gallery ——— */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.85rem;
}

/* Zentrierte Variante: leere Spalten kollabieren (auto-fit) und die tatsächlich
   belegten Kacheln werden mittig ausgerichtet, statt links zu kleben. */
.gallery-grid--center {
  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content: center;
}

.gallery-grid a {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 4/3;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}

.gallery-grid a:hover img {
  transform: scale(1.05);
}

/* ——— CTA band ——— */
.cta-band {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: #e8e4d9;
  padding: clamp(3rem, 6vw, 4.25rem) var(--space);
  border-top: 1px solid rgba(158, 125, 79, 0.22);
}

.cta-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  align-items: center;
  justify-content: space-between;
}

.cta-inner p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  line-height: 1.25;
  color: #faf8f2;
  max-width: 30ch;
}

/* ——— Kontakt ——— */
.contact-layout {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.contact-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.contact-card h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  margin: 0 0 1rem;
  color: var(--forest);
}

.contact-lines {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
}

.form-grid {
  display: grid;
  gap: 1.15rem;
}

/* Verhindert, dass Formular-/Fieldset-Elemente über ihre intrinsische
   Mindestbreite die Kontakt-Karte auf Mobil aufblähen (horizontaler Überlauf). */
.contact-layout,
.contact-card,
.form-row {
  min-width: 0;
}

.form-row input,
.form-row textarea,
.captcha-box,
.captcha-box input[type="text"] {
  min-width: 0;
  max-width: 100%;
}

.form-row label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  color: var(--ink);
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--bg);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
    background 0.25s var(--ease);
}

.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-row textarea {
  min-height: 160px;
  resize: vertical;
}

.form-hint {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

/* ——— Datenschutz-Zustimmung ——— */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.form-check input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.1rem 0 0;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-check label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-soft);
  cursor: pointer;
}

.form-check a {
  color: var(--accent);
  text-decoration: underline;
}

/* ——— Captcha-Panel (Anti-Spam) ——— */
.captcha-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  padding: 1.15rem 1.2rem 1.25rem;
  margin: 0;
}

.captcha-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 0;
  margin-bottom: 0.7rem;
}

.captcha-question {
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}

.captcha-question strong {
  font-size: 1.1rem;
  color: var(--forest);
  letter-spacing: 0.02em;
}

.captcha-box input[type="text"] {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface);
  margin-bottom: 0.85rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.captcha-box input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.map-embed {
  margin-top: 1.5rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  min-height: 260px;
}

.map-suggest {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.75rem;
}

.map-suggest a {
  font-weight: 500;
}

/* ——— Impressum ——— */
.legal-block {
  max-width: var(--narrow);
}

.legal-block h1 {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 500;
  margin: 0 0 1.5rem;
}

.legal-block h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
}

.legal-block p,
.legal-block address {
  margin: 0 0 1rem;
  font-style: normal;
}

.notice-box {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  font-size: 0.95rem;
}

/* ——— Footer ——— */
.site-footer {
  background: var(--forest-deep);
  color: rgba(232, 228, 217, 0.8);
  padding: clamp(3rem, 5vw, 4rem) var(--space) 2rem;
  font-size: 0.9375rem;
  border-top: 1px solid rgba(158, 125, 79, 0.22);
}

.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}

@media (min-width: 800px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #faf8f2;
  margin: 0 0 0.75rem;
}

.footer-col h2 {
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(232, 228, 217, 0.55);
  margin: 0 0 1rem;
}

.footer-col p {
  margin: 0 0 0.5rem;
  line-height: 1.65;
}

.footer-col a {
  color: #e8e4d9;
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  margin-bottom: 0.5rem;
}

/* Unterer Footer: Copyright links, "powered by wowobot" rechts (Desktop/Tablet),
   dezente Trennlinie darüber. Mobil gestapelt und mittig. */
.footer-bottom {
  max-width: var(--max);
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(250, 248, 242, 0.12);
  font-size: 0.8125rem;
  color: rgba(232, 228, 217, 0.55);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.footer-copy {
  margin: 0;
}

.footer-powered {
  margin: 0;
  color: rgba(232, 228, 217, 0.55);
}

.footer-powered a {
  color: #22b8e0;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.footer-powered a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Mobil: untereinander und zentriert. */
@media (max-width: 640px) {
  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

/* ——— Lightbox ——— */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(12, 14, 13, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox img {
  max-width: min(94vw, 1100px);
  max-height: 88vh;
  border-radius: var(--radius);
}

.lightbox-close-b {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
}

.lightbox-cap {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  max-width: 90vw;
  font-size: 0.9rem;
}

.lightbox-cap:empty {
  display: none;
}

/* ——— Reveal on scroll ——— */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ——— Utilities ——— */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Phones (inkl. iPhone Pro/Max bis ~480px): Header-Marke verkleinern, damit
   Logo + Schriftzug + Menü-Button sicher in eine Zeile passen und der Schriftzug
   nicht unter den Menü-Button rutscht / abgeschnitten wird. */
@media (max-width: 480px) {
  .header-inner {
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 0.6rem;
  }
  .brand {
    gap: 0.5rem;
    min-width: 0;
  }
  .brand-logo {
    height: 40px;
  }
  .brand-sub {
    font-size: 0.5rem;
    letter-spacing: 0.05em;
  }
  .nav-toggle {
    flex-shrink: 0;
    padding: 0.45rem 0.7rem;
  }
}

@media (max-width: 799px) {
  .nav-toggle {
    display: block;
  }

  .nav-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid var(--line);
    display: none;
    padding: 0.5rem var(--space) 1.25rem;
  }

  .nav-wrap.is-open {
    display: block;
  }

  /* Rechtsseiten (Impressum/Datenschutz) haben nur den Menuepunkt
     "Startseite" und deshalb keinen Burger-Button. Ohne diese Regel
     bliebe die Navigation dort mobil unsichtbar. */
  body[data-page="legal"] .nav-wrap,
  body[data-page="privacy"] .nav-wrap {
    position: static;
    display: block;
    width: auto;
    background: none;
    border-bottom: 0;
    padding: 0;
  }

  .header-inner {
    flex-wrap: wrap;
    position: relative;
  }

  .brand {
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
  }

  .nav-primary {
    flex-direction: column;
  }

  /* Topbar auf Mobil: die 3 Infos (Straße · Ort · Telefon) in EINER Zeile
     nebeneinander statt umgebrochen — Schrift skaliert responsiv mit. */
  .topbar-inner {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0;
    padding: 0.5rem 0.6rem;
    font-size: clamp(0.5rem, 2.5vw, 0.8125rem);
    letter-spacing: 0.01em;
  }
  .topbar-inner > span {
    white-space: nowrap;
  }
  .topbar-inner > span + span::before {
    content: "·";
    opacity: 0.45;
    margin: 0 0.4rem;
  }

  .hero-title {
    max-width: none;
  }
}

@media print {
  .topbar,
  .site-header,
  .nav-toggle,
  .hero-actions,
  .showcase-nav,
  .showcase-dots,
  .lightbox {
    display: none !important;
  }

  body {
    background: #fff;
    font-size: 11pt;
    color: #000;
  }

  .section,
  .hero--compact {
    padding: 1rem 0;
  }
}