/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child für Rechtsanwalt Thomas Will — enthält das komplette Design-System (Farben, Fonts, Komponenten, Animationen). Anpassungen bitte im Abschnitt "EIGENE ANPASSUNGEN" ganz unten vornehmen.
Author: Thomas Will / Novamira
Template: hello-elementor
Version: 3.0.0
Text Domain: hello-elementor-child
*/

/* =====================================================================
   RECHTSANWALT THOMAS WILL — DESIGN SYSTEM
   Aufbau:
   1. Schriften (@font-face, lokal — DSGVO-konform)
   2. Design-Tokens (CSS-Variablen) — HIER zentrale Werte ändern
   3. Basis-Typografie (greift nur mit body.tw-brand)
   4. Komponenten (.tw-*) — Buttons, Karten, Notruf, Labels, Listen
   5. Animationen & Scroll-Reveals
   6. Header & Footer
   7. EIGENE ANPASSUNGEN (unten anfügen)
   ===================================================================== */

/* ---------- 1. SCHRIFTEN ---------- */
@font-face { font-family: 'Exo'; src: url('assets/fonts/Exo-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo'; src: url('assets/fonts/Exo-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Exo'; src: url('assets/fonts/Exo-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Frutiger LT Std'; src: url('assets/fonts/FrutigerLTStd-Roman.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- 2. DESIGN-TOKENS ---------- */
:root {
  /* Markengrün — Abstufungen von #95c11f */
  --green-50:#f7fae9; --green-100:#ecf5cb; --green-200:#dcec9d; --green-300:#c6e067;
  --green-400:#adcf38; --green-500:#95c11f; --green-600:#78a017; --green-700:#5c7d14;
  --green-800:#4b6327; --green-900:#37481a; --green-950:#1f290f;

  /* Dunkle Kontraste — grünstichiges Anthrazit */
  --ink-950:#101208; --ink-900:#181b10; --ink-800:#22261a; --ink-700:#2f3425;
  --ink-600:#454b38; --ink-500:#5f6650;

  /* Helle Kontraste */
  --paper-0:#ffffff; --paper-50:#fbfcf7; --paper-100:#f4f6ec; --paper-200:#e9ecdd; --paper-300:#d6dac6;

  /* Semantik */
  --brand:var(--green-500); --brand-strong:var(--green-600); --brand-deep:var(--green-800);
  --accent-emergency:#e8443a; --info:#3a7ca5; --success:var(--green-600); --warning:#d9a514;

  /* Oberflächen & Text */
  --surface-page:var(--paper-50); --surface-card:var(--paper-0); --surface-tint:var(--green-50);
  --surface-dark:var(--ink-900); --surface-dark-raised:var(--ink-800);
  --text-heading:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --text-on-brand:var(--ink-950); --text-on-dark:var(--paper-100); --text-muted-on-dark:#9aa287;
  --border-subtle:var(--paper-200); --border-strong:var(--paper-300); --border-on-dark:#333a28;
  --link:var(--green-700); --link-hover:var(--green-800); --focus-ring:var(--green-500);

  /* Typografie */
  --font-display:'Exo', system-ui, sans-serif;
  --font-body:'Frutiger LT Std', 'Segoe UI', system-ui, sans-serif;
  --weight-medium:500; --weight-extrabold:800; --weight-black:900;
  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px; --text-xl:22px;
  --text-2xl:28px; --text-3xl:36px; --text-4xl:48px; --text-5xl:64px;
  --leading-tight:1.08; --leading-snug:1.25; --leading-body:1.6;
  --tracking-display:-0.01em; --tracking-wide:0.14em;

  /* Abstände & Radien */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --container:1200px; --container-narrow:760px;
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;

  /* Schatten & Bewegung */
  --shadow-sm:0 1px 2px rgba(16,18,8,.06);
  --shadow-md:0 4px 16px rgba(16,18,8,.08);
  --shadow-lg:0 16px 40px rgba(16,18,8,.14);
  --shadow-brand:0 8px 24px rgba(149,193,31,.35);
  --focus-shadow:0 0 0 3px rgba(149,193,31,.4);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms; --dur-med:300ms; --dur-slow:600ms;
}

/* ---------- 3. BASIS-TYPOGRAFIE (nur aktiv, wenn body die Klasse tw-brand trägt) ---------- */
body.tw-brand {
  font-family: var(--font-body);
  color: var(--text-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
body.tw-brand h1, body.tw-brand h2, body.tw-brand h3, body.tw-brand h4 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-extrabold);
}
body.tw-brand a { color: var(--link); text-decoration: none; }
body.tw-brand a:hover { color: var(--link-hover); }
body.tw-brand ::selection { background: var(--green-200); color: var(--ink-950); }
body.tw-brand :focus-visible { outline: none; box-shadow: var(--focus-shadow); border-radius: var(--radius-sm); }

/* ---------- 4. KOMPONENTEN ---------- */

/* Eyebrow / Sektionslabel — kleine gesperrte Überzeile */
.tw-label {
  font-family: var(--font-display) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-medium) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  color: var(--brand-strong) !important;
}
.tw-on-dark .tw-label, .tw-label--on-dark { color: var(--green-400) !important; }

/* Primär-Button (auf Elementor-Button-Widget als CSS-Klasse tw-btn) */
.tw-btn .elementor-button, a.tw-btn, button.tw-btn {
  background-color: var(--brand);
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.tw-btn .elementor-button:hover, a.tw-btn:hover { background-color: var(--brand-strong); color: var(--text-on-brand); }
.tw-btn .elementor-button:active, a.tw-btn:active { transform: scale(.98); }

/* Sekundär-/Ghost-Button */
.tw-btn-ghost .elementor-button {
  background: transparent;
  color: var(--text-on-dark);
  border: 1px solid var(--border-on-dark);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.tw-btn-ghost .elementor-button:hover { border-color: var(--green-400); color: var(--green-300); background: rgba(149,193,31,.08); }

/* Hero-CTA mit Marken-Glow */
.tw-btn-glow .elementor-button { box-shadow: var(--shadow-brand); }
.tw-btn-glow:hover .elementor-button { animation: tw-glow 1.6s var(--ease-inout) infinite; }

/* 24-h-Notruf-Pille — Rot ausschließlich hierfür */
.tw-emergency a, a.tw-emergency-link {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-emergency); color: #fff !important;
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tw-emergency a:hover, a.tw-emergency-link:hover { filter: brightness(1.08); }
.tw-emergency a:active, a.tw-emergency-link:active { transform: scale(.98); }
.tw-emergency .tw-dot, .tw-emergency-link .tw-dot { position: relative; width: 9px; height: 9px; flex: none; }
.tw-emergency .tw-dot::before, .tw-emergency-link .tw-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff;
}
.tw-emergency .tw-dot::after, .tw-emergency-link .tw-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff;
  animation: tw-pulse 1.6s var(--ease-out) infinite;
}

/* Karten — bewusst clean: weiß, feiner Rand, Hover hebt an. Keine Deko-Marker. */
.tw-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.tw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Karte auf dunkler Fläche */
.tw-card-dark {
  background: var(--surface-dark-raised);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out);
}
.tw-card-dark:hover { transform: translateY(-4px); border-color: var(--green-700); }

/* Schlichte Häkchen-Liste (Elementor Icon-List bekommt Klasse tw-list) */
.tw-list .elementor-icon-list-icon svg, .tw-list .elementor-icon-list-icon i { color: var(--brand-strong); fill: var(--brand-strong); }
.tw-list .elementor-icon-list-text { color: inherit; }

/* Link mit animierter Unterstreichung */
.tw-underline a, a.tw-underline {
  position: relative; text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--dur-med) var(--ease-out);
}
.tw-underline a:hover, a.tw-underline:hover { background-size: 100% 2px; }

/* Dunkle Sektion: Textfarben automatisch hell */
.tw-on-dark, .tw-on-dark p { color: var(--text-on-dark); }
.tw-on-dark h1, .tw-on-dark h2, .tw-on-dark h3, .tw-on-dark h4 { color: var(--paper-0); }
.tw-on-dark .tw-muted, .tw-on-dark .elementor-widget-text-editor p.tw-muted { color: var(--text-muted-on-dark); }

/* ---------- 5. ANIMATIONEN & SCROLL-REVEALS ---------- */
@keyframes tw-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes tw-glow { 0%,100% { box-shadow: 0 4px 12px rgba(149,193,31,.2); } 50% { box-shadow: 0 8px 32px rgba(149,193,31,.55); } }

/* Fade & Rise: Elementen die Klasse tw-reveal geben; JS setzt tw-in beim Scrollen.
   Versteckt wird nur, wenn JS aktiv ist (.tw-js auf <html>) — ohne JS bleibt alles sichtbar. */
.tw-js .tw-reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.tw-js .tw-reveal.tw-in { opacity: 1; transform: none; }

/* Stagger: Kinder eines Containers mit tw-stagger reveal'n nacheinander */
.tw-js .tw-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.tw-js .tw-stagger.tw-in > * { opacity: 1; transform: none; }
.tw-stagger.tw-in > *:nth-child(1) { transition-delay: 0ms; }
.tw-stagger.tw-in > *:nth-child(2) { transition-delay: 90ms; }
.tw-stagger.tw-in > *:nth-child(3) { transition-delay: 180ms; }
.tw-stagger.tw-in > *:nth-child(4) { transition-delay: 270ms; }
.tw-stagger.tw-in > *:nth-child(5) { transition-delay: 360ms; }
.tw-stagger.tw-in > *:nth-child(6) { transition-delay: 450ms; }

/* Barrierefreiheit: Nutzerwunsch nach weniger Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .tw-reveal, .tw-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tw-emergency .tw-dot::after, .tw-emergency-link .tw-dot::after, .tw-btn-glow:hover .elementor-button { animation: none !important; }
}

/* ---------- 6. HEADER & FOOTER ---------- */
/* Topbar über dem Header: dunkle Utility-Leiste mit Kontakt-Schnellzugriff */
.tw-topbar { background-color: var(--ink-950) !important; }
.tw-topbar, .tw-topbar p { color: var(--paper-300); font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 12px; letter-spacing: .05em; }
.tw-topbar a { color: var(--paper-100); }
.tw-topbar a:hover { color: var(--green-400); }
.tw-topbar .tw-tb-notruf { color: #ffb0aa; font-weight: var(--weight-extrabold); }
.tw-topbar .tw-tb-notruf:hover { color: #ffd0cc; }

/* Sticky-Header: Glas-Effekt, Elementor-Container bekommt Klasse tw-header; JS setzt tw-scrolled */
.tw-header {
  background: rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid rgba(16, 18, 8, .07);
  transition: box-shadow var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out);
}
.tw-header.tw-scrolled { box-shadow: var(--shadow-md); background: rgba(255, 255, 255, .92) !important; }
.tw-header .tw-logo { flex-shrink: 0; width: auto !important; }
.tw-header .tw-logo img {
  height: 56px !important; width: auto !important; max-width: none !important;
  aspect-ratio: 259 / 150; object-fit: contain;
  transition: height var(--dur-med) var(--ease-out);
}
.tw-header.tw-scrolled .tw-logo img { height: 46px !important; }

/* Wortmarke neben dem Logo (Text, kein Bild — bleibt gestochen scharf).
   Der Lockup ist exakt so hoch wie das Logo (Flex, space-between) und
   bekommt eine feine Trennlinie zum Logo. */
.tw-wordmark {
  text-decoration: none !important;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 56px; padding-left: 16px; border-left: 1px solid var(--border-strong);
  transition: height var(--dur-med) var(--ease-out);
}
.tw-header.tw-scrolled .tw-wordmark { height: 46px; }
.tw-wordmark .tw-wm-name {
  display: block; font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: 27px; line-height: .95; letter-spacing: .01em; color: var(--ink-950); text-transform: uppercase;
}
.tw-wordmark .tw-wm-sub {
  display: block; font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: 11px; line-height: 1; letter-spacing: var(--tracking-wide); color: var(--green-600); text-transform: uppercase;
}
.tw-header.tw-scrolled .tw-wm-name { font-size: 22px; }
.tw-footer .tw-wordmark { height: auto; gap: 6px; border-left-color: var(--border-on-dark); }
@media (max-width: 767px) {
  /* Mobil: Lockup bewusst größer (Logo + beide Wortmarken-Zeilen bleiben sichtbar) */
  .tw-wordmark { height: 46px; padding-left: 12px; }
  .tw-header.tw-scrolled .tw-wordmark { height: 42px; }
  .tw-wordmark .tw-wm-name { font-size: 20px; }
  .tw-header.tw-scrolled .tw-wm-name { font-size: 18px; }
  .tw-wordmark .tw-wm-sub { font-size: 9px; letter-spacing: .07em; }
  .tw-header .tw-logo img { height: 46px !important; }
  .tw-header.tw-scrolled .tw-logo img { height: 42px !important; }
  .tw-header .e-con-inner { column-gap: 10px; }
  /* Topbar mobil ausblenden — die Notruf-Pille im Header trägt die Nummer bereits */
  .tw-topbar { display: none !important; }
  /* Kompakter Mobil-Header: Logo + Wortmarke + Burger in einer Zeile, Notruf-Pille als volle zweite Zeile */
  .tw-header .e-con-inner { flex-wrap: wrap; row-gap: 10px; }
  .tw-header .elementor-widget-image { width: auto; }
  .tw-header .elementor-widget-html { width: auto; }
  .tw-header .elementor-widget-nav-menu { width: auto; margin-left: auto !important; }
  /* Notruf-Pille mobil kompakt und rechtsbündig — nicht über die volle Breite */
  .tw-header .e-con-inner > .elementor-widget-html:last-child { width: auto; margin-left: auto; }
  .tw-header .e-con-inner > .elementor-widget-html:last-child .tw-emergency-link {
    width: auto; padding: 7px 16px; font-size: 13px; gap: 7px;
  }
  .tw-header .e-con-inner > .elementor-widget-html:last-child .tw-dot { width: 7px; height: 7px; }
  /* Eingeklapptes Mobil-Menü aus dem Flow nehmen: als Overlay unter dem Header öffnen.
     Widget wird static, damit das Dropdown am Header (voller Breite) ankert. */
  .tw-header { position: relative; }
  .tw-header .elementor-widget-nav-menu,
  .tw-header .elementor-widget-nav-menu .elementor-widget-container { position: static !important; }
  .tw-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important;
    width: 100% !important; max-height: 70vh; overflow: auto;
    background: var(--paper-0); box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--border-subtle);
  }
  .tw-header .elementor-nav-menu--dropdown a {
    font-family: var(--font-display); font-weight: var(--weight-medium);
    color: var(--ink-800); padding: 14px 24px; display: block;
  }
  .tw-header .elementor-nav-menu--dropdown a.elementor-item-active,
  .tw-header .elementor-nav-menu--dropdown li.current-menu-item > a {
    background: var(--surface-tint) !important; color: var(--green-700) !important;
  }
}
@media (max-width: 360px) {
  /* Sehr schmale Screens: Lockup minimal kompakter, bleibt aber zweizeilig */
  .tw-wordmark .tw-wm-name { font-size: 18px; }
  .tw-wordmark .tw-wm-sub { font-size: 8px; letter-spacing: .06em; }
  .tw-header .tw-logo img { height: 42px !important; }
}

/* Überschriften nicht automatisch trennen (verhindert „Durchsu-chung") */
body.tw-brand h1, body.tw-brand h2, body.tw-brand h3, body.tw-brand h4,
.tw-on-dark h1, .tw-on-dark h2 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }

/* Navigation im Header */
.tw-nav .elementor-nav-menu a, .tw-nav .elementor-item {
  font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 15px;
  color: var(--ink-800);
}
.tw-nav .elementor-nav-menu a:hover, .tw-nav .elementor-item:hover,
.tw-nav .elementor-item.elementor-item-active { color: var(--green-700); }

/* Footer */
.tw-footer { background-color: var(--surface-dark); }
.tw-footer, .tw-footer p, .tw-footer .elementor-icon-list-text { color: var(--text-muted-on-dark); }
.tw-footer h4, .tw-footer h3 { color: var(--paper-0); }
.tw-footer a { color: var(--text-on-dark); transition: color var(--dur-fast) var(--ease-out); }
.tw-footer a:hover { color: var(--green-400); }
.tw-footer .tw-wordmark .tw-wm-name { color: var(--paper-0); }


/* ---------- Startseiten-Komponenten ---------- */

/* Sekundär-Button auf hellen Flächen (Outline) */
.tw-btn-outline .elementor-button {
  background: transparent;
  color: var(--green-700);
  border: 1px solid var(--green-600);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tw-btn-outline .elementor-button:hover { background: var(--green-600); color: var(--paper-0); }

/* Zahlen-Statistiken */
.tw-stats { display: flex; gap: 64px; flex-wrap: wrap; justify-content: center; text-align: center; }
.tw-stat-num { font-family: var(--font-display); font-weight: var(--weight-black); font-size: 56px; line-height: 1.1; color: var(--green-600); font-variant-numeric: tabular-nums; }
.tw-on-dark .tw-stat-num { color: var(--green-400); }
.tw-stat-label { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.tw-on-dark .tw-stat-label { color: var(--text-muted-on-dark); }
@media (max-width: 767px) { .tw-stats { gap: 32px; } .tw-stat-num { font-size: 40px; } }

/* Ablauf-Schritte: große Ziffer, schlicht, ohne Deko-Kreise */
.tw-step-num { font-family: var(--font-display); font-weight: var(--weight-black); font-size: 52px; line-height: 1; color: var(--green-500); }

/* Blog-Teaser (Elementor Posts-Widget) */
.tw-blog .elementor-post { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.tw-blog .elementor-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tw-blog .elementor-post__text { padding: var(--space-5); }
.tw-blog .elementor-post__title, .tw-blog .elementor-post__title a { font-family: var(--font-display); font-weight: var(--weight-extrabold); color: var(--text-heading); font-size: var(--text-xl); line-height: var(--leading-snug); }
.tw-blog .elementor-post__title a:hover { color: var(--green-700); }
.tw-blog .elementor-post__excerpt p { color: var(--text-body); }
.tw-blog .elementor-post__read-more { color: var(--green-700); font-family: var(--font-display); font-weight: var(--weight-extrabold); }
.tw-blog .elementor-post__meta-data { color: var(--text-muted); font-size: var(--text-sm); }

/* FAQ (Elementor Accordion) — cleane Kartenoptik */
.tw-faq .elementor-accordion-item { background: var(--surface-card); border: 1px solid var(--border-subtle) !important; border-radius: var(--radius-lg); margin-bottom: var(--space-3); overflow: hidden; }
.tw-faq .elementor-tab-title { font-family: var(--font-display) !important; font-weight: var(--weight-extrabold) !important; color: var(--text-heading) !important; }
.tw-faq .elementor-tab-title.elementor-active { color: var(--green-700) !important; }
.tw-faq .elementor-tab-title .elementor-accordion-icon { color: var(--green-600) !important; }
.tw-faq .elementor-tab-content { font-family: var(--font-body); color: var(--text-body); border-top: 1px solid var(--border-subtle) !important; }


/* ---------- Aufwertung 2.0: Textanimationen, Marquee, Portrait, Sektionen ---------- */

/* Wort-für-Wort-Reveal (Blur + Rise) — Klasse tw-split auf Heading-Widget, JS zerlegt in Wörter */
.tw-js .tw-split .tw-w {
  display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.35em);
  transition: opacity .7s var(--ease-out), filter .7s var(--ease-out), transform .7s var(--ease-out);
}
.tw-js .tw-split.tw-in .tw-w { opacity: 1; filter: blur(0); transform: none; }

/* Eyebrow-Tracking: Buchstabenabstand zieht sich beim Einblenden zusammen */
.tw-js .tw-track .elementor-heading-title, .tw-js h1.tw-track, .tw-js div.tw-track { transition: none; }
.tw-js .tw-track { opacity: 0; transition: opacity .9s var(--ease-out); }
.tw-js .tw-track .elementor-heading-title { letter-spacing: .34em; transition: letter-spacing .9s var(--ease-out); }
.tw-js .tw-track.tw-in { opacity: 1; }
.tw-js .tw-track.tw-in .elementor-heading-title { letter-spacing: var(--tracking-wide); }

/* Marquee-Laufband (Schwerpunkte) — pausiert bei Hover und bei reduced motion */
.tw-marquee { overflow: hidden; }
.tw-marquee-track { display: flex; align-items: center; gap: 56px; width: max-content; animation: tw-marquee 38s linear infinite; }
.tw-marquee:hover .tw-marquee-track { animation-play-state: paused; }
.tw-marquee-item {
  font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: 19px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(244,246,236,.34); white-space: nowrap;
  cursor: default;
  transition: color .45s var(--ease-out), text-shadow .45s var(--ease-out);
}
.tw-marquee-item:hover { color: var(--green-300); }
.tw-marquee-item.tw-lit { color: var(--green-400); text-shadow: 0 0 20px rgba(149,193,31,.5); }
.tw-marquee-dot { color: var(--green-500); font-size: 19px; }
@keyframes tw-marquee { to { transform: translateX(-50%); } }

/* Portrait mit Namenskarte */
.tw-portrait { position: relative; display: block; }
.tw-portrait img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; }
.tw-portrait-card {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 12px 18px; box-shadow: var(--shadow-md);
}
.tw-portrait-card .tw-pc-name { font-family: var(--font-display); font-weight: var(--weight-extrabold); color: var(--ink-900); font-size: 16px; display: block; }
.tw-portrait-card .tw-pc-sub { font-family: var(--font-display); font-weight: var(--weight-medium); color: var(--green-700); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; display: block; margin-top: 3px; }

/* H2 mit sich aufbauender Akzentlinie (Klasse tw-h2line zusätzlich zu tw-reveal) */
.tw-h2line .elementor-heading-title { display: inline-block; position: relative; padding-bottom: 12px; }
.tw-h2line .elementor-heading-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 56px;
  background: var(--green-500); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease-out) .2s;
}
.tw-h2line.tw-in .elementor-heading-title::after { transform: scaleX(1); }

/* Blog-Karten: Bilder ruhig lassen (nur die Karte hebt sich beim Hover) */
.tw-blog .elementor-post__thumbnail { border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; }

/* Große Notruf-Pille für das Notfall-Band */
.tw-emergency-big .tw-emergency-link { padding: 15px 32px; font-size: 18px; box-shadow: 0 8px 32px rgba(232,68,58,.35); }

@media (prefers-reduced-motion: reduce) {
  .tw-js .tw-split .tw-w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .tw-js .tw-track { opacity: 1 !important; transition: none !important; }
  .tw-js .tw-track .elementor-heading-title { letter-spacing: var(--tracking-wide) !important; transition: none !important; }
  .tw-marquee-track { animation: none !important; }
}




/* Hero-H1 fließend skalieren (sitzt in einer 55%-Spalte neben dem Portrait) */
.tw-split .elementor-heading-title { font-size: clamp(30px, 3.6vw, 52px) !important; }

/* Hero: Vertrauens-Merkmale als schlichte Häkchen-Liste */
.tw-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.tw-trust li {
  font-family: var(--font-display); font-weight: var(--weight-medium); font-size: 14px;
  letter-spacing: .04em; color: var(--paper-100); display: flex; align-items: center; gap: 9px;
}
.tw-trust li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--green-500); box-shadow: 0 0 10px rgba(149,193,31,.6);
}

/* Portrait im Hero: etwas kühler gerahmt, damit es auf Dunkel sitzt */
.tw-portrait-hero img { border: 1px solid rgba(149,193,31,.18); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
@media (max-width: 767px) {
  .tw-portrait-hero { max-width: 380px; margin: 0 auto !important; }
  .tw-trust { gap: 8px 20px; }
  .tw-trust li { font-size: 13px; }
}

/* ---------- Elementor-Editor: Animationen komplett aus, Inhalte immer sichtbar ---------- */
body.elementor-editor-active .tw-reveal,
body.elementor-editor-active .tw-stagger > *,
body.elementor-editor-active .tw-split .tw-w,
body.elementor-editor-active .tw-split,
body.elementor-editor-active .tw-track,
body.elementor-editor-active .tw-track .elementor-heading-title {
  opacity: 1 !important; transform: none !important; filter: none !important;
  transition: none !important; letter-spacing: inherit !important;
}
body.elementor-editor-active .tw-marquee-track { animation: none !important; }

/* ---------- Übergangsphase: Monstroid2-Reste auf Marken-Seiten neutralisieren.
   Greift nur, solange Monstroid2 aktiv ist (body-Klasse wp-theme-monstroid2) —
   nach dem Wechsel auf Hello Child ist dieser Block wirkungslos und kann weg. ---------- */
body.tw-brand.wp-theme-monstroid2 .site-header { min-height: 0 !important; height: auto !important; padding: 0 !important; }
body.tw-brand.wp-theme-monstroid2 .site-content { padding: 0 !important; margin: 0 !important; }
body.tw-brand.wp-theme-monstroid2 .site-content .container { max-width: none; padding: 0; margin: 0; width: 100%; }

/* =====================================================================
   7. EIGENE ANPASSUNGEN
   Eigene Regeln bitte unterhalb dieser Zeile eintragen — sie überschreiben
   alles oben. Zentrale Werte (Farben, Schriftgrößen, Abstände) lassen sich
   am schnellsten oben in Abschnitt 2 (Design-Tokens) ändern.
   ===================================================================== */

/* Utility: Element in Flex-Zeile nach rechts schieben */
.tw-push-right { margin-left: auto !important; }