/* =====================================================================
   Variante B – elegant
   Reduziert wie eine Galerie: zentrierte Achse, viel Ruhe, Bilder als
   Exponate im Passepartout, feine Goldlinien.
   ===================================================================== */

/* ---------- Schriften (lokal, SIL Open Font License) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farben & Grundwerte ---------- */
:root {
  /* Palette */
  --creme: #FDF8F0;
  --anthrazit: #2C241B;
  --kupfer: #B85B22;        /* Flächen, große Schrift, Deko */
  --kupfer-text: #A9541F;   /* kleine Schrift/Links auf Creme oder Weiß (5,0:1) */
  --salbei: #C8C9A3;        /* nur mit Anthrazit als Text */
  --gold: #E4B976;          /* nur dekorativ (Linien) */
  --weiss: #FFFFFF;

  /* abgeleitet */
  --text-leise: #5C5247;    /* 7,2:1 auf Creme */
  --haarlinie: rgba(184, 140, 70, .45);

  --schrift-titel: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --schrift-text: "Jost", "Segoe UI", system-ui, sans-serif;

  --spalte: 44rem;
  --breit: 68rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--anthrazit);
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;
}

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

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 300; }
h3 { font-size: clamp(1.7rem, 4vw, 2.2rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--kupfer-text); text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:hover { color: var(--anthrazit); }

:focus-visible { outline: 2px solid var(--kupfer); outline-offset: 4px; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--anthrazit);
  color: var(--creme);
}
.skip-link:focus { top: 1rem; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Platzhalter – gut sichtbar, damit nichts vergessen wird */
.platzhalter, .pruefen {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .78em;
  line-height: 1.6;
  padding: .05em .35em;
  color: var(--anthrazit);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.platzhalter { background: #F6E3C2; outline: 1px dashed var(--kupfer); }
.pruefen { background: #E6E6D3; outline: 1px dashed var(--anthrazit); }

/* ---------- Menüband ---------- */
/* Feste Mindesthöhe (Handy 2 Zeilen, ab 40em 1 Zeile). Damit wird die Höhe
   des großen Bildes ganz oben berechnet, siehe „Hero“. */
:root { --band: 6.2rem; }
@media (min-width: 40em) { :root { --band: 3.6875rem; } }
.kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--band);
  padding: .7rem 1.25rem;
  background: var(--weiss);
  border-bottom: 1px solid var(--haarlinie);
}
.hauptnav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hauptnav a {
  display: inline-block;
  padding-block: .4rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--anthrazit);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hauptnav a:hover { border-bottom-color: var(--gold); }
/* Sprachumschalter */
.hauptnav .sprache a { color: var(--kupfer-text); }
@media (max-width: 40em) {
  .hauptnav ul { column-gap: 1.1rem; }
  .hauptnav a { letter-spacing: .15em; }
}
/* kleine Handys: etwas enger, damit das Band bei 2 Zeilen bleibt */
@media (max-width: 24.4em) {
  .hauptnav ul { column-gap: .8rem; }
  .hauptnav a { font-size: .72rem; letter-spacing: .1em; }
}

/* ---------- Hinweisbereich ---------- */
.hinweis {
  max-width: var(--spalte);
  margin: 2rem auto 0;
  padding: 1rem 1.5rem;
  text-align: center;
  background: var(--weiss);
  border-block: 1px solid var(--gold);
}

/* ---------- Gemeinsame Elemente ---------- */
.abschnitt {
  padding: clamp(5rem, 12vw, 9rem) 1.25rem 0;
  scroll-margin-top: 1rem;
}
.abschnitt-kopf {
  max-width: var(--spalte);
  margin: 0 auto 3.5rem;
  text-align: center;
}
.abschnitt-kopf h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 1.5rem auto 0;
  background: var(--gold);
}
.dachzeile {
  margin-bottom: 1rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* Exponat im Passepartout */
.exponat {
  margin: 0;
  padding: clamp(1rem, 4.5vw, 2.25rem);
  background: var(--weiss);
  box-shadow: 0 1px 2px rgba(44, 36, 27, .06), 0 24px 48px -28px rgba(44, 36, 27, .35);
}
.exponat img { width: 100%; }
.etikett {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-top: 1.1rem;
  font-family: var(--schrift-titel);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--text-leise);
}
.etikett-titel {
  font-family: var(--schrift-text);
  font-style: normal;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--anthrazit);
}

/* ---------- Knöpfe ---------- */
.aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin: 2.25rem 0 1.5rem; }
.knopf {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .75rem 1.6rem;
  border: 1px solid var(--anthrazit);
  color: var(--anthrazit);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
.knopf:hover { background: var(--anthrazit); color: var(--creme); }
.knopf-voll { background: var(--anthrazit); color: var(--creme); }
.knopf-voll:hover { background: var(--kupfer-text); border-color: var(--kupfer-text); color: var(--weiss); }

.textlink-icon { display: inline-flex; align-items: center; gap: .55rem; }
.textlink {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--anthrazit);
  text-decoration-color: var(--gold);
  text-underline-offset: .5em;
}

/* ---------- Hero ---------- */
/* Ganz oben das große Ringbild über die volle Breite, darunter die
   „Visitenkarte“ (Reiher, Name, Motto, Kontakt). Die Bildhöhe ist so
   berechnet, dass ganz oben (nicht gescrollt) unter dem Bild noch Reiher und
   Name zu sehen sind:
   Bildhöhe = Bildschirmhöhe − Menüband − Reiher und Name − Luft darunter. */
.hero {
  --oben: clamp(1.5rem, 3vw, 2.25rem);          /* Abstand Bild → Reiher */
  --reiher: clamp(6.5rem, 22vw, 8.5rem);         /* Größe des Reihers */
  --reiher-abstand: clamp(1rem, 2.5vw, 1.5rem);  /* Abstand Reiher → Name */
  --name: clamp(2.6rem, 12vw, 6.25rem);          /* Schriftgröße „Franka van Dijk“ */
  --luft: 1.75rem;                               /* Luft unter „Goldschmiede in der Wiehre“ (kleiner als der Abstand zum Motto, damit unten kein angeschnittener Text erscheint) */
  --kopfteil: calc(var(--oben) + var(--reiher) + var(--reiher-abstand) + var(--name) * .95 + 2.1rem + var(--luft));
  --bild-min: 12rem;
}
@media (min-width: 40em) { .hero { --bild-min: 15rem; } }
.hero-bild { margin: 0; }
.hero-bild img {
  width: 100%;
  height: max(var(--bild-min), calc(100vh - var(--band) - var(--kopfteil)));
  height: max(var(--bild-min), calc(100svh - var(--band) - var(--kopfteil)));
  max-height: 820px;
  object-fit: cover;
  object-position: 50% 30%;   /* Ring bleibt auch im flachen Streifen ganz sichtbar */
}
.hero-text { max-width: var(--spalte); margin: 0 auto; padding: var(--oben) 1.25rem 0; text-align: center; }
/* Reiher aus dem Logo zwischen Bild und Name */
.hero-logo { width: var(--reiher); margin: 0 auto var(--reiher-abstand); }
/* Reiher verbeugt sich beim Scrollen und Anklicken (assets/js/reiher.js):
   Antippen soll nicht zoomen, markieren oder blau aufblitzen */
.hero-logo {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.hero h1 { margin-bottom: 2.25rem; }
.h1-name {
  display: block;
  font-weight: 300;
  font-size: var(--name);
  line-height: .95;
  letter-spacing: -.01em;
}
.h1-zusatz {
  display: block;
  margin-top: 1rem;
  font-family: var(--schrift-text);
  font-weight: 500;
  font-size: clamp(.78rem, 2.4vw, .95rem);
  letter-spacing: .3em;
  text-transform: uppercase;
}
.hero-motto {
  font-family: var(--schrift-titel);
  font-style: italic;
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  color: var(--kupfer);
  margin-bottom: 1.25rem;
}
.lead { font-size: 1.1rem; color: var(--text-leise); max-width: 34rem; margin-inline: auto; }
.hero-zeiten { font-size: .9rem; letter-spacing: .04em; color: var(--text-leise); }
.hero-zeiten .zeile { white-space: nowrap; }

/* ---------- Leistungen ---------- */
.leistungen {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--breit);
}
.leistung {
  display: grid;
  gap: 2.25rem;
  padding-block: 3.5rem;
  border-top: 1px solid var(--haarlinie);
}
.leistung:first-child { border-top: 0; padding-top: 0; }
.leistung-nr {
  font-family: var(--schrift-titel);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--kupfer);
  margin-bottom: .25rem;
}
.leistung-erste h3 { font-size: clamp(2.3rem, 6vw, 3.2rem); font-weight: 300; }

@media (min-width: 60em) {
  .leistung { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; padding-block: 5rem; }
  .leistung:nth-child(even) .exponat { order: 2; }
  .leistung:not(.leistung-erste) .exponat { max-width: 28rem; justify-self: center; }
  .leistung-erste { grid-template-columns: 1.25fr 1fr; }
}

/* ---------- Über mich ---------- */
.ueber-raster {
  display: grid;
  gap: 3rem;
  max-width: var(--breit);
  margin: 0 auto;
}
.ueber-bild { width: min(100%, 24rem); justify-self: center; }
.ueber-text h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
.unterschrift {
  font-family: var(--schrift-titel);
  font-style: italic;
  font-size: 1.9rem;
  color: var(--kupfer);
  margin-top: 1.5rem;
}

.werkstatt {
  display: grid;
  gap: 2.5rem;
  max-width: var(--breit);
  margin: clamp(4rem, 10vw, 7rem) auto 0;
}

@media (min-width: 60em) {
  .ueber-raster { grid-template-columns: 24rem 1fr; gap: 6rem; align-items: center; }
  .werkstatt { grid-template-columns: 1.1fr 1fr; gap: 6rem; align-items: center; }
}

/* ---------- Kontakt ---------- */
.kontakt-tafel {
  display: grid;
  gap: 3rem;
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--weiss);
  outline: 1px solid var(--gold);
  outline-offset: -.75rem;
}
.kontakt-spalte h3 { font-size: 1.9rem; }
.zeiten { width: 100%; border-collapse: collapse; }
.zeiten th, .zeiten td {
  padding: .75rem 0;
  border-bottom: 1px solid var(--haarlinie);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}
.zeiten td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zeiten th { padding-right: 1rem; }
.klein { font-size: .9rem; margin-top: 1rem; }
.kontaktliste { margin: 1.5rem 0 0; display: grid; gap: .1rem 1.5rem; }
.kontaktliste dt {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-leise);
  padding-top: .3rem;
}
.kontaktliste dd { margin: 0 0 .9rem; overflow-wrap: break-word; min-width: 0; }

@media (min-width: 30em) {
  .kontaktliste { grid-template-columns: auto 1fr; gap: .9rem 1.5rem; }
  .kontaktliste dd { margin: 0; }
}
address { font-style: normal; }

@media (min-width: 60em) {
  .kontakt-tafel { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

/* ---------- Anfahrt ---------- */
.anfahrt-raster {
  display: grid;
  gap: 3.5rem;
  max-width: var(--breit);
  margin: 0 auto;
}
.wege { margin: 1.75rem 0; }
.wege dt {
  margin-top: 1rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.wege dd { margin: .2rem 0 0; }
.kartenlinks-titel {
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: .6rem;
}
.kartenlinks { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.kartenlinks a {
  display: inline-block;
  padding-block: .35rem;
  color: var(--anthrazit);
  text-decoration-color: var(--gold);
  text-underline-offset: .4em;
}
.skizze-rahmen { margin: 0; }
.skizze-rahmen figcaption { font-size: .82rem; color: var(--text-leise); margin-top: .75rem; text-align: center; }
.skizze { width: 100%; max-width: 26rem; margin: 0 auto; height: auto; }
.k-strasse path, .k-haupt { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-strasse path { stroke: var(--anthrazit); stroke-width: .8; opacity: .55; }
.k-haupt { stroke: var(--anthrazit); stroke-width: 1.6; }
.k-tram { fill: none; stroke: var(--gold); stroke-width: 5; opacity: .45; }
.k-halt circle { fill: var(--creme); stroke: var(--anthrazit); stroke-width: .8; }
.k-halt text { font: 500 8.5px var(--schrift-text); fill: var(--anthrazit); text-anchor: middle; }
.k-label text, .k-label {
  font-family: var(--schrift-text);
  font-size: 10.5px;
  letter-spacing: .04em;
  fill: var(--anthrazit);
  paint-order: stroke;
  stroke: var(--creme);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.k-ziel circle:first-child { fill: var(--kupfer); }
.k-ziel circle:last-child { fill: var(--creme); }
.k-ziel-text { font-family: var(--schrift-titel); font-style: italic; font-size: 17px; fill: var(--kupfer-text); }
.schaufenster { max-width: 24rem; justify-self: center; width: 100%; }

@media (min-width: 60em) {
  .anfahrt-raster { grid-template-columns: 1fr 1fr 1fr; gap: 4rem; align-items: start; }
}

/* ---------- Fuß ---------- */
.fuss {
  margin-top: clamp(5rem, 12vw, 9rem);
  padding: 4rem 1.25rem 3rem;
  text-align: center;
  border-top: 1px solid var(--haarlinie);
  font-size: .95rem;
  color: var(--text-leise);
}
.fuss p { margin-bottom: .4rem; }
.fuss-logo { width: 3.25rem; margin: 0 auto 1.25rem; }
.fuss-name { font-family: var(--schrift-titel); font-size: 1.4rem; color: var(--anthrazit); }
.fuss-insta { display: inline-flex; align-items: center; gap: .45rem; }
.fuss-recht {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 2rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.fuss-recht a { color: var(--anthrazit); }

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.rechtstext {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem 0;
  overflow-wrap: break-word;
}
.seiten-logo { display: block; width: fit-content; margin: 0 auto; }
.seiten-logo img { width: clamp(5.5rem, 20vw, 7rem); margin: 0 auto 1.5rem; }
.rechtstext h1 {
  font-weight: 300;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  text-align: center;
  margin-bottom: 2.5rem;
}
.rechtstext h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 1.5rem auto 0;
  background: var(--gold);
}
.rechtstext h2 { font-size: clamp(1.6rem, 4.5vw, 2.1rem); font-weight: 400; margin-top: 2.5em; }
.rechtstext h3 { font-size: 1.4rem; margin-top: 1.8em; }
.rechtstext h4 {
  margin: 1.6em 0 .4em;
  font-family: var(--schrift-text);
  font-size: 1rem;
  font-weight: 500;
}
.rechtstext ul { padding-left: 1.25rem; margin: 0 0 1.1em; }
.rechtstext a { overflow-wrap: anywhere; }

/* ---------- Bewegung ---------- */
/* Hover (nur mit Maus): Exponat hebt sich leicht, das Bild zoomt ruhig im Passepartout */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .exponat { transition: transform .6s ease, box-shadow .6s ease; }
  .exponat picture { display: block; overflow: hidden; }
  .exponat img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
  .exponat:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(44, 36, 27, .06), 0 32px 56px -28px rgba(44, 36, 27, .42);
  }
  .exponat:hover img { transform: scale(1.04); }
}

/* Beim Scrollen sanft einblenden (nur Browser, die das ohne JavaScript können;
   alle anderen zeigen die Inhalte einfach sofort) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .leistung, .ueber-raster, .werkstatt, .kontakt-tafel, .anfahrt-raster > * {
      animation: auftauchen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(1.75rem); }
  to { opacity: 1; transform: none; }
}
@media print {
  *, *::before, *::after { animation: none !important; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}