/* ═══════════════════════════════════════════════════════════════════════
   NATURHEILPRAXIS FÜR PSYCHISCHE GESUNDHEIT · Startseite
   Stylesheet für die WordPress-Fassung (Astra-Child „nhp" + Spectra)

   WAS HIER NICHT STEHT – und warum:
   · Flächenfarben, Innenabstände, Spaltenbreiten, Rahmen und Radien der
     Abschnitte liegen in den Spectra-Container-Optionen. Nur dort bleiben
     sie für die Praxis im Editor sicht- und änderbar.
   · Schriftfamilien, Grundschriftgrößen, Containerbreite (1400),
     Markenfarben und die Schaltflächen liegen im Astra-Customizer.
   · Kopf- und Fußbereich baut Astra (Header-Builder bzw. Fuß-Muster).

   · Schriftfarben stehen als Blockeinstellung an jedem Absatz, jeder
     Überschrift und Liste (Farbfelder: die neun Globalfarben plus
     sieben Zwischentöne als Globalfarben 10–16 im Customizer). Links
     übernehmen die Farbe ihres Absatzes.

   HIER STEHT NUR, WAS WEDER THEME NOCH BLOCK KANN:
   flüssige clamp()-Größen, die laufende Wortzeile, der Atemkreis, die
   Chakren-Grafik, Seitenverhältnisse und Bildausschnitte, Hover-
   Bewegungen, der Bildschleier im Einstiegsbild und im Kontaktbereich –
   und die Zierzeichen (Sterne, Piktogramme, Trennstriche), die bewusst
   keine Blöcke sind, damit im Editor nur Text steht.
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1 · TOKENS

   Die neun Werte der Kundin liegen als Globalfarben im Customizer
   (Darstellung → Customizer → Globale Farben). Wird dort etwas
   geändert, ändert es sich hier mit. Die Fallbackwerte hinter dem
   Komma greifen nur, falls eine Globalfarbe einmal leer ist.

     Slot  Rolle                        Wert      steht auf
     ────  ───────────────────────────  ────────  ─────────────────────
      0    Petrol tief                  #183E46   Überschriften, dunkle Flächen
      1    Petrol Rahmen                #355F69   Kopfzeile + Fußbereich
      2    Salbei mittel                #C8D5BA   Konkreter Nutzen
      3    Schiefergrau                 #3C434B   Fließtext
      4    Elfenbein                    #F8F5EB   Grundfläche, Karten
      5    Sand                         #F1EADC   Person, Warum, Kontakt
      6    Salbei                       #B7C6A6   Themen
      7    Gold                         #CDA454   Akzent (nur Weg zum Gespräch)
      8    Salbei hell                  #DAE4CF   Ablauf, Atmung, Programme

   Ihr eigener Petrolwert #67939D steht bewusst NICHT in der Palette:
   er erreicht mit weißer Schrift 3,4:1 und mit dunkler 3,5:1 und trägt
   damit keine Menüschrift (nötig: 4,5:1). Slot 1 ist derselbe Farbton,
   in der Helligkeit auf L46 abgesenkt – die hellste Stufe, auf der Weiß,
   Zweitton und helles Gold über 4,5:1 bleiben.

   Alle übrigen Werte sind Zwischentöne, die auf keiner eigenen Fläche
   stehen, sondern nur Text und Linien tragen. Sie bleiben deshalb hier
   und nicht im Customizer.
   ───────────────────────────────────────────────────────────── */
:root{
  --np-night:    var(--ast-global-color-0, #183E46);
  --np-rahmen:   var(--ast-global-color-1, #355F69);
  --np-salbei-2: var(--ast-global-color-2, #C8D5BA);
  --np-ink:      var(--ast-global-color-3, #3C434B);
  --np-paper:    var(--ast-global-color-4, #F8F5EB);
  --np-sand-h:   var(--ast-global-color-5, #F1EADC);
  --np-earth:    var(--ast-global-color-6, #B7C6A6);
  --np-akzent:   var(--ast-global-color-7, #CDA454);
  --np-salbei-3: var(--ast-global-color-8, #DAE4CF);

  --np-schleier: #12333A;   /* Schleier über dem Einstiegsbild          */
  --np-sand-8:   #F7F0DE;   /* Stimmen, Fragen · Text 8,8:1            */
  --np-paper-l:  #FCFAF4;   /* Karten auf hellem Salbei                */
  --np-sand:     #D1DBCA;   /* ruhige Fläche, solange ein Bild lädt    */

  --np-ink-2:    var(--ast-global-color-9, #4F565E);   /* 6,8:1 Elfenbein · 5,2:1 Salbei hell     */
  --np-ink-3:    var(--ast-global-color-10, #575E66);   /* 6,0:1 Elfenbein · 4,6:1 Salbei hell     */
  --np-on-dark:  var(--ast-global-color-13, #E7EDEC);   /* Text auf Petrol                          */
  --np-on-dark-2:var(--ast-global-color-14, #C6D4D5);   /* Zweitton · 4,6:1 auf Slot 1             */

  /* Gold, und zwar sparsam: Es markiert AUSSCHLIESSLICH den Weg zum
     ersten Gespräch – Termin-Schaltfläche, Haupt-Schaltfläche im
     Einstiegsbild, Herzglühen, Handy-Leiste, Kontakt-Schaltfläche.
     Dazu Haarlinien und Piktogramme. Nirgends sonst.
     Als Fläche erreicht Gold gegen Elfenbein nur 2,1:1 – für die Kante
     einer Schaltfläche zu wenig (WCAG 1.4.11). Deshalb hat sie
     zusätzlich eine Linie in Petrol tief. */
  --np-gold-t:   var(--ast-global-color-11, #764F00);   /* 6,7:1 Elfenbein · 5,6:1 Sand · 5,1:1 Salbei hell */
  --np-gold-b:   var(--ast-global-color-12, #F2D7A2);   /* 5,1:1 auf Slot 1                        */

  --np-line:        #DCD9CB;  /* dekorative Haarlinien                  */
  --np-line-strong: #7C858C;  /* Bedienelemente: 3,6:1 auf Elfenbein    */

  --np-breath: 10s;    /* 5 s ein, 5 s aus – steuert Herz und Atemübung */
  --np-hb:     1.05s;  /* Herzschlag, wird vom Skript umgesetzt         */
  --np-text:   68ch;   /* Textspalten – unabhängig von der Containerbreite */
  --np-head:   110px;  /* Höhe der Kopfzeile, für scroll-padding        */
  --np-head-m: 64px;
}


/* ─────────────────────────────────────────────────────────────
   1a · VORRANG VOR DEN SPECTRA-GRUNDREGELN

   Spectra bringt zwei Regelfamilien mit, die jede eigene Angabe
   überstimmen, wenn man sie nur mit einer Klasse schreibt:

   a) `assets/css/blocks/container.css` setzt auf JEDEN direkten
      Nicht-Container-Nachfahren eines Containers
          min-width:unset !important; width:100%; position:relative
      mit einer Spezifität von rund (0,13,1). Dagegen hilft nur
      !important – oder man macht aus dem Element einen Container.
      Gewählt ist der zweite Weg: Einstiegsbild, Kontaktbild, Atemkreis
      und Buddha-Zeichnung liegen je in einer eigenen Hülle. Nur die
      beiden Stellen, an denen das nicht geht (die Chakren-Beschriftung
      und die vom Skript gebaute Laufbahn), stehen unten im Block
      „Notwendige Ausnahmen".

   b) Das je Seite erzeugte `uag-css-<id>.css` schreibt
          .wp-block-uagb-container.uagb-block-xxxx { … }        (0,2,0)
          .wp-block-uagb-container.uagb-is-root-container .uagb-block-xxxx { … }
      Wo eine Angabe davon abweichen muss, trägt der Selektor hier den
      Vorsatz  .np-page .wp-block-uagb-container  (0,3,1) und gewinnt
      damit verlässlich – ohne !important und ohne Reihenfolgeglück.

   Beides betrifft NUR Maße und Positionen, die das Layout tragen.
   Farben, Innenabstände und Spaltenbreiten bleiben unangetastet in den
   Block-Optionen: sie sollen im Editor änderbar bleiben.
   ───────────────────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────────────────
   2 · GRUNDLAGEN

   Die Grundgröße wächst flüssig mit dem Fenster (17 px am Handy,
   20 px ab 1400). Der mittlere Term ist in rem gesetzt, damit die
   Schrifteinstellung des Browsers weiterhin durchschlägt – sonst
   wäre die Vergrößerungsfunktion ausgehebelt (WCAG 1.4.4).
   ───────────────────────────────────────────────────────────── */
html{scroll-padding-top:calc(var(--np-head) + 12px);}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }

body{
  font-size:clamp(17px, 1.02rem + .28vw, 20px);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
}

/* Die Grundregeln stehen in :where(). Das nimmt ihnen jedes Gewicht in
   der Kaskade: sie überschreiben die Voreinstellungen des Themes, aber
   jede spätere Klassenangabe – ein Abstand, eine Zentrierung – gewinnt
   gegen sie, ohne dass dafür Selektoren aufgebläht werden müssen. */
:where(.np-page) .entry-content > *{margin-block:0;}
:where(.np-page) figure{margin:0;}
:where(.np-page) img{max-width:100%;height:auto;display:block;}
:where(.np-page) h1,:where(.np-page) h2,:where(.np-page) h3{
  margin:0;font-weight:400;letter-spacing:-.012em;text-wrap:balance;}
:where(.np-page) p{margin:0 0 1em;}
:where(.np-page) p:last-child{margin-bottom:0;}
:where(.np-page) a{text-decoration:none;}

/* Innen dunkel, außen hell: der dunkle Ring trägt auf der hellen
   Goldfläche (7,0:1), der helle auf den dunklen Flächen. Ein
   einfarbiger Ring wäre auf einer der beiden immer unsichtbar. */
:focus-visible{
  outline:3px solid var(--np-night);outline-offset:2px;border-radius:10px;
  box-shadow:0 0 0 6px rgba(255,204,152,.9);
}

.np-serif{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:400;}
.np-eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;margin:0 0 14px;}

/* Zweizeilige Überschriften – Rhythmus aus dem Kundenentwurf.
   Der Umbruch steht als <br> im Text und ist im Editor mit
   Umschalt+Eingabe zu setzen. */
.np-page .np-h1{font-size:clamp(32px,3.6vw,52px);line-height:1.07;}
.np-page .np-h2{font-size:clamp(28px,2.9vw,40px);line-height:1.16;}
.np-sub{font-size:clamp(16px,1.35vw,19px);
  margin:14px auto 0;max-width:58ch;}
.np-sub--links{margin-left:0;}
.np-center,.np-zentriert{text-align:center;}
/* Nur für Vorlesefunktionen: Text bleibt im Dokument, ist aber unsichtbar. */
.np-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* Sterne im Text bekommen die Goldfarbe; das Skript legt sie in eine Spanne. */
.np-sterne-text{color:var(--np-gold-t);letter-spacing:.05em;}
.np-eyebrow strong{font-weight:500;}
.np-page .np-zentriert{text-align:center;}

/* Sanftes Einblenden beim Scrollen */
[data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease;}
[data-reveal].np-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
}


/* ─────────────────────────────────────────────────────────────
   3 · SCHALTFLÄCHEN UND LINKS

   Maße und Grundfarben kommen aus dem Customizer (Globale
   Schaltflächen: Gold, Radius 10, 16 px, Innenabstand 17/26). Hier
   stehen nur die beiden Sonderfälle: die Kante der goldenen Fläche und
   die helle Umrissvariante auf dem Einstiegsbild.
   ───────────────────────────────────────────────────────────── */
.np-page .wp-block-button__link{
  transition:transform .2s ease, box-shadow .2s ease;}
.np-page .wp-block-button__link:hover{
  transform:translateY(-1px);box-shadow:0 6px 18px -10px rgba(0,0,0,.5);}
@media (prefers-reduced-motion:reduce){
  .np-page .wp-block-button__link:hover{transform:none;}
}
/* Gold gegen Elfenbein: 2,1:1. Für die Kante einer Schaltfläche zu
   wenig (WCAG 1.4.11) – deshalb eine Linie in Petrol tief. */
.np-btn-gold .wp-block-button__link{
  background:var(--np-akzent);color:var(--np-night);
  box-shadow:inset 0 0 0 1px var(--np-night);}
.np-btn-ghost .wp-block-button__link{
  background:transparent;color:#fff;font-weight:400;
  border:1px solid rgba(255,255,255,.78);}

/* Textlink mit Goldunterstrich. Die Klasse sitzt am Absatz, nicht am
   Link: der Blockeditor behält Klassen an Links nicht zuverlässig. */
.np-linkzeile{margin:20px 0 0;}
.np-linkzeile a{display:inline-block;font-size:15px;color:inherit;
  border-bottom:1px solid rgba(127,88,6,.45);padding-bottom:2px;}
/* Astra unterstreicht Links im Inhalt zusätzlich per text-decoration –
   zusammen mit unserer Linie ergab das einen Doppelstrich. Die eine
   Linie, die bleiben soll, ist die eigene: sie sitzt mit Abstand unter der
   Schrift und trägt die Goldfarbe. */
.np-page .np-linkzeile a,
.np-page .np-addr a,
.np-page .np-card__more a,
.np-page .np-form .np-consent a,
.np-footer a{text-decoration:none;}
/* Schalter sehen aus wie ein Textlink. Astra gibt jedem <button> Radius,
   Innenabstand und Hover-Fläche mit – der Radius bog die Unterlinie zur
   Schale. Deshalb alles, was Astra setzt, hier ausdrücklich zurück. */
.np-page button.np-textbtn,
.np-page button.np-textbtn:hover,
.np-page button.np-textbtn:focus{
  background:none;border:0;border-bottom:1px solid rgba(118,69,9,.55);
  border-radius:0;box-shadow:none;color:var(--np-gold-t);
  font-family:inherit;font-size:15px;font-weight:400;line-height:1.4;
  padding:0 0 2px;cursor:pointer;}
.np-page button.np-textbtn:hover{border-bottom-color:var(--np-gold-t);}


/* ─────────────────────────────────────────────────────────────
   4 · KOPFBEREICH

   Farbe, Höhe und Menü kommen aus dem Astra-Header-Builder.
   Hier steht nur das Markenzeichen: die helle Scheibe mit der
   Buddha-Zeichnung. Helle Scheibe statt invertierter Zeichnung –
   die Umkehrung machte aus der feinen Linie ein grobes Negativ.
   ───────────────────────────────────────────────────────────── */
/* Die Kopfzeile läuft mit – im Entwurf war das eine der ersten
   Rückmeldungen. Astra kann das in der kostenlosen Fassung nicht. */
.site-header{position:sticky;top:0;z-index:50;}
.ast-primary-header-bar{min-height:var(--np-head);}

/* Helle Scheibe statt invertierter Zeichnung: Die Umkehrung machte aus
   der feinen Linie ein grobes Negativ. Jetzt liegt die Zeichnung so auf
   der Scheibe, wie sie gezeichnet wurde – dunkle Linie auf Licht, mit
   einem warmen Schein nach außen. Der Ausschnitt ist auf den Kopf
   eingemessen; hier justieren, wenn das Motiv wechselt. */
.site-header .custom-logo-link{
  display:block;position:relative;width:60px;height:60px;flex:none;
  border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#FDF3E2 0%,#F6DFB4 52%,#E8C078 100%);
  border:1px solid rgba(246,155,55,.55);
  box-shadow:0 0 0 1px rgba(7,34,42,.25);
}
.site-header .custom-logo-link img{
  position:absolute;left:50%;top:-2%;width:158%;max-width:none;height:auto;
  transform:translateX(-50%);
  filter:sepia(.35) saturate(.6) brightness(.55);opacity:.9;
}
.ast-site-title-wrap .site-title{font-size:29px;font-weight:500;line-height:1;margin-bottom:0;}
.ast-site-title-wrap .site-title a{color:var(--np-paper);}
/* Sperrung macht beide Zeilen nahezu gleich breit – hier justieren */
.ast-site-title-wrap .site-description{
  font-size:12.6px;font-weight:300;line-height:1;letter-spacing:.085em;
  margin-top:7px;text-transform:uppercase;}
/* Das Piktogramm liegt als Datei vor: Astra filtert SVG aus dem
   HTML-Element der Kopfzeile heraus. */
.np-headtel{display:inline-flex;align-items:center;gap:7px;font-size:16px;
  color:var(--np-on-dark-2);}
.np-headtel::before{content:"";width:14px;height:14px;flex:none;
  background:url(icons/telefon.svg) center/contain no-repeat;opacity:.85;}
.np-headtel a{color:inherit;}
/* Gold gegen Petrol trägt, braucht aber die Kante aus dem Entwurf. */
.ast-header-button-1 .ast-custom-button{box-shadow:inset 0 0 0 1px var(--np-night);}
@media (max-width:921px){
  html{scroll-padding-top:calc(var(--np-head-m) + 12px);}
  .ast-primary-header-bar{min-height:var(--np-head-m);}
  .site-header .custom-logo-link{width:40px;height:40px;}
  .ast-site-title-wrap .site-title{font-size:19px;}
  .ast-site-title-wrap .site-description{font-size:8.4px;letter-spacing:.075em;margin-top:5px;}
  .np-headtel{display:none;}
}


/* ─────────────────────────────────────────────────────────────
   5 · EINSTIEGSBILD

   Das Bild steht als Bildblock im Dokument, nicht als Container-
   Hintergrund: so behält es Alternativtext und die Mediathek erzeugt
   die srcset-Größen. Schleier und Herz sind Pseudoelemente – im Editor
   gäbe es dafür nichts zu bearbeiten.
   ───────────────────────────────────────────────────────────── */
.np-page .wp-block-uagb-container.np-hero{
  position:relative;overflow:hidden;
  /* Lage des goldenen Herzens IM BILD, in Prozent der Bildfläche.
     Einzige Stelle zum Nachjustieren – getrennt für Desktop und Handy,
     weil object-fit den Ausschnitt je Seitenverhältnis anders beschneidet. */
  --heart-x:73%; --heart-y:61%;
  --img-pos:64% 50%;
}
/* Der innere Inhaltsbereich darf keinen eigenen Bezugsrahmen bilden,
   sonst läge das Bild nur über der Textspalte statt über dem Abschnitt. */
/* Siehe Abschnitt 20, „Notwendige Ausnahmen": Der innere Inhaltsbereich
   einer randlosen Wurzelsektion muss hier statisch bleiben. */
.np-page .wp-block-uagb-container.np-hero__media{
  position:absolute;inset:0;z-index:0;margin:0;padding:0;}
.np-hero__media figure{height:100%;margin:0;}
.np-hero__media img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:var(--img-pos);
  /* Eine Spur heller, damit das Foto zum helleren Petrol passt. */
  filter:brightness(1.10) saturate(.96);
}
/* Links das tiefe Petrol, damit die Schrift trägt – zur Mitte hin
   geht der Schleier in genau den Ton der Kopfzeile über. So trägt das
   Foto die Farbe der Kopfzeile einmal sichtbar in sich. */
.np-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(18,51,58,.88) 10%,
    rgba(18,51,58,.82) 36%,
    rgba(53,95,105,.72) 52%,
    rgba(53,95,105,.30) 68%,
    rgba(53,95,105,0)  100%);}
/* Das goldene Herz – das einzige bewegte Element im Einstiegsbild.
   Es liegt ÜBER dem Schleier, sonst verschwindet das Glühen. */
.np-hero::after{content:"";position:absolute;z-index:2;pointer-events:none;
  left:var(--heart-x);top:var(--heart-y);
  width:clamp(36px,3vw,72px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,
    rgba(255,214,150,.95) 0%,
    rgba(246,155,55,.55)  45%,
    rgba(246,155,55,0)    72%);
  animation:npBreath var(--np-breath) ease-in-out infinite;}
@keyframes npBreath{
  0%,100%{opacity:.45;transform:translate(-50%,-50%) scale(.86);}
  50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.14);}
}
@media (prefers-reduced-motion:reduce){ .np-hero::after{animation:none;opacity:.8;} }

.np-page .wp-block-uagb-container.np-hero__text{
  position:relative;z-index:3;color:#fff;width:100%;max-width:680px;}
/* Der Leitsatz steht vor der Überschrift – kursiv in der Zierschrift,
   die H1 trägt die Ortsangabe für die Suche. */
.np-hero__slogan{font-size:clamp(21px,2vw,29px);line-height:1.25;margin:0 0 14px;}
.np-page .np-hero .np-h1{font-size:clamp(30px,3.2vw,48px);line-height:1.1;}
.np-hero__lead{font-size:clamp(16px,1.25vw,18.5px);line-height:1.6;
  margin:20px 0 28px;max-width:52ch;}


/* ─────────────────────────────────────────────────────────────
   6 · VERTRAUENSLEISTE

   Die Trennstriche sind Zierde, kein Inhalt: als Pseudoelement gesetzt,
   damit im Editor nur die vier Angaben stehen und niemand versehentlich
   einen Strich löscht oder doppelt.
   ───────────────────────────────────────────────────────────── */
/* Die vier Angaben sind eine Liste – Trennstriche als linker Rand. */
.np-trust__liste{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  row-gap:10px;list-style:none;margin:0;padding:0;font-size:15px;line-height:1.3;}
.np-trust__liste li{margin:0;padding:0 26px;}
.np-trust__liste li + li{border-left:1px solid rgba(60,67,75,.22);}
@media (max-width:780px){
  .np-trust__liste{flex-direction:column;font-size:13.5px;row-gap:6px;}
  .np-trust__liste li + li{border-left:0;}
}


/* ─────────────────────────────────────────────────────────────
   7 · PERSON
   ───────────────────────────────────────────────────────────── */
.np-portrait img{
  width:300px;height:300px;margin:auto;
  background:linear-gradient(160deg,#F3EEDC 0%,#E2D8BE 60%,#D3C7A6 100%);
  /* Rund und Rand: Bildblock → Ränder und Radius (50 %, 1 px).
     object-position steuert, welcher Ausschnitt bleibt – Kopf mittig. */
  object-fit:cover;object-position:50% 16%;
}
.np-person p{margin-top:16px;max-width:52ch;font-size:17px;}
.np-page .np-zitat{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(20px,1.7vw,24px);line-height:1.35;margin:26px 0 0;max-width:44ch;}
.np-page .np-zitat__name{font-size:15px;margin:6px 0 0;}
/* Werdegang als ruhige Liste mit Goldstrich statt Kacheln – die Einträge
   sind lang, als Kacheln würden sie zur Wand. */
.np-quals{margin:24px 0 0;list-style:none;padding:0;font-size:15px;line-height:1.45;}
.np-quals li{position:relative;margin:0;padding:5px 0 5px 20px;}
.np-quals li::before{content:"";position:absolute;left:0;top:calc(5px + .72em);
  width:10px;height:1px;background:var(--np-akzent);}
@media (max-width:921px){
  .np-person{text-align:center;}
  .np-person p{margin-left:auto;margin-right:auto;}
  .np-quals{display:inline-block;text-align:left;}
  .np-portrait img{width:220px;height:220px;}
}


/* ─────────────────────────────────────────────────────────────
   8 · WAS DICH ERWARTET

   Fünf Angaben als Liste. Jede steht im Text als „Stichwort · Satz";
   das Skript legt das Stichwort in eine eigene Spanne, damit es groß
   stehen kann – der Text selbst bleibt unverändert, der Mittelpunkt
   bleibt für Vorlesefunktionen erhalten.
   ───────────────────────────────────────────────────────────── */
.np-merkmale{list-style:none;margin:0;padding:44px 0 0;border-top:1px solid var(--np-line);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:34px;text-align:center;}
.np-merkmale li{margin:0;font-size:15.5px;line-height:1.5;}
.np-merkmale__t{display:block;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(27px,2.3vw,34px);line-height:1.1;color:var(--np-night);margin:0 0 12px;}
@media (max-width:1100px){ .np-merkmale{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:700px){ .np-merkmale{grid-template-columns:1fr;gap:28px;} }


/* ─────────────────────────────────────────────────────────────
   9 · THEMEN – die laufende Wortzeile

   Was in der dunklen Fassung unmöglich war, geht hier: Die Worte laufen
   HINTER der Überschrift durch. Damals lagen weiße Worte unter weißer
   Schrift und drückten deren Kontrast von 5,3:1 auf 3,0:1. Auf dem
   hellen Salbei steht die Überschrift dunkel – hellere Worte dahinter
   heben den Untergrund an und verbessern ihren Kontrast, statt ihn zu
   zerstören. Nachgemessen am Bildpunkt hinter jeder Glyphe.

   Im Editor steht EIN Absatz mit den Wörtern, durch „·" getrennt. Das
   Skript zerlegt ihn, verdoppelt die Folge für die nahtlose Schleife und
   blendet sie für Vorlesefunktionen aus: Stimmung, keine Information.
   ───────────────────────────────────────────────────────────── */
.np-page .wp-block-uagb-container.np-topics{position:relative;overflow:hidden;}
.np-page .wp-block-uagb-container.np-kopfzone-wrap{position:relative;}
.np-page .np-kopfzone-wrap > .uagb-container-inner-blocks-wrap{position:static;}
.np-page .wp-block-uagb-container.np-bgwords{
  position:absolute;left:50%;right:auto;top:50%;width:100vw;max-width:none;
  transform:translate(-50%,-50%);
  overflow:hidden;pointer-events:none;z-index:0;
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(46px,9vw,124px);line-height:1.12;
  opacity:.5;}
/* Solange das Skript nicht gelaufen ist, steht die Quelle unsichtbar da –
   sie soll nie als Aufzählung mit Mittelpunkten zu sehen sein. */
.np-bgwords__quelle{visibility:hidden;white-space:nowrap;margin:0;}
.np-bgwords__lauf{visibility:visible;display:flex;width:max-content;margin:0;
  animation:npLauf 140s linear infinite;}

/* Die Bahn läuft in einem Zug von rechts nach links. Damit die Schleife
   ohne Sprung schließt, steht die Wortfolge zweimal in der Bahn und die
   Bahn wandert um genau -50 %, also um eine Folge weiter.
   Wichtig dabei: kein gap auf der Bahn, sondern padding-right an jedem
   Wort. Mit gap wäre die halbe Bahnbreite nicht exakt eine Wortfolge
   und die Schleife würde bei jedem Durchlauf minimal springen.
   140 s für einen Durchlauf sind rund 9 Bildpunkte je Sekunde – man
   sieht die Bewegung erst, wenn man hinsieht. */
.np-bgwords__lauf span{padding-right:clamp(30px,4.6vw,78px);white-space:nowrap;
  animation:npWortRuhig 16s ease-in-out infinite;}
.np-bgwords__lauf span:nth-child(5n+2){animation-delay:-3.2s}
.np-bgwords__lauf span:nth-child(5n+3){animation-delay:-6.4s}
.np-bgwords__lauf span:nth-child(5n+4){animation-delay:-9.6s}
.np-bgwords__lauf span:nth-child(5n+5){animation-delay:-12.8s}
/* Anhalten, solange jemand mit Maus oder Tastatur in dem Abschnitt ist –
   und dauerhaft, wenn der Schalter bei den Stimmen auf „angehalten" steht.
   Der Schalter setzt dazu die Klasse .np-ruhe auf das <html>-Element;
   von dort erreicht sie jede Bewegung im Hintergrund, egal wo sie steht. */
.np-topics:hover .np-bgwords__lauf,
.np-topics:focus-within .np-bgwords__lauf,
.np-ruhe .np-bgwords__lauf,
.np-ruhe .np-bgwords__lauf span{animation-play-state:paused;}
@keyframes npLauf{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* Das Atmen bleibt, aber nur noch über die Deckkraft – ein zweites
   Verschieben neben der Laufbewegung liest sich als Zittern. */
@keyframes npWortRuhig{ 0%,100%{opacity:.55} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){
  .np-bgwords__lauf,.np-bgwords__lauf span{animation:none;opacity:1;transform:none;}
}

/* Die Überschrift liegt über dem Wortband – eigene Ebene, damit die
   Worte wirklich dahinter durchlaufen.

   Damit die Worte nicht an der Schrift kleben, trägt der Überschriften-
   block selbst eine Fläche in der Abschnittsfarbe, die zu den Rändern
   hin ausläuft: In der Mitte deckt sie vollständig, außen ist sie weg.
   Ein Wort taucht dadurch am Rand auf, verschwindet sanft, während es
   die Überschrift passiert, und kommt auf der anderen Seite wieder.

   Die RGB-Werte sind Slot 6 (#B7C6A6) ausgeschrieben: In einem Verlauf
   braucht jede Stufe dieselbe Farbe mit unterschiedlicher Deckung – mit
   `transparent` zögen ältere Engines einen grauen Saum. Wird Slot 6 im
   Customizer geändert, muss dieser Wert mitgeändert werden. */
.np-page .wp-block-uagb-container.np-kopfzone{position:relative;z-index:1;
  background:linear-gradient(90deg,
    rgba(183,198,166,0)    0%,
    rgba(183,198,166,.55) 10%,
    rgba(183,198,166,1)   20%,
    rgba(183,198,166,1)   80%,
    rgba(183,198,166,.55) 90%,
    rgba(183,198,166,0)  100%);}
@media (max-width:700px){
  /* Schmal ist die Überschrift fast so breit wie der Schirm – die Fläche
     zieht sich deshalb weiter an den Text heran, sonst bliebe vom
     Wortband gar nichts mehr zu sehen. */
  .np-page .wp-block-uagb-container.np-kopfzone{
    background:linear-gradient(90deg,
      rgba(183,198,166,0)    0%,
      rgba(183,198,166,.85)  7%,
      rgba(183,198,166,1)   14%,
      rgba(183,198,166,1)   86%,
      rgba(183,198,166,.85) 93%,
      rgba(183,198,166,0)  100%);}
  .np-bgwords{opacity:.44;}
}
.np-page .wp-block-uagb-container.np-cards{position:relative;z-index:1;}
.np-page .np-themen__mehr{position:relative;z-index:1;font-size:17px;
  max-width:62ch;margin:36px auto 0;}
.np-topics .np-vctrl{position:relative;z-index:1;margin-top:18px;}


/* ── Themenkarten ──────────────────────────────────────────────
   Ein Ort, verschiedenes Wetter: Jede Karte zeigt dieselbe Szene bei anderem
   Licht. Deshalb steht kein Text auf dem Bild – die Fläche darf ruhig
   bleiben, und die Kontrastprüfung betrifft weiter nur Papierflächen.
   Bewusst 16:9 statt quadratisch: der Streifen liest sich als Stimmung,
   nicht als Bildergalerie, und die Karte bleibt in zwei Reihen.
   ───────────────────────────────────────────────────────────── */
.np-page .wp-block-uagb-container.np-card{position:relative;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;}
.np-card:hover,.np-card:focus-within{
  transform:translateY(-2px);box-shadow:0 10px 26px -16px rgba(0,0,0,.55);}
@media (prefers-reduced-motion:reduce){ .np-card:hover{transform:none;} }
.np-card figure{margin:0;}
.np-card img{
  width:100%;aspect-ratio:16/9;display:block;object-fit:cover;object-position:50% 60%;
  background:var(--np-sand);   /* ruhige Fläche, solange das Bild lädt */
}
@media (max-width:680px){ .np-card img{aspect-ratio:16/7;} }
.np-page .wp-block-uagb-container.np-card__body{flex:1 1 auto;}
/* Das Piktogramm ist Zierde und liegt als Datei im Theme – so bleibt es
   zwischenspeicherbar, hält den Editor sauber und übersteht jedes
   Bearbeiten der Karte. */
.np-card__body::before{content:"";display:block;width:30px;height:30px;
  background-repeat:no-repeat;background-position:0 0;background-size:30px 30px;}
.np-card--angst         .np-card__body::before{background-image:url(icons/angst.svg);}
.np-card--erschoepfung  .np-card__body::before{background-image:url(icons/erschoepfung.svg);}
.np-card--stimmungstief .np-card__body::before{background-image:url(icons/stimmungstief.svg);}
.np-card--trauma        .np-card__body::before{background-image:url(icons/trauma.svg);}
.np-card--beziehung     .np-card__body::before{background-image:url(icons/beziehung.svg);}
.np-card--blockaden     .np-card__body::before{background-image:url(icons/blockaden.svg);}
.np-card h3{font-size:20px;font-weight:500;margin:0;}
.np-card p{font-size:16px;line-height:1.5;margin:0;}
.np-card__more{margin-top:auto;margin-bottom:0;font-size:15px;}
.np-card__more a{color:inherit;}
/* Die ganze Karte ist anklickbar, ohne dass Bild, Überschrift und Text in
   einen Link gesperrt wären – so bleiben sie im Editor einzeln bearbeitbar
   und die Vorlesefunktion liest einen sauberen Linktext. */
.np-card__more a::after{content:"";position:absolute;inset:0;border-radius:inherit;}


/* ─────────────────────────────────────────────────────────────
   10 · KONKRETER NUTZEN – Körper. Geist. Seele.

   Chakren-Grafik: Ringe, Punkte und Linien sind Pseudoelemente, die
   sieben Beschriftungen sind Absätze. Dadurch stehen sie in der
   Seitenschrift, sind übersetzbar und im Editor änderbar. Die Höhen
   stammen unverändert aus den Landmarken der Zeichnung – Scheitel,
   Stirn, Hals, Brustmitte, Solarplexus, Unterbauch, Sitzfläche –
   umgerechnet aus dem ursprünglichen Koordinatenraum 560 × 400.
   ───────────────────────────────────────────────────────────── */
.np-page .wp-block-uagb-container.np-chakra{
  position:relative;width:100%;aspect-ratio:560/400;}
.np-page .np-chakra > .uagb-container-inner-blocks-wrap{position:static;}
/* Die beiden ruhigen Ringe um die Figur */
.np-chakra::before,.np-chakra::after{content:"";position:absolute;
  border:1px solid #CDB9AB;border-radius:50%;aspect-ratio:1;pointer-events:none;}
.np-chakra::before{left:3.214%;top:7%;width:61.43%;border-width:1.2px;}
.np-chakra::after{left:7.857%;top:13.5%;width:52.14%;opacity:.55;}
/* Die leicht reduzierte Deckkraft nimmt dem reinen Schwarz die Härte
   und bringt die Linie auf das warme Dunkel der übrigen Seite. */
.np-page .wp-block-uagb-container.np-chakra__fig{
  position:absolute;left:10.36%;top:18%;width:47.14%;height:67%;margin:0;padding:0;}
.np-chakra__fig figure{height:100%;}
.np-chakra__fig img{width:100%;height:100%;object-fit:contain;opacity:.85;}

.np-mark{position:absolute;left:0;right:0;top:var(--y);margin:0;
  transform:translateY(-50%);padding-left:67.5%;
  font-size:17px;line-height:1.2;pointer-events:none;}
/* Dünner dunkler Ring um jeden Punkt: die gelben und orangenen Chakren
   hätten auf Salbei sonst zu wenig Eigenkontrast, um als Form zu lesen. */
.np-mark::before{content:"";position:absolute;left:32.589%;top:50%;
  width:2.679%;aspect-ratio:1;border-radius:50%;transform:translateY(-50%);
  background:var(--c);box-shadow:0 0 0 1.2px rgba(58,50,44,.55);}
/* Vier Punkt breite Beigelinie mit der Chakrenfarbe als Haarlinie darin */
.np-mark::after{content:"";position:absolute;left:35.893%;top:50%;
  width:29.821%;height:4px;transform:translateY(-50%);
  background:linear-gradient(var(--c),var(--c)) center/100% 1.4px no-repeat,#DFCDC1;}
.np-mark--krone      {--y:15%;   --c:#7B3FA0;}
.np-mark--stirn      {--y:32%;   --c:#3B3FA8;}
.np-mark--hals       {--y:41.25%;--c:#1F7FBE;}
.np-mark--herz       {--y:47.5%; --c:#2E8B4F;}
.np-mark--solarplexus{--y:53.5%; --c:#C99400;}
.np-mark--sakral     {--y:59%;   --c:#E2711D;}
.np-mark--wurzel     {--y:65.5%; --c:#C8302A;}
@media (max-width:600px){ .np-mark{font-size:13px;} }

.np-page .wp-block-uagb-container.np-kgs__item{border-top:1px solid var(--np-line);}
.np-page .np-kgs__t{font-weight:500;font-size:19px;line-height:1.3;margin:0;}
.np-kgs__d{font-size:16px;margin:0;max-width:var(--np-text);}
/* Pflichthinweis zu den Methoden – lesbar, aber leiser als der Text. */
.np-page .np-hinweis{font-size:14px;line-height:1.55;margin:26px 0 0;padding-top:16px;
  border-top:1px solid rgba(60,67,75,.22);max-width:var(--np-text);}


/* ─────────────────────────────────────────────────────────────
   11 · ABLAUF – drei Schritte
   ───────────────────────────────────────────────────────────── */
.np-page .np-schritt__t{font-weight:500;font-size:19px;line-height:1.3;margin:0 0 10px;}
.np-schritt__d{font-size:15.5px;line-height:1.55;margin:0;}


/* ─────────────────────────────────────────────────────────────
   12 · ATMUNG

   Der Kreis trägt das Lichtbild – dieselbe Scheibe wie das Medaillon in
   der Kopfzeile, damit die Seite zwei Bilder derselben Familie zeigt und
   nicht zwei Zufälle. Die Beschriftung steht UNTER dem Kreis: im Kreis
   wäre sie mitskaliert und läge auf einer wandernden Helligkeit.
   ───────────────────────────────────────────────────────────── */
.np-page .wp-block-uagb-container.np-breath__circle{
  position:relative;box-sizing:border-box;width:190px;height:190px;
  border-radius:50%;margin:36px auto 0;padding:0;
  overflow:hidden;border:1px solid rgba(232,192,120,.45);
  background:radial-gradient(circle,rgba(232,192,120,.38) 0%,rgba(232,192,120,0) 70%);
  animation:npBreath2 var(--np-breath) ease-in-out infinite;
}
/* Der innere Inhaltsbereich des Containers muss die Höhe mitnehmen,
   sonst füllt das Bild nur die obere Hälfte der Scheibe. */
.np-breath__circle > .uagb-container-inner-blocks-wrap,
.np-breath__circle figure,
.np-breath__circle img{width:100%;height:100%;object-fit:cover;display:block;margin:0;}
@keyframes npBreath2{0%,100%{transform:scale(.86);}50%{transform:scale(1.1);}}
.np-page .np-breath__circle.is-paused{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){ .np-breath__circle{animation:none;} }
.np-breath__label{margin:26px 0 0;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;}
.np-breath__ctrl{margin-top:22px;display:flex;gap:18px;justify-content:center;
  flex-wrap:wrap;align-items:baseline;}

/* Der Herzschlag wird beim Ausatmen langsamer und beim Einatmen
   schneller. Das ist die Atem-Herz-Kopplung, also der Mechanismus, mit
   dem die Übung arbeitet – keine Aussage über Behandlungserfolge.
   Das Intervall steuert --np-hb; das Skript setzt den Wert bei jedem
   Phasenwechsel neu und braucht dafür keinen zweiten Zeitgeber. */
/* Ein Absatz ist im Container ein Flex-Element und damit immer so breit
   wie die Spalte – zentriert wird deshalb sein Inhalt, nicht er selbst. */
.np-hbwrap{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:20px 0 0;font-size:15px;}
.np-hbwrap::before{content:"";width:22px;height:20px;flex:none;
  background:url(icons/herz.svg) center/contain no-repeat;
  transform-origin:50% 58%;animation:npBeat var(--np-hb) ease-in-out infinite;}
@keyframes npBeat{   /* zwei Schläge – der zweite kleiner, wie ein echter Puls */
  0%,46%,100%{transform:scale(1);}
  10%        {transform:scale(1.17);}
  20%        {transform:scale(1.02);}
  30%        {transform:scale(1.10);}
}
@media (prefers-reduced-motion:reduce){ .np-hbwrap::before{animation:none;} }


/* ─────────────────────────────────────────────────────────────
   13 · RAHMEN UND PROGRAMME

   Offen sichtbar statt aufklappbar, weil auf dem Handy kaum jemand eine
   Zeile antippt. Platzhalter sind bewusst als solche erkennbar:
   gestrichelte Kante und kursive Schrift, damit niemand sie
   versehentlich für Inhalt hält.
   ───────────────────────────────────────────────────────────── */
.np-page .np-karte__t{font-weight:500;font-size:19px;line-height:1.3;margin:0 0 8px;}
.np-karte__d{font-size:15.5px;line-height:1.55;margin:0;}
.np-page .np-programme__titel{font-weight:500;font-size:19px;
  margin:40px 0 0;text-align:left;}
/* Preisliste: Leistung links, Preis rechts. Das Skript trennt am letzten
   Doppelpunkt; der Text bleibt dabei unverändert. */
.np-preisliste{list-style:none;margin:30px auto 0;padding:6px 26px;max-width:640px;width:100%;
  background:var(--np-paper-l);border:1px solid var(--np-line);border-radius:10px;}
.np-preisliste li{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:24px;
  row-gap:2px;margin:0;padding:13px 0;font-size:16.5px;line-height:1.45;}
.np-preisliste li + li{border-top:1px solid var(--np-line);}
.np-preisliste__preis{font-weight:500;color:var(--np-night);text-align:right;}
.np-page .np-prices .np-sub + .np-sub{margin-top:26px;}
/* Programme: Liste im Raster, der fette Name steht als Zeile oben. */
.np-programme{list-style:none;margin:16px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.np-programme li{margin:0;background:var(--np-paper-l);border-radius:10px;
  padding:20px 22px;font-size:15.5px;line-height:1.55;}
.np-programme strong{display:block;font-weight:500;font-size:17px;color:var(--np-night);
  margin:0 0 6px;}
@media (max-width:700px){ .np-programme{grid-template-columns:1fr;} }
.np-prices__note{font-size:16px;margin-top:20px;max-width:var(--np-text);}
/* Einziger Absatz mit Text UND Link: der Link bleibt golden, der Text
   folgt der Farbe, die im Editor am Absatz eingestellt ist. */
.np-prices__note a{color:var(--np-gold-t);}


/* ─────────────────────────────────────────────────────────────
   14 · STIMMEN

   Die Bewertungen kommen live aus dem Google-Unternehmensprofil
   (Trustindex-Widget, dieselbe Einstellung wie auf der alten Startseite).
   Der Hinweis darüber ist Pflicht (§ 5b Abs. 3 UWG): Er sagt, dass die
   Praxis die Echtheit nicht prüft.
   ───────────────────────────────────────────────────────────── */
.np-voices .ti-widget{margin-top:30px;}
.np-vctrl{display:flex;justify-content:center;align-items:center;margin-top:6px;}


/* ─────────────────────────────────────────────────────────────
   15 · FRAGEN
   Spectra-Akkordeon (uagb/faq) – hier nur Farbe und Größe.
   ───────────────────────────────────────────────────────────── */
/* Ruhige Zeilen statt Kästen – wie im Entwurf: nur eine Haarlinie
   trennt die Fragen, das Zeichen steht rechts. */
.np-faq .uagb-faq-child__outer-wrap,
.np-faq .uagb-faq-item{background:transparent;border:0;border-radius:0;
  border-bottom:1px solid var(--np-line);box-shadow:none;}
/* Spectra stellt das Zeichen vor die Frage. Im Entwurf steht es rechts
   am Zeilenende – das ist hier eine Frage der Reihenfolge, nicht des
   Markups: die Frage bekommt die volle Breite, das Zeichen wandert ans
   Ende. */
.np-faq .uagb-faq-questions{display:flex;align-items:center;gap:20px;padding:18px 0;}
.np-faq .uagb-question{font-size:19px;font-weight:400;color:var(--np-night);
  padding:0;margin:0;order:1;flex:1;}
.np-faq .uagb-faq-icon-wrap{order:2;flex:none;width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;}
.np-faq .uagb-faq-icon-wrap svg{width:15px;height:15px;}
.np-faq .uagb-faq-content{padding:0 0 18px;}
.np-faq .uagb-faq-content p{font-size:17px;color:var(--np-ink-2);
  max-width:var(--np-text);margin:0;}
.np-faq .uagb-icon-wrap svg,
.np-faq .uagb-faq-icon-wrap svg{fill:var(--np-gold-t);}
.np-faq h2{margin-bottom:24px;}
.np-faq .uagb-faq-content a{color:var(--np-gold-t);text-decoration:none;
  border-bottom:1px solid rgba(118,79,0,.45);}


/* ─────────────────────────────────────────────────────────────
   16 · KONTAKT

   Das Bild liegt HINTER dem Abschnitt, die Überschrift steht darauf.

   Ein Versuch, das Foto hinter dem ganzen Abschnitt laufen zu lassen,
   ist verworfen: Damit ein Formular darüber lesbar bleibt, braucht der
   Schleier rund 90 % Deckung – und bei 90 % bleibt vom Bild nur noch
   ein grauer Hauch. Entweder man sieht das Foto, oder man liest das
   Formular; dazwischen gibt es nichts.

   Deshalb bekommt das Bild eine eigene Höhe am Kopf des Abschnitts:
   Oben ist es fast unverschleiert zu sehen, zur Überschrift hin
   verdichtet sich der Schleier, und vor dem Formular ist die Fläche
   geschlossen. Geprüft am Bildpunkt hinter jeder Textzeile.
   ───────────────────────────────────────────────────────────── */
.np-page .wp-block-uagb-container.np-contact{
  position:relative;isolation:isolate;overflow:hidden;}

.np-page .wp-block-uagb-container.np-contact__bg{
  position:absolute;left:0;right:0;top:0;margin:0;padding:0;
  height:clamp(250px,32vw,420px);z-index:-1;overflow:hidden;pointer-events:none;}
.np-contact__bg figure{height:100%;margin:0;}
.np-contact__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;
  /* Das Foto ist zur blauen Stunde aufgenommen – der Farbton wird in
     Richtung Petrol gedreht, damit er zur Kopfzeile passt. */
  display:block;filter:blur(1px) saturate(.80) hue-rotate(-14deg);}
.np-contact__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(241,234,220,.06)  0%,
    rgba(241,234,220,.22) 26%,
    rgba(241,234,220,.55) 48%,
    rgba(241,234,220,.86) 68%,
    rgba(241,234,220,.99) 88%,
    rgba(241,234,220,1)  100%);}

/* Contact Form 7 im Gewand der Seite */
.np-form .np-label{display:block;margin-bottom:12px;}
.np-form .np-label > span{display:block;font-size:15px;color:var(--np-ink-2);margin-bottom:6px;}
.np-form input[type=text],.np-form input[type=email],.np-form input[type=tel],
.np-form textarea{
  display:block;width:100%;border:1px solid var(--np-line-strong);border-radius:10px;
  background:#fff;padding:12px 14px;font-family:inherit;font-size:16px;color:var(--np-ink);}
.np-form textarea{min-height:120px;resize:vertical;}
/* Contact Form 7 und der Spamschutz bringen eigene, sehr blasse Farben
   mit. Die Einwilligung ist eine Pflichtangabe – sie muss lesbar sein. */
.np-form .np-consent,
.np-form .np-consent *{font-size:15px;color:var(--np-ink-2);opacity:1;}
.np-form .np-consent{display:block;margin:6px 0 16px;}
.np-form .np-consent .wpcf7-list-item{margin:0;}
.np-form .np-consent a{color:var(--np-gold-t);border-bottom:1px solid rgba(127,88,6,.45);}
.np-form .f12-cf7-captcha,
.np-form .f12c-captcha-wrapper{background:transparent;border:0;padding:0;margin:16px 0 0;}
.np-form .f12c-captcha-wrapper input[type=text]{max-width:220px;}
/* Der Spamschutz bringt eine sehr blasse Beschriftung mit (2,5:1). Sie
   steht an einem Pflichtfeld und muss lesbar sein. */
.np-page .np-form .f12-captcha .c-label,
.np-page .np-form .f12c-captcha-wrapper label{color:var(--np-ink-2);font-size:14px;}
.np-form input[type=submit]{
  background:var(--np-night);color:#fff;border:0;border-radius:10px;
  padding:17px 26px;font-family:inherit;font-size:16px;font-weight:500;cursor:pointer;}
.np-form .wpcf7-not-valid-tip{font-size:14px;color:#9B1C1C;}

.np-booking h3{font-size:20px;font-weight:400;margin:0;}
.np-booking p{font-size:16px;margin:12px 0 20px;line-height:1.55;}
.np-page .np-addr{font-size:16px;line-height:1.6;margin:8px 0 0;}
.np-page .np-addr--erste{margin-top:24px;font-weight:500;}
.np-page .np-addr--hinweis{font-size:14.5px;margin-top:14px;}
.np-page .np-contact .np-zitat{margin-top:28px;}
.np-addr a{border-bottom:1px solid var(--np-line);color:inherit;}


/* ─────────────────────────────────────────────────────────────
   17 · FUSSBEREICH

   Kopf und Fuß bilden zusammen den Rahmen, die Aufhellung läuft
   innerhalb dieses Rahmens. Der AUFBAU folgt dem Fuß der bestehenden
   Praxisseite: zuerst der Name mit einem Satz, daneben die
   Erreichbarkeit. Die Seitenlinks stehen unten in der schmalen Zeile.
   ───────────────────────────────────────────────────────────── */
.np-footer{background:var(--np-rahmen);color:var(--np-on-dark);}
.np-footer p{margin:0;}
.np-footer a{color:inherit;border-bottom:1px solid transparent;text-decoration:none;}
.np-footer a:hover,.np-footer a:focus-visible{border-bottom-color:var(--np-gold-b);}
.np-footer .wp-block-uagb-container.np-footer__bar{
  border-top:1px solid rgba(239,228,220,.18);}
.np-footer__medaille img{width:60px;height:60px;
  background:radial-gradient(circle at 50% 38%,#FDF3E2 0%,#F6DFB4 52%,#E8C078 100%);
  object-fit:cover;object-position:50% 8%;}  /* Rund und Rand: Bildblock */
.np-footer__name{font-family:"Cormorant Garamond",Georgia,serif;
  font-size:27px;line-height:1.1;}
.np-footer__unter{font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;margin-top:7px!important;}
.np-footer__claim{font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:20px;line-height:1.6;margin-top:24px!important;max-width:34ch;}
.np-footer__ct{font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:18px!important;}
.np-footer__list{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:13px;font-size:16px;}
.np-footer__mess{font-size:14px;margin-top:16px!important;line-height:1.55;}
.np-footer__bar{font-size:13.5px;color:var(--np-on-dark-2);}
.np-footer__bar p{font-size:13.5px;}
/* Pflichthinweis – muss lesbar sein, nicht versteckt */
.np-legal{font-size:13.5px;line-height:1.6;max-width:80ch;margin:0;}

/* Astras eigener Fußbereich tritt zurück, sobald das Muster greift. */
.np-eigener-fuss .site-footer .ast-builder-grid-row-container,
.np-eigener-fuss .site-footer > .site-below-footer-wrap,
.np-eigener-fuss .site-footer > .site-above-footer-wrap,
.np-eigener-fuss .site-footer > .site-primary-footer-wrap{display:none;}


/* ─────────────────────────────────────────────────────────────
   18 · FIXLEISTE (nur Handy) – die Brücke in Daumenreichweite
   ───────────────────────────────────────────────────────────── */
.np-fixed{display:none;}
@media (max-width:780px){
  body{padding-bottom:58px;}
  /* Die Pfeiltaste nach oben darf die Handy-Leiste nicht verdecken. */
  #ast-scroll-top{bottom:70px;}
  .np-fixed{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;height:58px;
    background:var(--np-night);border-top:1px solid rgba(255,255,255,.14);}
  .np-fixed a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
    color:#fff;font-size:clamp(13px,3.6vw,14.5px);text-decoration:none;
    padding:0 6px;text-align:center;}
  .np-fixed a + a{background:var(--np-akzent);color:var(--np-night);font-weight:500;}
}


/* ─────────────────────────────────────────────────────────────
   19 · DAS GOLDENE HERZ AUF DEM ECHTEN FOTO

   Auf dem Foto sitzt das Herz woanders als in der gerechneten Fläche –
   und der Bildausschnitt verschiebt sich zusätzlich, weil `cover` bei
   jedem Seitenverhältnis anders beschneidet. Deshalb die Position als
   zwei Variablen, getrennt für Desktop und Handy. Das ist die einzige
   Stelle zum Nachjustieren.
   ───────────────────────────────────────────────────────────── */
/* Zwischen Tablet und kleinem Desktop reicht der Einleitungstext weiter
   ins Bild, als der Schleier deckt – hier deckt er deshalb breiter. */
@media (min-width:781px) and (max-width:1240px){
  .np-hero::before{background:linear-gradient(100deg,
    rgba(18,51,58,.90) 0%,
    rgba(18,51,58,.86) 45%,
    rgba(53,95,105,.74) 70%,
    rgba(53,95,105,.40) 100%);}
}
@media (max-width:780px){
  .np-hero{--heart-x:50%; --heart-y:52%; --img-pos:70% 46%;}
  /* Auf dem Handy läge das Glühen mitten unter dem Einleitungstext –
     Lesbarkeit geht vor, das Herz entfällt hier. */
  .np-hero::after{display:none;}
  /* Auf dem Handy steht der Einleitungstext über dem ganzen Bild –
     der Schleier deckt deshalb bis unten gleichmäßig. */
  .np-hero::before{background:linear-gradient(176deg,
    rgba(18,51,58,.86) 0%,rgba(18,51,58,.82) 55%,
    rgba(53,95,105,.80) 100%);}
}


/* ─────────────────────────────────────────────────────────────
   20 · NOTWENDIGE AUSNAHMEN

   Zwei Elemente können keine eigene Container-Hülle bekommen und
   stehen deshalb unter der Spectra-Grundregel
       body .wp-block-uagb-container > .uagb-container-inner-blocks-wrap
            > *:not(.wp-block-uagb-container)…
       { min-width:unset !important; width:100%; position:relative }
   (assets/css/blocks/container.css, Spezifität rund 0,13,1).

   Gegen diese Spezifität kommt kein vernünftig lesbarer Selektor an –
   hier ist !important die ehrlichere Lösung als eine Selektorkette, die
   niemand mehr pflegen kann. Es sind genau diese beiden Stellen, und
   beide sind reine Zierde ohne Bedienfunktion:

   · die sieben Chakren-Beschriftungen, die auf ihrer gemessenen Höhe
     sitzen müssen;
   · die Laufbahn der Wortzeile, die so breit sein muss wie ihr Inhalt –
     mit width:100% liefe die Schleife nicht.
   ───────────────────────────────────────────────────────────── */
.np-page .np-chakra .np-mark{
  position:absolute !important;
  width:100% !important;
  left:0 !important; right:auto !important;
  top:var(--y) !important;
}
.np-page .np-bgwords .np-bgwords__lauf{
  position:static !important;
  width:max-content !important;
}

/* Der dritte Fall: Spectra macht den inneren Inhaltsbereich jeder
   randlosen Wurzelsektion zum Bezugsrahmen. Für die beiden Abschnitte,
   in denen ein Bild über die GANZE Breite liegen soll – Einstiegsbild und
   Kontaktbild –, muss er statisch bleiben, sonst reicht das Bild nur über
   die 1400er Textspalte. Die erzeugte Regel steht in uag-css-<id>.css in
   einer langen Selektorgruppe, deren stärkstes Glied jede vernünftig
   lesbare Angabe überbietet. */
.np-page .np-hero > .uagb-container-inner-blocks-wrap,
.np-page .np-contact > .uagb-container-inner-blocks-wrap{
  position:static !important;
}

/* Schalter „Bewegung anhalten": Spectra gibt jedem Nicht-Container-Kind
   eines Containers width:100% (Spezifität siehe 1a). Der Knopf ist dort
   Kind von #npVoicesCtrl (unter den Themenkarten) – ohne diese Ausnahme lief sein Unterstrich über
   die ganze Breite statt nur unter dem Wort. Die Spalte streckt ihre
   Kinder (align-items:stretch), daher zusätzlich align-self. */
.np-page .np-vctrl .np-textbtn{width:auto !important;min-width:0 !important;flex:0 0 auto;align-self:center;}

/* ─────────────────────────────────────────────────────────────
   21 · NEUFASSUNG TEXT (Oktober 2026)

   Astra gibt jeder Liste im Inhalt einen linken Einzug und einen
   Abstand nach unten – für die gestalteten Listen hier zurückgesetzt.
   Karten mit unterschiedlich langem Text richten ihren Inhalt oben aus
   (Spectra zentriert sonst senkrecht, die Überschriften stünden auf
   verschiedenen Höhen).
   ───────────────────────────────────────────────────────────── */
.np-page ul.np-trust__liste,.np-page ul.np-quals,.np-page ul.np-merkmale,
.np-page ul.np-preisliste,.np-page ul.np-programme{margin-left:0;margin-right:0;}
.np-page ul.np-merkmale{padding:44px 0 0;margin-bottom:0;}
.np-page ul.np-preisliste{padding:6px 26px;margin:30px auto 0;}
.np-page ul.np-programme{padding:0;margin:16px 0 0;}
.np-page ul.np-quals{padding:0;margin:24px 0 0;}
.np-page ul.np-trust__liste{padding:0;margin:0;}
.np-page .wp-block-uagb-container.np-card__body,
.np-page .wp-block-uagb-container.np-schritt,
.np-page .wp-block-uagb-container.np-karte{justify-content:flex-start;}
/* Der Einstieg ist mit dem längeren Text höher als die Mindesthöhe –
   oben und unten Luft, damit die Ortszeile nicht an der Kopfzeile klebt. */
.np-page .wp-block-uagb-container.np-hero__text{padding-top:64px;padding-bottom:64px;}
@media (max-width:767px){
  .np-page .wp-block-uagb-container.np-hero__text{padding-top:40px;padding-bottom:44px;}
}
.np-page .np-person p{margin:16px 0 0;}
.np-page .np-person p.np-zitat{margin-top:26px;}
.np-page .np-person p.np-zitat__name{margin-top:6px;}
/* Der Schalter steht jetzt auf Salbei (Themen). Gold als Schrift kommt
   dort nur auf 4,0:1 – deshalb hier Petrol tief (7,2:1). */
.np-page .np-topics button.np-textbtn,
.np-page .np-topics button.np-textbtn:hover,
.np-page .np-topics button.np-textbtn:focus{color:var(--np-night);border-bottom-color:rgba(24,62,70,.55);}
/* Fünfter Fall der Ausnahmen (vgl. Abschnitt 20): Spectra rückt jede
   Liste direkt in einem Container um 20 px ein und nimmt ihr den Abstand
   oben – per Selektorkette über body .ast-container …, die sich ohne
   !important nicht überstimmen lässt. Für die gestalteten Listen hier
   zurückgenommen. */
.np-page ul.np-trust__liste,.np-page ul.np-quals,.np-page ul.np-merkmale,
.np-page ul.np-preisliste,.np-page ul.np-programme{margin-left:0 !important;}
.np-page ul.np-preisliste{margin-left:auto !important;margin-right:auto !important;margin-top:30px !important;}
.np-page ul.np-programme{margin-top:16px !important;}
.np-page ul.np-quals{margin-top:24px !important;}


/* ─────────────────────────────────────────────────────────────
   22 · UNTERSEITEN (schlichter Aufbau, z. B. /angst-panik/)

   Einspaltige Textabschnitte im Wechsel der Flächen. Flächenfarbe,
   Innenabstand und Textbreite (820 px) liegen in den Spectra-Optionen
   der Abschnitte, Schriftfarben als Blockfarbe. Hier nur Rhythmus.
   ───────────────────────────────────────────────────────────── */
.np-page .np-u .np-u-h2{margin:0 0 6px;}
.np-page .np-u-text{font-size:17px;line-height:1.65;margin:14px 0 0;max-width:68ch;}
.np-page .np-u-h3{font-size:21px;font-weight:500;line-height:1.3;margin:34px 0 0;}
.np-page ul.np-u-liste{list-style:none;padding:0;margin:16px 0 0 !important;font-size:16.5px;line-height:1.5;}
.np-u-liste li{position:relative;margin:0;padding:6px 0 6px 22px;}
.np-u-liste li::before{content:"";position:absolute;left:0;top:calc(6px + .75em);
  width:11px;height:1px;background:var(--np-akzent);}
.np-page .np-u .np-zitat{margin-top:32px;}
.np-page .np-u .np-zitat__name{margin-top:6px;font-size:15px;}
.np-page .np-u .np-hinweis{margin-top:30px;}
.np-page .np-u-notfall{margin:20px 0 0;padding:14px 18px;font-weight:500;
  border-left:3px solid var(--np-akzent);background:rgba(255,255,255,.6);border-radius:0 8px 8px 0;}
.np-page .np-u-kontakt .np-addr--erste{margin-top:26px;}
.np-faq.np-u .np-u-h2{text-align:center;margin-bottom:24px;}
/* Einstieg der Unterseite: eigenes Bild, kein Herz (es säße nicht auf
   der Figur), zweiter Einleitungsabsatz etwas leiser. */
.np-hero--unterseite::after{display:none;}
.np-hero--unterseite .np-hero__media img{object-position:62% 55%;}
.np-page .np-hero__lead--zwei{margin-top:-12px;font-size:clamp(15px,1.1vw,16.5px);}
.np-page .np-u .np-u-text + .np-u-h2{margin-top:48px;}
/* Unterseiten: drei Muster – Text mit Bild, drei Karten, einfacher Text.
   Bilder nur aus der Marsch-Reihe der Startseite, alle im selben Format
   (3:2, Radius 10 wie die Themenkarten). Einziges Icon: das Themen-Icon
   der Seite über der ersten Überschrift, wie auf der Themenkarte. */
.np-page .wp-block-uagb-container.np-u-bildspalte{align-items:stretch;}
.np-page .np-u-foto{margin:0;}
.np-page .np-u-foto img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  object-position:50% 60%;border-radius:10px;background:var(--np-sand);}
.np-page .wp-block-uagb-container.np-u-karten{margin-top:30px;}
.np-page .np-u-karte .np-u-h3{margin-top:0;font-size:19px;}
.np-page .np-u-karte .np-u-text{font-size:15.5px;line-height:1.6;margin-top:10px;}
.np-page .np-u-nachkarten{margin-top:26px;}
.np-u-h2--icon::before{content:"";display:block;width:30px;height:30px;margin:0 0 14px;
  background:url(icons/angst.svg) 0 0/30px 30px no-repeat;}
@media (max-width:1024px){
  /* Gestapelt steht das Bild immer über dem Text – unabhängig von links/rechts. */
  .np-page .np-u-textbild > .uagb-container-inner-blocks-wrap,
  .np-page .wp-block-uagb-container.np-u-textbild{flex-direction:column;}
  .np-page .np-u-textbild .np-u-bildspalte{order:-1;}
}

/* Untermenü im Hauptmenü (Themen). Die Schriftfarben stehen im
   Customizer (Header → Menü 1); eine Hintergrundfarbe für Untermenüs
   bietet Astra ohne Pro-Erweiterung nicht – deshalb nur sie hier. */
.ast-desktop .main-header-menu .sub-menu{background:var(--ast-global-color-1);
  box-shadow:0 12px 28px -14px rgba(0,0,0,.45);}
.ast-desktop .main-header-menu .sub-menu .menu-item > .menu-link{padding-top:12px;padding-bottom:12px;}
.ast-desktop .main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link{background:var(--ast-global-color-0);}