/* ════════════════════════════════════════════════════════════
   JUWELIER BEHRENDT — Design System
   Warm black · Champagne gold · Editorial serif
   ════════════════════════════════════════════════════════════ */

:root {
  /* Die Seite ist dark-only. Ohne diese Deklaration dunkeln mobile Browser
     (Chrome Auto Dark Theme, Samsung Internet) helle Flächen eigenmächtig ab. */
  color-scheme: only dark;

  --bg:        #0B0A08;
  --bg-soft:   rgba(20, 17, 14, 0.86);
  --surface:   rgba(25, 21, 17, 0.92);
  --line:      rgba(232, 206, 154, 0.14);
  --ink:       #EFE8DB;
  --muted:     #9C917E;
  --gold:      #C6A15B;
  /* Helligkeit 204,2 — bewusst knapp unter Blinks Force-Dark-Schwelle (205),
     damit Verlaufsflächen auch bei erzwungenem Dark-Mode gold bleiben. */
  --gold-hi:   #E8C994;
  --gold-lo:   #7A5A24;
  --gold-grad: linear-gradient(120deg, var(--gold-hi) 0%, var(--gold) 45%, #8F6B2E 100%);
  /* Hover-Grundfarbe der Buttons — tiefes Petrol als Gegenpol zum Gold. */
  --petrol:    #00414b;

  /* Display = Cinzel, eine Kapitalis nach denselben römischen Inschriften-
     Vorbildern wie Trajan. Kleinbuchstaben sind darin Kapitälchen, Überschriften
     lesen sich daher durchgehend als Versalien.
     Accent = Fraunces, nur noch kursiv für die zwei Notiz-Zeilen (Hero-Tagline,
     Kontakt-Hinweis) — Cinzel hat keinen Kursivschnitt. */
  --font-display: "Cinzel", Georgia, serif;
  --font-accent:  "Fraunces", Georgia, serif;
  --font-body:    "Manrope", -apple-system, sans-serif;

  --container: min(92vw, 1240px);
  --section-pad: clamp(6rem, 12vw, 11rem);
  --radius: 2px;

  --ease: cubic-bezier(0.65, 0.01, 0.15, 1);
  --dur: 0.9s;

  /* Zwei Stufen für gesperrte Versal-Kleinschrift: Labels, Bildunterschriften
     und Zähler auf --label, Navigation, Knöpfe und Fußzeile auf --label-lg.
     Vorher lagen hier acht Grade zwischen 10,9 und 13,6 px nebeneinander. */
  --label: 0.72rem;
  --label-lg: 0.8rem;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
html.lenis { height: auto; scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* iOS/Safari kann trotz body overflow-x:hidden bei transformierten/fixen
   Ebenen minimal horizontal pannen. Clip auf html+body klemmt die Seite hart
   auf Viewport-Breite, damit mobiles Scrollen nicht seitlich wackelt. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9 0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}

::selection { background: var(--gold); color: var(--bg); }

/* Sichtbarer Tastaturfokus — die Markenlogos sind jetzt Links und brauchen
   eine Fokusmarke, die auch auf Bildflächen erkennbar ist. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }

.container { width: var(--container); margin-inline: auto; }
.section { padding-block: var(--section-pad); position: relative; }
main, .footer { position: relative; z-index: 1; }

/* Mobile Safari: Grid/Flex-Kinder dürfen nicht über ihre Container hinaus
   min-content-breit werden (z. B. lange Headline-Wörter in Cinzel). */
.container > *,
.werte__grid > *,
.trauringe__wrap > *,
.gold__wrap > *,
.kontakt__intro > *,
.kontakt__grid > *,
.footer__meta > * {
  min-width: 0;
}

/* ── Licht-Ringe (Hintergrund) ─────────────────────────────── */
.bg-rings {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  max-width: 100vw;
  contain: paint;
}
.bg-rings__scene {
  position: absolute;
  width: min(62vw, 820px);
  height: auto;
  right: -12vw;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.16;
  filter: drop-shadow(0 0 60px rgba(232, 195, 125, 0.16));
}
.bg-rings__scene g { will-change: transform; }
@media (max-width: 900px) {
  .bg-rings__scene {
    width: 110vw;
    right: -40vw;
    opacity: 0.12;
  }
}

/* ── Preloader ─────────────────────────────────────────────── */
.preloader {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity 0.8s var(--ease), visibility 0.8s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__inner { text-align: center; }
.preloader__logo {
  display: block;
  width: clamp(220px, 32vw, 340px);
  margin-inline: auto;
  animation: fadeUp 1.2s var(--ease) both;
}
.preloader__line {
  display: block;
  height: 1px;
  margin-top: 1.5rem;
  background: var(--gold-grad);
  animation: lineGrow 1.6s var(--ease) 0.2s both;
  transform-origin: left;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Cursor ────────────────────────────────────────────────── */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 2500;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold-hi);
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.3s;
  opacity: 0;
}
.cursor.is-active { opacity: 1; }
.cursor.is-hover { width: 44px; height: 44px; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ── Navigation ────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  transition: background 0.5s var(--ease), padding 0.5s var(--ease),
              border-color 0.5s var(--ease), transform 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  padding-block: 0.85rem;
  background: rgba(11, 10, 8, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-100%); }

.nav__logo { display: flex; align-items: center; }
.nav__logo img {
  height: clamp(34px, 4vw, 44px);
  width: auto;
  transition: height 0.5s var(--ease);
}
.nav.is-scrolled .nav__logo img { height: 32px; }

.nav__links { display: flex; gap: clamp(1.2rem, 2.5vw, 2.4rem); }
.nav__links a {
  font-size: var(--label-lg);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  transition: color 0.35s;
  padding-block: 0.3rem;
}
.nav__links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta {
  font-size: var(--label-lg);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-hi);
  border: 1px solid rgba(198, 161, 91, 0.4);
  padding: 0.7rem 1.5rem;
  border-radius: 100px;
  transition: background 0.4s var(--ease), color 0.4s, border-color 0.4s;
}
.nav__cta:hover { background: var(--petrol); border-color: var(--petrol); color: var(--ink); }

/* Trefffläche 44x44: Der Knopf maß 44x26 und lag damit unter dem, was ein
   Finger zuverlässig trifft. Die zwei Striche darin bleiben unverändert. */
.nav__burger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 7px;
  width: 44px; height: 44px;
  padding: 0;
  z-index: 1200;
}
.nav__burger span {
  width: 28px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.4s var(--ease);
}
.nav__burger.is-open span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav__burger.is-open span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* ── Mobile menu ───────────────────────────────────────────── */
.menu {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(11, 10, 8, 0.97);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.5rem, 6vw, 4rem);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__links { display: flex; flex-direction: column; gap: 0.4rem; }
.menu__links a {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6.6vw, 2.7rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding-block: 0.35rem;
  transform: translateY(30px); opacity: 0;
  transition: transform 0.7s var(--ease), opacity 0.7s var(--ease), color 0.3s;
}
.menu__links a:hover { color: var(--gold-hi); }
.menu__links a em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--label);
  color: var(--gold);
  letter-spacing: 0.2em;
  vertical-align: super;
  margin-right: 0.8rem;
}
.menu.is-open .menu__links a { transform: none; opacity: 1; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: 0.08s; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.14s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.20s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: 0.26s; }
.menu.is-open .menu__links a:nth-child(5) { transition-delay: 0.32s; }
.menu.is-open .menu__links a:nth-child(6) { transition-delay: 0.38s; }
.menu__foot {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--label-lg);
  letter-spacing: 0.05em;
  display: flex; flex-direction: column; gap: 0.3rem;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center;
  position: relative;
  padding: clamp(7rem, 14vh, 10rem) 0 2rem;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
/* Ladenfront als Hintergrundebene. Stark abgedunkelt und entsättigt, damit sie
   sich unter Glow und Licht-Ringe legt statt sie zu überlagern. Die Maske
   blendet links (Textspalte) sowie oben und unten komplett aus — Überschrift,
   Header und der Übergang zum Marken-Marquee bleiben unberührt. */
.hero__photo {
  position: absolute;
  inset: 0;
  background: url("../assets/img/laden-nacht.webp") center 38% / cover no-repeat;
  opacity: 0.2;
  filter: grayscale(0.5) sepia(0.3) brightness(0.68) contrast(1.05);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, transparent 26%, #000 76%),
    linear-gradient(to bottom, transparent 0%, #000 28%, #000 60%, transparent 94%);
  mask-image:
    linear-gradient(to right, transparent 0%, transparent 26%, #000 76%),
    linear-gradient(to bottom, transparent 0%, #000 28%, #000 60%, transparent 94%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero__glow {
  position: absolute;
  top: -20%; left: 50%;
  width: 90vw; height: 90vw;
  max-width: 1100px; max-height: 1100px;
  transform: translateX(-50%);
  background: radial-gradient(circle at center, rgba(198, 161, 91, 0.13) 0%, transparent 60%);
}
.hero__content {
  width: var(--container);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.hero__overline {
  display: flex; align-items: center; gap: 1.2rem;
  font-size: clamp(0.68rem, 1.4vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(1.5rem, 3.5vh, 2.8rem);
}
.hero__overline .rule { height: 1px; width: clamp(2rem, 6vw, 5rem); background: var(--gold-grad); opacity: 0.7; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  /* Kapitalis baut höher als eine Antiqua mit Ober-/Unterlängen — Grad kleiner,
     Zeilenabstand größer, Tracking positiv statt negativ. */
  font-size: clamp(2.3rem, 7.2vw, 6.2rem);
  line-height: 1.16;
  letter-spacing: 0.015em;
  margin-bottom: clamp(1.6rem, 4vh, 2.8rem);
}
/* Betonte Wörter in Überschriften: aufrecht und einfarbig.
   Kursiv + Goldverlauf auf dem jeweils letzten Wort zog sich vorher durch
   jede Sektion und wirkte dadurch beliebig. Die Betonung trägt jetzt das
   Schriftgewicht; Gold bleibt Labels, Zahlen und Linien vorbehalten. */
.hero__title em, .section__title em, .kontakt__title em, .werte__quote em {
  font-style: normal;
  font-weight: 500;
  color: inherit;
}
.hero__sub {
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin-bottom: clamp(2rem, 4.5vh, 3.2rem);
}
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero__foot {
  width: var(--container);
  margin: auto auto 0;
  padding-top: 3rem;
  display: flex; justify-content: space-between; align-items: flex-end;
  position: relative; z-index: 2;
}
.hero__scroll {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-size: var(--label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll i {
  display: block;
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll i::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--gold-hi);
  animation: scrollHint 2.2s var(--ease) infinite;
}
@keyframes scrollHint {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}
.hero__tag {
  text-align: right;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2.4rem;
  font-size: var(--label-lg);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 100px;
  overflow: hidden;
  transition: color 0.45s var(--ease), border-color 0.45s;
  isolation: isolate;
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  transition: transform 0.55s var(--ease);
}
.btn--solid { color: var(--bg); }
.btn--solid::before { background: var(--gold-grad); }
/* Gold-Verlauf → Petrol lässt sich als background nicht animieren (Verlauf auf
   Volltonfarbe ist nicht interpolierbar). Deshalb liegt Petrol als eigene Ebene
   darüber und wird eingeblendet; sie skaliert mit, damit die Kanten decken. */
.btn--solid::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--petrol);
  opacity: 0;
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}
.btn--solid:hover::before, .btn--solid:hover::after { transform: scale(1.06); }
.btn--solid:hover::after { opacity: 1; }
.btn--solid:hover { color: var(--ink); }
.btn--ghost {
  color: var(--ink);
  border: 1px solid rgba(239, 232, 219, 0.25);
}
.btn--ghost::before { background: var(--petrol); transform: scaleX(0); transform-origin: right; border-radius: 0; }
/* Petrol ist dunkel — die Schrift bleibt beim Wischen hell statt umzuschlagen. */
.btn--ghost:hover { color: var(--ink); border-color: var(--petrol); }
.btn--ghost:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--light { border-color: rgba(11, 10, 8, 0.35); color: #1A1610; }
.btn--light::before { background: var(--petrol); }
.btn--light:hover { color: var(--gold-hi); }

/* ── Marquee ───────────────────────────────────────────────── */
.marquee {
  display: flex;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 1.6rem;
  background: var(--bg-soft);
  contain: paint;
}
.marquee__track {
  display: flex; align-items: center; gap: 3.2rem;
  padding-right: 3.2rem;
  flex-shrink: 0;
  animation: marquee 60s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Seit die Logos verlinkt sind, ist der <a> das Flex-Item — nicht mehr das Bild. */
.marquee__brand {
  display: flex;
  flex-shrink: 0;
  border-radius: var(--radius);
}
.marquee__track img {
  /* Die Logos sind auf ihre Zeichnung beschnitten (die Originale liegen unter
     _marken-originale/). Vorher steckten bis zu 78 % transparenter Rand in den
     Dateien — bei gleicher Box wurde G-Shock dadurch 11 px hoch dargestellt und
     Grafenberg 48 px. Jetzt ergibt gleiche Höhe auch gleich große Marken. */
  height: clamp(22px, 2vw, 28px);
  width: auto;
  max-width: min(230px, 46vw);
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.35s var(--ease);
}
.marquee__brand:hover img, .marquee__brand:focus-visible img { opacity: 1; }
.marquee__track i { color: var(--gold); font-size: 0.55rem; font-style: normal; opacity: 0.7; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ── Section primitives ────────────────────────────────────── */
.section__label {
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
  display: flex; align-items: center; gap: 0.9rem;
}
.section__label em {
  font-style: normal;
  color: var(--gold);
  font-family: var(--font-display);
}
.section__label::after {
  content: "";
  height: 1px; width: 3.5rem;
  background: var(--line);
}
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.95rem, 4.7vw, 3.7rem);
  line-height: 1.18;
  letter-spacing: 0.015em;
}
.section__head { margin-bottom: clamp(3rem, 7vh, 5rem); }
.section__text {
  color: var(--muted);
  max-width: 36rem;
  margin-top: 1.8rem;
}
.section__text--head { margin-top: 1.6rem; }

/* line-split reveal */
.line { display: block; overflow: hidden; }
.line > span { display: inline-block; will-change: transform; }

/* ── Photo component ───────────────────────────────────────── */
.photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04) brightness(0.94);
  transition: filter 0.6s var(--ease), transform 1.2s var(--ease);
}
.photo::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(11, 10, 8, 0.45), transparent 45%),
              radial-gradient(ellipse at center, transparent 55%, rgba(11, 10, 8, 0.25));
}
.photo:hover img { filter: saturate(1) contrast(1.04) brightness(1); transform: scale(1.03); }
.photo figcaption {
  position: absolute; left: 1.2rem; bottom: 1rem; z-index: 1;
  font-size: var(--label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-hi);
}
.photo--frame { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }

/* ── Vollbild-Band (Ringleuchten) ──────────────────────────── */
.band {
  position: relative;
  height: clamp(60vh, 78vh, 860px);
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.band img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.05);
}
.band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11, 10, 8, 0.92) 0%, rgba(11, 10, 8, 0.25) 45%, transparent 75%);
}
.band__caption {
  position: absolute;
  left: 0; right: 0; bottom: clamp(2rem, 6vh, 4.5rem);
  z-index: 1;
  width: var(--container);
  margin-inline: auto;
}
.band__caption span {
  display: block;
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.band__caption em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.7vw, 2.05rem);
  line-height: 1.38;
  letter-spacing: 0.015em;
  color: var(--ink);
  max-width: 24ch;
  display: block;
}

/* Eng wird es früher, als es aussieht: Das Karussell steht in einer Rasterspalte
   und ist bei 1100px Fensterbreite nur noch 430px breit. Bildtitel und
   Fortschrittsstriche saßen beide unten und überlappten dort — bei 375px um
   115px, die Striche zeichneten sich sichtbar durch die Versalien. */
@media (max-width: 1200px) {
  .karussell__titel  { bottom: 2.7rem; }
  .karussell__punkte { left: 1.2rem; right: auto; bottom: 1.1rem; }
}

/* ── Werte ─────────────────────────────────────────────────── */
.werte { background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.werte__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 3.9vw, 3rem);
  line-height: 1.3;
  letter-spacing: 0.015em;
  max-width: 34ch;
  margin-bottom: clamp(3rem, 7vh, 5rem);
}
.werte__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.werte__grid--photo { align-items: center; }
.werte__photo { aspect-ratio: 10 / 7; }

/* ── Karussell (Unser Haus) ─────────────────────────────────────
   Bilder liegen gestapelt und blenden per Deckkraft um; das aktive Bild
   zoomt langsam (Ken-Burns). Ohne JavaScript steht das erste Bild.
   Wichtig: .photo::after liefert bereits die Vignette — hier kommt KEINE
   zweite Abdunklung dazu. Der .photo-Hover-Zoom ist im Karussell
   abgeschaltet, er würde sonst gegen den Ken-Burns-Zoom arbeiten. */
.karussell { position: relative; }
.karussell .karussell__bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.karussell .karussell__bild.is-aktiv {
  opacity: 1;
  z-index: 1;
}
/* Das vorige Bild bleibt unter dem neuen voll sichtbar, bis die Blende
   durch ist — sonst dippt die Fläche beim Wechsel kurz ins Dunkle. */
.karussell .karussell__bild.is-vorher { opacity: 1; z-index: 0; }
/* Kein Ken-Burns-Zoom: Beim Bildwechsel sprang das alte Bild sichtbar auf
   seine Ausgangsgröße zurück. Der .photo-Hover-Zoom bleibt im Karussell
   ebenfalls aus — die Fläche steht vollkommen ruhig. */
.photo.karussell:hover img { transform: none; }

/* Bildunterschrift unten links — gleiche Sprache wie die übrigen
   figcaptions, mit goldenem Auftakt-Strich. */
.karussell__titel {
  max-width: calc(100% - 2.4rem);
  position: absolute; left: 1.2rem; bottom: 1.1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: var(--label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-hi);
  transition: opacity 0.35s var(--ease);
}
.karussell__titel::before {
  content: "";
  width: 1.6rem; height: 1px;
  background: var(--gold-grad);
  flex-shrink: 0;
}
.karussell__titel.is-wechsel { opacity: 0; }

/* Zähler oben rechts im Stil der Abschnittsnummern. */
.karussell__zaehler {
  /* Eigene Hinterlegung: Der Verlauf von .photo::after greift nur unten, oben
     rechts stand der Zähler über hellen Motiven bei 1,25:1 und war schlicht weg. */
  background: rgba(11, 10, 8, 0.82);
  padding: 0.28rem 0.62rem;
  border-radius: 14px;
  position: absolute; top: 1rem; right: 1.2rem; z-index: 2;
  font-family: var(--font-display);
  font-size: var(--label-lg);
  letter-spacing: 0.14em;
  color: var(--muted);
}
.karussell__zaehler em {
  font-style: normal;
  color: var(--gold-hi);
}

/* Punkte unten rechts: feine Striche, der aktive füllt sich im Takt
   des Bildwechsels golden — pausiert, solange die Maus darüber steht. */
.karussell__punkte {
  position: absolute; right: 1.2rem; bottom: 1.2rem; z-index: 2;
  display: flex; gap: 0.5rem;
}
/* Sichtbar bleibt der 24x2px-Strich, angetippt werden 24x24px: Der Knopf
   selbst war nur 2 Pixel hoch — auf dem Handy die einzige Steuerung und mit
   dem Finger nicht zu treffen. Der Strich liegt deshalb jetzt im ::before,
   der Fortschritt im ::after darüber, beide mittig im hohen Knopf. */
.karussell__punkte button {
  position: relative;
  width: 24px; height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.karussell__punkte button::before,
.karussell__punkte button::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%; margin-top: -1px;
  height: 2px;
}
.karussell__punkte button::before {
  background: rgba(239, 232, 219, 0.28);
  transition: background 0.35s var(--ease);
}
.karussell__punkte button::after {
  background: var(--gold-grad);
  transform: scaleX(0);
  transform-origin: left;
}
.karussell__punkte button.is-aktiv::after {
  animation: karussellTakt 4.5s linear both;
}
.karussell:hover .karussell__punkte button.is-aktiv::after,
.karussell:focus-within .karussell__punkte button.is-aktiv::after { animation-play-state: paused; }
@keyframes karussellTakt { to { transform: scaleX(1); } }
.karussell__punkte button:hover::before { background: rgba(239, 232, 219, 0.55); }

/* Pfeile: Geisterkreise wie die Ghost-Buttons, nur auf Geräten mit
   echtem Hover — Touch behält Wischen und Punkte. */
.karussell__pfeil {
  position: absolute; top: 50%; z-index: 2;
  width: 42px; height: 42px;
  margin-top: -21px;
  border: 1px solid rgba(239, 232, 219, 0.3);
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  color: var(--ink);
  background: rgba(11, 10, 8, 0.35);
  opacity: 0;
  transition: opacity 0.4s var(--ease), background 0.4s, border-color 0.4s, color 0.4s;
}
.karussell__pfeil--zurueck { left: 1rem; }
.karussell__pfeil--vor { right: 1rem; }
.karussell__pfeil svg { width: 15px; height: 15px; }
/* Auf Touch gibt es kein Hover: Dort waren die Pfeile bisher gar nicht
   vorhanden und es blieb nur der 2px-Strich zum Blättern. Jetzt stehen sie
   dauerhaft, am Zeigergerät weiterhin erst beim Überfahren. */
.karussell__pfeil { display: inline-flex; opacity: 0.85; }
@media (hover: hover) {
  .karussell__pfeil { opacity: 0; }
  .karussell:hover .karussell__pfeil,
  .karussell__pfeil:focus-visible { opacity: 1; }
  .karussell__pfeil:hover {
    background: var(--petrol);
    border-color: var(--petrol);
    color: var(--gold-hi);
  }
}

.werte__grid--photo .werte__text { margin-bottom: 2.5rem; }
.werte__text { color: var(--muted); font-size: 1.1rem; }
.werte__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 4vw, 3.5rem);
}
.stat__num, .stat__plus {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--gold-hi);
}
.stat__label {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--label-lg);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Schmuck ───────────────────────────────────────────────── */
.schmuck__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: clamp(3rem, 6vh, 5rem);
}
.card {
  background: rgba(13, 11, 9, 0.82);
  padding: clamp(2rem, 4vw, 3.2rem);
  position: relative;
  transition: background 0.5s var(--ease);
}
.card:hover { background: var(--surface); }
.card__index {
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  margin: 1.2rem 0 0.9rem;
}
.card p { color: var(--muted); font-size: 0.98rem; margin-bottom: 1.8rem; }
.card__brands { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Die Pille zeichnet der Link, nicht das <li> — sonst wäre nur der Text
   klickbar und nicht die ganze Fläche. */
.card__brands li { display: flex; }
.card__brands a {
  font-size: var(--label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  transition: border-color 0.35s, color 0.35s;
}
.card:hover .card__brands a { border-color: rgba(198, 161, 91, 0.45); }
.card__brands a:hover, .card__brands a:focus-visible { color: var(--gold-hi); border-color: var(--gold); }

/* Markenname im Fließtext */
.brand-link {
  color: inherit;
  border-bottom: 1px solid rgba(198, 161, 91, 0.45);
  transition: color 0.3s, border-color 0.3s;
}
.brand-link:hover, .brand-link:focus-visible { color: var(--gold-hi); border-color: var(--gold-hi); }

/* Fördeleben */
.foerdeleben {
  background: var(--gold-grad);
  border-radius: var(--radius);
  color: #1A1610;
  overflow: hidden;
}
.foerdeleben__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 2rem;
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem);
}
.foerdeleben__label {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 1rem;
}
/* Original-Wortmarke von foerdeleben.de (gleiche GbR), freigestellt als
   dunkle Tinte — passt zur Textfarbe der Goldkarte. */
.foerdeleben__title {
  margin: 0.4rem 0 1.8rem;
  line-height: 0;
}
/* Shop-Button und Social-Icons in einer Zeile; bricht auf schmalen Karten um. */
.foerdeleben__actions {
  display: flex;
  align-items: center;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
}
.foerdeleben__social { display: flex; gap: 0.6rem; }
.foerdeleben__social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(11, 10, 8, 0.35);
  border-radius: 100px;
  color: #1A1610;
  transition: background 0.4s var(--ease), border-color 0.4s, color 0.4s;
}
.foerdeleben__social a:hover,
.foerdeleben__social a:focus-visible {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--ink);
}
.foerdeleben__social svg { width: 21px; height: 21px; }

.foerdeleben__link { display: block; }
.foerdeleben__title img {
  width: min(100%, 34rem);
  height: auto;
  transition: opacity 0.35s var(--ease);
}
.foerdeleben__link:hover img, .foerdeleben__link:focus-visible img { opacity: 0.72; }
.foerdeleben__desc {
  max-width: 32rem;
  font-weight: 400;
  opacity: 0.85;
  margin-bottom: 2.2rem;
}
.foerdeleben__photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(26, 22, 16, 0.35);
  transform: rotate(1.5deg);
  transition: transform 0.6s var(--ease);
  aspect-ratio: 4 / 5;
  max-width: 380px;
  margin-inline: auto;
}
.foerdeleben:hover .foerdeleben__photo { transform: rotate(0deg) scale(1.015); }
.foerdeleben__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ── Trauringe ─────────────────────────────────────────────── */
.trauringe { background: var(--bg-soft); border-block: 1px solid var(--line); }
/* Benannte Bereiche statt starrer Reihenfolge: Am Schreibtisch steht das Foto
   links neben Überschrift und Text, auf dem Handy schiebt sich das Foto
   zwischen Überschrift und Fließtext. So endet der Abschnitt schmal wie breit
   auf dem Knopf und nicht auf einem Bild hinter dem Aufruf zum Besuch. */
.trauringe__wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas:
    "bild kopf"
    "bild text";
  column-gap: clamp(2.5rem, 6vw, 6rem);
  row-gap: clamp(1.4rem, 2.5vw, 2.2rem);
  align-content: center;
}
.trauringe__head   { grid-area: kopf; align-self: end; }
.trauringe__body   { grid-area: text; align-self: start; }
.trauringe__visual { grid-area: bild; position: relative; align-self: center; }
.trauringe__visual .photo { aspect-ratio: 4 / 4.4; max-width: 480px; }
.trauringe__badge {
  position: absolute;
  /* An der Bildkante ausrichten, nicht an der Spalte: Das Foto ist auf 480px
     gedeckelt, die Spalte kann breiter sein. */
  left: clamp(300px, 74%, 430px);
  bottom: -2rem;
  width: clamp(110px, 12vw, 160px);
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
  opacity: 0.95;
}
/* Gleiche rechte Kante wie .section__text (36rem), sonst enden die Haarlinien
   53px weiter rechts als der Text, gegen den sie ausgerichtet wirken sollen. */
.feature-list { margin: 2rem 0 3.2rem; display: grid; gap: 0.95rem; max-width: 36rem; }
.feature-list li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Genau ZWEI Flex-Kinder: Raute und Textblock. Vorher war jedes <strong>, jeder
   Link und jedes Textstück ein eigenes Flex-Element — der gap riss Lücken
   mitten in den Satz, und auf schmalen Displays lief die Zeile aus dem Bild
   (html steht auf overflow-x:hidden, sie wurde einfach abgeschnitten). */
.feature-list li {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.feature-list li > span { min-width: 0; }
.feature-list li strong { color: var(--ink); font-weight: 500; }
.feature-list i { color: var(--gold); font-style: normal; font-size: 0.6rem; flex-shrink: 0; }

/* ── Uhren ─────────────────────────────────────────────────── */
/* Marken-Raster statt Liste. Die 1px-Lücken über der Linienfarbe zeichnen das
   Gitter — jede Kachel deckt sich selbst mit dem Seitenhintergrund ab. */
.uhren__grid {
  display: grid;
  /* Feste 3 Spalten: neun Marken ergeben exakt 3×3, keine leere Restkachel. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.uhren__row {
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2.4rem;
  min-height: clamp(150px, 17vh, 200px);
  height: 100%;
  padding: 2rem 1.4rem;
  background: var(--bg);
  position: relative;
  text-align: center;
}
.uhren__row::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(198, 161, 91, 0.1), transparent 72%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.uhren__row:hover::before { opacity: 1; }
.uhren__logo {
  /* Zwei verschiedene Ursachen, zwei verschiedene Mittel:
     (1) Der leere Rand in den Dateien ist weg — sie sind auf ihre Zeichnung
         beschnitten, deshalb genügt eine einheitliche Boxhöhe.
     (2) Die Logos sind aber unterschiedlich AUFGEBAUT: Ebel, Citizen, Bering,
         Casio und G-Shock sind reine Wortmarken, Hamilton und Tissot tragen ein
         Zeichen über dem Schriftzug, Certina eine Claim-Zeile und ein Wappen.
         Bei gleicher Boxhöhe ist deren Schriftzug nur halb so hoch. Der Faktor
         gleicht auf gleiche Versalhöhe aus.
     Er sitzt bewusst auf transform und nicht auf der Höhe: Auf der Höhe würde er
     die Zeilen des 3x3-Rasters verschieben (das war schon einmal der Fehler). */
  height: clamp(24px, 3.2vw, 36px);
  width: auto;
  max-width: 80%;
  object-fit: contain;
  transform: scale(var(--logo-scale, 1));
  transform-origin: center;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.uhren__logo--ebel     { --logo-scale: 0.78; }
.uhren__logo--hamilton { --logo-scale: 1.80; }
.uhren__logo--tissot   { --logo-scale: 1.35; }
.uhren__logo--certina  { --logo-scale: 1.45; }
.uhren__logo--citizen  { --logo-scale: 0.76; }
.uhren__logo--bering   { --logo-scale: 0.85; }
.uhren__logo--casio    { --logo-scale: 0.85; }
.uhren__logo--gshock   { --logo-scale: 0.85; }
/* Maurice Lacroix trägt unter dem Schriftzug die Zeile "Manufacture
   Horlogère Suisse" — der Schriftzug selbst füllt nur knapp die Hälfte
   der Datei und braucht deshalb etwas mehr. */
.uhren__logo--ml       { --logo-scale: 1.25; }
.uhren__row:hover .uhren__logo { opacity: 1; transform: scale(calc(var(--logo-scale, 1) * 1.05)); }
/* Fallback, solange für eine Marke keine Logodatei vorliegt. */
.uhren__logo--wordmark {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  letter-spacing: 0.05em;
  line-height: 1.1;
  color: var(--ink);
  max-width: 100%;
}
.uhren__note {
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  transition: color 0.4s;
}
.uhren__row:hover .uhren__note { color: var(--gold); }
.uhren__preview {
  position: fixed;
  top: 0; left: 0;
  width: clamp(240px, 22vw, 340px);
  aspect-ratio: 10 / 7;
  border-radius: var(--radius);
  overflow: hidden;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
  border: 1px solid var(--line);
  will-change: transform, opacity;
}
.uhren__preview.is-visible { opacity: 1; }
.uhren__preview img { width: 100%; height: 100%; object-fit: cover; }
@media (pointer: coarse) { .uhren__preview { display: none; } }

/* ── Werkstatt ─────────────────────────────────────────────── */
.werkstatt { background: var(--bg-soft); border-block: 1px solid var(--line); }
.werkstatt__strip {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}
.werkstatt__img { height: clamp(220px, 28vw, 360px); }

.werkstatt__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
/* Fünf Leistungen auf einem Vierer-Raster: Der Edelmetallankauf steht vorn und
   nimmt die erste Zeile ganz ein, statt eine Restkachel übrig zu lassen.
   (Zwei Spalten ab 1080px abwärts: 1 + 2 + 2 geht ebenfalls glatt auf.) */
.werkstatt__grid > .wcard:first-child { grid-column: 1 / -1; }
/* Einzeilig nebeneinander erst dort, wo die Breite dafür sicher reicht —
   darunter bleibt es die normale Karte mit Icon über der Überschrift. */
@media (min-width: 1081px) {
  .werkstatt__grid > .wcard:first-child {
    display: flex;
    align-items: baseline;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .werkstatt__grid > .wcard:first-child svg { flex-shrink: 0; margin-bottom: 0; align-self: center; }
  .werkstatt__grid > .wcard:first-child h3 { flex-shrink: 0; margin-bottom: 0; }
  .werkstatt__grid > .wcard:first-child p { max-width: 52ch; }
}
.wcard {
  background: var(--bg-soft);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  transition: background 0.5s var(--ease);
}
.wcard:hover { background: var(--surface); }
.wcard svg {
  width: 42px; height: 42px;
  color: var(--gold);
  margin-bottom: 1.6rem;
  transition: transform 0.5s var(--ease);
}
.wcard:hover svg { transform: translateY(-4px); }
.wcard h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  margin-bottom: 0.8rem;
}
.wcard p { color: var(--muted); font-size: 0.92rem; }

/* ── Goldankauf ────────────────────────────────────────────── */
.gold {
  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(198, 161, 91, 0.1), transparent 60%);
}
.gold__wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: start;
}
.section__label--gold em { color: var(--gold-hi); }
.gold__photo { aspect-ratio: 10 / 6.5; margin-top: 2.5rem; }
.gold__points { display: grid; gap: 0; border-top: 1px solid var(--line); }
.gold__points li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}
.gold__points li h3, .gold__points li p { grid-column: 2; }
.gold__num { grid-row: 1 / span 2; }
.gold__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: var(--gold-hi);
  line-height: 1.2;
}
.gold__points h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}
.gold__points p { color: var(--muted); font-size: 0.95rem; }

/* ── Kontakt ───────────────────────────────────────────────── */
.kontakt {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}
.kontakt__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7.6vw, 6.4rem);
  line-height: 1.12;
  letter-spacing: 0.015em;
  margin-bottom: clamp(3.5rem, 8vh, 6rem);
}
.kontakt__intro {
  display: grid;
  /* Links der Begrüßungstext (durch max-width: 30ch ohnehin schmal),
     rechts das Blasenfeld — dort, wo vorher das Inhaber-Porträt stand. */
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin-bottom: clamp(3rem, 7vh, 5rem);
}

/* ── Mitarbeiter-Blasen ────────────────────────────────────────
   Aufbau je Blase: <button> (Rasterzelle, feste Quadratform)
     └ .bubble__float  — trägt NUR die Schwebe-Animation
       └ .bubble__disc — trägt NUR die Vergrößerung beim Öffnen
   Die Trennung ist nötig, weil sich zwei transform-Werte am selben
   Element gegenseitig überschreiben würden. */
.team { margin: 0; }
.team__feld {
  /* Freies Feld: main.js setzt Position und Größe jeder Blase einzeln
     (versetzte Reihen, gestreute Größen, leichter Versatz). Deshalb hier
     kein grid — nur die Bühne. Die Höhe trägt ebenfalls das Skript ein. */
  position: relative;
  width: 100%;
}
.team__item {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
}
/* Die geöffnete Blase samt Text muss über den Nachbarn liegen. Der z-index
   gehört an die Zelle — die Blase selbst stapelt nur innerhalb ihrer Zelle. */
.team__item.is-open { z-index: 5; }

.bubble {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.bubble__float {
  position: absolute;
  inset: 0;
  /* --dauer, --verzoegerung und --hub setzt main.js je Blase zufällig,
     damit die Blasen nicht im Gleichschritt wippen. */
  animation: bubbleFloat var(--dauer, 6s) ease-in-out var(--verzoegerung, 0s) infinite;
}
@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--hub, 7px) * -1)); }
}
.bubble__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  transition: transform 0.55s var(--ease), border-color 0.45s, box-shadow 0.55s var(--ease);
}
.bubble__disc img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) brightness(0.92);
  transition: filter 0.5s var(--ease);
}
.bubble:hover .bubble__disc { border-color: rgba(198, 161, 91, 0.5); }
.bubble:hover .bubble__disc img { filter: none; }

/* Geöffnet: Blase wächst und legt sich über die Nachbarn. */
.bubble.is-open { z-index: 3; }
.bubble.is-open .bubble__disc {
  /* Faktor kommt je Blase aus main.js — nur so erreichen unterschiedlich
     große Blasen beim Öffnen dieselbe Endgröße. */
  transform: scale(var(--offen-skalierung, 1.9));
  border-color: var(--gold);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}
.bubble.is-open .bubble__disc img { filter: none; }

/* Text unter der Blase. Absolut positioniert, damit das Öffnen das Raster
   nicht verschiebt. Im offenen Zustand rutscht er um genau die Strecke nach
   unten, die der vergrößerte Kreis zusätzlich einnimmt — main.js liefert sie
   als --offen-versatz in Pixeln, passend zur Skalierung der jeweiligen Blase. */
.bubble__label {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.5rem);
  transform: translate(-50%, -6px);
  width: max-content;
  max-width: 220px;
  text-align: center;
  /* Eigener Grund: Der Text landet fast immer über einer Nachbarblase und
     wäre ohne Hinterlegung auf dem Foto nicht lesbar. */
  background: rgba(11, 10, 8, 0.92);
  border: 1px solid var(--line);
  padding: 0.5rem 1rem;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), top 0.5s var(--ease), transform 0.5s var(--ease);
}
.bubble__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  line-height: 1.15;
  color: var(--gold-hi);
}
.bubble__rolle {
  display: block;
  margin-top: 0.28rem;
  font-size: var(--label);
  line-height: 1.35;
  color: var(--muted);
}
.bubble.is-open .bubble__label {
  top: calc(100% + var(--offen-versatz, 20px) + 0.6rem);
  transform: translate(-50%, 0);
  opacity: 1;
}

@media (max-width: 560px) {
  /* Die Zielgröße beim Öffnen rechnet main.js aus der Feldbreite,
     hier bleibt nur die Typografie. */
  .bubble__label { max-width: 180px; }
  .bubble__name { font-size: 0.92rem; }
  .bubble__rolle { font-size: var(--label); }
}

.kontakt__welcome {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 30ch;
}

.kontakt__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.5rem, 5vh, 4rem);
}
.kontakt__block h3 {
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.kontakt__block p { color: var(--muted); }
.kontakt__link {
  display: inline-block;
  margin-top: 1.2rem;
  color: var(--ink);
  font-size: var(--label-lg);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.25rem;
  transition: color 0.3s;
}
.kontakt__link:hover { color: var(--gold-hi); }
.kontakt__hours { display: flex; flex-direction: column; gap: 0.2rem; }
.kontakt__time {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink);
  line-height: 1.3;
}
.kontakt__note { margin-top: 1.2rem; font-size: 0.9rem; font-style: italic; font-family: var(--font-accent); }
.kontakt__big {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--ink);
  margin-bottom: 0.8rem;
  transition: color 0.3s;
}
.kontakt__big:hover { color: var(--gold-hi); }
.kontakt__big--mail { font-size: clamp(1.05rem, 2vw, 1.3rem); word-break: break-all; }

/* WhatsApp-Knopf im Kontaktblock. Reiner Link auf wa.me — es wird nichts
   eingebettet und nichts nachgeladen, die Verbindung zu WhatsApp entsteht
   erst beim Klick. Deshalb bleibt die Seite einwilligungsfrei. */
.kontakt__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: var(--label-lg);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: background 0.4s var(--ease), border-color 0.4s, color 0.4s;
}
.kontakt__whatsapp svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold); transition: color 0.4s; }
.kontakt__whatsapp:hover,
.kontakt__whatsapp:focus-visible {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--ink);
}
.kontakt__whatsapp:hover svg { color: var(--gold-hi); }
@media (max-width: 560px) {
  .kontakt__whatsapp { width: 100%; justify-content: center; }
}

/* ── Footer ────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vh, 5rem) 0 2.5rem;
}
.footer__wrap { text-align: center; }
.footer__logo { display: inline-flex; }
.footer__logo img { height: clamp(44px, 5vw, 56px); width: auto; }
.footer__claim {
  margin: 1.4rem 0 2.8rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.footer__meta {
  border-top: 1px solid var(--line);
  padding-top: 2rem;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; flex-wrap: wrap;
  font-size: var(--label-lg);
  color: var(--muted);
}
.footer__social, .footer__legal { display: flex; gap: 1.6rem; }
.footer__social a, .footer__legal a {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.footer__social a:hover, .footer__legal a:hover { color: var(--gold-hi); }


/* ── Rechtsseiten (Impressum, Datenschutz) ─────────────────────
   Eigene, ruhige Leseansicht im Stil der Startseite: schmales Satzband,
   keine Animationen, keine Licht-Ringe. */
.rechtstext { padding-block: clamp(8rem, 14vh, 11rem) var(--section-pad); }
.rechtstext__wrap { max-width: 44rem; margin-inline: auto; }
.rechtstext__zurueck {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--label); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(2rem, 5vh, 3rem);
  transition: color 0.3s;
}
.rechtstext__zurueck:hover { color: var(--gold-hi); }
.rechtstext h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: 0.015em;
  margin-bottom: 0.6rem;
}
.rechtstext__stand {
  font-size: var(--label-lg); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.rechtstext h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: 0.015em;
  margin: clamp(2.5rem, 5vh, 3.5rem) 0 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.rechtstext h2:first-of-type { border-top: 0; padding-top: 0; }
.rechtstext h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 1.8rem 0 0.5rem;
}
.rechtstext p { color: var(--muted); margin-bottom: 1rem; }
.rechtstext strong { color: var(--ink); font-weight: 500; }
.rechtstext a:not(.rechtstext__zurueck) {
  color: var(--gold-hi);
  border-bottom: 1px solid rgba(198, 161, 91, 0.4);
  transition: border-color 0.3s;
}
.rechtstext a:not(.rechtstext__zurueck):hover { border-color: var(--gold-hi); }
.rechtstext ul { margin: 0 0 1.2rem; }
.rechtstext li {
  color: var(--muted);
  padding-left: 1.4rem;
  position: relative;
  margin-bottom: 0.4rem;
}
.rechtstext li::before {
  content: "◆";
  position: absolute; left: 0; top: 0;
  color: var(--gold);
  font-size: 0.55rem;
  line-height: 2.6;
}
.rechtstext__box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: clamp(1.4rem, 3vw, 2rem);
  margin-bottom: 1.4rem;
}
.rechtstext__box p:last-child { margin-bottom: 0; }

/* ── Reveal (JS hook) ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(36px); }
html.no-motion .reveal, html.no-js .reveal { opacity: 1; transform: none; }
/* Ohne JavaScript wird der Vorschalt-Bildschirm nie entfernt — der Besucher
   sähe dauerhaft nur das Logo auf schwarzer Fläche. Gleiches gilt für den
   Zeilenumbruch-Effekt der Überschriften, der sonst auf yPercent stehen bleibt. */
html.no-js .preloader { display: none; }
html.no-js .line > span { transform: none; }
html.no-motion .line > span { transform: none !important; }

/* Sperrt die Seite hinter dem offenen Menü auch dann, wenn Lenis gar nicht
   läuft (prefers-reduced-motion). Vorher hing die Sperre allein an Lenis. */
html.menu-offen, html.menu-offen body { overflow: hidden; }

/* Aktiver Abschnitt in der Navigation */
.nav__links a.is-hier { color: var(--ink); }
.nav__links a.is-hier::after { transform: scaleX(1); }
.menu__links a.is-hier em { color: var(--gold-hi); }

/* Herkunftshinweis unter den Mitarbeiter-Blasen */
.team__hinweis {
  margin-top: 2.4rem;
  text-align: center;
  font-size: var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.6;
}

/* Anrufknopf: nur im Schmalformat sichtbar, dort wo Navigation und
   Besuchsknopf ausgeblendet sind. Am Schreibtisch führt der Weg weiter über
   „Besuch uns" — dort ist die Rufnummer ohnehin zwei Klicks entfernt. */
.nav__anruf {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.nav__anruf svg { width: 19px; height: 19px; }
.nav__anruf:hover, .nav__anruf:focus-visible {
  color: var(--gold-hi);
  border-color: var(--gold);
  background: var(--petrol);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .schmuck__grid { grid-template-columns: 1fr; }
  .werkstatt__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__anruf { display: inline-flex; }

  .werte__grid, .gold__wrap { grid-template-columns: 1fr; }
  .werte__stats { border-left: 0; padding-left: 0; padding-top: 2rem; border-top: 1px solid var(--line); }

  /* Schmal: Überschrift, dann Bild, dann Text und Knopf. Das Foto trennt nicht
     mehr den Aufruf vom Abschnittsende, und der doppelte Abstand aus Raster-
     lücke plus eigenem Außenabstand ist weg. */
  .trauringe__wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "kopf" "bild" "text";
    row-gap: 1.8rem;
  }
  .trauringe__visual { margin-bottom: 1.9rem; }  /* Luft für das Ring-Signet, das 1.4rem unter das Bild ragt */
  .trauringe__visual .photo { margin-inline: auto; aspect-ratio: 4 / 3.6; }
  .trauringe__badge { left: auto; right: 0.75rem; bottom: -1.4rem; width: clamp(84px, 22vw, 116px); }
  .foerdeleben__inner { grid-template-columns: 1fr; }
  .foerdeleben__photo { margin-top: 1.5rem; max-width: 320px; }
  .werkstatt__strip { grid-template-columns: 1fr; }
  .werkstatt__img { height: auto; aspect-ratio: 16 / 9; }
  .kontakt__grid { grid-template-columns: 1fr; }
  .kontakt__intro { grid-template-columns: 1fr; }
  .band { height: 56vh; }
  .hero__tag { display: none; }

  /* Schmalformat als Plakat: Das Ladenfoto trägt die obere Hälfte, der Text
     rückt nach unten. Vorher stand der Text mittig und darunter blieben rund
     250 px schwarze Fläche — die Seite wirkte dadurch leer. */
  .hero {
    justify-content: flex-end;
    padding-top: clamp(9rem, 24vh, 14rem);
    padding-bottom: 1.5rem;
  }
  .hero__foot { margin-top: clamp(1.8rem, 5vh, 3rem); }
  /* Auf kurzen Displays rückt die Überzeile bis auf das Leuchtschild —
     ein weicher Schatten hält sie dort lesbar. */
  .hero__overline { text-shadow: 0 1px 10px rgba(11, 10, 8, 0.9); }

  .hero__photo {
    /* Eigener Ausschnitt fürs Schmalformat: Das Querformat der Startseite
       würde bei „cover" auf einem hohen, schmalen Bildschirm seitlich so stark
       beschnitten, dass vom Schriftzug nur ein paar Buchstaben übrig blieben.
       Dieser Ausschnitt ist eng um das Leuchtschild gelegt und wird über die
       volle Breite eingepasst — „JUWELIER BEHRENDT 1999" ist damit komplett
       lesbar. Dass er dadurch nur ein Band im oberen Bereich füllt, ist
       gewollt; nach unten läuft er weich aus. */
    background-image: url("../assets/img/laden-nacht-mobil.jpg");
    background-size: 100% auto;
    background-position: center 5%;
    background-repeat: no-repeat;
    opacity: 0.62;
    filter: grayscale(0.25) sepia(0.16) brightness(0.82) contrast(1.06);
    /* Ausblenden nach unten: Die Maske bekommt exakt dieselbe Geometrie wie
       das Bild — der Ausschnitt ist 2:1, das Band also halb so hoch wie der
       Bildschirm breit ist (50vw), an derselben Stelle positioniert. Nur so
       trifft der Verlauf die Bildkante. Eine Maske in Prozent der Hero-Höhe
       läuft dagegen mit jeder Displayhöhe aus dem Tritt und hinterlässt eine
       harte Kante. */
    /* Oben ebenfalls weich beginnen: Das Band startet rund 30 px unter dem
       Seitenrand und schnitt sonst mit einer harten Kante quer durch die
       80 px hohe Navigationsleiste. Die ersten 16 % des Bandes sind ohnehin
       nur Decke, dort kostet das Ausblenden nichts. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 46%, rgba(0,0,0,0.5) 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 46%, rgba(0,0,0,0.5) 72%, transparent 100%);
    -webkit-mask-size: 100% 50vw;
    mask-size: 100% 50vw;
    -webkit-mask-position: center 5%;
    mask-position: center 5%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  /* Abdunkelung von unten: hält die Schrift über dem nun kräftigeren Foto
     lesbar, ohne das Motiv oben zuzudecken. */
  .hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      rgba(11, 10, 8, 0) 0%,
      rgba(11, 10, 8, 0.12) 30%,
      rgba(11, 10, 8, 0.78) 62%,
      rgba(11, 10, 8, 0.94) 100%);
  }
  .uhren__grid { grid-template-columns: repeat(2, 1fr); }
  /* Bei zwei Spalten bleibt die neunte Marke allein übrig — sie bekommt die
     ganze Zeile, statt eine halbe Lücke zu hinterlassen. */
  .uhren__grid > li:last-child:nth-child(odd) { grid-column: span 2; }
  .uhren__row { min-height: 130px; padding: 1.5rem 1rem; gap: 1rem; }
  .br-desktop { display: none; }
}

@media (max-width: 560px) {
  .werkstatt__grid { grid-template-columns: 1fr; }
  .werte__stats { grid-template-columns: 1fr 1fr; }
  .hero__actions .btn { width: 100%; }
  .hero__overline .rule { display: none; }
  .hero__overline { letter-spacing: 0.24em; }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}