/* 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;
}
/* 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;
}
.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:622px;
  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;
  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;
}
.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:#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}
}

/* ---------- 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, dadurch endete jede Karte auf ihrer Textlänge (Kristin
   tiefer als Sasha). Der weiße Textgrund füllt jetzt die Restfläche.
   Romeo 01.09.2026 */
.team-staffel{ align-items:stretch; }
.team-staffel .team-karte > .team-text{ flex:1; }

/* Vorher-Nachher-Schieber wie im Vorbild (Romeo 01.09.2026):
   Griff als dunkle Raute mit weißer Kontur statt weißer Fläche,
   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
   auf der Tafelfläche waren grau (#6e6e6e, per Screenshot gemessen — das
   Original haarmeisterei-hannover.de/#preise zeigt sie tatsächlich weiß,
   wie der übrige Tabellentext daneben schon ist). Romeo 01.09.2026 */
.preis-titel,
.preis-tabelle thead th:not(.preis-links){ color:#fff }

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

   Deshalb ist die Kurve genau EINMAL definiert (Bezier C20,5 55,35 70,70,
   als Polygonzug mit 11 Stützpunkten abgetastet) und wird an beiden 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).

   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.

   Alle Zwischenstände vorab per DOM-Style-Injection im Browser geprüft. */
.preis-tafel::before{
  left:0; width:100%; border-radius:0;
  clip-path: polygon(
    0 0,
    calc(50% - 70.0px) 0px,   calc(50% - 63.6px) 2.2px,  calc(50% - 56.5px) 5.8px,
    calc(50% - 48.9px) 10.7px, calc(50% - 41.0px) 16.7px, calc(50% - 33.1px) 23.8px,
    calc(50% - 25.4px) 31.7px, calc(50% - 18.0px) 40.4px, calc(50% - 11.1px) 49.8px,
    calc(50% - 5.1px) 59.7px,  50% 70px,                  calc(50% + 5.1px) 59.7px,
    calc(50% + 11.1px) 49.8px, calc(50% + 18.0px) 40.4px, calc(50% + 25.4px) 31.7px,
    calc(50% + 33.1px) 23.8px, calc(50% + 41.0px) 16.7px, calc(50% + 48.9px) 10.7px,
    calc(50% + 56.5px) 5.8px,  calc(50% + 63.6px) 2.2px,  calc(50% + 70.0px) 0px,
    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(
    calc(50% - 70.0px) 0px,   calc(50% - 63.6px) 2.2px,  calc(50% - 56.5px) 5.8px,
    calc(50% - 48.9px) 10.7px, calc(50% - 41.0px) 16.7px, calc(50% - 33.1px) 23.8px,
    calc(50% - 25.4px) 31.7px, calc(50% - 18.0px) 40.4px, calc(50% - 11.1px) 49.8px,
    calc(50% - 5.1px) 59.7px,  50% 70px,                  calc(50% + 5.1px) 59.7px,
    calc(50% + 11.1px) 49.8px, calc(50% + 18.0px) 40.4px, calc(50% + 25.4px) 31.7px,
    calc(50% + 33.1px) 23.8px, calc(50% + 41.0px) 16.7px, calc(50% + 48.9px) 10.7px,
    calc(50% + 56.5px) 5.8px,  calc(50% + 63.6px) 2.2px,  calc(50% + 70.0px) 0px
  );
}
/* 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. Vorher Kreisbogen (border-radius),
   dadurch lief die Zunge unten breit aus statt spitz. 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, und
   uneinheitliche Trenner wären der schlechtere Zustand. Romeo 01.09.2026 */
.wellen-trenner::before{
  left:0; width:100%; border-radius:0;
  clip-path: polygon(
    0 0,
    calc(50% - 70.0px) 0px,   calc(50% - 63.6px) 2.2px,  calc(50% - 56.5px) 5.9px,
    calc(50% - 48.9px) 10.9px, calc(50% - 41.0px) 16.9px, calc(50% - 33.1px) 24.1px,
    calc(50% - 25.4px) 32.2px, calc(50% - 18.0px) 41.0px, calc(50% - 11.1px) 50.5px,
    calc(50% - 5.1px) 60.6px,  50% 71px,                  calc(50% + 5.1px) 60.6px,
    calc(50% + 11.1px) 50.5px, calc(50% + 18.0px) 41.0px, calc(50% + 25.4px) 32.2px,
    calc(50% + 33.1px) 24.1px, calc(50% + 41.0px) 16.9px, calc(50% + 48.9px) 10.9px,
    calc(50% + 56.5px) 5.9px,  calc(50% + 63.6px) 2.2px,  calc(50% + 70.0px) 0px,
    100% 0, 100% 71px, 0 71px
  );
}
.wellen-trenner::after{ display:none }

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

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