/* kw-bundle-quellen: css/style.css, css/custom.css */
/* Erzeugt von css-bundeln.py. Nicht von Hand bearbeiten —
   Änderungen gehören in die Quelldateien, dann erneut ausführen. */
/* ── css/style.css ── */
/* ============================================================
   Haarmeisterei by Kristin Hajdamowicz — Site-Design
   Statischer Neubau nach Original haarmeisterei-hannover.de
   Maße aus dem Original-CSS (Avada Theme-Options):
   site_width 1900px · h1 106px/1.08/-2px · h2 72px/1.2/-2px
   h3 45px/1.4 · h4 18px Poppins · Body Cormorant 21px/1.8
   Titelband (page-title-bar): 400px hoch, #ceb19c, 72px weiß
   Hero-Row: min-height 825px · Buttons 13/29px Poppins 600
   ============================================================ */

/* ---------- Schriften (lokal, DSGVO-konform) ---------- */
@font-face{
  font-family:'Cormorant Garamond';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Cormorant Garamond';
  font-style:italic;
  font-weight:500 700;
  font-display:swap;
  src:url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/poppins-400-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/poppins-500-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/poppins-600-latin.woff2') format('woff2');
}

/* ---------- Tokens (aus Original-CSS erhoben) ---------- */
:root{
  /* Flächen */
  --c-weiss:#ffffff;
  --c-flaeche-alt:#f9f9fb;
  --c-linie:#e2e2e2;

  /* Text */
  --t-ueberschrift:#212934;
  --t-fliess:#494949;

  /* Akzente */
  --c-gruen:#65bc7b;           /* Zustände: aktiv, Hover, Scrollbar */
  --c-pink:#f1345d;            /* CTA-Buttons + Ankündigung + Flyout */
  --c-pink-hover:#dd2f54;
  --c-warm:#ceb19c;            /* Vorzeilen, Titelband, Preis-Sektion, Footer */
  --c-warm-linie:#dcbaa1;      /* Trennlinien unter Überschriften */
  --c-preis-tafel:#d9c0ae;     /* Preistafel-Fläche */
  --c-preis-name:#5f4632;      /* Leistungsnamen auf der Tafel (Kontrast-fest) */

  /* Schrift */
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;

  /* Größen (Original: h1 106 / Titelband 72 / h2 72 / h3 45 / h4 18 / Body 21 / Hero-Wort 100) */
  --fs-hero:clamp(52px,7vw,100px);
  --fs-h1:clamp(48px,7.5vw,106px);
  --fs-titelband:clamp(40px,6vw,72px);
  --fs-h2:clamp(40px,5vw,72px);
  --fs-h3:clamp(30px,3.2vw,45px);
  --fs-h4:18px;
  --fs-fliess:clamp(18px,1.4vw,21px);
  --fs-vorzeile:clamp(20px,2vw,24px);

  /* Raster (Original: --site_width:1900px) */
  --breite:1900px;
  --abschnitt-py:clamp(56px,8vw,110px);
  --gap:clamp(20px,3vw,40px);
  --kopf-hoehe:120px;
}

/* ---------- Reset & Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--c-gruen) #f1f1f1;
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:var(--c-gruen)}
::selection{background:var(--c-gruen);color:#fff}

body{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:var(--fs-fliess);
  line-height:1.8;
  color:var(--t-fliess);
  background:var(--c-weiss);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--t-fliess);transition:color .2s}
a:hover{color:var(--c-gruen)}
:focus-visible{outline:3px solid var(--c-gruen);outline-offset:2px}
[id]{scroll-margin-top:calc(var(--kopf-hoehe) + 16px)}

h1,h2,h3{
  font-family:var(--font-serif);
  font-weight:500;
  color:var(--t-ueberschrift);
}
h4{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:var(--fs-h4);
  letter-spacing:1px;
  color:var(--t-fliess);
}
p+p{margin-top:1em}

.container{max-width:var(--breite);margin-inline:auto;padding-inline:clamp(20px,4vw,60px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Knöpfe (Original: flach, 13/29px, Poppins 600, Versalien) ---------- */
.knopf{
  display:inline-block;
  padding:13px 29px;
  background:var(--c-pink);
  color:#fff;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  border:0;
  border-radius:0;
  line-height:1.7;
  cursor:pointer;
  transition:background-color .2s;
}
.knopf:hover,.knopf:focus-visible{background:var(--c-pink-hover);color:#fff}

/* ---------- Kopfleisten (Original: Simple Banner + Secondary Header) ---------- */
.ankuendigung{
  background:var(--c-pink);
  text-align:center;
}
.ankuendigung p{
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:500;
  line-height:1.45;
  color:#fff;
  padding:6px 16px;
}
.ankuendigung a{color:#f16521}
.telefonleiste{background:#000000}
.telefonleiste p{
  max-width:var(--breite);
  margin-inline:auto;
  padding:5px clamp(20px,4vw,60px);
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:400;
  color:#fff;
}
.telefonleiste a{color:#fff;text-decoration:none}
.telefonleiste a:hover,.telefonleiste a:focus-visible{color:#fff;text-decoration:underline}

/* ---------- Kopf (Sticky, Logo links, Nav rechts in einer Zeile) ---------- */
.kopf{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--c-weiss);
  border-bottom:1px solid var(--c-linie);
}
.kopf-innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding:10px clamp(16px,4vw,60px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  position:relative;
}
.logo{display:inline-block;line-height:0;flex:0 0 auto}
.logo img{width:min(200px,48vw);height:auto}

.hauptnav{flex:0 1 auto}
.nav-liste{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:4px 26px;
}
.nav-liste a:not(.knopf),
.unterpunkt-knopf{
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--t-ueberschrift);
  text-decoration:none;
  padding:8px 0;
  display:inline-block;
  background:none;
  border:0;
  cursor:pointer;
  transition:color .2s;
}
.nav-liste a:not(.knopf):hover,
.unterpunkt-knopf:hover{color:var(--c-gruen)}

/* Unterpunkte (Leistungen) */
.hat-unterpunkte{position:relative}
.unterpunkt-knopf svg{width:10px;height:10px;margin-left:4px;transition:transform .2s}
.unternav{
  list-style:none;
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  min-width:200px;
  background:var(--c-weiss);
  border:1px solid var(--c-linie);
  box-shadow:0 10px 24px rgba(33,41,52,.08);
  padding:8px 0;
  display:none;
  z-index:110;
  text-align:left;
}
.unternav a{display:block;padding:9px 22px !important;letter-spacing:.5px !important}
.hat-unterpunkte:hover .unternav,
.hat-unterpunkte:focus-within .unternav,
.hat-unterpunkte.unternav-offen .unternav{display:block}
.hat-unterpunkte.unternav-offen .unterpunkt-knopf svg{transform:rotate(180deg)}

/* Mobilmenü */
.menue-knopf{
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  padding:8px;
  line-height:0;
  color:var(--t-ueberschrift);
}
.menue-knopf svg{width:28px;height:28px}
@media (max-width:1100px){
  :root{--kopf-hoehe:92px}
  .menue-knopf{display:block}
  .kopf-innen{flex-wrap:wrap}
  .hauptnav{display:none;flex-basis:100%}
  body.menue-offen .hauptnav{display:block}
  .nav-liste{flex-direction:column;gap:2px;padding:8px 0 18px;justify-content:center}
  .nav-liste a:not(.knopf),.unterpunkt-knopf{padding:10px 0;font-size:15px}
  .unternav{position:static;transform:none;border:0;box-shadow:none;display:none;background:var(--c-flaeche-alt);text-align:center;min-width:0}
  .hat-unterpunkte:hover .unternav{display:none}
  .hat-unterpunkte.unternav-offen .unternav{display:block}
}

/* ---------- Quick-Flyout (Original: .p-clean-fm-v1-1, rechts fixiert) ---------- */
.flyout{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  right:-235px;
  max-width:280px;
  width:100%;
  z-index:999;
}
html.kw-edit .flyout{ position:absolute; }
.flyout ul{list-style:none}
.flyout li{
  background:var(--c-pink);
  margin-bottom:3px;
  transition:transform .4s linear;
  cursor:pointer;
}
.flyout li:hover,
.flyout li:focus-within{transform:translateX(-230px)}
.flyout a{
  display:flex;
  align-items:center;
  padding:10px;
  color:#fff;
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  text-align:left;
}
.flyout a:hover{color:#fff}
.flyout svg{
  flex:0 0 auto;
  width:25px;
  height:25px;
  margin-right:16px;
}
@media (max-width:767px){
  .flyout{display:none}
}

/* ---------- Titelband (Original: page-title-bar 400px, #ceb19c, 72px weiß) ---------- */
.titelband{
  height:124px;
  background:var(--c-warm);
  display:grid;
  place-items:center;
  text-align:center;
  padding:0 20px;
}
.titelband h1{
  font-size:var(--fs-titelband);
  font-weight:500;
  letter-spacing:-2px;
  line-height:1.08;
  color:#ffffff;
}
@media (max-width:767px){
  .titelband{height:96px}
}

/* Wellen-Trenner (Original: Avada-Divider — flache Kante mit mittiger Spitze).
   background = Fläche davor, currentColor = Fläche danach. */
.wellen-trenner{display:block;line-height:0}
.wellen-trenner svg{display:block;width:100%;height:56px}

/* ---------- Hero (Original-Row: min-height 825px) ---------- */
.held,.unterheld{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  text-align:center;
  background:var(--c-warm);
}
.held{min-height:910px}
.unterheld{min-height:520px}
.held-bild,.held-bild img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.held-bild img{object-fit:cover;object-position:center top}
.held-inhalt,.unterheld-inhalt{
  position:relative;
  z-index:1;
  padding:clamp(70px,10vw,120px) 20px;
}
/* Gemessen: Textblock sitzt im Original unter der Gesichtsmitte */
.held-inhalt{margin-top:clamp(70px,14vw,210px)}
.held-titel{
  font-family:var(--font-serif);
  font-size:var(--fs-hero);
  font-weight:500;
  line-height:1.8;
  color:#fff;
  text-shadow:0 2px 24px rgba(33,41,52,.25);
}
.held-untertitel{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:var(--fs-vorzeile);
  color:#fff;
  margin-top:-14px;
  text-shadow:0 1px 12px rgba(33,41,52,.3);
}
.held-cta{margin-top:40px}
.unterheld-inhalt h1{
  font-size:var(--fs-h1);
  letter-spacing:-2px;
  line-height:1.08;
  color:#fff;
  text-shadow:0 2px 24px rgba(33,41,52,.3);
}
@media (max-width:767px){
  .held{min-height:480px}
  .unterheld{min-height:340px}
}

/* ---------- Abschnitts-Gerüst ---------- */
.abschnitt{padding-block:var(--abschnitt-py)}
.abschnitt-alt{background:var(--c-flaeche-alt)}
.abschnitt-kopfzeile{text-align:center;max-width:820px;margin-inline:auto}
.vorzeile{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:var(--fs-vorzeile);
  color:var(--c-warm);
  line-height:1.3;
}
.abschnitt-titel{
  font-size:var(--fs-h2);
  letter-spacing:-2px;
  line-height:1.2;
}
.trennlinie{
  width:80px;
  border:0;
  border-top:1px solid var(--c-warm-linie);
  margin:18px auto 35px;
}
.einleitung{max-width:1000px;margin-inline:auto;text-align:center}

/* Deko-Icons (Original-Ornamente, feste Muster — nie tauschbar) */
.deko-icon{
  width:31px;
  height:44px;
  margin:0 auto 14px;
  background:url('../img/intro-icon_03.png') center/contain no-repeat;
}
.deko-icon-breit{
  width:46px;
  height:64px;
  background-image:url('../img/icon-large_28.png');
}

/* ---------- Raster & Karten ---------- */
.raster{display:grid;gap:var(--gap)}
.raster-3{grid-template-columns:repeat(3,1fr)}
.raster-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){
  .raster-3{grid-template-columns:1fr}
  .raster-2{grid-template-columns:1fr}
}

/* ---------- Willkommen (gemessen: Textspalte ~760px, Ladenfoto ~600px zentriert) ---------- */
.willkommen-inhalt{text-align:center;max-width:760px;margin-inline:auto}
.ort-bild{
  margin:clamp(32px,4vw,52px) auto 0;
  max-width:600px;
  aspect-ratio:1839/1000;
  background-size:cover;
  background-position:center;
  border-radius:2px;
}

/* ---------- Team (gemessen: Karten ~390px, 2 Spalten zentriert,
   Textkarte direkt unterm Foto, dritte Karte mittig) ---------- */
.team-staffel{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,3vw,44px);
  max-width:830px;
  margin-inline:auto;
  align-items:start;
}
.team-karte{text-align:left}
.team-staffel .team-karte:nth-child(2){margin-top:44px}
.team-staffel .team-karte:nth-child(3){
  grid-column:1 / -1;
  justify-self:center;
  width:calc(50% - clamp(24px,3vw,44px) / 2);
}
.team-bild{
  aspect-ratio:6/5;
  background-size:cover;
  background-position:center top;
}
.team-text{
  background:var(--c-weiss);
  padding:clamp(20px,2.5vw,30px);
  box-shadow:0 10px 26px rgba(33,41,52,.07);
}
.team-name{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(17px,1.4vw,20px);
  letter-spacing:.5px;
  line-height:1.35;
}
.team-rolle{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(16px,1.2vw,18px);
  font-weight:500;
  color:var(--c-warm);
  margin:2px 0 12px;
}
.team-karte p{font-size:clamp(15px,1.1vw,17px);line-height:1.7}
.team-hinweis-rot{color:#e02b20}
@media (max-width:900px){
  .team-staffel{grid-template-columns:1fr;max-width:440px}
  .team-staffel .team-karte:nth-child(2){margin-top:0}
  .team-staffel .team-karte:nth-child(3){width:100%}
}

/* ---------- Produkte / Marken ---------- */
.produkte{
  background:var(--c-weiss) url('../img/services-bg3_26-e1518615760726.jpg') center top/cover no-repeat;
}
.marken-karte{text-align:center}
.marken-karte .deko-icon{margin-bottom:10px}
.marken-karte h4{
  color:var(--t-fliess);
  margin-bottom:18px;
}
.marken-karte img{margin-inline:auto;width:min(390px,86%)}

/* ---------- Gutschein (gemessen: einspaltig, Bild ~300px als Link) ---------- */
.gutschein{
  background:var(--c-weiss) url('../img/booking-bg.png') center top/cover no-repeat;
}
.gutschein-mitte{text-align:center;max-width:760px;margin-inline:auto}
.gutschein-mitte h2{font-size:clamp(26px,2.6vw,36px);letter-spacing:normal;line-height:1.3}
.gutschein-mitte p{margin-top:14px}
.gutschein-link{display:inline-block;margin-top:26px}
.gutschein-bild{
  width:min(300px,80vw);
  aspect-ratio:16/9;
  background-size:cover;
  background-position:center;
  margin-inline:auto;
  transition:transform .2s;
}
.gutschein-link:hover .gutschein-bild,
.gutschein-link:focus-visible .gutschein-bild{transform:scale(1.03)}

/* ---------- Unsere Arbeiten: Vorher/Nachher-Vergleichs-Slider
   (Original: 1/4-Spalten, ein Regler je Paar — zwei Flächen deckungsgleich,
   Nachher über clip-path an --pos, weiße Linie + Rauten-Griff) ---------- */
.werk-raster{margin-top:8px;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:1100px){
  .werk-raster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .werk-raster{grid-template-columns:1fr}
}
.vn-box{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  touch-action:pan-y;
}
.vn-flaeche{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center top;
}
.vn-nachher{clip-path:inset(0 0 0 var(--pos,50%))}
.vn-griff{
  position:absolute;
  top:0;
  bottom:0;
  left:var(--pos,50%);
  width:44px;
  transform:translateX(-50%);
  cursor:ew-resize;
  background:none;
  border:0;
  padding:0;
}
.vn-griff::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:#fff;
  box-shadow:0 0 6px rgba(33,41,52,.4);
}
.vn-griff::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:#fff;
  border:1px solid rgba(33,41,52,.25);
  box-shadow:0 1px 6px rgba(33,41,52,.35);
}
.vn-etikett{
  position:absolute;
  bottom:10px;
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:4px 10px;
  background:rgba(33,41,52,.72);
  color:#fff;
  pointer-events:none;
}
.vn-etikett-vorher{left:10px}
.vn-etikett-nachher{right:10px;background:var(--c-gruen)}
/* Neunter Slider mittig (Original) */
.vn-solo{
  grid-column:2 / span 2;
  width:calc(50% - 5px);
  justify-self:center;
}
@media (max-width:1100px){
  .vn-solo{grid-column:1 / -1;width:calc(50% - 5px)}
}
@media (max-width:640px){
  .vn-solo{width:100%}
}
.werk-hinweis{text-align:center;margin-top:clamp(28px,4vw,44px)}
.werk-folgen{margin-top:14px}
/* Editor: fest 50/50, Griff durchlässig — beide Flächen bleiben anklickbar */
html.kw-edit .vn-box{--pos:50% !important}
html.kw-edit .vn-griff{pointer-events:none}
.werk-folgen{text-align:center;margin-top:clamp(28px,4vw,44px)}
.insta-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--c-warm);
  color:#fff;
  transition:background-color .2s;
}
.insta-icon:hover,.insta-icon:focus-visible{background:var(--c-gruen);color:#fff}
.insta-icon svg{width:24px;height:24px}

/* ---------- Angebote (gemessen: schwarze Karten ~260px, Titel in der Karte,
   beige Wellenkante zwischen Bild und Fuß) ---------- */
.angebote-raster{max-width:640px;margin-inline:auto;gap:40px}
.angebot-karte{
  text-decoration:none;
  display:block;
  background:#151515;
  box-shadow:0 16px 30px rgba(33,41,52,.25);
  transition:transform .2s,box-shadow .2s;
}
.angebot-karte:hover,
.angebot-karte:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 22px 38px rgba(33,41,52,.3);
}
.angebot-bild{
  aspect-ratio:5/4;
  background-size:cover;
  background-position:center;
}
.angebot-welle{line-height:0;margin-top:-15px;position:relative}
.angebot-welle svg{display:block;width:100%;height:16px}
.angebot-fuss{padding:16px 12px 22px;text-align:center}
.angebot-fuss h3{
  color:#fff;
  font-size:clamp(22px,2vw,28px);
  line-height:1.2;
}
.angebote-schluss{margin-top:clamp(40px,6vw,64px);text-align:center;max-width:620px;margin-inline:auto}
.angebote-schluss h3{font-size:clamp(26px,2.6vw,36px);line-height:1.3;margin-bottom:0}
.angebote-schluss .trennlinie{margin:16px auto 24px}

/* ---------- Preise (Original: 2 Spalten — Damen breit links, Rest rechts) ---------- */
.preise{background:var(--c-warm)}
.preise .vorzeile{color:#fff}
.preise .abschnitt-titel{color:#fff}
.preise .trennlinie{border-top-color:rgba(255,255,255,.5)}
.preis-hinweis{
  max-width:1100px;
  margin-inline:auto;
  text-align:center;
  color:#fff;
  font-size:clamp(16px,1.2vw,19px);
}
.preis-hinweis strong{color:#fff}
/* Gemessen am Original: Reihe 1 = Herren links (~555px) + Damen rechts (~560px),
   Reihe 2 = Extras schmal (~280px) + Für Jedermann/Frau breit (~840px);
   Titel weiß ÜBER der Tafel; Tafel mit mittiger Bogen-Kerbe oben und unten. */
.preis-tafeln{
  margin-top:clamp(36px,5vw,56px);
  max-width:1140px;
  margin-inline:auto;
  display:grid;
  gap:clamp(28px,4vw,48px);
}
.preis-reihe{
  display:grid;
  gap:clamp(20px,2vw,24px);
  align-items:start;
}
.preis-reihe-1{grid-template-columns:1fr 1fr}
.preis-reihe-2{grid-template-columns:1fr 2.6fr}
.preis-nebenspalte{display:grid;gap:clamp(28px,4vw,48px);align-content:start}
@media (max-width:900px){
  .preis-reihe-1,.preis-reihe-2{grid-template-columns:1fr}
}
.preis-einheit{min-width:0}
.preis-titel{
  text-align:center;
  color:#fff;
  font-size:var(--fs-h3);
  margin-bottom:10px;
}
.preis-tafel{
  position:relative;
  background:var(--c-preis-tafel);
  border-radius:6px;
  padding:clamp(56px,5vw,72px) clamp(14px,2vw,28px);
}
/* Bogen-Kerben: Grundfarbe ragt mittig halbrund in die Tafel (Original-Panelform) */
.preis-tafel::before,
.preis-tafel::after{
  content:"";
  position:absolute;
  left:50%;
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--c-warm);
}
.preis-tafel::before{top:-55px;transform:translateX(-50%)}
.preis-tafel::after{bottom:-55px;transform:translateX(-50%)}
.tabelle-rollbar{overflow-x:auto;-webkit-overflow-scrolling:touch}
.preis-tabelle{
  width:100%;
  border-collapse:collapse;
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.5;
}
.preis-tabelle th,.preis-tabelle td{
  padding:7px 10px;
  text-align:right;
  color:#fff;
  font-weight:500;
  white-space:nowrap;
}
.preis-tabelle .preis-links{
  text-align:left;
  color:var(--c-preis-name);
  white-space:normal;
}
.preis-tabelle thead th{
  font-family:var(--font-serif);
  font-size:clamp(15px,1.2vw,18px);
}

/* ---------- Öffnungszeiten ---------- */
.zeiten{
  background:var(--c-flaeche-alt) url('../img/times-bg_03.jpg') center top/cover no-repeat;
}
/* Gemessen: Tabelle ~520px schmal, luftig, Tages-Label mit feiner
   Unterstreichung, GESCHLOSSEN in Beige, keine Zeilenlinien */
.zeiten-tabelle{
  width:100%;
  max-width:520px;
  margin:0 auto;
  border-collapse:collapse;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:1px;
  color:var(--t-fliess);
}
.zeiten-tabelle th,.zeiten-tabelle td{
  padding:15px 10px;
}
.zeiten-tabelle th{
  text-align:left;
  font-weight:600;
  font-size:13px;
  color:var(--t-ueberschrift);
}
.zeiten-tabelle th{
  text-decoration:underline;
  text-decoration-color:var(--c-warm-linie);
  text-decoration-thickness:2px;
  text-underline-offset:9px;
}
.zeiten-tabelle td{text-align:right}
.zeiten-tabelle td+td{width:96px}
.zeiten-tabelle tr:nth-child(6) td,
.zeiten-tabelle tr:nth-child(7) td{color:var(--c-warm)}

/* ---------- Adresse & Karte ---------- */
.adresse-zeile{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(18px,1.5vw,22px);
  color:var(--c-warm);
  margin-top:18px;
}
.karte{
  margin:clamp(32px,5vw,52px) auto 0;
  max-width:640px;
  aspect-ratio:8/5;
  min-height:300px;
  background:var(--c-flaeche-alt);
  border:1px solid var(--c-linie);
  display:grid;
  place-items:center;
}
.karte iframe{width:100%;height:100%;border:0;display:block}
.karte-schutz{text-align:center;padding:24px;max-width:560px}
.karte-hinweis{
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  margin-bottom:20px;
}

/* ---------- Instagram (statisches Raster) ---------- */
.insta-raster{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
@media (max-width:900px){.insta-raster{grid-template-columns:repeat(2,1fr)}}
.galerie-kachel{
  aspect-ratio:1/1;
  background-size:cover;
  background-position:center top;
}
.insta-folgen{text-align:center;margin-top:clamp(28px,4vw,44px)}

/* ---------- FAQ (natives Akkordeon) ---------- */
.faq-vorzeile{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:16px;
  letter-spacing:1px;
  color:var(--c-warm);
  text-transform:uppercase;
}
.faq-titel{font-size:var(--fs-h3);line-height:1.3}
.faq-liste{max-width:640px;margin:clamp(28px,4vw,44px) auto 0}
.faq-punkt{
  border:1px solid var(--c-warm-linie);
  background:var(--c-weiss);
}
.faq-punkt+.faq-punkt{margin-top:14px}
.faq-punkt summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:500;
  color:var(--t-ueberschrift);
  transition:color .2s,background-color .2s;
}
.faq-punkt summary::-webkit-details-marker{display:none}
.faq-punkt summary:hover{background:var(--c-flaeche-alt)}
.faq-icon{
  flex:0 0 auto;
  width:22px;
  height:22px;
  padding:5px;
  background:var(--t-ueberschrift);
  color:#fff;
  transition:transform .25s,background-color .2s;
}
.faq-punkt[open] summary{color:var(--c-gruen)}
.faq-punkt[open] .faq-icon{transform:rotate(45deg);background:var(--c-gruen);color:#fff}
.faq-antwort{
  padding:4px 22px 24px;
  border-top:1px solid var(--c-warm-linie);
}
.faq-antwort p:first-child{margin-top:18px}

/* ---------- Schluss-CTA ---------- */
.schluss-cta{
  background:var(--c-weiss) url('../img/booking-bg.png') center top/cover no-repeat;
  text-align:center;
}
.schluss-cta .knopf{margin-top:30px}
.cta-vorzeile{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:700;
  font-size:var(--fs-vorzeile);
  color:var(--c-warm);
}
.schluss-cta a:not(.knopf){color:var(--t-fliess);text-decoration:underline}
.schluss-cta a:not(.knopf):hover{color:var(--c-gruen)}

/* ---------- Unterseiten-Inhalt ---------- */
.leistung-lage{align-items:center}
.leistung-bild{
  background-size:cover;
  background-position:center top;
  aspect-ratio:4/3;
}
.leistung-bild-hoch{aspect-ratio:2/3}
.leistung-bild-quer{aspect-ratio:3/2}
.leistung-text h2{font-size:var(--fs-h3);letter-spacing:normal;line-height:1.3;margin-bottom:18px}
.leistung-text ul{padding-left:1.2em}
.leistung-text li+li{margin-top:8px}
.leistung-doppel{margin-top:var(--gap)}

/* ---------- Rechtstexte ---------- */
.rechtstext{max-width:1000px;margin-inline:auto}
.rechtstext h2{
  font-size:clamp(26px,3vw,34px);
  line-height:1.3;
  margin:1.6em 0 .5em;
}
.rechtstext h3{
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:600;
  color:var(--t-ueberschrift);
  margin:1.5em 0 .4em;
}
.rechtstext h2:first-child{margin-top:0}
.rechtstext p{margin-top:.8em}
.rechtstext ul{margin:.8em 0 0 1.2em}
.rechtstext li+li{margin-top:.5em}
.rechtstext a{color:var(--t-fliess);text-decoration:underline;overflow-wrap:anywhere}
.rechtstext a:hover{color:var(--c-gruen)}

/* ---------- Dankesseite / 404 ---------- */
.dank-inhalt{text-align:center;max-width:1200px;margin-inline:auto}
.dank-inhalt h1{font-size:var(--fs-h3);line-height:1.35}
.dank-bild{
  margin-top:clamp(32px,5vw,52px);
  aspect-ratio:1920/1041;
  background-size:cover;
  background-position:center;
}
.fehler-inhalt{text-align:center;padding-block:clamp(70px,12vw,140px)}
.fehler-inhalt h1{font-size:var(--fs-h1);line-height:1.1}
.fehler-inhalt p{margin-top:14px}
.fehler-inhalt .knopf{margin-top:30px}

/* ---------- Footer (Original: #ceb19c, weiße Links) ---------- */
.fuss{
  background:var(--c-warm);
  text-align:center;
  padding:26px 20px;
}
.fuss p{
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:1px;
  color:#fff;
}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover,.fuss a:focus-visible{color:#fff;text-decoration:underline}
.fuss-trenner{margin-inline:10px}

/* ---------- Einblenden beim Scrollen ----------
   Eine Wahrheit: js/site.js setzt html.anim (nur wenn JS + IntersectionObserver
   vorhanden) und je Element .ist-sichtbar. Versteckzustände greifen NUR unter
   html.anim, NICHT im Editor (html.kw-edit) und NICHT bei reduzierter Bewegung.
   Richtungen/Dauern am Original (Avada): slideInUp 1s, Produkte 1.8s, Hero .8s */
@media (prefers-reduced-motion:no-preference){
  html.anim:not(.kw-edit) [data-anim]{
    opacity:0;
    transition:opacity 1s ease-out,transform 1s ease-out;
  }
  html.anim:not(.kw-edit) [data-anim="auf"]{transform:translateY(46px)}
  html.anim:not(.kw-edit) [data-anim="links"]{transform:translateX(-46px)}
  html.anim:not(.kw-edit) [data-anim="rechts"]{transform:translateX(46px)}
  html.anim:not(.kw-edit) [data-anim="weich"]{
    transform:translateY(28px);
    transition-duration:.8s;
  }
  html.anim:not(.kw-edit) .anim-langsam[data-anim]{transition-duration:1.8s}
  html.anim:not(.kw-edit) [data-anim].ist-sichtbar{opacity:1;transform:none}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
  html{scroll-behavior:auto}
}

/* ── css/custom.css ── */
/* Override-Ebene für Handkorrekturen — wird nie überschrieben.
   Nach style.css eingebunden. */

.raster:has(> .wb-karte){ align-items:stretch; }
.wb-karte{ height:100%; display:flex; flex-direction:column; }
[data-kw-icon="1"] svg{ max-width:100%; max-height:100% }
[data-kw-icon="1"] svg:not([width]){ width:20px; height:20px }

/* kw-rich v1 */
/* ── 1. Felder, die Blockelemente erlauben (div, li, td) ─────────────────── */
[data-kw] h3, [data-kw] h4, [data-kw] h5, [data-kw] h6{
  display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem);
  font-size:1rem; font-weight:var(--fw-semibold, 600); line-height:1.35;
  color:var(--t-primary, inherit); letter-spacing:-.005em;
}
[data-kw] p{ margin:0 0 var(--sp-3, .75rem); }
[data-kw] ul, [data-kw] ol{ display:block; margin:0 0 var(--sp-3, .75rem); padding-left:1.35em; }
/* Das Design-System setzt global ul,ol{list-style:none} — hier wieder aktivieren */
[data-kw] ul{ list-style:disc outside; }
[data-kw] ol{ list-style:decimal outside; }
[data-kw] li{ display:list-item; margin:0 0 var(--sp-2, .5rem); }
[data-kw] li:last-child{ margin-bottom:0; }
[data-kw] li::marker{ color:var(--c-primary, currentColor); }
[data-kw] ul ul{ list-style:circle outside; margin:var(--sp-2, .5rem) 0 0; }

/* ── 2. Felder, die KEINE Blockelemente erlauben (p, span) ───────────────── */
/* span-Elemente sind überall zulässig; display:block macht daraus Zeilen.    */
.kw-h{
  display:block; margin:var(--sp-4, 1rem) 0 var(--sp-2, .5rem);
  font-weight:var(--fw-semibold, 600); line-height:1.35;
  color:var(--t-primary, inherit);
}
.kw-p{ display:block; margin:0 0 var(--sp-3, .75rem); }
.kw-list{ display:block; margin:0 0 var(--sp-3, .75rem); }
.kw-li{
  display:block; position:relative;
  padding-left:1.35em; margin:0 0 var(--sp-2, .5rem);
}
/* Punkt aus ::before statt list-style — unabhängig von Browser und Reset */
.kw-li::before{
  content:"\2022"; position:absolute; left:.35em; top:0;
  color:var(--c-primary, currentColor); font-weight:700; line-height:inherit;
}
.kw-list-num{ counter-reset:kwli; }
.kw-list-num > .kw-li{ padding-left:1.7em; counter-increment:kwli; }
.kw-list-num > .kw-li::before{
  content:counter(kwli) "."; left:0;
  font-weight:var(--fw-semibold, 600); font-variant-numeric:tabular-nums;
}

/* ── 3. Im Editor: leere Punkte müssen anklickbar bleiben ────────────────── */
/* Ein leeres span mit display:block wäre 0 Pixel hoch — der Schreibzeiger
   wäre unsichtbar. Beim Speichern werden leere Punkte ohnehin entfernt.      */
.kw-li:empty, .kw-p:empty, .kw-h:empty{ min-height:1.25em; }

/* ── 4. Ränder: erstes Element oben, letztes unten ohne Abstand ──────────── */
[data-kw] > *:first-child{ margin-top:0; }
[data-kw] > *:last-child{ margin-bottom:0; }
[data-kw] strong, [data-kw] b{ font-weight:var(--fw-semibold, 600); }
/* /kw-rich */


/* kw-landmark v1 */
.kw-skip{position:absolute;left:-9999px;top:0;z-index:9999;padding:.75rem 1.25rem;background:#000;color:#fff;font:inherit;text-decoration:underline;border-radius:0 0 .25rem 0}.kw-skip:focus{left:0}

/* kw-kontrast v1 */
/* Farbkontraste auf WCAG AA gebracht (4,5:1 für normalen Text).
   Erzeugt von barrierefreiheit.py. Markenfarben bleiben unangetastet —
   korrigiert wird die Schriftfarbe auf der jeweiligen Fläche. */
/* /kw-kontrast */