/* Viano Hair Crew – Gestaltung
   Farben: Beige und Sand, Dunkelbraun und Espresso, Altgold als einziger Akzent.
   Schriften: Fraunces (Überschriften), Jost (Text), beide selbst gehostet in /fonts/. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/fraunces.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: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/fraunces-kursiv.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 600;
  font-display: swap;
  src: url(/fonts/jost.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;
}

:root {
  --papier: #efe4d3;        /* Beige, Grundfläche */
  --papier-2: #e3d3bc;      /* Sand, abgesetzte Flächen */
  --tinte: #33241b;         /* Dunkelbraun, Text */
  --ton: #6c5646;           /* gedämpftes Braun, Nebentext */
  --gold: #96733a;          /* Altgold: Akzente, große kursive Wörter */
  --gold-dunkel: #7a5c2a;   /* Gold für kleine Schrift (genug Kontrast auf Beige) */
  --gold-hell: #c9a66b;     /* Gold auf dunklem Grund */
  --gold-knopf: #b38d4f;    /* Fläche der Hauptknöpfe */
  --nacht: #2b1e16;         /* Espresso, dunkle Bereiche */
  --nacht-text: #ecdfcc;
  --linie: rgba(51, 36, 27, 0.16);
  --linie-hell: rgba(236, 223, 204, 0.18);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Jost', 'Segoe UI', system-ui, sans-serif;

  --breite: 1200px;
  --rand: clamp(16px, 4vw, 40px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 350;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  font-variation-settings: 'SOFT' 50, 'WONK' 0;
}
h1 em, h2 em { font-style: italic; color: var(--gold); font-weight: 300; }

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

.marke {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ton);
  margin: 0 0 1.1rem;
}

.sprung {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinte); color: var(--papier); padding: 10px 16px; z-index: 100;
}
.sprung:focus { left: 16px; top: 12px; }

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

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.85em 1.4em;
  border: 1px solid var(--tinte);
  border-radius: 2px;
  font: 500 0.95rem/1.2 var(--sans);
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--tinte);
  background: transparent;
  transition: background-color .2s, color .2s, border-color .2s;
  cursor: pointer;
}
.knopf:hover { background: var(--tinte); color: var(--papier); }
.knopf--voll { background: var(--gold-knopf); border-color: var(--gold-knopf); color: var(--nacht); }
.knopf--voll:hover { background: var(--nacht); border-color: var(--nacht); color: var(--gold-hell); }
.knopf--hell { border-color: var(--nacht-text); color: var(--nacht-text); }
.knopf--hell:hover { background: var(--nacht-text); color: var(--nacht); }
.knopf svg { width: 1em; height: 1em; flex: none; }

.textlink {
  color: var(--gold-dunkel);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  font-weight: 500;
}
.textlink:hover { color: var(--tinte); }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--papier);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.kopf.gescrollt { border-bottom-color: var(--linie); }
.kopf__innen {
  display: flex; align-items: center; gap: 24px;
  height: 76px;
}
.kopf__logo { display: block; flex: none; }
.kopf__logo img { height: 46px; width: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; }
.nav a {
  text-decoration: none; font-size: 0.95rem; font-weight: 450;
  padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--gold); }
.kopf__termin { flex: none; }
.menue-knopf { display: none; }

@media (max-width: 900px) {
  .kopf__innen { height: 64px; gap: 12px; }
  .kopf__logo img { height: 38px; }
  .kopf__termin { margin-left: auto; padding: 0.7em 1em; font-size: 0.9rem; }
  /* Ohne JavaScript: Menü als waagrechte Zeile unter dem Kopf */
  .nav { order: 3; width: 100%; margin: 0; }
  .kopf__innen { flex-wrap: wrap; height: auto; padding-top: 10px; }
  .nav ul { overflow-x: auto; gap: 20px; padding: 6px 0 10px; }
  .js .kopf__innen { flex-wrap: nowrap; height: 64px; padding-top: 0; }
  .js .menue-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -8px;
    border: 0; background: none; color: var(--tinte); cursor: pointer;
  }
  .js .nav {
    position: absolute; left: 0; right: 0; top: 64px;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    display: none;
  }
  .js .nav.offen { display: block; }
  .js .nav ul { flex-direction: column; gap: 0; padding: 4px var(--rand) 16px; }
  .js .nav a {
    display: block; padding: 14px 0; font-size: 1.15rem;
    font-family: var(--serif); border-bottom: 1px solid var(--linie);
  }
}

/* Einstieg */
.einstieg { padding: clamp(28px, 5vw, 64px) 0 clamp(56px, 8vw, 104px); }
.einstieg__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.einstieg h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
.einstieg__text { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ton); max-width: 34em; margin: 1.6rem 0 2rem; }
.einstieg__aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

.fakten {
  list-style: none; margin: 2.6rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 14px 36px;
  font-size: 0.95rem; color: var(--ton);
}
.fakten strong { display: block; font: 400 1.5rem/1.1 var(--serif); color: var(--tinte); font-variant-numeric: tabular-nums; }

/* Foto mit versetztem Goldrahmen dahinter */
/* Foto steht im HTML vor dem Text (Handy: oben, ohne Nachrutschen beim Laden), am Computer rechts */
.einstieg__bild { position: relative; margin: 0 22px 22px 0; max-width: 480px; justify-self: end; width: 100%; grid-column: 2; grid-row: 1; }
.einstieg__inhalt { grid-column: 1; grid-row: 1; }
.einstieg__bild::before {
  content: ''; position: absolute; inset: 22px -22px -22px 22px;
  border: 1px solid var(--gold-knopf);
}
.einstieg__bild img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (max-width: 820px) {
  .einstieg { padding-top: 0; }
  .einstieg__raster { grid-template-columns: 1fr; gap: 28px; }
  /* Auf dem Handy zuerst das Foto, als breiter Ausschnitt */
  .einstieg__bild, .einstieg__inhalt { grid-column: auto; grid-row: auto; }
  .einstieg__bild { margin: 0 calc(-1 * var(--rand)); max-width: none; width: auto; }
  .einstieg__bild::before { display: none; }
  .einstieg__bild img { aspect-ratio: 5 / 4; object-position: center 30%; }
}
@media (max-width: 760px) {
  .kopf__termin { display: none; }
  .js .menue-knopf { margin-left: auto; }
}

/* Abschnitte */
.abschnitt { padding: clamp(64px, 9vw, 120px) 0; }
/* Abschnitte unterhalb des Einstiegs berechnet der Browser erst, wenn sie in die Nähe kommen (schnellerer Start, v. a. auf dem Handy).
   Bewusst auf dem Inhalt (.huelle) statt auf dem Abschnitt, damit die Gold-Rauten an den Kanten nicht abgeschnitten werden. */
main > section:not(.einstieg) > .huelle, .fuss > .huelle { content-visibility: auto; contain-intrinsic-block-size: auto 900px; }
.alles-berechnen main > section > .huelle, .alles-berechnen .fuss > .huelle { content-visibility: visible; }
/* Trenner zwischen gleichfarbigen Abschnitten: feine Linie mit goldener Raute (wie im Logo) */
.abschnitt--linie { position: relative; }
.abschnitt--linie::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: calc(min(var(--breite), 100%) - 2 * var(--rand)); height: 1px;
  background: linear-gradient(to right, transparent, var(--linie) 12%, var(--linie) 47%, transparent 48.5%, transparent 51.5%, var(--linie) 53%, var(--linie) 88%, transparent);
}
.abschnitt--linie::after {
  content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  transform: rotate(45deg); background: var(--gold-knopf);
}
.abschnitt__kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 64px; align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.abschnitt__kopf h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.abschnitt__kopf p { color: var(--ton); max-width: 34em; margin: 0; }
@media (max-width: 760px) { .abschnitt__kopf { grid-template-columns: 1fr; } }

/* Leistungen */
.leistungen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--tinte); }
.leistung { padding: 28px 32px 8px 0; }
/* Listen in allen drei Spalten auf gleicher Höhe beginnen lassen */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .leistung { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
    .leistung > a { justify-self: start; align-self: start; }
  }
}
.leistung + .leistung { padding-left: 32px; border-left: 1px solid var(--linie); }
.leistung h3 { font-size: 2rem; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.leistung h3 small { font: 400 0.9rem var(--sans); color: var(--ton); font-variant-numeric: tabular-nums; }
.leistung p { color: var(--ton); margin: 0.6rem 0 1.2rem; }
.leistung ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.leistung li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--linie);
  font-size: 0.98rem;
}
.leistung li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ton); }
@media (max-width: 900px) {
  .leistungen { grid-template-columns: 1fr; }
  .leistung, .leistung + .leistung { padding: 28px 0 8px; border-left: 0; }
  .leistung + .leistung { border-top: 1px solid var(--linie); }
}

/* Produkte (Markennamen als Text, keine Hersteller-Logos) */
.marken { background: var(--papier-2); padding: clamp(40px, 6vw, 64px) 0; }
.marken__innen { display: grid; gap: 24px; }
.marken .marke { margin-bottom: 0.6rem; }
.marken__text { margin: 0; color: var(--ton); max-width: 52em; font-size: 1.1rem; text-wrap: pretty; }
/* Jede Marke mit goldener Raute davor, so bricht die Zeile auf dem Handy sauber um */
.marken__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px clamp(28px, 4vw, 56px);
  font: 350 clamp(1.7rem, 3.6vw, 2.8rem)/1.15 var(--serif);
}
.marken__liste li { white-space: nowrap; }
.marken__liste li::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  margin: 0 0.45em 0.2em 0; transform: rotate(45deg);
  background: var(--gold-knopf); vertical-align: middle;
}
@media (max-width: 560px) {
  .marken__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; font-size: 1.45rem; }
}

/* Arbeiten */
.arbeiten {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); /* 10 Fotos = 2 volle Reihen */
  gap: clamp(10px, 1.6vw, 20px);
  margin: 0; padding: 0; list-style: none;
}
.arbeiten figure { margin: 0; }
.arbeiten img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--papier-2); }
.arbeiten figcaption { font-size: 0.88rem; color: var(--ton); padding-top: 8px; line-height: 1.4; }
.arbeiten__fuss { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
@media (max-width: 760px) {
  .arbeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Salon (dunkel) */
.salon { background: var(--nacht); color: var(--nacht-text); }
.salon .marke { color: var(--gold-hell); }
.salon h2 em { color: #d4b47a; }
.salon__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.salon__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px 72px; margin-top: clamp(36px, 5vw, 56px);
}
.salon__raster h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.salon__raster > div > p { color: #d5c6b2; max-width: 34em; }
.punkte { list-style: none; margin: 0; padding: 0; }
.punkte li { padding: 18px 0; border-top: 1px solid var(--linie-hell); }
.punkte li:last-child { border-bottom: 1px solid var(--linie-hell); }
.punkte strong { display: block; font: 400 1.3rem/1.3 var(--serif); color: #f3e8d8; margin-bottom: 2px; }
.punkte span { color: #c4b39d; font-size: 0.98rem; }
@media (max-width: 760px) { .salon__raster { grid-template-columns: 1fr; } }

/* Team */
.team {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 36px 20px; list-style: none; margin: 0; padding: 0;
}
.team li { margin: 0; }
.team img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--papier-2); }
.team h3 { font-size: 1.35rem; margin-top: 14px; }
.team p { color: var(--ton); font-size: 0.92rem; margin: 2px 0 0; }
.team__chefin {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: center;
  padding-bottom: 36px; border-bottom: 1px solid var(--linie);
}
.team__chefin h3 { font-size: 2.2rem; margin-top: 0; }
.team__chefin blockquote {
  margin: 1rem 0 0; font: italic 300 1.35rem/1.4 var(--serif); color: var(--tinte); max-width: 30em;
}
@media (max-width: 900px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team__chefin { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
  .team__chefin h3 { font-size: 1.7rem; }
  .team__chefin blockquote { font-size: 1.1rem; }
}

/* Stimmen */
.stimmen {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px 72px; align-items: start;
}
.wertung { font: 300 clamp(4rem, 9vw, 7rem)/0.9 var(--serif); font-variant-numeric: tabular-nums; margin: 0; }
/* 4,7 von 5 Sternen = 94 % gefüllt */
.wertung__sterne {
  display: inline-block; letter-spacing: 0.15em; font-size: 1.2rem; margin: 18px 0 8px;
  background: linear-gradient(90deg, var(--gold-knopf) 94%, var(--linie) 94%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wertung__text { color: var(--ton); }
.zitat { margin: 0; padding: 0 0 0 28px; border-left: 2px solid var(--gold-knopf); }
.zitat p { font: 300 clamp(1.35rem, 2.4vw, 1.85rem)/1.35 var(--serif); }
.zitat footer { color: var(--ton); font-size: 0.92rem; }
@media (max-width: 760px) { .stimmen { grid-template-columns: 1fr; } }

/* Weitere Bewertungen: 3 Spalten, auf dem Handy waagrecht zum Wischen */
.stimmen-liste {
  list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.stimmen-liste li {
  display: flex; flex-direction: column;
  background: var(--papier-2); padding: 26px 28px 24px;
  border-top: 2px solid var(--gold-knopf);
}
.stimmen-liste blockquote { margin: 0 0 18px; flex: 1; }
.stimmen-liste blockquote p { margin: 0; font: 350 1.18rem/1.45 var(--serif); }
.stimme__thema { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dunkel); margin: 0 0 12px; }
.stimme__name { margin: 0; font-size: 0.9rem; color: var(--ton); }
.stimme__name::before { content: '★★★★★'; color: var(--gold-knopf); letter-spacing: 0.1em; margin-right: 10px; }
.stimmen-hinweis { margin: 20px 0 0; font-size: 0.82rem; color: var(--ton); max-width: 60em; }
@media (max-width: 900px) {
  .stimmen-liste {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 340px);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px;
    margin-right: calc(-1 * var(--rand)); padding-right: var(--rand);
  }
  .stimmen-liste li { scroll-snap-align: start; }
}

/* Kontakt */
.kontakt { background: var(--papier-2); }
.kontakt__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
}
.kontakt h3 { font: 500 0.78rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ton); margin-bottom: 16px; }
.kontakt address { font-style: normal; font-size: 1.15rem; line-height: 1.55; }
.kontakt address a { text-decoration: none; border-bottom: 1px solid var(--linie); }
.kontakt address a:hover { border-bottom-color: var(--gold); }
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--linie); font-weight: 400; }
.zeiten td { text-align: right; }
.zeiten tr.heute th, .zeiten tr.heute td { font-weight: 600; color: var(--gold-dunkel); }
.status { font-size: 0.95rem; margin-top: 12px; color: var(--ton); min-height: 1.6em; }
.kontakt__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kontakt__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
@media (max-width: 960px) { .kontakt__raster { grid-template-columns: 1fr 1fr; } .kontakt__bild { grid-column: 1 / -1; } }
@media (max-width: 620px) { .kontakt__raster { grid-template-columns: 1fr; } }

/* Anfahrt: eigene Karte (werkzeuge/karte.mjs) mit Adresskarte darüber */
.anfahrt { position: relative; margin-bottom: clamp(48px, 6vw, 72px); }
.anfahrt__karte { display: block; border: 1px solid var(--linie); overflow: hidden; }
.anfahrt__karte img {
  width: 100%; height: clamp(380px, 40vw, 520px);
  object-fit: cover; object-position: 68% 50%; /* Salon-Markierung bleibt bei jeder Breite im Bild */
  transition: transform .6s ease;
}
@media (prefers-reduced-motion: no-preference) { .anfahrt__karte:hover img { transform: scale(1.02); } }
.anfahrt__info {
  position: absolute; left: clamp(20px, 3vw, 40px); top: 50%; transform: translateY(-50%);
  width: min(400px, 42%);
  background: var(--papier); border-top: 3px solid var(--gold-knopf);
  padding: 30px 34px 34px;
  box-shadow: 0 24px 60px -24px rgba(43, 29, 22, 0.45);
}
.anfahrt__info .marke { margin-bottom: 0.8rem; }
.kontakt .anfahrt__adresse {
  font: normal 350 clamp(1.9rem, 2.8vw, 2.5rem)/1.12 var(--serif);
  letter-spacing: -0.01em; margin: 0 0 1.2rem;
}
.anfahrt__punkte { list-style: none; margin: 0 0 1.6rem; padding: 0; color: var(--ton); font-size: 0.98rem; }
.anfahrt__punkte li { padding: 3px 0; }
.anfahrt__punkte li::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 0.7em 0.15em 0;
  transform: rotate(45deg); background: var(--gold-knopf); vertical-align: middle;
}
.anfahrt__quelle {
  position: absolute; right: 1px; bottom: 1px; margin: 0;
  font-size: 0.72rem; color: var(--ton); background: rgba(239, 228, 211, 0.88); padding: 2px 8px;
}
.anfahrt__quelle a { color: inherit; }
@media (max-width: 760px) {
  .anfahrt__karte img { height: 280px; }
  .anfahrt__info { position: relative; z-index: 1; left: auto; top: auto; transform: none; width: auto; margin: -28px 12px 0; }
  .anfahrt__quelle { position: static; text-align: right; background: none; padding: 6px 0 0; }
}

/* Fuß */
.fuss { background: var(--nacht); color: #c4b39d; padding: 56px 0 36px; font-size: 0.95rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: #f3e8d8; text-decoration: underline; text-underline-offset: 0.2em; }
.fuss__unten { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--linie-hell); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.88rem; }

/* Leiste unten auf dem Handy */
.handyleiste { display: none; }
@media (max-width: 760px) {
  .handyleiste {
    display: grid; grid-template-columns: 1fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--papier); border-top: 1px solid var(--linie);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px;
  }
  .handyleiste .knopf { justify-content: center; padding: 0.8em 0.6em; }
  body { padding-bottom: 72px; }
}

/* Preisliste */
.seitenkopf { padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(28px, 4vw, 48px); } /* seitlicher Rand kommt von .huelle */
.seitenkopf h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
.seitenkopf p { color: var(--ton); max-width: 38em; margin-top: 1.2rem; }
.reiter {
  position: sticky; top: 76px; z-index: 30;
  background: var(--papier); border-bottom: 1px solid var(--linie);
}
.reiter ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; overflow-x: auto; }
.reiter a { display: block; padding: 16px 0 14px; text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.reiter a:hover, .reiter a.aktiv { border-bottom-color: var(--gold); }
@media (max-width: 900px) { .reiter { top: 64px; } }

.preisbereich { padding: clamp(48px, 7vw, 88px) 0 0; scroll-margin-top: 130px; }
.preisbereich > h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 8px; }
.preisgruppe { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: 16px 48px; padding: 28px 0; border-top: 1px solid var(--linie); }
.preisgruppe:first-of-type { border-top-color: var(--tinte); }
.preisgruppe h3 { font: 500 0.78rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ton); padding-top: 8px; }
.preise { margin: 0; }
.preis {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 2px 24px; padding: 12px 0; border-bottom: 1px solid var(--linie);
  align-items: baseline;
}
.preis:last-child { border-bottom: 0; }
.preis dd { margin: 0; }
.preis dt { font: 400 1.2rem/1.3 var(--serif); }
.preis .dauer { font-size: 0.88rem; color: var(--ton); white-space: nowrap; font-variant-numeric: tabular-nums; }
.preis .betrag { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; min-width: 6.5em; }
.preis .info { grid-column: 1 / -1; color: var(--ton); font-size: 0.93rem; max-width: 46em; margin: 2px 0 0; }
@media (max-width: 700px) {
  .preisgruppe { grid-template-columns: 1fr; gap: 4px; }
  .preis { grid-template-columns: minmax(0, 1fr) auto; }
  .preis .dauer { grid-row: 2; grid-column: 1; }
  .preis .betrag { grid-row: 1; grid-column: 2; min-width: 0; }
}
.hinweis { color: var(--ton); font-size: 0.95rem; max-width: 46em; }
.preis-cta { margin: clamp(56px, 8vw, 96px) 0; padding: 40px; background: var(--papier-2); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.preis-cta h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

/* Rechtstexte */
.recht { max-width: 46em; padding-bottom: 96px; }
.recht h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 48px 0 32px; }
.recht h2 { font-size: 1.6rem; margin: 2.4rem 0 0.8rem; }
.recht h3 { font: 600 1rem/1.4 var(--sans); margin: 1.6rem 0 0.4rem; }
.recht a { color: var(--gold-dunkel); }
.recht ul { padding-left: 1.2em; }

/* ---------------------------------------------------------------
   Effekte. Alles respektiert "Bewegung reduzieren" im Betriebssystem.
   Inhalte sind ohne JavaScript immer sichtbar; versteckt wird nur,
   was seite.js gezielt beim Scrollen einblendet.
   --------------------------------------------------------------- */
@keyframes hochgleiten { from { transform: translateY(14px); } to { transform: none; } }
@keyframes bildZoom { from { transform: scale(1.035); } to { transform: none; } }
@keyframes pulsieren { 0% { box-shadow: 0 0 0 0 rgba(179, 141, 79, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(179, 141, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(179, 141, 79, 0); } }

/* Live-Hinweis im Einstieg */
.einstieg__status { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 0.95rem; color: var(--ton); }
/* Platz ist von Anfang an reserviert, Text kommt aus seite.js (kein Nachrutschen) */
.einstieg__status { min-height: 1.5em; }
.einstieg__status:not(.bereit) { visibility: hidden; }
@media (max-width: 520px) { .einstieg__status .zusatz { display: none; } }
.einstieg__status .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--gold-knopf); flex: none; }
.einstieg__status.offen .punkt { animation: pulsieren 2s infinite; }
.einstieg__status.offen { color: var(--tinte); }

/* Galerie: Rahmen, sanfter Zoom, Buchungs-Hinweis */
.arbeiten__bild { position: relative; overflow: hidden; }
.arbeiten__bild img { transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.arbeiten__buchen {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 14px 12px; text-align: center; text-decoration: none;
  font-size: 0.88rem; font-weight: 500; letter-spacing: 0.02em; color: #fbf6ef;
  background: linear-gradient(to top, rgba(33, 22, 14, 0.78), rgba(33, 22, 14, 0));
  opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s;
}
@media (hover: hover) {
  .arbeiten figure:hover .arbeiten__bild img { transform: scale(1.06); }
  .arbeiten figure:hover .arbeiten__buchen { opacity: 1; transform: none; }
}

/* Team: Porträt hebt sich mit goldenem Ring ab */
.team img { transition: transform .45s ease, box-shadow .45s ease; }
@media (hover: hover) {
  .team li:hover img { transform: translateY(-4px); box-shadow: 0 0 0 3px var(--papier), 0 0 0 5px var(--gold-knopf), 0 18px 30px -18px rgba(43, 29, 22, .5); }
}

/* Goldene Knöpfe: dezenter Glanz beim Drüberfahren */
.knopf--voll { position: relative; overflow: hidden; }
.knopf--voll::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg); transition: left .7s ease; pointer-events: none;
}
@media (hover: hover) { .knopf--voll:hover::after { left: 130%; } }

@media (prefers-reduced-motion: no-preference) {
  /* Einstieg: nur sanftes Hochgleiten, ohne Ausblenden. Inhalte sind ab dem ersten Bild sichtbar
     (wichtig für die Ladezeit-Messung von Google, "Largest Contentful Paint"). */
  .einstieg h1, .einstieg__text, .einstieg__aktionen, .einstieg__status, .fakten { animation: hochgleiten .9s cubic-bezier(.2,.7,.2,1) both; }
  .einstieg__text { animation-delay: .06s; }
  .einstieg__aktionen { animation-delay: .12s; }
  .einstieg__status, .fakten { animation-delay: .18s; }
  .einstieg__bild img { animation: bildZoom 1.4s cubic-bezier(.2,.7,.2,1) both; }

  /* Beim Scrollen einblenden (nur wenn seite.js die Klasse setzt) */
  /* Verstecken ohne Übergang (passiert außerhalb des Bildes), Einblenden mit Übergang */
  .zeigen-bereit [data-zeigen] { opacity: 0; transform: translateY(26px); }
  .zeigen-bereit [data-zeigen].sichtbar { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
}
@media (prefers-reduced-motion: reduce) {
  .einstieg__status.offen .punkt { animation: none; }
  .arbeiten__bild img, .arbeiten__buchen, .team img, .knopf--voll::after { transition: none; }
}

/* ---------- Ihr erster Besuch ---------- */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--tinte); }
.schritte li { padding: 32px 36px 8px 0; position: relative; }
.schritte li + li { padding-left: 36px; border-left: 1px solid var(--linie); }
.schritte__nr { display: block; font: italic 300 3.6rem/1 var(--serif); color: var(--gold); margin-bottom: 18px; }
.schritte h3 { font-size: 1.6rem; margin-bottom: 10px; }
.schritte p { color: var(--ton); margin: 0; }
.schritte__aktion { margin-top: 40px; }
@media (max-width: 900px) {
  .schritte { grid-template-columns: 1fr; }
  .schritte li, .schritte li + li { padding: 26px 0 20px; border-left: 0; }
  .schritte li + li { border-top: 1px solid var(--linie); }
  .schritte__nr { font-size: 2.8rem; margin-bottom: 10px; }
}

/* ---------- Brautstyling (dunkel) ---------- */
.braut { background: var(--nacht); color: var(--nacht-text); }
.braut .marke { color: var(--gold-hell); }
.braut h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.braut h2 em { color: #d4b47a; }
.braut__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 80px; align-items: start; }
.braut__text { color: #d5c6b2; max-width: 32em; margin: 1.4rem 0 2rem; font-size: 1.08rem; }
.braut__zitat { margin: 0; padding-left: 24px; border-left: 2px solid var(--gold-knopf); }
.braut__zitat p { font: italic 300 1.4rem/1.4 var(--serif); color: #f3e8d8; margin: 0 0 8px; }
.braut__zitat footer { font-size: 0.88rem; color: #c4b39d; }
.braut__ablauf { list-style: none; margin: 0; padding: 0; }
.braut__ablauf li { padding: 22px 0; border-top: 1px solid var(--linie-hell); }
.braut__ablauf li:last-child { border-bottom: 1px solid var(--linie-hell); }
.braut__ablauf h3 { font-size: 1.5rem; color: #f3e8d8; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; }
/* Schrittnummer in einer goldenen Raute (wie im Logo); die Zahl wird zurückgedreht */
.braut__ablauf h3 span { position: relative; width: 30px; height: 30px; margin: 0 6px; border: 1px solid var(--gold-hell); display: inline-grid; place-items: center; transform: rotate(45deg); font-size: 0; flex: none; }
.braut__ablauf h3 span::after {
  content: attr(data-nr); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 500 0.95rem/1 var(--sans); color: var(--gold-hell); transform: rotate(-45deg);
}
.braut__preise { margin: 0; }
.braut__preise div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.braut__preise dt { color: #e5d8c6; }
.braut__preise dd { margin: 0; color: var(--gold-hell); font-variant-numeric: tabular-nums; white-space: nowrap; }
.braut__aktion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 860px) { .braut__raster { grid-template-columns: 1fr; } }

/* ---------- Gutscheine ---------- */
.gutscheine { background: var(--papier-2); padding: clamp(64px, 8vw, 104px) 0; }
.gutscheine__raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px 72px; align-items: center; }
.gutscheine h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.gutscheine__text { color: var(--ton); max-width: 32em; margin: 1.4rem 0 2rem; font-size: 1.08rem; }
.gutscheine__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.gutschein-karte {
  aspect-ratio: 1.6; max-width: 460px; width: 100%; justify-self: center;
  background: var(--nacht); color: var(--nacht-text);
  border: 1px solid var(--gold-knopf); outline: 1px solid var(--gold-knopf); outline-offset: -12px;
  padding: 30px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 30px 60px -30px rgba(43, 29, 22, 0.6);
  transform: rotate(-3deg); transition: transform .5s ease;
}
.gutschein-karte img { height: 46px; width: auto; margin-bottom: 14px; }
.gutschein-karte__titel { font: italic 300 2.6rem/1 var(--serif); color: #e6c98f; margin: 0 0 14px; letter-spacing: 0.02em; }
.gutschein-karte__fuer { margin: 0; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: #c4b39d; }
.gutschein-karte__linie { width: 70%; border-bottom: 1px solid rgba(201, 166, 107, 0.6); height: 26px; margin: 0 0 16px; }
.gutschein-karte__fuss { margin: 0; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: #a8957f; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .gutschein-karte:hover { transform: rotate(0deg) scale(1.02); } }
@media (max-width: 820px) { .gutscheine__raster { grid-template-columns: 1fr; } .gutschein-karte { transform: rotate(-2deg); max-width: 380px; } }

/* ---------- Instagram ---------- */
.insta__reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.insta__reihe a { position: relative; display: block; overflow: hidden; aspect-ratio: 1; }
.insta__reihe img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, filter .4s; }
.insta__reihe svg {
  position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  color: #fff; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s;
}
@media (hover: hover) {
  .insta__reihe a:hover img { transform: scale(1.06); filter: brightness(.72); }
  .insta__reihe a:hover svg { opacity: 1; transform: none; }
}
.insta__aktion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
@media (max-width: 760px) {
  .insta__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .insta__reihe li:nth-child(n+4) { display: none; }
}

/* ---------- Häufige Fragen ---------- */
.fragen__raster { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 32px 72px; align-items: start; }
.fragen__raster h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.fragen__text { color: var(--ton); margin-top: 1.4rem; max-width: 26em; }
.fragen { border-top: 1px solid var(--tinte); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font: 400 1.25rem/1.35 var(--serif);
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -9px;
  border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); transition: transform .3s;
}
.fragen details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.fragen summary:hover { color: var(--gold-dunkel); }
.fragen details p { margin: 0 0 22px; color: var(--ton); max-width: 40em; }
@media (max-width: 860px) { .fragen__raster { grid-template-columns: 1fr; } }

/* ---------- Social Media im Fuß ---------- */
.knopf svg { width: 1.05em; height: 1.05em; }

/* ---------- Vorher & Nachher ---------- */
.vergleiche { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.vergleich__bilder { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; position: relative; }
.vergleich__bilder::after {
  content: '→'; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--papier); color: var(--gold-dunkel); font-size: 1.1rem; box-shadow: 0 6px 16px -6px rgba(43, 29, 22, .45);
}
.vergleich__bilder figure { margin: 0; position: relative; overflow: hidden; }
.vergleich__bilder img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s ease; }
.vergleich__bilder figcaption {
  position: absolute; left: 8px; top: 8px; padding: 3px 9px;
  font-size: 0.72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(239, 228, 211, .92); color: var(--tinte);
}
.vergleich__bilder figure:last-child figcaption { background: var(--gold-knopf); color: var(--nacht); }
@media (hover: hover) { .vergleich:hover .vergleich__bilder figure:last-child img { transform: scale(1.05); } }
.vergleich h3 { font-size: 1.35rem; margin-top: 16px; }
.vergleich p { margin: 4px 0 0; color: var(--ton); font-size: 0.95rem; }
@media (max-width: 900px) {
  .vergleiche {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(86%, 380px);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px;
    margin-right: calc(-1 * var(--rand)); padding-right: var(--rand);
  }
  .vergleich { scroll-snap-align: start; }
}

/* ---------- Karriere ---------- */
.karriere-kopf p:not(.marke) { font-size: 1.12rem; }
.karriere-bild { margin: 0 0 clamp(16px, 3vw, 32px); }
.karriere-bild img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.karriere-bild figcaption { font-size: 0.88rem; color: var(--ton); padding-top: 10px; }
.karriere-punkte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; border-top: 1px solid var(--tinte); }
.karriere-punkte li { padding: 26px 0 22px; border-bottom: 1px solid var(--linie); }
.karriere-punkte h3 { font-size: 1.4rem; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.karriere-punkte h3::before { content: ''; width: 8px; height: 8px; background: var(--gold-knopf); transform: rotate(45deg); flex: none; }
.karriere-punkte p { margin: 0; color: var(--ton); }
.karriere-raster { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px 72px; align-items: start; }
.karriere-raster h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.karriere-text { color: var(--ton); margin-top: 1.4rem; max-width: 30em; font-size: 1.08rem; }
.karriere-hinweis { margin-top: 18px; font-size: 0.88rem; color: var(--ton); }
.schritte--klein { grid-template-columns: 1fr; border-top: 1px solid var(--tinte); }
.schritte--klein li, .schritte--klein li + li { padding: 20px 0 18px 64px; border-left: 0; border-top: 0; border-bottom: 1px solid var(--linie); }
.schritte--klein .schritte__nr { position: absolute; left: 0; top: 18px; font-size: 2.2rem; margin: 0; }
.schritte--klein h3 { font-size: 1.3rem; margin-bottom: 4px; }
@media (max-width: 900px) { .karriere-punkte { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .karriere-punkte, .karriere-raster { grid-template-columns: 1fr; } .karriere-bild img { aspect-ratio: 4 / 3; } }

/* Team: Hinweis auf die Karriereseite */
.team-karriere {
  margin-top: clamp(40px, 5vw, 56px); padding: 22px 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px;
  background: var(--papier-2); border-left: 3px solid var(--gold-knopf);
  text-decoration: none; color: var(--ton); transition: background-color .25s;
}
.team-karriere strong { font: 400 1.35rem var(--serif); color: var(--tinte); margin-right: 10px; }
.team-karriere__pfeil { color: var(--gold-dunkel); font-weight: 500; white-space: nowrap; transition: transform .25s; }
.team-karriere:hover { background: #ddcbb0; }
@media (hover: hover) { .team-karriere:hover .team-karriere__pfeil { transform: translateX(4px); } }
.karriere-motto { margin: clamp(32px, 4vw, 48px) 0 0; font: italic 300 clamp(1.4rem, 2.4vw, 1.9rem)/1.3 var(--serif); color: var(--gold-dunkel); }

/* ---------- Übergänge zwischen Abschnitten ---------- */
/* Sandfarbene Abschnitte für einen Wechsel Beige / Sand / Espresso */
.abschnitt--sand { background: var(--papier-2); }
.abschnitt--sand .stimmen-liste li { background: var(--papier); }

/* Dunkle Abschnitte: gerade Kante mit feiner Goldlinie und goldener Raute in der Mitte (wie im Logo) */
.salon, .braut { position: relative; border-top: 1px solid rgba(201, 166, 107, 0.55); }
.salon::after, .braut::after {
  content: ""; position: absolute; top: -7px; left: 50%; width: 13px; height: 13px; margin-left: -6.5px;
  transform: rotate(45deg); background: var(--gold-knopf); box-shadow: 0 0 0 5px var(--nacht);
}


/* ---------- Fußbereich: linksbündig in Spalten (Marke · Menü · Termin), alle oben bündig ---------- */
.fuss__spalten { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1.25fr); gap: 40px 56px; align-items: start; }
.fuss__marke img { height: 56px; width: auto; display: block; margin-bottom: 18px; }
.fuss__marke p { margin: 0; max-width: 19em; color: #c4b39d; }
.fuss__titel { margin: 4px 0 18px; font-size: 0.74rem; font-weight: 500; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-hell); }
.fuss .fuss__menue { display: grid; grid-template-rows: repeat(4, auto); grid-auto-flow: column; justify-content: start; gap: 12px 56px; }
.fuss .fuss__menue a {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #e5d8c6;
  padding: 4px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.fuss .fuss__menue a:hover { color: var(--gold-hell); border-bottom-color: var(--gold-hell); text-decoration: none; }
.fuss .fuss__sozial { display: flex; gap: 10px; margin-top: 20px; }
.fuss__sozial a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--linie-hell); color: #ecdfcc; }
.fuss__sozial a:hover { border-color: var(--gold-hell); color: var(--gold-hell); text-decoration: none; }
.fuss__sozial svg { width: 19px; height: 19px; }
.fuss__satz { margin: 0 0 20px; font: 350 1.7rem/1.2 var(--serif); color: #f3e8d8; }
.fuss__satz em { font-style: italic; color: #d4b47a; }
.fuss__spalten + .fuss__unten { margin-top: 48px; }
@media (max-width: 1000px) {
  .fuss__spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fuss__aufruf { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--linie-hell); }
}
@media (max-width: 600px) {
  .fuss__spalten { grid-template-columns: 1fr; gap: 32px; }
  .fuss .fuss__menue { gap: 12px 40px; }
}

/* Einstieg: die kleine Zeile ist Teil der Hauptüberschrift (für Google), sieht aber aus wie vorher */
.einstieg h1 .marke { display: block; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.16em; margin: 0 0 1.1rem; }
.einstieg h1 .einstieg__titel { display: block; }