/* ============================================================
   VORLAGE FRISEUR  ·  Aussehen der einzelnen Abschnitte
   Baut auf design.css auf.
   ============================================================ */

/* ------------------------------------------------------------
   Ziffern in Serifenschriften stehen von Haus aus unterschiedlich
   hoch (die 6 ragt hoch, die 9 haengt runter). Bei Fliesstext ist
   das schoen, bei Preisen und Telefonnummern wirkt es unruhig.
   Deshalb hier ueberall gleich hohe Ziffern erzwingen.
   ------------------------------------------------------------ */
.preis-liste__preis, .preis-liste__dauer, .held__tel, .kopf__tel-klein,
.vertrauen-band__zahl, .kontakt__weg-wert, .zeiten dt, .zeiten dd,
.gutschein__chip, .fuss__adresse, .fuss__liste, .buchung {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'lnum' 1, 'tnum' 1;
}

/* ============ KOPFZEILE ============ */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--weich), background var(--weich);
}
.kopf.ist-geklebt {
  border-bottom-color: var(--linie);
  background: color-mix(in srgb, var(--papier) 96%, transparent);
}

/* Schmaler Infobalken ganz oben */
.kopf__balken {
  background: var(--tinte);
  color: color-mix(in srgb, var(--papier) 78%, var(--tinte));
  font-size: var(--gr-xs);
  letter-spacing: .03em;
  overflow: hidden;
  max-height: 3rem;
  transition: max-height var(--weich), opacity var(--weich);
}
.kopf.ist-geklebt .kopf__balken { max-height: 0; opacity: 0; }
.kopf__balken-inhalt {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r4); min-height: 2.5rem; flex-wrap: wrap;
}
.kopf__balken-rechts { display: flex; align-items: center; gap: var(--r4); }
.kopf__tel-klein {
  text-decoration: none; font-weight: 600;
  /* Der Balken ist bewusst schmal. Damit der Finger den Link trotzdem
     sicher trifft, wird die Trefferfläche über den Innenabstand
     vergrößert - die Höhe des Balkens bleibt gleich. */
  display: inline-flex; align-items: center;
  padding-block: .7rem; margin-block: -.7rem;
}
.kopf__tel-klein:hover { color: var(--marke); }
.kopf__ort { opacity: .6; }
@media (max-width: 620px) { .kopf__ort { display: none; } }

.kopf__reihe {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r5); min-height: 5.25rem;
  transition: min-height var(--weich);
}
.kopf.ist-geklebt .kopf__reihe { min-height: 4.25rem; }

/* Logo / Betriebsname */
.marke { display: flex; flex-direction: column; text-decoration: none; line-height: 1.15; flex: none; }
.marke__name {
  font-family: var(--schrift-titel);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 600; color: var(--tinte); letter-spacing: -.01em;
}
.marke__zusatz {
  font-size: var(--gr-xs); color: var(--text-leise);
  letter-spacing: .14em; text-transform: uppercase; margin-top: .18rem;
}
.marke:hover .marke__name { color: var(--marke); }

/* ---- Logo statt Schriftzug ----
   Wenn der Betrieb ein Logo hat, tritt es an die Stelle des Namens.
   Die Höhe passt sich der Kopfzeile an, das Seitenverhältnis bleibt. */
.marke--logo { justify-content: center; }
.marke__logo {
  display: block;
  height: clamp(2.4rem, 2rem + 1.4vw, 3.4rem);
  transition: height var(--weich);
}
.marke__logo img {
  height: 100%; width: auto; max-width: min(60vw, 20rem);
  object-fit: contain; object-position: left center;
}
.kopf.ist-geklebt .marke__logo { height: clamp(2.1rem, 1.8rem + 1vw, 2.8rem); }
.marke--logo .marke__zusatz { margin-top: .3rem; }
.s-kopf-mittig .marke__logo img { object-position: center; }

@media (max-width: 560px) {
  .marke__logo { height: 2.3rem; }
  .marke__logo img { max-width: 55vw; }
}

/* Logo im Fußbereich - dort auf dunklem Grund */
.fuss__logo { display: block; margin-bottom: var(--r4); }
.fuss__logo img {
  height: clamp(2.6rem, 2.2rem + 1vw, 3.4rem);
  width: auto; max-width: 14rem; object-fit: contain; object-position: left center;
}

/* Navigation */
.nav__liste {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none; margin: 0; padding: 0;
}
.nav__liste a {
  position: relative; text-decoration: none;
  font-family: var(--schrift-klein); font-size: var(--gr-s);
  font-weight: 500; color: var(--text); white-space: nowrap;
  padding-block: .4rem;
}
.nav__liste a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--marke);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--weich);
}
.nav__liste a:hover::after, .nav__liste a.ist-aktiv::after { transform: scaleX(1); transform-origin: left; }
.nav__liste a.ist-aktiv { color: var(--marke); }
.nav__fuss { display: none; }

.kopf__aktionen {
  display: flex; align-items: center; gap: var(--r3); flex: none;
  /* Muss über dem ausgeklappten Menü liegen, sonst ist der Schließen-Knopf
     bei geöffnetem Menü nicht mehr erreichbar. */
  position: relative; z-index: 101;
}
.kopf__tel {
  display: none; align-items: center; gap: .5rem;
  font-size: var(--gr-s); font-weight: 600; text-decoration: none; color: var(--tinte);
}
.kopf__tel:hover { color: var(--marke); }
.kopf__cta { padding: .7rem 1.4rem; }

/* Menü-Knopf für Handys */
.burger {
  display: none; width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 1px solid var(--linie-stark);
  border-radius: var(--ecke-rund); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger span {
  display: block; width: 17px; height: 1.5px; background: var(--tinte);
  border-radius: 2px; transition: transform var(--weich), opacity var(--schnell);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav__schleier {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(15,13,10,.45); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--weich);
  /* Sicherheitsnetz: Solange der Schleier nicht ausdrücklich sichtbar ist,
     nimmt er keine Klicks entgegen. Bliebe er sonst versehentlich liegen,
     könnte der Besucher nichts mehr auf der Seite anklicken. */
  pointer-events: none;
}
.nav__schleier.ist-sichtbar { opacity: 1; pointer-events: auto; }

@media (max-width: 1000px) {
  .kopf__tel { display: none; }
  .burger { display: flex; }
  .nav {
    position: fixed; top: 0; right: 0; z-index: 99;
    width: min(88vw, 24rem); height: 100dvh;
    background: var(--papier);
    padding: 6rem var(--r6) var(--r6);
    transform: translateX(100%);
    /* visibility ist wichtig: ein nur verschobenes Menue zaehlt sonst zur
       Seitenbreite und man kann auf dem Handy seitlich wegscrollen. */
    visibility: hidden;
    transition: transform var(--feder), visibility 0s linear .5s;
    box-shadow: var(--schatten-l);
    display: flex; flex-direction: column; gap: var(--r6);
    overflow-y: auto;
  }
  .nav.ist-offen {
    transform: none;
    visibility: visible;
    transition: transform var(--feder), visibility 0s linear 0s;
  }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste li + li { border-top: 1px solid var(--linie); }
  .nav__liste a {
    display: block; padding: 1rem 0;
    font-size: var(--gr-l); font-family: var(--schrift-titel); font-weight: 500;
  }
  .nav__liste a::after { display: none; }
  .nav__fuss { display: block; margin-top: auto; }
  .nav__fuss .knopf { width: 100%; }
}
@media (max-width: 560px) {
  .kopf__cta { display: none; }
  .kopf__reihe { min-height: 4.5rem; }
}

/* ============ ÖFFNUNGS-ANZEIGE ============ */
.oeffnung-punkt {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--gr-xs); letter-spacing: .04em; white-space: nowrap;
}
.oeffnung-punkt__licht {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #7fb069; position: relative;
}
.oeffnung-punkt.ist-offen .oeffnung-punkt__licht::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid #7fb069;
  animation: puls 2.4s ease-out infinite;
}
.oeffnung-punkt.ist-zu .oeffnung-punkt__licht { background: #c8783f; }
@keyframes puls {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ============ KOPFBILD ============ */
.held {
  position: relative;
  min-height: min(94svh, 60rem);
  display: flex; align-items: flex-end;
  padding-block: clamp(6rem, 14vh, 10rem) clamp(3.5rem, 9vh, 6rem);
  overflow: hidden;
  color: #fff;
}
.held__bild { position: absolute; inset: 0; z-index: 0; }
.held__bild img {
  width: 100%; height: 100%; object-fit: cover;
  animation: langsam-heran 1.8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes langsam-heran { from { transform: scale(1.06); } to { transform: none; } }

.held__schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--tinte) 90%, transparent) 0%,
      color-mix(in srgb, var(--tinte) 55%, transparent) 42%,
      color-mix(in srgb, var(--tinte) 18%, transparent) 78%),
    linear-gradient(to right,
      color-mix(in srgb, var(--tinte) 55%, transparent) 0%,
      transparent 62%);
}
.held__inhalt { position: relative; z-index: 1; max-width: 52rem; }
.held__augenbraue { color: color-mix(in srgb, var(--marke) 70%, #fff); }
.held__titel {
  color: #fff; font-size: var(--gr-riese); font-weight: 400;
  line-height: 1.02; margin-bottom: var(--r5);
  animation: herein 1s cubic-bezier(.16,1,.3,1) .15s both;
}
.held__text {
  font-size: var(--gr-l); max-width: 40rem; margin-bottom: var(--r6);
  color: rgba(255,255,255,.86); line-height: 1.65;
  animation: herein 1s cubic-bezier(.16,1,.3,1) .3s both;
}
@keyframes herein { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.held__knoepfe {
  display: flex; flex-wrap: wrap; gap: var(--r3);
  animation: herein 1s cubic-bezier(.16,1,.3,1) .45s both;
}
.held__status {
  display: flex; align-items: center; gap: var(--r5); flex-wrap: wrap;
  margin-top: var(--r7); padding-top: var(--r5);
  border-top: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.8);
  animation: herein 1s cubic-bezier(.16,1,.3,1) .6s both;
}
.held__tel {
  font-family: var(--schrift-titel); font-size: var(--gr-xl);
  color: #fff; text-decoration: none; letter-spacing: -.01em;
}
.held__tel:hover { color: color-mix(in srgb, var(--marke) 75%, #fff); }

.held__pfeil {
  position: absolute; bottom: 1.5rem; left: 50%; z-index: 1;
  transform: translateX(-50%); color: rgba(255,255,255,.5);
  animation: schweben 2.6s ease-in-out infinite;
}
@keyframes schweben { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }
@media (max-width: 700px) { .held__pfeil { display: none; } .held { min-height: 88svh; } }

/* ============ ABSCHNITTS-NUMMERN ============
   Grosse, sehr dezente Ziffer hinter jeder Abschnitts-Ueberschrift.
   Typisches Mittel aus dem Zeitschriften-Layout: gibt der Seite
   eine Handschrift, ohne sich in den Vordergrund zu draengen. */
main { counter-reset: abschnitt; }
.sektion[id] { counter-increment: abschnitt; }
.sektion[id] .kopfzeile-sektion { position: relative; }
.sektion[id] .kopfzeile-sektion::before {
  content: counter(abschnitt, decimal-leading-zero);
  position: absolute; top: -.46em; left: -.08em; z-index: 0;
  font-family: var(--schrift-titel);
  font-size: clamp(5rem, 13vw, 11rem);
  font-weight: 600; line-height: 1;
  color: var(--marke);
  opacity: .085;
  pointer-events: none; user-select: none;
  font-variant-numeric: lining-nums;
}
.sektion--dunkel .kopfzeile-sektion::before { opacity: .13; }
.kopfzeile-sektion > * { position: relative; z-index: 1; }
.kopfzeile-sektion--mittig::before { left: 50%; transform: translateX(-50%); }
@media (max-width: 640px) {
  .sektion[id] .kopfzeile-sektion::before { font-size: 6rem; top: -.38em; opacity: .07; }
}

/* ============ VERTRAUENS-ZAHLEN ============
   Als feine Zeile mit Trennstrichen statt als Karten-Reihe -
   Karten wirken schnell nach Baukasten. */
.vertrauen-band {
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid var(--linie);
}
.vertrauen-band__raster {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.vertrauen-band__punkt {
  display: flex; align-items: baseline; gap: .7rem;
  flex: 1 1 auto; min-width: 0;
  position: relative;
}
.vertrauen-band__punkt + .vertrauen-band__punkt::before {
  content: ''; position: absolute;
  left: calc(-1 * clamp(.75rem, 2vw, 1.75rem));
  top: .1em; bottom: .1em; width: 1px;
  background: var(--linie-stark);
}
.vertrauen-band__zahl {
  font-family: var(--schrift-titel);
  font-size: clamp(1.9rem, 1.1rem + 2vw, 2.8rem);
  font-weight: 500; color: var(--marke); line-height: 1;
  flex: none;
}
.vertrauen-band__text {
  font-size: var(--gr-xs); color: var(--text-leise);
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.35; max-width: 12ch;
}
@media (max-width: 700px) {
  .vertrauen-band__raster { flex-direction: column; gap: var(--r4); }
  .vertrauen-band__punkt + .vertrauen-band__punkt::before { display: none; }
  .vertrauen-band__punkt {
    justify-content: flex-start;
    padding-top: var(--r4); border-top: 1px solid var(--linie);
  }
  .vertrauen-band__text { max-width: none; }
}

/* ============ PREISE ============
   Bewusst KEINE Karten nebeneinander - das ist das deutlichste
   Erkennungszeichen von Baukasten-Seiten. Stattdessen ein
   zweispaltiges Zeitschriften-Layout: Kategorie links, Liste rechts,
   getrennt nur durch Haarlinien. */
.preis-raster { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

.preis-karte {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  padding-top: var(--r5);
  border-top: 1px solid var(--linie-stark);
}
.preis-karte:first-child { border-top: 0; padding-top: 0; }

.preis-karte__titel {
  margin: 0;
  align-self: start;
  position: sticky; top: 7.5rem;
  font-family: var(--schrift-titel);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem);
  font-weight: 500;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--tinte);
  line-height: 1.1;
}
/* Kleine Ziffer vor der Kategorie - feines Detail, das Sorgfalt zeigt */
.preis-karte { counter-increment: preisgruppe; }
.preis-raster { counter-reset: preisgruppe; }
.preis-karte__titel::before {
  content: '0' counter(preisgruppe);
  display: block;
  font-family: var(--schrift-klein);
  font-size: var(--gr-xs);
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--marke);
  margin-bottom: .5rem;
  font-variant-numeric: lining-nums;
}

.preis-liste { margin: 0; }
.preis-liste__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--r5); padding-block: 1.05rem;
  border-bottom: 1px solid var(--linie);
  transition: padding-left var(--weich);
}
.preis-liste__zeile:first-child { padding-top: .25rem; }
.preis-liste__zeile:hover { padding-left: .5rem; }
.preis-liste dt { display: flex; flex-direction: column; gap: .2rem; }
.preis-liste__was {
  font-size: var(--gr-l); font-weight: 400; color: var(--tinte);
  line-height: 1.3; letter-spacing: -.005em;
}
.preis-liste__dauer {
  font-size: var(--gr-xs); color: var(--text-leise);
  letter-spacing: .1em; text-transform: uppercase;
}
.preis-liste__preis {
  margin: 0; flex: none;
  font-family: var(--schrift-titel);
  font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  font-weight: 500; color: var(--tinte); white-space: nowrap;
}

@media (max-width: 720px) {
  .preis-karte { grid-template-columns: 1fr; gap: var(--r4); }
  .preis-karte__titel { position: static; }
}
/* ---- Variante ohne Preise ----
   Ohne Beträge bliebe die rechte Hälfte der Zeile leer und der Abschnitt
   wirkt unfertig. Deshalb wandert die Dauer nach rechts an die Stelle des
   Preises, und die Liste läuft bei genug Platz in zwei Spalten. */
.preis-raster--ohne-preise .preis-karte { grid-template-columns: minmax(0, .26fr) minmax(0, 1fr); }

.preis-raster--ohne-preise .preis-liste {
  columns: 2;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
}
.preis-raster--ohne-preise .preis-liste__zeile {
  break-inside: avoid;
  padding-block: .7rem;
  align-items: baseline;
}
.preis-liste__haken { color: var(--marke); flex: none; margin-right: .45rem; vertical-align: -3px; }
.preis-raster--ohne-preise .preis-liste__was {
  display: flex; align-items: flex-start; gap: .1rem;
  font-size: var(--gr-m);
}
/* Dauer nach rechts - füllt die Zeile und gibt eine sichtbare Struktur */
.preis-raster--ohne-preise .preis-liste dt {
  flex-direction: row; align-items: baseline; justify-content: space-between;
  gap: var(--r4); width: 100%;
}
.preis-raster--ohne-preise .preis-liste__dauer {
  padding-left: 0; flex: none; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}

@media (max-width: 900px) {
  .preis-raster--ohne-preise .preis-liste { columns: 1; }
}
@media (max-width: 720px) {
  .preis-raster--ohne-preise .preis-karte { grid-template-columns: 1fr; }
}

.preis-anfrage {
  margin-top: var(--r7);
  padding: var(--r6);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-l);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r5); flex-wrap: wrap;
}
.preis-anfrage p { margin: 0; max-width: 58ch; font-size: var(--gr-m); line-height: 1.6; }
.preis-anfrage strong { font-weight: 500; color: var(--tinte); }

.preis-hinweis {
  margin-top: var(--r6); padding: var(--r4) var(--r5);
  background: var(--marke-hell); border-left: 2px solid var(--marke);
  border-radius: 0 var(--ecke-m) var(--ecke-m) 0;
  font-size: var(--gr-s); color: var(--text-leise); max-width: 62ch;
}

/* ============ ÜBER UNS ============ */
.ueber {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
}
@media (max-width: 900px) { .ueber { grid-template-columns: 1fr; } }

.ueber__bilder { position: relative; padding-bottom: 3.5rem; padding-right: 3rem; }
.ueber__bild-gross { box-shadow: var(--schatten-m); }
.ueber__bild-klein {
  position: absolute; right: 0; bottom: 0; width: 46%;
  border: 6px solid var(--papier); box-shadow: var(--schatten-m);
}
.ueber__siegel {
  position: absolute; top: var(--r5); left: calc(-1 * var(--r4));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 6.75rem; height: 6.75rem; border-radius: 50%;
  background: var(--marke); color: #fff; text-align: center;
  box-shadow: var(--schatten-m); line-height: 1.2;
}
.ueber__siegel-zahl { font-family: var(--schrift-titel); font-size: 1.15rem; font-weight: 600; }
.ueber__siegel-text { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
@media (max-width: 520px) {
  .ueber__bilder { padding-right: 1.5rem; padding-bottom: 2.5rem; }
  /* Das Siegel wird kleiner, der Text aber nicht unter 11 px -
     darunter ist er auf dem Handy nicht mehr lesbar. */
  .ueber__siegel { width: 6rem; height: 6rem; left: 0; }
  .ueber__siegel-zahl { font-size: 1rem; }
  .ueber__siegel-text { font-size: .6875rem; letter-spacing: .06em; }
}

.ueber__fliesstext { color: var(--text-leise); font-size: var(--gr-l); line-height: 1.72; }
/* Mehrzeilige Texte: Absaetze entstehen aus den Zeilenumbruechen selbst.
   Dadurch bleibt der Text im Editor als ein Stueck bearbeitbar. */
.mehrzeilig { white-space: pre-line; }
.haken-liste { list-style: none; margin: var(--r6) 0 0; padding: 0; display: grid; gap: .85rem; }
.haken-liste li {
  display: flex; align-items: flex-start; gap: .85rem;
  font-size: var(--gr-m); line-height: 1.5;
}
.haken-liste svg { color: var(--marke); flex: none; margin-top: .22rem; }
.ueber__signatur {
  display: flex; flex-direction: column; margin-top: var(--r6);
  padding-top: var(--r5); border-top: 1px solid var(--linie);
}
.ueber__signatur-name {
  font-family: var(--schrift-titel); font-size: var(--gr-xl); color: var(--tinte);
}

/* ============ VORHER / NACHHER ============ */
.vergleich {
  position: relative; max-width: 60rem; margin-inline: auto;
  aspect-ratio: 3 / 2; border-radius: var(--ecke-l);
  overflow: hidden; box-shadow: var(--schatten-l);
  touch-action: pan-y; user-select: none; cursor: ew-resize;
}
.vergleich__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Das Vorher-Bild wird beschnitten statt schmaler gemacht - nur so liegen
   beide Bilder exakt uebereinander und das Ergebnis "springt" nicht. */
.vergleich__vorher-huelle {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--teiler, 50%)) 0 0);
}
/* Trennlinie liegt ueber beiden Bildern */
.vergleich::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 2;
  left: var(--teiler, 50%); width: 2px; margin-left: -1px;
  background: rgba(255,255,255,.92); pointer-events: none;
  box-shadow: 0 0 10px rgba(0,0,0,.25);
}
.vergleich__marke {
  position: absolute; top: var(--r4); z-index: 3;
  padding: .3rem .85rem; border-radius: var(--ecke-rund);
  background: rgba(12,10,8,.62); color: #fff;
  font-size: var(--gr-xs); letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.vergleich__marke--links  { left: var(--r4); }
.vergleich__marke--rechts { right: var(--r4); }
.vergleich__griff {
  position: absolute; top: 50%; z-index: 3;
  left: var(--teiler, 50%);
  transform: translate(-50%, -50%);
  width: 3rem; height: 3rem; border-radius: 50%;
  background: #fff; color: var(--tinte);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 14px rgba(0,0,0,.3); pointer-events: none;
}
.vergleich__regler {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.vergleich__unterschrift { margin-top: var(--r5); font-size: var(--gr-s); opacity: .7; }

/* ============ TEAM ============
   Jede zweite Person sitzt etwas tiefer. Diese kleine Unregelmaessigkeit
   nimmt dem Raster das Schematische. */
.person { display: flex; flex-direction: column; }
.person .bild-rahmen { margin-bottom: var(--r4); }
.person__name { font-size: var(--gr-l); margin-bottom: .1rem; }
.person__rolle {
  font-size: var(--gr-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--marke); margin-bottom: .6rem;
}
.person__text { font-size: var(--gr-s); color: var(--text-leise); line-height: 1.55; margin: 0; }

@media (min-width: 900px) {
  .raster--4 > .person:nth-child(even) { margin-top: clamp(2rem, 4vw, 3.5rem); }
}

/* ============ GALERIE ============
   Bewusst unterschiedliche Bildgroessen in festem Rhythmus:
   ein grosses Bild, daneben zwei kleinere, darunter eine Dreierreihe.
   Ein gleichmaessiges Raster wirkt sofort nach Vorlage. */
.galerie {
  display: grid; gap: var(--r4);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(180px, 20vw, 300px);
}
.galerie__stueck { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.galerie__stueck .bild-rahmen { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }

.galerie__stueck:nth-child(6n + 1) { grid-column: span 3; grid-row: span 2; }
.galerie__stueck:nth-child(6n + 2) { grid-column: span 3; }
.galerie__stueck:nth-child(6n + 3) { grid-column: span 3; }
.galerie__stueck:nth-child(6n + 4) { grid-column: span 2; }
.galerie__stueck:nth-child(6n + 5) { grid-column: span 2; }
.galerie__stueck:nth-child(6n + 6) { grid-column: span 2; }

.galerie__text {
  margin-top: .65rem; font-size: var(--gr-xs); color: var(--text-leise);
  letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 860px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .galerie__stueck { grid-column: span 1 !important; grid-row: auto !important; }
  .galerie__stueck .bild-rahmen { aspect-ratio: 4 / 5; }
}
@media (max-width: 480px) {
  .galerie { grid-template-columns: 1fr; }
}

/* ============ BEWERTUNGEN ============
   Die erste Stimme bekommt mehr Gewicht als die uebrigen.
   Drei exakt gleiche Kaesten wirken nach Vorlage - eine bewusste
   Gewichtung wirkt redaktionell. */
#bewertungen .raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }

.stimme {
  margin: 0; padding: 0;
  background: none; border-radius: 0;
  border-top: 1px solid var(--linie-stark);
  padding-top: var(--r5);
  display: flex; flex-direction: column; gap: var(--r4);
  position: relative;
}
.stimme__sterne { display: flex; gap: .18rem; color: var(--marke); }
.stimme__text {
  margin: 0; font-family: var(--schrift-titel);
  font-size: var(--gr-l); line-height: 1.5; color: var(--tinte);
  letter-spacing: -.005em;
}
.stimme__name {
  font-size: var(--gr-xs); font-weight: 600; color: var(--text-leise);
  letter-spacing: .12em; text-transform: uppercase; margin-top: auto;
}

/* Erste Stimme groesser und ueber zwei Spalten */
@media (min-width: 900px) {
  #bewertungen .raster--3 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .stimme { grid-column: span 2; }
  .stimme:first-child {
    grid-column: span 6;
    padding-bottom: var(--r6);
    border-bottom: 1px solid var(--linie);
    margin-bottom: var(--r4);
  }
  .stimme:first-child .stimme__text {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.35rem);
    line-height: 1.35;
    max-width: 26ch;
  }
  .stimme:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: var(--r7); align-items: start;
  }
  .stimme:first-child .stimme__sterne { grid-column: 1; }
  .stimme:first-child .stimme__text  { grid-column: 1; grid-row: 2; }
  .stimme:first-child .stimme__name  { grid-column: 1; grid-row: 3; margin-top: var(--r4); }
}

/* ============ GUTSCHEINE ============ */
.gutschein {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
}
@media (max-width: 860px) { .gutschein { grid-template-columns: 1fr; } }

.gutschein__betraege { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: var(--r6); }
.gutschein__chip {
  padding: .5rem 1.15rem; border: 1px solid var(--linie-stark);
  border-radius: var(--ecke-rund); font-size: var(--gr-s); font-weight: 600;
  background: var(--papier); transition: all var(--schnell);
}
.gutschein__chip:hover { border-color: var(--marke); color: var(--marke); }

.gutschein__karte { perspective: 1200px; }
.gutschein__karte-innen {
  aspect-ratio: 8 / 5; padding: var(--r6);
  background: linear-gradient(135deg,
    var(--tinte) 0%,
    color-mix(in srgb, var(--tinte) 82%, var(--marke)) 100%);
  border-radius: var(--ecke-l); color: var(--papier);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--schatten-l);
  transform: rotate(-2.5deg); transition: transform var(--feder);
  position: relative; overflow: hidden;
}
.gutschein__karte-innen::after {
  content: ''; position: absolute; inset: .6rem;
  border: 1px solid rgba(255,255,255,.16); border-radius: calc(var(--ecke-l) - 4px);
  pointer-events: none;
}
.gutschein__karte:hover .gutschein__karte-innen { transform: rotate(0) translateY(-5px); }
.gutschein__karte-label {
  font-size: var(--gr-xs); letter-spacing: .3em; text-transform: uppercase;
  color: var(--marke);
}
.gutschein__karte-name {
  font-family: var(--schrift-titel); font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  line-height: 1.15;
}
.gutschein__karte-linie { height: 1px; background: rgba(255,255,255,.2); }
.gutschein__karte-fuss {
  font-size: var(--gr-xs); letter-spacing: .18em; text-transform: uppercase; opacity: .55;
}

/* ============ STELLENANGEBOTE ============ */
.stelle { display: flex; flex-direction: column; gap: .7rem; }
.stelle__umfang {
  align-self: flex-start; padding: .28rem .8rem;
  background: var(--marke-hell); color: var(--marke-dunkel);
  border-radius: var(--ecke-rund); font-size: var(--gr-xs);
  font-weight: 600; letter-spacing: .06em;
}
.stelle__titel { margin: 0; font-size: var(--gr-xl); }
.stelle__text { color: var(--text-leise); font-size: var(--gr-s); line-height: 1.6; margin: 0 0 .4rem; }

/* ============ BUCHUNG (Platz für den Kalender) ============ */
.buchung {
  max-width: 62rem; margin-inline: auto;
  background: color-mix(in srgb, var(--papier) 8%, transparent);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--ecke-l); padding: clamp(1.25rem, 3vw, 2.25rem);
  min-height: 18rem;
}
.buchung__laedt, .buchung__hinweis {
  text-align: center; padding: var(--r8) var(--r4);
  color: color-mix(in srgb, var(--papier) 62%, var(--tinte));
  font-size: var(--gr-s);
}
.buchung__fussnote { margin-top: var(--r5); font-size: var(--gr-s); opacity: .62; }

/* ============ KONTAKT ============ */
.kontakt {
  display: grid; gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: start;
}
@media (max-width: 900px) { .kontakt { grid-template-columns: 1fr; } }

.kontakt__wege { display: grid; gap: 0; margin-block: var(--r6); }
.kontakt__weg {
  display: flex; flex-direction: column; gap: .15rem;
  padding-block: var(--r4); text-decoration: none;
  border-top: 1px solid var(--linie); transition: padding-left var(--weich);
}
.kontakt__weg:last-child { border-bottom: 1px solid var(--linie); }
.kontakt__weg:hover { padding-left: .6rem; }
.kontakt__weg-label {
  font-size: var(--gr-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-leise);
}
.kontakt__weg-wert {
  font-family: var(--schrift-titel); font-size: var(--gr-l); color: var(--tinte);
}
.kontakt__weg:hover .kontakt__weg-wert { color: var(--marke); }
.kontakt__anfahrt { font-size: var(--gr-s); line-height: 1.6; }
.kontakt__zeiten { margin-top: var(--r6); }

/* Öffnungszeiten-Tabelle */
.zeiten { margin: 0; display: grid; gap: 0; }
.zeiten__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--r4); padding-block: .55rem; font-size: var(--gr-s);
}
.zeiten__zeile + .zeiten__zeile { border-top: 1px solid var(--linie); }
.zeiten dt { font-weight: 600; color: var(--tinte); }
.zeiten dd { margin: 0; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.zeiten__zeile.ist-zu dd { opacity: .55; font-style: italic; }

/* ============ FORMULAR ============ */
.formular {
  display: grid; gap: var(--r5);
  background: var(--papier); padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--ecke-l); border: 1px solid var(--linie);
  box-shadow: var(--schatten-s);
}
.formular__reihe { display: grid; gap: var(--r5); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .formular__reihe { grid-template-columns: 1fr; } }
.formular__senden { width: 100%; }
.formular__rueckmeldung { margin: 0; font-size: var(--gr-s); min-height: 1.2em; }
.formular__rueckmeldung.ist-gut { color: #4a7c3f; font-weight: 600; }
.formular__rueckmeldung.ist-schlecht { color: #c0392b; font-weight: 600; }
.honigtopf { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ============ FUSSBEREICH ============ */
.fuss {
  background: var(--tinte);
  color: color-mix(in srgb, var(--papier) 68%, var(--tinte));
  padding-block: clamp(3.5rem, 7vw, 6rem) 0;
  font-size: var(--gr-s);
}
.fuss__oben {
  display: grid; gap: var(--r7);
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding-bottom: var(--r8);
}
@media (max-width: 900px) { .fuss__oben { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss__oben { grid-template-columns: 1fr; gap: var(--r6); } }

.fuss__name {
  display: block; font-family: var(--schrift-titel);
  font-size: var(--gr-xl); color: var(--papier); margin-bottom: .5rem;
}
.fuss__text { max-width: 30ch; line-height: 1.6; margin-bottom: var(--r5); }
.fuss__titel {
  font-size: var(--gr-xs); letter-spacing: .16em; text-transform: uppercase;
  color: var(--marke); margin-bottom: var(--r4); font-family: var(--schrift-klein);
}
.fuss__titel--abstand { margin-top: var(--r5); }
.fuss__adresse { font-style: normal; line-height: 1.7; margin-bottom: var(--r4); }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fuss__liste a { text-decoration: none; }
.fuss__liste a:hover { color: var(--marke); }
.fuss .zeiten__zeile { padding-block: .38rem; font-size: var(--gr-xs); }
.fuss .zeiten__zeile + .zeiten__zeile { border-top-color: rgba(255,255,255,.08); }
.fuss .zeiten dt { color: color-mix(in srgb, var(--papier) 88%, var(--tinte)); }
.fuss .zeiten dd { color: color-mix(in srgb, var(--papier) 55%, var(--tinte)); }
.fuss .pfeil-link { color: var(--marke); }

.fuss__unten {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r4); flex-wrap: wrap;
  padding-block: var(--r5);
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--gr-xs); opacity: .68;
}
.fuss__recht { display: flex; gap: var(--r5); }
.fuss__recht a { text-decoration: none; }
.fuss__recht a:hover { color: var(--marke); }

/* ============ SCHWEBENDE LEISTE (Handy) ============ */
.schwebe-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: 1px;
  background: var(--linie);
  border-top: 1px solid var(--linie);
  transform: translateY(105%);
  transition: transform var(--feder);
  padding-bottom: env(safe-area-inset-bottom);
}
.schwebe-leiste.ist-sichtbar { transform: none; }
.schwebe-leiste__knopf {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .7rem .4rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--papier); color: var(--tinte);
  text-decoration: none; font-size: .6875rem; font-weight: 600;
  letter-spacing: .04em;
}
.schwebe-leiste__knopf--haupt { background: var(--marke); color: #fff; }
.schwebe-leiste__knopf:active { filter: brightness(.94); }

@media (max-width: 780px) {
  .schwebe-leiste { display: flex; }
  body { padding-bottom: 4.25rem; }
}

/* ============ TIPPFLÄCHEN AUF DEM HANDY ============
   Links müssen mit dem Daumen sicher zu treffen sein. Als Richtwert
   gelten 44 Pixel Höhe - darunter tippt man regelmäßig daneben. */
@media (max-width: 780px) {
  .pfeil-link,
  .fuss__liste a,
  .fuss__recht a,
  .nav__liste a,
  .kontakt__weg {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* Der Betriebsname im Kopf ist ein Link zur Startseite. Ohne Slogan
     darunter besteht er nur aus einer Zeile und wäre zu flach zum Tippen. */
  .marke { min-height: 44px; justify-content: center; }
  .pfeil-link { padding-block: .5rem; }
  .fuss__liste { gap: 0; }
  .fuss__liste a { padding-block: .35rem; }
  .fuss__recht { gap: var(--r6); }
  /* Genug Abstand zwischen benachbarten Links, damit man nicht danebentippt */
  .gutschein__chip { padding: .6rem 1.15rem; }

  /* Links mitten im Fließtext (etwa "Datenschutzerklärung" im Einwilligungs-
     satz) lassen sich nicht höher machen, ohne den Satz auseinanderzureißen.
     Stattdessen wird nur die Trefferfläche vergrößert - das Layout bleibt
     unverändert, der Finger trifft trotzdem. */
  .haken a, .rechtstext p a, .formular a {
    padding: .55rem .2rem;
    margin: -.55rem -.2rem;
    display: inline-block;
  }
}