/* Erzeugt von werkzeug/schriften.py — nicht von Hand ändern. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('/schriften/cormorant-garamond-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('/schriften/cormorant-garamond-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/cormorant-garamond-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/cormorant-garamond-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('/schriften/jost-300-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('/schriften/jost-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/jost-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('/schriften/jost-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/schriften/jost-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('/schriften/jost-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ØNEX HAIR STUDIØ — onex.studio
   Werte übernommen aus der freigegebenen Entwurfsfassung (Desktop 1440,
   Mobil 390). Dazwischen wird linear interpoliert statt gesprungen. */

:root{
  --tief:#111114;
  --tief-2:#1C1C1E;
  --weiss:#FBFAF8;
  --beige:#E3D9CB;
  --gold:#C9A227;
  --gold-hell:#D8B863;
  --gold-dunkel:#8A6E14;   /* Gold als Text auf Hell: 4,7:1 */
  --text:#3a3a3d;
  --label:#6f6d69;
  --gedaempft:#605E5A;      /* auf Off-White 6,3:1, auf Beige 4,7:1 */

  --rand:clamp(24px,6.94vw,100px);
  --bahn:1240px;
  --luft:clamp(64px,8.33vw,120px);

  /* Fließende Schriftgrade: Mobilwert bei 390px, Desktopwert bei 1440px */
  --g-wortmarke:clamp(82px,calc(82px + 114*(100vw - 390px)/1050),196px);
  --g-leitsatz:clamp(30px,calc(30px + 12*(100vw - 390px)/1050),42px);
  --g-titel:clamp(30px,calc(30px + 16*(100vw - 390px)/1050),46px);
  --g-titel-gross:clamp(34px,calc(34px + 30*(100vw - 390px)/1050),64px);
  --g-titel-mittel:clamp(32px,calc(32px + 20*(100vw - 390px)/1050),52px);
  --g-fliess:clamp(15px,calc(15px + 2*(100vw - 390px)/1050),17px);
}

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

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  background:var(--weiss);
  color:var(--tief);
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,ul,ol,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--gold-dunkel);outline-offset:3px}
/* Auf dunklen Flächen und über Fotos das helle Gold (Kontrast ≥ 3:1, WCAG 1.4.11) */
.dunkel :focus-visible,.fuss :focus-visible,.hero :focus-visible,.kopf :focus-visible,.seitenkopf :focus-visible,
.galerie :focus-visible,.marke :focus-visible,.zitat :focus-visible,.sprung:focus-visible{outline-color:var(--gold)}

/* Sprungmarke */
.sprung{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--weiss);color:var(--tief);
  padding:14px 22px;font-size:11px;letter-spacing:.2em;
}
.sprung:focus{left:0}

.bahn{width:min(100% - 2*var(--rand),var(--bahn));margin-inline:auto}

/* ── wiederkehrende Bausteine ─────────────────────────────────── */

.strich{display:block;width:48px;height:1px;background:var(--gold)}
.marke-hell .strich{background:var(--gold-dunkel)}

.etikett{
  font-size:10px;letter-spacing:.32em;color:var(--label);
  text-transform:uppercase;margin-top:12px;
}
.dunkel .etikett{color:rgba(251,250,248,.55)}
.marke-hell .etikett{color:#5A5854}

.titel{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:400;font-size:var(--g-titel);letter-spacing:.03em;
  line-height:1.18;margin-top:14px;text-wrap:balance;
}
.dunkel .titel{color:var(--weiss)}

.intro{
  font-size:var(--g-fliess);font-weight:300;line-height:1.85;
  color:var(--text);max-width:52ch;
}
.dunkel .intro{color:rgba(251,250,248,.66)}

.kopfzeile{
  display:grid;gap:32px;align-items:end;
}
@media (min-width:900px){
  .kopfzeile{grid-template-columns:1fr 1fr;gap:100px}
}

/* Schaltflächen */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  padding:17px 30px;border:1px solid transparent;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.knopf--hell{background:var(--weiss);color:var(--tief)}
.knopf--hell:hover{background:var(--gold);color:var(--tief)}
.knopf--dunkel{background:var(--tief);color:var(--weiss)}
.knopf--dunkel:hover{background:var(--gold);color:var(--tief)}
.knopf--rand{border-color:rgba(251,250,248,.65);color:var(--weiss);padding:16px 29px}
.knopf--rand:hover{border-color:var(--gold);color:var(--gold)}

/* ── Kopf ─────────────────────────────────────────────────────── */

.kopf{
  position:absolute;inset:22px var(--rand) auto;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
@media (min-width:900px){.kopf{top:40px}}

.kopf__marke{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;font-size:16px;letter-spacing:.2em;color:var(--weiss);
}
@media (min-width:900px){.kopf__marke{font-size:20px}}

.kopf__nav{display:flex;flex-wrap:wrap;gap:14px 20px}
.kopf__nav a{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,250,248,.8);transition:color .2s ease;
}
.kopf__nav a:hover{color:var(--gold)}
@media (min-width:900px){
  .kopf__nav{gap:34px}
  .kopf__nav a{font-size:10px;letter-spacing:.24em;padding-block:4px;margin-block:-4px}
}

.kopf__cta{
  /* Der Umriss allein trägt nicht: rechts im Hero steht eine helle Pflanze,
     dort liegt der Text ohne Schleier bei 3,9:1. */
  background:rgba(17,17,20,.28);
  border:1px solid rgba(251,250,248,.6);color:var(--weiss);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:12px 22px;
  transition:background-color .2s ease,color .2s ease;
}
.kopf__cta:hover{background:var(--weiss);color:var(--tief)}
@media (max-width:899px){.kopf__cta{display:none}}

/* Der Schalter erscheint nur, wenn JavaScript ihn einblendet. Ohne
   JavaScript bleibt die Navigation als kompakte Zeile sichtbar. */
.kopf__schalter{
  background:none;border:0;padding:6px 0;cursor:pointer;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--weiss);
  display:flex;align-items:center;gap:9px;
}
.kopf__schalter[hidden]{display:none}
.kopf__balken{display:block;width:22px;height:1px;background:currentColor;position:relative}
.kopf__balken::before,.kopf__balken::after{
  content:"";position:absolute;left:0;width:22px;height:1px;background:currentColor;
}
.kopf__balken::before{top:-6px}
.kopf__balken::after{top:6px}

.kopf--klappbar .kopf__nav{
  position:absolute;top:calc(100% + 18px);right:0;left:0;
  flex-direction:column;gap:0;
  background:rgba(17,17,20,.96);padding:10px 22px;
}
.kopf--klappbar .kopf__nav a{
  font-size:11px;letter-spacing:.22em;padding:15px 0;
  border-bottom:1px solid rgba(251,250,248,.12);
}
.kopf--klappbar .kopf__nav a:last-child{border-bottom:0}
.kopf--klappbar .kopf__nav[hidden]{display:none}

/* ── 1 Hero ───────────────────────────────────────────────────── */

.hero{position:relative;min-height:760px;overflow:hidden;background:var(--tief)}
@media (min-width:900px){.hero{min-height:940px}}

.hero__bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  /* Filter aus der freigegebenen Fassung */
  filter:brightness(.64) saturate(.9);
}

.hero__schleier{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,20,.62) 0%,rgba(17,17,20,.4) 42%,rgba(17,17,20,.82) 100%);
}
@media (min-width:900px){
  .hero__schleier{
    background:linear-gradient(90deg,rgba(17,17,20,.8) 0%,rgba(17,17,20,.48) 48%,rgba(17,17,20,.16) 100%);
  }
}

.hero__inhalt{
  position:relative;min-height:inherit;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:130px 64px;
}
@media (min-width:900px){.hero__inhalt{padding-block:120px}}

.hero__wortmarke{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;font-size:var(--g-wortmarke);letter-spacing:.08em;
  line-height:.94;color:var(--weiss);
}
@media (min-width:900px){.hero__wortmarke{line-height:.92}}

.hero__zusatz{
  display:block;line-height:1.4;
  /* steht im h1 und würde sonst die Cormorant der Wortmarke erben */
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:11px;letter-spacing:.5em;color:var(--weiss);margin-top:14px;
  text-transform:uppercase;
}
@media (min-width:900px){.hero__zusatz{font-size:16px;letter-spacing:.62em;margin-top:16px}}

.hero__claim{display:flex;align-items:center;gap:14px;margin-top:18px}
.hero__claim span:first-child{width:34px;height:1px;background:rgba(201,162,39,.85)}
.hero__claim span:last-child{font-size:9px;letter-spacing:.34em;color:var(--gold-hell);text-transform:uppercase}
@media (min-width:900px){
  .hero__claim{gap:18px;margin-top:24px}
  .hero__claim span:first-child{width:52px}
  .hero__claim span:last-child{font-size:11px;letter-spacing:.42em}
}

.hero__leitsatz{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;font-size:var(--g-leitsatz);letter-spacing:.04em;
  line-height:1.25;color:var(--weiss);margin-top:34px;max-width:22ch;
}
@media (min-width:900px){.hero__leitsatz{letter-spacing:.05em;margin-top:44px}}

.hero__ort{
  text-wrap:balance;
  font-size:14px;font-weight:300;line-height:1.7;
  color:rgba(251,250,248,.8);margin-top:14px;max-width:44ch;
}
@media (min-width:900px){.hero__ort{font-size:16px;line-height:1.75;margin-top:16px}}

.hero__knoepfe{display:flex;flex-direction:column;gap:10px;margin-top:30px}
.hero__knoepfe .knopf{padding-inline:0;width:100%}
@media (min-width:900px){
  .hero__knoepfe{flex-direction:row;gap:14px;margin-top:38px}
  .hero__knoepfe .knopf{width:auto;padding-inline:30px}
  .hero__knoepfe .knopf--rand{padding-inline:29px}
}

/* ── 2 Claim-Band ─────────────────────────────────────────────── */

.claim{padding-top:clamp(44px,5.6vw,80px)}
.claim__zeile{display:flex;align-items:center;gap:16px}
@media (min-width:900px){.claim__zeile{gap:28px}}
.claim__strich{
  flex:1;height:20px;
  background:repeating-linear-gradient(90deg,rgba(201,162,39,.5) 0 1px,transparent 1px 10px);
}
.claim__wort{
  font-size:10px;letter-spacing:.36em;color:var(--gold-dunkel);
  white-space:nowrap;text-transform:uppercase;
}
@media (min-width:900px){.claim__wort{font-size:12px;letter-spacing:.5em}}

/* ── 3 Leistungen ─────────────────────────────────────────────── */

.leistungen{padding-block:clamp(48px,6.1vw,88px) var(--luft)}

.karten{display:grid;gap:32px;margin-top:clamp(40px,5vw,72px)}
@media (min-width:600px){.karten{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.karten{grid-template-columns:repeat(5,1fr)}}

.karte{
  display:flex;flex-direction:column;gap:18px;
  border-top:1px solid rgba(17,17,20,.18);padding-top:24px;
}
.karte__kopf{display:flex;align-items:baseline;justify-content:space-between}
.karte__ziffer{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:22px;color:var(--gold-dunkel);letter-spacing:.06em;
}
.karte__name{font-size:11px;letter-spacing:.28em;text-transform:uppercase;font-weight:400}
.karte__text{font-size:14px;font-weight:300;line-height:1.8;color:var(--text)}

/* ── 4 Der Salon ──────────────────────────────────────────────── */

.salon{padding-top:var(--luft);background:var(--weiss)}

.galerie{
  position:relative;margin-top:clamp(40px,5vw,72px);
  height:clamp(420px,52vw,760px);background:var(--beige);
}

.galerie__spur{
  display:flex;height:100%;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.galerie__spur::-webkit-scrollbar{display:none}

.galerie__folie{flex:0 0 100%;position:relative;height:100%;scroll-snap-align:start}
.galerie__folie figure{position:relative;height:100%}

.galerie__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 48%}

.galerie__verlauf{
  position:absolute;left:0;right:0;bottom:0;height:280px;
  background:linear-gradient(180deg,rgba(17,17,20,0) 0%,rgba(17,17,20,.45) 45%,rgba(17,17,20,.88) 100%);
}

.galerie__text{
  position:absolute;left:0;right:0;bottom:0;
  margin-inline:auto;padding-bottom:clamp(24px,3vw,44px);
  padding-right:clamp(0px,20vw,300px);
}
.galerie__titel{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;font-size:clamp(24px,2.4vw,34px);line-height:1.2;color:var(--weiss);
}
.galerie__unterzeile{
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--weiss);margin-top:12px;
}

/* Auf schmalen Schirmen ist neben der Steuerung kein Platz für die
   Bildunterschrift — sie rückt dann eine Zeile nach oben. Der Verlauf
   reicht dort höher, damit die Schrift auch auf hellen Bildern lesbar bleibt. */
@media (max-width:899px){
  .galerie__verlauf{height:360px;background:linear-gradient(180deg,rgba(17,17,20,0) 0%,rgba(17,17,20,.62) 42%,rgba(17,17,20,.9) 100%)}
}
@media (max-width:899px){
  .galerie__text{padding-right:0;padding-bottom:calc(clamp(24px,3vw,44px) + 58px)}
}

.galerie__steuer{
  position:absolute;right:0;bottom:0;left:0;
  margin-inline:auto;width:min(100% - 2*var(--rand),var(--bahn));
  padding-bottom:clamp(24px,3vw,44px);
  display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,1.6vw,22px);
  pointer-events:none;
}
.galerie__steuer[hidden]{display:none}
.galerie__steuer > *{pointer-events:auto}

.galerie__punkte{display:flex;gap:10px}
/* Sichtbar ein 2-px-Strich, tippbar 24 px hoch (WCAG 2.5.8) */
.galerie__punkt{
  position:relative;width:34px;height:24px;border:0;padding:0;cursor:pointer;background:none;
}
.galerie__punkt::before{
  content:"";position:absolute;left:0;right:0;top:11px;height:2px;
  background:rgba(251,250,248,.4);transition:background-color .2s ease;
}
.galerie__punkt[aria-current="true"]::before{background:var(--weiss)}
@media (max-width:599px){.galerie__punkt{width:20px}}

.galerie__zaehler{
  font-size:11px;letter-spacing:.2em;color:rgba(251,250,248,.82);
  width:60px;text-align:right;font-variant-numeric:tabular-nums;
}
@media (max-width:599px){.galerie__zaehler{display:none}}

.galerie__pfeile{display:flex;gap:8px}
.galerie__pfeil{
  width:clamp(42px,3.6vw,52px);height:clamp(42px,3.6vw,52px);
  border:1px solid rgba(251,250,248,.55);background:transparent;color:var(--weiss);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background-color .2s ease,color .2s ease;
}
.galerie__pfeil:hover:not(:disabled){background:var(--weiss);color:var(--tief)}
.galerie__pfeil:disabled{opacity:.35;cursor:default}

/* ── 5 Extensions ─────────────────────────────────────────────── */

.extensions{background:var(--beige);padding-block:var(--luft);margin-top:var(--luft)}
.extensions .titel{font-size:var(--g-titel-gross);line-height:1.1}
.extensions .intro{max-width:56ch}
.extensions__fuss{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px;border-top:1px solid rgba(17,17,20,.18);
  margin-top:clamp(40px,5vw,72px);padding-top:36px;
}
.extensions__hinweis{font-size:14px;font-weight:300;line-height:1.75;color:var(--text);max-width:46ch}

/* ── 6 Die Marke ──────────────────────────────────────────────── */

.marke{position:relative;min-height:520px;overflow:hidden;background:var(--beige);display:flex}
@media (min-width:900px){.marke{min-height:620px}}
.marke__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.marke__schleier{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,19,26,.9) 0%,rgba(31,26,32,.78) 55%,rgba(60,45,50,.42) 100%);
}
@media (min-width:900px){
  .marke__bild{object-position:72% 42%}
  .marke__schleier{
    background:linear-gradient(100deg,#14131A 0%,rgba(31,26,32,.92) 26%,rgba(60,45,50,.55) 52%,rgba(110,34,51,.18) 74%,rgba(227,217,203,0) 100%);
  }
}
.marke__inhalt{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(56px,6vw,80px);
}
@media (min-width:900px){.marke__inhalt > *{max-width:60%}}
.marke .titel{font-size:var(--g-titel-mittel);font-weight:300;line-height:1.2;text-wrap:pretty}
.marke .intro{max-width:44ch;color:rgba(251,250,248,.8);margin-top:20px}

/* ── 7 Zitat ──────────────────────────────────────────────────── */

.zitat{
  position:relative;min-height:560px;overflow:hidden;
  background:var(--tief);margin-top:var(--luft);display:flex;
}
@media (min-width:900px){.zitat{min-height:820px}}
.zitat__bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%;
  filter:grayscale(1) brightness(.46) contrast(1.08);
}
.zitat__inhalt{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding-block:clamp(72px,8vw,120px);margin-inline:auto;
  max-width:min(100% - 2*var(--rand),960px);
}
.zitat__satz{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;font-size:var(--g-titel-mittel);letter-spacing:.02em;
  line-height:1.35;color:var(--weiss);text-wrap:pretty;
}
.zitat__inhalt .strich{margin-top:40px}
.zitat__quelle{font-size:10px;letter-spacing:.3em;color:rgba(251,250,248,.92);margin-top:14px;text-transform:uppercase}

/* ── 8 Termin ─────────────────────────────────────────────────── */

.termin{background:var(--tief);padding-block:var(--luft);color:var(--weiss)}
.termin__gitter{display:grid;gap:48px}
@media (min-width:900px){.termin__gitter{grid-template-columns:1fr 1.1fr;gap:100px;align-items:start}}
.termin .titel{font-size:var(--g-titel-mittel);line-height:1.14}
.termin .intro{max-width:44ch}

.termin__wege{margin-top:clamp(32px,3.6vw,44px)}
.termin__weg{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:22px 0;border-top:1px solid rgba(251,250,248,.15);
  color:var(--weiss);transition:color .2s ease;
}
.termin__weg:last-child{border-bottom:1px solid rgba(251,250,248,.15)}
.termin__weg:hover{color:var(--gold)}
.termin__weg dt,.termin__weg .art{font-size:10px;letter-spacing:.26em;color:rgba(251,250,248,.55);text-transform:uppercase}
.termin__weg .wert{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;letter-spacing:.05em}
@media (min-width:900px){.termin__weg .wert{font-size:26px}}

/* Formular */
.formular{
  background:var(--weiss);color:var(--tief);
  padding:clamp(24px,3.3vw,48px);
  display:flex;flex-direction:column;gap:26px;
}
.formular__titel{font-size:10px;letter-spacing:.28em;color:var(--label);text-transform:uppercase}
.formular__reihe{display:grid;gap:24px}
@media (min-width:560px){.formular__reihe{grid-template-columns:1fr 1fr}}
.feld{display:flex;flex-direction:column;gap:8px}
.feld label{font-size:9px;letter-spacing:.2em;color:var(--gedaempft);text-transform:uppercase}
.feld input,.feld select,.feld textarea{
  border:0;border-bottom:1px solid rgba(17,17,20,.28);border-radius:0;
  background:transparent;padding:9px 0;
  font-family:inherit;font-size:15px;font-weight:300;color:var(--tief);
  width:100%;
}
.feld textarea{resize:vertical;min-height:96px}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-bottom-color:var(--gold)}
.feld input::placeholder,.feld textarea::placeholder{color:rgba(17,17,20,.32)}
.feld select{appearance:none;background:transparent}

.einwilligung{display:flex;gap:12px;align-items:flex-start}
.einwilligung input{width:16px;height:16px;margin-top:4px;flex:0 0 auto;accent-color:var(--gold-dunkel)}
.einwilligung label{font-size:12px;font-weight:300;line-height:1.6;color:var(--text);letter-spacing:0;text-transform:none}
.einwilligung a{border-bottom:1px solid rgba(17,17,20,.3)}

.formular__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.formular__notiz{font-size:12px;font-weight:300;line-height:1.6;color:var(--gedaempft);max-width:32ch}

.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.meldung{padding:16px 18px;font-size:14px;line-height:1.65;border-left:2px solid}
.meldung--gut{background:rgba(201,162,39,.1);border-color:var(--gold-dunkel);color:var(--tief)}
.meldung--schlecht{background:rgba(110,34,51,.08);border-color:#6E2233;color:#6E2233}
.meldung[hidden]{display:none}

/* ── 9 Anfahrt ────────────────────────────────────────────────── */

.anfahrt{padding-block:var(--luft)}
.anfahrt__gitter{display:grid;gap:48px}
@media (min-width:900px){.anfahrt__gitter{grid-template-columns:1fr 1.1fr;gap:100px;align-items:start}}
.anfahrt__adresse{font-size:var(--g-fliess);font-weight:300;line-height:1.85;color:var(--text);margin-top:20px;font-style:normal}
.anfahrt__weg{display:inline-flex;align-items:center;gap:12px;margin-top:24px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(17,17,20,.3);padding-bottom:6px;transition:color .2s ease,border-color .2s ease}
.anfahrt__weg:hover{color:var(--gold-dunkel);border-color:var(--gold-dunkel)}

.karte-bild{position:relative;aspect-ratio:16/10;background:var(--beige);overflow:hidden}
.karte-bild svg{display:block;width:100%;height:100%}
.karte-bild__fuss{position:absolute;left:20px;bottom:16px;font-size:9px;letter-spacing:.24em;color:var(--gedaempft);text-transform:uppercase}

.anfahrt__lage{border-top:1px solid rgba(17,17,20,.18);padding-top:18px;margin-top:24px;display:flex;flex-direction:column;gap:8px}
.anfahrt__lage dt{font-size:10px;letter-spacing:.26em;text-transform:uppercase}
.anfahrt__lage dd{margin:0;font-size:14px;font-weight:300;line-height:1.75;color:var(--text)}

/* ── 10 Fuß ───────────────────────────────────────────────────── */

.fuss{background:var(--tief);color:var(--weiss);padding-block:clamp(56px,5.6vw,80px) 40px}
.fuss__gitter{display:grid;gap:40px}
@media (min-width:700px){.fuss__gitter{grid-template-columns:1.4fr 1fr 1fr}}
@media (min-width:1100px){.fuss__gitter{gap:60px}}
.fuss__marke{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:34px;letter-spacing:.18em;color:var(--weiss)}
.fuss__zusatz{font-size:8px;letter-spacing:.5em;color:var(--gold);margin-top:8px;text-transform:uppercase}
.fuss__spalte h2{font-size:10px;letter-spacing:.26em;color:rgba(251,250,248,.55);text-transform:uppercase;font-weight:400}
.fuss__spalte ul{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.fuss__spalte a,.fuss__spalte li{font-size:14px;font-weight:300;line-height:1.7;color:rgba(251,250,248,.72)}
.fuss__spalte a{transition:color .2s ease;display:inline-block;min-height:24px}
.fuss__spalte a:hover{color:var(--gold)}
.fuss__linie{height:1px;background:rgba(251,250,248,.12);margin:clamp(36px,3.9vw,56px) 0 20px}
.fuss__zeile{display:flex;flex-wrap:wrap;gap:12px 40px;justify-content:space-between;font-size:10px;letter-spacing:.2em;color:rgba(251,250,248,.55);text-transform:uppercase}

/* ── Textseiten (Impressum, Datenschutz, 404) ─────────────────── */

.textseite{padding-block:clamp(120px,12vw,180px) var(--luft);min-height:60vh}
.textseite .titel{font-size:var(--g-titel);margin-top:14px}
.textseite__satz{font-size:var(--g-fliess);font-weight:300;line-height:1.85;color:var(--text);max-width:56ch;margin-top:28px}
.textseite__zurueck{display:inline-flex;align-items:center;gap:12px;margin-top:40px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(17,17,20,.3);padding-bottom:6px}
.textseite__zurueck:hover{color:var(--gold-dunkel);border-color:var(--gold-dunkel)}

.kopf--fest{position:static;background:var(--tief);padding-block:22px;inset:auto}
.kopf--fest .kopf__nav a,.kopf--fest .kopf__marke{color:var(--weiss)}
.seitenkopf{background:var(--tief)}
.seitenkopf .kopf{position:static;padding-block:22px;inset:auto}