/*
Theme Name: Tanja Mischler
Theme URI: https://tanjamischler.ch
Description: Massgeschneidertes Child-Theme für Tanja Mischler – Begleittherapie, Faszientherapie, Neurosensitivität
Author: Tanja Mischler
Author URI: https://tanjamischler.ch
Template: hello-elementor
Version: 2.8.0
Text Domain: tanja-mischler-child
*/

/* ═══════════════════════════════════════
   CSS Custom Properties / Design Tokens
   ═══════════════════════════════════════ */
:root {
  /* ────────────────────────────────────────────
     NEW BRAND PALETTE (per schrfiten_farben.docx)
     Mirrors the Elementor Kit Global Colors —
     change values here AND in the Kit to keep sync.
     ──────────────────────────────────────────── */

  /* Primary brand — Petrol (deep, calm, professional) */
  --petrol-deep: #1E3940;   /* Headlines */
  --petrol-dark: #264A52;   /* Buttons, CTAs, links */

  /* Accent — Salbeigrün (muted sage for atmosphere) */
  --sage-muted: #9BB5A4;

  /* Warmth — Terracotta family (use sparingly for emotional highlights) */
  --terracotta:    #B8744F;
  --soft-cinnamon: #A46F4E;

  /* Neutrals (warm, sandy) */
  --off-white:      #F5EFE6;  /* page background */
  --soft-off-white: #FAF6EF;  /* button text on dark */
  --beige-warm:     #ECE5DA;  /* section backgrounds */
  --soft-sand:      #DDD1C5;  /* sand tone for tinted blocks */
  --taupe-sand:     #CBB9A8;  /* neutral mid */
  --light-grey:     #E5DFD6;  /* borders, dividers */

  /* Text */
  --text:       #333333;   /* soft black body */
  --text-mid:   #635345;   /* secondary text */
  --text-light: #8E7D6F;   /* tertiary text */

  /* ────────────────────────────────────────────
     LEGACY ALIASES (kept so old rules don't break)
     Map to the closest new value.
     ──────────────────────────────────────────── */
  --sage:       #264A52;   /* old sage → new primary button/CTA */
  --sage-mid:   #1E3940;
  --sage-light: #9BB5A4;
  --sage-pale:  #DDD1C5;
  --rose:       #B8744F;
  --rose-light: #A46F4E;
  --rose-pale:  #DDD1C5;
  --beige:      #ECE5DA;
  --beige-mid:  #CBB9A8;
  --cream:      #F5EFE6;
  --brown:      #1E3940;
  --clay:       #A46F4E;
  --sand:       #CBB9A8;
  --charcoal:   #1E3940;
  --dark-sage:  #1E3940;

  /* Typography */
  --font-heading:  'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-signature:'Caveat', cursive;

  /* Spacing */
  --section-padding: clamp(60px, 8vw, 120px);
  --container-width: 1200px;

  /* Transitions */
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;
}

/* ═══════════════════════════════════════
   Reset & Base
   ═══════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background-color: var(--cream);
  margin: 0;
  padding: 0;
  /* No top offset: the colored hero bleeds to the very top behind the fixed,
     semi-transparent nav. Each hero carries its own top padding (≥90px) so the
     content still clears the 68px nav. */
}

/* ═══════════════════════════════════════
   Typography
   ═══════════════════════════════════════ */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.2;
  color: var(--text);
}

/* Emphasis in content headings = fully native: italic, no extra colour.
   The em inherits the heading's own colour so titles stay one uniform colour. */
h1 em, h2 em, h3 em,
.elementor-heading-title em {
  font-style: italic;
  color: inherit;
}

/* Logo + footer brand wordmark: one uniform colour (inherits), not italic. */
.tm-fixed-nav .elementor-heading-title em {
  color: inherit !important;
  font-style: normal;
}
.tm-footer-section .elementor-heading-title em {
  color: inherit !important;
  font-style: normal;
}

h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 400;
}

h1 { font-size: clamp(2.5rem, 5vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }

p {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--text);
}

a {
  text-decoration: none;
  transition: color var(--transition-base);
}

/* Default body content links (not headings, not buttons, not nav, not footer) */
.elementor-widget-text-editor a {
  color: var(--petrol-dark);
}

.elementor-widget-text-editor a:hover {
  color: var(--terracotta);
}

/* Headings with embedded links (logo, post titles): inherit heading color */
.elementor-heading-title a {
  color: inherit;
}

.elementor-heading-title a:hover {
  color: var(--terracotta);
}

/* ═══════════════════════════════════════
   Buttons / Labels (Global)
   ═══════════════════════════════════════ */
.tm-btn,
.elementor-button {
  font-family: var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 0;
  transition: all var(--transition-base);
}

.tm-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mid);
}

/* ═══════════════════════════════════════
   Elementor Overrides
   ═══════════════════════════════════════ */

/* Headlines – defaults, Elementor settings take priority */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading);
}

/* Body Text – defaults, Elementor settings take priority */
.elementor-widget-text-editor {
  font-family: var(--font-body);
  line-height: 1.7;
}

/* Remove default Elementor section gaps */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-width);
}

/* Elementor button defaults (override via Elementor settings) */
.elementor-button-wrapper .elementor-button {
  font-family: var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Selection color */
::selection {
  background-color: var(--sage-pale);
  color: var(--text);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cream);
}

::-webkit-scrollbar-thumb {
  background: var(--sage-mid);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--sage);
}

/* ═══════════════════════════════════════
   Utility Classes
   ═══════════════════════════════════════ */
.tm-italic {
  font-style: italic;
}

.tm-color-sage {
  color: var(--sage);
}

.tm-color-rose {
  color: var(--rose);
}

.tm-bg-cream {
  background-color: var(--cream);
}

.tm-bg-beige {
  background-color: var(--beige);
}

.tm-bg-sage {
  background-color: var(--sage);
}

/* ═══════════════════════════════════════
   HOMEPAGE – Only hover/animation effects
   Layouts handled by native Elementor flex
   ═══════════════════════════════════════ */

/* ── Scroll hint animation ── */
/* (scroll-hint bob animation removed — new hero has no scroll hint widget) */

/* ── Angebote card hover effects ── */
.tm-angebote .e-con.e-child {
  transition: background 0.3s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* ── Parallax section text shadows ── */
.tm-parallax-neuro .elementor-heading-title,
.tm-parallax-faszien .elementor-heading-title {
  text-shadow: 0 2px 30px rgba(0,0,0,0.2);
}

/* ── Parallax outline buttons ── */
.tm-parallax-neuro .elementor-button,
.tm-parallax-faszien .elementor-button {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  color: #fff !important;
}
.tm-parallax-neuro .elementor-button:hover,
.tm-parallax-faszien .elementor-button:hover {
  background: #fff !important;
  color: var(--sage) !important;
}

/* ── Boeger/Faszien: image styling ── */
.tm-boeger img {
  border-radius: 2px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
}

/* ── Über mich: image cover ── */
.tm-ueber > .e-con:first-child {
  position: relative;
  overflow: hidden;
}

.tm-ueber > .e-con:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Über mich: right-fade gradient overlay on image */
.tm-ueber > .e-con:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, var(--beige-warm) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── Testimonials: nur Hover-Lift (Raster jetzt natives Grid) ── */
.tm-testimonials [data-id="tm09grid5"] > .e-con.e-child {
  transition: transform 0.3s;
}

.tm-testimonials [data-id="tm09grid5"] > .e-con.e-child:hover {
  transform: translateY(-4px);
}

/* ── Footer: 4-Spalten-Raster jetzt natives Grid (2fr 1fr 1fr 1fr). ── */

/* Footer is a dark section (Petrol Deep BG) — all text must be light.
   Kit h1-h6 defaults are also Petrol Deep, so we need explicit overrides. */
.tm-footer-section .elementor-heading-title {
  color: var(--soft-off-white) !important;
}

.tm-footer-section .elementor-widget-text-editor,
.tm-footer-section .elementor-widget-text-editor p,
.tm-footer-section .elementor-widget-text-editor li,
.tm-footer-section .elementor-widget-text-editor span {
  color: rgba(255, 255, 255, 0.7) !important;
}

.tm-footer-section a {
  color: rgba(255, 255, 255, 0.7) !important;
}

.tm-footer-section a:hover {
  color: var(--terracotta) !important;
}

/* Footer bottom bar */
.tm-footer-section [data-id="tmft000j8"] > .e-con-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

/* ═══════════════════════════════════════
   PARALLAX (Elementor Pro Motion Effects)
   z-index layering for overlay + content
   ═══════════════════════════════════════ */

/* Parallax sections need overflow:hidden + position context */
.tm-hero,
.tm-parallax-neuro,
.tm-parallax-faszien,
.tm-footer-section {
  overflow: hidden !important;
  position: relative;
}

/* Layer 0: Background (motion effects container) */
.tm-hero > .elementor-motion-effects-container,
.tm-parallax-neuro > .elementor-motion-effects-container,
.tm-parallax-faszien > .elementor-motion-effects-container,
.tm-footer-section > .elementor-motion-effects-container {
  z-index: 0;
}

/* Layer 1: Overlay gradient (only parallax sections still use this; hero is split-layout now) */
.tm-parallax-neuro::before,
.tm-parallax-faszien::before,
.tm-footer-section::before {
  z-index: 1 !important;
}

/* Layer 2: Content */
.tm-parallax-neuro > .e-con,
.tm-parallax-faszien > .e-con,
.tm-footer-section > .e-con {
  position: relative;
  z-index: 2 !important;
}

/* Ensure overlay gradient shows when motion effects are active */
.tm-parallax-neuro.elementor-motion-effects-element-type-background::before,
.tm-parallax-faszien.elementor-motion-effects-element-type-background::before,
.tm-footer-section.elementor-motion-effects-element-type-background::before {
  content: '' !important;
  display: block;
  position: absolute;
  inset: 0;
}

/* ═══════════════════════════════════════
   HOMEPAGE v4 – Additional Section Styles
   ═══════════════════════════════════════ */

/* ── Fixed Nav (Glass-Morphism) ── */
.tm-fixed-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000 !important;
  background: rgba(250, 247, 242, 0.96) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--beige-mid);
  height: 68px;
}

.tm-fixed-nav .elementor-nav-menu a {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
}


.tm-fixed-nav .elementor-button {
  padding: 9px 22px;
  border-radius: 1px;
  font-size: 0.76rem;
}

/* Nav inner container: shrink to content width */
.tm-fixed-nav [data-id="tmhd00032"].e-con {
  width: auto !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* ── Nav Links (desktop) ── */
.tm-nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}

.tm-nav-links a {
  text-decoration: none;
  color: var(--petrol-deep);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  transition: color 0.3s;
  font-family: var(--font-body);
}

.tm-nav-links a:hover {
  color: var(--terracotta);
}

/* ── Hamburger Button ── */
button.tm-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px !important;
  height: 28px !important;
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0;
  z-index: 1002;
  min-height: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.tm-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: all 0.3s;
  transform-origin: center;
}

/* Hamburger → X animation */
.tm-hamburger--open span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px);
}
.tm-hamburger--open span:nth-child(2) {
  opacity: 0;
}
.tm-hamburger--open span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
}

/* ── Mobile Menu (slide-down) ── */
.tm-mobile-menu {
  display: none;
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  background: rgba(250, 247, 242, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 20px 0;
  z-index: 999;
  border-bottom: 1px solid var(--beige-mid);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  pointer-events: none;
}

.tm-mobile-menu--open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.tm-mobile-menu a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 24px;
  text-decoration: none;
  color: var(--text-mid);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  font-family: var(--font-body);
  transition: color 0.2s, background 0.2s;
}

.tm-mobile-menu a:hover {
  color: var(--sage);
  background: var(--beige);
}

.tm-mobile-menu__cta {
  margin-top: 12px;
  margin-left: auto;
  margin-right: auto;
  width: auto !important;
  display: inline-block !important;
  padding: 12px 32px !important;
  background: var(--sage) !important;
  color: #fff !important;
  border-radius: 1px;
  font-weight: 500 !important;
}

.tm-mobile-menu__cta:hover {
  background: var(--sage-mid) !important;
  color: #fff !important;
}

/* ── Hero (new split-layout 2026) ──
   Layout, colors, fonts, padding all set natively in Elementor.
   These rules only fix things Elementor cannot express natively. */

/* The hero row must let children keep their declared widths */
.tm-hero.e-con {
  flex-wrap: nowrap;
}

/* Homepage hero: flush below the fixed nav (68px) and fill exactly the rest
   of the screen, so the green stats bar sits at the bottom edge.
   High-specificity selector (element-id level) to beat Elementor's
   --min-height:100vh. */
@media (min-width: 768px) {
  body.home {
    padding-top: 68px;
  }
  body.home .elementor-element.elementor-element-tm01hero0.tm-hero {
    /* Fills the screen below the nav on normal/laptop viewports, but caps at
       900px on very tall monitors so it doesn't stretch into an oversized hero.
       Still grows past the cap only if content would otherwise clip. */
    min-height: min(calc(100vh - 68px), 900px) !important;
  }
}

/* On mobile, the row stacks (set in JSON via flex_direction_mobile: column).
   Make sure the inner cols take full width even if older CSS interferes. */
@media (max-width: 767px) {
  .tm-hero.e-con {
    flex-wrap: wrap;
  }
  .tm-hero__left.e-con,
  .tm-hero__right.e-con {
    width: 100% !important;
  }
}

/* Hero headline em — native: italic, inherits the title colour (no accent). */
.tm-hero__left .elementor-heading-title em {
  font-style: italic;
  color: inherit;
}

/* Portrait: clean edges, no border-radius (matches PDF) */
.tm-hero__right .elementor-widget-image img {
  display: block;
  border-radius: 0;
  max-width: 100%;
  height: auto;
}

/* ── Intro Section ── */
.tm-intro .elementor-divider-separator {
  border-color: var(--sage) !important;
}

/* ── Section Label (Eyebrow Tag) ── */
.tm-section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
  font-weight: 500;
}

.tm-section-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* ── Angebote Grid (1px gap effect) ── */
/* beige-mid only on grid container, not the whole section */
.tm-angebote > .e-con {
  gap: 1px !important;
}

/* ── Tarife Section ── */
.tm-tarife {
  text-align: center;
}

/* Tarif card inner text – layout only, colors from inline styles or Elementor */
.tm-tarif-card {
  transition: background 0.3s;
}

/* Tarife section sits on Petrol Dark (#264A52) — all text must be light. */
.tm-tarif-card .tm-tarif-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--terracotta);  /* warm accent for the tiny eyebrow label */
  font-weight: 500;
}

.tm-tarif-card .tm-tarif-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 10px;
  color: var(--soft-off-white);
}

.tm-tarif-card .tm-tarif-price {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.tm-tarif-card .tm-tarif-detail {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
}

.tm-tarife-note {
  margin-top: 32px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
}

/* Tarife main heading: also white for contrast */
.tm-tarife .elementor-heading-title {
  color: var(--soft-off-white) !important;
}

/* ── Über mich ── */
.tm-ueber .tm-ueber__quote {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 400;
  color: var(--rose);
  line-height: 1.55;
  padding-left: 28px;
  border-left: 2px solid var(--rose-light);
}

/* ── Skill Tags ── */
.tm-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tm-skill-tags .tm-skill-tag {
  background: #fff;
  border: 1px solid var(--beige-mid);
  padding: 7px 20px;
  font-size: 0.84rem;
  color: var(--text-mid);
  letter-spacing: 0.06em;
  border-radius: 100px;
  display: inline-block;
}

/* ── Timeline ── */
.tm-timeline-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--beige-mid);
}

.tm-timeline-year {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--sage);
  font-weight: 600;
}

.tm-timeline-desc {
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.7;
  font-weight: 400;
}

.tm-timeline-desc strong {
  color: var(--text);
  font-weight: 500;
}

@media (max-width: 767px) {
  .tm-timeline-item {
    grid-template-columns: 80px 1fr;
    gap: 16px;
  }
}

/* ── Blog Cards ── */

.tm-blog-cards > .e-con {
  gap: 1px !important;
}

.tm-blog-card {
  background: var(--cream);
  overflow: hidden;
  cursor: pointer;
  transition: background 0.3s;
}

.tm-blog-card:hover {
  background: var(--beige);
}

.tm-blog-card .tm-blog-card__img {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.tm-blog-card .tm-blog-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tm-blog-card:hover .tm-blog-card__img img {
  transform: scale(1.05);
}

.tm-blog-card__body {
  padding: 28px 32px;
}

.tm-blog-card__cat {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 10px;
}

.tm-blog-card__cat--rose {
  color: var(--rose);
}

.tm-blog-card__title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 12px;
}

.tm-blog-card__excerpt {
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.65;
  font-weight: 400;
}

/* ── Loop Carousel Cards (matches tm-blog-card style) ── */

.tm-loop-card {
  background: var(--cream);
  overflow: hidden;
  transition: background var(--transition-base);
}

.tm-loop-card:hover {
  background: var(--beige);
}

/* Featured image: fixed aspect ratio with hover zoom.
   theme-post-featured-image renders <img> directly inside the widget div. */
.tm-loop-card .elementor-widget-theme-post-featured-image {
  overflow: hidden;
  aspect-ratio: 4 / 3;   /* natural ratio — height scales with card width */
}

.tm-loop-card .elementor-widget-theme-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.6s ease;
  display: block;
}

.tm-loop-card:hover .elementor-widget-theme-post-featured-image img {
  transform: scale(1.05);
}

/* Category link (heading widget with post-terms dynamic tag — first heading inside body) */
.tm-loop-card .tm-loop-card__body > .elementor-widget-heading:first-child .elementor-heading-title,
.tm-loop-card .tm-loop-card__body > .elementor-widget-heading:first-child .elementor-heading-title a {
  color: var(--sage) !important;
  text-decoration: none;
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

.tm-loop-card .tm-loop-card__body > .elementor-widget-heading:first-child .elementor-heading-title a:hover {
  color: var(--sage-mid) !important;
}

/* Post title link */
.tm-loop-card .elementor-widget-theme-post-title .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}

.tm-loop-card:hover .elementor-widget-theme-post-title .elementor-heading-title a {
  color: var(--sage);
}

.tm-loop-card .elementor-heading-title a:hover {
  color: var(--sage);
}

/* Carousel navigation arrows — match theme */
.tm-blog-cards .elementor-swiper-button {
  color: var(--text-mid);
  transition: color var(--transition-base);
}

.tm-blog-cards .elementor-swiper-button:hover {
  color: var(--sage);
}

/* Carousel pagination dots */
.tm-blog-cards .swiper-pagination-bullet {
  background: var(--beige-mid);
  opacity: 1;
}

.tm-blog-cards .swiper-pagination-bullet-active {
  background: var(--sage);
}

/* ── Praxis-Galerie ── */

.tm-galerie > .e-con {
  gap: 1px !important;
}

.tm-galerie-img {
  overflow: hidden;
}

.tm-galerie-img img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: opacity 0.4s;
  cursor: pointer;
}

.tm-galerie-img:hover img {
  opacity: 0.85;
}

/* ── Krankenkasse ── */
.tm-krankenkasse {
  border-top: 1px solid var(--beige-mid);
}

.tm-emr-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 20px;
  background: var(--beige);
  font-size: 0.82rem;
  color: var(--sage);
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* ── Spacer: push content below fixed nav ── */
.tm-nav-spacer {
  height: 68px;
}

/* ═══════════════════════════════════════
   HOMEPAGE v4 – Visual Polish
   ═══════════════════════════════════════ */

/* ── Nav: ensure it layers above hero ── */
.tm-fixed-nav.e-con {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  max-width: 100% !important;
  background: rgba(250, 247, 242, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--beige-mid) !important;
}

/* ── Hero: ensure content doesn't hide behind nav ── */
.tm-hero > .e-con:first-of-type {
  padding-top: 88px !important;
}

/* ── Hero: overlay gradient left-fade ── */
.tm-hero > .elementor-background-overlay,
.tm-hero > .e-con-inner > .elementor-background-overlay {
  background: linear-gradient(to right,
    rgba(250, 247, 242, 0.55) 0%,
    rgba(250, 247, 242, 0.30) 25%,
    rgba(250, 247, 242, 0.08) 50%,
    transparent 70%) !important;
}

/* ── Tarife cards side-by-side fix ── */
.tm-tarife-grid.e-con {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

.tm-tarife-grid > .e-con.e-child {
  flex: 1 1 280px !important;
  min-width: 280px !important;
}

/* ── Tarife: layout helpers ── */

/* ── Über mich: full-height image container ── */
.tm-ueber.e-con {
  min-height: 680px;
}

.tm-ueber > .e-con:first-child {
  min-height: 100% !important;
}

/* ── Hero: neutralize motion-effects zoom on background ── */
.tm-hero > .elementor-motion-effects-container {
  top: 0 !important;
  height: 100% !important;
}
.tm-hero > .elementor-motion-effects-container .elementor-motion-effects-layer {
  top: 0 !important;
  height: 100% !important;
  background-position: top center !important;
}

.tm-ueber > .e-con:first-child .elementor-motion-effects-layer {
  background-position: center top !important;
}

/* ── Testimonials: style the cards ── */
.tm-testimonials > .e-con:last-child > .e-con.e-child {
  transition: transform 0.3s;
}

.tm-testimonials > .e-con:last-child > .e-con.e-child:hover {
  transform: translateY(-4px);
}

/* ── Angebote: 3-Spalten-Raster jetzt natives Grid (1px-Gap-Trennlinien via Grid-Gap).
   Blog-Karten sind ein natives Loop-Carousel — keine CSS-Regel nötig. ── */

/* ── Galerie ist jetzt ein natives Galerie-Widget (tm12grid3 entfällt). ── */


/* ── Footer: link hover ── */
.tm-footer-section a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Hero: neutralize motion-effects zoom ── */
.tm-hero > .elementor-motion-effects-container {
  top: 0 !important;
  height: 100% !important;
}
.tm-hero > .elementor-motion-effects-container .elementor-motion-effects-layer {
  top: 0 !important;
  height: 100% !important;
  background-position: top center !important;
}

/* ═══════════════════════════════════════
   SUBPAGE – Hero (shared across Angebots-Seiten)
   ═══════════════════════════════════════ */
.tm-subpage-hero {
  overflow: hidden !important;
  position: relative;
  /* Höhe wird NATIV in Elementor gesetzt (min_height 60vh je Hero-Container),
     bewusst kein CSS-Override hier, damit sie in Elementor editierbar bleibt. */
}

.tm-subpage-hero::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  z-index: 1 !important;
  background: linear-gradient(to right,
    var(--cream) 0%, var(--cream) 20%,
    rgba(248, 244, 237, 0.92) 35%,
    rgba(248, 244, 237, 0.5) 55%,
    rgba(248, 244, 237, 0.15) 75%,
    transparent 100%) !important;
}

.tm-subpage-hero > .elementor-motion-effects-container {
  top: 0 !important;
  height: 100% !important;
  z-index: 0;
}
.tm-subpage-hero > .elementor-motion-effects-container .elementor-motion-effects-layer {
  top: 0 !important;
  height: 100% !important;
  background-position: center center !important;
}

.tm-subpage-hero > .e-con {
  position: relative;
  z-index: 2 !important;
}

/* Breadcrumb */
.tm-breadcrumb {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 400;
}
.tm-breadcrumb a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.3s;
}
.tm-breadcrumb a:hover {
  color: var(--sage);
}
.tm-breadcrumb .tm-breadcrumb__sep {
  margin: 0 8px;
  opacity: 0.5;
}

/* ═══════════════════════════════════════
   DARK SECTIONS (Charcoal Background)
   ═══════════════════════════════════════ */
.tm-dark-section {
  background: var(--charcoal) !important;
}

.tm-dark-section .elementor-heading-title {
  color: #fff;
}

.tm-dark-section .elementor-heading-title em {
  color: var(--sage-light) !important;
}

.tm-dark-section .elementor-text-editor,
.tm-dark-section .elementor-text-editor p {
  color: rgba(255, 255, 255, 0.75);
}

.tm-dark-section .tm-section-label {
  color: var(--terracotta);
}

.tm-dark-section .tm-section-label::before {
  background: var(--terracotta);
}

.tm-dark-section .elementor-button {
  background: var(--sage-light) !important;
  color: var(--charcoal) !important;
}

.tm-dark-section .elementor-button:hover {
  background: #fff !important;
  color: var(--charcoal) !important;
}

/* Dark section list styling */
.tm-dark-section ul {
  list-style: none;
  padding: 0;
}

.tm-dark-section ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  line-height: 1.75;
}

.tm-dark-section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sage-light);
}

/* ═══════════════════════════════════════
   SUBPAGE – Numbered Steps Section
   ═══════════════════════════════════════ */
/* .tm-steps-grid: Raster jetzt natives Grid (Spalten/Gap/Responsive in Elementor). */

.tm-step-number {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 300;
  color: var(--sage);
  line-height: 1;
  margin-bottom: 12px;
}

.tm-step-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.3;
}

.tm-step-text {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.75;
}

/* ═══════════════════════════════════════
   SUBPAGE – Testimonial Quote
   ═══════════════════════════════════════ */
.tm-quote-big {
  font-family: var(--font-heading);
  font-size: 6rem;
  color: var(--sage-pale);
  line-height: 0.7;
  display: block;
  margin-bottom: 20px;
}

.tm-quote-text {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--text);
  max-width: 640px;
}

.tm-quote-author {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 20px;
}

.tm-quote-author strong {
  color: var(--text-mid);
  font-weight: 500;
}

/* ═══════════════════════════════════════
   SUBPAGE – Tarife Compact (single card)
   ═══════════════════════════════════════ */
.tm-subpage-tarif {
  text-align: center;
}

.tm-subpage-tarif .tm-tarif-label {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.6);
}

.tm-subpage-tarif .tm-tarif-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 8px;
}

.tm-subpage-tarif .tm-tarif-price {
  font-size: 2.6rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 6px;
}

.tm-subpage-tarif .tm-tarif-detail {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
}

/* ── Unified subpage tarif box (Neuro / Faszien / Begleit) ──
   Sits on a dark Petrol/Terracotta section → light text, constrained width. */
.tm-tarif-box {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  padding: 44px 40px !important;
  border-radius: 8px;
  text-align: center;
}

.tm-tarif-box .tm-tarif-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--soft-sand);
  font-weight: 500;
}

.tm-tarif-box .tm-tarif-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--soft-off-white);
  margin-bottom: 10px;
}

.tm-tarif-box .tm-tarif-price {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.tm-tarif-box .tm-tarif-detail {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.5;
}

/* Über mich – Values/Qualification Grid: jetzt natives Grid. */

/* Hook "Kennen Sie das?" — Sign Cards: Raster nativ; nur Breite/Zentrierung bleibt CSS. */
.tm-signs-grid {
  max-width: 760px;
  margin: 0 auto;
}

.tm-sign-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 26px 30px;
  border: 1px solid rgba(154, 130, 99, 0.15);
  border-left: 2px solid var(--sage);
  border-radius: 8px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(45, 52, 38, 0.03), 0 4px 16px rgba(45, 52, 38, 0.04);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
}

.tm-sign-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 2px 4px rgba(45, 52, 38, 0.05), 0 8px 24px rgba(45, 52, 38, 0.06);
}

.tm-sign-card strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: 0.005em;
}

.tm-sign-card p,
.tm-sign-card {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.6;
}

/* Rose variant for Faszientherapie */
.tm-sign-card--rose {
  border-left-color: var(--rose);
}

.tm-hook-resolve {
  margin-top: 40px;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--rose);
  font-weight: 400;
  text-align: center;
}

/* Steps: white card style with hover bar */
.tm-steps-grid > .e-con {
  background: #fff;
  padding: 52px 40px;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}

.tm-steps-grid > .e-con::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sage);
  transform: scaleX(0);
  transition: transform 0.4s;
  transform-origin: left;
}

.tm-steps-grid > .e-con:hover::before {
  transform: scaleX(1);
}

.tm-steps-grid > .e-con:hover {
  background: var(--beige);
}

/* Dark section: structured method list */
.tm-methoden-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--sage-light);
  font-style: italic;
  margin-bottom: 20px;
}

.tm-methode {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.tm-methode:last-child {
  border-bottom: none;
}

.tm-methode-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 180px;
}

.tm-methode-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}

/* Subpage: Final CTA */
.tm-final-cta {
  text-align: center;
}

.tm-final-cta .tm-cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.tm-section-label--rose {
  color: var(--rose);
}

.tm-section-label--rose::before {
  background: var(--rose);
}

/* ═══════════════════════════════════════
   SINGLE POST – Blog Article Styles
   ═══════════════════════════════════════ */

/* (Entfernt: .tm-single-hero — wurde von keiner Seite genutzt, tote CSS.) */

/* Article body typography */
.tm-single-content h2 {
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 48px;
  margin-bottom: 16px;
  line-height: 1.3;
}

.tm-single-content h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 36px;
  margin-bottom: 12px;
}

.tm-single-content p {
  margin-bottom: 20px;
}

.tm-single-content ul,
.tm-single-content ol {
  padding-left: 24px;
  margin-bottom: 24px;
}

.tm-single-content ul li,
.tm-single-content ol li {
  margin-bottom: 8px;
  line-height: 1.75;
  color: var(--text-mid);
}

.tm-single-content ul li::marker {
  color: var(--sage);
}

.tm-single-content strong {
  font-weight: 500;
  color: var(--text);
}

/* Related posts grid at the end of a single post */
.tm-single-related .elementor-heading-title {
  color: var(--petrol-deep);
}
/* .tm-related-grid: verwandte Beiträge sind ein natives Loop-Grid (Spalten/Gap in Elementor). */

/* ═══════════════════════════════════════
   ZELLGESUNDHEIT (Zinzino) – product cards & steps
   ═══════════════════════════════════════ */
/* Product grid + steps: NATIVE grid container (Spalten/Gap/Ausrichtung in Elementor).
   Hier nur noch Karten-Optik, Bild-Zuschnitt, CTA-unten und Show-more (Elementor-Grenzen). */

.tm-zin-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  box-shadow: 0 1px 2px rgba(45, 52, 38, 0.03), 0 4px 16px rgba(45, 52, 38, 0.04);
}
.tm-zin-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(45, 52, 38, 0.05), 0 10px 28px rgba(45, 52, 38, 0.07);
}
/* Product image: 4:3 crop, uniform across cards.
   NOTE: Elementor applies css_classes only to CONTAINERS, not widgets — so we
   target the image/text widgets structurally (via the body container class). */
.tm-zin-card > .elementor-widget-image {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #ffffff;
}
.tm-zin-card > .elementor-widget-image .elementor-widget-container,
.tm-zin-card > .elementor-widget-image figure,
.tm-zin-card > .elementor-widget-image a {
  height: 100%;
}
.tm-zin-card > .elementor-widget-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Card "Mehr erfahren" link */
.tm-zin-card__link {
  display: inline-block;
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--petrol-dark);
  transition: color var(--transition-base);
}
.tm-zin-card:hover .tm-zin-card__link {
  color: var(--terracotta);
}

/* Equal-height cards: "Mehr erfahren" link pinned to the bottom of every card.
   The body container HAS its class (tm-zin-card__body); its last text-editor
   widget is the "Mehr erfahren" link — push that to the bottom.
   (Karten-Stretch macht jetzt das native Grid via "Align Items: Stretch".) */
.tm-zin-card__body.e-con { flex: 1 1 auto !important; }
.tm-zin-card__body > .elementor-widget-text-editor:last-child {
  margin-top: auto !important;
  padding-top: 16px;
}

/* Hidden extra products (revealed by the "Mehr anzeigen" toggle) */
.tm-zin-card--more { display: none !important; }
.tm-zin-grid--expanded .tm-zin-card--more { display: flex !important; }

/* In the Elementor editor, always show the hidden cards so they can be edited.
   (The editor preview body has the .elementor-editor-active class.) */
.elementor-editor-active .tm-zin-card--more { display: flex !important; }


/* ═══════════════════════════════════════
   BLOG OVERVIEW – Posts widget (bigger, readable)
   ═══════════════════════════════════════ */
.tm-blog-overview .elementor-post,
.elementor-widget-posts .elementor-post {
  margin-bottom: 8px;
}

/* Post title — larger, Fraunces serif */
.elementor-widget-posts .elementor-post__title {
  font-family: var(--font-heading);
  font-size: 1.6rem !important;
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: 12px;
}
.elementor-widget-posts .elementor-post__title a {
  color: var(--petrol-deep);
  transition: color var(--transition-base);
}
.elementor-widget-posts .elementor-post__title a:hover {
  color: var(--terracotta);
}

/* Excerpt — larger, comfortable line-height */
.elementor-widget-posts .elementor-post__excerpt p {
  font-size: 1.05rem !important;
  line-height: 1.7;
  color: var(--text-mid);
  font-weight: 400;
}

/* Meta (date / category) */
.elementor-widget-posts .elementor-post__meta-data {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text-light);
  margin-bottom: 12px;
}

/* Read more link */
.elementor-widget-posts .elementor-post__read-more {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--petrol-dark);
}
.elementor-widget-posts .elementor-post__read-more:hover {
  color: var(--terracotta);
}

/* Featured image: natural 4:3 ratio, consistent with teasers */
.elementor-widget-posts .elementor-post__thumbnail {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.elementor-widget-posts .elementor-post__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-single-content a {
  color: var(--sage);
  text-decoration: underline;
  text-decoration-color: var(--sage-pale);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s;
}

.tm-single-content a:hover {
  text-decoration-color: var(--sage);
}

.tm-single-content em {
  font-style: italic;
  color: var(--text-mid);
}

.tm-single-content blockquote {
  border-left: 3px solid var(--sage);
  padding: 16px 28px;
  margin: 32px 0;
  background: var(--beige);
  border-radius: 0 6px 6px 0;
}

.tm-single-content blockquote p {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text);
  margin-bottom: 0;
}

/* ═══════════════════════════════════════
   RESPONSIVE – Tablet (≤ 1024px)
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Hide desktop nav, show hamburger */
  .tm-nav-links {
    display: none !important;
  }

  .tm-hamburger {
    display: flex !important;
  }

  .tm-mobile-menu {
    display: flex;
  }

  /* Hide CTA button in nav on tablet (it's in mobile menu) */
  .tm-fixed-nav .elementor-widget-button {
    display: none !important;
  }

  /* Nav: reduce padding */
  .tm-fixed-nav.e-con {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Stack two-column sections */
  .tm-ueber.e-con,
  .tm-boeger.e-con,
  .tm-buchung.e-con {
    flex-direction: column !important;
  }

  /* Hero: content container flexible width */
  .tm-hero > .e-con:first-of-type {
    padding-left: 40px !important;
    padding-right: 40px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hero on tablet: layout handled natively by Elementor (width settings).
     No CSS overrides for the split-layout hero. */

  /* Subpage hero: wider gradient on tablet */
  .tm-subpage-hero::before {
    background: linear-gradient(to right,
      var(--cream) 0%, var(--cream) 10%,
      rgba(248, 244, 237, 0.92) 30%,
      rgba(248, 244, 237, 0.6) 50%,
      rgba(248, 244, 237, 0.2) 70%,
      transparent 100%) !important;
  }

  /* Steps/Signs/Values/Qual: Raster + Responsive jetzt nativ (Elementor). */

  /* Method names: full width on tablet */
  .tm-methode {
    flex-direction: column;
    gap: 4px;
  }
  .tm-methode-name {
    min-width: 0;
  }

  /* Dark section: stack columns */
  .tm-dark-section.e-con {
    flex-direction: column !important;
  }

}

/* ═══════════════════════════════════════
   RESPONSIVE – Mobile (≤ 767px)
   ═══════════════════════════════════════ */
@media (max-width: 767px) {
  /* Hero on mobile: layout handled natively by Elementor (flex_direction_mobile: column).
     No CSS overrides needed for the split-layout hero. */

  /* Nav: tighter padding */
  .tm-fixed-nav.e-con {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Subpage hero: tighter padding */
  .tm-subpage-hero .e-con {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Subpage hero: dark, dezent overlay on mobile so the image stays visible */
  .tm-subpage-hero::before {
    /* Oben verstaerkt (war 0.25): der Kontakt-Header ist deutlich heller als die
       uebrigen, dort fiel der Brotkruemel-Text auf Kontrast 2.8 statt 4.5. */
    background: linear-gradient(to bottom,
      rgba(30, 27, 25, 0.45) 0%,
      rgba(30, 27, 25, 0.60) 65%,
      rgba(30, 27, 25, 0.80) 100%) !important;
  }

  /* White text on mobile hero for contrast against dark overlay */
  .tm-subpage-hero .elementor-heading-title {
    color: #ffffff !important;
  }

  .tm-subpage-hero .elementor-heading-title em {
    color: inherit !important;
  }

  .tm-subpage-hero p,
  .tm-subpage-hero .elementor-widget-text-editor p {
    color: rgba(255, 255, 255, 0.92) !important;
  }

  .tm-subpage-hero .tm-breadcrumb,
  .tm-subpage-hero .tm-breadcrumb a,
  .tm-subpage-hero .tm-breadcrumb span {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .tm-subpage-hero .tm-breadcrumb a:hover {
    color: #ffffff !important;
  }


  /* Footer bottom bar: stack */
  .tm-footer-section [data-id="tmft000j8"] > .e-con-inner {
    flex-direction: column !important;
    text-align: center;
    gap: 12px;
  }

  /* Section padding handled natively via Elementor padding_mobile settings */

  /* Über mich: stack and show image above text */
  .tm-ueber > .e-con:first-child {
    min-height: 300px !important;
  }

  /* Tarife: single column */
  .tm-tarife-grid.e-con {
    flex-direction: column !important;
  }

  .tm-tarife-grid > .e-con.e-child {
    min-width: 100% !important;
  }
}

/* Tarifkarten: Preis und Dauer auf gleicher Hoehe.
   "Faszien- & Narbentherapie" bricht zweizeilig, "Medizinische Massage" nicht —
   ohne reservierte Hoehe sassen Preis und Dauer der zweiten Karte 44px hoeher.
   Nur wo die Karten nebeneinander stehen; gestapelt waere die Luecke unnoetig. */
@media (min-width: 768px) {
  .tm-tarif-card .tm-tarif-name,
  .tm-subpage-tarif .tm-tarif-name {
    line-height: 1.7;
    min-height: 3.4em;   /* exakt zwei Zeilen */
  }
}