/*
Theme Name: ConsileonDX Theme
Template: hello-elementor
Author: Consileon DX
Description: Child Theme for Consileon DX based on Hello Elementor.
Version: 1.0.0
Text Domain: consileondx
*/

/* ============================================================
   Consileon DX – Child Theme style.css

   Struktur:
   1. Primitive Color Tokens
   2. Semantic Color Tokens
   3. Elementor Bridge (V3 + V4)
   4. Spacing Tokens (Fallback + Fluid)
   5. Typography Scale (Fallback + Fluid)
   6. Display Tokens (Fallback + Fluid)
   7. Semantic Type Tokens
   8. Utility: Links
   9. Utility: Grid Classes
  10. Widget Anpassungen
  11. Header
  12.Footer
  KOMPONENTE: HERO HEADLINE
  KOMPONENTE: ANIMATED CTA BUTTON
  KOMPONENTE: ICON-BUTTONS (MAIL/PHONE)
  KOMPONENTE: TERMIN-BUTTON

   Prinzip:
   – Primitive Tokens = rohe Werte, nie direkt im HTML verwendet
   – Semantic Tokens = Rollen (accent, text, surface …)
   – Elementor konsumiert nur Semantic Tokens
   – clamp()-Werte leben hier, nicht in Elementor V4-Klassen
   – Elementor V4-Klassen referenzieren nur var(--token)
============================================================ */


:root {

  /* -- Consileon Violet-Grey -------------------------------- */
  --color-violet-grey-100: #e8e8eb;
  --color-violet-grey-200: #d1d2d9;
  --color-violet-grey-300: #a4a5b2;
  --color-violet-grey-400: #77788c;	  /* text-secndary */
  --color-violet-grey-500: #4a4b66;
  --color-violet-grey-600: #1d1e40;	  /* text-primary */
  --color-violet-grey-700: #161729;
  --color-violet-grey-800: #0e0f19;
  --color-violet-grey-900: #07080d;

  /* -- Consileon Red ---------------------------------------- */
  --color-red-100: #fae6e9;
  --color-red-200: #f5cfd5;
  --color-red-300: #eb9fab;
  --color-red-400: #e16f81;
  --color-red-500: #d73f57;
  --color-red-600: #cd102e;           /* Accent */
  --color-red-700: #a50d25;
  --color-red-800: #7a0a1b;
  --color-red-900: #500712;

  /* -- Consileon Grey-Blue ---------------------------------- */
  --color-grey-blue-100: #f2f3f6;
  --color-grey-blue-200: #e6e8ed;
  --color-grey-blue-300: #ced1db;
  --color-grey-blue-400: #b5bac9;
  --color-grey-blue-500: #9ca3b7;
  --color-grey-blue-600: #848da5;
  --color-grey-blue-700: #636c83;
  --color-grey-blue-800: #434a5c;
  --color-grey-blue-900: #252935;

  /* -- Consileon Grey --------------------------------------- */
  --color-grey-100: #ecedee;
  --color-grey-200: #dadcdd;
  --color-grey-300: #b5b9bb;
  --color-grey-400: #919699;
  --color-grey-500: #6c7377;
  --color-grey-600: #485156;
  --color-grey-700: #363c40;
  --color-grey-800: #242829;
  --color-grey-900: #121415;

  /* -- Consileon Dark Purple -------------------------------- */
  --color-dark-purple-100: #ece9f3;
  --color-dark-purple-200: #dad3e8;
  --color-dark-purple-300: #b6a8d2;
  --color-dark-purple-400: #917cbb;
  --color-dark-purple-500: #6d51a4;
  --color-dark-purple-600: #49268e;
  --color-dark-purple-700: #39206e;
  --color-dark-purple-800: #27144e;
  --color-dark-purple-900: #160b2d;

  /* -- Consileon Ink Blue ----------------------------------- */
  --color-ink-blue-100: #e5ecf1;
  --color-ink-blue-200: #ccdae3;
  --color-ink-blue-300: #99b5c8;
  --color-ink-blue-400: #6691ac;
  --color-ink-blue-500: #336c91;
  --color-ink-blue-600: #004876;
  --color-ink-blue-700: #00375a;
  --color-ink-blue-800: #00263d;
  --color-ink-blue-900: #001521;

  /* -- Neutral ---------------------------------------------- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent !important;
	
  /* Header Height */
  --header-height-desktop: 8.75rem;
  --header-height-tablet: 7.5rem;
  --header-height-mobile: 5rem;
}


/* ============================================================
   2. SEMANTIC COLOR TOKENS
   Beschreiben Rollen, nicht Werte.
   Nur diese Tokens werden in Komponenten und Klassen verwendet.
============================================================ */

:root {

  /* Accent */
  --color-accent:         var(--color-red-600);
  --color-accent-hover:   var(--color-red-700);
  --color-accent-subtle:  var(--color-red-100);

  /* Text */
  --color-text-primary:   var(--color-violet-grey-600);
  --color-text-secondary: var(--color-violet-grey-400);
  --color-text-inverted:  var(--color-white);

  /* Surface */
  --color-surface:        var(--color-white);
  --color-surface-muted:  var(--color-violet-grey-100);
  --color-surface-mid:    var(--color-grey-blue-300);

  /* Ink (reines Schwarz für Headlines etc.) */
  --color-ink:            var(--color-black);

}


/* ============================================================
   3. ELEMENTOR BRIDGE
   V3- und V4-Variablen zeigen auf Semantic Tokens.
   Werte hier nie direkt als Hex eintragen.
============================================================ */

:root {

  /* V3 System Colors */
  --e-global-color-primary:   var(--color-ink);
  --e-global-color-secondary: var(--color-text-secondary);
  --e-global-color-text:      var(--color-text-primary);
  --e-global-color-accent:    var(--color-accent);

  /* V3 Custom Colors (IDs aus dem Elementor-Inspector) */
  --e-global-color-94f9cd4:   var(--color-white);
  --e-global-color-aea72b5:   var(--color-surface-muted);

}


/* ============================================================
   4. SPACING TOKENS
   Fallback = Minimum (stabil im Elementor-Editor).
   Fluid via @supports = skaliert nach oben.
============================================================ */

html, body {
  --gap-xs:     0.5rem;
  --gap-s:      1rem;
  --gap-m:      1.5rem;
  --gap-l:      2rem;
  --gap-xl:     3rem;

  --section-xs: 2rem;
  --section-s:  4rem;
  --section-m:  6rem;
  --section-l:  8rem;
  --section-xl: 10rem;
}

@supports (width: clamp(1rem, 2vw, 2rem)) {
  html, body {                           
    --section-xs: clamp(1.5rem, 3vw,    2rem);
    --section-s:  clamp(3rem,   5vw,    4rem);
    --section-m:  clamp(4rem,   7vw,    6rem);
    --section-l:  clamp(5rem,   9vw,    8rem);
    --section-xl: clamp(6rem,   12vw,   10rem);
  }
}

/* GAP-FLUID (Grid-Gap) Eigenständiges Token für Elementor V3 Grid-Widgets.
   8px bei min Viewport, 16px bei max Viewport. Bewusst getrennt von --gap-xs bis --gap-xl, da an Spaltenbreite des Grids gekoppelt, nicht an generische Layout-Abstände. */

html, body {
  --gap-fluid: 1rem; /* Fallback = ungefährer Mittelwert, falls clamp() nicht unterstützt */
}

@supports (width: clamp(1rem, 2vw, 2rem)) {
  html, body {
    --gap-fluid: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
  }
}

/* ============================================================
   FETTSCHRIFT — DUNKLERER TON ALS FLIESSTEXT
   strong/b bekommen eine dunklere Stufe derselben Farbramp
   statt einfach nur font-weight zu erhöhen.
============================================================ */

strong,
b {
  color: var(--Violet-Grey-900);
  font-weight: 500;
}

.font-h2-inverse strong,
.font-h2-inverse b {
	color: var(--color-white);
}

/* ============================================================
   5. TYPOGRAPHY SCALE – PRIMITIVE TOKENS
   Fallback = Maximalwert (Desktop/Designwert).
   Fluid via @supports = skaliert nach unten auf kleinen Screens.

   Achtung: Elementor V4 darf clamp() nicht inline bekommen.
   Klassen in V4 referenzieren nur: font-size: var(--font-size-400)
============================================================ */

html, body {
  --font-size-50:  0.75rem;
  --font-size-100: 0.875rem;
  --font-size-200: 1rem;
  --font-size-300: 1.25rem;
  --font-size-400: 1.5rem;
  --font-size-500: 2rem;
  --font-size-550: 2.25rem;
  --font-size-600: 2.5rem;
  --font-size-700: 3.5rem;
  --font-size-800: 5rem;
  --font-size-900: 8.75rem;
}

@supports (width: clamp(1rem, 2vw, 2rem)) {
  html, body {
	/* font-size-100: 10px (0.625rem) → 14px (0.875rem) */
	--font-size-100: clamp(0.625rem, 0.375rem + 0.4167vw, 0.875rem);

	/* font-size-200: 12px (0.75rem) → 16px (1rem) */
	--font-size-200: clamp(0.75rem, 0.5rem + 0.4167vw, 1rem);

	/* font-size-300: 14px (0.875rem) → 20px (1.25rem) */
	--font-size-300: clamp(0.875rem, 0.5rem + 0.625vw, 1.25rem);

	/* font-size-400: 16px (1rem) → 24px (1.5rem) */
	--font-size-400: clamp(1rem, 0.5rem + 0.8333vw, 1.5rem);

	/* font-size-500: 20px (1.25rem) → 32px (2rem) */
	--font-size-500: clamp(1.25rem, 0.5rem + 1.25vw, 2rem);

	/* font-size-550: 22px (1.375rem) → 36px (2.25rem) */
	--font-size-550: clamp(1.375rem, 0.5rem + 1.4583vw, 2.25rem);

	/* font-size-600: 24px (1.5rem) → 40px (2.5rem) */
	--font-size-600: clamp(1.5rem, 0.5rem + 1.6667vw, 2.5rem);

	/* font-size-700: 32px (2rem) → 56px (3.5rem) */
	--font-size-700: clamp(2rem, 0.5rem + 2.5vw, 3.5rem);

	/* font-size-800: 40px (2.5rem) → 80px (5rem) */
	--font-size-800: clamp(2.5rem, 0.5rem + 4.1667vw, 5rem);

	/* font-size-900: 48px (3rem) → 140px (8.75rem) */
	--font-size-900: clamp(4.0625rem, 2.5rem + 7.8125vw, 8.75rem);
  }
}


/* ============================================================
   6. DISPLAY TOKENS
   Separate Ramp für Hero/Editorial-Typografie.
   Kein rem-Anteil in der Mitte — bewusst nicht barrierefrei
   skalierend, damit große Hero-Schriften nicht durch
   Browser-Schriftgrößenvergrößerung doppelt eskalieren.

   Fallback = Maximalwert (Desktop)
   Tablet = Maximalwerte fix, kein Fluid nötig
   Mobile = kleinere fixe Werte
   Desktop = clamp mit reinem vw
============================================================ */

html, body {
  --display-xxl: 15rem;
  --display-xl: 8.75rem;
  --display-l:  3.5rem;
  --display-m:  2rem;
}

@supports (width: clamp(1rem, 2vw, 2rem)) {
  html, body {
	--display-xxl: clamp(6rem, 6.5vw, 15rem);
    --display-xl: clamp(4rem, 8.5vw, 8.75rem);
    --display-l:  clamp(2rem, 2.5vw, 3.5rem);
    --display-m:  clamp(1rem, 2.2vw, 2rem);
  }
}

@media (max-width: 1024px) {
  html, body {
	--display-xxl: 6rem;
    --display-xl: 4rem;
    --display-l:  2rem;
    --display-m:  1rem;
  }
}

@media (max-width: 767px) {
  html, body {
	--display-xxl: 6rem;
    --display-xl: 4rem;
    --display-l:  2rem;
    --display-m:  1rem;
  }
}


/* ============================================================
   7. SEMANTIC TYPE TOKENS
   Beschreiben visuelle Rollen, nicht HTML-Elemente.
   h1/h2 = Dokumentstruktur/SEO.
   .display-xl/.heading-m/.copy-s = visuelle Darstellung.

   Falls Elementor V4 bei var(var()) fehlerhaftes CSS erzeugt,
   diese Tokens hier belassen und in V4-Klassen nur konsumieren.
============================================================ */

html, body {
  --heading-l: var(--font-size-500);
  --heading-m: var(--font-size-400);

  --copy-l:    var(--font-size-500);
  --copy-m:    var(--font-size-400);
  --copy-s:    var(--font-size-200);
  --copy-xs:   var(--font-size-100);
}


/* ============================================================
   8. UTILITY: LINKS IN FLIESSTEXT
   Animierter Underline via background-image (kein text-decoration).
   Farbe wächst von links nach rechts beim Hover.
   Selektor ggf. um .elementor-widget-text-editor a erweitern.
============================================================ */

.elementor .e-paragraph-base a {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color 0.35s ease;
}
 
/* Grundlinie — immer sichtbar, dezent */
.elementor .e-paragraph-base a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  opacity: 0.3;
}
 
/* Accent-Linie — wächst von der Mitte nach außen beim Hover */
.elementor .e-paragraph-base a::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 1.5px;
  background-color: var(--color-accent);
  transition: width 0.35s ease, left 0.35s ease;
}
 
.elementor .e-paragraph-base a:hover {
  color: var(--color-accent);
}
 
.elementor .e-paragraph-base a:hover::before {
  left: 0%;
  width: 100%;
}

/* LINK-UNDERLINE — SONDERFALL OHNE UNTERSTREICHUNG
   Modifier-Klasse für Links, die vom Standard-Underline-Pattern
   ausgenommen werden sollen (z.B. Links in Cards, Buttons-artige
   Links, Icon-Links). */

.elementor .e-paragraph-base.no-underline a::after,
.elementor .e-paragraph-base.no-underline a::before,
.elementor .no-underline .e-paragraph-base a::after,
.elementor .no-underline .e-paragraph-base a::before {
  content: none;
}

/* ============================================
   9. UTILITY: GRID CLASSES
   Column / Row Span + Start — Desktop First
   lg = Default, md = ≤1024px, sm = ≤767px
   ============================================ */

/* --- DESKTOP (Default, kein Query) --- */
.lg-col-span-1  { grid-column-end: span 1; }
.lg-col-span-2  { grid-column-end: span 2; }
.lg-col-span-3  { grid-column-end: span 3; }
.lg-col-span-4  { grid-column-end: span 4; }
.lg-col-span-5  { grid-column-end: span 5; }
.lg-col-span-6  { grid-column-end: span 6; }
.lg-col-span-7  { grid-column-end: span 7; }
.lg-col-span-8  { grid-column-end: span 8; }
.lg-col-span-9  { grid-column-end: span 9; }
.lg-col-span-10 { grid-column-end: span 10; }
.lg-col-span-11 { grid-column-end: span 11; }
.lg-col-span-12 { grid-column-end: span 12; }

.lg-col-start-1  { grid-column-start: 1 !important; }
.lg-col-start-2  { grid-column-start: 2 !important; }
.lg-col-start-3  { grid-column-start: 3 !important; }
.lg-col-start-4  { grid-column-start: 4 !important; }
.lg-col-start-5  { grid-column-start: 5 !important; }
.lg-col-start-6  { grid-column-start: 6 !important; }
.lg-col-start-7  { grid-column-start: 7 !important; }
.lg-col-start-8  { grid-column-start: 8 !important; }
.lg-col-start-9  { grid-column-start: 9 !important; }
.lg-col-start-10 { grid-column-start: 10 !important; }
.lg-col-start-11 { grid-column-start: 11 !important; }
.lg-col-start-12 { grid-column-start: 12 !important; }

.lg-col-full {
  grid-column-start: 1 !important;
  grid-column-end: -1 !important;
}

/* --- TABLET (≤ 1024px) --- */
@media (max-width: 1024px) {
  .md-col-span-1  { grid-column-end: span 1; }
  .md-col-span-2  { grid-column-end: span 2; }
  .md-col-span-3  { grid-column-end: span 3; }
  .md-col-span-4  { grid-column-end: span 4; }
  .md-col-span-5  { grid-column-end: span 5; }
  .md-col-span-6  { grid-column-end: span 6; }
  .md-col-span-7  { grid-column-end: span 7; }
  .md-col-span-8  { grid-column-end: span 8; }
  .md-col-span-9  { grid-column-end: span 9; }
  .md-col-span-10 { grid-column-end: span 10; }
  .md-col-span-11 { grid-column-end: span 11; }

  .md-col-start-1  { grid-column-start: 1 !important; }
  .md-col-start-2  { grid-column-start: 2 !important; }
  .md-col-start-3  { grid-column-start: 3 !important; }
  .md-col-start-4  { grid-column-start: 4 !important; }
  .md-col-start-5  { grid-column-start: 5 !important; }
  .md-col-start-6  { grid-column-start: 6 !important; }
  .md-col-start-7  { grid-column-start: 7 !important; }
  .md-col-start-8  { grid-column-start: 8 !important; }
  .md-col-start-9  { grid-column-start: 9 !important; }
  .md-col-start-10 { grid-column-start: 10 !important; }
  .md-col-start-11 { grid-column-start: 11 !important; }
  .md-col-start-12 { grid-column-start: 12 !important; }

  .md-col-full {
    grid-column-start: 1 !important;
    grid-column-end: -1 !important;
  }
}

/* --- MOBILE (≤ 767px) --- */
@media (max-width: 767px) {
  .sm-col-span-1  { grid-column-end: span 1; }
  .sm-col-span-2  { grid-column-end: span 2; }
  .sm-col-span-3  { grid-column-end: span 3; }
  .sm-col-span-4  { grid-column-end: span 4; }
  .sm-col-span-5  { grid-column-end: span 5; }
  .sm-col-span-6  { grid-column-end: span 6; }
  .sm-col-span-7  { grid-column-end: span 7; }
  .sm-col-span-8  { grid-column-end: span 8; }
  .sm-col-span-9  { grid-column-end: span 9; }
  .sm-col-span-10 { grid-column-end: span 10; }
  .sm-col-span-11 { grid-column-end: span 11; }
	
  .sm-col-start-1  { grid-column-start: 1 !important; }
  .sm-col-start-2  { grid-column-start: 2 !important; }
  .sm-col-start-3  { grid-column-start: 3 !important; }
  .sm-col-start-4  { grid-column-start: 4 !important; }
  .sm-col-start-5  { grid-column-start: 5 !important; }
  .sm-col-start-6  { grid-column-start: 6 !important; }
  .sm-col-start-7  { grid-column-start: 7 !important; }
  .sm-col-start-8  { grid-column-start: 8 !important; }
  .sm-col-start-9  { grid-column-start: 9 !important; }
  .sm-col-start-10 { grid-column-start: 10 !important; }
  .sm-col-start-11 { grid-column-start: 11 !important; }
  .sm-col-start-12 { grid-column-start: 12 !important; }

  .sm-col-full {
    grid-column-start: 1 !important;
    grid-column-end: -1 !important;
  }
}

@media (max-width: 767px) {
  .sm-row-reset {
    grid-row-start: auto !important;
    grid-row-end: auto !important;
  }
}

/* --- GRID ROW START (Desktop Default) --- */
.lg-row-start-1  { grid-row-start: 1 !important; }
.lg-row-start-2  { grid-row-start: 2 !important; }
.lg-row-start-3  { grid-row-start: 3 !important; }
.lg-row-start-4  { grid-row-start: 4 !important; }
.lg-row-start-5  { grid-row-start: 5 !important; }
.lg-row-start-6  { grid-row-start: 6 !important; }

/* --- GRID ROW START (Tablet ≤ 1024px) --- */
@media (max-width: 1024px) {
  .md-row-start-1  { grid-row-start: 1 !important; }
  .md-row-start-2  { grid-row-start: 2 !important; }
  .md-row-start-3  { grid-row-start: 3 !important; }
  .md-row-start-4  { grid-row-start: 4 !important; }
  .md-row-start-5  { grid-row-start: 5 !important; }
  .md-row-start-6  { grid-row-start: 6 !important; }
}

/* --- GRID ROW START (Mobile ≤ 767px) --- */
@media (max-width: 767px) {
  .sm-row-start-1  { grid-row-start: 1 !important; }
  .sm-row-start-2  { grid-row-start: 2 !important; }
  .sm-row-start-3  { grid-row-start: 3 !important; }
  .sm-row-start-4  { grid-row-start: 4 !important; }
  .sm-row-start-5  { grid-row-start: 5 !important; }
  .sm-row-start-6  { grid-row-start: 6 !important; }

  .sm-row-reset {
    grid-row-start: auto !important;
    grid-row-end: auto !important;
  }
}

/* --- GRID ROW START (Desktop Default) --- */
.lg-row-start-1  { grid-row-start: 1 !important; }
.lg-row-start-2  { grid-row-start: 2 !important; }
.lg-row-start-3  { grid-row-start: 3 !important; }
.lg-row-start-4  { grid-row-start: 4 !important; }
.lg-row-start-5  { grid-row-start: 5 !important; }
.lg-row-start-6  { grid-row-start: 6 !important; }
/* --- GRID ROW START (Tablet ≤ 1024px) --- */
@media (max-width: 1024px) {
  .md-row-start-1  { grid-row-start: 1 !important; }
  .md-row-start-2  { grid-row-start: 2 !important; }
  .md-row-start-3  { grid-row-start: 3 !important; }
  .md-row-start-4  { grid-row-start: 4 !important; }
  .md-row-start-5  { grid-row-start: 5 !important; }
  .md-row-start-6  { grid-row-start: 6 !important; }
  .md-row-reset {
    grid-row-start: auto !important;
    grid-row-end: auto !important;
  }
}
/* --- GRID ROW START (Mobile ≤ 767px) --- */
@media (max-width: 767px) {
  .sm-row-start-1  { grid-row-start: 1 !important; }
  .sm-row-start-2  { grid-row-start: 2 !important; }
  .sm-row-start-3  { grid-row-start: 3 !important; }
  .sm-row-start-4  { grid-row-start: 4 !important; }
  .sm-row-start-5  { grid-row-start: 5 !important; }
  .sm-row-start-6  { grid-row-start: 6 !important; }
  .sm-row-reset {
    grid-row-start: auto !important;
    grid-row-end: auto !important;
  }
}

/* --- GRID ROW SPAN (Desktop Default) --- */
.lg-row-span-1 { grid-row-end: span 1 !important; }
.lg-row-span-2 { grid-row-end: span 2 !important; }
.lg-row-span-3 { grid-row-end: span 3 !important; }
.lg-row-span-4 { grid-row-end: span 4 !important; }
.lg-row-span-5 { grid-row-end: span 5 !important; }
.lg-row-span-6 { grid-row-end: span 6 !important; }

/* --- GRID ROW SPAN (Tablet ≤ 1024px) --- */
@media (max-width: 1024px) {
  .md-row-span-1 { grid-row-end: span 1 !important; }
  .md-row-span-2 { grid-row-end: span 2 !important; }
  .md-row-span-3 { grid-row-end: span 3 !important; }
  .md-row-span-4 { grid-row-end: span 4 !important; }
  .md-row-span-5 { grid-row-end: span 5 !important; }
  .md-row-span-6 { grid-row-end: span 6 !important; }
}

/* --- GRID ROW SPAN (Mobile ≤ 767px) --- */
@media (max-width: 767px) {
  .sm-row-span-1 { grid-row-end: span 1 !important; }
  .sm-row-span-2 { grid-row-end: span 2 !important; }
  .sm-row-span-3 { grid-row-end: span 3 !important; }
  .sm-row-span-4 { grid-row-end: span 4 !important; }
  .sm-row-span-5 { grid-row-end: span 5 !important; }
  .sm-row-span-6 { grid-row-end: span 6 !important; }
}


/* ============================================
   Typography Defaults
   Harmonischer Zeilenumbruch für Überschriften
   ============================================ */
h1, h2, h3, h4,
.font-h1, .font-h2, .font-h3, .font-h4 {
  text-wrap: balance;
}

/* ============================================
   10. WIDGET ANPASSUNGEN
   ============================================ */

/*  Nav-Menu: Hover-Linie an Textbreite anpassen + Linksbündig */
.footer-nav .elementor-nav-menu--main a.elementor-item {
	position: relative;
	white-space: nowrap;
	display: inline-flex;
	width: fit-content;
}
.footer-nav .elementor-nav-menu--main .elementor-nav-menu > li {
	text-align: left;
} 

/* ============================================
   11. Header
   ============================================ */

/* Vollflächige Blur-Ebene hinter Header/Popup, unabhängig von Elementors
   eigenem Popup-z-index. Sichtbarkeit wird über .popup-open auf <body>
   gesteuert (gesetzt via custom.js MutationObserver, s.o.) statt über
   CSS :has(), da älteres Edge/iOS-WebKit :has() nicht unterstützt. */
.blur-layer {
  position: fixed;
  inset: 0;
  background-color: #ffffff;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  -webkit-transform: translateZ(0);
  will-change: opacity;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

body.popup-open .blur-layer {
  opacity: 1;
  visibility: visible;
}

/* ============================================
   12. Footer
   ============================================ */

/* Footer-Logo Mobile: Wortmarke ausblenden, Fläche kollabiert auf Symbolbreite */
@media (max-width: 767px) {
  .footer-logo {
    --footer-logo-h: 40px;
    height: var(--footer-logo-h);
    width: calc(var(--footer-logo-h) * 104.8 / 105) !important;
    overflow: hidden;
    transition: width 250ms ease;
  }
  .footer-logo svg {
    width: auto;
    height: 100%;
    display: block;
  }
  .footer-logo .logo-wordmark {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Footer-Nav: vertikale Linie vor jedem Menüeintrag */
.footer-nav .elementor-nav-menu--main li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  background: var(--e-global-color-text);
}
 
/* ============================================================
   KOMPONENTE: HERO HEADLINE
   Zweiteiliger Typografie-Effekt: Ghost-Text (groß, transparent)
   und Solid-Text (kleiner, weiß) überlagern sich im Grid.
   Trennlinie via ::before das sich über die Ghost-Breite erstreckt.
   Klasse .hero-headline auf den Container-Paragraph setzen.
============================================================ */
 
/* Großer transparenter Hintergrundtext */
.headline-ghost {
  grid-area: 1 / 1 / auto / span 11;
  text-transform: uppercase;
  font-size: var(--display-xl);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.40);
  transform: translateX(-0.04em);
  line-height: 1em !important;
  align-self: start;
  text-edge: cap alphabetic;
  leading-trim: both;
  hyphens: auto;
  overflow-wrap: break-word;
}

@media (max-width: 767px) {
  .headline-ghost {
    grid-area: 1 / 1 / auto / -1;
  }
}

.headline-ghost2 {
  grid-area: 1 / 1 / auto / span 11;
  font-size: var(--display-xxl);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.40);
  transform: translateX(-0.04em);
  line-height: 1em !important;
  align-self: start;
  text-edge: cap alphabetic;
  leading-trim: both;
  hyphens: auto;
}

@media (max-width: 767px) {
  .headline-ghost2 {
    grid-area: 1 / 1 / auto / -1;
  }
}

/* Kleinerer weißer Vordergrundtext, absolut an Ghost-Unterkante */

.headline-solid-wrapper {
  display: block;
  position: absolute;
  bottom: calc((var(--display-xl) + var(--display-m)) * 1.1);
  height: 0;
  grid-area: 1 / 6 / auto / span 6;
  z-index: 2; 
  width: 100%;
}

@media (max-width: 2024px) {
  .headline-solid-wrapper {
    bottom: calc((var(--display-xl) + var(--display-m)) * 1.12);
  }
}

@media (max-width: 767px) {
  .headline-solid-wrapper {
	grid-area: 1 / 2 / auto / -1;
    bottom: calc((var(--display-xl) + var(--display-m)) * 0.31);
  }
}

.hero-headline p {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 767px) {
  .hero-headline p {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.headline-solid {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--gap-fluid));
  font-size: var(--display-m) !important;
  color: var(--color-violet-grey-200);
  font-weight: 400;
  line-height:1.2em;
	span {
	font-weight: 600;
	color: var(--color-white);
	}	
}

/* Unterstrichlinie auf der ersten Zeile des Solid-Texts */
.headline-solid.first-line::first-line,
.headline-solid.first-line::before {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-white);
}

/* Unsichtbarer Leertext der die Linie nach links verlängert */
.headline-solid.first-line::before {
  content: "\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0";
  text-align: right;
  position: absolute;
  right: 100%;
  speak: none;
  user-select: none;
  white-space: nowrap;
}

/* Letzte Zeile: Leerraum weg, border-bottom sitzt auf Baseline */
.headline-solid.last-line {
  text-box-trim: trim-end;
  text-box-edge: text alphabetic;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* ::before verlängert nach links */
.headline-solid.last-line::before {
  content: "";
  position: absolute;
  bottom: -1px;
  right: 100%;
  width: 500%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

/* ============================================================
   KOMPONENTE: ANIMATED CTA BUTTON
   Klasse e-btn-animated auf .e-button-base

   Aufbau:
   - Border, Radius, Schrift, Farbe, Padding → Elementor Widget
   - ::after  → rote Fill-Fläche, fährt von links rein (z-index: -1)
   - ::before → Kreis mit Pfeil-SVG, fix links (z-index: 1)
   ============================================================ */

.e-button-base.e-btn-animated {
  position: relative;
  display: inline-flex !important;
  align-self: flex-start;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  transition: color 0.55s ease, border-color 0.35s ease, background-color 0.35s ease !important;
  white-space: nowrap;
}

.e-button-base.e-btn-animated:hover {
  background-color: transparent !important;
  border-color: var(--color-violet-grey-300);
}

.e-button-base.e-btn-animated::after {
  content: '';
  position: absolute;
  left: 1rem;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--consileon-red-400, #CD102E);
  z-index: -1;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0 var(--border-radius-m) var(--border-radius-m) 0;
}

.e-button-base.e-btn-animated:hover::after,
.e-button-base.e-btn-animated:focus-visible::after {
  transform: translateX(0);
}

.e-button-base.e-btn-animated::before {
  content: '';
  position: absolute;
  left: -0.5px;
  top: -0.5px;
  height: calc(100% + 1px);
  aspect-ratio: 1;
  border-radius: var(--border-radius-m);
  background-color: var(--color-violet-grey-300);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 13.981 16'%3E%3Cpath d='M16.378,25.4l-.574-.711,5.927-6.81H9.4v-.957H21.732L15.8,10.111l.574-.711,7,7.986Z' transform='translate(-9.4 -9.4)' fill='%231D1E40'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
  transition: background-color 0.35s ease;
}

.e-button-base.e-btn-animated:hover::before,
.e-button-base.e-btn-animated:focus-visible::before {
  background-color: var(--color-violet-grey-100);
}

.e-button-base.e-btn-animated:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .e-button-base.e-btn-animated::after,
  .e-button-base.e-btn-animated::before { transition: none; }
}


/* ============================================================
   KOMPONENTE: ICON-BUTTONS (MAIL/PHONE)
   ============================================================ */

/* ── Shared Button Base ─────────────────────────────────────── */

.icon-btn {
  width: 4rem;
  height: 4rem;
  min-width: 4rem;
  min-height: 4rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: none;
  padding: 0;
  text-decoration: none;
  transition: background 0.3s ease;
  position: relative;
}

.icon-btn[role="button"] {
  cursor: pointer;
}

.icon-btn:hover,
.icon-btn:focus-visible {
  background: var(--color-icon-btn-hover, #CED1DB);
  outline: none;
}

.icon-btn:focus-visible {
  box-shadow: 0 0 0 3px var(--color-accent);
}

.icon-btn svg {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

/* ── Mail: SVG-Rotation beim Hover ──────────────────────────── */

.icon-btn--mail svg {
  transition: transform 0.4s ease;
  transform: rotate(0deg);
}
.icon-btn--mail:hover svg,
.icon-btn--mail:focus-visible svg {
  transform: rotate(10deg);
}

/* ── Mail: Clip-Gruppen (runde Ecken idle, weg beim Öffnen) ─── */

.icon-btn--mail .tri-clipped   { opacity: 1; }
.icon-btn--mail .tri-unclipped { opacity: 0; }

.icon-btn--mail:hover .tri-clipped,
.icon-btn--mail:focus-visible .tri-clipped {
  animation: mail-clipped 2s ease-in-out infinite;
}
.icon-btn--mail:hover .tri-unclipped,
.icon-btn--mail:focus-visible .tri-unclipped {
  animation: mail-unclipped 2s ease-in-out infinite;
}

@keyframes mail-clipped {
  0%,13%   { opacity: 1; }
  15%      { opacity: 0; }
  85%      { opacity: 0; }
  87%,100% { opacity: 1; }
}
@keyframes mail-unclipped {
  0%,13%   { opacity: 0; }
  15%      { opacity: 1; }
  85%      { opacity: 1; }
  87%,100% { opacity: 0; }
}

/* ── Mail: Rect-Wechsel (rund ↔ oben eckig) ─────────────────── */

.icon-btn--mail .rect-rounded { opacity: 1; }
.icon-btn--mail .rect-sharp   { opacity: 0; }

.icon-btn--mail:hover .rect-rounded,
.icon-btn--mail:focus-visible .rect-rounded {
  animation: mail-clipped 2s ease-in-out infinite;
}
.icon-btn--mail:hover .rect-sharp,
.icon-btn--mail:focus-visible .rect-sharp {
  animation: mail-unclipped 2s ease-in-out infinite;
}

/* ── Mail: Klappe klappt nach oben ──────────────────────────── */

.icon-btn--mail .flap-group {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}
.icon-btn--mail:hover .flap-group,
.icon-btn--mail:focus-visible .flap-group {
  animation: mail-flip 2s ease-in-out infinite;
}
@keyframes mail-flip {
  0%,100% { transform: scaleY(1);  }
  28%,72% { transform: scaleY(-1); }
}

/* ── Mail: Fills (transparent zu → weiß offen) ──────────────── */

.icon-btn--mail:hover .flap-fill,
.icon-btn--mail:hover .static-fill,
.icon-btn--mail:focus-visible .flap-fill,
.icon-btn--mail:focus-visible .static-fill {
  animation: mail-fill 2s ease-in-out infinite;
}
@keyframes mail-fill {
  0%,13%   { fill: transparent; }
  15%      { fill: white;       }
  85%      { fill: white;       }
  87%,100% { fill: transparent; }
}

/* ── Mail: Baseline (obere Kante blendet aus beim Öffnen) ───── */

.icon-btn--mail .flap-baseline,
.icon-btn--mail .static-baseline { opacity: 1; }

.icon-btn--mail:hover .flap-baseline,
.icon-btn--mail:hover .static-baseline,
.icon-btn--mail:focus-visible .flap-baseline,
.icon-btn--mail:focus-visible .static-baseline {
  animation: mail-hide-line 2s ease-in-out infinite;
}
@keyframes mail-hide-line {
  0%,8%    { opacity: 1; }
  10%      { opacity: 0; }
  90%      { opacity: 0; }
  92%,100% { opacity: 1; }
}

/* ── Phone: Vibration ────────────────────────────────────────── */

.icon-btn--phone .phone-group {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.icon-btn--phone:not(:hover):not(:focus-visible) .phone-group {
  animation: none;
  transform: none;
}
.icon-btn--phone:hover .phone-group,
.icon-btn--phone:focus-visible .phone-group {
  animation: phone-vibrate 0.7s ease-in-out infinite;
}
@keyframes phone-vibrate {
  0%   { transform: rotate(0deg);  }
  15%  { transform: rotate(-4deg); }
  30%  { transform: rotate(4deg);  }
  45%  { transform: rotate(-3deg); }
  60%  { transform: rotate(3deg);  }
  75%  { transform: rotate(-2deg); }
  90%  { transform: rotate(2deg);  }
  100% { transform: rotate(0deg);  }
}

/* ── Phone: SVG-Rotation beim Hover ─────────────────────────── */

.icon-btn--phone svg {
  transition: transform 0.4s ease;
  transform: rotate(0deg);
}
.icon-btn--phone:hover svg,
.icon-btn--phone:focus-visible svg,
.icon-btn--phone:active svg {
  transform: rotate(10deg);
}

/* ── Phone: Display (opacity 0.5 idle → 1 bei hover) ────────── */

.icon-btn--phone .phone-display {
  fill: transparent;
  stroke-opacity: 0.5;
  transition: fill 0.3s ease;
}
.icon-btn--phone:hover .phone-display,
.icon-btn--phone:focus-visible .phone-display {
  fill: white;
  animation: phone-screen-on 0.6s ease-out forwards;
}
@keyframes phone-screen-on {
  0%   { opacity: 0.5; }
  100% { opacity: 1;   }
}

/* ── Phone: Signalwellen ─────────────────────────────────────── */

.icon-btn--phone .wave {
  fill: none;
  stroke: #1d1e40;
  stroke-width: 0.6;
  stroke-linecap: round;
  opacity: 0;
}
.icon-btn--phone:not(:hover):not(:focus-visible) .wave {
  animation: none;
  opacity: 0;
}
.icon-btn--phone:hover .wave-r1,
.icon-btn--phone:focus-visible .wave-r1 {
  animation: phone-wave 1.4s ease-out 0.0s infinite;
}
.icon-btn--phone:hover .wave-r2,
.icon-btn--phone:focus-visible .wave-r2 {
  animation: phone-wave 1.4s ease-out 0.4s infinite;
}
.icon-btn--phone:hover .wave-l1,
.icon-btn--phone:focus-visible .wave-l1 {
  animation: phone-wave 1.4s ease-out 0.0s infinite;
}
.icon-btn--phone:hover .wave-l2,
.icon-btn--phone:focus-visible .wave-l2 {
  animation: phone-wave 1.4s ease-out 0.4s infinite;
}
@keyframes phone-wave {
  0%   { opacity: 0;   }
  20%  { opacity: 1;   }
  70%  { opacity: 0.4; }
  100% { opacity: 0;   }
}

/* ── Mobile: Touch-Trigger via :active ──────────────────────── */

.icon-btn--mail:active svg {
  transform: rotate(10deg);
}
.icon-btn--mail:active .tri-clipped {
  animation: mail-clipped 2s ease-in-out infinite;
}
.icon-btn--mail:active .tri-unclipped {
  animation: mail-unclipped 2s ease-in-out infinite;
}
.icon-btn--mail:active .rect-rounded {
  animation: mail-clipped 2s ease-in-out infinite;
}
.icon-btn--mail:active .rect-sharp {
  animation: mail-unclipped 2s ease-in-out infinite;
}
.icon-btn--mail:active .flap-group {
  animation: mail-flip 2s ease-in-out infinite;
}
.icon-btn--mail:active .flap-fill,
.icon-btn--mail:active .static-fill {
  animation: mail-fill 2s ease-in-out infinite;
}
.icon-btn--mail:active .flap-baseline,
.icon-btn--mail:active .static-baseline {
  animation: mail-hide-line 2s ease-in-out infinite;
}

.icon-btn--phone:active .phone-group {
  animation: phone-vibrate 0.7s ease-in-out infinite;
}
.icon-btn--phone:active .phone-display {
  fill: white;
  animation: phone-screen-on 0.6s ease-out forwards;
}
.icon-btn--phone:active .wave-r1 { animation: phone-wave 1.4s ease-out 0.0s infinite; }
.icon-btn--phone:active .wave-r2 { animation: phone-wave 1.4s ease-out 0.4s infinite; }
.icon-btn--phone:active .wave-l1 { animation: phone-wave 1.4s ease-out 0.0s infinite; }
.icon-btn--phone:active .wave-l2 { animation: phone-wave 1.4s ease-out 0.4s infinite; }


/* ── Location Pin: Bounce-Animation ─────────────────────────── */

.icon-btn--location .pin-svg {
  transform-origin: 50% 100%;
}
.icon-btn--location:hover .pin-svg,
.icon-btn--location:focus-visible .pin-svg,
.icon-btn--location:active .pin-svg {
  animation: pin-drop 1.2s ease-in-out infinite;
}
@keyframes pin-drop {
  0%   { transform: translateY(0);    }
  20%  { transform: translateY(-6px); }
  50%  { transform: translateY(2px);  }
  65%  { transform: translateY(-3px); }
  80%  { transform: translateY(1px);  }
  90%  { transform: translateY(-1px); }
  100% { transform: translateY(0);    }
}

/* ── Location Pin: Schatten pulsiert gegensätzlich zum Bounce ── */

.icon-btn--location .pin-shadow {
  transform-origin: 50% 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.icon-btn--location:hover .pin-shadow,
.icon-btn--location:focus-visible .pin-shadow,
.icon-btn--location:active .pin-shadow {
  opacity: 1;
  animation: shadow-pulse 1.2s ease-in-out infinite;
}
@keyframes shadow-pulse {
  0%   { transform: scaleX(1);   opacity: 0.25; }
  20%  { transform: scaleX(0.5); opacity: 0.1;  }
  50%  { transform: scaleX(1.2); opacity: 0.35; }
  65%  { transform: scaleX(0.7); opacity: 0.15; }
  80%  { transform: scaleX(1.1); opacity: 0.3;  }
  100% { transform: scaleX(1);   opacity: 0.25; }
}

/* ============================================================
   KOMPONENTE: TERMIN-BUTTON
   HTML: <a href="..." role="button" class="appt-btn" aria-label="Termin vereinbaren">
           <span class="appt-btn__text-default" aria-hidden="true">Termin?</span>
         </a>

   Aufbau:
   - Border, Radius, Farbe, Breite (Padding+Xch-Formel) → am Link selbst
   - ::after  → rote Icon-Fläche, Kreis in Ruhe, deckt bei Hover den ganzen Button
   - ::before → Hover-Text "vereinbaren!", fährt nach der Icon-Zone ein
   - Mobile   → Text und ::before entfallen, ::after wird zur statischen Kreisfläche
   ============================================================ */

.appt-btn {
  --icon-size: calc(16px + var(--copy-s)*1.5);
  --text-allowance: 11ch;

  position: relative;
  display: inline-flex !important;
  align-items: center;
  width: calc(var(--pad-left) + var(--pad-right) + var(--text-allowance));
  box-sizing: border-box;
  padding: 8px 48px 8px 16px;
  border: 4px solid var(--color-violet-grey-100);
  border-radius: var(--border-radius-m);
  background-color: var(--color-grey-blue-300);
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.35s ease, border-radius 0.35s ease;
  font-family: var(--heading-font);
  font-size: var(--copy-s) ;
  font-weight:500;
}

.appt-btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.appt-btn::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.388 16'%3E%3Cpath d='M13.627,12.1a.778.778,0,1,0-1.1,1.1.778.778,0,1,0,1.1-1.1ZM7.179,18.545V10.093H18.973V14.3a.039.039,0,0,1,.039.039,4.29,4.29,0,0,1,1.14.9V6.359a1.209,1.209,0,0,0-1.179-1.179H17.715V4H16.457V5.179H9.774V4H8.516V5.179H7.179A1.209,1.209,0,0,0,6,6.359V18.545a1.209,1.209,0,0,0,1.179,1.179h7.666a2.959,2.959,0,0,1-.668-1.179Zm0-12.187H18.973V8.914H7.179Zm8.491,5.74a.76.76,0,1,0,.55-.236A.714.714,0,0,0,15.671,12.1Zm3.853,3.342-2.791,2.791L15.2,16.7l-.9.9,2.4,2.4h0l3.7-3.7Zm-9.592-.432a.806.806,0,1,0,.55.236A.714.714,0,0,0,9.931,15.007Zm.55-2.909a.778.778,0,1,0-1.1,1.1.778.778,0,1,0,1.1-1.1Zm2.595,2.909a.806.806,0,1,0,.55.236A.714.714,0,0,0,13.076,15.007Z' transform='translate(-6 -4)' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 16px 18px;
  padding: 8px 16px 8px 48px;
  border-radius: 20px 0 0 20px;
  transform: translateX(calc(100% - var(--icon-size)));
  transition: transform 0.35s ease;
  z-index: 5;
}

.appt-btn:hover::after,
.appt-btn:focus-visible::after {
  transform: translateX(0);
}

.appt-btn::before {
  content: 'vereinbaren!';
  position: absolute;
  left: var(--icon-size);
  width: var(--text-allowance);
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-white);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.appt-btn:hover::before,
.appt-btn:focus-visible::before {
  opacity: 1;
}

.appt-btn__text-default {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: var(--text-allowance);
  text-align: center;
  color: var(--color-text-primary);
  transition: opacity 0.2s ease;
}

.appt-btn:hover .appt-btn__text-default,
.appt-btn:focus-visible .appt-btn__text-default {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .appt-btn,
  .appt-btn::after,
  .appt-btn::before,
  .appt-btn__text-default {
    transition: none;
  }
}

@media (max-width: 1024px) {
  .appt-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--border-radius-m);
  }

  .appt-btn__text-default {
    display: none;
  }

  .appt-btn::before {
    content: none;
  }

  .appt-btn::after {
    inset: 0;
    top: 0;
    height: 100%;
    border-radius: var(--border-radius-m);
    background-position: center;
    background-size: 16px 18px;
    transform: none;
	padding: 8px 16px 8px 16px
  }
}


/* ============================================================
   14. KOMPONENTE: SCROLL-TO-TOP BUTTON
   HTML: <button class="scroll-to-top" aria-label="Nach oben scrollen">
           <svg .../>
         </button>
   ============================================================ */

.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 4rem;
  height: 4rem;
  border-radius: var(--border-radius-m);
  border: none;
  background-color: var(--color-violet-grey-100);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: background-color 0.35s ease, opacity 0.3s ease, visibility 0.3s ease;
  will-change: transform;
  z-index: 999;
}

.scroll-to-top--visible {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover,
.scroll-to-top:focus-visible {
  background-color: var(--color-accent);
}

.scroll-to-top svg path {
  fill: var(--color-violet-grey-600);
  transition: fill 0.35s ease;
}

.scroll-to-top:hover svg path,
.scroll-to-top:focus-visible svg path {
  fill: #ffffff;
}

.scroll-to-top:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-to-top {
    transition: background-color 0.35s ease, opacity 0.3s ease, visibility 0.3s ease;
    will-change: auto;
  }
}

.elementor-nav-menu--main a.elementor-item {
  position: relative;
  white-space: nowrap;
}
.elementor-nav-menu--main a.elementor-item::after {
  content: "";
  position: absolute;
  left: 8px;      
  right: 8px; 
  top: 50%;
  height: 1px;
  background: var(--color-accent);
  opacity: 0;
  transform: translateY(-50%);
  transition: transform 200ms ease, opacity 200ms ease, background 200ms ease, color 100ms ease;
}
.elementor-nav-menu--main a.elementor-item:hover::after,
.elementor-nav-menu--main a.elementor-item:focus::after {
  opacity: 1;
  transform: translateY(14px);
}

.logo-header {
  --logo-height: calc(16px + var(--copy-m));
  --logo-width: calc(var(--logo-height) * 601 / 105);
  --logo-signet-width: calc(var(--logo-height) * 104.8 / 105);

  position: relative !important;
  display: block !important;
  overflow: hidden;
  width: var(--logo-width) !important;
  height: var(--logo-height) !important;
  box-sizing: border-box;
  outline: 4px solid transparent;
  outline-offset: -4px;
  border-radius: calc(var(--logo-height) / 2);
  transition: width 0.4s ease, outline-color 0.4s ease;
}

.logo-header svg {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: var(--logo-width);
}

.logo-header svg path:first-child {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.4s ease;
}

header:has(.elementor-menu-toggle.elementor-active) .logo-header {
  width: var(--logo-signet-width);
  outline-color: var(--color-violet-grey-100);
}

header:has(.elementor-menu-toggle.elementor-active) .logo-header svg path:first-child {
  clip-path: inset(0 100% 0 0);
}

/* ============================================
   Themen Slider — Swiper Pagination
   ============================================ */

.swiper-wrapper, .coach-slider-wrapper .elementor-widget-n-carousel {
  --e-n-carousel-swiper-slides-gap: var(--gap-fluid)!important;
}

/* Themen Slider — Carousel volle Breite */
.partner-slider-wrapper .e-n-carousel {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.elementor-element.elementor-arrows-position-outside .swiper, .elementor-lightbox.elementor-arrows-position-outside .swiper {
    width: calc(100%) !important;
}

/* Carousel-Widget als Anker deaktivieren
   damit themen-slider-wrapper der Anker wird */
.partner-slider-wrapper .elementor-pagination-type-fraction {
  position: static !important;
}

.partner-slider-wrapper .swiper-pagination-fraction {
  position: absolute !important;
  top: calc(-1lh - var(--gap-m)) !important;
  bottom: auto !important;
  right: 0 !important;
  left: auto !important;
  width: auto !important;
}

.themen-slider-wrapper .swiper-pagination-fraction .swiper-pagination-current,
.partner-slider-wrapper .swiper-pagination-fraction .swiper-pagination-current {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* overflow: visible damit Pfeil nicht abgeschnitten wird */
.themen-slider-wrapper .elementor-swiper-button svg,
.partner-slider-wrapper .elementor-swiper-button svg {
  overflow: visible;
}

.themen-slider-wrapper .elementor-swiper-button svg path,
.partner-slider-wrapper .elementor-swiper-button svg path {
  transition: transform 0.2s ease;
}

/* Bestehender Attribut-Transform translate(-3.924 -5.374) wird durch CSS überschrieben
   daher müssen wir ihn in den CSS-Transform einrechnen */
.themen-slider-wrapper .elementor-swiper-button-prev:hover svg path,
.partner-slider-wrapper .elementor-swiper-button-prev:hover svg path,
.themen-slider-wrapper .elementor-swiper-button-next:hover svg path,
.partner-slider-wrapper .elementor-swiper-button-next:hover svg path {
  transform: translate(calc(-3.924px + 12px), -5.374px);
}

/* Basis beide Buttons */
.themen-slider-wrapper .elementor-swiper-button,
.partner-slider-wrapper .elementor-swiper-button {
  background: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Prev — außen links, border-radius nur rechts */
.themen-slider-wrapper .elementor-swiper-button-prev,
.partner-slider-wrapper .elementor-swiper-button-prev {
  border-radius: 0 39px 39px 0 !important;
}

/* Next — außen rechts, border-radius nur links */
.themen-slider-wrapper .elementor-swiper-button-next,
.partner-slider-wrapper .elementor-swiper-button-next {
  border-radius: 39px 0 0 39px !important;
}

.card-text {
  text-decoration: none;
  text-decoration-thickness: 1px !important;
  text-decoration-color: currentColor !important;
  text-underline-position: under;
  overflow-wrap: break-word;
  hyphens: auto; /* nutzt Bindestrich-Trennung, wenn lang-Attribut gesetzt ist */
}

.card-animated:hover .card-text {
  text-decoration:underline;
}

/* ==========================================
   Themen-Card Reveal: Diagonale auf 55° angepasst
   (Designer misst 35° von der y-Achse, also 90−35
   von der x-Achse). Diagonalpunkte liegen rechnerisch
   außerhalb der Karte (113% / −29%), was bei clip-path
   zulässig ist — die Linie schneidet die Karte dadurch
   steiler.
   ========================================== */

.card-reveal-wrap {
  position: absolute !important;
  inset: 0 !important;
  background-image: var(--card-photo);
  background-size: cover;
  z-index: 2 !important;
  pointer-events: none;

  /* Ruhezustand: beide Flächen kollabiert (unsichtbar) */
  clip-path: polygon(
    0 0,        /* A oben links */
    0 0,        /* A oben rechts (kollabiert) */
    0 113%,     /* A unten rechts (kollabiert, Diagonalpunkt links) */
    0 113%,     /* A unten links */
    0 0,        /* A schließen */
    100% -29%,  /* Brücke zu B (Diagonalpunkt rechts) */
    100% -29%,  /* B oben rechts */
    100% 100%,  /* B unten rechts */
    100% 100%,  /* B unten links (kollabiert) */
    100% -29%   /* B schließen */
  );
  transition: clip-path 0.4s ease-in !important;
}

.card-animated:hover .card-reveal-wrap {
  /* Hover: volle Breite, Diagonale 55° steigend */
  clip-path: polygon(
    0 0,        /* A oben links */
    100% 0,     /* A oben rechts */
    100% -29%,  /* A unten rechts (Diagonalpunkt) */
    0 113%,     /* A unten links (Diagonalpunkt) */
    0 0,        /* A schließen */
    0 113%,     /* B oben links */
    100% -29%,  /* B oben rechts */
    100% 100%,  /* B unten rechts */
    0 100%,     /* B unten links */
    0 113%      /* B schließen */
  );
  transition: clip-path 0.6s ease-out !important;
}

/* ==========================================
   Themen-Slider: FOUC beim Laden verhindern.
   Vor der Swiper-Initialisierung werden die Slides
   bereits im annähernd finalen Layout nebeneinander
   gelegt (3 sichtbar auf Desktop/Tablet, 2 auf Mobile),
   statt als riesige Einzelkachel zu erscheinen.
   ========================================== */

.themen-slider-wrapper .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  overflow: hidden;
}

.themen-slider-wrapper .swiper:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0;
  width: 33.33%; /* 3 sichtbare Slides auf Desktop und Tablet */
}

/* Mobile: 2 sichtbare Slides */
@media (max-width: 767px) {
  .themen-slider-wrapper .swiper:not(.swiper-initialized) .swiper-slide {
    width: 50%;
  }
}

/* ==========================================
   Themen-Slider: Zähler (Pagination-Fraction) rechts
   oberhalb des Sliders, Unterkante auf Grundlinie
   der Überschrift (aus Live-Maßen: 56px über
   Widget-Oberkante)
   ========================================== */

.themen-slider-wrapper .swiper-pagination-fraction {
  top: -33px !important;
  bottom: auto !important;
  left: auto !important;
  right: -44px !important;
  width: auto !important;
}

/* ==========================================
   Themen-Card Reveal: finale Werte, um 35° um den
   Kartenmittelpunkt (50%,50%) rotiert. Fixe Punkte
   (3. und 4. in jeder Fläche) bleiben zwischen Ruhe-
   zustand und Hover unverändert.
   ========================================== */

.card-reveal-1,
.card-reveal-2 {
  position: absolute !important;
  inset: 0 !important;
  background-image: var(--card-photo);
  background-size: cover;
  z-index: 2 !important;
  pointer-events: none;
}

/* Fläche A (rot) */
.card-reveal-2 {
  clip-path: polygon(-72.07% 49.98%, 1.66% 101.6%, -4.08% 109.8%, -77.8% 58.17%);
  transition: clip-path 0.3s ease-in !important;
}
.card-animated:hover .card-reveal-2 {
  clip-path: polygon(71.33% -154.81%, 145.05% -103.18%, -4.08% 109.8%, -77.8% 58.17%);
}

/* Fläche B (blau) */
.card-reveal-1 {
  clip-path: polygon(81.96% -13.08%, 155.68% 38.55%, 161.42% 30.35%, 87.69% -21.27%);
  transition: clip-path 0.3s ease-in !important;
}
.card-animated:hover .card-reveal-1 {
  clip-path: polygon(-61.44% 191.71%, 12.29% 243.33%, 161.42% 30.35%, 87.69% -21.27%);
}

.card-animated:hover .card-reveal-1,
.card-animated:hover .card-reveal-2 {
  transition: clip-path 1.1s ease-in !important;
}

/* Chevron Hover — nur der Pfeil bewegt sich, Button-Fläche bleibt */
.themen-slider-wrapper .elementor-swiper-button svg path,
.partner-slider-wrapper .elementor-swiper-button svg path {
  transition: transform 0.2s ease;
}

.themen-slider-wrapper .elementor-swiper-button-prev:hover svg path,
.partner-slider-wrapper .elementor-swiper-button-prev:hover svg path {
  transform: translateX(-8px);
}

.themen-slider-wrapper .elementor-swiper-button-next:hover svg path,
.partner-slider-wrapper .elementor-swiper-button-next:hover svg path {
  transform: translateX(8px);
}

/* Themen-Card/ Partner-Card: jede 2. Karte oder 1. Karte bekommt oberen Abstandbeim Text. */
.themen-slider-wrapper .swiper-slide:nth-child(2n) .card-text {
  margin-top: 1.5em;
}

.partner-slider-wrapper .swiper-slide:nth-child(2n-1) .card-text {
  margin-top: 1.5em;
}