/* ============================================================
   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); }

/* Zweispaltig NUR wenn wirklich Platz ist.
   Wichtig: die Angabe "2 21rem" heisst - hoechstens zwei Spalten, jede
   mindestens 21rem breit. Der Browser rechnet das am tatsaechlich
   verfuegbaren Platz aus, nicht an der Fensterbreite.

   Eine Abfrage wie @media (min-width: 900px) waere hier falsch: sie misst
   das Fenster. Steht die Liste aber in einer schmalen Karte (Kartenlayout,
   drei nebeneinander), ist das Fenster breit und die Karte trotzdem eng -
   die Liste bekaeme zwei Spalten von je 150px und der Text lief ueber. */
.preis-raster--ohne-preise .preis-liste {
  columns: 2 21rem;
  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);
  min-width: 0;                 /* darf schrumpfen, statt herauszuragen */
  overflow-wrap: anywhere;      /* notfalls mitten im Wort umbrechen */
}
/* Dauer nach rechts - fuellt 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: .75rem var(--r4); width: 100%;
  flex-wrap: wrap;              /* Notausgang: Dauer rutscht nach unten,
                                   statt ueber den Nachbartext zu laufen */
}
.preis-raster--ohne-preise .preis-liste__dauer {
  padding-left: 0; flex: none; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
  margin-left: auto;            /* bleibt rechts, auch nach Umbruch */
}

@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; }
}

/* ============ KLICKFLÄCHEN AM RECHNER ============
   Auch mit der Maus braucht ein Link eine Mindestgröße. Die
   Barrierefreiheits-Richtlinie WCAG 2.2 nennt 24 Pixel - darunter
   wird das Treffen für Menschen mit unruhiger Hand oder am
   Notebook-Touchpad muehsam.

   Die Höhe wird über den Innenabstand erzeugt, nicht über eine
   feste Höhe: so bleibt der Text an seinem Platz und nur die
   Trefferfläche wächst. Am Layout ändert sich dadurch nichts. */
.nav__liste a,
.fuss__liste a,
.fuss__recht a,
.kontakt__weg,
.pfeil-link {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

/* Links mitten im Satz - etwa Behoerdenadressen im Impressum oder die
   Telefonnummer im Fliesstext. Hier waere eine Mindesthoehe falsch: sie
   wuerde die Zeilen auseinanderziehen. Stattdessen waechst nur die
   Trefferflaeche nach oben und unten, und der negative Aussenabstand
   nimmt den Zuwachs wieder aus dem Layout heraus. Sichtbar aendert sich
   nichts, treffen laesst es sich deutlich besser. */
.rechtstext p a,
.rechtstext li a,
.haken a,
.formular p a {
  padding-block: .45rem;
  margin-block: -.45rem;
}

/* ============ 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;
  }
}