/* =============================================================================
   Personenseiten — zweispaltig 70:30.
   Ergänzt kopf-fuss.css (dort liegen Kopf, Menü, Fuß, Knöpfe und die Variablen).

   Alle Abstände stammen aus der Skala 4/8/16/24/40/64/96 (--s1 bis --s7).
   Keine krummen Zwischenwerte.
   ============================================================================= */

/* ---------- Titelband ---------- */
/* Das Titelband bekommt dieselbe Handschrift wie der Auftakt: eine Bluete als
   Wasserzeichen im Hintergrund. Eingebunden als Maske, nicht als Bild — so bestimmt
   das CSS die Farbe, und dieselbe Datei traegt jeden Hintergrund.
   Rechts angeschnitten, weil der Text links steht. */
.kw-neu .p-titelband{position:relative;overflow:hidden;isolation:isolate;
  background:var(--bordeaux);color:#fff;padding-block:var(--s6)}
.kw-neu .p-titelband::after{content:"";position:absolute;z-index:0;pointer-events:none;
  right:-4%;top:50%;transform:translateY(-50%);
  width:min(420px,38%);aspect-ratio:918/791;
  background:#fff;opacity:.09;
  -webkit-mask-image:url('bilder/bluete-kopf.png'); mask-image:url('bilder/bluete-kopf.png');
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center}
.kw-neu .p-titelband .spalte{position:relative;z-index:1}

@media (max-width:600px){
  /* Auf schmalen Geraeten wuerde die Bluete hinter dem Titel liegen statt daneben. */
  .kw-neu .p-titelband::after{width:min(280px,52%);right:-14%;opacity:.07}
}
.kw-neu .p-titelband .ueber{display:block;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:#EFD3D8;margin-bottom:var(--s2)}
.kw-neu .p-titelband h1{font-size:clamp(28px,3vw,40px);line-height:1.2;color:#fff}
.kw-neu .p-rolle{margin-top:var(--s2);font-size:17px;color:rgba(255,255,255,.9)}

/* ---------- Titelband mit Foto ---------- */
/* Die Behandlungsseiten führen ihr Titelbild im Band statt über der Preisliste.
   Dieselbe Handschrift wie der Auftakt der Startseite: Das Foto liegt rechts und wird
   per mask-image nach links ins Bordeaux ausgeblendet — als Maske, nicht als Farbfläche
   darüber, sonst wird das Bild milchig statt zu verschwinden.
   Diese Regeln stehen NACH dem 600-px-Block oben, weil sie dessen ::after-Position
   überschreiben: bei gleicher Spezifität entscheidet die Reihenfolge. */
.kw-neu .p-titelband-bild{padding-block:var(--s7);
  min-height:clamp(300px,26vw,380px);display:flex;align-items:center}
.kw-neu .p-titelband-bild .spalte{width:100%}
.kw-neu .p-buehne{position:absolute;inset:0 0 0 auto;width:62%;z-index:0;
  overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 32%,#000 66%);
          mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 32%,#000 66%)}
.kw-neu .p-buehne img{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block}

/* Ohne Maskenunterstützung bräche das Foto hart ab. Dann beginnt es weiter rechts,
   damit die Textfläche in jedem Fall frei bleibt. */
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .kw-neu .p-buehne{width:46%}
}

/* Rechts liegt jetzt das Foto — die Blüte wandert auf die Textseite, wie im Auftakt.
   Sie dreht sich dabei sehr langsam und atmet um ein Drittel auf und wieder ab: eine
   volle Runde dauert zwei Minuten, das ist im Blick kaum als Bewegung wahrnehmbar und
   lenkt vom Text nicht ab. Drehung und Größe liegen in EINEM Keyframe-Satz — zwei
   Animationen auf derselben transform-Eigenschaft würden einander überschreiben.
   Das translateY(-50%) der Grundstellung muss in jedem Schritt mitgeführt werden,
   sonst springt die Blüte beim Start nach unten. */
.kw-neu .p-titelband-bild::after{right:auto;left:-8%;width:min(360px,32%);opacity:.10;
  animation:kwBlueteAtmen 120s linear infinite;will-change:transform}

@keyframes kwBlueteAtmen{
  0%  {transform:translateY(-50%) rotate(0deg)   scale(1)}
  50% {transform:translateY(-50%) rotate(180deg) scale(1.33)}
  100%{transform:translateY(-50%) rotate(360deg) scale(1)}
}

/* Wer Bewegung abbestellt hat, bekommt die Blüte still — in der Grundstellung. */
@media (prefers-reduced-motion:reduce){
  .kw-neu .p-titelband-bild::after{animation:none}
}

@media (max-width:900px){
  /* Gestapelt: das Foto als flaches Band über dem Text, ohne Maske. Über 62 % Breite
     läge es sonst hinter der Überschrift. */
  .kw-neu .p-titelband-bild{display:block;padding-top:0;min-height:0}
  .kw-neu .p-buehne{position:relative;inset:auto;width:100%;aspect-ratio:16/9;
    max-height:300px;margin-bottom:var(--s5);
    -webkit-mask-image:none;mask-image:none}
}

/* Auf dem Handy kein Titelfoto: Dort schiebt es Überschrift und Preise unter die
   Faltkante, ohne etwas zu erklären. Ab Tablet (768 px, iPad hochkant) ist es an.
   Die Grenze liegt unterhalb jedes iPads und oberhalb jedes Telefons.
   Geladen wird es dort trotzdem — display:none verhindert den Abruf nicht
   zuverlässig; deshalb weist `sizes` im Markup dem Handy die kleinste Fassung zu. */
@media (max-width:767px){
  .kw-neu .p-buehne{display:none}
  .kw-neu .p-titelband-bild{padding-block:var(--s6)}
}

@media (max-width:600px){
  .kw-neu .p-titelband-bild::after{left:-14%;width:min(280px,52%);opacity:.07}
}

/* ---------- Zweispaltiges Raster 70:30 ---------- */
/* Unter 900 px gestapelt — derselbe Haltepunkt wie überall auf der Website. */
.kw-neu .p-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
@media (min-width:900px){
  .kw-neu .p-raster{grid-template-columns:minmax(0,70fr) minmax(0,30fr);
    gap:var(--s6);align-items:start}
}

/* ---------- Linke Spalte ---------- */
/* Die Praxisaufnahme (.p-raum) stand hier bis zum 2026-08-19 über der Vorstellung.
   Sie liegt jetzt im Titelband — die Regel dazu ist mit ihr entfallen. */

/* Porträt und Einleitung nebeneinander, ab 600 px. */
.kw-neu .p-vorstellung{margin-top:var(--s5);display:grid;
  grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:start}
@media (min-width:600px){
  .kw-neu .p-vorstellung{grid-template-columns:220px minmax(0,1fr);gap:var(--s5)}
}
/* Ohne die Aufnahme darüber ist die Vorstellung das erste Element der Spalte — der
   Abstand nach oben muss weg, sonst beginnt sie tiefer als die Kontaktspalte daneben. */
.kw-neu .p-haupt > .p-vorstellung:first-child{margin-top:0}
.kw-neu .p-portraet{width:100%;max-width:220px;aspect-ratio:3/4;object-fit:cover;
  border:8px solid #fff;box-shadow:0 12px 30px rgba(0,0,0,.14);border-radius:var(--radius)}
.kw-neu .p-vorstellung p{font-size:17px;line-height:1.7;color:var(--text)}

/* ---------- Werdegang: native Aufklapp-Abschnitte ---------- */
.kw-neu .p-werdegang{margin-top:var(--s6);display:flex;flex-direction:column;gap:var(--s2)}
.kw-neu .p-werdegang details{background:var(--creme-warm);border-radius:var(--radius);
  border:1px solid var(--linie)}
.kw-neu .p-werdegang summary{
  /* Der Pfeil wird selbst gezeichnet, damit er auf allen Systemen gleich aussieht. */
  list-style:none;cursor:pointer;padding:var(--s3) var(--s4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font-family:'Marcellus',Georgia,serif;font-size:19px;color:var(--bordeaux);
  min-height:56px;transition:background .3s var(--aus)}
.kw-neu .p-werdegang summary::-webkit-details-marker{display:none}
.kw-neu .p-werdegang summary::after{content:"";flex:0 0 auto;width:10px;height:10px;
  border-right:2px solid var(--oliv-dunkel);border-bottom:2px solid var(--oliv-dunkel);
  transform:rotate(45deg);margin-top:-4px;transition:transform .3s var(--aus)}
.kw-neu .p-werdegang details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.kw-neu .p-werdegang summary:hover{background:#fff}
.kw-neu .p-werdegang summary:focus-visible{outline:3px solid var(--oliv-dunkel);outline-offset:2px}
.kw-neu .p-werdegang ul{list-style:none;margin:0;
  padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.kw-neu .p-werdegang li{position:relative;padding-left:var(--s4);
  font-size:15px;line-height:1.6;color:var(--text)}
.kw-neu .p-werdegang li::before{content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--oliv)}
.kw-neu .p-schluss{margin-top:var(--s5);font-family:'Marcellus',Georgia,serif;
  font-size:18px;line-height:1.5;color:var(--bordeaux);
  border-left:4px solid var(--oliv);padding-left:var(--s3)}

/* ---------- Rechte Spalte: Kontakt ---------- */
/* Klebt beim Scrollen mit, solange rechts Platz ist. 100 px Abstand nach oben,
   damit sie nicht unter der Kopfleiste (85 px) verschwindet. */
.kw-neu .p-kontakt{background:var(--creme-warm);border:1px solid var(--linie);
  border-radius:var(--radius);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s4)}
@media (min-width:900px){
  /* 96 px statt 100 px — Kopfhoehe 93,2 px, damit bleibt Luft und der Wert
   liegt auf der Skala. */
  .kw-neu .p-kontakt{position:sticky;top:96px}
}
/* Kleine Bilderschau oben in der Kontaktspalte. Feste Hoehe ueber das Format 3:4,
   damit beim Wechsel nichts springt. */
/* Unter 900 px steht die Kontaktspalte unter dem Text und waere ueber die volle
   Breite 855 px hoch geworden. Begrenzt und mittig. */
.kw-neu .p-schau{position:relative;aspect-ratio:3/4;overflow:hidden;
  max-width:320px;margin-inline:auto;width:100%;
  border-radius:var(--radius);box-shadow:0 10px 26px rgba(0,0,0,.18)}
.kw-neu .p-schau-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s var(--aus)}
.kw-neu .p-schau-bild.an{opacity:1}
.kw-neu .p-schau-punkte{position:absolute;right:var(--s2);bottom:var(--s2);z-index:2;
  display:flex;gap:var(--s1)}
.kw-neu .p-schau-punkte span{width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.4)}
.kw-neu .p-schau-punkte span.an{background:#fff}

/* Logo in Schwarzweiss — in der ruhigen Kontaktspalte soll nichts mit der Marke
   konkurrieren; die Farbe traegt der Termin-Knopf. */
.kw-neu .p-kontakt-logo{width:100%;max-width:220px;height:auto;margin-inline:auto;
  filter:grayscale(1);opacity:.85}

/* Verweis auf Instagram */
.kw-neu .p-social{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  padding-top:var(--s3);border-top:1px solid var(--linie);text-align:center}
.kw-neu .p-social > span{font-size:13px;color:var(--text-leise)}
.kw-neu .p-instagram{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--s2);min-height:44px;padding:var(--s2) var(--s3);border-radius:var(--radius);
  color:var(--bordeaux);text-decoration:none;font-size:14px;letter-spacing:.06em;
  transition:background .3s var(--aus),color .3s var(--aus)}
.kw-neu .p-instagram:hover{background:#fff;color:var(--bordeaux-dunkel)}
.kw-neu .p-instagram:focus-visible{outline:3px solid var(--oliv-dunkel);outline-offset:2px}
/* Der Bezeichner stand 20 px von seinem eigenen Wert entfernt, aber nur 16 px vom
   naechsten Block — die vier Datenpaare lasen sich dadurch als acht gleichrangige
   Zeilen. Jetzt eng am eigenen Wert (4 px), deutlich zum naechsten Paar (24 px). */
.kw-neu .p-daten{display:flex;flex-direction:column;gap:0;font-size:15px}
.kw-neu .p-daten dd + dt{margin-top:var(--s4)}
.kw-neu .p-daten dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oliv-dunkel);margin-bottom:var(--s1)}
.kw-neu .p-daten dd{margin:0;line-height:1.6;color:var(--text)}
/* Ohne Unterstrich — er zerschneidet die Zeile und wirkt unruhig. Erkennbar bleiben
   die Verweise durch Farbe und Unterstrich erst beim Ueberfahren. */
.kw-neu .p-daten a{color:var(--bordeaux);text-decoration:none}
.kw-neu .p-daten a:hover{color:var(--bordeaux-dunkel);text-decoration:underline}
/* Innenabstand kommt aus .knopf (16/24). Nur die Breite wird hier gesetzt. */
.kw-neu .p-kontakt-knopf{width:100%}

@media (max-width:600px){
  .kw-neu .p-titelband{padding-block:var(--s5)}
  .kw-neu .p-werdegang summary{font-size:17px;padding:var(--s3)}
  .kw-neu .p-werdegang ul{padding:0 var(--s3) var(--s3)}
}


/* ---------- Team-Übersicht ----------
   Zwei gleich breite Kacheln nebeneinander, gestapelt unter 900 px — derselbe
   Haltepunkt wie überall. Die Bilder sind Panoramen im Format 690x252 (2,74:1);
   das Seitenverhältnis wird übernommen, damit nichts beschnitten wird. */
.kw-neu .t-raster{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5)}
@media (min-width:900px){
  .kw-neu .t-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
}
.kw-neu .t-kachel{display:flex;flex-direction:column;text-decoration:none;
  background:var(--creme-warm);border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--aus),box-shadow .4s var(--aus),border-color .4s var(--aus)}
.kw-neu .t-kachel:hover{transform:translateY(-4px);border-color:transparent;
  box-shadow:0 18px 40px rgba(0,0,0,.12)}
.kw-neu .t-kachel:focus-visible{outline:3px solid var(--oliv-dunkel);outline-offset:3px}
.kw-neu .t-bild{aspect-ratio:690/252;overflow:hidden;background:var(--creme)}
.kw-neu .t-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--aus)}
.kw-neu .t-kachel:hover .t-bild img{transform:scale(1.04)}
.kw-neu .t-text{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s1);flex:1}
.kw-neu .t-text h2{font-size:24px;line-height:1.3;color:var(--bordeaux)}
.kw-neu .t-text p{font-size:15px;color:var(--text-leise)}
/* "Zum Werdegang" sitzt unten bündig, damit beide Kacheln gleich wirken. */
.kw-neu .t-mehr{margin-top:auto;padding-top:var(--s3);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--oliv-dunkel);font-weight:600}
.kw-neu .t-kachel:hover .t-mehr{color:var(--bordeaux)}


/* ---------- Behandlungsübersicht einer Kategorie ----------
   Preisliste statt Bilderkarten: Die Produkte teilen sich das Bild ihrer Kategorie,
   in jeder Karte wiederholt trägt es nichts bei. Das Motiv steht deshalb einmal oben,
   darunter eine ruhige Liste, die von 2 bis 28 Einträgen gleich gut trägt. */

/* Kein erzwungenes Seitenverhaeltnis, nur eine Hoehenbegrenzung.
   Die Kopfbilder haben unterschiedliche Formate: das BABOR-Bild ist ein Banner mit
   Logo (2,74:1), die Gutschein-Grafik sogar 3:1, die uebrigen 3:2. Ein festes 3:2
   mit object-fit:cover hat davon zwei angeschnitten — bei der Gutschein-Grafik
   fielen 49 % der Breite weg, beim BABOR-Banner waere das Logo betroffen.
   max-height greift dagegen erst, wenn ein Bild wirklich zu hoch wird: Ein
   Hochformat (900x1200) waere bei rund 1060 px Spaltenbreite 1413 px hoch geworden
   und haette die Seite gesprengt. 3:2 ergibt bei derselben Breite 707 px und bleibt
   damit unangetastet — Voraussetzung dafuer, dass das Titelbild gefahrlos im
   WordPress-Backend getauscht werden kann. */
.kw-neu .l-kopfbild{width:100%;height:auto;display:block;
  max-height:720px;object-fit:cover;object-position:center;
  border:12px solid #fff;box-shadow:0 18px 46px rgba(0,0,0,.16);
  margin-bottom:var(--s5)}

/* Einleitungstext der Behandlungsart */
.kw-neu .l-einleitung{margin-bottom:var(--s6);max-width:62ch;
  display:flex;flex-direction:column;gap:var(--s3)}
.kw-neu .l-einleitung p{font-size:16px;line-height:1.7;color:var(--text);margin:0}
.kw-neu .l-einleitung h2,
.kw-neu .l-einleitung h3{font-family:'Marcellus',Georgia,serif;font-weight:400;
  font-size:22px;line-height:1.3;color:var(--bordeaux);margin:0}
.kw-neu .l-einleitung ul{margin:0;padding-left:var(--s4);
  display:flex;flex-direction:column;gap:var(--s1)}
.kw-neu .l-einleitung li{font-size:16px;line-height:1.6;color:var(--text)}
.kw-neu .l-einleitung a{color:var(--bordeaux)}

.kw-neu .l-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}

/* Jede Zeile atmet: 24 px oben und unten, dazu 40 px Abstand zum Preis.
   Nichts stößt an eine Linie an — die Trennlinie hat auf beiden Seiten Luft. */
.kw-neu .l-zeile{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s5);padding:var(--s4) var(--s2);border-bottom:1px solid var(--linie);
  transition:background .3s var(--aus)}
.kw-neu .l-zeile:hover{background:var(--creme-warm)}
.kw-neu .l-links{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.kw-neu .l-rechts{flex:0 0 auto;padding-top:2px}
.kw-neu .l-name{font-family:'Marcellus',Georgia,serif;font-size:18px;line-height:1.4;
  color:var(--bordeaux)}
.kw-neu .l-dauer{font-size:13px;letter-spacing:.06em;color:var(--oliv-dunkel)}
.kw-neu .l-text{margin-top:var(--s2);max-width:62ch;
  display:flex;flex-direction:column;gap:var(--s2)}
.kw-neu .l-text p{font-size:15px;line-height:1.65;color:var(--text-leise);margin:0}
.kw-neu .l-preis{font-size:17px;font-weight:600;color:var(--oliv-dunkel);white-space:nowrap}
.kw-neu .l-preis .woocommerce-Price-amount{font-size:inherit;color:inherit}


.kw-neu .l-hinweis{margin-top:var(--s6);padding:var(--s4);background:var(--creme);
  border-radius:var(--radius);display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:var(--s4)}
.kw-neu .l-hinweis p{font-size:15px;color:var(--text);max-width:56ch;margin:0}

@media (max-width:600px){
  .kw-neu .l-kopfbild{border-width:8px;margin-bottom:var(--s5)}
  .kw-neu .l-name{font-size:16px}
  /* Auf schmalen Geräten Preis unter den Text, mit eigenem Abstand. */
  .kw-neu .l-zeile{flex-direction:column;gap:var(--s2);padding:var(--s4) 0}
  .kw-neu .l-rechts{padding-top:0}
  .kw-neu .l-hinweis{flex-direction:column;align-items:flex-start}
  .kw-neu .l-hinweis .knopf{width:100%}
}


/* ---------- Kontaktformular ---------- */
/* Abstände im Formular — VERBINDLICHE REGEL: nichts klebt aneinander, alles atmet.
   Ohne diese Regel lagen die Beschriftungen mit 0 px direkt unter dem Feld darüber und
   wirkten, als gehörten sie noch dazu. Das `gap` der Kurzform wurde von fremdem CSS
   überschrieben (gemessen: "normal"), deshalb hier mit voller Spezifität und !important.
   40 px zwischen den Feldgruppen, 8 px zwischen Beschriftung und ihrem eigenen Feld:
   so gehört die Beschriftung sichtbar zu dem, was unter ihr steht. */
.kw-neu form.k-formular{display:flex!important;flex-direction:column!important;
  gap:var(--s5)!important}
.kw-neu form.k-formular > *{margin:0}
.kw-neu .k-feld{display:flex;flex-direction:column;gap:var(--s2)}
.kw-neu .k-feld label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--oliv-dunkel)}
/* !important, weil das Elementor-Kit jedem Eingabefeld eigene Rahmen und Polster gibt. */
.kw-neu .k-feld input,
.kw-neu .k-feld select,
.kw-neu .k-feld textarea{
  font-family:inherit!important;font-size:16px!important;color:var(--text)!important;
  background:#fff!important;border:1px solid var(--linie)!important;
  border-radius:var(--radius)!important;padding:16px!important;
  min-height:56px;width:100%;transition:border-color .3s var(--aus),box-shadow .3s var(--aus)}
.kw-neu .k-feld textarea{min-height:160px;resize:vertical;line-height:1.6}
.kw-neu .k-feld input:focus,
.kw-neu .k-feld select:focus,
.kw-neu .k-feld textarea{outline:none}
.kw-neu .k-feld input:focus-visible,
.kw-neu .k-feld select:focus-visible,
.kw-neu .k-feld textarea:focus-visible{
  border-color:var(--oliv-dunkel)!important;
  box-shadow:0 0 0 3px rgba(141,158,90,.25);outline:none}
.kw-neu .k-feld input::placeholder,
.kw-neu .k-feld textarea::placeholder{color:#9A9A9A}

/* Der Honigtopf muss für Menschen unsichtbar sein, für Maschinen aber ausfüllbar
   bleiben — deshalb aus dem Bild geschoben statt display:none. */
.kw-neu .k-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Der Knopf braucht oben und unten Freiraum — er darf an nichts anstoßen.
   Gemessen waren oben nur 16 px, weil der unsichtbare Honigtopf als Flex-Kind
   dazwischenliegt und den Abstand aufbraucht. Deshalb hier ausdrücklich 40 px. */
.kw-neu .k-senden{align-self:flex-start;min-width:220px;
  margin-top:var(--s5);margin-bottom:var(--s3)}
@media (max-width:600px){ .kw-neu .k-senden{width:100%} }
.kw-neu .k-hinweis{font-size:13px;line-height:1.6;color:var(--text-leise)}
.kw-neu .k-hinweis a{color:var(--bordeaux);text-decoration:none}
.kw-neu .k-hinweis a:hover{text-decoration:underline}

/* Rückmeldung nach dem Absenden */
.kw-neu .k-meldung{padding:var(--s3) var(--s4);border-radius:var(--radius);
  font-size:15px;line-height:1.6;border-left:4px solid}
.kw-neu .k-meldung--ok{background:#F1F4E9;border-color:var(--oliv);color:#3F4A22}
.kw-neu .k-meldung--fehler{background:#FBEEF0;border-color:var(--bordeaux);color:var(--bordeaux)}


/* ---------- Behandlungsmenü in der Kontaktspalte ----------
   Öffnet beim Überfahren und beim Anklicken. Auf Tastatur und Touch gibt es kein
   Überfahren — deshalb ist der Klick gleichwertig und nicht bloß Zugabe. */
.kw-neu .b-menue{position:relative}
.kw-neu .b-knopf{width:100%;min-height:48px;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s2);
  padding:var(--s2) var(--s3);border:1px solid var(--linie);border-radius:var(--radius);
  background:#fff;color:var(--bordeaux);cursor:pointer;font-family:inherit;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  transition:background .3s var(--aus),border-color .3s var(--aus)}
.kw-neu .b-knopf:hover{background:var(--creme);border-color:var(--oliv)}
.kw-neu .b-knopf:focus-visible{outline:3px solid var(--oliv-dunkel);outline-offset:2px}
.kw-neu .b-knopf svg{flex:0 0 auto;transition:transform .3s var(--aus)}
.kw-neu .b-menue.auf .b-knopf svg{transform:rotate(180deg)}

.kw-neu .b-liste{list-style:none;margin:0;padding:var(--s1);
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;
  background:#fff;border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:0 14px 34px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--aus),transform .25s var(--aus),visibility .25s}
.kw-neu .b-menue.auf .b-liste{opacity:1;visibility:visible;transform:none}
.kw-neu .b-liste a{display:block;padding:var(--s2) var(--s3);border-radius:var(--radius);
  font-size:15px;color:var(--text);text-decoration:none;
  transition:background .2s var(--aus),color .2s var(--aus)}
.kw-neu .b-liste a:hover{background:var(--creme);color:var(--bordeaux)}
.kw-neu .b-liste a:focus-visible{outline:2px solid var(--oliv-dunkel);outline-offset:-2px}
/* Die Seite, auf der man gerade steht, wird markiert statt verlinkt wirkend. */
.kw-neu .b-liste a.b-hier{color:var(--bordeaux);font-weight:600;background:var(--creme-warm)}

/* Die beiden REVIDERM-Erklärseiten sind keine Behandlungsart. Eine feine Linie mit
   Luft auf beiden Seiten setzt sie ab — die Linie liegt eingerückt, sie stößt nicht
   an die Kanten der Liste. */
.kw-neu .b-liste .b-trenner{margin-top:var(--s3);position:relative}
.kw-neu .b-liste .b-trenner::before{content:"";position:absolute;height:1px;
  top:calc(var(--s2) * -1);left:var(--s3);right:var(--s3);background:var(--linie)}

@media (prefers-reduced-motion:reduce){
  .kw-neu .b-liste{transition:none}
  .kw-neu .b-knopf svg{transition:none}
}


/* ---------- Behandlungsübersicht ----------
   Die beiden REVIDERM-Knöpfe stehen oben und getrennt: Sie erklären ein Verfahren,
   sie sind keine Behandlungsart — zwischen den Kacheln wären sie eine Falle. */
.kw-neu .u-reiter-zeile{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s6)}
.kw-neu .u-reiter{flex:1 1 auto;min-width:240px;text-align:center;
  border:1.5px solid var(--oliv);color:var(--bordeaux);background:#fff}
.kw-neu .u-reiter:hover{background:var(--creme);border-color:var(--oliv-dunkel);
  color:var(--bordeaux-dunkel)}

/* Kacheln: zwei Spalten ab 600 px, drei ab 1100 px. Nie eine allein in der
   letzten Zeile stehen lassen — bei elf Einträgen geht das mit 2 und 3 auf. */
.kw-neu .u-raster{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){ .kw-neu .u-raster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .kw-neu .u-raster{grid-template-columns:repeat(3,minmax(0,1fr))} }

.kw-neu .u-kachel{display:flex;flex-direction:column;text-decoration:none;
  background:var(--creme-warm);border:1px solid var(--linie);border-radius:var(--radius);
  overflow:hidden;
  transition:transform .4s var(--aus),box-shadow .4s var(--aus),border-color .4s var(--aus)}
.kw-neu .u-kachel:hover{transform:translateY(-4px);border-color:transparent;
  box-shadow:0 18px 40px rgba(0,0,0,.12)}
.kw-neu .u-kachel:focus-visible{outline:3px solid var(--oliv-dunkel);outline-offset:3px}
.kw-neu .u-bild{aspect-ratio:4/3;overflow:hidden;background:var(--creme)}
.kw-neu .u-bild img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--aus)}
.kw-neu .u-kachel:hover .u-bild img{transform:scale(1.05)}
/* Text mit Innenabstand auf allen Seiten — nichts klebt an der Kante. */
.kw-neu .u-text{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);flex:1;
  align-items:flex-start}
/* Lange Wörter wie „Gesichtsbehandlungen" passen in einer schmalen Kachel nicht in
   eine Zeile und wurden abgeschnitten. Kleinere Schrift, Silbentrennung und ein
   erlaubter Umbruch innerhalb des Wortes lösen das, ohne die Kachel zu sprengen. */
.kw-neu .u-text h3{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:17px;
  line-height:1.35;color:var(--bordeaux);margin:0;
  hyphens:auto;overflow-wrap:break-word;-webkit-hyphens:auto}
/* Gleiche Texthöhe in allen Kacheln, damit die Knöpfe auf einer Linie sitzen. */
.kw-neu .u-text h3{min-height:2.7em;display:flex;align-items:flex-start}
/* "Weiter" sitzt unten bündig, damit alle Kacheln gleich wirken. */
.kw-neu .u-mehr{margin-top:auto;display:inline-flex;align-items:center;min-height:40px;
  padding:var(--s2) var(--s3);border-radius:var(--radius);
  background:var(--oliv);color:#fff;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;transition:background .3s var(--aus)}
.kw-neu .u-kachel:hover .u-mehr{background:var(--oliv-dunkel)}


/* ---------- Informationsseiten ---------- */
.kw-neu .i-text{margin-bottom:var(--s6)}

/* Video mit Vorschaltbild: Vor dem Klick geht keine Anfrage an Google. */
.kw-neu .i-video{margin:0 0 var(--s6);display:flex;flex-direction:column;gap:var(--s2)}
.kw-neu .i-video-start{position:relative;width:100%;aspect-ratio:16/9;border:0;
  border-radius:var(--radius);cursor:pointer;
  background:linear-gradient(135deg,var(--bordeaux),var(--bordeaux-dunkel));
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);font-family:inherit;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;transition:filter .3s var(--aus)}
.kw-neu .i-video-start:hover{filter:brightness(1.12)}
.kw-neu .i-video-start:focus-visible{outline:3px solid var(--oliv);outline-offset:3px}
.kw-neu .i-video-zeichen{width:76px;height:76px;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);display:flex;align-items:center;
  justify-content:center;padding-left:5px}
.kw-neu .i-video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius)}
.kw-neu .i-video figcaption{font-size:13px;line-height:1.6;color:var(--text-leise)}
.kw-neu .i-weiter{margin:0}


/* ---------- Medien-Galerie ---------- */
.kw-neu .m-raster{display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
@media (max-width:479px){ .kw-neu .m-raster{grid-template-columns:repeat(2,minmax(0,1fr))} }
.kw-neu .m-kachel{padding:0;border:0;background:var(--creme);cursor:pointer;
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transition:transform .35s var(--aus),box-shadow .35s var(--aus)}
.kw-neu .m-kachel img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--aus)}
.kw-neu .m-kachel:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.kw-neu .m-kachel:hover img{transform:scale(1.05)}
.kw-neu .m-kachel:focus-visible{outline:3px solid var(--oliv-dunkel);outline-offset:3px}

/* Großansicht: weichgezeichneter Hintergrund, damit das Bild freisteht. */
.kw-neu .m-gross{position:fixed;inset:0;z-index:1200;display:flex;
  align-items:center;justify-content:center;gap:var(--s3);padding:var(--s5) var(--s4);
  background:rgba(90,13,25,.86);
  -webkit-backdrop-filter:blur(22px) saturate(120%);backdrop-filter:blur(22px) saturate(120%);
  opacity:0;transition:opacity .3s var(--aus)}
.kw-neu .m-gross.offen{opacity:1}
.kw-neu .m-buehne{margin:0;display:flex;align-items:center;justify-content:center;
  max-width:min(90vw,1100px);max-height:86vh}
.kw-neu .m-buehne img{max-width:100%;max-height:86vh;object-fit:contain;
  border:10px solid #fff;border-radius:var(--radius);
  box-shadow:0 30px 70px rgba(0,0,0,.55)}
.kw-neu .m-pfeil{flex:0 0 auto;width:56px;height:56px;border:0;border-radius:50%;
  padding:0;cursor:pointer;background:rgba(255,255,255,.92);color:var(--bordeaux);
  font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  transition:transform .3s var(--aus),background .3s var(--aus)}
.kw-neu .m-pfeil::before{content:attr(data-zeichen);display:block;margin-top:-4px}
.kw-neu .m-pfeil:hover{transform:scale(1.08);background:#fff}
.kw-neu .m-pfeil:focus-visible{outline:3px solid #fff;outline-offset:3px}
.kw-neu .m-zu{position:fixed;top:var(--s3);right:var(--s3);z-index:2;
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:var(--bordeaux);color:#fff;font-size:32px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.4);transition:transform .3s var(--aus)}
.kw-neu .m-zu:hover{transform:rotate(90deg)}
.kw-neu .m-zu:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:600px){
  .kw-neu .m-gross{padding:var(--s4) var(--s2);gap:var(--s2)}
  .kw-neu .m-pfeil{width:44px;height:44px;font-size:22px}
  .kw-neu .m-buehne img{border-width:6px}
}


/* ---------- Rechtstexte ----------
   Einspaltig und auf 70 Zeichen Zeilenlänge begrenzt: Diese Seiten werden gelesen,
   nicht überflogen. Großzügige Abstände zwischen den Abschnitten. */
.kw-neu .r-text{max-width:70ch;display:flex;flex-direction:column;gap:var(--s4)}
.kw-neu .r-text p{font-size:16px;line-height:1.75;color:var(--text);margin:0}
.kw-neu .r-text h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:24px;
  line-height:1.3;color:var(--bordeaux);margin:var(--s5) 0 0}
.kw-neu .r-text h3,
.kw-neu .r-text h4{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:19px;
  line-height:1.35;color:var(--bordeaux);margin:var(--s4) 0 0}
.kw-neu .r-text ul,
.kw-neu .r-text ol{margin:0;padding-left:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2)}
.kw-neu .r-text li{font-size:16px;line-height:1.7;color:var(--text)}
.kw-neu .r-text a{color:var(--bordeaux);text-decoration:none}
.kw-neu .r-text a:hover{text-decoration:underline}
.kw-neu .r-text strong{font-weight:600}
.kw-neu .r-text table{width:100%;border-collapse:collapse;font-size:15px}
.kw-neu .r-text td,.kw-neu .r-text th{padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}

/* Transparenzhinweis zu KI-Inhalten — abgesetzt, damit er auffindbar ist. */
.kw-neu .r-ki{max-width:70ch;margin-top:var(--s7);padding:var(--s5);
  background:var(--creme-warm);border-left:4px solid var(--oliv);
  border-radius:var(--radius);display:flex;flex-direction:column;gap:var(--s3)}
.kw-neu .r-ki h2{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:22px;
  color:var(--bordeaux);margin:0}
.kw-neu .r-ki-norm{font-size:13px;letter-spacing:.04em;color:var(--oliv-dunkel);margin:0}
.kw-neu .r-ki p{font-size:15px;line-height:1.7;color:var(--text);margin:0}

/* =============================================================================
   Suche, Fehlerseite und Archive

   Eigene Vorlagen seit dem Ausbau von Elementor (404.php, search.php, archive.php).
   Bewusst schmal gesetzt: es sind Listen, keine Gestaltungsflächen.
   ============================================================================= */

.kw-neu .s-schmal{max-width:760px}

.kw-neu .s-suche{margin-bottom:var(--s6)}
.kw-neu .s-suche label{display:block;margin-bottom:var(--s2);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.kw-neu .s-suche-zeile{display:flex;flex-wrap:wrap;gap:var(--s2)}
.kw-neu .s-suche input[type=search]{flex:1 1 220px;min-height:52px;padding:0 var(--s3);
  border:1px solid var(--linie);border-radius:var(--radius);background:#fff;
  color:var(--text);font-family:inherit;font-size:15px}
.kw-neu .s-suche input[type=search]:focus-visible{outline:2px solid var(--bordeaux);
  outline-offset:2px}
.kw-neu .s-suche button{flex:0 0 auto;min-height:52px;border:0;cursor:pointer;
  font-family:inherit}

.kw-neu .s-titel{font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:21px;
  color:var(--bordeaux);margin-bottom:var(--s3)}

.kw-neu .s-wege,
.kw-neu .s-treffer{list-style:none;padding:0;margin:0;
  border-top:1px solid var(--linie)}
.kw-neu .s-wege li,
.kw-neu .s-treffer li{border-bottom:1px solid var(--linie);padding-block:var(--s3)}
.kw-neu .s-wege a,
.kw-neu .s-treffer > li > a{display:inline-flex;align-items:center;min-height:44px;
  font-family:'Marcellus',Georgia,serif;font-size:18px;color:var(--bordeaux);
  text-decoration:none}
.kw-neu .s-wege a:hover,
.kw-neu .s-treffer > li > a:hover{text-decoration:underline}
.kw-neu .s-treffer li p{margin-top:var(--s1);font-size:14.5px;line-height:1.7;
  color:var(--text-leise)}

.kw-neu .s-leer{font-size:16px;line-height:1.8;color:var(--text)}
.kw-neu .s-leer a{color:var(--bordeaux)}

.kw-neu .s-blaettern{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.kw-neu .s-blaettern .page-numbers{display:inline-flex;align-items:center;
  justify-content:center;min-width:44px;min-height:44px;padding:0 var(--s2);
  border:1px solid var(--linie);border-radius:var(--radius);
  color:var(--text);text-decoration:none;font-size:14px}
.kw-neu .s-blaettern .page-numbers:hover{border-color:var(--bordeaux);color:var(--bordeaux)}
.kw-neu .s-blaettern .page-numbers.current{background:var(--bordeaux);border-color:var(--bordeaux);
  color:#fff}

/* Hinweis auf den Buchungsweg bei den nicht kaufbaren Behandlungen. */
.kw-neu .g-nicht-kaufbar{font-size:14.5px;line-height:1.7;color:var(--text-leise)}
.kw-neu .g-nicht-kaufbar a{color:var(--bordeaux);white-space:nowrap}


/* =============================================================================
   Teamseiten — Umschalter, Steckbrief-Porträt, Aufbau beim Laden, große Blüte
   (2026-08-19)
   ============================================================================= */

/* ---------- Umschalter zwischen den Teamseiten ---------- */
/* Steht über dem Behandlungsmenü und trägt die Seite, auf der man gerade steht, als
   zweite Zeile im Knopf — so ist ohne Aufklappen erkennbar, wo man ist. */
.kw-neu .b-menue-team .b-knopf-text{display:flex;flex-direction:column;
  align-items:flex-start;gap:2px;text-align:left}
.kw-neu .b-menue-team .b-knopf-jetzt{font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--text-leise)}
.kw-neu .b-menue-team .b-knopf{min-height:60px}

/* Das aufgeklappte Menü muss über seinen Nachbarn liegen — und zwar über dem MENÜ
   selbst, nicht nur über der Liste. Grund: Der Aufbau beim Laden legt auf jedes Kind
   der Kontaktspalte eine Animation, und eine Animation auf opacity erzeugt einen
   eigenen Stapelkontext. Der z-index 20 der Liste wirkt dann nur INNERHALB ihres
   Menüs; das nachfolgende Geschwisterelement liegt trotzdem darüber. Gemessen: Die
   offene Teamliste reichte bis 813 px, ab 747 px fing die Bilderschau die Klicks ab. */
.kw-neu .p-kontakt .b-menue{z-index:1}
.kw-neu .p-kontakt .b-menue.auf{z-index:30}

/* ---------- Porträt im Steckbrief-Winkel ---------- */
/* Drei Grad nach links, wie eine aufgelegte Fotokarte. Der Winkel wird in JEDEM
   Zustand mitgeführt — auch in den Keyframes des Aufbaus, sonst richtet sich das
   Bild am Ende der Animation gerade auf. */
.kw-neu .p-portraet{transform:rotate(-3deg)}

/* ---------- Aufbau beim Laden ---------- */
/* Die Seite baut sich einmal beim Laden auf, gestaffelt von oben nach unten.
   Bewusst reines CSS: Zwei frühere JavaScript-Fassungen haben Elemente auf
   opacity 0 stehen lassen — die Seiten waren faktisch leer. Hier steht opacity 0
   AUSSCHLIESSLICH im Keyframe. Läuft die Animation aus irgendeinem Grund nicht,
   ist alles normal sichtbar; ein Steckenbleiben im unsichtbaren Zustand kann es
   nicht geben. */
@media (prefers-reduced-motion:no-preference){
  .kw-team-seite .p-titelband .spalte > *,
  .kw-team-seite .p-vorstellung,
  .kw-team-seite .p-werdegang details,
  .kw-team-seite .p-schluss,
  .kw-team-seite .p-kontakt > *,
  .kw-team-seite .t-kachel,
  .kw-team-seite .kopfzeile,
  .kw-team-seite .raster > .karte{
    animation:kwAnkunft .9s cubic-bezier(.22,.9,.3,1) both;
    animation-delay:calc(var(--takt,0) * .09s)}

  /* Fotos kommen weich aus der Unschärfe. Der Winkel des Porträts bleibt dabei
     erhalten — deshalb ein eigener Keyframe-Satz statt des allgemeinen. */
  .kw-team-seite .p-buehne img,
  .kw-team-seite .t-bild img{animation:kwSchaerfe 1.4s ease-out both;animation-delay:.15s}
  .kw-team-seite .p-portraet{animation:kwSchaerfeSchraeg 1.4s ease-out both;animation-delay:.35s}

  /* Die Staffelung: je weiter unten, desto später. */
  .kw-team-seite .p-titelband .spalte > *:nth-child(1){--takt:0}
  .kw-team-seite .p-titelband .spalte > *:nth-child(2){--takt:1}
  .kw-team-seite .p-titelband .spalte > *:nth-child(3){--takt:2}
  .kw-team-seite .p-vorstellung{--takt:3}
  .kw-team-seite .p-werdegang details:nth-of-type(1){--takt:4}
  .kw-team-seite .p-werdegang details:nth-of-type(2){--takt:5}
  .kw-team-seite .p-werdegang details:nth-of-type(3){--takt:6}
  .kw-team-seite .p-werdegang details:nth-of-type(4){--takt:7}
  .kw-team-seite .p-werdegang details:nth-of-type(5){--takt:8}
  .kw-team-seite .p-werdegang details:nth-of-type(6){--takt:9}
  .kw-team-seite .p-schluss{--takt:10}
  .kw-team-seite .t-kachel:nth-child(1){--takt:3}
  .kw-team-seite .t-kachel:nth-child(2){--takt:4}
  .kw-team-seite .p-kontakt > *:nth-child(1){--takt:3}
  .kw-team-seite .p-kontakt > *:nth-child(2){--takt:4}
  .kw-team-seite .p-kontakt > *:nth-child(3){--takt:5}
  .kw-team-seite .p-kontakt > *:nth-child(4){--takt:6}
  .kw-team-seite .p-kontakt > *:nth-child(5){--takt:7}
  .kw-team-seite .p-kontakt > *:nth-child(6){--takt:8}
}

@keyframes kwAnkunft{
  from{opacity:0;transform:translateY(26px)}
  to  {opacity:1;transform:none}
}
@keyframes kwSchaerfe{
  from{opacity:0;filter:blur(16px);transform:scale(1.04)}
  60% {opacity:1}
  to  {opacity:1;filter:blur(0);transform:none}
}
@keyframes kwSchaerfeSchraeg{
  from{opacity:0;filter:blur(16px);transform:rotate(-3deg) scale(1.04)}
  60% {opacity:1}
  to  {opacity:1;filter:blur(0);transform:rotate(-3deg)}
}

/* ---------- Die große Blüte hinter dem Porträt ---------- */
/* Erscheint als Letztes, schwach und im Hintergrund: eine Strichzeichnung in nahezu
   voller Höhe des Bildbereichs, oben über die Kante des Fotos hinaus in die weiße
   Fläche darüber — bis etwa zu deren Mitte.
   Eingebunden als Maske, nicht als Bild: So bestimmt das CSS die Farbe, und dieselbe
   Datei trägt jeden Hintergrund. Sie liegt hinter dem Inhalt (z-index 0 gegen 1) und
   fängt keine Klicks ab. */
.kw-neu .p-vorstellung,
.kw-neu .t-raster{position:relative;isolation:isolate}
.kw-neu .p-vorstellung > *,
.kw-neu .t-raster > *{position:relative;z-index:1}
.kw-neu .p-vorstellung::before,
.kw-neu .t-raster::before{content:"";position:absolute;z-index:0;pointer-events:none;
  /* Oben 48 px über der Bildkante — das ist die Mitte der weißen Fläche zwischen
     Titelband und Foto (sie misst 96 px, ein --s7 aus der Skala).
     Die Höhe hängt bewusst NICHT an der Höhe des Bildbereichs: an ihr gemessen wäre
     die Zeichnung nur gut 340 px hoch und wirkte wie ein Beiwerk. Sie steht in
     nahezu voller Größe und reicht hinter Porträt und Werdegang. */
  left:calc(-2% - 55px);top:-48px;height:clamp(420px,46vw,760px);aspect-ratio:607/1000;
  background:var(--bordeaux);opacity:.09;
  -webkit-mask-image:url('bilder/bluete-gross.png'); mask-image:url('bilder/bluete-gross.png');
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:top left; mask-position:top left}

@media (prefers-reduced-motion:no-preference){
  /* Als Letztes: nach dem Werdegang, langsam eingeblendet. */
  .kw-team-seite .p-vorstellung::before,
  .kw-team-seite .t-raster::before{animation:kwBlueteAnkunft 2.2s ease-out both;
    animation-delay:1.1s}
}

@keyframes kwBlueteAnkunft{
  from{opacity:0;transform:translateY(18px) scale(.98)}
  to  {opacity:.09;transform:none}
}

@media (max-width:600px){
  /* Auf schmalen Geräten läge die Blüte quer hinter dem Text statt daneben. */
  .kw-neu .p-vorstellung::before,
  .kw-neu .t-raster::before{opacity:.06;left:-16%;top:-24px;height:clamp(360px,95vw,520px)}
}