/* Juwelier Berretz · Stylesheet
   Richtung: klassischer Juwelier-Auftritt, Ruhe und Typografie nach dem Maßstab Hemmerle.
   Alle Werte, die später im Regler-Panel verschoben werden, stehen als Variablen auf :root. */

/* ---------- Schriften (selbst gehostet, SIL Open Font License) ---------- */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fonts/eb-garamond-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fonts/eb-garamond-latin-wght-italic.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations");
}

/* ---------- Variablen ---------- */
:root {
  /* Farben */
  --weiss: #ffffff;
  --grau: #f4f4f3;
  --grau-2: #ebebe9;
  --linie: #d9d9d6;
  --linie-zart: #e6e6e3;
  --rahmen-leise: #b3b3af;
  --text: #2d2d2d;
  --text-2: #5b5b59;
  --rose: #a65555;
  --rose-tief: #8a4242;
  --anthrazit: #2d2d2d;
  --anthrazit-2: #383838;
  --bordeaux: #5c1a24;
  --auf-dunkel: #f4f4f3;
  --auf-dunkel-2: #c4bfbd;
  --rose-hell: #dba7a7;
  --auf-bordeaux-2: #e3cbcd;

  /* Schriften */
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fs-text: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --fs-gross: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem);
  --fs-aussage: clamp(1.875rem, 1.3rem + 2vw, 3.25rem);
  --fs-h1: clamp(2.375rem, 1.55rem + 2.9vw, 4.125rem);
  --fs-h1-unterseite: clamp(2rem, 1.45rem + 2.1vw, 3.375rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.0625rem, 1rem + 0.25vw, 1.25rem);
  --fs-klein: 0.8125rem;
  --sperrung-versal: 0.07em;
  --sperrung-klein: 0.16em;

  /* Abstände */
  --rand: clamp(1rem, 0.4rem + 3.6vw, 4rem);
  --breite: 78rem;
  --abschnitt: clamp(4.5rem, 2.8rem + 6.5vw, 9.5rem);
  --luft-ueberschrift: clamp(2.25rem, 1.6rem + 2.4vw, 4rem);
  --kopf-hoehe: 5.5rem;
  --streifen-hoehe: 2.375rem;

  /* Einstieg der Startseite */
  --hero-foto-anteil: 1.35fr;
  --hero-text-anteil: 1fr;
  --hero-hoehe: clamp(34rem, calc(100svh - var(--kopf-hoehe) - var(--streifen-hoehe) - 3.5rem), 54rem);
  --hero-text-innen: clamp(2rem, 1rem + 4.2vw, 5.5rem);
  --hero-foto-x: 100%;
  --hero-foto-y: 46%;
  --hero-text-versatz: 0px;
  --hero-h1-abstand: 1.1rem;
  --hero-aktionen-abstand: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem);

  /* Bewegung */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dauer: 0.9s;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}
body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--fs-text);
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: #e9d3d3; color: var(--text); }
.dunkel ::selection, .bordeaux ::selection { background: var(--rose-hell); color: var(--anthrazit); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }
.dunkel :focus-visible, .bordeaux :focus-visible { outline-color: var(--rose-hell); }
html { scrollbar-color: #b9b9b6 var(--grau); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.springen {
  position: absolute; left: var(--rand); top: -4rem; z-index: 100;
  background: var(--anthrazit); color: var(--weiss);
  font: 500 var(--fs-klein)/1 var(--sans); letter-spacing: var(--sperrung-klein); text-transform: uppercase;
  padding: 1rem 1.25rem; text-decoration: none;
}
.springen:focus { top: 0.5rem; }

.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.innen--schmal { width: min(100% - 2 * var(--rand), 50rem); margin-inline: auto; }

/* ---------- Typografie ---------- */
.versal {
  text-transform: uppercase;
  letter-spacing: var(--sperrung-versal);
  font-feature-settings: "kern", "cpsp";
}
.h1 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: var(--sperrung-versal);
}
.h1--unterseite { font-size: var(--fs-h1-unterseite); line-height: 1.08; }
.h2 {
  font-family: var(--serif);
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.005em;
}
.h3 {
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.aussage {
  font-family: var(--serif);
  font-size: var(--fs-aussage);
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.ort {
  font-family: var(--sans);
  font-size: var(--fs-klein);
  font-weight: 500;
  letter-spacing: var(--sperrung-klein);
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.5;
}
.dunkel .ort, .bordeaux .ort { color: var(--auf-dunkel-2); }
.lead { font-size: var(--fs-gross); line-height: 1.5; }
.leise { color: var(--text-2); }
.text-fluss { max-width: 36em; }

/* Diamant-Zeichen aus dem Logo als Trenner */
.raute { display: block; width: 2.1rem; height: auto; color: var(--rose); flex: none; }
.raute--mitte { margin-inline: auto; }
.trenner {
  display: flex; align-items: center; gap: 1.1rem;
  color: var(--rose);
}
.trenner::before, .trenner::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.dunkel .raute, .bordeaux .raute { color: var(--rose-hell); }

/* ---------- Bedienelemente ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.95rem 1.75rem;
  border: 1px solid var(--anthrazit);
  background: transparent;
  color: var(--anthrazit);
  font: 500 var(--fs-klein)/1.2 var(--sans);
  letter-spacing: var(--sperrung-klein);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn { border-color: var(--rahmen-leise); }
.btn:hover { border-color: var(--anthrazit); }
.btn--voll { border-color: var(--anthrazit); }
.btn--voll:hover { background: var(--anthrazit); color: var(--weiss); }
.dunkel .btn, .bordeaux .btn { border-color: rgba(244, 244, 243, 0.38); color: var(--auf-dunkel); }
.dunkel .btn:hover, .bordeaux .btn:hover { border-color: var(--auf-dunkel); }
.dunkel .btn--voll, .bordeaux .btn--voll { border-color: var(--auf-dunkel); }
.dunkel .btn--voll:hover { background: var(--auf-dunkel); color: var(--anthrazit); }
.bordeaux .btn--voll:hover { background: var(--auf-dunkel); color: var(--bordeaux); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; }

.textlink {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 500 var(--fs-klein)/1.4 var(--sans);
  letter-spacing: var(--sperrung-klein);
  text-transform: uppercase;
  color: var(--rose-tief);
  text-decoration: none;
  padding-block: 0.6rem;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.35rem) / 0 1px no-repeat;
  transition: background-size 0.5s var(--ease);
}
.textlink:hover { background-size: 100% 1px; }
.textlink .pfeil { width: 1.4rem; transition: transform 0.5s var(--ease); }
.textlink:hover .pfeil { transform: translateX(0.3rem); }
.dunkel .textlink, .bordeaux .textlink { color: var(--rose-hell); }
.bordeaux .textlink { color: var(--auf-dunkel); }

.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.5rem; }
.aktionen--mitte { justify-content: center; }

.fliesstext a:not(.btn):not(.textlink), .faq a:not(.textlink), .rechtstext a {
  color: var(--rose-tief);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.dunkel .fliesstext a:not(.btn):not(.textlink) { color: var(--rose-hell); }

/* ---------- Kopfstreifen ---------- */
.streifen {
  background: var(--anthrazit);
  color: var(--auf-dunkel);
  font: 400 var(--fs-klein)/1.3 var(--sans);
  letter-spacing: 0.04em;
}
.streifen .innen {
  min-height: var(--streifen-hoehe);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.streifen a { color: inherit; text-decoration: none; }
.streifen a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.streifen__status { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--auf-dunkel-2); }
.streifen__status::before {
  content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--auf-dunkel-2); flex: none;
}
.streifen__status.ist-offen { color: var(--auf-dunkel); }
.streifen__status.ist-offen::before { background: var(--auf-dunkel); }
.streifen__tel { font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 44rem) {
  .streifen__adresse, .streifen__tel { display: none; }
  .streifen .innen { justify-content: center; }
}

/* Hinweis-Band (Betriebsferien), wird von main.js eingeblendet */
.hinweis {
  background: var(--bordeaux); color: var(--auf-dunkel);
  font: 400 0.9375rem/1.5 var(--sans);
  text-align: center;
  padding: 0.8rem var(--rand);
}
.hinweis[hidden] { display: none; }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--linie-zart);
}
.kopf .innen {
  height: var(--kopf-hoehe);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.kopf__logo { flex: none; display: block; }
.kopf__logo img { width: auto; height: clamp(2.3rem, 2rem + 0.9vw, 2.85rem); }
.nav { display: flex; align-items: center; gap: clamp(1.5rem, 0.6rem + 1.3vw, 2.25rem); }
.nav__liste { display: flex; align-items: center; gap: clamp(1rem, 0.1rem + 1.25vw, 1.9rem); }
.nav__liste a {
  position: relative;
  font: 500 0.75rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding-block: 0.75rem;
  white-space: nowrap;
}
.nav__liste a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 1px;
  background: var(--rose); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav__liste a:hover::after, .nav__liste a[aria-current="page"]::after { transform: scaleX(1); }
.nav__anruf { min-height: 2.75rem; padding: 0.75rem 1.25rem; font-size: 0.75rem; }
.menue-knopf {
  display: none;
  align-items: center; gap: 0.75rem;
  border: 0; background: none; padding: 0.75rem 0; cursor: pointer;
  font: 500 0.75rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}
.menue-knopf svg { width: 1.6rem; height: 0.8rem; }
.menue-knopf .strich { transition: transform 0.4s var(--ease); transform-origin: center; transform-box: fill-box; }
.menue-knopf[aria-expanded="true"] .strich--oben { transform: translateY(4.5px) rotate(18deg); }
.menue-knopf[aria-expanded="true"] .strich--unten { transform: translateY(-4.5px) rotate(-18deg); }

@media (max-width: 80rem) {
  .menue-knopf { display: inline-flex; }
  .nav { gap: 1.25rem; }
  .nav__liste {
    position: fixed; inset: var(--kopf-hoehe) 0 0 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--weiss);
    padding: 1rem var(--rand) 3rem;
    overflow-y: auto;
    visibility: hidden; opacity: 0;
    transform: translateY(-0.75rem);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), visibility 0s 0.4s;
  }
  .nav__liste.ist-offen {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }
  .nav__liste li { border-bottom: 1px solid var(--linie-zart); }
  .nav__liste a {
    display: block;
    font: 400 clamp(1.5rem, 1.2rem + 1.5vw, 2rem)/1.2 var(--serif);
    letter-spacing: 0.04em;
    padding: 1.1rem 0;
  }
  .nav__liste a::after { display: none; }
  .nav__liste a[aria-current="page"] { color: var(--rose-tief); }
  body.menue-offen { overflow: hidden; }
}
@media (max-width: 30rem) {
  :root { --kopf-hoehe: 4.5rem; }
  .nav__anruf { padding-inline: 1rem; }
  .menue-knopf__wort { display: none; }
}

/* ---------- Einstieg Startseite ---------- */
.hero {
  display: grid;
  grid-template-columns: var(--hero-foto-anteil) var(--hero-text-anteil);
  min-height: var(--hero-hoehe);
  background: var(--weiss);
}
.hero__foto { position: relative; overflow: hidden; background: #1d1c1d; }
.hero__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--hero-foto-x) var(--hero-foto-y);
}
.hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) var(--hero-text-innen);
  padding-right: max(var(--rand), var(--hero-text-innen));
  transform: translateY(var(--hero-text-versatz));
}
.hero__text .h1 { margin-bottom: var(--hero-h1-abstand); }
.hero__text .aktionen { margin-top: var(--hero-aktionen-abstand); }
.zusammen { white-space: nowrap; }

@media (max-width: 56rem) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__foto { height: 46svh; min-height: 18rem; }
  .hero__text { padding: 2.5rem var(--rand) 3.5rem; }
  .hero__text .aktionen { flex-direction: column; align-items: stretch; }
  .hero__text .btn { width: 100%; }
  .hero__text .textlink { justify-content: center; }
}

/* ---------- Einstieg Unterseiten ---------- */
.seitenkopf { background: var(--weiss); }
.seitenkopf--foto { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(30rem, 62svh, 40rem); }
.seitenkopf__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(3rem, 2rem + 4vw, 6rem) clamp(2rem, 1rem + 4vw, 5.5rem);
  padding-left: max(var(--rand), calc((100vw - var(--breite)) / 2));
}
.seitenkopf__text .h1 { margin-bottom: 1rem; }
.seitenkopf__text .raute { margin: 1.9rem 0 1.75rem; }
.seitenkopf__text .lead { max-width: 30em; }
.seitenkopf__foto { position: relative; overflow: hidden; background: var(--grau-2); }
.seitenkopf__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seitenkopf--text {
  background: var(--grau);
  text-align: center;
  padding: clamp(4.5rem, 3rem + 6vw, 8.5rem) 0 clamp(4rem, 3rem + 5vw, 7.5rem);
  position: relative;
  overflow: hidden;
}
.seitenkopf--text .h1 { margin-inline: auto; max-width: 20em; margin-bottom: 1rem; }
.seitenkopf--text .raute { margin: 2rem auto 1.75rem; }
.seitenkopf--text .lead { max-width: 34em; margin-inline: auto; }
.seitenkopf--text .aktionen { justify-content: center; }
.seitenkopf--text .innen { position: relative; z-index: 1; }

@media (max-width: 56rem) {
  .seitenkopf--foto { grid-template-columns: 1fr; }
  .seitenkopf__foto { order: -1; height: 40svh; min-height: 16rem; }
  .seitenkopf__text { padding: 2.5rem var(--rand) 3.5rem; }
  .seitenkopf .aktionen { flex-direction: column; align-items: stretch; }
  .seitenkopf .btn { width: 100%; }
  .seitenkopf .textlink { justify-content: center; }
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: var(--abschnitt); position: relative; }
.abschnitt--grau { background: var(--grau); }
.dunkel { background: var(--anthrazit); color: var(--auf-dunkel); }
.bordeaux { background: var(--bordeaux); color: var(--auf-dunkel); }
.dunkel .leise { color: var(--auf-dunkel-2); }
.bordeaux .leise { color: var(--auf-bordeaux-2); }

.kopfzeile { margin-bottom: var(--luft-ueberschrift); }
.kopfzeile--mitte { text-align: center; }
.kopfzeile--mitte .h2, .kopfzeile--mitte .aussage { max-width: 22em; margin-inline: auto; }
.kopfzeile p { margin-top: 1.4rem; }
.kopfzeile--mitte p { max-width: 36em; margin-inline: auto; }

/* Zweispaltig: Überschrift links, Text rechts */
.zweispaltig {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 4vw, 6rem);
  align-items: start;
}
.zweispaltig > .h2 { position: sticky; top: calc(var(--kopf-hoehe) + 2rem); }
@media (max-width: 56rem) {
  .zweispaltig { grid-template-columns: 1fr; gap: 1.5rem; }
  .zweispaltig > .h2 { position: static; }
}

/* Leistungen als Zeilen mit Haarlinien */
.leistungen { border-top: 1px solid var(--linie); }
.leistung {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 19rem;
  gap: 1.25rem clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: baseline;
  padding: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem) clamp(0rem, -1rem + 3vw, 2rem);
  border-bottom: 1px solid var(--linie);
  transition: background-color 0.5s var(--ease);
}
.leistung::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--anthrazit); transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.leistung:hover, .leistung:focus-within { background: var(--weiss); }
.leistung:hover::before, .leistung:focus-within::before { transform: scaleX(1); }
.leistung__name { font-family: var(--serif); font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.15; text-transform: uppercase; letter-spacing: 0.06em; }
.leistung__text { color: var(--text-2); }
.leistung .textlink { justify-self: end; white-space: nowrap; }
.leistung .textlink::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 72rem) {
  .leistung { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 15rem; }
}
@media (max-width: 56rem) {
  .leistung { grid-template-columns: 1fr; gap: 0.6rem; padding-inline: 0; }
  .leistung .textlink { justify-self: start; }
}

/* Foto mit Text, Foto ragt über die Kante */
.bild-text {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 1rem + 5vw, 7rem);
  align-items: center;
}
.bild-text--rechts { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.bild-text--rechts .bild-text__foto { order: 2; }
.bild-text__foto { position: relative; }
.bild-text__foto picture, .bild-text__foto img { width: 100%; }
.bild-text__foto img { aspect-ratio: 3 / 2; object-fit: cover; }
.bild-text__foto--hoch img { aspect-ratio: 4 / 5; }
.bild-text__foto--ragt img { aspect-ratio: 1 / 1; object-position: 52% 50%; }
.bild-text__foto--ragt { align-self: start; margin-top: calc(-1 * var(--abschnitt) - clamp(3rem, 2rem + 4vw, 6rem)); }
.bild-text__foto figcaption {
  margin-top: 0.9rem;
  font: 400 0.8125rem/1.5 var(--sans); letter-spacing: 0.02em;
  color: var(--text-2);
}
.dunkel .bild-text__foto figcaption { color: var(--auf-dunkel-2); }
.bild-text .h2 { margin-bottom: 1.75rem; }
.zitat {
  margin: 2.25rem 0;
  padding-top: 1.75rem;
  border-top: 1px solid currentColor;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem); line-height: 1.3;
}
.dunkel .zitat { border-color: rgba(244, 244, 243, 0.25); }
@media (max-width: 56rem) {
  .bild-text, .bild-text--rechts { grid-template-columns: 1fr; }
  .bild-text--rechts .bild-text__foto { order: 0; }
  .bild-text__foto--ragt { margin-top: calc(-1 * var(--abschnitt) - 2.5rem); }
}

/* Marken */
.marken {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--linie);
}
.marke {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) 1.5rem;
  text-decoration: none; color: inherit;
  text-align: center;
  transition: background-color 0.5s var(--ease);
}
.marke + .marke { border-left: 1px solid var(--linie); }
.marke:hover { background: var(--grau); }
.marke__zeichen { height: 5rem; display: flex; align-items: center; justify-content: center; }
.marke__zeichen img { width: auto; }
.marke__zeichen--ebel img { height: 4.5rem; }
.marke__zeichen--alcoro img { height: 1.6rem; }
.marke__wort { font: 400 clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem)/1 var(--serif); letter-spacing: 0.18em; text-transform: uppercase; padding-left: 0.18em; }
.marke__was { font: 500 var(--fs-klein)/1.5 var(--sans); letter-spacing: var(--sperrung-klein); text-transform: uppercase; color: var(--text-2); }
@media (max-width: 44rem) {
  .marken { grid-template-columns: minmax(0, 1fr); }
  .marke + .marke { border-left: 0; border-top: 1px solid var(--linie); }
}

/* Bordeaux-Band mit großem Zeichen */
.band { text-align: center; overflow: hidden; }
.band .innen { position: relative; z-index: 1; }
.band .h2 { max-width: 18em; margin-inline: auto; }
.band p { max-width: 34em; margin-inline: auto; margin-top: 1.5rem; }

/* Besuch: Zeiten und Foto mit Adresskarte */
.besuch {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 1rem + 5vw, 7rem);
  align-items: start;
}
.besuch .h2 { margin-bottom: 1.75rem; }
.besuch__foto { position: relative; }
.besuch__foto img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.adresskarte {
  position: absolute; left: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); bottom: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
  width: min(20rem, 85%);
  background: var(--weiss);
  padding: 1.75rem 1.9rem;
  border: 1px solid var(--linie);
  font-style: normal;
}
.adresskarte .h3 { margin-bottom: 0.75rem; }
.adresskarte p { margin: 0; line-height: 1.5; }
.adresskarte a { text-decoration: none; }
.adresskarte a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 30rem) {
  .zeiten__zeile { grid-template-columns: 1fr; gap: 0.15rem; }
}
@media (max-width: 56rem) {
  .besuch { grid-template-columns: 1fr; }
  .adresskarte { left: 1rem; bottom: 1rem; }
}

/* Öffnungszeiten */
.zeiten { margin: 2rem 0; border-top: 1px solid var(--linie); }
.zeiten__zeile {
  display: grid; grid-template-columns: minmax(11.5rem, 2fr) 3fr; gap: 1rem;
  padding: 0.85rem 0.75rem;
  border-bottom: 1px solid var(--linie);
  transition: background-color 0.4s var(--ease);
}
.zeiten__zeile dt, .zeiten__zeile dd { margin: 0; }
.zeiten__zeile dt { font: 500 var(--fs-klein)/1.9 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.zeiten__zeile.ist-heute { background: var(--weiss); }
.abschnitt:not(.abschnitt--grau) .zeiten__zeile.ist-heute { background: var(--grau); }
.zeiten__heute { display: none; font: 500 0.6875rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); font-weight: 600; margin-left: 0.6rem; vertical-align: 0.15em; }
.ist-heute .zeiten__heute { display: inline; }

/* Ablauf als Strecke */
.ablauf {
  --schritte: 3;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--schritte), minmax(0, 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  counter-reset: schritt;
}
.ablauf::before, .ablauf::after {
  content: ""; position: absolute; left: 0; right: 0; top: 2.35rem; height: 1px;
}
.ablauf::before { background: var(--linie); }
.ablauf::after {
  background: var(--anthrazit);
  transform-origin: left;
  transition: transform 1.8s var(--ease);
}
.ablauf.wartet::after { transform: scaleX(0); }
.schritt { position: relative; counter-increment: schritt; }
.schritt__nr {
  display: flex; align-items: center; gap: 0.9rem;
  height: 4.7rem;
  font: 400 3.4rem/1 var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--text);
}
.schritt__nr::before { content: counter(schritt); background: var(--grau); padding-right: 0.9rem; position: relative; z-index: 1; }
.abschnitt:not(.abschnitt--grau) .schritt__nr::before { background: var(--weiss); }
.schritt .h3 { margin: 1.6rem 0 0.75rem; }
.schritt p { color: var(--text-2); }
@media (max-width: 56rem) {
  .ablauf { grid-template-columns: 1fr; gap: 2.25rem; padding-left: 3.25rem; }
  .ablauf::before, .ablauf::after { left: 0.9rem; right: auto; top: 0.6rem; bottom: 0.6rem; width: 1px; height: auto; }
  .ablauf::after { transform-origin: top; }
  .ablauf.wartet::after { transform: scaleY(0); }
  .schritt__nr { height: auto; font-size: 2.6rem; position: absolute; left: -3.25rem; top: -0.2rem; width: 2rem; justify-content: center; }
  .schritt__nr::before { padding: 0.3rem 0; }
    .schritt .h3 { margin-top: 0.4rem; }
}
@media (max-width: 72rem) {
  .ablauf.ablauf--lang { grid-template-columns: 1fr; gap: 2.25rem; padding-left: 3.25rem; }
  .ablauf.ablauf--lang::before, .ablauf.ablauf--lang::after { left: 0.9rem; right: auto; top: 0.6rem; bottom: 0.6rem; width: 1px; height: auto; }
  .ablauf--lang::after { transform-origin: top; }
  .ablauf--lang.wartet::after { transform: scaleY(0); }
  .ablauf--lang .schritt__nr { height: auto; font-size: 2.6rem; position: absolute; left: -3.25rem; top: -0.2rem; width: 2rem; justify-content: center; }
  .ablauf--lang .schritt__nr::before { padding: 0.3rem 0; }
  .ablauf--lang .schritt .h3 { margin-top: 0.4rem; }
}

/* Listen mit Rauten-Punkten */
.gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2.5rem clamp(2rem, 1rem + 3vw, 4.5rem); }
.gruppe { border-top: 1px solid var(--text); padding-top: 1.5rem; }
.gruppe .h3 { margin-bottom: 1.1rem; }
.punkte li {
  position: relative; padding: 0.55rem 0 0.55rem 1.6rem;
  border-bottom: 1px solid var(--linie-zart);
}
.punkte li:last-child { border-bottom: 0; }
.punkte li::before {
  content: ""; position: absolute; left: 0; top: 1.32rem;
  width: 0.7rem; height: 1px; background: var(--text-2);
}
.punkte--gross li { font-size: var(--fs-gross); padding-block: 0.9rem; }
.punkte--gross li::before { top: 1.85rem; }

/* Drei Wege nebeneinander, getrennt durch Haarlinien */
.wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); }
.weg { padding: 2.25rem clamp(1.25rem, 0.5rem + 2vw, 2.75rem) 1rem; display: flex; flex-direction: column; gap: 1rem; }
.weg:first-child { padding-left: 0; }
.weg + .weg { border-left: 1px solid var(--linie); }
.weg p { color: var(--text-2); flex: 1; }
.weg .textlink { align-self: flex-start; }
@media (max-width: 56rem) {
  .wege { grid-template-columns: 1fr; }
  .weg { padding-inline: 0; }
  .weg + .weg { border-left: 0; border-top: 1px solid var(--linie); }
}

/* Fragen */
.faq { border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--serif); font-size: var(--fs-gross); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--rose-tief); }
.faq__zeichen { position: relative; flex: none; width: 1rem; height: 1rem; }
.faq__zeichen::before, .faq__zeichen::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor;
  transition: transform 0.45s var(--ease);
}
.faq__zeichen::after { transform: rotate(90deg); }
.faq details[open] .faq__zeichen::after { transform: rotate(0deg); }
.faq__antwort { padding: 0 3rem 1.75rem 0; color: var(--text-2); max-width: 44em; }

/* Abschluss-Band */
.abschluss { text-align: center; }
.abschluss .h2 { max-width: 20em; margin-inline: auto; }
.abschluss p { max-width: 34em; margin: 1.5rem auto 0; }

/* Team */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; filter: saturate(0.92); }
.person .h3 { margin-top: 1.4rem; }
.person p { margin-top: 0.35rem; color: var(--text-2); }
@media (max-width: 44rem) { .team { grid-template-columns: 1fr; max-width: 24rem; } }

/* Kontakt */
.kontaktdaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 1rem + 3vw, 4.5rem); }
.kontaktdaten > div { border-top: 1px solid var(--text); padding-top: 1.5rem; }
.kontaktdaten .h3 { margin-bottom: 1rem; }
.kontaktdaten address { font-style: normal; }
.kontaktdaten a { text-decoration: none; }
.kontaktdaten a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kontaktdaten .zeiten { margin: 0; border-top: 0; }
.kontaktdaten .zeiten__zeile { grid-template-columns: 1fr; gap: 0; padding: 0.6rem 0.75rem; }
@media (max-width: 64rem) { .kontaktdaten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 44rem) { .kontaktdaten { grid-template-columns: 1fr; } }

/* Formular */
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; }
.feld { display: flex; flex-direction: column; gap: 0.5rem; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font: 500 var(--fs-klein)/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.feld .optional { text-transform: none; letter-spacing: 0.02em; color: var(--text-2); font-weight: 400; }
.feld input, .feld select, .feld textarea {
  width: 100%;
  font: 400 1.125rem/1.5 var(--serif);
  color: var(--text);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 0;
  padding: 0.85rem 1rem;
  caret-color: var(--rose);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%232d2d2d'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem;
}
.feld textarea { min-height: 10rem; resize: vertical; }
.feld input::placeholder, .feld textarea::placeholder { color: #7a7a77; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: #b5b5b1; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--anthrazit); box-shadow: 0 0 0 1px var(--anthrazit); }
.feld__hinweis { font: 400 0.875rem/1.45 var(--sans); color: var(--text-2); margin: 0; }
.feld__fehler { display: none; font: 500 0.875rem/1.45 var(--sans); color: #9b2f2f; margin: 0; }
.feld.hat-fehler .feld__fehler { display: block; }
.feld.hat-fehler input, .feld.hat-fehler textarea { border-color: #9b2f2f; box-shadow: 0 0 0 1px #9b2f2f; }
.formular__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; border-top: 1px solid var(--linie); padding-top: 1.75rem; }
.formular__fuss p { margin: 0; max-width: 32em; font: 400 0.9375rem/1.5 var(--sans); color: var(--text-2); }
.formular__status { grid-column: 1 / -1; margin: 0; font: 400 0.9375rem/1.5 var(--sans); }
.formular__status.ist-fehler { color: #9b2f2f; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#formular-rahmen.ist-gesendet form { display: none; }
.formular-danke { border-top: 1px solid var(--text); padding-top: 2rem; }
.formular-danke:focus { outline: none; }
.formular-danke .h2 { margin-bottom: 1rem; }
@media (max-width: 44rem) { .formular { grid-template-columns: 1fr; } .formular__fuss .btn { width: 100%; } }

/* Rechtstexte */
.rechtstext h2 { font: 400 var(--fs-h3)/1.3 var(--serif); text-transform: uppercase; letter-spacing: 0.1em; margin: 2.75rem 0 1rem; }
.rechtstext h2:first-child { margin-top: 0; }

/* ---------- Fuß ---------- */
.fuss { background: var(--anthrazit); color: var(--auf-dunkel); padding: clamp(4rem, 3rem + 4vw, 6.5rem) 0 2rem; font-size: 1.0625rem; }
.fuss__oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem clamp(1.5rem, 1rem + 2vw, 3rem); }
.fuss .h3 { font-size: 0.8125rem; font-family: var(--sans); font-weight: 500; letter-spacing: var(--sperrung-klein); color: var(--auf-dunkel-2); margin-bottom: 1.1rem; }
.fuss address { font-style: normal; }
.fuss p { margin-bottom: 0.6rem; }
.fuss ul li { margin-bottom: 0.45rem; }
.fuss a { color: var(--auf-dunkel); text-decoration: none; }
.fuss a:hover { color: var(--rose-hell); text-decoration: underline; text-underline-offset: 0.2em; }
.fuss__unten {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: 1.75rem;
  border-top: 1px solid rgba(244, 244, 243, 0.16);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
  font: 400 var(--fs-klein)/1.5 var(--sans); letter-spacing: 0.04em; color: var(--auf-dunkel-2);
}
.fuss__unten ul { display: flex; gap: 1.75rem; }
@media (max-width: 70rem) { .fuss__oben { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .fuss__oben { grid-template-columns: 1fr 1fr; } }
@media (max-width: 26rem) { .fuss__oben { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; } .fuss__oben > :nth-child(-n+3) { grid-column: 1 / -1; } }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__foto img, .seitenkopf__foto img { animation: foto-auf 1.6s var(--ease) both; }
  .hero__text > *, .seitenkopf__text > *, .seitenkopf--text .innen > * { animation: text-auf var(--dauer) var(--ease) both; }
  .hero__text > :nth-child(2), .seitenkopf__text > :nth-child(2), .seitenkopf--text .innen > :nth-child(2) { animation-delay: 0.08s; }
  .hero__text > :nth-child(3), .seitenkopf__text > :nth-child(3), .seitenkopf--text .innen > :nth-child(3) { animation-delay: 0.16s; }
  .hero__text > :nth-child(4), .seitenkopf__text > :nth-child(4), .seitenkopf--text .innen > :nth-child(4) { animation-delay: 0.24s; }
  .hero__text > :nth-child(n+5), .seitenkopf__text > :nth-child(n+5), .seitenkopf--text .innen > :nth-child(n+5) { animation-delay: 0.32s; }
  .js .einblenden { transition: opacity 1s var(--ease), transform 1s var(--ease); }
  .js .einblenden.wartet { opacity: 0; transform: translateY(1.25rem); }
}
@keyframes foto-auf {
  from { transform: scale(1.06); filter: brightness(0.75); clip-path: inset(0 0 0 8%); }
  to { transform: none; filter: none; clip-path: inset(0); }
}
@keyframes text-auf {
  from { opacity: 0; transform: translateY(0.9rem); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .ablauf.wartet::after { transform: none; }
}

/* ---------- Druck ---------- */
@media print {
  .streifen, .kopf .nav, .hinweis, .fuss__unten ul, .aktionen { display: none !important; }
  .kopf { position: static; }
  .dunkel, .bordeaux { background: none; color: #000; }
}

/* ---------- Ergänzungen für Unterseiten ---------- */
.seitenkopf__foto img { object-position: var(--pos, 50% 50%); }

/* Zwei gleichwertige Blöcke nebeneinander */
.bloecke { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(2.5rem, 1rem + 5vw, 7rem); }
.block { border-top: 1px solid var(--text); padding-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem); }
.block .h2 { margin-bottom: 1.5rem; }
.block__logo { height: 5rem; display: flex; align-items: center; margin-bottom: 1.75rem; }
@media (max-width: 56rem) { .bloecke { grid-template-columns: 1fr; } }


/* Panoramafoto des Ladens */
.laden-foto { margin: clamp(3rem, 2rem + 4vw, 6rem) 0 0; }
.laden-foto img { width: 100%; aspect-ratio: 16 / 5; object-fit: cover; }
@media (max-width: 44rem) { .laden-foto img { aspect-ratio: 4 / 3; } }

.kopfzeile .h2 { max-width: 22em; }

/* Große Aussage der Startseite */
.aussage--mitte { text-align: center; max-width: 24em; margin: 0 auto; }
.trenner--aussage { max-width: 30rem; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto clamp(3rem, 2rem + 3vw, 5rem); }
@media (max-width: 30rem) {
  .hero .zusammen { display: block; }
  .hero .punkt { display: none; }
}

/* Icons für Profile und externe Ziele */
.icon { width: 1.15rem; height: 1.15rem; flex: none; }
.btn .icon--extern { width: 1rem; height: 1rem; margin-right: -0.2rem; transition: transform 0.4s var(--ease); }
.btn:hover .icon--extern { transform: translate(0.12rem, -0.12rem); }
.profil { display: inline-flex; align-items: center; gap: 0.6rem; line-height: inherit; }
.fuss .profil { vertical-align: top; }
.fuss .profil .icon { width: 1rem; height: 1rem; color: var(--auf-dunkel-2); transition: color 0.3s var(--ease); }
.fuss .profil:hover .icon { color: var(--rose-hell); }

/* Rent a Jeweler: Hinweis auf Instagram und Facebook */
.profile-zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  padding-top: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  border-top: 1px solid var(--linie);
}
.profile-zeile p { margin: 0; font-size: var(--fs-gross); line-height: 1.35; }
.profile-zeile__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.profil--gross {
  min-height: 3.25rem; padding: 0.85rem 1.4rem;
  border: 1px solid var(--rahmen-leise);
  font: 500 var(--fs-klein)/1.2 var(--sans); letter-spacing: var(--sperrung-klein); text-transform: uppercase;
  color: var(--text); text-decoration: none;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.profil--gross .icon { width: 1.25rem; height: 1.25rem; }
.profil--gross:hover { border-color: var(--anthrazit); color: var(--rose-tief); }
@media (max-width: 44rem) {
  .profile-zeile__links { width: 100%; }
  .profil--gross { flex: 1; justify-content: center; }
}