/*
Theme Name: evaruso-website
Description: Custom theme for evaruso-website
Version: 1.0.0
Text Domain: evaruso-website
Requires at least: 6.0
Requires PHP: 8.0
*/

/* ─── Self-hosted fonts (no external CDN - GDPR) ────────────── */
/* Fira Sans (Headlines) - latin + latin-ext (inkl. Umlaute) */
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/fira-sans-v18-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/fira-sans-v18-latin_latin-ext-700.woff2') format('woff2');
}

/* Open Sans (Fliesstext / Subheadline) - latin + latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-v44-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/open-sans-v44-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/open-sans-v44-latin_latin-ext-700.woff2') format('woff2');
}

/* ─── Custom properties ─────────────────────────────────────── */
/* Design-Tokens aus Figma: Navy #262e6a, Seitenhintergrund #F5F5F5, Weiss auf Navy.
   Werte ohne Design-Quelle (Border/Muted) sind dezente Platzhalter fuer Theme-Chrome. */
:root {
    --color-bg: #ffffff;          /* Seitenhintergrund (Weiss) */
    --color-fg: #262e6a;          /* Primaer-Navy: Headlines & Text auf Hell */
    --color-primary: #262e6a;     /* Marken-Navy */
    --color-on-primary: #ffffff;  /* Text auf Navy-Flaechen */
    --color-muted: #5b5f7a;       /* gedaempfter Text */
    --color-subtle: #8a8da0;      /* sehr dezenter Text */
    --color-border: #d9d9e0;      /* dezente Linien */
    --color-surface: #ffffff;     /* helle Karten/Flaechen */
    --color-accent: #262e6a;      /* Akzent = Navy */
    --color-accent-hover: #1c2350;
    --color-link: #262e6a;
    --color-text-body: #383838;   /* Fliesstext auf Hell (aus Figma) */
    /* Link-Tokens: Hover-Verhalten + Farben zentral hier aendern.
       Kontexte (Footer/Header) ueberschreiben nur die Farb-Tokens. */
    --link-color: var(--color-link);
    --link-color-hover: var(--color-accent-hover);
    --link-underline-thickness: 1px;     /* einheitliche Linienstaerke ueberall */
    --link-underline-offset: 0.06em;     /* Abstand Text -> Linie */
    --link-underline-duration: 0.32s;    /* Dauer Aufbau links -> rechts */
    --link-underline-ease: ease;
    --font-heading: 'Fira Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'Open Sans', system-ui, -apple-system, sans-serif;
    --font-primary: var(--font-body);  /* Rueckwaertskompatibel mit Scaffold-Regeln */
    --content-width: 48rem;
    /* Standard-Container: EINE Quelle der Wahrheit fuer Header, Footer und Seiteninhalt.
       Randabstaende exakt wie im Footer. */
    --container-max: 1634px;
    --container-gutter: clamp(1.25rem, 7.3vw, 8.95rem);
    --logo-height: clamp(48px, 4.2vw, 80px);  /* Hero- und Footer-Logo exakt gleich gross */
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

body {
    font-family: var(--font-body);
    color: var(--color-fg);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-fg);
    line-height: 1.1;
}
/* Globale H1: Fira Sans Bold 48px (skaliert mobil herunter) */
h1 { font-size: clamp(2rem, 3.6vw, 48px); }

/* Text-Links: Unterstreichung baut sich beim Hover von links nach rechts auf.
   Umgesetzt als animierter Farbverlauf (kein text-decoration), damit die Richtung
   steuerbar ist und das Layout/die Zeilenabstaende unveraendert bleiben.
   Strichstaerke in em -> proportional zum Schriftschnitt. */
a {
    color: var(--link-color);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 calc(100% - var(--link-underline-offset));
    background-size: 0% var(--link-underline-thickness);
    transition: background-size var(--link-underline-duration) var(--link-underline-ease),
                color 0.2s ease;
}
a:hover,
a:focus-visible {
    color: var(--link-color-hover);
    background-size: 100% var(--link-underline-thickness);
}
@media (prefers-reduced-motion: reduce) {
    a { transition: color 0.2s ease; }
}

/* Logo-/Icon-Links bekommen keinen Text-Unterstrich, nur dezentes Feedback. */
.site-header__logo,
.site-footer__logo,
.site-footer__social {
    background-image: none;
    transition: opacity 0.2s ease;
}
.site-header__logo:hover,
.site-footer__logo:hover,
.site-footer__social:hover { opacity: 0.85; }

img { max-width: 100%; height: auto; }

/* ─── Skip link ─────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 0.5rem 1rem;
    background: var(--color-accent);
    color: var(--color-bg);
    z-index: 100;
}
.skip-link:focus { left: 0; }

/* ─── Header (nur Unterseiten; die Startseite hat keinen Header) ── */
.site-header {
    position: relative;
    z-index: 50;
    padding: clamp(1.25rem, 2.5vw, 2.5rem) var(--container-gutter);
}
.site-header__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Bildmarke links (Burger liegt fix oben rechts) */
}
.site-header__logo { display: inline-flex; }
.site-header__logo img {
    height: clamp(48px, 4.2vw, 80px); /* gleiche Hoehe wie das Footer-Logo */
    width: auto;
    display: block;
}

/* ─── Menue: Burger (fix oben rechts) + Fullscreen-Overlay ───────────────────
   Burger auf allen Seiten. Overlay = weiss, Logo o.l., Schliessen o.r., Navigation
   rechts (Anker-Scroll zu den Sektionen), Kontaktblock unten links, navy Footer-Leiste. */
html { scroll-behavior: smooth; }
/* Kein horizontales Wischen/Scrollen der Seite: faengt versehentlichen Overflow ab
   (z. B. wenn auf aelterem iOS-Safari die :has()-basierten Sektions-Layouts nicht greifen
   und die "Ueber mich"-Sektion nicht sauber stapelt). box-sizing ist border-box. */
html, body { overflow-x: hidden; }

.ev-nav-toggle {
    position: fixed;
    top: clamp(1.1rem, 2.2vw, 2.1rem);
    right: clamp(1.1rem, 2.5vw, 3rem);
    z-index: 400;                 /* ueber dem Overlay (300): Burger bleibt an Ort sichtbar + wird zum X */
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--color-primary);
    -webkit-filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.65));
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.65));
}
/* Zwei Balken, die beim Oeffnen zum X animieren und beim Schliessen zurueck
   (Trigger: body.ev-nav-open, gesetzt von site.js). */
.ev-nav-toggle__bars { position: relative; display: block; width: 30px; height: 22px; }
.ev-nav-toggle__bars span {
    position: absolute; left: 0; width: 100%; height: 3px;
    top: 50%; margin-top: -1.5px;
    background: currentColor; border-radius: 0;   /* eckige Linien-Enden */
    transition: transform 0.3s ease;
}
.ev-nav-toggle__bars span:nth-child(1) { transform: translateY(-5px) rotate(0); }
.ev-nav-toggle__bars span:nth-child(2) { transform: translateY(5px) rotate(0); }
body.ev-nav-open .ev-nav-toggle__bars span:nth-child(1) { transform: translateY(0) rotate(45deg); }
body.ev-nav-open .ev-nav-toggle__bars span:nth-child(2) { transform: translateY(0) rotate(-45deg); }
.ev-nav-toggle:hover { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
    .ev-nav-toggle__bars span { transition: none; }
}

.ev-nav {
    position: fixed; inset: 0; z-index: 300;
    background: #fff;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.ev-nav[hidden] { display: none; }

.ev-nav__main {
    flex: 1 1 auto;
    position: relative;
    display: flex; flex-direction: column;
    padding: clamp(1.5rem, 3vw, 3.2rem) var(--container-gutter);
    min-height: 0;
}
.ev-nav__top { display: flex; align-items: flex-start; justify-content: space-between; }
.ev-nav__logo { display: inline-flex; color: var(--color-primary); background-image: none; }
.ev-nav__logo svg { height: clamp(52px, 6vw, 88px); width: auto; display: block; }

/* Navigation: rechts, vertikal zentriert */
.ev-nav__menu {
    position: absolute;
    right: var(--container-gutter);
    top: 50%; transform: translateY(-50%);
    width: min(52%, 700px);
}
.ev-nav__menu ul { list-style: none; margin: 0; padding: 0; }
.ev-nav__menu li { margin: 0 0 clamp(0.75rem, 1.7vw, 1.5rem); }
.ev-nav__menu li:last-child { margin-bottom: 0; }
.ev-nav__menu a {
    font-family: var(--font-heading); font-weight: 700;
    color: var(--color-primary);
    /* Deckel bei ~Tablet-Groesse: Desktop wird nicht groesser als die Tablet-Ansicht. */
    font-size: clamp(1.5rem, 3.4vw, 34px);
    line-height: 1.15; text-decoration: none; background-image: none;
    display: inline-block; transition: opacity 0.15s ease;
}
.ev-nav__menu a:hover, .ev-nav__menu a:focus-visible { opacity: 0.55; }

/* Kontaktblock unten links */
.ev-nav__info {
    position: absolute;
    left: var(--container-gutter);
    bottom: clamp(1.5rem, 3vw, 3rem);
    max-width: 42%;
}
.ev-nav__notice {
    font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
    font-size: clamp(0.85rem, 1vw, 1rem); letter-spacing: 0.02em;
    color: var(--color-primary); margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem);
}
.ev-nav__contact { display: flex; gap: clamp(1.5rem, 3vw, 3.5rem); flex-wrap: wrap; }
.ev-nav__addr {
    display: flex; gap: 0.75rem; margin: 0;
    font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--color-text-body);
}
.ev-nav__pin { flex: 0 0 auto; display: inline-flex; color: var(--color-primary); }
.ev-nav__pin svg { height: 30px; width: auto; display: block; }
.ev-nav__reach { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.7; }
.ev-nav__reach a { color: var(--color-text-body); background-image: none; }

/* Navy Footer-Leiste */
.ev-nav__footer {
    flex: 0 0 auto;
    min-height: 150px;
    background: var(--color-primary); color: #fff;
    display: flex; justify-content: center; align-items: center; gap: 0.6rem;
    padding: clamp(1rem, 1.8vw, 1.4rem);
    font-family: var(--font-body); font-size: 15px;
}
.ev-nav__footer a { color: #fff; text-decoration: none; background-image: none; font-weight: 700; }
.ev-nav__footer a:hover { text-decoration: underline; }

/* Sanftes Scroll-Ziel: kleiner Abstand nach oben */
#was-ist, #praxis, #therapieangebot, #ueber, #faq { scroll-margin-top: clamp(1rem, 3vw, 2rem); }

/* Body-Scroll sperren, solange das Menue offen ist */
body.ev-nav-open { overflow: hidden; }

@media (max-width: 900px) {
    .ev-nav__main { justify-content: flex-start; }
    .ev-nav__menu {
        position: static; transform: none; width: 100%;
        margin-top: clamp(2rem, 9vw, 3.5rem);
    }
    .ev-nav__info {
        position: static; max-width: none;
        margin-top: clamp(2rem, 9vw, 3.5rem);
    }
    .ev-nav__contact { flex-direction: column; gap: 1rem; }
}
/* ─── Footer (navy) ─────────────────────────────────────────── */
.site-footer {
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-body);
    padding: clamp(2rem, 5vw, 6.5rem) var(--container-gutter) clamp(1.5rem, 3vw, 3.1rem);
    --link-color: #fff;        /* Footer-Links sind weiss; Hover-Effekt kommt zentral */
    --link-color-hover: #fff;
    --footer-text-inset: calc(30px + 0.75rem); /* Standort-Icon (30px) + Gap = Text-Achse */
}
.site-footer__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2.5rem 3rem;
    font-size: 1.25rem;
    line-height: 1.4; /* uniform rhythm for address + contact */
}
.site-footer__logo img {
    height: var(--logo-height); /* exakt wie Hero-Logo */
    width: auto;
    display: block;
}
.site-footer__col { display: flex; gap: 0.75rem; }
.site-footer__icon { flex: 0 0 auto; line-height: 0; color: #fff; margin-top: 0.15em; }
.site-footer__icon svg { width: 30px; height: 30px; display: block; }
.site-footer address { font-style: normal; }
/* gap:0 keeps phone + email on the address line rhythm; align-items:flex-start
   shrinks each link to its text width so the clickable area AND the hover underline
   end at the last character (instead of stretching the full column width). */
.site-footer__contact { flex-direction: column; gap: 0; align-items: flex-start; }
.site-footer__social { display: inline-flex; color: #fff; line-height: 0; }
.site-footer__social svg { width: 48px; height: 48px; display: block; }
.site-footer__legal {
    max-width: var(--container-max);
    margin: clamp(1.5rem, 3vw, 2.7rem) auto 0;
    padding-top: clamp(1.25rem, 2.5vw, 2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
}
.site-footer__legal span { margin: 0 0.5rem; }

/* Unter ~1100px stapelt der Footer sauber einspaltig (kein 2x2-Umbruch). */
@media (max-width: 1100px) {
    .site-footer__inner { flex-direction: column; gap: 1.75rem; font-size: 1.0625rem; }
    /* Gestapelt: alle Text-Elemente auf die Adress-Text-Achse einruecken.
       Nur der Standort-Pin (in der Adress-Zeile) bleibt links davon. */
    .site-footer__contact { padding-left: var(--footer-text-inset); }
    .site-footer__social { margin-left: var(--footer-text-inset); }
}

/* ─── Content ───────────────────────────────────────────────── */
/* Standard-Container: identische Breite + Randabstaende wie der Footer.
   Die min()-Formel ergibt exakt: zentriert, max. 1634px, sonst Viewport minus
   beidseitiger Gutter - deckungsgleich mit Footer/Header. */
.site-main {
    width: min(var(--container-max), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding-block: clamp(2rem, 5vw, 5rem);
}
.site-main h1 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}
.site-main time {
    display: block;
    color: var(--color-subtle);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.entry-content { line-height: 1.8; }
.entry-content p { margin-bottom: 1rem; }
.entry-content h2 { font-size: 1.4rem; margin: 2rem 0 0.75rem; }
.entry-content h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.entry-content ul, .entry-content ol { margin: 0 0 1rem 1.5rem; }
.entry-content li { margin-bottom: 0.25rem; }
.entry-content code {
    background: var(--color-surface);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}
.entry-content img { border-radius: 6px; }
.entry-content blockquote {
    border-left: 3px solid var(--color-accent);
    padding-left: 1rem;
    color: var(--color-muted);
    margin: 1.5rem 0;
}

/* ─── Archive / blog listing ────────────────────────────────── */
.site-main article + article {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    margin-top: 1.5rem;
}
.site-main article h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.site-main article h2 a { color: var(--color-fg); }
.site-main article h2 a:hover { color: var(--color-link); }

/* ─── 404 ───────────────────────────────────────────────────── */
.error-404 {
    text-align: center;
    padding: 6rem 2rem;
}
.error-404 h1 { font-size: 4rem; margin-bottom: 1rem; }
.error-404 p { color: var(--color-muted); }

/* ─── Search ────────────────────────────────────────────────── */
.search-form {
    display: flex;
    gap: 0.5rem;
    max-width: 24rem;
}
.search-form input[type="search"] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-fg);
    font-family: var(--font-primary);
}
.search-form button {
    padding: 0.5rem 1rem;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-primary);
}
.search-form button:hover { background: var(--color-accent-hover); }

/* ─── Hero ──────────────────────────────────────────────────────
   Elementor setzt _css_classes NUR auf Widgets, nicht auf Container.
   Die Container daher via :has() ueber ihre Widget-Kinder treffen.
   Inhalt/Video bleiben im Elementor-Editor editierbar. */

/* Aussencontainer = enthaelt direkt den Scroll-Hinweis */
.e-con:has(> .ev-hero__scroll) {
    position: relative;
    min-height: 56.25vw !important;   /* 16:9 der Viewport-Breite (full-width) */
    padding-block: 0 !important;
    padding-inline: var(--container-gutter) !important;
}
/* Inhaltsblock = enthaelt direkt die Headline */
.e-con:has(> .ev-hero__headline) { max-width: 56rem; gap: 0 !important; }

.ev-hero__logo { margin-bottom: 80px !important; }   /* Abstand Logo -> H1 (Desktop) */
/* Hero-Logo ist in Figma 1,25x so gross wie das Footer-Logo (100px vs 80px bei 1920).
   !important schlaegt Elementors .elementor-widget-image img { width:100% }. */
.ev-hero__logo img { height: calc(var(--logo-height) * 1.25) !important; width: auto !important; }
/* Hero-Headline nutzt die globale H1 (Fira Sans Bold 48px) - keine eigene Groesse. */
.ev-hero__subline { margin-top: 40px; }   /* Abstand H1 -> Subline (Desktop) */
/* H4 Subheadline: Open Sans Semibold 30px Caps. !important, weil Elementors Kit-Regel
   alle Headings auf primary (Fira Sans 700) setzt. */
.ev-hero__subline .elementor-heading-title {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    color: var(--color-primary);
    font-size: clamp(1.05rem, 2.2vw, 30px);
    line-height: 1.25;
}
/* Scroll-Hinweis: absolut unten mittig (ausserhalb des Flex-Flusses) */
.ev-hero__scroll {
    position: absolute !important;    /* Elementor erzwingt sonst relative */
    left: 50%;
    bottom: clamp(1.5rem, 4vh, 3rem);
    transform: translateX(-50%);
    margin: 0;
    width: auto !important;
}
.ev-hero__scroll img {
    height: clamp(40px, 4vw, 56px) !important;
    width: auto;
    /* Morph-Animation (Indikator Default->Down) liegt als SMIL im SVG selbst. */
}
/* Mobil: 16:9 waere zu flach -> hoehere Sektion, Inhalt mit Luft */
@media (max-width: 768px) {
    .e-con:has(> .ev-hero__scroll) {
        min-height: 88vh !important;
        padding-block: clamp(5rem, 14vh, 7rem) clamp(4rem, 10vh, 6rem) !important;
    }
    .ev-hero__logo { margin-bottom: 48px; }
    .ev-hero__subline { margin-top: 24px; }
}

/* ─── Sektion: Was ist ENT (zweispaltig, Vorschau + Aufklappen) ── */
/* Aussencontainer = weisses Band (Kind-Container enthaelt den Titel) */
.e-con:has(> .e-con > .ev-was-ist__title) {
    background: #fff;
    padding-block: clamp(3rem, 8vw, 120px) !important;
}
/* Inhalts-Container = zentriert, 2 Spalten (enthaelt direkt den Titel) */
.e-con:has(> .ev-was-ist__title) {
    width: min(var(--container-max), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding-inline: var(--container-gutter);   /* doppelter Rand (Desktop): Gutter nochmal innen */
    flex-direction: row !important;
    gap: clamp(2rem, 4vw, 60px) !important;
    align-items: flex-start !important;
}
.e-con:has(> .ev-was-ist__title) > .ev-was-ist__title,
.e-con:has(> .ev-was-ist__title) > .e-con { flex: 1 1 0; min-width: 0; }
.ev-was-ist__title .elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--color-primary);
    font-size: clamp(2rem, 3.6vw, 48px);
    line-height: 1.1;
}
/* Body-Container (rechte Spalte) ist per Elementor-Default flex column */

/* Vorschau: feste Hoehe, vertikal scrollbar, Fade am unteren Rand (Maske scrollt nicht mit) */
.ev-was-ist__text {
    max-height: 630px;                     /* Default sichtbares Fenster (Desktop) */
    overflow-y: auto;
    scrollbar-width: none;                 /* Firefox: Scrollbalken aus */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}
.ev-was-ist__text::-webkit-scrollbar { width: 0; height: 0; }   /* WebKit: Scrollbalken aus */
/* Von oben weggescrollt: auch am oberen Rand ausblenden */
.ev-was-ist__text.is-scrolled {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 78%, transparent 100%);
}
/* Am unteren Ende: unten nicht mehr ausblenden (nur oben) */
.ev-was-ist__text.is-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
}
/* Klick auf "Mehr erfahren": voll aufklappen (Seitenfluss, kein Fade, Button weg) */
.e-con.is-expanded .ev-was-ist__text {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}
.e-con.is-expanded .ev-was-ist__more { display: none; }

/* Fliesstext */
.ev-was-ist__text p {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    color: var(--color-text-body) !important;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.ev-was-ist__text p:last-child { margin-bottom: 0; }

/* Krankheitsbilder-Liste mit Trennlinien (Bullets-Stil: Fira Bold navy) */
.ev-was-ist__text ul.ev-conditions { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ev-was-ist__text ul.ev-conditions li {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 20px;
    line-height: 1.8;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-primary);
}
.ev-was-ist__text ul.ev-conditions li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Sektion 5 (Ablauf): Unterueberschriften + nummerierte Schritte mit Trennlinien.
   Teilt sich Mechanik + Basis-Typo mit Sektion 2 (gleiche .ev-was-ist__*-Klassen);
   diese Elemente kommen in Sektion 2 nicht vor, beeinflussen sie also nicht. */
.ev-was-ist__text h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-body);      /* #383838 (navy nur fuer die nummerierten Titel) */
    font-size: 20px;
    line-height: 1.8;
    margin: 0 0 0.75rem;
}
.ev-was-ist__text ol.ev-steps {
    list-style: decimal;
    margin: 0 0 1.5rem;
    padding: 0 0 0 1.7em;
    font-size: 20px;
}
.ev-was-ist__text ol.ev-steps > li {
    position: relative;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);        /* navy Titel + Nummer */
    font-size: 20px;
    line-height: 1.8;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
/* Trennlinie ueber die volle Textbreite (nach links bis zur Textkante, trotz Listen-Einrueckung) */
.ev-was-ist__text ol.ev-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: -1.7em;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid var(--color-primary);
}
.ev-was-ist__text ol.ev-steps > li:last-child { padding-bottom: 0; margin-bottom: 0; }
.ev-was-ist__text ol.ev-steps ul {
    list-style: disc;
    margin: 0.4rem 0 0;
    padding-left: 1.2em;
}
.ev-was-ist__text ol.ev-steps ul li {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-text-body);
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}
.ev-was-ist__text ol.ev-steps ul li:last-child { margin-bottom: 0; }

/* Mehr erfahren als Text-Link (kein Button-Look), linksbuendig (wie Fliesstext) */
.ev-was-ist__more { margin-top: clamp(1.5rem, 3vh, 2.5rem); text-align: left; }
.ev-was-ist__more .elementor-button-wrapper { text-align: left; }
.ev-was-ist__more .elementor-button {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    justify-content: flex-start;
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary) !important;
    fill: var(--color-primary);
    font-size: 20px;
    line-height: 1.8;
}
.ev-was-ist__more .elementor-button:hover { background-color: transparent !important; }

@media (max-width: 900px) {
    .e-con:has(> .ev-was-ist__title) {
        flex-direction: column !important;
        gap: 1.5rem !important;
        padding-inline: 0;             /* mobil kein doppelter Rand, nur Standard-Gutter */
    }
    .e-con:has(> .ev-was-ist__title) > .ev-was-ist__title,
    .e-con:has(> .ev-was-ist__title) > .e-con { flex: 1 1 auto; width: 100%; }
    /* Mobil: kurze Vorschau ohne Inner-Scroll (Touch-freundlich); Tap auf
       "Mehr erfahren" klappt voll auf (is-expanded). */
    .ev-was-ist__text { max-height: 300px; overflow: hidden; }
}

/* ─── Sektion: Einblicke in meine Arbeit (Hover-Kachel-Karussell) ──
   Peek-Karussell: mittlere Kachel zentriert, Nachbarn ragen herein, Pagination-Dots.
   Desktop: Hover deckt Navy-Overlay (Heading + Text) ueber dem Bild auf.
   Mobil (<=900px, kein Hover): zweigeteilt - Bild oben, Navy-Textkachel unten.
   Container via :has() ueber ihre Widget-Kinder treffen (Elementor setzt _css_classes
   nur auf Widgets). Inhalte/Bilder bleiben im Editor + Media Library editierbar. */

/* Sektion = Spalte: Titel, Track, Dots; gleichmaessiger Abstand (Figma 59px) */
.e-con:has(> .ev-einblicke__title) {
    --tile-w: min(831px, 78vw);            /* Kachelbreite (Figma 831px) */
    --tile-gap: clamp(1.5rem, 4vw, 75px);  /* Abstand zwischen Kacheln (Figma 75px) */
    /* Grid statt flex-direction:column - auf iOS/iPadOS-WebKit wird column bei e-con-full
       ignoriert (siehe iOS-WebKit-Fix oben), sonst landen Titel/Track/Pfeile nebeneinander
       und die Pfeile werden vom overflow:hidden abgeschnitten. 1-spaltiges Grid = optisch
       identisch, aber immun. */
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: clamp(2rem, 4vw, 59px) !important;
    padding-block: clamp(3rem, 8vw, 120px) !important;
    padding-inline: 0 !important;
    overflow: hidden;                      /* seitlicher Karussell-Ueberhang wird geclippt */
}
/* Titel auf Standard-Containerbreite (wie .site-main / Footer) */
.ev-einblicke__title {
    width: min(var(--container-max), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
}
.ev-einblicke__title .elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--color-primary);
    font-size: clamp(2rem, 3.6vw, 48px);
    line-height: 1.1;
}

/* Track = horizontale Reihe; JS positioniert via translateX (Endlos-Karussell mit
   DOM-Rotation). Kein nativer Scroll - die Sektion (overflow:hidden) clippt den Ueberhang. */
.e-con:has(> .e-con > .ev-tile__img) {
    position: relative;
    width: 100%;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: var(--tile-gap) !important;
    padding: 0 !important;
    will-change: transform;
    touch-action: pan-y;        /* vertikales Seitenscrollen bleibt; horizontal = Karussell */
    user-select: none;
    cursor: grab;
}
.e-con:has(> .e-con > .ev-tile__img):active { cursor: grabbing; }

/* Kachel = 16:9-aehnliches Bildfenster, Bild + Overlay uebereinander */
.e-con:has(> .ev-tile__img) {
    flex: 0 0 var(--tile-w) !important;
    width: var(--tile-w);
    position: relative;
    aspect-ratio: 831 / 462;
    overflow: hidden;
    padding: 0 !important;
    background: #e8e8e8;                    /* Platzhalter (wie Figma) */
}
/* Bild fuellt die Kachel */
.ev-tile__img {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100%;
    margin: 0 !important;
}
.ev-tile__img > .elementor-widget-container { height: 100%; }
.ev-tile__img img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }

/* Navy-Overlay (Heading + Text), per Default unsichtbar, auf Hover eingeblendet */
.e-con:has(> .ev-tile__heading) {
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: clamp(1rem, 1.8vw, 30px) !important;
    padding: clamp(2rem, 3.6vw, 58px) clamp(1.5rem, 2.9vw, 47px) !important;
    opacity: 0;
    transition: opacity 0.4s ease;
    overflow: auto;
    scrollbar-width: none;
}
.e-con:has(> .ev-tile__heading)::-webkit-scrollbar { width: 0; height: 0; }
.e-con:has(> .ev-tile__img):hover > .e-con:has(> .ev-tile__heading),
.e-con:has(> .ev-tile__img):focus-within > .e-con:has(> .ev-tile__heading) { opacity: 1; }

/* Overlay-Typo: Heading Open Sans Bold 30px Caps, Body Open Sans 20px - beide weiss */
.ev-tile__heading .elementor-heading-title {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: var(--color-on-primary) !important;   /* sonst faerbt das Kit den Titel navy -> unsichtbar */
    font-size: clamp(1.25rem, 1.9vw, 30px);
    line-height: 1.15;
}
.ev-tile__text p {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    color: var(--color-on-primary) !important;
    font-size: clamp(1rem, 1.25vw, 20px);
    line-height: 1.4;
    margin-bottom: 0.85rem;
}
.ev-tile__text p:last-child { margin-bottom: 0; }
.ev-tile__text strong { font-weight: 700; }

/* Prev/Next-Pfeile (per JS erzeugt), an der Position der frueheren Pagination-Dots:
   unten mittig. Gleiches Pfeil-Icon wie in den anderen Sektionen, navy (currentColor). */
.ev-einblicke__nav { display: flex; justify-content: center; align-items: center; gap: clamp(1.75rem, 6vw, 3rem); }
.ev-einblicke__arrow {
    appearance: none; border: 0; padding: 6px; cursor: pointer;
    background: none; color: var(--color-primary);
    width: clamp(34px, 3.4vw, 44px); height: clamp(34px, 3.4vw, 44px);
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity 0.2s ease;
}
.ev-einblicke__arrow svg { width: 100%; height: 100%; display: block; }
.ev-einblicke__arrow:hover { opacity: 0.6; }

/* Mobil (<=900px, kein Hover): zweigeteilte Kachel - Bild oben, Navy-Text unten */
@media (max-width: 900px) {
    .e-con:has(> .ev-einblicke__title) { --tile-w: 84vw; --tile-gap: 1.25rem; }
    .e-con:has(> .ev-tile__img) {
        aspect-ratio: auto;
        background: var(--color-primary);
    }
    .ev-tile__img { position: static !important; height: auto; }
    .ev-tile__img > .elementor-widget-container { height: auto; }
    .ev-tile__img img { height: auto; aspect-ratio: 16 / 10; }
    .e-con:has(> .ev-tile__heading) { position: static; opacity: 1; overflow: visible; }
}

/* ─── Sektion: Die Praxis (Foto-Deck-Galerie auf Navy) ───────────
   Navy-Sektion: links Zaehler (1/N) + Titel, rechts gestaffelter Foto-Stapel (Deck).
   Karten via data-pos (0=vorn, 1/2 dahinter) in % der Deck-Box positioniert (exakt nach
   Figma-Proportionen). Prev/Next-Pfeile + Zaehler werden per JS gesetzt; Inhalte (Bilder)
   bleiben editierbar in der Media Library. Container via :has() treffen. */

/* Sektion (Hintergrund kommt aus Elementor-Settings = navy) */
.e-con:has(> .e-con > .ev-praxis__counter) {
    /* Einrueckung wie Sektion 2 (Details unten); hier definiert, damit auch die Linie sie nutzt. */
    --praxis-inset: calc(10px + var(--container-gutter) + max(var(--container-gutter), (100% - 20px - var(--container-max)) / 2));
    position: relative;
    overflow: hidden;
    flex-direction: row !important;
    align-items: center !important;
    gap: clamp(1.5rem, 4vw, 4rem) !important;
    padding-block: clamp(3rem, 6vw, 90px) !important;
    padding-inline: 0 !important;
}
/* Vertikale Trennlinie ueber die GANZE Sektionshoehe, mit Luecke am Text (wie Figma) */
.e-con:has(> .e-con > .ev-praxis__counter)::before {
    content: "";
    position: absolute;
    left: calc(var(--praxis-inset) - clamp(1rem, 2vw, 2rem) + 80px);
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0 35%, transparent 35% 65%, rgba(255, 255, 255, 0.5) 65% 100%);
    z-index: 1;
}

/* Linke Spalte: Zaehler + Titel.
   Einrueckung exakt wie Sektion 2 ("doppelter Rand"): Standard-Container-Inset
   + nochmal ein Gutter. So fluchtet der Text mit dem Sektion-2-Text. */
/* Linke Spalte: Zaehler + Titel. Einrueckung wie Sektion 2 ("doppelter Rand"),
   --praxis-inset wird von der Sektion geerbt (siehe oben). */
.e-con:has(> .ev-praxis__counter) {
    flex: 1 1 auto !important;
    min-width: 0;
    position: relative;
    align-items: flex-start !important;
    gap: clamp(0.5rem, 1.5vw, 1.5rem) !important;
    padding-left: var(--praxis-inset) !important;
    padding-right: clamp(1rem, 2vw, 2rem) !important;
}
.ev-praxis__counter .elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: #fff !important;
    font-size: clamp(3.5rem, 8vw, 121px);
    line-height: 1;
}
.ev-praxis__title .elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: #fff !important;
    font-size: clamp(2rem, 3.6vw, 48px);
    line-height: 1.1;
}

/* Rechte Spalte: Deck-Box. Linke Kante (= vorderste Karte) liegt auf der Sektion-2-
   Fliesstext-Achse (50% + halber Spaltenabstand); rechte Kante am Sektionsrand, damit
   das hinterste Bild bis zum Rand geht. Breite = 50% - halber Spaltenabstand. */
.e-con:has(> .ev-praxis__photo) {
    flex: 0 0 auto !important;
    width: calc(50% - clamp(1rem, 2vw, 30px)) !important;
    aspect-ratio: 5 / 4;
    position: relative;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
    touch-action: pan-y;
}
/* Karten: gleiche Proportionen (2:3), vertikal zentriert, nach rechts gestaffelt.
   Groesse ueber die Hoehe (% der Deck-Box); Breite folgt dem Seitenverhaeltnis. */
.ev-praxis__photo {
    position: absolute !important;
    top: 50%;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 2px;
    aspect-ratio: 2 / 3;
    /* Ruhezustand = hinterster Platz, unsichtbar: so blenden neu hereinrueckende Bilder
       sauber am hinteren Rand ein (kein Slide quer durchs Deck). */
    left: 62%;
    height: 71%;
    opacity: 0;
    z-index: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: left 0.45s ease, height 0.45s ease, opacity 0.4s ease;
}
.ev-praxis__photo > .elementor-widget-container,
.ev-praxis__photo figure { height: 100%; margin: 0; }
.ev-praxis__photo img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.ev-praxis__photo[data-pos="0"] { left: 0;    height: 100%; z-index: 3; opacity: 1; pointer-events: auto; box-shadow: 0 3px 16px rgba(0, 0, 0, 0.3); }
.ev-praxis__photo[data-pos="1"] { left: 33%;  height: 85%;  z-index: 2; opacity: 1; pointer-events: auto; cursor: pointer; box-shadow: 0 3px 16px rgba(0, 0, 0, 0.3); }
.ev-praxis__photo[data-pos="2"] { left: 62%;  height: 71%;  z-index: 1; opacity: 1; pointer-events: auto; cursor: pointer; }
/* Vorderstes Bild wird beim Weiterblaettern AN ORT ausgeblendet (bleibt vorne, nur Opacity),
   waehrend die hinteren Bilder nach vorne ruecken. Danach setzt JS die Klasse zurueck. */
.ev-praxis__photo.is-leaving { left: 0 !important; height: 100% !important; opacity: 0; z-index: 0; pointer-events: none; }

/* Prev/Next-Pfeile (per JS erzeugt) */
.ev-praxis__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(38px, 3.4vw, 50px);
    height: clamp(38px, 3.4vw, 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 6px;
    cursor: pointer;
    color: #fff;
    z-index: 5;
    transition: opacity 0.2s ease;
}
.ev-praxis__nav svg { width: 100%; height: 100%; display: block; }
.ev-praxis__nav:hover { opacity: 0.6; }
.ev-praxis__nav--prev { left: clamp(0.5rem, 2.5vw, 56px); }
.ev-praxis__nav--next { right: clamp(0.5rem, 2.5vw, 56px); }

/* Mobil: einspaltig - Zaehler/Titel oben, Deck darunter mittig */
@media (max-width: 900px) {
    .e-con:has(> .e-con > .ev-praxis__counter) {
        flex-direction: column !important;
        gap: clamp(1.5rem, 5vw, 2.5rem) !important;
    }
    .e-con:has(> .ev-praxis__counter) {
        flex: 0 0 auto !important;
        width: 100%;
        /* mobil wie Sektion 2: 1x Gutter + 10px Band-Padding */
        padding-left: calc(var(--container-gutter) + 10px) !important;
        padding-right: var(--container-gutter) !important;
    }
    .e-con:has(> .e-con > .ev-praxis__counter)::before { display: none; }   /* Trennlinie mobil aus */
    .e-con:has(> .ev-praxis__photo) {
        width: min(86vw, 460px) !important;
        /* rechtsbuendig: hinterstes Bild bis zum Rand, damit der navy Pfeil darauf sichtbar ist */
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    .ev-praxis__nav--prev { left: 0.25rem; }
    .ev-praxis__nav--next { right: 0.25rem; }
}


/* ─── Sektion 6: Therapieangebot (9-Slide-Slider) ────────────────
   Bild/Linie/Pfeile/Headlines sind an der INITIALHOEHE (--ev-t-h) verankert (absolut, fix).
   Das Navy-Panel liegt im Fluss und waechst beim Aufklappen nach unten (Sektion wird hoeher),
   waehrend die verankerten Elemente an ihrer Stelle bleiben. Bodycopy = Vorschau (scrollt,
   Fade oben/unten); die Caption am Textende ist der Aufklapp-Trigger (wie "Mehr erfahren"
   in Sektion 2/5). Pfeile links navy / rechts weiss; Linie navy (Position wie Sektion 4). */

.e-con:has(> .e-con > .e-con > .ev-therapie__img) {
    --ev-t-margin: max(var(--container-gutter), (100vw - var(--container-max)) / 2);
    --ev-t-half: calc(var(--ev-t-margin) / 2);
    --ev-t-inset: calc(10px + var(--container-gutter) + max(var(--container-gutter), (100% - 20px - var(--container-max)) / 2));
    --ev-t-img-w: clamp(220px, 23vw, 420px);
    --ev-t-img-h: calc(var(--ev-t-img-w) * 696 / 478);
    --ev-t-h: clamp(640px, 57.3vw, 860px);   /* einheitliche Default-Hoehe (wie Slide 5) */
    --ev-t-counter-w: calc(clamp(2.75rem, 6.5vw, 121px) * 1.5);   /* Breite des X/9-Zaehlers */
    position: relative;
    background: #fff;
    overflow: hidden;
    padding: 0 !important;
}
/* Vertikale Navy-Linie: fixe Hoehe = Initialhoehe (waechst beim Aufklappen NICHT mit) */
.e-con:has(> .e-con > .e-con > .ev-therapie__img)::before {
    content: ""; position: absolute; z-index: 1;
    left: calc(var(--ev-t-inset) - clamp(1rem, 2vw, 2rem) + 80px);
    top: 0; height: var(--ev-t-h); width: 1px;
    background: linear-gradient(to bottom,
        var(--color-primary) 0, var(--color-primary) calc(50% - var(--ev-t-img-h) / 2),
        transparent calc(50% - var(--ev-t-img-h) / 2), transparent calc(50% + var(--ev-t-img-h) / 2),
        var(--color-primary) calc(50% + var(--ev-t-img-h) / 2), var(--color-primary) 100%);
}

.e-con:has(> .e-con > .ev-therapie__img) { display: block !important; padding: 0 !important; touch-action: pan-y; }
.e-con:has(> .ev-therapie__img) {
    display: none !important; position: relative; min-height: var(--ev-t-h); padding: 0 !important;
}
.e-con:has(> .e-con > .ev-therapie__img):not(.is-ready) > .e-con:first-child { display: block !important; }
.e-con:has(> .ev-therapie__img).is-active { display: block !important; }

/* Bild: an Initialhoehe verankert (vertikal zentriert auf --ev-t-h, fix) */
.ev-therapie__img {
    position: absolute !important; z-index: 2;
    left: var(--ev-t-inset); top: calc(var(--ev-t-h) / 2); transform: translateY(-50%);
    width: var(--ev-t-img-w) !important; margin: 0 !important;
}
.ev-therapie__img > .elementor-widget-container, .ev-therapie__img figure { margin: 0; }
.ev-therapie__img img { width: 100%; aspect-ratio: 478 / 696; object-fit: cover; display: block; }

/* Navy-Panel: im Fluss (treibt die Sektionshoehe; waechst beim Aufklappen nach unten) */
.e-con:has(> .ev-therapie__eyebrow) {
    position: relative; z-index: 0;
    margin-left: calc(var(--ev-t-inset) + var(--ev-t-img-w) - var(--ev-t-half)) !important;
    width: calc(100% - var(--ev-t-inset) - var(--ev-t-img-w)) !important;
    height: var(--ev-t-h);   /* feste Default-Hoehe -> alle Slides gleich; Aufklappen setzt auto */
    background: var(--color-primary);
    display: flex !important; flex-direction: column !important;
    gap: clamp(0.85rem, 1.8vw, 1.5rem) !important;
    /* rechte Inhaltskante endet an der X/9-Beschriftung (Zaehler-Spalte rechts freihalten) */
    padding: clamp(2.25rem, 4.5vw, 70px) calc(var(--ev-t-half) + var(--ev-t-counter-w) + clamp(1rem, 2vw, 2.5rem)) clamp(2rem, 4vw, 60px) calc(var(--ev-t-half) + clamp(1.5rem, 3vw, 56px)) !important;
}
.ev-therapie__eyebrow .elementor-heading-title {
    font-family: var(--font-heading) !important; font-weight: 700 !important;
    color: #fff !important; font-size: clamp(1.6rem, 3.2vw, 48px); line-height: 1;
}
.ev-therapie__counter {
    position: absolute !important; z-index: 2;
    top: clamp(1.5rem, 3.2vw, 56px); right: var(--ev-t-half); margin: 0 !important;
}
.ev-therapie__counter .elementor-heading-title {
    font-family: var(--font-heading) !important; font-weight: 700 !important;
    color: #fff !important; font-size: clamp(2.75rem, 6.5vw, 121px); line-height: 1;
}
.ev-therapie__subtitle .elementor-heading-title {
    font-family: var(--font-body) !important; font-weight: 600 !important;
    text-transform: uppercase; color: #fff !important;
    font-size: clamp(1.05rem, 1.9vw, 30px); line-height: 1.2;
}

/* Bodycopy = Vorschau: scrollt mit Fade; beim Aufklappen voll sichtbar (Panel waechst) */
.ev-therapie__text {
    flex: 1 1 auto; min-height: 0;   /* fuellt die Resthoehe (Vorschau); Aufklappen -> volle Hoehe */
    overflow-y: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 100%);
}
.ev-therapie__text::-webkit-scrollbar { width: 0; height: 0; }
.ev-therapie__text.is-scrolled {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
}
.ev-therapie__text.is-bottom {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
}
.e-con.is-expanded .e-con:has(> .ev-therapie__eyebrow) { height: auto; }   /* Aufklappen: Panel waechst */
.e-con.is-expanded .ev-therapie__text {
    flex: 0 0 auto; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
}
.ev-therapie__text p, .ev-therapie__text li {
    font-family: var(--font-body) !important; font-weight: 400 !important;
    color: #fff !important; font-size: clamp(0.95rem, 1.1vw, 20px); line-height: 1.5;
}
.ev-therapie__text p { margin-bottom: 1rem; }
.ev-therapie__text p:last-child { margin-bottom: 0; }
.ev-therapie__text h4 {
    font-family: var(--font-heading); font-weight: 700; color: #fff;
    font-size: clamp(1.05rem, 1.3vw, 22px); line-height: 1.3; margin: 1.4rem 0 0.75rem;
}
.ev-therapie__text strong { font-weight: 700; }
.ev-therapie__text ul.ev-tbullets, .ev-therapie__text ul.ev-tlist { list-style: none; margin: 0 0 1rem; padding: 0; }
.ev-therapie__text ul.ev-tbullets li, .ev-therapie__text ul.ev-tlist li {
    padding-bottom: 0.6rem; margin-bottom: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.ev-therapie__text ul.ev-tbullets li:last-child, .ev-therapie__text ul.ev-tlist li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.ev-therapie__text ul.ev-tlist li strong { display: inline-block; margin-bottom: 0.2rem; }

/* Caption am Textende = Aufklapp-Trigger (per JS ins Panel verschoben) */
.ev-therapie__caption {
    flex: 0 0 auto; margin: 0 !important; cursor: pointer;
    padding-top: clamp(0.75rem, 1.5vw, 1.25rem) !important;
}
.ev-therapie__caption .elementor-heading-title {
    font-family: var(--font-body) !important; font-weight: 700 !important;
    color: #fff !important; font-size: clamp(0.9rem, 1.05vw, 20px); line-height: 1.3;
}
/* Passt der Text ohne Scroll: kein Gradient + Caption aus (nichts aufzuklappen).
   Nach dem Aufklappen ebenfalls Caption aus (zurueck nur ueber Slide-Wechsel). */
.e-con.is-complete .ev-therapie__caption,
.e-con.is-expanded .ev-therapie__caption { display: none; }
.e-con.is-complete .ev-therapie__text { -webkit-mask-image: none !important; mask-image: none !important; }

/* Touch-Geraete im HOCHFORMAT: KEIN innerer Textscroll - Weiterlesen ausschliesslich ueber
   den Aufklapp-Button ("Mehr erfahren") bzw. die Caption. Betrifft alle Text-Vorschau-
   Sektionen (was-ist/Ablauf + Therapie). Verhindert den Scroll-/Wisch-Konflikt auf iPad.
   QUERFORMAT bleibt bewusst beim Desktop-Inner-Scroll (bewusste Unterscheidung: im breiten
   Querformat gibt es genug Hoehe/Platz, der Scroll ist dort gewuenscht). Das <=900px-Layout
   stapelt ohnehin ohne Inner-Scroll; diese Regel deckt zusaetzlich Tablets im Desktop-
   Layout (>900px) im Hochformat ab. */
@media (hover: none) and (orientation: portrait) {
    .ev-was-ist__text,
    .ev-therapie__text { overflow: hidden !important; }
}

/* Prev/Next-Pfeile: an Initialhoehe verankert (fix). Beide navy; der rechte sitzt im
   weissen Streifen rechts neben dem Navy-Panel (halbe Container-Margin), sonst navy-auf-navy. */
.ev-therapie__nav {
    position: absolute; top: calc(var(--ev-t-h) / 2); transform: translateY(-50%);
    width: clamp(32px, 2.6vw, 42px); height: clamp(32px, 2.6vw, 42px);
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; padding: 4px; cursor: pointer; z-index: 6;
    transition: opacity 0.2s ease;
}
.ev-therapie__nav svg { width: 100%; height: 100%; display: block; }
.ev-therapie__nav:hover { opacity: 0.65; }
.ev-therapie__nav--prev { left: clamp(0.5rem, 2.5vw, 56px); }
.ev-therapie__nav--next { right: clamp(0.3rem, 0.7vw, 0.6rem); }

/* Mobil (<=900px): Sektion vollflaechig navy, als Grid. Layout wie im Figma-Mobile-Mockup:
   "Therapieangebot" oben (statisch), darunter Bild links im ORIGINAL-Hochformat (478:696,
   kein eigener Mobile-Crop noetig), Zaehler (X/9) gross oben rechts in der Grid-Zelle,
   Pfeile in der rechten Luecke auf Bildmitte. Untertitel/Text/Caption ueber volle Breite
   darunter; Text als Vorschau (KEIN Inner-Scroll), Tap auf Caption klappt auf (wie 2/5).
   Layout-Masse als Variablen auf dem SECTION-Container, damit die ausserhalb des Slides
   liegenden Pfeile (absolut) sie ebenfalls erben koennen. Panel via display:contents
   aufgeloest -> seine Kinder werden Grid-Items des Slides. */
@media (max-width: 900px) {
    .e-con:has(> .e-con > .e-con > .ev-therapie__img) {
        background: var(--color-primary);
        --ev-m-pad-top: clamp(2.25rem, 8vw, 3.25rem);
        --ev-m-row-gap: clamp(0.85rem, 3.5vw, 1.25rem);
        --ev-m-eb-h: clamp(1.65rem, 6.8vw, 2.2rem);  /* geschaetzte Hoehe der Eyebrow-Zeile */
        --ev-m-content: calc(100vw - 2 * var(--container-gutter));
        --ev-m-img-w: calc(0.54 * var(--ev-m-content));
        --ev-m-img-h: calc(var(--ev-m-img-w) * 696 / 478);
        --ev-m-arrow: clamp(34px, 9vw, 44px);
    }
    .e-con:has(> .ev-therapie__img) {
        height: 100vh !important;    /* Fallback fuer Browser ohne dvh */
        height: 100dvh !important;   /* definite Hoehe: Sektion fuellt eine Bildschirmhoehe, alle Slides gleich hoch */
        /* display bleibt none (Basisregel) - nur .is-active wird zum Grid, sonst
           wuerden alle 9 Slides gleichzeitig angezeigt. */
        grid-template-columns: var(--ev-m-img-w) 1fr;
        grid-template-rows: auto auto auto minmax(0, 1fr) auto;   /* Text-Zeile fuellt nur den Rest (kein Wachsen mit Inhalt) */
        grid-template-areas:
            "eb  eb"
            "img cnt"
            "sub sub"
            "txt txt"
            "cap cap";
        column-gap: clamp(1rem, 4vw, 1.75rem);
        row-gap: var(--ev-m-row-gap);
        align-items: start;
        background: var(--color-primary);
        padding: var(--ev-m-pad-top) var(--container-gutter) clamp(3rem, 9vw, 4rem) !important;
    }
    .e-con:has(> .ev-therapie__img).is-active,
    .e-con:has(> .e-con > .ev-therapie__img):not(.is-ready) > .e-con:first-child { display: grid !important; }

    /* Panel aufloesen -> Kinder werden Grid-Items des Slides. */
    .e-con:has(> .ev-therapie__eyebrow) { display: contents !important; }
    .ev-therapie__eyebrow { grid-area: eb; align-self: start; }
    .ev-therapie__eyebrow .elementor-heading-title { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.1; }

    .ev-therapie__img {
        grid-area: img; position: static !important; transform: none !important;
        width: 100% !important; margin: 0 !important; align-self: start;
    }
    .ev-therapie__img img { aspect-ratio: 478 / 696; width: 100%; object-fit: cover; }

    /* Zaehler gross, oben rechts in der rechten Spalte (neben der Bild-Oberkante) */
    .ev-therapie__counter {
        grid-area: cnt; position: static !important; margin: 0 !important;
        align-self: start; justify-self: end; text-align: right;
    }
    .ev-therapie__counter .elementor-heading-title { font-size: clamp(2.5rem, 13vw, 3.5rem); line-height: 1; }

    .ev-therapie__subtitle { grid-area: sub; margin: clamp(0.5rem, 2vw, 1rem) 0 0 !important; }
    .ev-therapie__caption { grid-area: cap; }

    /* Text: Vorschau ohne Inner-Scroll, Fade unten; Aufklappen zeigt alles. */
    .ev-therapie__text {
        grid-area: txt; min-height: 0; height: 100%; margin: 0; overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
    }
    .e-con.is-expanded .ev-therapie__text { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    /* Aufgeklappt: Slide waechst ueber die Bildschirmhoehe hinaus (statt fixe Hoehe) */
    .e-con.is-expanded:has(> .ev-therapie__img) {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    .e-con:has(> .e-con > .e-con > .ev-therapie__img)::before { display: none; }   /* Linie aus */

    /* Pfeile: rechte Luecke neben dem Bild, vertikal auf Bildmitte, beide weiss */
    .ev-therapie__nav {
        width: var(--ev-m-arrow) !important; height: var(--ev-m-arrow) !important;
        top: calc(var(--ev-m-pad-top) + var(--ev-m-eb-h) + var(--ev-m-row-gap) + var(--ev-m-img-h) / 2) !important;
        bottom: auto !important; transform: translateY(-50%) !important;
    }
    .ev-therapie__nav path { fill: #fff !important; }
    .ev-therapie__nav--prev {
        left: auto !important;
        right: calc(var(--container-gutter) + var(--ev-m-arrow) + clamp(0.75rem, 3.5vw, 1.4rem)) !important;
    }
    .ev-therapie__nav--next { right: var(--container-gutter) !important; left: auto !important; }
}

/* ─── Sektion 7: Ueber mich (zweispaltig: Text links, Bild rechts) ────── */
/* Aussencontainer: Seitenhintergrund + vertikales Padding wie die anderen Sektionen */
.e-con:has(> .e-con > .e-con > .ev-ueber__title) {
    --ev-pad-top: clamp(3rem, 8vw, 120px);
    --ev-img-top: clamp(3.5rem, 8.4vw, 162px);   /* Bild-Versatz von der Inhaltsoberkante */
    --ev-img-w: clamp(220px, 23vw, 359px);        /* Bild-/Spaltenbreite */
    --ev-img-h: calc(var(--ev-img-w) * 3 / 2);    /* Hochformat 2:3 -> Hoehe = Breite * 1.5 */
    background: var(--color-bg);
    padding-block: var(--ev-pad-top) !important;
    position: relative;   /* Deko-Linien sind an der Sektion (Full-Width) verankert */
}
/* Inhalts-Container: zentriert, 2 Spalten (Text | Bild) */
.e-con:has(> .e-con > .ev-ueber__title) {
    width: min(var(--container-max), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding-inline: var(--container-gutter);
    padding-block: 0 !important;   /* Elementor-Default (10px) raus -> Linien sitzen exakt auf den Inhaltskanten */
    flex-direction: row !important;
    gap: clamp(2rem, 6vw, 169px) !important;
    align-items: flex-start !important;
    position: relative;
}
/* Linke Spalte (Text) waechst; eigener vertikaler Rhythmus (40px im Design) */
.e-con:has(> .ev-ueber__title) {
    flex: 1 1 0 !important;
    min-width: 0;
    gap: clamp(1.5rem, 2.6vw, 40px) !important;
}
/* Rechte Spalte (Bild + Caption): feste Breite, startet auf Hoehe des Fliesstexts */
.e-con:has(> .ev-ueber__photo) {
    flex: 0 0 auto !important;
    width: var(--ev-img-w);
    margin-top: var(--ev-img-top);
    padding: 0 !important;   /* Bild fuellt die Spalte exakt -> Bildhoehe = Breite * 1.5 */
    gap: clamp(0.5rem, 0.8vw, 12px) !important;
}

/* Zwei feine vertikale Deko-Linien rechts neben dem Bild (wie im Figma-Grid).
   Am zentrierten Inhalts-Container verankert: dessen rechte Gutter-Achse (right:0)
   entspricht der Figma-Linie an x=1779; die zweite sitzt ~52px weiter links.
   So sitzen sie in unserem fluiden, zentrierten Layout an der gleichen Stelle. */
.e-con:has(> .e-con > .e-con > .ev-ueber__title)::before,
.e-con:has(> .e-con > .e-con > .ev-ueber__title)::after {
    content: ""; position: absolute; width: 1px; pointer-events: none;
    left: auto !important;   /* Elementor setzt auf .e-con::before ein left:0 -> sonst landet die linke Linie am linken Rand */
    background: var(--color-primary);   /* 100% Navy, 1px */
    z-index: 1;
}
/* Beide an der RECHTEN Seite der Sektion; Abstand zueinander = halbe Gutter-Breite.
   Hoehen an Bild-/Inhaltskanten gekoppelt (wie im Figma). */
.e-con:has(> .e-con > .e-con > .ev-ueber__title)::before {  /* Linie A (links): Inhalt-Oberkante -> Bild-Unterkante */
    right: calc(var(--container-gutter) * 1.5);
    top: var(--ev-pad-top);
    height: calc(var(--ev-img-top) + var(--ev-img-h));
}
.e-con:has(> .e-con > .e-con > .ev-ueber__title)::after {   /* Linie B (rechts): Bild-Oberkante -> Inhalt-Unterkante */
    right: var(--container-gutter);
    top: calc(var(--ev-pad-top) + var(--ev-img-top));
    bottom: var(--ev-pad-top);   /* = padding-bottom -> endet exakt an der Inhaltsunterkante */
}

/* H2 Titel */
.ev-ueber__title .elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--color-primary);
    font-size: clamp(2rem, 3.6vw, 48px);
    line-height: 1.1;
}
/* Subheadline: Open Sans Semibold 30, Versalien */
.ev-ueber__subtitle .elementor-heading-title {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: var(--color-primary);
    font-size: clamp(1.25rem, 1.8vw, 30px);
    line-height: 1.2;
    text-transform: uppercase;
}
/* Fliesstext */
.ev-ueber__text p {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    color: var(--color-text-body) !important;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.ev-ueber__text p:last-child { margin-bottom: 0; }

/* Fortbildungs-Liste: gleiche Trennlinien wie Sektion 2 (Fira Bold navy) */
.ev-ueber__quali ul.ev-conditions { list-style: none; margin: 0; padding: 0; }
.ev-ueber__quali ul.ev-conditions li {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    font-size: 20px;
    line-height: 1.8;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-primary);
}
.ev-ueber__quali ul.ev-conditions li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* Portrait (Hochformat 359:538 ~ 2:3) */
.ev-ueber__photo > .elementor-widget-container, .ev-ueber__photo figure { margin: 0; }
.ev-ueber__photo img {
    width: 100%; height: auto; display: block;
    aspect-ratio: 2 / 3; object-fit: cover;
}
/* Caption unter dem Bild */
.ev-ueber__caption .elementor-heading-title {
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    color: var(--color-text-body);
    font-size: clamp(1rem, 1.1vw, 20px);
    line-height: 1.4;
}

/* "Mehr erfahren" (nur mobil sichtbar; klappt den Fliesstext auf - Optik wie Sektion 2).
   Desktop zeigt den vollen Text, daher Button standardmaessig aus. */
.ev-ueber__more { display: none; text-align: left; }
.ev-ueber__more .elementor-button-wrapper { text-align: left; }
.ev-ueber__more .elementor-button {
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    justify-content: flex-start;
    text-align: left;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary) !important;
    fill: var(--color-primary);
    font-size: 20px;
    line-height: 1.8;
}
.ev-ueber__more .elementor-button:hover { background-color: transparent !important; }

/* Mobil (<=900px): gestapelt. Kein Figma-Mobile -> abgeleitet. Portrait als Auftakt
   oben (Foto + "Eva-Maria Ruso"), darunter "Ueber mich" + Texte + Liste. Deko-Linien aus. */
@media (max-width: 900px) {
    .e-con:has(> .e-con > .ev-ueber__title) {
        flex-direction: column !important;
        gap: clamp(1.5rem, 6vw, 2.25rem) !important;
    }
    .e-con:has(> .ev-ueber__title) { gap: clamp(1.1rem, 4vw, 1.6rem) !important; }
    .e-con:has(> .ev-ueber__photo) {
        order: -1;                                   /* Portrait als Auftakt oben */
        width: clamp(200px, 60vw, 300px) !important;
        margin-top: 0 !important;
        align-self: flex-start;
    }
    .e-con:has(> .e-con > .e-con > .ev-ueber__title)::before,
    .e-con:has(> .e-con > .e-con > .ev-ueber__title)::after { display: none; }

    /* Fliesstext als Vorschau + "Mehr erfahren" (oberhalb der Liste), wie Sektion 2 */
    .ev-ueber__text {
        max-height: clamp(280px, 70vw, 420px); overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 80%, transparent 100%);
    }
    /* margin-bottom schafft mehr Luft zur folgenden Headline (Fortbildungen).
       !important, da Elementor die Widget-Margins sonst ueberschreibt. */
    .ev-ueber__more { display: block; margin-top: clamp(1rem, 4vw, 1.5rem) !important; margin-bottom: clamp(1.75rem, 8vw, 2.75rem) !important; }
    .e-con.is-expanded .ev-ueber__text { max-height: none; -webkit-mask-image: none; mask-image: none; }
    .e-con.is-expanded .ev-ueber__more { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   iOS-WebKit-Fix: mobile Stapelung via Grid statt flex-direction.
   Befund (verifiziert auf iOS 26, Safari + Chrome = beide WebKit): Auf iOS-
   WebKit wird bei Elementor-Flex-Containern (e-con-full) die per CSS-Variable
   gesetzte Richtung `flex-direction: var(--flex-direction)` NICHT angewendet -
   `column` bleibt effektiv `row`. Dadurch stapeln die 2-spaltigen Sektionen
   mobil nicht (Titel/Text/Bild laufen nebeneinander seitlich hinaus). Chrome
   auf Android, Firefox und Desktop sind nicht betroffen.
   Loesung: die betroffenen Container mobil auf ein 1-spaltiges Grid stellen.
   Grid nutzt kein flex-direction -> immun gegen den Bug; `gap` und `order` der
   bestehenden :has()-Regeln greifen im Grid ebenso -> optisch identisch.
   Betrifft die 2-spaltigen Content-Sektionen S2/S5/S7/S8/S10 (Aussencontainer
   + innere Spalten), angesteuert ueber ihre stabilen Elementor-Element-IDs.
   Karussells (Einblicke/Praxis/Therapie) und FAQ bleiben unberuehrt. */
@media (max-width: 900px) {
    #ueber { overflow-x: hidden; }   /* Safety-Net gegen Rest-Overflow */
    .e-con.elementor-element-8234883,  .e-con.elementor-element-485b89a,    /* S2 Was ist ... */
    .e-con.elementor-element-e50a002,  .e-con.elementor-element-e50a004,    /* S5 Ablauf */
    .e-con.elementor-element-e70a002,  .e-con.elementor-element-e70a010,  .e-con.elementor-element-e70a020,   /* S7 Ueber mich */
    .e-con.elementor-element-e80a002,  .e-con.elementor-element-e80a010,  .e-con.elementor-element-e80a020,   /* S8 Seminare */
    .e-con.elementor-element-e100a002, .e-con.elementor-element-e100a010, .e-con.elementor-element-e100a020 { /* S10 Kontakt */
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
}

/* ─── Sektion 8: Seminare & Weiterbildung (Navy, Text links, Bild rechts) ─── */
/* Aussencontainer: Navy, Full-Width, Masse als Variablen (auch fuer die Deko-Linien) */
.e-con:has(> .e-con > .e-con > .ev-seminare__title) {
    --ev-s-pad: clamp(3rem, 8vw, 120px);
    --ev-s-img-top: clamp(2.5rem, 6.4vw, 124px);   /* Bild-Versatz von der Inhaltsoberkante */
    --ev-s-img-w: clamp(220px, 23vw, 367px);
    --ev-s-img-h: calc(var(--ev-s-img-w) * 549 / 367);  /* Hochformat ~2:3 */
    --ev-s-gap: clamp(2rem, 6vw, 169px);
    background: var(--color-primary);
    padding-block: var(--ev-s-pad) !important;
    position: relative;
}
/* Inhalts-Container: zentriert, 2 Spalten (Text | Bild) */
.e-con:has(> .e-con > .ev-seminare__title) {
    width: min(var(--container-max), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding-inline: var(--container-gutter);
    padding-block: 0 !important;
    flex-direction: row !important;
    gap: var(--ev-s-gap) !important;
    align-items: flex-start !important;
    position: relative;
}
/* Linke Spalte (Text) waechst */
.e-con:has(> .ev-seminare__title) {
    flex: 1 1 0 !important;
    min-width: 0;
    gap: clamp(1.4rem, 2.3vw, 36px) !important;
}
/* Rechte Spalte (Bild): feste Breite, startet auf Hoehe des Fliesstexts */
.e-con:has(> .ev-seminare__photo) {
    flex: 0 0 auto !important;
    width: var(--ev-s-img-w);
    margin-top: var(--ev-s-img-top);
    padding: 0 !important;
}

/* Typo: durchgaengig weiss auf Navy */
.ev-seminare__title .elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: #fff !important;   /* !important: Kit erzwingt sonst die navy Heading-Farbe (unsichtbar auf Navy) */
    font-size: clamp(2rem, 3.6vw, 48px);
    line-height: 1.1;
}
.ev-seminare__subtitle .elementor-heading-title {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    color: #fff !important;
    font-size: clamp(1.25rem, 1.8vw, 30px);
    line-height: 1.2;
    text-transform: uppercase;
}
.ev-seminare__text p {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    color: #fff !important;
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}
.ev-seminare__text p:last-child { margin-bottom: 0; }
.ev-seminare__text strong { font-weight: 700; }

/* Krankheitsbilder-Liste mit Trennlinien (weiss auf Navy) */
.ev-seminare__quali ul.ev-conditions { list-style: none; margin: 0; padding: 0; }
.ev-seminare__quali ul.ev-conditions li {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #fff;
    font-size: 20px;
    line-height: 1.8;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #fff;
}
.ev-seminare__quali ul.ev-conditions li:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }

/* Bild (Hochformat 367:549 ~ 2:3) */
.ev-seminare__photo > .elementor-widget-container, .ev-seminare__photo figure { margin: 0; }
.ev-seminare__photo img { width: 100%; height: auto; display: block; aspect-ratio: 367 / 549; object-fit: cover; }

/* Bildunterschrift "Zum Webinar": klickbarer Link (weiss auf Navy). JS fragt vor der
   YouTube-Weiterleitung nach (externer Dienst) - siehe site.js. */
.ev-seminare__caption { margin-top: 0.65rem; }
.ev-seminare__caption p { margin: 0; }
.ev-seminare__weblink {
    display: inline-block;
    font-family: var(--font-body); font-weight: 600; font-size: 16px;
    color: #fff !important; text-decoration: underline; text-underline-offset: 3px;
    background-image: none; cursor: pointer;
}
.ev-seminare__weblink:hover { opacity: 0.75; }
.ev-seminare__weblink:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Eine vertikale Deko-Linie (weiss auf Navy) an der Sektions-Gutter-Achse, volle
   Sektionshoehe. left:auto wegen Elementor .e-con::before (sonst landet sie links). */
.e-con:has(> .e-con > .e-con > .ev-seminare__title)::after {
    content: ""; position: absolute; width: 1px; pointer-events: none;
    left: auto !important; background: #fff; z-index: 1;
    top: 0; bottom: 0;
    right: var(--container-gutter);
}

/* Mobil (<=900px): gestapelt, Bild als Auftakt oben, Deko-Linien aus. */
@media (max-width: 900px) {
    .e-con:has(> .e-con > .ev-seminare__title) {
        flex-direction: column !important;
        gap: clamp(1.5rem, 6vw, 2.25rem) !important;
    }
    .e-con:has(> .ev-seminare__title) { gap: clamp(1.1rem, 4vw, 1.6rem) !important; }
    .e-con:has(> .ev-seminare__photo) {
        order: -1;
        width: clamp(200px, 60vw, 300px) !important;
        margin-top: 0 !important;
        align-self: flex-start;
    }
    .e-con:has(> .e-con > .e-con > .ev-seminare__title)::after { display: none; }
}


/* ─── Sektion 9: FAQ (Bild links vollflaechig, Akkordeon rechts) ─────────── */
/* Aussencontainer: Seitenhintergrund, KEIN padding-inline -> Bild kann links
   bis zum Rand laufen. Titel + Akkordeon bekommen ihre Einrueckung selbst. */
.e-con:has(> .ev-faq__title) {
    background: var(--color-bg);
    padding: clamp(3rem, 8vw, 120px) 0 !important;
    position: relative;
}
.ev-faq__title { width: 100%; padding-left: var(--container-gutter); padding-right: var(--container-gutter); }
.ev-faq__title .elementor-heading-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--color-primary);
    font-size: clamp(2rem, 3.6vw, 48px);
    line-height: 1.1;
}

/* 2-Spalten-Reihe: Bild links (vollflaechig), Akkordeon rechts */
.e-con:has(> .ev-faq__image) {
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: clamp(2rem, 5vw, 154px) !important;
    padding: 0 !important;
    margin-top: clamp(1.75rem, 4vw, 3.5rem) !important;
}
.ev-faq__image { flex: 0 0 clamp(280px, 50%, 960px) !important; }
.ev-faq__image > .elementor-widget-container, .ev-faq__image figure { margin: 0; }
.ev-faq__image img { width: 100%; aspect-ratio: 960 / 696; object-fit: cover; display: block; }

/* Akkordeon-Spalte: fuellt den Rest, rechter Rand = Gutter (Inhalt ~665px bei 1920) */
.ev-faq__accordion { flex: 1 1 auto !important; min-width: 0; padding-right: var(--container-gutter); }
.ev-faq__list { width: 100%; }

/* Akkordeon-Item: Trennlinie unten */
.ev-faq__item { border-bottom: 1px solid var(--color-primary); }
.ev-faq__item:last-child { border-bottom: none; }

/* Frage (summary): Zeile mit Frage + Icon, Standard-Marker aus */
.ev-faq__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1rem, 2vw, 2rem);
    padding: clamp(0.85rem, 1.6vw, 1.35rem) 0;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text-body);
    font-size: 20px;
    line-height: 1.4;
}
.ev-faq__q::-webkit-details-marker { display: none; }
.ev-faq__q::marker { content: ""; }
.ev-faq__q:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

/* Antwort */
.ev-faq__a { padding: 0 0 clamp(1rem, 2vw, 1.5rem); }
.ev-faq__a p {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-text-body);
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.ev-faq__a p:last-child { margin-bottom: 0; }

/* Toggle-Icon: geschlossen Chevron ">", offen "x" (beide navy) */
.ev-faq__icon { flex: 0 0 auto; width: 34px; height: 34px; position: relative; margin-top: 0.15em; }
.ev-faq__icon::before {   /* geschlossen: Chevron nach rechts */
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 11px; height: 11px;
    border-top: 3px solid var(--color-primary);
    border-right: 3px solid var(--color-primary);
    transform: translate(-70%, -50%) rotate(45deg);
}
.ev-faq__item[open] .ev-faq__icon::before {   /* offen: erster Strich des X */
    width: 22px; height: 0;
    border-top: 3px solid var(--color-primary);
    border-right: none;
    transform: translate(-50%, -50%) rotate(45deg);
}
.ev-faq__item[open] .ev-faq__icon::after {    /* offen: zweiter Strich des X */
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 22px; height: 0;
    border-top: 3px solid var(--color-primary);
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Mobil (<=900px): Reihenfolge Bild -> Headline -> Akkordeon. Reihe via display:contents
   aufgeloest, sodass Bild + Akkordeon Flex-Items des Aussencontainers werden und per
   order gemeinsam mit der Headline sortiert werden koennen. Bild volle Breite. */
@media (max-width: 900px) {
    /* padding-top 0: Bild schliesst direkt an die navy Sektion 8 an (kein heller Streifen dazwischen) */
    .e-con:has(> .ev-faq__title) { gap: clamp(1.25rem, 5vw, 2rem) !important; padding-top: 0 !important; }
    .e-con:has(> .ev-faq__image) { display: contents !important; }
    .ev-faq__image { order: 1 !important; flex: 0 0 auto !important; width: 100% !important; margin: 0 !important; }
    .ev-faq__title { order: 2 !important; margin-top: 0 !important; }
    .ev-faq__accordion { order: 3 !important; flex: 0 0 auto !important; padding-inline: var(--container-gutter) !important; }
}

/* ─── Sektion 10: Kontaktformular "So erreichen Sie uns" ─────────────────── */
.e-con:has(> .e-con > .e-con > .ev-kontakt__title) {
    --ev-k-pad: clamp(3rem, 8vw, 120px);
    background: var(--color-bg);
    padding-block: var(--ev-k-pad) !important;
    position: relative;
}
/* Inhalts-Container: zentriert, 2 Spalten (Kontaktinfo | Formular) */
.e-con:has(> .e-con > .ev-kontakt__title) {
    width: min(var(--container-max), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding-inline: var(--container-gutter);
    padding-block: 0 !important;
    flex-direction: row !important;
    gap: clamp(2rem, 6vw, 140px) !important;
    align-items: flex-start !important;
}
.e-con:has(> .ev-kontakt__title) { flex: 1 1 0 !important; min-width: 0; gap: clamp(0.85rem, 1.4vw, 1.25rem) !important; }
.e-con:has(> .ev-kontakt__formwrap) { flex: 1 1 0 !important; min-width: 0; }

/* Linke Spalte: Typo + Kontaktdaten */
.ev-kontakt__title .elementor-heading-title {
    font-family: var(--font-heading) !important; font-weight: 700 !important;
    color: var(--color-primary); font-size: clamp(2rem, 3.6vw, 48px); line-height: 1.1;
}
.ev-kontakt__intro p, .ev-kontakt__address p, .ev-kontakt__partner-label p {
    font-family: var(--font-body); color: var(--color-text-body); font-size: 16px; line-height: 1.5; margin: 0;
}
.ev-kontakt__intro { margin-bottom: clamp(0.75rem, 2.5vw, 2rem); }
.ev-kontakt__address p { margin-bottom: 1rem; }
.ev-kontakt__address p:last-child { margin-bottom: 0; }
.ev-kontakt__address a { color: var(--color-text-body); }
/* Standort-Pin ueber der Adresse (navy via mask) */
.ev-kontakt__address::before {
    content: ""; display: block; width: 30px; height: 30px; margin-bottom: 0.85rem;
    background: var(--color-primary);
    -webkit-mask: url("assets/img/icon-location.svg") no-repeat center / contain;
    mask: url("assets/img/icon-location.svg") no-repeat center / contain;
}
.ev-kontakt__partner-label { margin-top: clamp(1.25rem, 3vw, 2.25rem); }
.ev-kontakt__partner-logo { width: 169px; max-width: 100%; }
.ev-kontakt__partner-logo > .elementor-widget-container, .ev-kontakt__partner-logo figure { margin: 0; }
.ev-kontakt__partner-logo img { width: 100%; height: auto; display: block; }

/* Visually-hidden Labels (a11y; sichtbar bleibt der Platzhalter) */
.ev-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─ Formular ─ */
.ev-kontakt__form { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.1vw, 0.85rem); }
.ev-kontakt__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ev-kontakt__required-hint { margin: 0 0 0.25rem; font-family: var(--font-body); font-size: 14px; color: #6b7280; }
.ev-kontakt__field { margin: 0; }
.ev-kontakt__input {
    width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--color-text-body);
    background: #fff; border: 1px solid #97a2af; border-radius: 0; padding: 0.6rem 0.85rem; line-height: 1.4;
}
.ev-kontakt__input::placeholder { color: #6b7280; opacity: 1; }
.ev-kontakt__input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.ev-kontakt__textarea { resize: vertical; min-height: 160px; }

/* Anamnesebogen als Prozess: Unterueberschrift + Step 01 (Download = Primary-Button)
   + Step 02 (Upload = Secondary-Button). */
.ev-anamnese { margin-top: clamp(0.5rem, 1.5vw, 1rem); }
.ev-anamnese__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--color-primary); margin: 0 0 0.75rem; }

.ev-anamnese__step { margin-top: clamp(0.85rem, 1.8vw, 1.3rem); }
.ev-anamnese__step-label { font-family: var(--font-body); font-size: 15px; color: var(--color-text-body); margin: 0 0 0.5rem; }
.ev-anamnese__step-num { font-weight: 700; color: var(--color-primary); margin-right: 0.4rem; }

/* Step 01: Download = Primary-Button (navy gefuellt, Icon + Text) */
.ev-anamnese__download {
    display: inline-flex; align-items: center; gap: 0.55rem;
    background-color: var(--color-primary); background-image: none; color: #fff;
    font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.2;
    padding: 0.6rem 1.4rem; border-radius: 90px; text-decoration: none;
    transition: opacity 0.15s ease;
}
.ev-anamnese__download:hover, .ev-anamnese__download:focus-visible { opacity: 0.85; color: #fff; }
/* Icon rechts neben dem Button-Text - beide Buttons gleiches Icon (Upload = vertikal gespiegelt). */
.ev-anamnese__btn-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 auto; }
.ev-anamnese__btn-icon svg { width: 100%; height: 100%; display: block; }
.ev-anamnese__btn-icon--up svg { transform: scaleY(-1); }

/* Step 02: Upload = Secondary-Button (Label loest das versteckte File-Input aus).
   Dateivorgaben (PDF/JPG/PNG, max. 8 MB) werden NICHT vorab gezeigt - erst bei einem
   ungueltigen Versuch erscheint die Fehlermeldung (per JS). */
.ev-anamnese-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.85rem; }
.ev-anamnese-upload__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ev-anamnese-upload__btn {
    display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
    font-family: var(--font-body); font-size: 16px; font-weight: 600;
    border: 1px solid #97a2af; background: #fff; color: var(--color-primary);
    padding: 0.45rem 1.1rem; border-radius: 90px;
    transition: background 0.15s ease, color 0.15s ease;
}
.ev-anamnese-upload__btn:hover { background: var(--color-primary); color: #fff; }
.ev-anamnese-upload__input:focus-visible + .ev-anamnese-upload__btn { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ev-anamnese-upload__name { font-family: var(--font-body); font-size: 14px; color: #6b7280; }
.ev-anamnese-upload__error { flex-basis: 100%; margin-top: 0.2rem; font-family: var(--font-body); font-size: 14px; color: #c0392b; }
.ev-anamnese-upload__error[hidden] { display: none; }

/* Checkboxen */
.ev-kontakt__check { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0.2rem 0 0; }
.ev-kontakt__check input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 0.2em; accent-color: var(--color-primary); }
.ev-kontakt__check label { font-family: var(--font-body); font-size: 16px; line-height: 1.45; color: var(--color-text-body); }
.ev-kontakt__check label strong { font-weight: 700; }
.ev-kontakt__check a { color: var(--color-text-body); }

/* Senden-Button */
.ev-kontakt__submit {
    display: inline-flex; align-items: center; gap: 0.6rem; background: none; border: 0; padding: 0.4rem 0 0; cursor: pointer;
    font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--color-primary); align-self: flex-start;
}
.ev-kontakt__submit-icon { width: 19px; height: 19px; color: var(--color-primary); display: inline-flex; }
.ev-kontakt__submit-icon svg { width: 100%; height: 100%; display: block; transform: rotate(90deg); }
.ev-kontakt__submit:hover { text-decoration: underline; }

/* Hinweis nach Absenden */
.ev-kontakt__notice { font-family: var(--font-body); font-size: 16px; padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 0.5rem; }
.ev-kontakt__notice--ok { background: #e7f3ec; color: #1c5b32; border: 1px solid #b6dcc4; }
.ev-kontakt__notice--error { background: #fbeaea; color: #8a1f1f; border: 1px solid #e6b3b3; }

/* Zwei vertikale Deko-Linien links (navy), wie im Figma-Grid */
.e-con:has(> .e-con > .e-con > .ev-kontakt__title)::before,
.e-con:has(> .e-con > .e-con > .ev-kontakt__title)::after {
    content: ""; position: absolute; width: 1px; background: var(--color-primary); pointer-events: none; z-index: 1;
}
.e-con:has(> .e-con > .e-con > .ev-kontakt__title)::after {   /* x=98, ab Sektionsoberkante */
    left: clamp(1.5rem, 5.1vw, 98px); top: 0; height: clamp(260px, 26.8vw, 514px);
}
.e-con:has(> .e-con > .e-con > .ev-kontakt__title)::before {  /* x=67, weiter unten */
    left: clamp(1rem, 3.5vw, 67px); top: clamp(8rem, 15.6vw, 300px); height: clamp(260px, 26.8vw, 514px);
}

/* Mobil (<=900px): gestapelt (Kontaktinfo, dann Formular) */
@media (max-width: 900px) {
    .e-con:has(> .e-con > .ev-kontakt__title) {
        flex-direction: column !important;
        gap: clamp(1.75rem, 7vw, 2.75rem) !important;
    }
    .e-con:has(> .e-con > .e-con > .ev-kontakt__title)::before,
    .e-con:has(> .e-con > .e-con > .ev-kontakt__title)::after { display: none; }
}

/* Validierung: ungueltiges/angesprungenes Pflichtfeld rot markieren (statt navy).
   Native Popups sind via JS (novalidate) aus; serverseitige Pruefung bleibt Fallback. */
.ev-kontakt__input.ev-invalid,
.ev-kontakt__input.ev-invalid:focus-visible { border-color: #c0392b !important; outline-color: #c0392b; }
.ev-kontakt__check.ev-invalid input { outline: 2px solid #c0392b; outline-offset: 2px; accent-color: #c0392b; }
.ev-kontakt__check.ev-invalid label { color: #c0392b; }

/* ─── Mobile: einheitliche Seitenraender (keine doppelte Einrueckung) ─────── */
/* Problem: S2/S7/S8/S10 hatten mobil unterschiedliche Raender, weil sich Elementors
   Default-Container-Padding (10px je Verschachtelungsebene) plus teils ein zusaetzliches
   padding-inline aufaddierten. Loesung: bei diesen Sektionen mobil das horizontale
   Padding ALLER Container (Aussencontainer + Spalten) auf 0 - der EINE Seitenrand kommt
   allein aus der Zentrierung des Inhalts-Containers (width 100%-2*gutter + margin auto).
   Damit sitzen alle Inhalte auf der gleichen Achse wie S3/S6/S9/Footer (1 Gutter). */
@media (max-width: 900px) {
    .e-con:has(> .e-con > .ev-was-ist__title),
    .e-con:has(> .e-con > .ev-was-ist__title) .e-con,
    .e-con:has(> .e-con > .e-con > .ev-ueber__title),
    .e-con:has(> .e-con > .e-con > .ev-ueber__title) .e-con,
    .e-con:has(> .e-con > .e-con > .ev-seminare__title),
    .e-con:has(> .e-con > .e-con > .ev-seminare__title) .e-con,
    .e-con:has(> .e-con > .e-con > .ev-kontakt__title),
    .e-con:has(> .e-con > .e-con > .ev-kontakt__title) .e-con {
        padding-inline: 0 !important;
    }
}

/* ─── Mobile: Bodycopy einheitlich 16px (Desktop bleibt 20px "Body Large") ── */
@media (max-width: 900px) {
    .ev-was-ist__text p,
    .ev-tile__text p,
    .ev-therapie__text p,
    .ev-ueber__text p,
    .ev-seminare__text p,
    .ev-faq__a p,
    .ev-kontakt__intro p,
    .ev-kontakt__address p {
        font-size: 16px;
    }
}

/* ─── Einheitlicher CTA-Hover (wie die Footer-Links) ────────────────────────
   Alle klickbaren Text-CTAs bekommen denselben Hover wie die Footer-Links: ein
   Unterstrich in Textfarbe (currentColor), der von links nach rechts aufwaechst -
   ohne Farb-, Opacity- oder text-decoration-Wechsel. Icon-Bedienelemente (Burger,
   Pfeile, Logo, Social) behalten ihr dezentes Opacity-Feedback. */
.ev-nav__menu a,
.ev-nav__footer a,
.ev-nav__reach a,
.ev-was-ist__more .elementor-button,
.ev-ueber__more .elementor-button,
.ev-kontakt__submit,
.ev-seminare__weblink {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 calc(100% - var(--link-underline-offset));
    background-size: 0% var(--link-underline-thickness);
    text-decoration: none;
    transition: background-size var(--link-underline-duration) var(--link-underline-ease);
}
.ev-nav__menu a:hover, .ev-nav__menu a:focus-visible,
.ev-nav__footer a:hover, .ev-nav__footer a:focus-visible,
.ev-nav__reach a:hover, .ev-nav__reach a:focus-visible,
.ev-was-ist__more .elementor-button:hover, .ev-was-ist__more .elementor-button:focus-visible,
.ev-ueber__more .elementor-button:hover, .ev-ueber__more .elementor-button:focus-visible,
.ev-kontakt__submit:hover, .ev-kontakt__submit:focus-visible,
.ev-seminare__weblink:hover, .ev-seminare__weblink:focus-visible {
    background-size: 100% var(--link-underline-thickness);
    opacity: 1;
    text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
    .ev-nav__menu a, .ev-nav__footer a, .ev-nav__reach a,
    .ev-was-ist__more .elementor-button, .ev-ueber__more .elementor-button,
    .ev-kontakt__submit, .ev-seminare__weblink { transition: none; }
}

/* ─── Sektion Ablauf (S5) + Therapieangebot (S6): CTA-Hover = vertikaler Strich links ───
   Statt des wachsenden Unterstrichs erscheint bei Hover eine senkrechte Linie links vom
   Text (wie im Design). #ablauf ist die Ablauf-Sektion (CSS-ID unten gesetzt); der
   Unterstrich aus dem CTA-Block wird dort deaktiviert. */
#ablauf .ev-was-ist__more .elementor-button {
    background-image: none;           /* keinen wachsenden Unterstrich */
    position: relative;
}
.ev-therapie__caption { position: relative; }

#ablauf .ev-was-ist__more .elementor-button::before {
    content: ""; position: absolute; left: -0.85rem; top: 0.12em; bottom: 0.12em;
    width: 2px; background: var(--color-primary);
    opacity: 0; transition: opacity 0.2s ease;
}
.ev-therapie__caption::before {
    content: ""; position: absolute; left: -0.85rem;
    top: clamp(0.75rem, 1.5vw, 1.25rem);   /* = padding-top der Caption: Linie startet am Text */
    bottom: 0;
    width: 2px; background: #fff;
    opacity: 0; transition: opacity 0.2s ease;
}
#ablauf .ev-was-ist__more .elementor-button:hover::before,
#ablauf .ev-was-ist__more .elementor-button:focus-visible::before,
.ev-therapie__caption:hover::before,
.ev-therapie__caption:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    #ablauf .ev-was-ist__more .elementor-button::before,
    .ev-therapie__caption::before { transition: none; }
}

/* Chevron-down an den Aufklapp-Buttons (zeigt an: Button klappt Text auf). Rechts neben
   dem Text; bei 2-zeiligem CTA in der unteren Zeile, unten buendig. currentColor via mask. */
.ev-was-ist__more .elementor-button-text::after,
.ev-ueber__more .elementor-button-text::after,
.ev-therapie__caption .elementor-heading-title::after {
    content: "";
    display: inline-block;
    width: 0.72em; height: 0.46em;
    margin-left: 0.45em;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: url('assets/img/icon-chevron-down.svg') no-repeat center / contain;
    mask: url('assets/img/icon-chevron-down.svg') no-repeat center / contain;
}

/* "Zum Webinar": Pfeil oben-rechts (eckig) als Hinweis auf einen externen Link. */
.ev-seminare__weblink::after {
    content: "";
    display: inline-block;
    width: 0.72em; height: 0.72em;
    margin-left: 0.35em;
    vertical-align: -0.06em;
    background-color: currentColor;
    -webkit-mask: url('assets/img/icon-external.svg') no-repeat center / contain;
    mask: url('assets/img/icon-external.svg') no-repeat center / contain;
}