/*
Theme Name: Axxento Base Child
Template: astra
Version: 0.16.1
Text Domain: axxento-base-child
Author: AXXENTO Agentur
Description: Astra-Child-Theme von AXXENTO. Lokale Schriften (DSGVO), Design-Tokens und Basis-Typografie. Optik pro Kunde hier anpassen; Funktion liegt in axxento-core.
*/

/* ==========================================================================
   Schriften – LOKAL aus fonts/ (DSGVO-konform, KEINE Google Fonts)
   ========================================================================== */

@font-face {
    font-family: 'Neue Helvetica';
    src: url('fonts/HelveticaNeueLT35Thin.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Helvetica';
    src: url('fonts/HelveticaNeueLT45Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Helvetica';
    src: url('fonts/HelveticaNeueLT55Roman.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Helvetica';
    src: url('fonts/HelveticaNeueLT75Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   Design-Tokens
   ========================================================================== */

:root {
    --brand-primary: #F5D1C1;
    --brand-cream: #FEF0E7;
    --brand-black: #000;
    --brand-white: #fff;
    --brand-green: #53A16B;
    --brand-coral: #E2786F;
    --brand-grey: #ABABAD;
    --brand-taupe: #D2CCC8;   /* Marken-Taupe: Topbar/Meta-Leiste, Back-to-Top */
    --brand-font: 'Neue Helvetica', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* ----------------------------------------------------------------------
       Lesbare Zwillinge der beiden Markenfarben (WCAG 1.4.3).
       Die Markenwerte oben bleiben unveraendert – sie bilden die Marke ab und
       sind als FLAECHE einwandfrei. Als TEXTFARBE verfehlen beide das Minimum;
       dafuer stehen hier zwei eigene Tokens. Verwendungszweck getrennt statt
       Markenwert ueberschrieben, nach dem Muster von --axx-muted/--axx-accent.
       ---------------------------------------------------------------------- */

    /* Marken-Grau, aber lesbar: #ABABAD erreicht auf Weiss nur 2,29:1, noetig
       sind 4,5:1 fuer Fliesstext. #767676 liefert 4,54:1 – in beide Richtungen,
       also auch fuer weisse Schrift auf grauer Buttonflaeche im Hover.
       Entscheidung 6.1, Paulo, 20.07.2026, freigegeben an farbvergleich.html.
       --brand-grey bleibt unveraendert und traegt weiterhin die deaktivierte
       Pagination – deaktivierte Bedienelemente sind nach WCAG 1.4.3 vom
       Kontrastminimum ausdruecklich ausgenommen (siehe Regel weiter unten). */
    --brand-grey-text: #767676;

    /* Marken-Koralle, aber lesbar: #E2786F erreicht auf Weiss nur 2,94:1 und
       verfehlt damit auch die 3:1 fuer Grossschrift. #C4483D liefert 4,84:1.
       Entscheidung 6.2, Paulo, 20.07.2026. Gilt ausschliesslich fuer Koralle
       als TEXT; --brand-coral als Flaeche (Badge-Hintergrund, Button-Hover)
       bleibt unveraendert. */
    --brand-coral-text: #C4483D;

    /* ----------------------------------------------------------------------
       Belegung der axxento-core-Tokens.
       Die Widgets im Plugin sind neutral: sie nutzen var(--axx-*, <neutraler
       Fallback>). Ohne Child-Theme laufen sie in Graustufen, hier bekommen sie
       die Markenwerte des Kunden. Damit aendert sich optisch nichts, die Werte stehen aber
       jetzt an genau einer Stelle statt im Baukasten.
       ---------------------------------------------------------------------- */
    /* --axx-muted versorgt vier Stellen in widgets.css: 61
       .axxento-beh-preise__duration, 94 .beh-price__label, 105
       .beh-price__duration (alle Textfarbe) und 121 .beh-btn:hover
       (Hintergrund mit weisser Schrift). Alle vier lagen bei 2,29:1; die
       Umstellung auf --brand-grey-text erledigt sie zusammen, ohne dass das
       Plugin angefasst werden muss – genau wofuer die Token-Schicht da ist. */
    --axx-muted:  var(--brand-grey-text);  /* Dauer-Angaben, Preis-Labels, Button-Hover */
    --axx-accent: var(--brand-coral);   /* Badge, Preise-Button-Hover */
    --axx-ink:    #1d1d1b;              /* Marken-Schwarz der Produkt-Slider-Kacheln */

    /* Produkt-Slider (axxento-products-slides).
       Am Original mit der Farbpipette abgenommen: unten links #f9f9f9, oben
       rechts #fcfcfc – ein schwacher Verlauf, oben rechts heller.

       Das passt zum frueheren Befund, statt ihm zu widersprechen: Das Original
       hat keine eigene Kachelflaeche (weder per CSS noch aus dem CDN – die
       imgix-Parameter fit=fill&fill=solid fuellen ohne fill-color nichts). Die
       Pipette liest dort also den Seitenhintergrund, und der ist nahezu weiss
       mit leichtem Verlauf. Diese Werte bilden das Erscheinungsbild nach.

       Der frueher hier stehende Vorschau-Wert #F5F4F2 war deutlich zu dunkel
       und zu warm – nicht wieder einsetzen.

       Es ist ein Verlauf, also ein Hintergrundbild und keine Farbe: Die
       Plugin-Regel nutzt background: (Kurzform), nicht background-color –
       sonst wuerde der Wert ignoriert. */
    --axx-produkt-kachel-bg: linear-gradient(to bottom left, #fcfcfc, #f9f9f9);
    --axx-badge-bg:          var(--brand-white);   /* gemessen #FFFFFF */
    /* Badge-Text im Produkt-Slider (widgets.css 304), Koralle auf weisser
       Flaeche. Am Original abgenommen war rgb(235,130,121) = 2,62:1, der
       Token-Wert #E2786F = 2,94:1 – beide verfehlen selbst die 3:1 fuer
       Grossschrift, und das Badge ist 13px. Entscheidung 6.2. */
    --axx-badge-text:        var(--brand-coral-text);   /* #C4483D, 4,84:1 */

    /* --axx-font bewusst NICHT hier – siehe body-Regel unten. */
}

/* ==========================================================================
   Basis-Typografie
   ==========================================================================
   Schrift haengt am Elementor-Kit, damit ein Wechsel unter
   Site Settings -> Globale Schriftarten site-weit durchschlaegt – auch in den
   axxento-core-Widgets, die --axx-font nutzen.

   --axx-font steht ZWINGEND hier auf body und nicht oben in :root: das
   Kit-Stylesheet setzt seine --e-global-typography-* auf .elementor-kit-<id>,
   und das IST das body-Element. Auf :root ist die Kit-Variable noch
   undefiniert -> var() faellt dort auf den Fallback zurueck, friert ihn als
   berechneten Wert ein und vererbt ihn an den gesamten Baum. Genau daran haben
   Pagination, Image-Box und Team-Namen festgehangen.
   --brand-font greift nur noch, wenn der Kit gar keine Schrift liefert. */

body {
    --axx-font: var(--e-global-typography-text-font-family, var(--brand-font));
    font-family: var(--axx-font);
    font-weight: 300;
    color: var(--brand-black);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 200;
}

strong, b {
    font-weight: 700;
}

/* ==========================================================================
   Interactions – Hover-Lift (Werte identisch zu axxento-behandlung-card)
   ==========================================================================
   .axx-hover-lift = manuell via Elementor (Advanced -> CSS Classes).
   Automatisch auf die vier Kachel-Typen (echtes Zielelement, nicht nur den
   aeusseren Wrapper). Der Schatten liegt aussen am Border-Box und wird vom
   eigenen overflow:hidden NICHT abgeschnitten.

   axxento-small-image-box gehoert bewusst dazu: sie ist eine Kachel derselben
   Familie wie axxento-image-box. Dass die kleine Variante sich anders verhaelt
   als die grosse, waere eine Inkonsistenz, keine Design-Entscheidung. Wer den
   Lift bei einem Kunden nicht will, ueberschreibt ihn dort. */

.axx-hover-lift,
.elementor-widget-call-to-action .elementor-cta,
.axxento-image-box,
.axxento-small-image-box,
.elementor-widget-axxento-products-slides .swiper-slide-inner {
    transition: box-shadow .25s ease, transform .25s ease;
}

.axx-hover-lift:hover,
.elementor-widget-call-to-action .elementor-cta:hover,
.axxento-image-box:hover,
.axxento-small-image-box:hover,
.elementor-widget-axxento-products-slides .swiper-slide-inner:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,.14);
    transform: translateY(-2px);
}

/* ==========================================================================
   Elementor-Widget-Defaults neutralisieren (site-weit)
   ==========================================================================
   Befund aus dem Vergleich mit der Referenz-Site des Erstkunden (gemessen
   per DevTools-Protokoll, nicht geschaetzt):

   Die Kit-Globals sind auf BEIDEN Seiten identisch
   (--e-global-color-primary:#F5D1C1, --e-global-typography-primary-font-size:90px).
   Der Unterschied entsteht erst durch Elementors eigene Widget-Default-CSS,
   die es lokal (Elementor 4.1.4) gibt und im Original (Elementor 3.x) nicht:

     .elementor-widget-heading .elementor-heading-title
         { color: var(--e-global-color-primary) }        -> Rose statt Schwarz
     .elementor-widget-call-to-action .elementor-cta__title
         { font-size: var(--e-global-typography-primary-font-size) }  -> 90px statt 32px

   Deshalb werden NICHT die Kit-Globals geaendert – deren Werte stimmen mit
   dem Original ueberein und werden anderswo bewusst genutzt. Neutralisiert
   wird die Bindung, die Elementor zusaetzlich mitbringt.

   Widgets mit eigener Farb-/Groessenangabe haben ID-Selektoren mit hoeherer
   Spezifitaet und bleiben unberuehrt (z.B. die hellen Footer-Ueberschriften). */

/* H1) Ueberschriften site-weit schwarz – wie im Original, wo Astras
   h1..h6{color:#000000} die letzte greifende Regel ist. Astras lokale
   Variable --ast-global-color-2 ist #1e293b und damit KEIN Schwarz,
   deshalb der Marken-Token statt der Theme-Variable. */
body .elementor-widget-heading .elementor-heading-title,
body .axxento-adv-heading__title{
    color: var(--brand-black);
}

/* H1b) Startseiten-Hero auf die Original-Groesse.
   Gemessen: Original 32px / font-weight 700 (uael-heading-text), lokal 40px /
   600. Die 40px kommen aus .elementor-kit-30 h1, das Gewicht aus Astras
   h1..h6{font-weight:600} – das Hero-Widget selbst bringt keine Typografie mit.
   Scope bewusst auf die H1 der Startseite: .axxento-adv-heading__title ist eine
   allgemeine Widget-Klasse, eine globale Groesse waere hier falsch.
   Die H1 bleibt – dass das Original gar keine hat, ist ein Mangel des
   Originals, kein Vorbild. */
.home h1.axxento-adv-heading__title{
    font-size: 32px;
    font-weight: 700;
}

/* H2) CTA-Ueberschrift auf die Groesse, die auch das Kit fuer h2 vorgibt
   (.elementor-kit-30 h2{font-size:32px}) und die das Original rendert
   (gemessen 32px / line-height 41.6px = 32 x 1.3). Ohne diese Regel greift
   Elementors Bindung an die Primary-Typografie mit 90px. */
body .elementor-widget-call-to-action .elementor-cta__title{
    font-size: 32px;
    line-height: 1.3em;
}

/* ==========================================================================
   Behandlungs-Archiv Layout   (nur behandlungen-Archive; ID-frei, reproduzierbar)
   ==========================================================================
   Ausgelesen aus Elementor (Ground Truth, nichts geraten):
   - Header #65 Logo-Section: > .elementor-container = max-width 1200px,
     Section-Padding desktop 40px 20px  ->  horizontaler Inset 20px.
   - Kit-Content-Width ist NICHT gesetzt (Elementor-Default 1140); der Header
     ueberschreibt bewusst auf 1200. Der Logo lebt in dieser 1200/20px-Box.
   Wir richten beide Archiv-Sektionen an EXAKT dieser Header-Box aus:
   -> linke Kante von "BEHANDLUNGEN" == linke Kante des Logos
   -> rechte Kante von "Good to know", Karten und Buttons == gleiche Content-Kante
   Scope: Body-Klassen + .axx-archive-* (keine Elementor-Element-IDs).
   Elementors Section-CSS nutzt ID-Selektoren (hoehere Spezifitaet) -> gezielt
   mit !important angeglichen, um IDs zu vermeiden. */

:root{
    --axx-content: 1200px;   /* = Header-Container-Breite (#65) */
    --axx-inset:   20px;     /* = horizontaler Header-Section-Inset (#65) */
}

/* 1) Headline "BEHANDLUNGEN" linksbuendig.
   Das frueher hier stehende color:#000 !important ist entfallen – Schwarz
   kommt jetzt aus der globalen Ueberschriften-Regel weiter oben. */
.post-type-archive-behandlungen .axx-archive-header .elementor-heading-title,
.tax-kategorie_behandlungen     .axx-archive-header .elementor-heading-title{
    text-align: left;
}

/* 2a) Einheitliche, zentrierte Content-Breite fuer BEIDE Sektionen */
.post-type-archive-behandlungen .axx-archive-header > .elementor-container,
.post-type-archive-behandlungen .axx-archive-body   > .elementor-container,
.tax-kategorie_behandlungen     .axx-archive-header > .elementor-container,
.tax-kategorie_behandlungen     .axx-archive-body   > .elementor-container{
    max-width: var(--axx-content) !important;
    margin-inline: auto;
}

/* 2b) Identischer horizontaler Inset wie der Header; vertikales Padding der
   Sektionen bleibt unveraendert (nur left/right werden gesetzt).
   -> beide Sektionen fluchten links UND rechts auf der Header-Content-Kante. */
.post-type-archive-behandlungen .axx-archive-header,
.post-type-archive-behandlungen .axx-archive-body,
.tax-kategorie_behandlungen     .axx-archive-header,
.tax-kategorie_behandlungen     .axx-archive-body{
    padding-left:  var(--axx-inset) !important;
    padding-right: var(--axx-inset) !important;
}

/* ==========================================================================
   Header: rechte Kante des TERMINE-Buttons auf die Content-Kante
   ==========================================================================
   Gemessen: die drei Spalten der Logo-Reihe sind 216 + 764 + 216 = 1196px
   breit, der Container aber 1200px. Die 4px Rest blieben rechts liegen, der
   TERMINE-Button endete dadurch auf 1316 statt 1320 – waehrend Meta-Leiste,
   Footer, Archiv und Detailseite alle auf 1320 sitzen.
   margin-left:auto laesst die letzte Spalte den Rest aufnehmen; der Wert wird
   also nicht gesetzt, sondern ergibt sich. Bei Reihen, deren Spalten den
   Container bereits fuellen (Meta-Leiste), bleibt es wirkungslos. */
.elementor-location-header .elementor-top-section > .elementor-container > .elementor-column:last-child{
    margin-left: auto;
}

/* ==========================================================================
   Footer Layout   (site-weit ueber .elementor-location-footer, Template #63)
   ==========================================================================
   Ausgelesen aus Elementor (#63):
   - Reihe 1 (Haupt-Footer): 4 Spalten a 25%  -> Summe 100%, content_width 1200.
   - Reihe 2 (Sub-Footer):   3 Spalten (.elementor-col-33 = 33.333%) -> Summe
     100%, ABER kein content_width -> Kit-Default 1140 (deshalb schmaler/versetzt).
   - Reihe 3: Copyright-Bar (1 Spalte 100%).
   Fix: alle Footer-Reihen auf dieselbe Content-Box wie Header/Archiv
   (--axx-content 1200 / --axx-inset 20px) -> linke Kante == Logo, rechte Kante
   der letzten Spalte == TERMIN-Button-Kante. Spalten fuellen die Box bereits;
   justify-content:space-between sichert die Rand-Ausrichtung auch bei <100%.
   Nur horizontale Verteilung/Breite; vertikale Paddings & Farben unberuehrt.
   Scope: Location-Klasse + .elementor-top-section (keine Element-IDs). */

.elementor-location-footer .elementor-top-section > .elementor-container{
    max-width: var(--axx-content) !important;
    margin-inline: auto;
    justify-content: space-between;
}

.elementor-location-footer .elementor-top-section{
    padding-left:  var(--axx-inset) !important;
    padding-right: var(--axx-inset) !important;
}

/* ==========================================================================
   Archiv-Feinschliff + Footer-Menue   (aus DB ermittelt, ID-frei)
   ========================================================================== */

/* B1) Content-Kanten des Archivs – aus der Geometrie, nicht aus Ausgleichswerten.
   ==========================================================================
   Referenz ist der Header-Container (1200px zentriert): links 120, rechts 1320.
   Der Logo-Header hat gap:no, die Archiv-Sektionen gap:default. Letzteres setzt
   .elementor-element-populated{padding:10px} und zieht jeden Inhalt 10px nach
   innen. Frueher stand hier ein margin-left:-10px an der Headline – das hat den
   Effekt nur an EINER Stelle kaschiert, waehrend Karten (-20px) und Pagination
   (-10px) rechts weiter zu kurz blieben.
   Jetzt wird stattdessen der Column-Gap dort entfernt, wo er stoert:

   Header-Sektion: beide Spalten ohne horizontales Gap-Padding
   -> "BEHANDLUNGEN" links auf 120, "Good to know" rechts auf 1320. */
.post-type-archive-behandlungen .axx-archive-header > .elementor-container > .elementor-column > .elementor-element-populated,
.tax-kategorie_behandlungen     .axx-archive-header > .elementor-container > .elementor-column > .elementor-element-populated{
    padding-left: 0;
    padding-right: 0;
}

/* Body-Sektion: Sidebar-Spalte buendig links, Hauptspalte exakt wie auf der
   Detailseite (padding-left 20px als Spaltenabstand, rechts 0). */
.post-type-archive-behandlungen .axx-archive-body > .elementor-container > .elementor-column:first-child > .elementor-element-populated,
.tax-kategorie_behandlungen     .axx-archive-body > .elementor-container > .elementor-column:first-child > .elementor-element-populated{
    padding-left: 0;
    padding-right: 0;
}
.post-type-archive-behandlungen .axx-archive-body > .elementor-container > .elementor-column:last-child > .elementor-element-populated,
.tax-kategorie_behandlungen     .axx-archive-body > .elementor-container > .elementor-column:last-child > .elementor-element-populated{
    padding-left: 20px;
    padding-right: 0;
}

/* Loop-Item: bringt nochmals 10px horizontales Padding mit (zusammen mit dem
   Spalten-Gap die 20px, um die die Karten rechts zu kurz waren). Vertikal
   bleibt es unangetastet – das traegt den Zeilenabstand des Grids. */
.post-type-archive-behandlungen .axx-archive-body .e-loop-item .elementor-element-populated,
.tax-kategorie_behandlungen     .axx-archive-body .e-loop-item .elementor-element-populated{
    padding-left: 0;
    padding-right: 0;
}

/* Hinweis: Hier stand bis v0.4.1 ein min-width:0 an den Loop-Items, das den
   intrinsischen Mindestbreiten-Beitrag der Karte neutralisiert hat (sonst
   sprengte .beh-card__media{flex:0 0 302px} unterhalb ~1100px die Content-Box).
   Seit axxento-core v1.2.0 traegt der Widget-Wrapper container-type:inline-size;
   inline-size-Containment nimmt der Karte diesen Beitrag bereits. Die Regel war
   damit wirkungslos und wurde entfernt (nachgemessen: ohne sie bleibt docW ==
   Viewport auf 768–1920px). */

/* B2) Menue (Sidebar) und Loop Grid oben auf gleicher Hoehe.
   Grid-Spalte hat margin-top:-10px, Menue-Spalte 0 -> Top-Margins der Body-
   Spalten neutralisieren + Spalten oben ausrichten. */
.post-type-archive-behandlungen .axx-archive-body > .elementor-container,
.tax-kategorie_behandlungen     .axx-archive-body > .elementor-container{
    align-items: flex-start;
}
.post-type-archive-behandlungen .axx-archive-body > .elementor-container > .elementor-column > .elementor-element-populated,
.tax-kategorie_behandlungen     .axx-archive-body > .elementor-container > .elementor-column > .elementor-element-populated{
    margin-top: 0 !important;
}
.post-type-archive-behandlungen .axx-archive-body .elementor-widget-nav-menu,
.tax-kategorie_behandlungen     .axx-archive-body .elementor-widget-nav-menu{
    /* Ground Truth (gerendert): Menue-Spalte top 432, erster Link 442, erste
       Karte 452 -> Menue-Link 10px zu hoch. +10px bringt Link-Oberkante == Karte. */
    margin-top: 10px !important;
}

/* B3) Footer-Menue ("UNSERE BEHANDLUNGEN") rendert riesig, weil das nav-menu die
   Kit-Primary-Groesse (90px) erbt. Angleichen an die anderen Footer-Links (16px). */
.elementor-location-footer .elementor-widget-nav-menu .elementor-item,
.elementor-location-footer .elementor-widget-nav-menu a{
    font-size: 16px !important;
    line-height: 1.6em !important;
    /* Nachbar-Links laufen jetzt ebenfalls in der Markenschrift (Gewicht 300).
       nav-menu erbt sonst 600 -> auf 300 + Markenschrift angleichen. */
    font-weight: 300 !important;
    /* font-family entfaellt: die literalen "Open Sans"-Typografien sind mit
       37-clean-font-family.php aus #63 entfernt, das Menue erbt jetzt den Kit. */
}

/* B3b) nav-menu-Item-Vertikalabstand an die Nachbar-Icon-List angleichen.
   Icon-List: space_between 7px zwischen Items, Text am Spaltenrand (0 Einzug).
   nav-menu default: padding 7px 5px pro Item -> ~14px Luecke + 5px Einzug.
   -> Item-Padding auf 0 0 7px 0 = gleicher 7px-Abstand, linksbuendig wie Nachbar. */
.elementor-location-footer .elementor-widget-nav-menu .elementor-nav-menu .elementor-item{
    padding: 0 0 7px 0 !important;
}

/* ==========================================================================
   Footer-Verteilung   (Normalisierung; Spalten fuellen die 1200er-Content-Box)
   ==========================================================================
   DB-Befund (#63): jede Reihe hat gleich grosse Spalten (Haupt 4x25%,
   Sub 3x33.3%) via .elementor-col-25/-33 -> Summe 100%. Gestreckte Spalten
   (flex:1 1 0) druecken die Inhalte auseinander. Stattdessen Spalten auf
   INHALTSBREITE (flex:0 1 auto) + justify-content:space-between am Container
   (siehe oben): erste Spalte links, LETZTE Spalte ("Oeffnungszeiten"/"Zahlung")
   rechtsbuendig an der 1200er-Content-Kante, Zwischenraeume gleich verteilt.
   Texte bleiben linksbuendig; Farben/BG/vertikale Paddings unberuehrt.
   Scope: Footer-Location + .elementor-section-Spalten. */
.elementor-location-footer .elementor-section > .elementor-container > .elementor-column{
    flex: 0 1 auto !important;
}

/* Aeussere Column-Gap-Paddings neutralisieren, damit der Inhalt der ERSTEN Spalte
   links und der LETZTEN Spalte ("Oeffnungszeiten"/"Zahlung") rechts BUENDIG an der
   1200er-Content-Kante sitzt (wie der Header-Button), statt 10px eingerueckt. */
.elementor-location-footer .elementor-section > .elementor-container > .elementor-column:first-child > .elementor-element-populated{
    padding-left: 0 !important;
}
.elementor-location-footer .elementor-section > .elementor-container > .elementor-column:last-child > .elementor-element-populated{
    padding-right: 0 !important;
}

/* Haupt-Footerzeile: ALLE vier Spalten ohne Gap-Einzug, damit der Text auf dem
   Raster sitzt.
   ==========================================================================
   Die Spaltenboxen stehen mit .elementor-col-25 sauber auf 120/420/720/1020.
   Der Text tat es nicht: Spalte 1 ist ueber die Regel darueber buendig (0),
   die Spalten 2-4 behielten den 10px-Gap-Einzug. Der Abstand von Textanfang zu
   Textanfang war dadurch 310/300/300 — die erste Luecke 10px groesser als die
   uebrigen (gemessen). Mit padding-left:0 an allen vier Spalten sitzt jeder
   Textanfang auf seiner Rasterlinie: 300/300/300.

   Nur die Hauptzeile (:first-child): die Sub-Footer-Reihe behaelt ihren Einzug
   und wird ueber die :first-child-Regel darueber weiter allein an der linken
   Kante gefuehrt. */
.elementor-location-footer .elementor-top-section:first-child > .elementor-container > .elementor-column > .elementor-element-populated{
    padding-left: 0 !important;
}

/* Kein Sonderfall fuer die letzte Spalte (Historie, damit es nicht wiederkehrt)
   ==========================================================================
   Hier stand zeitweise eine Regel, die den OEFFNUNGSZEITEN-Block per
   width:fit-content + margin-left:auto rechts an die Content-Kante zog. Sie
   ist entfernt: die vier Spalten sind .elementor-col-25, also je 25 % bzw.
   300px bei 1440vw, und dieses Raster ist von sich aus gleichmaessig. Die
   Regel war das Einzige, was col4 aus dem Raster geschoben und die Luecke
   UNSERE BEHANDLUNGEN -> OEFFNUNGSZEITEN optisch vergroessert hat.

   Bewusst NICHT nachgeruestet: eine Variante mit Spalten auf Inhaltsbreite
   und justify-content:space-between. Gemessen summieren sich die vier Spalten
   auf natuerlicher Breite zu 1237px bei 1200px Container – Freiraum -37px.
   space-between verteilt Freiraum; bei negativem gibt es nichts zu verteilen,
   die Spalten wuerden gestaucht (Luecken 0/0/0) und unter 1240px umbrechen.

   Ergebnis der Abwaegung: Gleichmaessigkeit hat Vorrang vor Kantenbuendigkeit.
   col4 endet damit sichtbar vor 1320 – das ist gewollt, kein Fehler. */

/* Footer Mobile (<=767px) – gestapelte Spalten einheitlich ausrichten.
   ==========================================================================
   Desktop verteilt die 4 Spalten horizontal (flex:0 1 auto + space-between,
   :first-child padding-left:0, :last-child padding-right:0) – korrekt fuer die
   Reihe. Beim Stapeln unter 767px erbt Spalte 1 (WIR SIND FUER DICH DA + Adresse)
   dadurch padding-left:0 -> buendig 20px, die Spalten 2-4 (Marke, UNSERE
   BEHANDLUNGEN, OEFFNUNGSZEITEN) behalten das 10px-Column-Gap -> 30px, also 10px
   versetzt. Zusaetzlich ist der vertikale Abstand nach Spalte 1 kleiner (~31px)
   als zwischen den uebrigen Bloecken (~66px).
   Fix nur fuer Mobile: alle Bloecke buendig auf die 20px-Content-Kante (wie Logo
   und Kacheln) + Abstand nach Spalte 1 angeglichen. Desktop/Tablet (>=768px, dort
   stehen die Spalten noch nebeneinander) bleiben unberuehrt. */
@media (max-width: 767px){
    .elementor-location-footer .elementor-top-section > .elementor-container > .elementor-column > .elementor-element-populated{
        padding-left: 0 !important;
    }
    .elementor-location-footer .elementor-top-section > .elementor-container > .elementor-column:first-child{
        margin-bottom: 35px !important;
    }
}

/* ==========================================================================
   Header Layout   (site-weit ueber .elementor-location-header, Template #65)
   ==========================================================================
   Ausgelesen aus Elementor (#65, Ground Truth):
   - Meta-Leiste (Section 5be1bc3c): Container max-width 1200, aber Section-
     Padding horizontal 0 (links) -> Text startet 20px weiter links als das Logo.
     Graue Vollbreiten-BG liegt auf der Section (background classic).
   - Logo-Section (43756106): Container max-width 1200, Section-Padding 40px 20px
     -> horizontaler Inset 20px; das Logo lebt in dieser 1200/20px-Box.
   Fix: BEIDE Header-Sections auf dieselbe Content-Box (--axx-content 1200 /
   --axx-inset 20px) -> Meta-Text fluchtet links UND rechts mit dem Logo.
   Nur horizontaler Inset + Container-Breite; vertikale Paddings, Farben und die
   graue Section-BG (Vollbreite) bleiben unberuehrt.
   Scope: Location-Klasse + .elementor-top-section (keine Element-IDs).
   Elementors Section-CSS nutzt hoehere Spezifitaet -> !important zum Angleichen. */

.elementor-location-header .elementor-top-section > .elementor-container{
    max-width: var(--axx-content) !important;
    margin-inline: auto;
}

.elementor-location-header .elementor-top-section{
    padding-left:  var(--axx-inset) !important;
    padding-right: var(--axx-inset) !important;
}

/* Header-Feinausrichtung – Logo, Hamburger, Meta-Icon buendig an die Content-Kante.
   ==========================================================================
   Sonde 56-header-probe.js (1440/390/360):
   - Logo-Widget hat auf Mobile margin-left ~24px (390)/22px (360) -> Logo bei 45px
     statt 20px. Desktop bereits buendig (margin 0, left=120=Content-Kante).
   - Hamburger (.elementor-menu-toggle, nur Mobile sichtbar) hat margin ~31.5px (390)
     -> rechter Abstand 52px statt 20px.
   - Meta-Icon-List: 10px Column-Padding + ~6.6px Widget-margin-left -> Pin-Icon bei
     37px (Mobile) bzw. 130px (Desktop, 10px neben dem Logo bei 120).
   - Meta-Text line-height 25.6px bei Schrift ~9px -> ~2.7x, zu luftig.
   Fix (alle Breiten): Column-Paddings + betroffene Widget-Margins der Header-Spalten
   auf 0 -> Logo/Hamburger/Meta-Icon buendig auf 20px (Mobile) bzw. 120px (Desktop);
   Meta-Zeilenabstand auf 1.35. Nur horizontale Ausrichtung + Zeilenhoehe, vertikale
   Paddings/Farben/BG unberuehrt. */
.elementor-location-header .elementor-top-section > .elementor-container > .elementor-column > .elementor-element-populated{
    padding-left:  0 !important;
    padding-right: 0 !important;
}
.elementor-location-header .elementor-widget-theme-site-logo{
    margin-left: 0 !important;
}
.elementor-location-header .elementor-menu-toggle{
    margin-left:  0 !important;
    margin-right: 0 !important;
    /* Toggle fuellt (nach margin:0) die col-33-Spalte und zentriert das Icon
       (nav-menu align-center) -> Icon saesse ~52px vom Rand. Icon rechtsbuendig
       + rechtes Padding weg -> Hamburger-Icon buendig auf die 20px-Kante wie das Logo. */
    justify-content: flex-end !important;
    padding-right: 0 !important;
}
.elementor-location-header .elementor-widget-icon-list{
    margin-left:  0 !important;
    margin-right: 0 !important;
}
.elementor-location-header .elementor-icon-list-text{
    line-height: 1.35 !important;
}

/* ==========================================================================
   Markenschrift site-weit — steuerbar ueber Elementor Site Settings
   ==========================================================================
   Ground Truth (Live-Render + CDP getMatchedStylesForNode):
   - Die 4 globalen Kit-Variablen (--e-global-typography-*-font-family) setzt
     der Kit (.elementor-kit-30) selbst auf die im Backend gewaehlte Schrift.
   - "Open Sans" kam frueher NICHT aus einer Variable, sondern war in einzelnen
     Elementor-Widget-Typografien literal eingebacken (Header #65, Footer #63,
     Home #165, Archiv #58, ...). Diese Literale sind mit 37-clean-font-family.php
     aus der DB entfernt; die Widgets erben jetzt die Kit-Globals.
   Deshalb ist die fruehere !important-Wand ersatzlos entfallen: sie nagelte die
   Variablen fest und blockierte damit jeden Wechsel unter
   Site Settings -> Globale Schriftarten.
   --brand-font bleibt als reiner FALLBACK, falls der Kit keine Schrift liefert.
   Die body-Regel dazu steht oben unter "Basis-Typografie". */

/* ==========================================================================
   Loop-Grid-Pagination (Behandlungs-Archiv + Kategorie-Archive)
   ==========================================================================
   1:1 aus pagination-vorschau.html, gemappt auf die ECHTEN Elementor-Loop-Grid-
   Klassen (Live-Render abgelesen):
   - Wrapper: nav.elementor-pagination
   - Zahlen:  a.page-numbers / span.page-numbers.current (aktive Seite)
   - Prev/Next: .page-numbers.prev / .page-numbers.next (Chevron = Label-Text ‹ ›)
   - Auf Seite 1 rendert Elementor die deaktivierte Prev als <span> (kein href)
     -> grau. Aktive Prev/Next sind <a>.
   Marken-Schrift (Neue Helvetica), keine Open-Sans-Erbschaft.
   Scope: Body-Klassen des Archivs/der Kategorie (keine Element-IDs). */

.post-type-archive-behandlungen .elementor-pagination,
.tax-kategorie_behandlungen     .elementor-pagination{
    display: flex; align-items: center; justify-content: center;
    gap: 16px;
    margin-top: 48px;   /* Luft zwischen Karten und Pagination */
    font-family: var(--axx-font, var(--brand-font));
}

/* Zahlen (Links + aktuelle Seite) */
.post-type-archive-behandlungen .elementor-pagination .page-numbers,
.tax-kategorie_behandlungen     .elementor-pagination .page-numbers{
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 48px; padding: 0 4px;
    font-family: var(--axx-font, var(--brand-font));
    font-size: 1.15rem; font-weight: 400; line-height: 1;
    color: #000; text-decoration: none; border: 0;
    transition: color .2s, background .2s, border-color .2s;
}
.post-type-archive-behandlungen .elementor-pagination a.page-numbers:hover,
.tax-kategorie_behandlungen     .elementor-pagination a.page-numbers:hover{
    color: var(--brand-grey-text);   /* aktiver Link, braucht Kontrast (6.1) */
}

/* Aktive Seite = schwarzer Kreis */
.post-type-archive-behandlungen .elementor-pagination span.page-numbers.current,
.tax-kategorie_behandlungen     .elementor-pagination span.page-numbers.current{
    width: 48px; min-width: 48px; height: 48px; border-radius: 50%;
    background: #000; color: #fff;
}

/* Prev/Next = Kreis mit Rand + Chevron */
.post-type-archive-behandlungen .elementor-pagination .page-numbers.prev,
.post-type-archive-behandlungen .elementor-pagination .page-numbers.next,
.tax-kategorie_behandlungen     .elementor-pagination .page-numbers.prev,
.tax-kategorie_behandlungen     .elementor-pagination .page-numbers.next{
    width: 48px; min-width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid #000; padding: 0;
    font-size: 1.4rem; color: #000;
}
/* Aktive Prev/Next (<a>) im Hover: schwarz gefuellt, Chevron weiss */
.post-type-archive-behandlungen .elementor-pagination a.page-numbers.prev:hover,
.post-type-archive-behandlungen .elementor-pagination a.page-numbers.next:hover,
.tax-kategorie_behandlungen     .elementor-pagination a.page-numbers.prev:hover,
.tax-kategorie_behandlungen     .elementor-pagination a.page-numbers.next:hover{
    background: #000; color: #fff;
}
/* Deaktivierte Prev/Next (<span>, z.B. Prev auf Seite 1) = grau
   BEWUSST bei --brand-grey (#ABABAD, 2,29:1) belassen, nicht auf
   --brand-grey-text umstellen. WCAG 1.4.3 nimmt deaktivierte Bedienelemente
   vom Kontrastminimum ausdruecklich aus; das Grau IST hier die Aussage
   "nicht bedienbar" und wird durch pointer-events:none gestuetzt. Ein
   dunkleres Grau wuerde den Unterschied zum aktiven Zustand einebnen.
   Entscheidung 6.1, Paulo, 20.07.2026. Bitte nicht "korrigieren". */
.post-type-archive-behandlungen .elementor-pagination span.page-numbers.prev,
.post-type-archive-behandlungen .elementor-pagination span.page-numbers.next,
.tax-kategorie_behandlungen     .elementor-pagination span.page-numbers.prev,
.tax-kategorie_behandlungen     .elementor-pagination span.page-numbers.next{
    border-color: var(--brand-grey); color: var(--brand-grey);
    pointer-events: none;
}

/* Pagination Mobile (<=767px) – kompakter, damit sie nicht ueber die Content-
   Kante laeuft (6 Elemente a 48px + 16px Gap = ~344px sprengen 360px). Kleinere
   Kreise + kleinerer Gap, flex-wrap als Sicherheitsnetz. Zentriert bleibt. */
@media (max-width: 767px){
    .post-type-archive-behandlungen .elementor-pagination,
    .tax-kategorie_behandlungen     .elementor-pagination{
        gap: 8px;
        flex-wrap: wrap;
    }
    .post-type-archive-behandlungen .elementor-pagination .page-numbers,
    .tax-kategorie_behandlungen     .elementor-pagination .page-numbers{
        min-width: 34px; height: 38px; font-size: 1rem;
    }
    .post-type-archive-behandlungen .elementor-pagination span.page-numbers.current,
    .tax-kategorie_behandlungen     .elementor-pagination span.page-numbers.current,
    .post-type-archive-behandlungen .elementor-pagination .page-numbers.prev,
    .post-type-archive-behandlungen .elementor-pagination .page-numbers.next,
    .tax-kategorie_behandlungen     .elementor-pagination .page-numbers.prev,
    .tax-kategorie_behandlungen     .elementor-pagination .page-numbers.next{
        width: 38px; min-width: 38px; height: 38px;
    }
    .post-type-archive-behandlungen .elementor-pagination .page-numbers.prev,
    .post-type-archive-behandlungen .elementor-pagination .page-numbers.next,
    .tax-kategorie_behandlungen     .elementor-pagination .page-numbers.prev,
    .tax-kategorie_behandlungen     .elementor-pagination .page-numbers.next{
        font-size: 1.15rem;
    }
}

/* ==========================================================================
   Kategorie-Seiten: aktive Kategorie im Sidebar-Menue hervorheben
   ==========================================================================
   Die Sidebar ist ein Elementor-Nav-Menu; die Kategorien sind Sub-Items.
   Elementor markiert den aktiven Eintrag mit .elementor-item-active, WP
   zusaetzlich mit .current-menu-item. Aktiv = fett + schwarz (markenkonform;
   Standard-Items sind grau/500). Scope: Behandlungs-Archiv + Kategorie-Archive. */
.post-type-archive-behandlungen .elementor-widget-nav-menu .elementor-item-active,
.post-type-archive-behandlungen .elementor-widget-nav-menu .current-menu-item > a,
.tax-kategorie_behandlungen     .elementor-widget-nav-menu .elementor-item-active,
.tax-kategorie_behandlungen     .elementor-widget-nav-menu .current-menu-item > a{
    color: #000 !important;
    font-weight: 700 !important;
}

/* Dynamische Archiv-Headline optisch wie zuvor in Grossbuchstaben, waehrend der
   H1-Text (Kategoriename) fuer SEO in natuerlicher Schreibweise bleibt. */
.post-type-archive-behandlungen .axx-archive-header .elementor-heading-title,
.tax-kategorie_behandlungen     .axx-archive-header .elementor-heading-title{
    text-transform: uppercase;
}

/* ==========================================================================
   Einzelbehandlung – Detailseite (Master)
   Scope: .single-behandlungen, keine Element-IDs
   ==========================================================================
   Markup kommt aus axxento-core:
     axxento-behandlung-detail        -> .detail-card / .detail-prices
     axxento-behandlung-beschreibung  -> .detail-desc
   Werte 1:1 aus behandlung-detail-vorschau.html. Content-Box ueber die
   bestehenden Tokens --axx-content / --axx-inset -> Flucht mit Logo und Archiv. */

/* D1) Content-Box exakt wie Header/Archiv. */
.single-behandlungen .elementor-location-single > .elementor-section > .elementor-container{
    max-width: var(--axx-content) !important;
    margin-inline: auto;
}
.single-behandlungen .elementor-location-single > .elementor-section{
    padding-left:  var(--axx-inset) !important;
    padding-right: var(--axx-inset) !important;
}

/* D2) Oberkanten Sidebar und Karte buendig. Elementors Spalten-Gap setzt
   .elementor-element-populated{padding:10px} und schiebt beide Spalten
   unterschiedlich an – Section-gap steht auf "no", der Rest wird hier
   neutralisiert (gleiche Logik wie im Archiv). */
.single-behandlungen .elementor-location-single .elementor-widget-wrap.elementor-element-populated{
    padding-top: 0;
}

/* ---------- Detail-Karte ---------- */
.single-behandlungen .detail-card{
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    overflow: hidden;
    margin-bottom: 40px;
}
.single-behandlungen .detail-card__media{
    flex: 0 0 380px;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}
.single-behandlungen .detail-card .detail-card__media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.single-behandlungen .detail-card__body{
    flex: 1 1 auto;
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
}

.single-behandlungen .detail-eyebrow{
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 300;
    color: #000;
    margin-bottom: 14px;
}
.single-behandlungen .detail-title{
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 600;
    color: #000;
    margin-bottom: 18px;
}
.single-behandlungen .detail-teaser{
    font-size: 1rem;
    line-height: 1.6;
    color: #000;
    margin-bottom: 18px;
    max-width: 42em;
}
/* Unterstrich kommt aus border-bottom, nicht aus text-decoration – deshalb
   kein text-underline-offset (waere wirkungslos). line-height:1 laesst die Box
   den Text eng umschliessen, padding-bottom:3px setzt den Abstand zum Strich.
   Analog zu .beh-card__more in axxento-core. */
.single-behandlungen .detail-more{
    align-self: flex-start;
    font-size: .85rem;
    font-weight: 300;
    line-height: 1;
    color: #000;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
}

/* D3) Preisblock als Grid mit vier festen Zeilen:
   1 Label · 2 Dauer · 3 Preis · 4 Button.
   Dadurch liegen beide Optionen zeilenweise garantiert auf gleicher Hoehe,
   unabhaengig von der Textlaenge. */
.single-behandlungen .detail-prices{
    margin-top: auto;
    padding-top: 32px;
    display: grid;
    justify-content: end;
    grid-template-columns: 200px;
    grid-template-rows: auto auto auto auto;
    column-gap: 40px;
}
.single-behandlungen .detail-prices.has-two{
    grid-template-columns: 200px 200px;
    /* Linker Button an die linke, rechter an die rechte Content-Kante -> gleicher
       Randabstand beidseitig, Luft in der Mitte. Preise/Infos sind pro Spalte
       rechtsbuendig (text-align:right/flex-end oben) an ihrer Button-Kante. */
    justify-content: space-between;
}
.single-behandlungen .detail-price__label{
    grid-row: 1;
    text-align: right;
    font-size: .72rem;
    letter-spacing: .05em;
    font-weight: 300;
    color: var(--brand-grey-text);   /* 6.1 */
    margin-bottom: 6px;
}
.single-behandlungen .detail-price__duration{
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    font-size: .9rem;
    color: var(--brand-grey-text);   /* 6.1 */
    margin-bottom: 8px;
}
.single-behandlungen .detail-price__duration svg{
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.single-behandlungen .detail-price__value{
    grid-row: 3;
    text-align: right;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    line-height: 1.1;
    margin-bottom: 16px;
}
.single-behandlungen .detail-btn{
    grid-row: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border-radius: 0;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: background .2s;
}
.single-behandlungen .detail-btn:hover{
    background: var(--brand-grey-text);   /* weisse Schrift darauf, 4,54:1 (6.1) */
}
.single-behandlungen .d-c1{ grid-column: 1; }
.single-behandlungen .d-c2{ grid-column: 2; }

/* ---------- Beschreibung ---------- */
.single-behandlungen .detail-desc{
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    padding: 40px 48px;
    margin-bottom: 56px;
}
.single-behandlungen .detail-desc p{
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 18px;
}
.single-behandlungen .detail-desc__ablauf-title{
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 300;
    color: var(--brand-grey-text);   /* 6.1 */
    margin: 28px 0 14px;
}
.single-behandlungen .detail-desc ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.single-behandlungen .detail-desc li{
    position: relative;
    padding-left: 22px;
    margin-bottom: 9px;
    font-size: 1rem;
    list-style: none;
}
.single-behandlungen .detail-desc li::before{
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #000;
}

/* D4) Mobile – 1:1 aus der Vorschau. */
@media (max-width: 900px){
    .single-behandlungen .detail-card{ flex-wrap: wrap; }
    .single-behandlungen .detail-card__media{ flex: 1 1 100%; height: 260px; }
    .single-behandlungen .detail-card__body{ padding: 28px 24px; }
    .single-behandlungen .detail-title{ font-size: 1.6rem; }
    .single-behandlungen .detail-prices{ justify-content: start; }
    .single-behandlungen .detail-desc{ padding: 28px 24px; }
}

/* D5) Handy (<600px): zwei Varianten untereinander stapeln.
   Das feste Raster hat-two = 200px + 200px + 40px column-gap = 440px passt
   nicht in den ~310px breiten Kartenkoerper (360-390px Viewport). Da
   .detail-card{overflow:hidden} traegt, wird sonst die zweite Variante samt
   Teaser rechts abgeschnitten (unsichtbar/unbuchbar auf dem Handy).
   Loesung: einspaltig, Option 1 (Classic) als Block, darunter Option 2
   (Intense), Buttons volle Breite. Die Zeilenzuordnung ist noetig, weil das
   Markup die Zellen nach Typ interleaved ausgibt (label/dauer/preis/button je
   Spalte), nicht nach Option. Tablet (768px) und Desktop bleiben unberuehrt –
   dort greift das bestehende 2x200px-Raster weiter. */
@media (max-width: 600px){
    .single-behandlungen .detail-prices.has-two{
        grid-template-columns: 1fr;
        column-gap: 0;
        justify-content: stretch;
    }
    /* Alle Zellen in die einzige Spalte. */
    .single-behandlungen .detail-prices.has-two .d-c1,
    .single-behandlungen .detail-prices.has-two .d-c2{ grid-column: 1; }
    /* Block 1 – Option 1 (Classic, ohne Label). */
    .single-behandlungen .detail-prices.has-two .detail-price__duration.d-c1{ grid-row: 1; }
    .single-behandlungen .detail-prices.has-two .detail-price__value.d-c1{ grid-row: 2; }
    .single-behandlungen .detail-prices.has-two .detail-btn.d-c1{ grid-row: 3; }
    /* Block 2 – Option 2 (Intense), durch Label + Abstand abgesetzt. */
    .single-behandlungen .detail-prices.has-two .detail-price__label.d-c2{ grid-row: 4; margin-top: 24px; }
    .single-behandlungen .detail-prices.has-two .detail-price__duration.d-c2{ grid-row: 5; }
    .single-behandlungen .detail-prices.has-two .detail-price__value.d-c2{ grid-row: 6; }
    .single-behandlungen .detail-prices.has-two .detail-btn.d-c2{ grid-row: 7; }

    /* Button kuerzer (200px), linksbuendig verankert (justify-items:start).
       Preise/Infos rechtsbuendig an der AUSSENKANTE des Buttons: gleiche 200px-
       Box wie der Button, Inhalt rechts -> rechte Kante fluchtet mit dem Button. */
    .single-behandlungen .detail-prices.has-two{ justify-items: start; }
    /* Breite von Button UND Preis-Boxen identisch (85% der Karte) -> beide
       Varianten gleich breit, Preise rechtsbuendig an der Button-Kante, und der
       Rechts-Abstand ist kleiner als bei fixen 200px (skaliert mit der Breite). */
    .single-behandlungen .detail-prices.has-two .detail-price__label,
    .single-behandlungen .detail-prices.has-two .detail-price__value{
        width: 85%;
        text-align: right;
    }
    .single-behandlungen .detail-prices.has-two .detail-price__duration{
        width: 85%;
        justify-content: flex-end;
    }
    .single-behandlungen .detail-prices.has-two .detail-btn{
        width: 85%;
        min-width: 0;
        padding: 0 32px;
    }
}

/* Karten-Breite Mobile (<=767px) – Behandlungs-Karten buendig auf die 20px-
   Content-Kante wie der Rest der Seite. Ursache (Sonde 58-card-probe): die
   Content-Spalte traegt auf Desktop 20px Abstand links zum Sidebar/Menue; beim
   Stapeln auf Mobile bleibt der und schiebt die Karte auf 40px statt 20px.
   Mobile: Gap raus -> Karte buendig 20px. Desktop (Sidebar sichtbar) unveraendert. */
@media (max-width: 767px){
    /* Archiv + Kategorie: Grid-Spalte (bestehende 20px-Regel oben neutralisieren). */
    .post-type-archive-behandlungen .axx-archive-body > .elementor-container > .elementor-column:last-child > .elementor-element-populated,
    .tax-kategorie_behandlungen     .axx-archive-body > .elementor-container > .elementor-column:last-child > .elementor-element-populated{
        padding-left: 0 !important;
    }
    /* Detailseite: Karten-/Beschreibungs-Spalte buendig. */
    .single-behandlungen .elementor-location-single .elementor-widget-wrap.elementor-element-populated{
        padding-left: 0 !important;
    }
}

/* Content-Breite Mobile (<=767px) – ALLE Inhalts-Widgets auf die 20px-Content-
   Kante vereinheitlichen (Seiten-Templates: Startseite, Team-Store, Kontakt, FAQ).
   ==========================================================================
   Audit (60/61): Widgets sassen in drei Breiten – 20px (korrekt), 48px (Spalten-
   Padding 48 bzw. schmale Content-Breite ~295px) und 10px (Section-Padding 0 +
   Spalten-Padding 10). Ursache: uneinheitliches Elementor-Section/Spalten-Padding
   je Bereich. Fix nur fuer wp-page-Templates: Container voll breit, Top-Section
   einheitlich 20px Inset, alle Spalten-Paddings horizontal 0 -> alles buendig 20px.
   Archiv/Kategorie (Karten schon 20px, Loop-Struktur) und Detailseite sind NICHT
   betroffen (anderer data-elementor-type). Nur horizontal; vertikal/Farben bleiben. */
@media (max-width: 767px){
    /* Hero AUSGENOMMEN: erste Top-Section (Hero) behaelt ihr Spezial-Layout
       (Hintergrund + Text/Bild-Spalten) -> nicht auf die 20px-Kante zwingen. */
    [data-elementor-type="wp-page"] .elementor-top-section:not(:first-of-type) .elementor-container{
        max-width: 100% !important;
    }
    [data-elementor-type="wp-page"] .elementor-top-section:not(:first-of-type){
        padding-left:  20px !important;
        padding-right: 20px !important;
    }
    [data-elementor-type="wp-page"] .elementor-top-section:not(:first-of-type) .elementor-column > .elementor-element-populated{
        padding-left:  0 !important;
        padding-right: 0 !important;
    }
}

/* Hero-Bildspalte Mobile (<=767px) – full-bleed + Hoehe + Cover.
   ==========================================================================
   Die Hero-Section (erste Section) ist oben von der 20px-Normalisierung
   ausgenommen -> bleibt randlos. Hier zusaetzlich: die (leere) Bildspalte
   bekommt mobil eine Mindesthoehe und der Spalten-Hintergrund fuellt per cover.
   Damit erscheint das Hero-Bild randlos und richtig, sobald es in Elementor als
   Spalten-Hintergrund gesetzt UND publiziert ist (die Bildquelle bleibt Inhalt).
   Nicht auf der Startseite (.home), deren Hero anders aufgebaut ist. */
@media (max-width: 767px){
    body:not(.home) [data-elementor-type="wp-page"] .elementor-top-section:first-of-type > .elementor-container > .elementor-column:first-child{
        min-height: 260px;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
}

/* Karten-Schatten Mobile (<=767px) – kleiner, damit er an der 20px-Kante nicht
   ueber den Viewport-Rand hinausblutet (24px-Blur bei 20px-Inset ragte hinaus). */
@media (max-width: 767px){
    .single-behandlungen .detail-card,
    .single-behandlungen .detail-desc,
    .beh-card{
        box-shadow: 0 3px 12px rgba(0, 0, 0, .08) !important;
    }
}

/* Image-Box: equal-height mit Button unten buendig (wie Call-to-Action).
   ==========================================================================
   Das Widget hat den Control "Equal Height" (setzt height:100% -> Karten gleich
   hoch, da Elementor-Spalten stretchen). Es fehlte aber die interne Flex-
   Verteilung, damit der Button ans untere Ende rueckt: bisher sitzt er direkt
   unter dem Text und wandert je nach Textlaenge. Fix wie beim CTA (Widget 1):
   Wrapper + Content als Flex-Spalte, Button-Wrapper margin-top:auto -> Button
   immer unten, damit alle Buttons einer Reihe fluchten. Alle Breiten.
   Gilt fuer alle vertikalen Image-Boxen (Bild oben / ohne Positions-Klasse);
   left/right ausgenommen. Die 3-Karten-Reihe hat teils keine .elementor-position-
   top-Klasse, daher :not(left):not(right) statt .position-top.
   (Generische Widget-Funktion – langfristig besser in axxento-core/Widget-CSS;
   hier im Theme fuer sofortige Wirkung ohne OPcache-Reload.) */
.elementor-widget-axxento-image-box:not(.elementor-position-left):not(.elementor-position-right) .elementor-image-box-wrapper{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.elementor-widget-axxento-image-box:not(.elementor-position-left):not(.elementor-position-right) .elementor-image-box-img{
    margin-top: 0 !important;   /* embedded margin:auto (>=768px) wuerde sonst den Flex-Freiraum fressen */
    flex: 0 0 auto;
}
.elementor-widget-axxento-image-box:not(.elementor-position-left):not(.elementor-position-right) .elementor-image-box-content{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.elementor-widget-axxento-image-box .elementor-image-box-button-wrapper{
    margin-top: auto;
}

/* Call-to-Action-Reihe (Startseite: Deine erste / Apparative / Klassische) –
   gleiche Kartenhoehe + Button unten fluchtend auch auf Tablet/Mobil (<=1024px).
   ==========================================================================
   Sonde 65/66: das sind Elementor-call-to-action-Widgets. Auf Desktop (1200px)
   fluchten sie bereits. Bei <=768px strecken die Spalten nicht auf gleiche Hoehe
   und der Button floss hinter dem unterschiedlich langen Text. Fix: Row-Spalten
   strecken (align-items:stretch) + CTA fuellt die Spaltenhoehe; Content als Flex-
   Spalte + Button-Wrapper margin-top:auto -> Buttons fluchten unten. */
@media (max-width: 1024px){
    .elementor-container:has(> .elementor-column > .elementor-widget-wrap > .elementor-widget-call-to-action){
        align-items: stretch !important;
    }
    .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-call-to-action) > .elementor-widget-wrap{
        height: 100%;
    }
    .elementor-widget-call-to-action,
    .elementor-widget-call-to-action > .elementor-widget-container,
    .elementor-widget-call-to-action .elementor-cta{
        height: 100%;
    }
    /* Karten sind jetzt gleich hoch (Stretch), aber der Button floss hinter dem
       unterschiedlich langen Text -> ans untere Ende pinnen: Content als Flex-
       Spalte, Button-Wrapper margin-top:auto. So fluchten die Buttons. */
    .elementor-widget-call-to-action .elementor-cta__content{
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .elementor-widget-call-to-action .elementor-cta__button-wrapper,
    .elementor-widget-call-to-action .elementor-cta__button{
        margin-top: auto;
    }
}

/* Behandlungskarte (Archiv/Kategorie) – schmale Karte (Container <=640px),
   zwei Varianten: Preise/Zeiten rechtsbuendig an der jeweiligen Button-Kante,
   Buttons auf volle Spaltenhaelfte (c1 links, c2 rechts, Gap in der Mitte) ->
   linker Button an linke Kante, rechter an rechte Kante (symmetrisch).
   Gegenstueck zur Detail-Karte. Das Karten-Widget traegt container-type:inline-
   size (axxento-core), daher greift die Container-Query auch aus dem Theme.
   Ueberschreibt die linksbuendige Standard-Regel der Karten-Container-Query. */
@container (max-width: 640px){
    /* Gleiche Spaltenbreite erzwingen (1fr = minmax(auto,1fr) wird sonst
       content-getrieben ungleich -> Buttons unterschiedlich lang). */
    .beh-card__body.has-two{
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }
    .beh-card__body.has-two .beh-price__label,
    .beh-card__body.has-two .beh-price__value{
        text-align: right !important;
    }
    .beh-card__body.has-two .beh-price__duration{
        justify-content: flex-end !important;
    }
    .beh-card__body.has-two .beh-btn{
        justify-self: stretch !important;   /* fuellt die (jetzt gleiche) Spalte -> beide Buttons gleich lang */
    }
    /* Einzel-Variante: Button ebenfalls volle Spaltenbreite (rechte Haelfte) ->
       gleiche Breite wie die Doppel-Karten-Buttons (134px statt content-schmal). */
    .beh-card__body:not(.has-two) .beh-btn{
        justify-self: stretch !important;
    }
}

/* ==========================================================================
   Back-to-Top-Button (Astra #ast-scroll-top) – Markendesign, site-weit
   ==========================================================================
   Ist-Zustand laut Astras Dynamik-CSS (am Live-Render ausgelesen):
       #ast-scroll-top{background-color:var(--ast-global-color-0);font-size:15px}
       #ast-scroll-top{width:2.1em;height:2.1em;line-height:2.1;color:#fff;
                       border-radius:2px}
       #ast-scroll-top .ast-icon.icon-arrow svg{
                       transform:translate(0,-20%) rotate(180deg);width:1.6em}

   Das Blau (#046BD2) ist KEIN Customizer-Setting, sondern Astras globale
   Palettenfarbe --ast-global-color-0. Es wird deshalb hier im Child-Theme
   ueberschrieben statt im Customizer – so bleibt die Optik versioniert.

   WICHTIG: Astras JS setzt beim Scrollen inline style="display:block" bzw.
   "display:none". 'display' darf hier daher NICHT gesetzt werden – ein
   display:flex zum Zentrieren wuerde vom Inline-Style ueberstimmt, und mit
   !important bliebe der Button dauerhaft sichtbar. Zentriert wird darum ueber
   line-height (Astra liefert text-align:center bereits mit).

   Referenz Hersteller-Shop des Erstkunden: 40x40, Kreis, kein Rand, padding 0, Icon 24x24,
   duenner Chevron. Hover-Logik (schwarz/weiss, .2s) wie bei den
   Pagination-Pfeilen. */
#ast-scroll-top{
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--brand-taupe);
    color: var(--brand-black);                /* der Chevron erbt sie via currentColor */
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: background-color .2s ease, color .2s ease;
}
#ast-scroll-top:hover,
#ast-scroll-top:focus-visible{
    background-color: var(--brand-black);
    color: var(--brand-white);
}

/* Astras Icon ist ein gefuellter, breiter Pfeil in nicht-quadratischer viewBox
   (gerendert 24x9) – daraus laesst sich per CSS kein duenner 24x24-Chevron
   machen. Astras Icon wird deshalb ausgeblendet und durch ein Inline-SVG als
   Maske ersetzt: die Maske liefert die Form, die Flaeche kommt aus
   currentColor. Dadurch folgt der Chevron automatisch dem Hover-Wechsel und
   bleibt exakt 24x24. Bleibt komplett im Child-Theme, kein Markup-Eingriff. */
#ast-scroll-top .ast-icon{
    display: none;
}
#ast-scroll-top::after{
    content: "";
    position: absolute;                       /* Bezug: Astras position:fixed am Button */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
}

/* ==========================================================================
   Behandlungs-Archiv – Feinschliff Loop Grid
   Scope: Haupt-Archiv + Kategorie-Archive
   ========================================================================== */

/* C1) Oberkante des Loop Grids buendig mit der Menue-Sidebar.
   Gemessen am Live-Render (identisch auf 768–1920px, Haupt- und Kategorie-Archiv):
       Menue-Widget   top = 490.2
       erste Karte    top = 500.2   -> 10px zu tief

   Ursache: Beide Spalten starten exakt gleich (480.2). Das Menue-Widget bringt
   10px margin-top mit und landet auf 490.2. Auf der Grid-Seite verteilen sich
   dieselben 10px anders: die Spalte hat 10px padding-top (Grid-Widget 490.2)
   UND die Loop-Item-Vorlage bringt nochmals 10px eigenes Padding mit – dadurch
   sitzt die Karte 10px tiefer als das Grid-Widget.

   Kompensation am Grid-Widget statt am Loop-Item: so bleibt der Zeilenrhythmus
   innerhalb des Grids unveraendert, es verschiebt sich nur der Block als Ganzes. */
.post-type-archive-behandlungen .elementor-widget-loop-grid,
.tax-kategorie_behandlungen     .elementor-widget-loop-grid{
    margin-top: -10px;
}

/* C2) Platz fuer den Hover-Schatten unter der letzten Kartenreihe.
   .beh-card:hover = box-shadow 0 12px 30px + translateY(-2px), der Schatten
   reicht damit rund 40px unter die Karte. Im Loop-Container standen nur 10px
   zur Verfuegung.

   Hinweis: ein tatsaechliches Abschneiden war am Live-Render nicht
   reproduzierbar – ausser der Karte selbst (deren overflow:hidden nur die
   eigenen Kinder beschneidet, nicht den Aussenschatten) und body{overflow-x}
   hat kein Vorfahre ein clippendes overflow. Diese Reserve ist daher
   vorbeugend: sie garantiert den Platz unabhaengig davon, was unter dem Grid
   folgt (Pagination vorhanden oder nicht, Folge-Sektion mit Hintergrund). */
.post-type-archive-behandlungen .elementor-loop-container,
.tax-kategorie_behandlungen     .elementor-loop-container{
    padding-bottom: 40px;
}

/* C3) Gehoverte Karte ueber ihre Geschwister heben. Karten sind opak und
   werden in DOM-Reihenfolge gemalt – ohne z-index koennte die nachfolgende
   Karte den Schatten der vorherigen ueberdecken, sobald die Abstaende enger
   werden als die Schattenausdehnung. */
.post-type-archive-behandlungen .beh-card:hover,
.tax-kategorie_behandlungen     .beh-card:hover{
    z-index: 2;
}

/* ==========================================================================
   Team-Sektion (axxento-team-member) – kundenspezifische Optik
   --------------------------------------------------------------------------
   Die Funktion liegt in axxento-core (Markup + Basis-Styles in widgets.css),
   die Proportionen pro Kunde hier.

   Herkunft der Werte: gemessen an der Team-Sektion der Referenz-Site des
   Erstkunden (uael-team-member) beim Import. Uebernommen wurden ausschliesslich die
   LAYOUT-Werte. NICHT uebernommen wurden Schrift und Farben des Originals
   (Open Sans / durchgehend Schwarz) – die Markenschrift Neue Helvetica und die
   Akzentfarben sind bewusste Entscheidungen des Relaunches und bleiben.

   Original-Messwerte (Karte 360px breit, alles zentriert):
       Bild 150x150, Bild-Wrapper margin-bottom 15px
       Name      mb 5px,  padding 0 10px
       Position  mb 7px,  padding 0 10px
       Trennlinie 72x2px, 2px solid #000, zentriert
       Beschreibung mb 10px, padding 0 10px
   ========================================================================== */

/* T1) Bild auf Original-Groesse begrenzen. Ohne diese Regel fuellt das Bild die
   ganze Spalte (320px statt 150px) und die Sektion wird doppelt so hoch. */
.axxento-team__media{
    margin-bottom: 15px;
    text-align: center;
}
.axxento-team__media img{
    width: 150px;
    height: 150px;
    max-width: 100%;
    object-fit: cover;
    /* Basis-CSS rendert das Bild als Block ohne Aussenabstaende – ohne
       margin-inline:auto steht es links statt auf der Textachse. */
    margin-inline: auto;
}

/* T2) Vertikalrhythmus + seitliches Padding wie im Original.
   Spezifitaet bewusst ueber das Elternelement erhoeht: Astra setzt fuer
   Absaetze in .entry-content margin-bottom:1.6em mit (0,2,0). Die frueheren
   Ein-Klassen-Selektoren (0,1,0) verloren dagegen – gemessen kam an der
   Position 25.6px statt der gewuenschten 7px an. */
.axxento-team .axxento-team__name{
    margin-bottom: 5px;
    padding: 0 10px;
}
.axxento-team p.axxento-team__position{
    margin-bottom: 7px;
    padding: 0 10px;
}
.axxento-team .axxento-team__desc{
    margin-bottom: 10px;
    padding: 0 10px;
}

/* T3) Trennlinie zwischen Position und Beschreibung. Im Original ein eigenes
   <span class="uael-separator">; axxento-team-member hat kein solches Element,
   daher als Pseudo-Element – gleiche Optik ohne Markup-Aenderung im Plugin. */
.axxento-team__position::after{
    content: "";
    display: block;
    width: 72px;
    height: 0;
    margin: 7px auto 10px;
    border-top: 2px solid #000;
}

/* T4) Mobil: Bild darf die volle Spaltenbreite nutzen, sonst wirkt die Kachel
   auf schmalen Viewports verloren. */
@media (max-width: 767px){
    .axxento-team__media img{
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

/* ==========================================================================
   FAQ-Toggle-Titel: schwarz, 16 px, fett, ohne Unterstreichung
   ==========================================================================
   Angleich an das Live-Design der Referenz-Site (Titel schwarz, 16 px,
   fett, kein Unterstrich). Ersetzt die Auftrag-5/6-Regel: Die 90-px-Rose bzw.
   das #C4483D-Koralle waren ein Ausreisser der lokalen Kopie, nie beabsichtigt.
   Schwarz (21:1) haelt den Kontrast ohnehin.

   PORTABEL - kein Seiten-ID-Scope. Das Master-Theme laeuft auf mehreren Kunden;
   ein .elementor-page-340-Selektor matcht dort die falsche ID (auf
   kosmetik-husum.de live beobachtet: FAQ blieb ungestylt). Deshalb auf das
   Toggle-Widget gescopet, nicht auf die Seite.

   1rem statt var(--fs-*): Ein site-weites Typo-Token-System existiert noch
   nicht; ein Token fuer eine einzelne Regel waere verfrueht und legte einen
   Konflikt mit der Elementor-Kit-Einstellung an. 1rem = 16px bei Standard-Root,
   ein schlichter rem-freundlicher Festwert.

   Alle Link-Zustaende: Der Titel ist ein <a>; Astra setzt die Unterstreichung
   auch auf :hover/:focus. Ohne die Zustaende kaeme der Unterstrich beim
   Drauffahren zurueck (gleiches Muster wie beim M11-Buttonschutz).

   Spezifitaet, KEIN !important: Elementors eigene Toggle-Regel in post-<id>.css
   (.elementor-widget-toggle .elementor-toggle-title, font-size via
   --e-global-typography-primary-font-size, color via --e-global-color-primary)
   ist (0,2,0). Ein gleich hoher Selektor reicht NICHT: Am Live-Render gemessen
   laedt das Child-Style.css VOR post-<id>.css, bei Gleichstand gewinnt also
   Elementor (Titel blieb 90px/#F5D1C1). Deshalb .elementor-element zusaetzlich -
   die Klasse sitzt am selben Widget-Wrapper wie .elementor-widget-toggle
   (portabel, jedes Elementor-Toggle-Widget hat beide), macht (0,3,0) und
   schlaegt (0,2,0) unabhaengig von der Ladeposition. Kein Seiten-ID-Scope.
   Am Live-Render gegengeprueft: 16px/schwarz/700/none kommen an.

   hyphens (Auftrag 6) entfaellt: Bei 16px passt "...Hoergeraetetraeger:innen"
   in die Spalte, es bricht nicht mehr aus dem Wort. Kein Bedarf mehr fuer die
   Silbentrennung, also raus statt als toter Rest stehenzulassen.

   Active-Zustand: Der offene Toggle war schon vorher schwarz
   (.elementor-widget-toggle .elementor-tab-title.elementor-active a, (0,3,1)) -
   bleibt schwarz, passt zum neuen geschlossenen Zustand. Am Live-Render
   gegengeprueft: geschlossen wie offen rgb(0,0,0), kein Unterstrich. */
.elementor-element.elementor-widget-toggle .elementor-toggle-title,
.elementor-element.elementor-widget-toggle .elementor-toggle-title:link,
.elementor-element.elementor-widget-toggle .elementor-toggle-title:visited,
.elementor-element.elementor-widget-toggle .elementor-toggle-title:hover,
.elementor-element.elementor-widget-toggle .elementor-toggle-title:focus,
.elementor-element.elementor-widget-toggle .elementor-toggle-title:active{
    color: #000;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

/* ==========================================================================
   Hero: einheitliche Hoehe statt Spacer (portabel)
   ==========================================================================
   Die vier Bild-Heroes (Startseite, Team & Store, Kontakt, FAQ) erzeugten ihre
   Hoehe bisher ueber ein Spacer-Widget in der Bild-Spalte - mit
   unterschiedlichen Werten (3x 55vh, FAQ 33vh), also ungleichen Hoehen. Das
   Bild sitzt bei allen vier als Spalten-Hintergrund mit background-size:cover
   auf .elementor-element-populated (per 55-hero-diag.js gemessen). Damit laesst
   sich die Hoehe sauber ueber eine Section-Min-Hoehe steuern: Die Spalte
   streckt sich, cover fuellt, kein Bild-Umbau noetig.

   Geteilte Klasse .axx-hero statt per-Seite-Spacer - portabel fuer den Master:
   Jede neue Seite/jeder neue Kunde bekommt dieselbe Hoehe, indem die Klasse an
   der Hero-Section gesetzt wird (manueller Elementor-Schritt, macht Paulo).

   Kein !important noetig: Nichts setzt sonst min-height auf diese Sections
   (gemessen min-height: 0px), .axx-hero = (0,1,0) genuegt. Die zweite Regel
   traegt die Min-Hoehe in den klassischen Section-Container weiter; bei
   Flexbox-Containern (.e-con) ist .axx-hero selbst der Flex-Container, dort
   greift schon die erste Regel.

   Mobil (55vh vs. dynamische Browserleiste, svh/dvh) bewusst spaeter - kommt in
   der Mobil-Politur, nicht in diesem Auftrag. */
.axx-hero { min-height: 55vh; }
.axx-hero > .elementor-container { min-height: inherit; }   /* klassische Section */

/* Bild-Spalte fuellt die gestreckte Section auch bei entferntem Spacer.
   Wird der Spacer aus der Bild-Spalte genommen (A2), ist die Spalte leer; ihr
   innerer Wrapper .elementor-element-populated traegt das cover-Hintergrundbild
   und faellt ohne Inhalt auf Inhaltshoehe zusammen -> weisser Rand, obwohl die
   Section per min-height:55vh streckt. Am Live-Render reproduziert (Bild-Wrapper
   am Stretchen gehindert): ohne diese Regel 20px statt 495px, Luecke 475px.

   min-height:100% loest hier AUF - nicht der bekannte Flexbox-Prozenthoehen-
   Fall: Die Spalte hat durch die Regel darueber (Container min-height:inherit =
   55vh, Spalten stretchen) eine definite Hoehe, gegen die die 100% aufloesen.
   Gemessen: mit der Regel fuellt der Wrapper wieder volle 495px (Luecke 0). Die
   flex-grow-Variante war damit NICHT noetig.

   Kein !important, kein Seiten-ID-Scope: .axx-hero ...-populated = (0,3,0)
   genuegt; Elementors eigene Regeln auf .elementor-element-populated setzen kein
   konkurrierendes min-height. Greift erst, wenn .axx-hero an der Section sitzt
   (A2) - bis dahin folgenlos. */
.axx-hero .elementor-widget-wrap.elementor-element-populated { min-height: 100%; }

/* ==========================================================================
   Tastaturfokus (#24) – gemessen mit axxento-imports/phase-b/67-tabrunde.js
   ==========================================================================
   Grundlage: 28 Durchlaeufe (7 Kernseiten x 390/768/1024/1280 px), Befund in
   axxento-imports/phase-b/A11Y-TABBING-BEFUND.md. Cookie-Banner als erster
   Stopp, Skip-Link und Tastaturfallen waren durchweg in Ordnung; die beiden
   Regeln hier beheben die einzigen zwei Fokusmaengel.

   BEWUSST NICHT hier: ein markenkonformes Fokusring-Design. Beide Regeln
   stellen nur den Browser-Standard wieder her bzw. entfernen einen toten
   Stopp – kein neues Aussehen. Ein eigener Ring gehoert in den
   Barrierefreiheits-Strang (#22/#23), nicht in #24. */

/* F1) Buttons bekommen ihre Fokusanzeige zurueck.
   ------------------------------------------------------------------
   Gemessen: der Newsletter-Button "Senden" zeigte im Tastaturfokus auf ALLEN
   sieben Seiten und allen vier Breiten nichts – kein Outline, kein Wechsel bei
   Schatten, Rahmen, Hintergrund, Farbe oder Unterstreichung (2.4.7 Focus
   Visible). :focus-visible greift dabei durchaus; es fehlte nicht der Zustand,
   sondern die Gestaltung.

   Ursache per CDP CSS.getMatchedStylesForNode mit erzwungenem :focus ermittelt
   – also der tatsaechliche Gewinner, nicht bloss eine passende Regel (die
   Messfalle aus Handover §6). Astra liefert:
       .ast-button:active,.ast-button:focus,.button:active,.button:focus,
       button:active,button:focus,input[type=…]:focus { outline: 0 }
   Das schaltet den Fokusring des Browsers fuer ALLE Buttons ab, ohne Ersatz.
   Links sind nicht betroffen, deshalb faellt in den Tab-Listen nur dieser
   eine Button auf.

   `outline: revert` statt eines eigenen Werts: revert nimmt die Deklaration auf
   den Wert des BROWSER-Stylesheets zurueck (:focus-visible{outline:auto}) und
   ignoriert dabei alle Autoren-Regeln, also auch Astras outline:0. Damit sieht
   der Button im Fokus exakt so aus wie die Links der Seite – kein neuer,
   uneinheitlicher Ring, und nichts, was bei einem spaeteren Ring-Design im Weg
   staende.

   :focus-visible, NICHT :focus – sonst traegt jeder Mausklick den Ring mit.
   Genau darum hat Astra den Ring vermutlich abgeschaltet; :focus-visible loest
   das Problem, ohne Tastaturnutzer zu bestrafen.

   `body` als Praefix hebt die Spezifitaet von (0,1,1) auf (0,1,2) und stellt
   damit unabhaengig von der Einbindungsreihenfolge sicher, dass diese Regel
   Astras Reset schlaegt. Kein !important noetig, keine Kundenwerte. */
body button:focus-visible,
body .ast-button:focus-visible,
body .ast-custom-button:focus-visible,
body .button:focus-visible,
body input[type="button"]:focus-visible,
body input[type="submit"]:focus-visible,
body input[type="reset"]:focus-visible{
    outline: revert;
    /* Der Ring liegt sonst direkt auf der Buttonkante und verschwindet auf
       gefuellten Flaechen optisch fast. 2px Abstand sind reine Lesbarkeit,
       kein Gestaltungsmerkmal. */
    outline-offset: 2px;
}

/* F2) Toter 0x0-Stopp in der Kopfnavigation entfernen.
   ------------------------------------------------------------------
   Gemessen ab 1024 px auf allen sieben Seiten: Tab-Stopp 4 – direkt nach
   "Behandlungen" – landet auf span.dropdown-menu-toggle.ast-header-navigation-arrow
   (tabindex="0") mit einer gerenderten Groesse von 0 x 0 px. Der Fokus
   verschwindet dort fuer einen Schritt scheinbar spurlos (2.4.7 und 2.4.3).

   Nachgeprueft, bevor etwas entfernt wurde: Der Pfeil tut nichts. aria-expanded
   bleibt nach Enter auf "false", sein Untermenue (10 Links) steht auf
   display:none UND aria-hidden="true", und der naechste Tab geht regulaer
   weiter. Es geht also keine Bedienmoeglichkeit verloren – ein 0x0-Element ist
   ohnehin weder klickbar noch sichtbar.

   display:none statt eines Sichtbarmachens: Der Pfeil ist im Design nicht
   vorgesehen (Vorgabe "Design darf sich nicht aendern"), und display:none nimmt
   ein Element zuverlaessig aus der Tab-Reihenfolge – was ueber tabindex nicht
   ginge, das ist ein Attribut und keine CSS-Eigenschaft.

   Ab 1024 px, weil der Mangel dort gemessen wurde: Bei 390 und 768 px laeuft
   die Navigation ueber Elementors Mobilmenue und der Pfeil taucht in der
   Tab-Runde gar nicht auf. Der Bereich dazwischen (922–1023 px, Astras
   Desktop-Breakpoint) ist NICHT vermessen – wer ihn spaeter prueft, findet den
   Mangel dort moeglicherweise ebenfalls und kann die Grenze hier senken. */
@media (min-width: 1024px){
    body .ast-header-navigation-arrow{ display: none; }
}

/* ==========================================================================
   404-Seite und Suchergebnisse (#30)
   ==========================================================================
   Templates: 404.php und search.php. Beide nutzen Astras Header/Footer und
   dieselbe Content-Box wie der Rest der Site (--axx-content/--axx-inset), damit
   sie mit Header, Archiv und Detailseite fluchten.

   Ueberschriften bleiben schwarz (globale Regel weiter oben), Koralle nur als
   Linkfarbe und dort im lesbaren Zwilling --brand-coral-text. Fokusringe wie in
   #24: outline:revert auf :focus-visible, damit sie dem Rest der Site
   entsprechen und Mausklicks ohne Ring bleiben. */

.axx-404__inner,
.axx-search__inner{
    max-width: var(--axx-content);
    margin-inline: auto;
    padding-inline: var(--axx-inset);
}

/* --- Seitenhintergrund ---------------------------------------------------
   Astras Vorgabe ist ein helles Blaugrau. Auf 404 und Suche steht der Inhalt
   auf Weiss, wie beim Vorbild — die getoente Flaeche bleibt der einzige
   Farbtraeger. */
.axx-404, .axx-search,
body.error404, body.search{ background: var(--brand-white); }

/* --- Banner full-bleed ---------------------------------------------------
   Astra legt den Inhalt in `.ast-container` (max-width 1240px, seitliches
   Padding). Dadurch endete die getoente Flaeche bei 1280px schon bei x=40 und
   bei 390px bei x=9 — sie sass in der Box statt darunter.

   Behoben nach dem Muster der Hero-Sections aus der Mobil-Politur: die
   Einschraenkung wird ZURUECKGENOMMEN, statt das Element mit 100vw oder
   negativen Raendern herauszuziehen. 100vw rechnet die Scrollbar mit und
   erzeugt genau den horizontalen Ueberlauf, den es zu vermeiden gilt; hier
   bleibt die Flaeche schlicht so breit wie ihr Elternteil.

   Die Content-Breite geht dabei nicht verloren: Banner-Inhalt, Intro-Bereich
   und Produktblock haben ihre eigenen Container (--axx-content/--axx-inset),
   siehe .axx-404__bannerinner und .axx-404__inner.

   Nur auf der 404-Seite — die Suchseite bleibt unveraendert. */
body.error404 .ast-container{
    max-width: none;
    /* !important, weil Astra das seitliche Padding bei <=768px erneut und
       staerker setzt — ohne blieb die Flaeche bei 390px 9px vom Rand
       (gemessen: Banner 373px ab x=9 statt 390 ab x=0). Gleiche Begruendung
       wie beim Archiv-Layout weiter oben: Astras Regeln gezielt angleichen,
       statt ihre Selektoren nachzubauen. */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* width:100% ist noetig, nicht nur max-width:none. Ohne sie richtet sich die
       Box nach ihrem breitesten Kind — das ist .axx-404__bannerinner mit
       max-width:1200px — und wurde bei 1024px Viewport 1200px breit. Genau der
       horizontale Ueberlauf, den dieses Muster vermeiden soll (gemessen:
       scrollWidth 1200 bei viewport 1024). */
    width: 100%;
}
body.error404 .axx-404,
body.error404 .axx-404__banner{ width: 100%; }

/* --- a) Bannerflaeche ----------------------------------------------------
   Full-bleed wie die Hero-Sections: die getoente Flaeche laeuft ueber die volle
   Breite, der Inhalt sitzt in der Content-Box.

   Verlauf und Kreismasse am Vorbild gemessen (1440px):
     linear-gradient(125deg, rgb(210,204,200) 0%, rgb(245,209,193) 100%)
     Kreis 128px, border 3px solid, transparent
   Beide Endfarben sind exakt --brand-taupe und --brand-primary — es kommt also
   kein neuer Farbwert dazu, der Verlauf bleibt tokenbasiert und damit portabel.

   Icon und Text stehen NEBENEINANDER (Icon links, Text rechts, vertikal
   mittig), nicht gestapelt. */
.axx-404__banner{
    background: linear-gradient( 125deg,
        var(--brand-taupe) 0%,
        var(--brand-primary) 100% );
    padding: 64px var(--axx-inset);
}
/* margin-inline:auto zentriert nur die BOX in der Bahn. Ohne justify-content
   greift flex-start, die Gruppe klebte also links und liess bei 1280px 571px
   leere Flaeche rechts stehen (gemessen). center ruecken Icon+Text zusammen
   in die Mitte. */
.axx-404__bannerinner{
    max-width: var(--axx-content);
    margin-inline: auto;
    display: flex; align-items: center; justify-content: center; gap: 32px;
}
/* Der Textblock ist nur so breit wie sein laengster Zeilenumbruch. Ohne diese
   Regel stuenden Titel und Subzeile linksbuendig unter der mittigen Gruppe. */
.axx-404__bannertext{ text-align: center; }
.axx-404__icon{
    /* flex:0 0 auto, sonst staucht der Kreis neben langem Text zur Ellipse. */
    flex: 0 0 auto;
    width: 128px; height: 128px;
    border: 3px solid var(--axx-ink, #1d1d1b);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 52px; line-height: 1;
}
/* Das Elementor-Kit setzt `.elementor-kit-<id> h1{font-size:40px}` — (0,1,1)
   und damit staerker als eine einzelne Klasse. Ohne den vorangestellten
   Kontext griffe die mobile Groesse unten nicht (gemessen: 40px statt 28px).
   Zweite Klasse statt !important, und ohne die Kit-ID zu nennen. */
.axx-404 .axx-404__title{ font-size: 40px; line-height: 1.15; letter-spacing: -.01em; }
.axx-404__sub{
    font-size: 18px; font-weight: 400;
    color: var(--brand-grey-text);
    margin: 10px 0 0;
}

/* --- b) Intro ------------------------------------------------------------ */
.axx-404__intro{
    max-width: 640px;
    margin: 44px auto 0;
    text-align: center;
}
.axx-404__home{
    display: inline-block;
    margin-top: 14px;
    color: var(--brand-coral-text);
    text-underline-offset: 3px;
}

/* --- c) Button-Leiste ---------------------------------------------------- */
.axx-404__actions{
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
    margin: 36px 0 0;
}
.axx-404 .axx-btn,
.axx-search .axx-btn{
    display: inline-flex; align-items: center; justify-content: center;
    /* 48px Mindesthoehe: bequeme Zielflaeche, deutlich ueber den 24x24 aus
       WCAG 2.5.8 und einheitlich mit dem Suchformular darunter. */
    min-height: 48px;
    padding: 0 28px;
    border: 1px solid var(--axx-ink, #1d1d1b);
    background: var(--axx-ink, #1d1d1b);
    color: var(--brand-white);
    text-decoration: none;
    font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
    transition: background .2s ease, color .2s ease;
}
.axx-404 .axx-btn:hover,
.axx-404 .axx-btn:focus-visible{ background: var(--brand-white); color: var(--axx-ink, #1d1d1b); }
.axx-404 .axx-btn--ghost{ background: transparent; color: var(--axx-ink, #1d1d1b); }
.axx-404 .axx-btn--ghost:hover,
.axx-404 .axx-btn--ghost:focus-visible{ background: var(--axx-ink, #1d1d1b); color: var(--brand-white); }

/* --- d) Produkt-Bereich -------------------------------------------------- */
/* Der Inhalt kommt als gerenderte Elementor-Vorlage und bringt seine eigene
   Control-CSS mit; hier wird nur der Abstand gesetzt. */
.axx-404__products{ margin-top: 72px; }

/* --- Suche --------------------------------------------------------------- */
.axx-search__head{ padding-top: 56px; }
.axx-search__count{ font-size: 32px; line-height: 1.2; }
.axx-search__term{ color: var(--brand-grey-text); font-weight: 400; }
.axx-search__empty{ margin: 20px 0 0; max-width: 640px; }

/* get_search_form() liefert Astras Markup; nur Groesse und Rahmen angleichen,
   damit Feld und Button dieselbe Hoehe haben wie die Buttons oben. */
.axx-search .search-form{ display: flex; gap: 10px; margin-top: 24px; max-width: 520px; }
.axx-search .search-form label{ flex: 1; margin: 0; }
.axx-search .search-field{
    width: 100%; min-height: 48px; padding: 0 16px;
    border: 1px solid #d8d8d8; background: var(--brand-white);
    font: inherit; color: var(--axx-ink, #1d1d1b);
}
.axx-search .search-submit{
    min-height: 48px; padding: 0 24px;
    border: 1px solid var(--axx-ink, #1d1d1b);
    background: var(--axx-ink, #1d1d1b); color: var(--brand-white);
    font: inherit; text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
}
.axx-search .search-submit:hover,
.axx-search .search-submit:focus-visible{ background: var(--brand-white); color: var(--axx-ink, #1d1d1b); }

.axx-results{ list-style: none; margin: 40px 0 0; padding: 0; }
.axx-result{ padding: 24px 0; border-top: 1px solid #ececec; }
.axx-result:last-child{ border-bottom: 1px solid #ececec; }
.axx-result__kicker{
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand-grey-text);
}
.axx-result__title{ font-size: 21px; margin: 6px 0; }
.axx-result__title a{ text-decoration: none; }
.axx-result__title a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.axx-result__excerpt{ margin: 0; color: var(--brand-grey-text); }

.axx-search .navigation.pagination{ margin-top: 40px; }

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 767px){
    .axx-404__banner{ padding: 44px var(--axx-inset); }
    /* Nebeneinander wird bei 390px zu eng — der Kreis liesse dem Titel keine
       zwei Woerter. Icon ueber den Text: die Leserichtung bleibt dieselbe wie
       auf Desktop. align-items:center statt flex-start, damit die Ausrichtung
       ueber den Umbruch hinweg dieselbe bleibt — sonst sprang der Kreis unter
       767px wieder nach links, waehrend der Text mittig blieb. */
    .axx-404__bannerinner{ flex-direction: column; align-items: center; gap: 20px; }
    .axx-404__icon{ width: 84px; height: 84px; font-size: 36px; border-width: 2px; }
    .axx-404 .axx-404__title{ font-size: 28px; }
    .axx-404__sub{ font-size: 16px; }
    /* Buttons untereinander auf volle Breite — dieselbe Regel wie bei den
       uebrigen Button-Gruppen der Mobil-Politur. */
    .axx-404__actions{ flex-direction: column; align-items: stretch; }
    .axx-404 .axx-btn{ width: 100%; }
    .axx-search__count{ font-size: 24px; }
    .axx-search .search-form{ flex-direction: column; max-width: none; }
}

/* ==========================================================================
   Tablet-Inset: Mindestrand fuer boxed-Sektionen (768–1239px)
   ==========================================================================
   Im Tablet-Bereich liegt die 1200er Content-Box breiter als der Viewport,
   ein zentrierender Rand entsteht also nicht von selbst. Sektionen ohne
   gesetztes Padding lassen ihren Inhalt dort bis an die Viewport-Kante laufen
   (gemessen: Kontakt 0, Team & Store 0, Startseite-Kacheln 10px).

   FLOOR, kein Gleichmacher: die Regel hat bewusst niedrige Spezifitaet (0,2,0)
   und KEIN !important. Elementors Per-Section-CSS steht bei (0,3,0) und
   gewinnt deshalb ueberall dort, wo im Editor ein Wert gesetzt wurde. Die
   gemessenen Absichten bleiben damit erhalten — Startseite 55, Impressum und
   Datenschutz 40 bzw. 23/31, FAQ 25 — und nur die 0-Faelle steigen auf 20.
   Ein !important haette genau diese Absichten plattgemacht.

   Obergrenze 1239px: ab 1240px (= --axx-content 1200 + 2x --axx-inset 20)
   laesst die zentrierte Box wieder von sich aus 20px Rand, der Floor waere
   dort wirkungslos bis stoerend. Gegengemessen: bei 1240px hebt die Regel
   keine einzige Sektion mehr an.

   padding-inline statt 100vw-Rechnerei: 100vw rechnet die Scrollbar mit und
   erzeugt genau den horizontalen Ueberlauf, den der 404-Block weiter oben
   beschreibt.

   Nur .elementor-top-section, nicht jede boxed-Sektion: verschachtelte
   Sektionen sitzen bereits INNERHALB des aeusseren Insets. Ohne diese
   Einschraenkung bekam die innere Sektion "Termin vereinbaren" auf der
   Startseite einen zweiten Rand und ihr Inhalt rueckte um 20px ein (gemessen).
   Der Floor gehoert an die Kante der Seite, nicht an jede Schachtelungsebene.

   NICHT erreicht werden Sektionen mit ausdruecklichem padding right/left = 0
   aus dem Editor — Elementor gewinnt dort per Spezifitaet, und das ist so
   gewollt: ein !important haette auch die 55/40/25 plattgemacht. Zwischen
   768 und 1024 ist das folgenlos (ihr Inhalt sitzt ohnehin 55px bzw. 99px
   von der Kante). Zwischen 1025 und 1239 bleiben drei Sektionen an der Kante
   stehen — Startseite oben, Impressum- und Datenschutz-Text; siehe Befund
   zum offenen Rest, das ist eine Entscheidung fuer den Editor, nicht fuer
   die Kaskade. */
@media (min-width: 768px) and (max-width: 1239px){
    .elementor-top-section.elementor-section-boxed{
        padding-inline: var(--axx-inset);
    }
}