/* 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 (gemessen am Original) */
  --c-weiss:#ffffff;
  --c-flaeche-alt:#ebebeb;     /* gemessen rgb(235,235,235) — Team + Öffnungszeiten */
  --c-linie:#e2e2e2;

  /* Text (gemessen: Fließtext rgb(110,110,110), Überschriften rgb(73,73,73)) */
  --t-ueberschrift:#494949;
  --t-fliess:#6e6e6e;
  --t-dunkel:#494949;          /* Poppins-Kleinschrift, Tabellen, Footer-Links */

  /* 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 */
  --c-warm-dunkel:#8b7665;     /* Vorzeile auf der beigen Preisfläche (gemessen) */
  --c-gold:#bf996e;            /* Team-Rolle (gemessen rgb(191,153,110)) */
  --c-warm-linie:#dcbaa1;      /* Trennlinien unter Überschriften */
  --c-preis-tafel:#d9c0ae;     /* Preistafel-Fläche */
  --c-preis-name:#a28672;      /* Leistungsnamen auf der Tafel (Original, gemessen) */

  /* 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.4584vw,21px);   /* bei 1440 gemessen: 21px */
  --fs-vorzeile:clamp(20px,2vw,24px);

  /* Raster — gemessen: Inhaltsspalte 1400px bei 1440 Viewport,
     innere Reihen 1380px (Rand 30px), Team/Preise abweichend */
  --breite:1440px;
  --reihe-pad:30px;
  --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%;
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
/* Scrollleiste bleibt die des Browsers, Markierung wie im Original —
   das Grün gehoert dort nur in die Ausklappmenues, nicht auf die Seite. */
::selection{background:rgba(101,115,126,.33)}

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:#000000}
: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);
  line-height:1.4;                /* gemessen 18px/25.2px */
  letter-spacing:1px;
  color:var(--t-dunkel);
}
p+p{margin-top:20px}              /* gemessen: Absatzabstand 20px */

/* Gemessen: main hat 60px Luft nach oben (unter Titelband bzw. Kopf) */
main{padding-top:60px}

.container{max-width:var(--breite);margin-inline:auto;padding-inline:var(--reihe-pad)}
.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:17px;              /* gemessen: 14px/17px, Knopfhöhe 43px */
  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-serif);
  font-size:21px;
  font-weight:500;
  line-height:1.8;
  color:#fff;
  padding:10px 20px;
}
.ankuendigung a{color:#f16521}
/* gemessen: schwarze Leiste 45px inkl. 1px Linie, Text Cormorant 20px/44px */
.telefonleiste{background:#000000;border-bottom:1px solid #e5e5e5}
.telefonleiste p{
  max-width:var(--breite);
  margin-inline:auto;
  padding:0 var(--reihe-pad);
  font-family:var(--font-serif);
  font-size:20px;
  font-weight:500;
  line-height:44px;
  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);
}
/* gemessen: Kopf 110px + 1px Linie, Reihe oben 25px eingerückt,
   Logo 253x66 links am 30px-Rand, Menü 84px hoch rechts bündig */
.kopf-innen{
  max-width:var(--breite);
  margin-inline:auto;
  padding:25px var(--reihe-pad) 0;
  min-height:109px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  position:relative;
}
.logo{display:inline-block;line-height:0;flex:0 0 auto}
.logo img{width:min(253px,52vw);height:auto}

.hauptnav{flex:0 1 auto;display:flex;align-items:center;min-height:84px}
.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:#000000}

/* 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;align-items:center;min-height:0;padding:18px 20px}
  .hauptnav{min-height:0;display:block}
  .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;
  /* Einzeilig wie im Original: sonst bricht der laengste Eintrag um und
     sein Knopf wird hoeher als die drei anderen (gemessen 78px statt 49px). */
  white-space:nowrap;
}
.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 — GEMESSEN am Original: 252px hoch, #ceb19c,
   H1 72px/97.2px (line-height 1.35, nicht 1.08 wie die übrigen H1), weiß ---------- */
.titelband{
  height:400px;
  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.35;
  color:#ffffff;
}
@media (max-width:767px){
  .titelband{height:250px}
}

/* Trenner wie im Original (Avada-Form "rounded-split", 71px): zwei Haelften
   mit je 80px runder Innenecke — wo sie sich treffen, entsteht die schmale
   Spitze. Inline am Element: background = Flaeche darunter, color = darueber. */
.wellen-trenner{position:relative;display:block;height:71px;overflow:hidden}
.wellen-trenner::before,
.wellen-trenner::after{
  content:"";position:absolute;top:0;height:71px;width:50%;
  background:currentColor;pointer-events:none;
}
.wellen-trenner::before{left:0;border-radius:0 0 80px 0}
.wellen-trenner::after{left:50%;border-radius:0 0 0 80px}

/* ---------- Hero — GEMESSEN: Reihe 825px hoch, Inhalt mittig,
   Titel 100px/180px, Unterzeile 24px/30px, Knopf 43px ---------- */
.held,.unterheld{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  text-align:center;
  background:var(--c-warm);
}
.held{min-height:825px}
.unterheld{min-height:450px}
.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;
  width:100%;
  max-width:var(--breite);
  padding:0 var(--reihe-pad);
}
.unterheld-inhalt{padding-block:clamp(40px,6vw,70px)}
.held-titel{
  font-family:var(--font-serif);
  font-size:var(--fs-hero);
  font-weight:500;
  line-height:1.8;               /* gemessen 100px/180px */
  color:#fff;
  margin-bottom:30px;
  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);
  line-height:30px;              /* gemessen 24px/30px */
  color:#fff;
  margin:-20px 0 40px;
  text-shadow:0 1px 12px rgba(33,41,52,.3);
}
.held-cta{margin-top:0}
.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 (Innenabstände je Abschnitt gemessen) ---------- */
.abschnitt{padding-block:var(--abschnitt-py)}
.abschnitt-alt{background:var(--c-flaeche-alt)}
/* Team-Flaeche: Original hat hier statt der flachen .abschnitt-alt-Farbe einen
   nach unten in Weiss auslaufenden Verlauf (gemessen). ID-Selektor genuegt Spezifitaet,
   ohne .abschnitt-alt selbst (u.a. fuer Oeffnungszeiten) anzutasten. */
#dasteam{background:linear-gradient(185deg,#ebebeb 58%,#fff 82%)}
.abschnitt-kopfzeile{
  text-align:center;
  max-width:788px;
  margin-inline:auto;
  display:flow-root;   /* damit der Randabstand der Trennlinie nicht herausfällt */
}
/* Gemessen: Vorzeile 24px/10px, danach 20px — die Kursivzeile ragt bewusst
   nach oben aus ihrer Zeile heraus (Original-Verhalten). */
.vorzeile{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:var(--fs-vorzeile);
  color:var(--c-warm);
  line-height:10px;
  margin-bottom:20px;
}
.abschnitt-titel{
  font-size:var(--fs-h2);
  letter-spacing:-2px;
  line-height:1.2;               /* gemessen 72px/86.4px */
  margin-bottom:30px;
}
/* Gemessen: von Titel-Unterkante bis Folgeblock 66px (30 + Linie + 35) */
.trennlinie{
  width:80px;
  border:0;
  border-top:1px solid var(--c-warm-linie);
  margin:0 auto 35px;
}
.einleitung{max-width:1000px;margin-inline:auto;text-align:center}

/* ---- Vertikale Innenabstände je Abschnitt (am Original gemessen) ---- */
#aboutus{padding-block:0 52px}
#dasteam{padding-block:69px 60px}
#dasteam .container{padding-inline:115.2px}   /* Reihe 1210px */
#dasteam .abschnitt-kopfzeile{max-width:686px}
#dasteam .team-staffel{margin-top:46px}
.produkte{padding-block:42px 60px}
.produkte .abschnitt-kopfzeile{max-width:768px;margin:15px auto 70px}
.gutschein{padding-block:42px 84px}
#arbeiten{padding-block:70px 0}
#arbeiten .abschnitt-kopfzeile{margin:25px auto 30px}
#angebote{padding-block:15px 0}
#angebote .abschnitt-kopfzeile{max-width:663px}
#oeffnungszeiten{padding-block:70px 0}
#oeffnungszeiten .abschnitt-kopfzeile{margin:40px auto 30px}
#kontakt{padding-block:70px 0}
#kontakt .abschnitt-kopfzeile{margin:15px auto 11px}
#instagram{padding-block:70px 0}
#instagram .abschnitt-kopfzeile{margin:15px auto 11px}
#faq{padding-block:70px 0}
#faq .abschnitt-kopfzeile{margin:15px auto 11px}
.schluss-cta{padding-block:70px 0}

/* 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 798px, Ladenfoto 828x449 ---------- */
.willkommen-inhalt{text-align:center;max-width:798px;margin-inline:auto}
/* Gemessen: Vorzeile hier 24px/30px (nicht 10px), danach direkt der Titel */
.willkommen-inhalt .vorzeile{line-height:30px;margin-bottom:0}
.willkommen-inhalt .deko-icon{margin-bottom:40px}
.ort-bild{
  margin:46px auto 0;
  max-width:828px;
  aspect-ratio:828/449;
  background-size:cover;
  background-position:center;
  border-radius:0;
}

/* ---------- Team — GEMESSEN: zwei Spalten à 484px in einer 1210px-Reihe,
   Karte 478px breit (weißer Grund), Foto randlos in Originalseitenverhältnis,
   Textteil 30px eingerückt (Textbreite 418px), dritte Karte mittig.
   KEIN Versatz zwischen Karte 1 und 2 — beide sitzen auf gleicher Höhe. ---------- */
.team-staffel{
  display:grid;
  grid-template-columns:repeat(2,484px);
  gap:29px 0;                    /* Original gemessen: 29px zwischen Reihe 1 und Karte 3 */
  justify-content:center;
  margin-inline:auto;
  align-items:start;
}
.team-karte{text-align:left;width:478px}
.team-staffel .team-karte:nth-child(3){
  grid-column:1 / -1;
  justify-self:center;
  transform:translateX(-3px);    /* Original gemessen: x=478 statt rechnerisch zentriert x=481 */
}
.team-bild{
  aspect-ratio:478/358;
  background-size:cover;
  background-position:center top;
}
/* Fotos behalten ihr Originalformat (gemessen 478x358 / 478x401 / 478x406) */
.team-staffel .team-karte:nth-child(2) .team-bild{aspect-ratio:478/401}
.team-staffel .team-karte:nth-child(3) .team-bild{aspect-ratio:478/406}
.team-text{
  background:var(--c-weiss);
  padding:40px 30px 30px;
}
.team-name{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:19px;
  letter-spacing:1px;
  line-height:1.2;               /* gemessen 19px/22.8px */
  color:var(--t-dunkel);
}
.team-rolle{
  font-family:var(--font-serif);
  font-style:normal;             /* gemessen: aufrecht, nicht kursiv */
  font-size:23px;
  line-height:1.4;               /* gemessen 23px/32.2px */
  font-weight:500;
  color:var(--c-gold);
  margin:15px 0 20px;
}
.team-rolle+p{margin-top:0}
.team-karte p{font-size:20px;line-height:36px}
.team-karte .team-rolle{font-size:23px;line-height:32.2px}
.team-hinweis-rot{color:#e02b20}
@media (max-width:1320px){
  #dasteam .container{padding-inline:var(--reihe-pad)}
}
@media (max-width:1040px){
  .team-staffel{grid-template-columns:1fr;justify-content:center}
  .team-karte{width:min(478px,100%);margin-inline:auto}
}

/* ---------- Produkte / Marken — GEMESSEN: fünfteilige Reihe, die drei Karten
   in Spalte 2–4 (je 276px), Karteninhalt 221px, Bild 221x221,
   Grundbild unten anliegend und waagerecht gekachelt ---------- */
.produkte{
  background:var(--c-weiss) url('../img/services-bg3_26-e1518615760726.jpg') center bottom repeat-x;
  background-image:image-set(url('../img/services-bg3_26-e1518615760726.avif') type('image/avif'),url('../img/services-bg3_26-e1518615760726.jpg') type('image/jpeg'));
}
/* Das große Ornament sitzt im Original in den Karten, nicht in der Kopfzeile */
.produkte .abschnitt-kopfzeile .deko-icon{display:none}
.raster-3{grid-template-columns:repeat(3,276px);gap:0;justify-content:center}
.marken-karte{text-align:center;width:221px;margin-inline:auto;padding-top:20px}
.marken-karte .deko-icon{
  width:46px;
  height:64px;
  background-image:url('../img/icon-large_28.png');
  margin:0 auto 40px;
}
.marken-karte h4{
  color:var(--t-dunkel);
  margin-bottom:46px;
}
.marken-karte img{margin-inline:auto;width:221px}
@media (max-width:900px){
  .raster-3{grid-template-columns:1fr}
}

/* ---------- Gutschein — GEMESSEN: Grund #171717 mit booking-bg,
   Überschrift 50px/60px, Text 861px breit, Bild 400x225 ---------- */
.gutschein{
  background:#171717 url('../img/booking-bg.png') center top/cover no-repeat;
  background-image:image-set(url('../img/booking-bg.avif') type('image/avif'),url('../img/booking-bg.png') type('image/png'));
}
.gutschein-mitte{text-align:center;max-width:1380px;margin-inline:auto}
.gutschein-mitte .deko-icon{display:none}
.gutschein-mitte h2{
  font-size:50px;
  line-height:1.2;               /* gemessen 50px/60px */
  letter-spacing:-2px;
  padding-top:16px;
}
.gutschein-mitte p{max-width:861px;margin:15px auto 0}
.gutschein-link{display:inline-block;margin-top:35px}
.gutschein-bild{
  width:min(400px,80vw);
  aspect-ratio:400/225;
  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) ---------- */
/* Gemessen: 4 Spalten à 345px in der 1380px-Reihe, Bildfläche 325x369 */
.werk-raster{margin-top:0;grid-template-columns:repeat(4,1fr);gap:0}
@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;
  width:min(325px,100%);
  aspect-ratio:325/369;
  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{
  display:none;                  /* Original hat keine Vorher/Nachher-Beschriftung (gemessen: 0) */
  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}
/* Neunter Slider mittig (Original) */
.vn-solo{
  grid-column:2 / span 2;
  justify-self:center;
}
@media (max-width:1100px){
  .vn-solo{grid-column:1 / -1}
}
@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-warm-dunkel,#b2946f);color:#fff}
.insta-icon[data-kw-icon="1"] svg:not([width]),
.insta-icon svg{width:24px;height:24px}

/* ---------- Angebote (gemessen: schwarze Karten ~260px, Titel in der Karte,
   beige Wellenkante zwischen Bild und Fuß) ---------- */
/* GEMESSEN: zwei Spalten à 478px zentriert, Karte 423px, Bild 423x238,
   Titel 45px/63px weiß, Karte 361px hoch */
.angebote-raster{
  grid-template-columns:repeat(2,478px);
  gap:0;
  justify-content:center;
  max-width:none;
  margin-inline:auto;
}
.angebot-karte{
  text-decoration:none;
  display:block;
  width:423px;
  margin-inline:auto;
  padding-top:20px;
  background:#161616;
  box-shadow:0 16px 30px rgba(33,41,52,.25);
  transition:transform .2s,box-shadow .2s;
}
@media (max-width:1040px){
  .angebote-raster{grid-template-columns:1fr}
  .angebot-karte{width:min(423px,100%)}
}
.angebot-karte:hover,
.angebot-karte:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 22px 38px rgba(33,41,52,.3);
}
.angebot-bild{
  aspect-ratio:423/238;
  background-size:cover;
  background-position:center;
}
/* Wellenkante liegt im Bild, sie darf keine Höhe kosten (Original hat keine) */
.angebot-welle{line-height:0;margin-top:-20px;height:20px;position:relative}
.angebot-welle[data-kw-icon="1"] svg:not([width]),
.angebot-welle svg{display:block;width:100%;height:20px}
.angebot-fuss{padding:20px 0;text-align:center}
.angebot-fuss h3{
  color:#fff;
  font-size:var(--fs-h3);
  letter-spacing:-2px;
  line-height:1.4;               /* gemessen 45px/63px */
}
/* GEMESSEN: eigener Block 137px unter den Karten, Textbreite 462px */
.angebote-schluss{margin-top:137px;text-align:center;max-width:462px;margin-inline:auto}
.angebote-schluss h3{
  font-size:var(--fs-h3);
  letter-spacing:-2px;
  line-height:1.4;
  margin-bottom:30px;
}
.angebote-schluss .trennlinie{margin:0 auto 35px}

/* ---------- Preise (Original: 2 Spalten — Damen breit links, Rest rechts) ---------- */
/* GEMESSEN: Grund #ceb19c, Kopfspalte 864px, Vorzeile rgb(139,118,101),
   Titel + Hinweistext weiß in 21px/37.8px, Tafeln 560px breit, Zeilen 54px */
.preise{background:var(--c-warm);padding-block:69px 0}
.preise .abschnitt-kopfzeile{max-width:864px}
.preise .vorzeile{color:var(--c-warm-dunkel)}
.preise .abschnitt-titel{color:#fff}
.preise .trennlinie{border-top-color:rgba(255,255,255,.5)}
.preis-hinweis{
  max-width:864px;
  margin-inline:auto;
  text-align:center;
  color:#fff;
  font-size:var(--fs-fliess);
}
.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}
}
/* flow-root: sonst faellt der 70px-Aussenabstand der Tafel aus der Einheit
   heraus und das untere Band haette keinen Platz. */
.preis-einheit{min-width:0;position:relative;display:flow-root}
.preis-titel{
  text-align:center;
  color:#6e6e6e;                 /* Original gemessen: rgb(110,110,110) */
  font-size:var(--fs-h3);
  letter-spacing:-2px;
  line-height:1.4;               /* gemessen 45px/63px */
  margin:20px 0 30px;
}
/* Tafel-Enden wie im Original (Avada-Form "rounded-split", gemessen 560x70):
   je Band zwei Haelften in Tafelfarbe mit 80px runder Innenecke. Zur Mitte hin
   laeuft das Band auf null — dort entsteht die scharfe Spitze. Oberes Band an
   der Tafel, unteres an der Einheit, weil ein Element nur zwei Pseudo-Elemente
   hat; die 70px Platz dafuer schaffen die Aussenabstaende der Tafel. */
.preis-tafel{
  position:relative;
  background:var(--c-preis-tafel);
  border-radius:0;
  margin:70px 0;
}
.preis-tafel::before,
.preis-tafel::after{
  content:"";
  position:absolute;
  top:-70px;
  height:70px;
  width:50%;
  background:var(--c-preis-tafel);
  pointer-events:none;
}
.preis-tafel::before{left:0;border-radius:0 80px 0 0}
.preis-tafel::after{left:50%;border-radius:80px 0 0 0}
.preis-einheit::before,
.preis-einheit::after{
  content:"";
  position:absolute;
  bottom:0;
  height:70px;
  width:50%;
  background:var(--c-preis-tafel);
  pointer-events:none;
}
.preis-einheit::before{left:0;border-radius:0 0 80px 0}
.preis-einheit::after{left:50%;border-radius:0 0 0 80px}
.tabelle-rollbar{overflow-x:auto;-webkit-overflow-scrolling:touch}
.preis-tabelle{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-fliess);
  line-height:1.8;               /* gemessen 21px/37.8px, Zeile 54px hoch */
}
.preis-tabelle th,.preis-tabelle td{
  padding:8px 20px 8px 0;
  text-align:right;
  color:#fff;
  font-weight:500;
  white-space:nowrap;
}
.preis-tabelle .preis-links{
  padding:8px 0 8px 20px;
  text-align:left;
  color:var(--c-preis-name);
  white-space:normal;
}
.preis-tabelle thead th{
  font-family:var(--font-serif);
  font-size:var(--fs-fliess);
}
/* Spaltenkoepfe (kurz/mittel/lang) -- Original gemessen: 20px, rgb(110,110,110);
   die erste Kopfzelle traegt zusaetzlich .preis-links und bleibt bei --c-preis-name */
.preis-tabelle thead th:not(.preis-links){color:#6e6e6e;font-size:20px}

/* ---------- Öffnungszeiten ---------- */
.zeiten{
  background:var(--c-flaeche-alt);   /* Original hat hier kein Hintergrundbild (gemessen) */
}
/* GEMESSEN: Tabelle 690px breit, Spalten 345/173/173, Zeilen 80px hoch,
   ALLES mittig in Poppins 18px/25.2px, GESCHLOSSEN in Beige */
.zeiten-tabelle{
  width:100%;
  max-width:690px;
  margin:90px auto 0;
  border-collapse:collapse;
  font-family:var(--font-sans);
  font-size:18px;
  line-height:1.4;
  font-weight:500;
  letter-spacing:1px;
  color:var(--t-dunkel);
}
.zeiten-tabelle th,.zeiten-tabelle td{
  padding:27px 6px 28px;
  text-align:center;
  font-weight:500;
  font-size:18px;
  color:var(--t-dunkel);
}
.zeiten-tabelle th{width:345px}
.zeiten-tabelle td{width:173px}
.zeiten-tabelle tr:nth-child(6) td,
.zeiten-tabelle tr:nth-child(7) td{color:var(--c-warm)}
@media (max-width:640px){
  .zeiten-tabelle th,.zeiten-tabelle td{padding:14px 4px;font-size:15px}
  .zeiten-tabelle th{width:auto}
  .zeiten-tabelle td{width:auto}
}

/* ---------- Adresse & Karte ---------- */
/* GEMESSEN: Anschrift 21px/37.8px aufrecht in Beige, 30px unter dem Text;
   Kartenfläche 622x372, 61px unter der Kopfzeile */
.adresse-zeile{
  font-family:var(--font-serif);
  font-style:normal;
  font-weight:500;
  font-size:var(--fs-fliess);
  color:var(--c-warm);
  margin-top:30px;
}
.karte{
  margin:61px auto 0;
  max-width:min(622px,100%);
  aspect-ratio:622/372;
  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) ---------- */
/* GEMESSEN: Vorzeile Cormorant 24px kursiv beige (wie überall),
   Titel 72px/100.8px, Klapp-Punkte 806px breit, 64px hoch, Rand #e2e2e2,
   Frage in Poppins 18px/32.4px in rgb(110,110,110) */
.faq-vorzeile{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size:var(--fs-vorzeile);
  line-height:10px;
  letter-spacing:normal;
  color:var(--c-warm);
  text-transform:none;
  margin-bottom:20px;
}
.faq-titel{
  font-size:var(--fs-h2);
  letter-spacing:-2px;
  line-height:1.4;               /* gemessen 72px/100.8px */
  margin-bottom:30px;
}
.faq-liste{max-width:806px;margin:0 auto}
.faq-punkt{
  border:1px solid var(--c-linie);
  background:var(--c-weiss);
}
.faq-punkt+.faq-punkt{margin-top:10px}
.faq-punkt summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 16px;
  font-family:var(--font-sans);
  font-size:18px;
  line-height:1.8;               /* gemessen 18px/32.4px */
  font-weight:500;
  color:var(--t-fliess);
  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-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;
  background-image:image-set(url('../img/booking-bg.avif') type('image/avif'),url('../img/booking-bg.png') type('image/png'));
  text-align:center;
}
/* GEMESSEN: Spalte 1064px, Vorzeile 24px/20px, Knopf schließt direkt an */
.schluss-cta .container{max-width:1104px;padding-inline:20px}
.schluss-cta .einleitung{max-width:none}
.schluss-cta .knopf{margin-top:0}
.cta-vorzeile{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size:var(--fs-vorzeile);
  line-height:20px;
  color:var(--c-warm);
  margin:25px 0 20px;
}
.schluss-cta a:not(.knopf){color:var(--t-fliess);text-decoration:underline}
.schluss-cta a:not(.knopf):hover{color:#000000}

/* ---------- 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;
  overflow-wrap:anywhere;
}
.rechtstext h3{
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:600;
  color:var(--t-ueberschrift);
  margin:1.5em 0 .4em;
  overflow-wrap:anywhere;
}
.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:#000000}

/* ---------- 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 — GEMESSEN: weiße Fläche, Cormorant 21px/37.8px,
   Links rgb(73,73,73), Streifen 95px hoch (23 oben / 14 unten) ---------- */
.fuss{
  background:var(--c-weiss);
  text-align:center;
  padding:23px 20px 14px;
}
.fuss p{
  font-family:var(--font-serif);
  font-size:var(--fs-fliess);
  line-height:1.8;
  font-weight:500;
  letter-spacing:normal;
  color:var(--t-fliess);
  margin-bottom:20px;
}
.fuss a{color:var(--t-dunkel);text-decoration:none}
.fuss a:hover,.fuss a:focus-visible{color:#000000;text-decoration:underline}
.fuss-trenner{margin-inline:10px;color:#000}

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

/* ---------- Angebot-Popup (Klick auf „Unsere Angebote" im Flyout) ---------- */
.angebot-popup{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px}
.angebot-popup[hidden]{display:none}
.angebot-popup-hintergrund{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.angebot-popup-inhalt{
  position:relative;max-width:700px;width:100%;max-height:calc(100vh - 48px);
  overflow:auto;
  background:var(--c-weiss);
  border-radius:4px;
  padding:56px 32px 48px;
  text-align:center;
}
.angebot-popup-schliessen{
  position:absolute;top:8px;right:8px;
  width:36px;height:36px;border-radius:50%;
  background:var(--c-weiss);color:var(--t-ueberschrift);
  border:1px solid var(--c-linie);
  font-size:22px;line-height:1;
  display:grid;place-items:center;
  cursor:pointer;
}
.angebot-popup-schliessen:hover,.angebot-popup-schliessen:focus-visible{background:var(--c-pink);color:#fff;border-color:var(--c-pink)}
body.popup-offen{overflow:hidden}

/* ---------- 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; }
/* Team-Reihe: Karten einer Reihe enden auf gleicher Höhe. style.css setzt
   align-items:start; der weiße Textgrund füllt die Restfläche, damit
   unterschiedlich lange Texte nicht unterschiedlich hohe Karten ergeben. */
.team-staffel{ align-items:stretch; }
.team-staffel .team-karte > .team-text{ flex:1; }

/* Vorher-Nachher-Schieber: Griff als dunkle Raute mit weißer Kontur,
   Beschriftung „Vorher"/„Nachher" erscheint beim Überfahren. */
.vn-box .vn-griff::after{
  width:24px; height:24px;
  background:rgba(24,28,35,.88);
  border:2px solid #fff;
  box-shadow:0 1px 8px rgba(33,41,52,.45);
}
.vn-etikett{
  display:block;                 /* style.css blendet sie ganz aus */
  opacity:0;
  top:50%; bottom:auto;
  transform:translateY(-50%);
  font-size:13px;
  font-weight:500;
  letter-spacing:.5px;
  text-transform:none;
  padding:5px 12px;
  border-radius:2px;
  background:rgba(255,255,255,.62);   /* milchig weiß statt dunkelgrau */
  color:#212934;                      /* dunkle Schrift, sonst weiß auf weiß */
  backdrop-filter:blur(2px);
}
.vn-etikett-vorher{ left:14px }
.vn-etikett-nachher{ right:14px }
/* Preise: Überschriften Damen/Herren/Kinder und Spaltenköpfe kurz/mittel/lang
   stehen auf der Tafelfläche weiß — wie der übrige Tabellentext daneben. */
.preis-titel,
.preis-tabelle thead th:not(.preis-links){ color:#fff }

/* ── Preistafel-Kanten: EINE Kurve, zwei komplementäre Verwendungen ───────
   Der Zipfel, der unten heraussteht, passt exakt in die Kerbe der Oberkante:
   Ober- und Unterkante sind EIN Formenpaar, kein zufällig ähnliches Aussehen.

   Deshalb ist die Kurve genau EINMAL definiert — als Variable --zipfel-ab —
   und wird an allen Kanten verwendet: an der Oberkante als Aussparung, an
   der Unterkante als Vorsprung. Maße identisch: 140px breit (70px je
   Flanke), 70px tief, immer mittig über calc(50% ± x) — dadurch unabhängig
   von der Kartenbreite (Herren/Damen/Extras/Jedermann sind verschieden
   breit).

   Kurve: Bezier P0(0,0) P1(38,0) P2(63,42) P3(70,70), mit 24 Segmenten
   abgetastet. P1 liegt bewusst auf y=0: dadurch setzt die Kurve WAAGERECHT
   an der flachen Kante an, es entsteht kein Knick am Übergang. Je weiter P1
   nach rechts wandert, desto länger der flache Anlauf und desto weicher der
   Einstieg — bei 38 ist der Übergang unsichtbar, darunter bleibt eine Ecke
   erkennbar. P2 nahe x=70 sorgt für den steilen Anstieg zur Spitze —
   senkrecht wäre falsch, dann träfen sich beide Flanken tangential und
   ergäben eine runde Kuppel.

   Warum Polygon und nicht border-radius oder path(): border-radius kann nur
   Kreisbögen, deren Übergangszone an der 70px-Höhe gedeckelt ist — daraus
   wird entweder ein breiter Wulst oder eine runde Kuppel, nie eine Spitze.
   clip-path:path() kann Kurven, akzeptiert aber keine Prozentwerte und
   bricht damit bei unterschiedlich breiten Karten. polygon() erlaubt calc()
   je Koordinate und löst beides. */
:root{
  /* Spitze nach unten: linke Flanke abwärts zur Spitze, rechte wieder aufwärts */
  --zipfel-ab:
    calc(50% - 70.0px) 0px,calc(50% - 65.3px) 0.2px,calc(50% - 60.8px) 0.8px,calc(50% - 56.4px) 1.9px,
    calc(50% - 52.1px) 3.2px,calc(50% - 48.0px) 5px,calc(50% - 44.0px) 7px,calc(50% - 40.2px) 9.3px,
    calc(50% - 36.5px) 11.9px,calc(50% - 33.0px) 14.8px,calc(50% - 29.6px) 17.8px,calc(50% - 26.4px) 21.1px,
    calc(50% - 23.4px) 24.5px,calc(50% - 20.5px) 28.1px,calc(50% - 17.8px) 31.8px,calc(50% - 15.2px) 35.5px,
    calc(50% - 12.8px) 39.4px,calc(50% - 10.6px) 43.3px,calc(50% - 8.5px) 47.3px,calc(50% - 6.7px) 51.2px,
    calc(50% - 5.0px) 55.1px,calc(50% - 3.5px) 59px,calc(50% - 2.1px) 62.7px,calc(50% - 1.0px) 66.4px,
    calc(50% - 0.0px) 70px,
    calc(50% + 1.0px) 66.4px,calc(50% + 2.1px) 62.7px,calc(50% + 3.5px) 59px,calc(50% + 5.0px) 55.1px,
    calc(50% + 6.7px) 51.2px,calc(50% + 8.5px) 47.3px,calc(50% + 10.6px) 43.3px,calc(50% + 12.8px) 39.4px,
    calc(50% + 15.2px) 35.5px,calc(50% + 17.8px) 31.8px,calc(50% + 20.5px) 28.1px,calc(50% + 23.4px) 24.5px,
    calc(50% + 26.4px) 21.1px,calc(50% + 29.6px) 17.8px,calc(50% + 33.0px) 14.8px,calc(50% + 36.5px) 11.9px,
    calc(50% + 40.2px) 9.3px,calc(50% + 44.0px) 7px,calc(50% + 48.0px) 5px,calc(50% + 52.1px) 3.2px,
    calc(50% + 56.4px) 1.9px,calc(50% + 60.8px) 0.8px,calc(50% + 65.3px) 0.2px,calc(50% + 70.0px) 0px;

  /* Dieselbe Kurve, y an der 71px-Kante gespiegelt: Spitze nach OBEN.
     Umlauf beginnt rechts unten, läuft zur Spitze und links wieder hinunter. */
  --zipfel-auf:
    calc(50% + 70.0px) 71.0px,calc(50% + 65.3px) 70.8px,calc(50% + 60.8px) 70.2px,calc(50% + 56.4px) 69.1px,
    calc(50% + 52.1px) 67.8px,calc(50% + 48.0px) 66.0px,calc(50% + 44.0px) 64.0px,calc(50% + 40.2px) 61.7px,
    calc(50% + 36.5px) 59.1px,calc(50% + 33.0px) 56.2px,calc(50% + 29.6px) 53.2px,calc(50% + 26.4px) 49.9px,
    calc(50% + 23.4px) 46.5px,calc(50% + 20.5px) 42.9px,calc(50% + 17.8px) 39.2px,calc(50% + 15.2px) 35.5px,
    calc(50% + 12.8px) 31.6px,calc(50% + 10.6px) 27.7px,calc(50% + 8.5px) 23.7px,calc(50% + 6.7px) 19.8px,
    calc(50% + 5.0px) 15.9px,calc(50% + 3.5px) 12.0px,calc(50% + 2.1px) 8.3px,calc(50% + 1.0px) 4.6px,
    calc(50% + 0.0px) 1.0px,
    calc(50% - 1.0px) 4.6px,calc(50% - 2.1px) 8.3px,calc(50% - 3.5px) 12.0px,calc(50% - 5.0px) 15.9px,
    calc(50% - 6.7px) 19.8px,calc(50% - 8.5px) 23.7px,calc(50% - 10.6px) 27.7px,calc(50% - 12.8px) 31.6px,
    calc(50% - 15.2px) 35.5px,calc(50% - 17.8px) 39.2px,calc(50% - 20.5px) 42.9px,calc(50% - 23.4px) 46.5px,
    calc(50% - 26.4px) 49.9px,calc(50% - 29.6px) 53.2px,calc(50% - 33.0px) 56.2px,calc(50% - 36.5px) 59.1px,
    calc(50% - 40.2px) 61.7px,calc(50% - 44.0px) 64.0px,calc(50% - 48.0px) 66.0px,calc(50% - 52.1px) 67.8px,
    calc(50% - 56.4px) 69.1px,calc(50% - 60.8px) 70.2px,calc(50% - 65.3px) 70.8px,calc(50% - 70.0px) 71.0px;
}
.preis-tafel::before{
  left:0; width:100%; border-radius:0;
  clip-path: polygon(0 0, var(--zipfel-ab), 100% 0, 100% 70px, 0 70px);
}
.preis-einheit::before{
  left:0; width:100%; margin-left:0; border-radius:0;
  background: var(--c-preis-tafel);
  clip-path: polygon(var(--zipfel-ab));
}
/* Zweite Hälfte je Band entfällt — eine Fläche trägt jetzt beide Flanken. */
.preis-tafel::after,
.preis-einheit::after{ display:none }

/* Abschnittstrenner: dieselbe Kurve wie die Preistafeln, damit das Zipfel-
   Motiv auf der ganzen Seite eines ist. Höhe hier 71px statt 70px, die
   y-Werte sind entsprechend skaliert; Breite unverändert 140px.
   Gilt für alle vier Trenner der Seite — sie teilen sich die Klasse.

   FARBKONVENTION (gilt durchgängig):
     color      = Farbe des Abschnitts DARÜBER  → das Pseudo-Element
     background = Farbe des Abschnitts DARUNTER → der Trenner selbst
   Deshalb bekommt das Pseudo-Element die SPITZE (wie die Unterkante einer
   Preistafel), nicht die Kerbe: die obere Farbe hängt als Zipfel nach unten
   in den folgenden Abschnitt. Mit der Kerbenform ragte umgekehrt die UNTERE
   Farbe mittig nach oben — daran erkennt man eine vertauschte Richtung. */
.wellen-trenner::before{
  left:0; width:100%; border-radius:0;
  clip-path: polygon(var(--zipfel-ab));
}
.wellen-trenner::after{ display:none }

/* Richtung je Übergang — im Vorbild NICHT einheitlich. Dort steuern zwei
   Klassen das Verhalten:
     .rounded-split.top    (Rundung unten) → untere Farbe ragt nach OBEN
     .rounded-split.bottom (Rundung oben)  → obere Farbe ragt nach UNTEN
   Übernommen wurde:
     Willkommen→Team  top     → Spitze hoch
     Angebote→Preise  top     → Spitze hoch
     Preise→Zeiten    bottom  → Spitze runter
   Zeiten→Kontakt hat GAR KEINEN Trenner — das Element ist aus dem HTML
   entfernt, die Öffnungszeiten stoßen direkt an den Kontaktbereich.

   MERKE für künftige Trenner: Die Farbkonvention „color = Abschnitt
   darüber" meint die Farbe an dessen UNTERKANTE. Die Öffnungszeiten sind
   oben #ebebeb, laufen unten aber auf #f6f6f6 aus — ein Trenner mit
   #ebebeb erzeugt dort eine harte Querkante.
   Standard oben ist „Spitze runter"; die beiden Trenner mit Spitze nach oben
   tragen im HTML zusätzlich .zipfel-hoch. Gleiche Kurve, nur y gespiegelt:
   die Aussparung sitzt hier an der Unterkante und läuft nach oben spitz zu. */
.wellen-trenner.zipfel-hoch::before{
  clip-path: polygon(0 0, 100% 0, 100% 71px, var(--zipfel-auf), 0 71px);
}

/* Öffnungszeiten: zwei Eigenheiten dieser Sektion.

   1) Der diagonale Farbwechsel über die Sektion. Im Vorbild ist das ein
      Bild — auf dieser Seite werden solche Flächen jedoch GEZEICHNET, nie
      als Bild eingebunden. Deshalb als radial-gradient nachgebaut. Werte:
      Grundton #ebebeb, hellste Stelle #f6f6f6, die Kante folgt einem
      Kreisbogen — durch drei Punkte gelegt ergibt das Mittelpunkt
      100.7%/797% und Radius 220%/790%, bezogen auf die Vorbildmaße
      2421x674. Deshalb liegt die Fläche auch auf 674px Höhe unten an,
      darüber bleibt es einfarbig. Der Farbwechsel ist bewusst eine KANTE,
      kein weicher Verlauf — die 0,03% zwischen den beiden Farbstopps sind
      rund 1,6px und dienen nur der Kantenglättung, sonst entstehen
      Treppchen.

      WICHTIG die Maße 2421px/repeat-x: Das Motiv wird NICHT auf die
      Sektionsbreite gestreckt, sondern in Originalbreite eingesetzt und
      horizontal gekachelt. Bei „100%" staucht der Bogen auf die
      Fensterbreite und wird dadurch steiler — er schneidet die Tabelle dann
      schon auf Höhe Montag statt erst bei Donnerstag/Freitag.

   2) Unter jedem Wochentag eine Linie: 100px breit, 1px, rgb(175,147,107),
      5px Abstand nach oben, mittig unter dem Wort. */
.zeiten{
  background:
    radial-gradient(ellipse 220% 790% at 100.7% 797%,
      #f6f6f6 0 99.97%, rgba(246,246,246,0) 100%)
      center bottom / 2421px 674px repeat-x,
    var(--c-flaeche-alt);
}
.zeiten-tabelle th::after{
  content:""; display:block; width:100px; height:0;
  border-top:1px solid rgb(175,147,107); margin:5px auto 0;
}

/* Dunkler Abschnitt (elumen.html, „…ohne Oxidation"): Grund #171717,
   Überschrift und Liste weiß. Als eigene Klasse, damit weitere Abschnitte
   sie bekommen können — heisse-schere.html hat denselben Aufbau, trägt die
   Klasse aber NICHT. */
.abschnitt-dunkel{ background:#171717 }
.abschnitt-dunkel h2,
.abschnitt-dunkel li,
.abschnitt-dunkel p{ color:#fff }
.abschnitt-dunkel li::marker{ color:#fff }
/* heisse-schere.html: die beiden Bilder im dunklen Abschnitt tragen einen
   hellen Rahmen, 5px solid rgb(246,246,246). Seitenverhältnisse 2/3 hoch
   und 3/2 quer. */
.abschnitt-dunkel .leistung-bild-hoch,
.abschnitt-dunkel .leistung-bild-quer{ border:5px solid #f6f6f6 }
/* Eigene Formate behalten Vorrang vor der 576/407-Regel weiter unten, die
   sonst über die gemeinsame Klasse .abschnitt-dunkel auch hier greift und
   das Hochformat quer legt. */
.abschnitt-dunkel .leistung-bild-hoch{ aspect-ratio:2/3 }
.abschnitt-dunkel .leistung-bild-quer{ aspect-ratio:3/2 }

/* Versetzte Bildanordnung auf heisse-schere.html, bezogen auf die 1510px
   breite Inhaltsreihe:
     Textspalte 471px · Lücke 80px · Bildbereich 790px
     Bild hoch: 263px breit (33% des Bildbereichs), linksbündig
     Bild quer: 485px breit (61%), rechtsbündig, 82px nach oben überlappend
   Unter 900px wird gestapelt, dann ohne Versatz. */
.heisse-lage{ grid-template-columns:471fr 790fr; gap:80px; align-items:start }
/* Der ganze Bildbereich sitzt höher als die Überschrift: das obere Bild
   beginnt 92px ÜBER der Oberkante von „Die heiße Schere". */
.heisse-bilder{ display:block; margin-top:-92px }
.heisse-bilder .leistung-bild-hoch{ width:33.3% }
.heisse-bilder .leistung-bild-quer{ width:61.4%; margin-left:auto; margin-top:-82px }
@media (max-width:900px){
  .heisse-lage{ grid-template-columns:1fr; gap:var(--gap) }
  .heisse-bilder{ margin-top:0 }
  .heisse-bilder .leistung-bild-hoch{ width:100%; margin:0 }
  .heisse-bilder .leistung-bild-quer{ width:100%; margin:var(--gap) 0 0 }
}

/* „Was ist Elumen?" (elumen.html, Block 030): Überschrift mittig über
   beiden Spalten mit dem Zierzeichen darüber, Grund weiß, Fließtext
   #6e6e6e, Bild 576x407. Das Wort „NICHT" ist unterstrichen — das <u>
   steht so im Markup und darf beim Bearbeiten nicht verlorengehen. */
.leistung-mittig .leistung-text p{ color:#6e6e6e }
/* Beide Leistungsbilder auf elumen.html haben im Original dasselbe Format
   576x407 — der Nachbau stand auf 4/3 und war damit zu hoch. Gilt für den
   dunklen Abschnitt oben genauso wie für „Was ist Elumen?". */
/* Das :not() ist Pflicht: heisse-schere.html nutzt dieselbe Klasse
   .abschnitt-dunkel, hat dort aber eigene Formate (hoch 2/3, quer 3/2) —
   ohne den Ausschluss legt diese Regel das Hochformat quer. */
.abschnitt-dunkel .leistung-bild:not(.leistung-bild-hoch):not(.leistung-bild-quer),
.leistung-mittig .leistung-bild{ aspect-ratio:576/407 }

/* Kartenfläche vor dem Laden von Google Maps: statt einer leeren grauen
   Fläche eine Karten-Andeutung. GEZEICHNET, nicht als Bild — ein echter
   Kartenausschnitt wäre hier zudem lizenzrechtlich heikel, ausgerechnet an
   der Stelle, an der Google bewusst noch nicht geladen wird. Aufbau: zwei
   Raster aus Haupt- und Nebenstraßen, eine schräge Durchgangsstraße und
   eine Standortnadel; der Consent-Kasten bekommt einen halbdeckenden
   Grund, damit er lesbar bleibt. */
.karte{
  position:relative; overflow:hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 178px, #fff 178px 190px),
    repeating-linear-gradient(0deg,  transparent 0 132px, #fff 132px 143px),
    repeating-linear-gradient(90deg, transparent 0 56px, #f4f2f0 56px 61px),
    repeating-linear-gradient(0deg,  transparent 0 48px, #f4f2f0 48px 53px),
    #e6e3e0;
}
.karte::before{
  content:""; position:absolute; inset:-20%; pointer-events:none;
  background:linear-gradient(24deg, transparent calc(50% - 7px),
    #fff calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px));
}
.karte::after{
  content:""; position:absolute; left:17%; top:73%; pointer-events:none;
  width:20px; height:20px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--c-warm);
  box-shadow:0 2px 6px rgba(33,41,52,.35);
}
.karte-schutz{
  position:relative; z-index:1;
  background:rgba(255,255,255,.88);
  border:1px solid var(--c-linie);
  padding:22px 26px;
}

/* FAQ, geöffnete Frage: style.css färbt Text UND Icon mit --c-gruen
   (#65bc7b) und dreht das Icon um 45° — daraus wird ein grünes X. Hier
   bleibt der Text dunkel und das Icon wird zu einem beigen Minus. Das Grün
   stammt aus einer Regel des Vorbild-CSS, die dort von den eigenen
   FAQ-Variablen überschrieben wird und nie sichtbar ist. */
.faq-punkt[open] summary{ color:var(--t-fliess) }
.faq-punkt[open] .faq-icon{ transform:none; background:var(--c-warm); color:#fff }
/* Plus wird Minus: die senkrechte Linie des SVG ausblenden */
.faq-punkt[open] .faq-icon line:first-child{ opacity:0 }

/* Trennlinie unter „Preise": --c-warm-linie (#dcbaa1) ist heller als der
   beige Grund der Sektion (#ceb19c) und verschwindet darauf. Auf der
   Preisfläche derselbe dunkle Ton wie die Vorzeile darüber. */
.preise .trennlinie{ border-top-color: var(--c-warm-dunkel) }

/* Luft unter der letzten Preistafel. style.css setzt padding-block:69px 0;
   damit steht die Tafel am Abschnittsende an und ihr Zipfel ragt in den
   Trenner. Soll ist ein Abstand von 253px zwischen letzter Preiszeile und
   Trenner — die hier ergänzten 229px stellen ihn her. */
.preise{ padding-bottom:229px }

/* Kacheln kleben untereinander: nebeneinander entsteht der Zwischenraum
   daraus, dass die Spalte 345px breit ist und die Box nur 325px — nach unten
   fehlt er ganz. Gleicher Abstand von 20px also als row-gap. */
.werk-raster{ row-gap:20px }

/* Dunkle Auflage beim Überfahren — legt sich über beide Bildhälften,
   Griff und Beschriftung bleiben darüber. */
.vn-box::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(18,22,28,.32);
  opacity:0;
  pointer-events:none;
}
.vn-etikett, .vn-griff{ z-index:2 }
.vn-box:hover::after,
.vn-box:focus-within::after{ opacity:1 }
.vn-box:hover .vn-etikett,
.vn-box:focus-within .vn-etikett{ opacity:1 }
@media (prefers-reduced-motion:no-preference){
  .vn-etikett, .vn-box::after{ transition:opacity .18s ease }
}
/* Im Editor dauerhaft sichtbar — sonst findet der Sichtbar-Macher die
   Marker b060-span-* nicht (Hover lässt sich dort nicht halten). */
html.kw-edit .vn-etikett{ opacity:1 }

[data-kw-icon="1"] svg{ max-width:100%; max-height:100% }
[data-kw-icon="1"] svg:not([width]){ width:20px; height:20px }

/* Datenschutzseite: Abstand der Kopfzeile zum Rechtstext.
   Der Rechtstext entsteht dort erst im Einbindungs-Widget. Dessen Titelzeile
   bringt ein eigenes oberes Polster mit, das zum Abschnitts-Innenabstand
   hinzukommt — massgeblich ist der Abstand bis zum SICHTBAREN Text, nicht bis
   zur Kante des Einbindungs-Kastens.

   Greift nur auf dieser Seite: .rt__einbindung steht ausschliesslich im
   Datenschutz-Abschnitt. Das Impressum traegt .rechtstext ohne Einbindung
   und bleibt unberuehrt.

   Zusammensetzung: main#inhalt steuert 60px bei, hier 39px, Titelpolster 0
   — zusammen 96px bis zur ersten Textzeile, bei jeder Fensterbreite.
   Nur padding-top gesetzt; der untere Abschnittsabstand bleibt.
   .prx_h1 kommt genau einmal vor (Dokumenttitel); die Abschnitts-
   ueberschriften .prx_h2 behalten ihre Abstaende. Klassenname stammt vom
   Widget-Anbieter: bricht er weg, faellt nur dieses Polster zurueck. */
.abschnitt:has(> .container > .rt__einbindung){ padding-top:39px }
.rt__einbindung .prx_h1{ padding-top:0 }


/* 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-zustand 1.0 — erzeugt von kw-zustand-css.py ──────────────────────
   Icon-Farben für Hover und Aktiv, gesetzt im Website-Editor.
   Nicht von Hand ändern: Skript erneut laufen lassen.
   ───────────────────────────────────────────────────────────────────── */

/* Der Träger blendet seinen Hintergrund über; das Symbol soll mitgehen. */
svg[data-kw-ih] [data-kwh], svg[data-kw-ia] [data-kwa] {
  transition: fill .18s ease, stroke .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  svg[data-kw-ih] [data-kwh], svg[data-kw-ia] [data-kwa] { transition: none; }
}

/* !important, weil die Normalfarbe als Inline-Style an der Fläche steht — */
/* ohne das käme sie nie gegen ihre eigene Angabe an.                      */

/* Hover */
*:hover > svg[data-kw-ih="1"] [data-kwh*="f"],
*:hover > * > svg[data-kw-ih="2"] [data-kwh*="f"],
*:hover > * > * > svg[data-kw-ih="3"] [data-kwh*="f"],
*:hover > * > * > * > svg[data-kw-ih="4"] [data-kwh*="f"],
*:hover > * > * > * > * > svg[data-kw-ih="5"] [data-kwh*="f"],
*:hover > * > * > * > * > * > svg[data-kw-ih="6"] [data-kwh*="f"],
*:hover > * > * > * > * > * > * > svg[data-kw-ih="7"] [data-kwh*="f"],
*:hover > * > * > * > * > * > * > * > svg[data-kw-ih="8"] [data-kwh*="f"] {
  fill: var(--kwh) !important;
}
*:hover > svg[data-kw-ih="1"] [data-kwh*="s"],
*:hover > * > svg[data-kw-ih="2"] [data-kwh*="s"],
*:hover > * > * > svg[data-kw-ih="3"] [data-kwh*="s"],
*:hover > * > * > * > svg[data-kw-ih="4"] [data-kwh*="s"],
*:hover > * > * > * > * > svg[data-kw-ih="5"] [data-kwh*="s"],
*:hover > * > * > * > * > * > svg[data-kw-ih="6"] [data-kwh*="s"],
*:hover > * > * > * > * > * > * > svg[data-kw-ih="7"] [data-kwh*="s"],
*:hover > * > * > * > * > * > * > * > svg[data-kw-ih="8"] [data-kwh*="s"] {
  stroke: var(--kwh) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Korrekturen an gemeinsamen Komponenten
   Vier Punkte, jeder an der GEMEINSAMEN Komponente behoben, nicht am
   Einzelfall. Alle Werte gemessen bzw. gerechnet, nicht geschätzt.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1) Flyout: Label des letzten Knopfes lief aus der Fläche ──────────────
   GEMESSEN bei 1440px: der längste Eintrag („Kosmetik, Hand- und Fußpflege")
   ist 310px breit, die Fläche war fest 280px → 30px Text standen außerhalb
   des Pinks auf dem hellen Seitengrund. Weiß auf Weiß: genau der Eindruck
   „abgeschnitten und falsche Schriftfarbe". Die drei anderen Labels passten
   zufällig hinein.

   Nicht mit einer größeren Zahl geflickt (die wäre beim nächsten längeren
   Label wieder zu klein), sondern die Breite trägt jetzt der Inhalt:
   width:max-content. Geparkt wird über die EIGENE Breite
   (translateX(100% - Lasche)) statt über den festen -230px-Wert, der an die
   alten 280px gekoppelt war. Damit stimmt jede Labellänge automatisch, alle
   Knöpfe bleiben gleich breit (ul = max-content, li = 100%), und die
   sichtbare Lasche im Ruhezustand bleibt 45px (Icon + Luft) wie bisher.
   white-space:nowrap bleibt bewusst stehen — siehe Begründung in style.css
   (sonst wird ein Knopf höher als die anderen). */
.flyout{
  --flyout-lasche:45px;
  right:0;
  width:max-content;
  max-width:min(92vw,420px);
}
.flyout li{ transform:translateX(calc(100% - var(--flyout-lasche))) }
.flyout li:hover,
.flyout li:focus-within{ transform:translateX(0) }
/* Hausregel: Bewegungs-Abschaltung des Systems mit wiederholen — die Regeln
   oben ersetzen den Zielwert der Transition aus style.css. */
@media (prefers-reduced-motion:reduce){
  .flyout li{ transition:none }
}

/* ── 2) Karte: diagonaler weißer Streifen nach dem Laden ───────────────────
   Die gezeichnete Karten-Andeutung (Straßenraster als Hintergrund, schräge
   Durchgangsstraße als ::before, Standortnadel als ::after) sitzt an .karte
   selbst. site.js leert beim Klick auf „Karte laden" nur die KINDER
   (innerHTML = '') und hängt den iframe ein — Hintergrund und
   Pseudo-Elemente bleiben davon unberührt und lagen danach ÜBER dem iframe:
   der weiße Diagonalstreifen (und die Nadel gleich mit).
   site.js setzt bereits .karte-aktiv; daran hängt jetzt die Abschaltung.
   Kein JS-Eingriff, die Zwei-Klick-Consent-Logik davor bleibt unangetastet. */
.karte.karte-aktiv{ background:var(--c-flaeche-alt) }
.karte.karte-aktiv::before,
.karte.karte-aktiv::after{ content:none }

/* ── 3) Navigation: LEISTUNGEN saß tiefer als die übrigen Punkte ───────────
   GEMESSEN: Textoberkante 160,3px statt 159,2px, Knopfhöhe 37px statt
   41,19px. Ursache steckt in der gemeinsamen Regel: sie setzt kein
   line-height. Die <a> erben deshalb die 1.8 vom Body (25,2px), dem <button>
   verpasst der Browser sein line-height:normal — plus appearance:auto. Die
   Grundlinien-Ausrichtung der inline-block-Elemente überträgt diesen
   Unterschied direkt in die Zeile.

   Fix an der gemeinsamen Regel: identisches line-height für <a> und
   <button>, Ausrichtung über inline-flex/align-items statt über die
   Grundlinie, Button-Eigenheiten zurückgesetzt. Das Chevron wird Flex-Kind
   (display:block) und kann die Textlage nicht mehr verschieben; sein
   Abstand kommt jetzt aus gap statt aus margin-left. line-height 1.8 ist
   genau der bisherige Wert der Links — die Kopfzeile behält ihre Höhe,
   nur der Knopf rückt auf Linie. Hover ändert weiterhin nur die Farbe,
   also kein Layout-Sprung. Die Dropdown-Mechanik bleibt unberührt. */
.nav-liste a:not(.knopf),
.unterpunkt-knopf{
  display:inline-flex;
  align-items:center;
  gap:4px;
  line-height:1.8;
  margin:0;
  -webkit-appearance:none;
  appearance:none;
}
.unterpunkt-knopf svg{ display:block; margin-left:0; flex:0 0 auto }

/* ── 4) Kontraste auf WCAG AA ──────────────────────────────────────────────
   Gemessen wurde im Browser gegen den TATSÄCHLICHEN Grund (nicht nur gegen
   Weiß wie in barrierefreiheit.py): 198 Textstellen unter dem Soll auf der
   Startseite. Die Farbwelt bleibt — korrigiert wird die Helligkeit im
   gleichen Farbton, und dort wo eine Marken-FLÄCHE erhalten bleiben soll,
   wird stattdessen die Schrift darauf dunkel (so sieht es auch das
   Design-System vor).

   --c-warm ist der Sonderfall: dieselbe Variable diente als FLÄCHE
   (Titelband, Preis-Abschnitt, Held-Grund) UND als Textfarbe (Vorzeilen,
   Adresse). Beides gleichzeitig kann nicht barrierefrei sein. Die Fläche
   behält deshalb #ceb19c, für Text gibt es zwei neue Rollen-Tokens. */
:root{
  --c-pink:#dd2f55;          /* war #f1345d — weiße Schrift darauf nur 3,90:1, jetzt 4,55:1 */
  --c-pink-hover:#cc2147;    /* muss dunkler bleiben als das neue Pink (5,42:1) */
  --c-gruen:#468356;         /* war #65bc7b (2,32:1) — trägt auch den Focus-Ring, der braucht 3:1 */
  --c-gold:#8d7151;          /* war #bf996e (2,63:1) — Team-Rollen */
  /* --c-preis-name bleibt #a28672 aus style.css */
  --t-warm:#8a6245;          /* NEU: warmer TEXT auf hellem Grund (5,37:1 auf Weiß, 4,50:1 auf #ebebeb) */
  --t-auf-warm:#3f3a36;      /* NEU: dunkler Text auf der beigen Fläche (5,56:1 auf #ceb19c) */
}

/* Warme Textstellen auf hellem Grund: Fläche unverändert, nur der Text dunkler.
   Das „GESCHLOSSEN" in den Öffnungszeiten stand auf #ebebeb bei 1,69:1. */
.vorzeile,
.faq-vorzeile,
.cta-vorzeile,
.adresse-zeile,
.zeiten-tabelle tr:nth-child(6) td,
.zeiten-tabelle tr:nth-child(7) td{ color:var(--t-warm) }

/* Titelband-h1 „Friseur Hannover" bleibt WEISS auf dem Beige — wie im
   Vorbild (--page_title_color:#ffffff) und im Design-System („72px weiß").
   Hier keine Farbregel anlegen, style.css setzt das Weiß. */
/* Preise-Abschnitt: Schrift- und Linienfarben wie im Vorbild.
   „Preise", Hinweistext, Tafel-Titel, Preise und Spaltenköpfe weiß, Vorzeile
   --c-warm-dunkel, Leistungsnamen --c-preis-name (#a28672). Die Werte stehen
   in style.css und im Block unten — hier keine Farbregel anlegen.
   Bedingung: weiße Schrift auf #ceb19c/#d9c0ae bleibt unter 3:1. */

/* Ankündigungsleiste: Orange (#f16521) auf Pink war praktisch unlesbar.
   Weiß mit Unterstreichung — als Link erkennbar, ohne neue Farbe. */
.ankuendigung a{ color:#fff; text-decoration:underline }

/* Bekannte Abweichung: die weißen Hero-Überschriften (.held-titel,
   .held-untertitel, .unterheld-inhalt h1) bleiben weiß, obwohl sie 3:1
   nicht erreichen. An den echten Bildpixeln liegt weiße Schrift bei
   2,09–3,02 im Mittel, dunkle Schrift bei 4,14–5,48 im Mittel, versagt aber
   mit 1,74–1,83 an den dunklen Bildstellen. Keine Schriftfarbe löst es also
   — nur ein Schleier über dem Foto, und der würde die helle Anmutung der
   Beige-Fotos verändern. Hier deshalb nicht nachfärben, ohne diese
   Abwägung erneut zu treffen. */

/* Bedeutungstragende Icons brauchen 3:1 gegen ihre Fläche (WCAG 1.4.11).
   Weiß auf #ceb19c waren 2,02:1 — betrifft Instagram-Knopf und das
   Aufklapp-Zeichen der geöffneten FAQ-Frage. */
.insta-icon{ color:var(--t-auf-warm) }
.faq-punkt[open] .faq-icon{ color:var(--t-auf-warm) }

/* ══════════════════════════════════════════════════════════════════════════
   Preistafeln — Schrift und Abstände kommen aus style.css (Cormorant
   21px/1.8, Leistung #a28672, Preis weiß, Spaltenköpfe 20px weiß). Im HTML
   gibt es keine Gruppentitel, keine Aufklapp-Knöpfe und kein
   data-preis-referenz; site.js Abschnitt 6 findet dann keine Knöpfe und
   steigt aus. Hier bleiben drei Zeichenfixes:
   ══════════════════════════════════════════════════════════════════════════ */

/* Luft zwischen Überschrift und Tafelkante: der margin-bottom der Überschrift
   kollabiert mit dem margin-top:70px der Tafel (darin sitzt das Kerben-Band);
   padding kollabiert nicht. */
.preis-titel{ padding-bottom:30px }

/* Naht an der Kartenoberkante: Band und Tafel liegen auf krummen Pixelwerten
   und werden einzeln gerundet — dazwischen blitzte der Grund als Haarlinie
   durch. 1px Überlappung schließt sie; das Polygon wächst mit. */
.preis-tafel::before{
  height:71px;
  clip-path: polygon(0 0, var(--zipfel-ab), 100% 0, 100% 71px, 0 71px);
}
.preis-einheit::before{ height:71px }

/* Kopfzelle „Leistung": im Original leer. Der Text bleibt für Screenreader
   und für den Editor erhalten und wird nur aus dem Sichtfeld geschoben —
   kein display:none, sonst fehlt die Spalte und der Marker wäre unerreichbar. */
.preis-mehrspaltig thead th.preis-links{
  text-indent:-9999px;
  overflow:hidden;
  white-space:nowrap;
}
html.kw-edit .preis-mehrspaltig thead th.preis-links{ text-indent:0 }

/* privacybee-Einbindung
   Platzhalter-Höhe, damit die Seite beim Nachladen des Widgets nicht
   zusammenfällt. Die Klasse kommt aus keinem Design_System — sie gehört
   allein zu den Rechtstextseiten. */
.rt__einbindung{min-block-size:12rem}

/* 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 */