/*
 * HM-i Elements — Frontend CSS
 * ----------------------------
 * Styles for the 11 custom WPBakery elements registered by HMi_Plugin.
 * Plus: Design Tokens (:root) und generische Dekorations-Klassen (.hmi-*),
 * die seit Refactor 2026-04-18 nicht mehr im Child-Theme liegen, sondern
 * hier zentral, damit das Plugin autark ist.
 *
 * All selectors are scoped to `.hmi-*` to avoid collisions with Impreza defaults.
 */

/* ============================================================================
   HMi Design Tokens (Single Source of Truth)
   ============================================================================
   Diese Token bauen auf Impreza's Theme Options auf. Theme Options setzt die
   Haupt-Farben + Typografie global; dieses CSS liefert die HMi-Dekorations-
   Token, die in Impreza-UI nicht direkt einstellbar sind.
   ============================================================================ */
:root {
  --hmi-teal-50:  #eefbfb;
  --hmi-teal-100: #d5f4f5;
  --hmi-teal-200: #afe9ec;
  --hmi-teal-300: #78d7dd;
  --hmi-teal-400: #3abcc6;
  --hmi-teal-500: #007078;
  --hmi-teal-600: #005a60;
  --hmi-teal-700: #004a4f;
  --hmi-teal-800: #003c40;
  --hmi-teal-900: #002528;

  --hmi-violet-50:  #f3f1f9;
  --hmi-violet-500: #4C3E80;
  --hmi-violet-600: #3f3369;

  --hmi-navy-500: #0274be;
  --hmi-navy-600: #0260a0;

  --hmi-cool-50:  #F5F5F8;
  --hmi-cool-100: #EBEBF0;

  --hmi-sand-50:  #FDFCFA;
  --hmi-sand-100: #FAF7F2;
  --hmi-sand-200: #F3EDE3;
  --hmi-sand-300: #E0D5C8;

  --hmi-ink:       #1B2029;
  --hmi-ink-light: #4A5568;

  /* Elevation Scale */
  --hmi-shadow-sm:      0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --hmi-shadow-md:      0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --hmi-shadow-lg:      0 8px 30px rgba(0,112,120,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --hmi-shadow-premium: 0 20px 50px rgba(76,62,128,0.18), 0 8px 20px rgba(0,0,0,0.08);

  /* Heading Size-Scale — global ueberschreibbar via Child-Theme-CSS oder
     Theme Options > Additional CSS. Format: Mobile / Desktop (ab 768px). */
  --hmi-heading-hero-mobile:       2.25rem;   /* 36px */
  --hmi-heading-hero-desktop:      3.75rem;   /* 60px */
  --hmi-heading-section-lg-mobile: 1.875rem;  /* 30px */
  --hmi-heading-section-lg-desktop:2.25rem;   /* 36px */
  --hmi-heading-section-md-mobile: 1.5rem;    /* 24px */
  --hmi-heading-section-md-desktop:1.875rem;  /* 30px */
  --hmi-heading-section-sm-mobile: 1.25rem;   /* 20px */
  --hmi-heading-section-sm-desktop:1.5rem;    /* 24px */
  --hmi-heading-card-size:         1.125rem;  /* 18px */
  --hmi-heading-eyebrow-size:      0.75rem;   /* 12px */
}

/* ============================================================================
   Generische Dekorations-Klassen (wiederverwendbar in Custom-Elements + Seiten)
   ============================================================================ */

/* Card Top-Stripe (Teal-Gradient oben auf Cards) */
.hmi-card-stripe {
  position: relative;
  overflow: hidden;
}
.hmi-card-stripe::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--hmi-teal-400), var(--hmi-teal-500), var(--hmi-teal-600));
  z-index: 2;
}
.hmi-card-stripe-violet::before {
  background: linear-gradient(to right, var(--hmi-violet-500), var(--hmi-violet-600));
}

/* Dot-Pattern-Background */
.hmi-dots {
  background-image: radial-gradient(circle, rgba(0,112,120,0.12) 1px, transparent 1px);
  background-size: 20px 20px;
}
.hmi-dots-violet {
  background-image: radial-gradient(circle, rgba(76,62,128,0.12) 1px, transparent 1px);
  background-size: 20px 20px;
}
.hmi-dots-masked {
  mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
}

/* Card Hover Lift */
.hmi-card-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hmi-card-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--hmi-shadow-lg);
}

/* Icon Container mit Rotation-Effekt */
.hmi-icon-rotate {
  position: relative;
  display: inline-flex;
  width: 72px;
  height: 72px;
}
.hmi-icon-rotate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,112,120,0.10);
  border-radius: 16px;
  transform: rotate(6deg);
  transition: transform 0.3s ease;
}
.hmi-icon-rotate:hover::before,
.hmi-card-lift:hover .hmi-icon-rotate::before {
  transform: rotate(12deg);
}
.hmi-icon-rotate > svg,
.hmi-icon-rotate > i {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--hmi-teal-50), var(--hmi-teal-100));
  border: 1px solid rgba(175,233,236,0.5);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hmi-teal-600);
}

/* Premium Glow (für besondere CTAs) */
.hmi-glow-premium {
  position: relative;
}
.hmi-glow-premium::after {
  content: "";
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse, rgba(76,62,128,0.20), transparent 70%);
  z-index: -1;
  filter: blur(30px);
}

/* Coaching-Moderationskarte: Border-Left Akzent */
.hmi-moderation-step {
  position: relative;
  padding-left: 1.5rem;
  border-left: 4px solid var(--hmi-teal-500);
  background: var(--hmi-cool-50);
  border-radius: 0 1rem 1rem 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
}

/* Dashed Connector (Process Steps) */
.hmi-step-connector {
  border-left: 2px dashed #e5e7eb;
  margin-left: 1rem;
  height: 0.75rem;
}

/* Client Logo Bar Marquee */
.hmi-logo-marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
}
.hmi-logo-marquee-row {
  display: flex;
  gap: 2rem;
  animation: hmi-marquee-scroll 40s linear infinite;
  will-change: transform;
}
@keyframes hmi-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hmi-logo-marquee-row {
    animation: none;
  }
}

/* Focus-Visible Fallback (A11y) */
.hmi-focus-ring:focus-visible {
  outline: 2px solid var(--hmi-teal-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================================
   Shared — Container, Eyebrow, Headline, Intro, Backgrounds, Buttons
   ============================================================================ */
.hmi-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}
.hmi-bg-white { background-color: #fff; }
.hmi-bg-cool-50 { background-color: var(--hmi-cool-50); }
.hmi-bg-sand-50 { background-color: var(--hmi-sand-50); }
/* Transparent — Komponente erhaelt keine eigene Flaechenfarbe, der
   darueberliegende Container (Bakery-Row o.ae.) scheint durch. */
.hmi-bg-transparent { background-color: transparent; }

.hmi-eyebrow {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--hmi-teal-500);
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.hmi-section-headline {
  text-align: center;
  margin: 0 0 1rem;
  color: var(--hmi-ink);
}
.hmi-section-intro {
  text-align: center;
  color: var(--hmi-ink-light);
  max-width: 640px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.hmi-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
  border: none;
}
.hmi-btn-primary {
  background-color: var(--hmi-violet-500);
  color: #fff;
  box-shadow: 0 10px 20px rgba(76, 62, 128, 0.25);
}
.hmi-btn-primary:hover {
  background-color: var(--hmi-violet-600);
  transform: translateY(-2px);
  box-shadow: 0 15px 25px rgba(76, 62, 128, 0.35);
}
.hmi-btn-secondary-outline {
  background-color: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.hmi-btn-secondary-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.hmi-btn-block { width: 100%; justify-content: center; }
.hmi-bullet-check { color: var(--hmi-teal-500); font-weight: 700; }

/* Card primitives (used in multiple elements) */
.hmi-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--hmi-shadow-sm);
  overflow: hidden;
}
.hmi-card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hmi-card-lift:hover { transform: translateY(-8px); box-shadow: var(--hmi-shadow-lg); }
.hmi-card-stripe::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--hmi-teal-400), var(--hmi-teal-500), var(--hmi-teal-600));
}
.hmi-icon-rotate {
  display: inline-flex;
  width: 64px; height: 64px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--hmi-teal-50), var(--hmi-teal-100));
  border: 1px solid rgba(175, 233, 236, 0.5);
  border-radius: 16px;
  transform: rotate(-3deg);
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.hmi-card-lift:hover .hmi-icon-rotate { transform: rotate(3deg); }

.hmi-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}
.hmi-badge-teal { background: var(--hmi-teal-50); color: var(--hmi-teal-600); }

/* ============================================================================
   Geteilte Section-Padding-Utilities (Helper hmi_section_padding_params)
   ============================================================================
   Werden von Komponenten-Root-Containern genutzt, damit Redakteure im Admin
   den oberen/unteren Section-Abstand steuern koennen, statt an hardcoded
   padding-Regeln festzuhaengen. Responsive: Desktop-Werte groesser als Mobile.
   ============================================================================ */
.hmi-section-pt-none { padding-top: 0; }
.hmi-section-pt-sm   { padding-top: 32px; }
.hmi-section-pt-md   { padding-top: 48px; }
.hmi-section-pt-lg   { padding-top: 64px; }
.hmi-section-pt-xl   { padding-top: 80px; }

.hmi-section-pb-none { padding-bottom: 0; }
.hmi-section-pb-sm   { padding-bottom: 32px; }
.hmi-section-pb-md   { padding-bottom: 48px; }
.hmi-section-pb-lg   { padding-bottom: 64px; }
.hmi-section-pb-xl   { padding-bottom: 96px; }

@media (min-width: 768px) {
  .hmi-section-pt-md { padding-top: 56px; }
  .hmi-section-pt-lg { padding-top: 80px; }
  .hmi-section-pt-xl { padding-top: 112px; }
  .hmi-section-pb-md { padding-bottom: 56px; }
  .hmi-section-pb-lg { padding-bottom: 80px; }
  .hmi-section-pb-xl { padding-bottom: 112px; }
}

/* ============================================================================
   1) Pain-Point Cards
   ============================================================================ */
/* Hardcoded padding entfernt — nutzt jetzt .hmi-section-pt-* / -pb-*-Utilities
   (siehe hmi_section_padding_params/-_classes in hmi-elements.php). */

/* Content-Width-Varianten — begrenzen den inneren .hmi-container, die Section
   selbst bleibt full-width (Hintergrundfarbe, Gradient, Overlay gehen bis zum
   Viewport-Rand). So kann das Element als Top-Level eingefuegt werden und das
   Prototyp-Layout wird trotzdem eingehalten. */
.hmi-pain-cards-width-standard .hmi-pain-cards__inner { max-width: 1280px; }
.hmi-pain-cards-width-compact  .hmi-pain-cards__inner { max-width: 1080px; }
.hmi-pain-cards-width-narrow   .hmi-pain-cards__inner { max-width: 860px; }
.hmi-pain-cards-width-wide     .hmi-pain-cards__inner { max-width: 1440px; }
.hmi-pain-cards-width-full     .hmi-pain-cards__inner { max-width: none; padding-left: 1.25rem; padding-right: 1.25rem; }
/* Wenn kein Intro-Text gesetzt ist, folgt das Grid direkt auf den Heading-
   Block. Dann sorgt dieser Selektor fuer einen kleinen Mindestabstand, damit
   die Cards nicht an der Headline kleben. Bei vorhandenem Intro greift die
   Regel NICHT — der Intro-Paragraph bringt bereits 2.5rem margin-bottom mit. */
.hmi-pain-cards__inner > .hmi-heading-block + .hmi-pain-grid {
  margin-top: 1.5rem;
}

.hmi-pain-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
.hmi-pain-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hmi-pain-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hmi-pain-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.hmi-pain-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Pain-Cards erbt jetzt das flex-column + margin-top:auto-Verhalten aus der
   globalen .hmi-card-Regel (weiter oben definiert). Keine extra Regel mehr. */
@media (max-width: 1180px) {
  .hmi-pain-grid-cols-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .hmi-pain-grid-cols-3, .hmi-pain-grid-cols-4, .hmi-pain-grid-cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hmi-pain-grid { grid-template-columns: 1fr !important; }
}
.hmi-card-title { margin: 0 0 0.75rem; color: var(--hmi-ink); line-height: 1.3; font-weight: 700; }
/* Card-Title-Groesse — wirkt auf jedes Tag (h2-h6) gleich und ueberschreibt
   Theme-Defaults der Heading-Tags. Die Klasse 'card' ist der Default-Stand
   (= 18px vor dem Refactor); daneben 2 kleinere + 2 groessere Stufen. */
.hmi-card-title-size-section-md { font-size: clamp(20px, 1vw + 18px, 26px); }
.hmi-card-title-size-section-sm { font-size: clamp(18px, 0.6vw + 16px, 22px); }
.hmi-card-title-size-card       { font-size: 1.125rem; }  /* 18px, Default */
.hmi-card-title-size-card-sm    { font-size: 1rem; }      /* 16px */
.hmi-card-title-size-card-xs    { font-size: 0.9375rem; } /* 15px — fuer sehr lange Titel */
.hmi-card-text { margin: 0 0 1rem; color: var(--hmi-ink-light); line-height: 1.6; }
.hmi-card-cta {
  display: inline-flex; align-items: center; gap: 0.25rem;
  color: var(--hmi-teal-500); font-weight: 600; text-decoration: none;
}
.hmi-card-cta:hover { color: var(--hmi-teal-700); }

/* ============================================================================
   2) 3-Schritt-Prozess
   ============================================================================ */
.hmi-three-step { padding: 64px 0 80px; }
.hmi-three-step-grid {
  display: grid;
  gap: 24px;
}
/* Wenn kein Intro-Text gesetzt ist, klebt der Heading zu eng an den Cards.
   Etwas mehr vertikaler Abstand fuer ausgewogene Section-Ratio. */
.hmi-three-step-grid--no-intro {
  margin-top: 1.5rem;
}
.hmi-three-step-grid-cols-1 { grid-template-columns: 1fr; }
.hmi-three-step-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hmi-three-step-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hmi-three-step-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Optionaler CTA unter den Schritt-Cards (Pattern aus dem Selbsttest-Prototyp).
   Flex-Layout, weil der Button-Atom als inline-flex/flex rendert und text-align
   in dem Fall nicht greift. justify-content folgt dem card_content_align-Setting. */
.hmi-three-step-cta {
  display: flex;
  margin-top: 2.5rem;
}
.hmi-three-step-cta--align-left   { justify-content: flex-start; }
.hmi-three-step-cta--align-center { justify-content: center; }
.hmi-three-step-cta--align-right  { justify-content: flex-end; }

/* Responsive Fallback */
@media (max-width: 1100px) {
  .hmi-three-step-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px)  {
  .hmi-three-step-grid-cols-2,
  .hmi-three-step-grid-cols-3,
  .hmi-three-step-grid-cols-4 { grid-template-columns: 1fr; }
}
.hmi-step-number {
  width: 48px; height: 48px;
  background: var(--hmi-teal-500); color: #fff;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 700;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0, 112, 120, 0.25);
}
.hmi-step-title { margin: 0 0 0.5rem; color: var(--hmi-ink); }
.hmi-step-text { margin: 0 0 1rem; color: var(--hmi-ink-light); line-height: 1.6; }
.hmi-step-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.hmi-step-bullets li { display: flex; gap: 0.5rem; color: var(--hmi-ink-light); font-size: 14px; }

/* ============================================================================
   3) Testimonials
   ============================================================================ */
.hmi-testimonials { padding: 64px 0 80px; }
.hmi-testimonials-grid {
  display: grid;
  gap: 24px;
  align-items: stretch; /* gleiche Hoehe aller Cards in der Reihe */
}
.hmi-testimonials-cols-1 { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
.hmi-testimonials-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hmi-testimonials-cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .hmi-testimonials-cols-3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .hmi-testimonials-cols-2 { grid-template-columns: 1fr; } }

/* Post-Testimonial-CTA-Block: zentrierter Button + optionale Caption. */
.hmi-testimonials-cta {
  margin-top: 2.5rem;
  text-align: center;
}
.hmi-testimonials-cta-caption {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-testimonials-cta-caption a {
  color: var(--hmi-teal-500, #007078);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.hmi-testimonials-cta-caption a:hover,
.hmi-testimonials-cta-caption a:focus {
  color: var(--hmi-violet-500, #7c3aed);
}

/* Article strecken, damit die eingebettete Quote-Figure die volle Hoehe nimmt
   und der Footer (Avatar + Name/Rolle) immer unten buendig sitzt. */
.hmi-testimonial {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hmi-testimonial > .hmi-quote {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.hmi-testimonial-stars { color: #FDC700; font-size: 18px; margin-bottom: 1rem; }
.hmi-testimonial-quote {
  margin: 0 0 1.5rem; color: var(--hmi-ink-light);
  font-style: italic; font-size: 16px; line-height: 1.6; border: none; padding: 0;
}
.hmi-testimonial-author { display: flex; align-items: center; gap: 1rem; }
.hmi-testimonial-avatar-wrap .hmi-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--hmi-teal-100);
}
.hmi-testimonial-meta { display: flex; flex-direction: column; }
.hmi-testimonial-name { color: var(--hmi-ink); font-size: 15px; }
.hmi-testimonial-role { color: var(--hmi-ink-light); font-size: 13px; }

/* ============================================================================
   4) CTA Banner Dark
   ============================================================================ */
.hmi-cta-banner { padding: 80px 0; position: relative; overflow: hidden; color: #fff; }
.hmi-cta-bg-dark-teal { background: var(--hmi-teal-900); }
.hmi-cta-bg-gradient-deep-teal {
  background: linear-gradient(135deg, var(--hmi-teal-900) 0%, var(--hmi-teal-800) 50%, var(--hmi-teal-900) 100%);
}
.hmi-cta-bg-gradient-teal-navy {
  background: linear-gradient(135deg, var(--hmi-teal-900), #001e3a);
}
.hmi-cta-bg-gradient-teal-violet {
  background: linear-gradient(135deg, var(--hmi-teal-900) 0%, var(--hmi-violet-500) 100%);
}
.hmi-cta-bg-violet { background: var(--hmi-violet-500); }
.hmi-cta-bg-ink { background: #0b1a1d; }
.hmi-cta-inner { text-align: center; }
.hmi-cta-banner .hmi-cta-eyebrow {
  display: block;
  margin: 0 0 1.5rem;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(94, 234, 212, 0.8);
  line-height: 1.2;
}
.hmi-cta-banner.hmi-cta-bg-violet .hmi-cta-eyebrow { color: rgba(255, 255, 255, 0.75); }
.hmi-cta-banner .hmi-cta-headline {
  margin: 0 0 1rem !important;
  padding-top: 0 !important;
  color: #fff;
  font-size: 2rem;
}
.hmi-cta-subtext {
  margin: 0 auto 2rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  max-width: 576px;
  line-height: 1.6;
}
.hmi-cta-buttons {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: center; justify-content: center;
}
.hmi-cta-contact-strip {
  margin-top: 1.25rem;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem; font-size: 14px; color: rgba(255, 255, 255, 0.4);
}
.hmi-cta-strip-sep { color: rgba(255, 255, 255, 0.2); }

/* ============================================================================
   5) Stat-Bar
   ============================================================================ */
.hmi-stat-bar-wrap { padding: 40px 0; }
.hmi-stat-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 3rem;
  padding: 24px 32px;
  border-radius: 16px;
}
/* Stat-Items teilen sich gleichmaessig die verfuegbare Breite (1/n bei n
   Stats). Durch flex-basis:0 + flex-grow:1 nimmt jedes Item genau seinen
   Anteil, statt nur seiner natuerlichen Textbreite. min-width:0 erlaubt
   Zeilenumbruch der Labels innerhalb des Items. */
.hmi-stat-item {
  text-align: center;
  flex: 1 1 0;
  min-width: 0;
}
.hmi-stat-value {
  display: block;
  font-size: 2.25rem; font-weight: 700;
  color: var(--hmi-teal-500);
  line-height: 1;
}
.hmi-stat-label {
  display: block; font-size: 14px;
  /* !important erzwingt regular gegen Impreza-Theme-Default, das auf
     bestimmte <span>-Selektoren 600 anwendet. */
  font-weight: 400 !important;
  color: var(--hmi-ink-light); margin-top: 0.5rem;
}
.hmi-stat-divider {
  width: 1px; height: 40px; background: #e5e7eb;
}

/* Spalten-Layouts: Auto-Verhalten ergibt sich durch flex-wrap + gap.
   2x2-Variante erzwingt Grid-Raster mit zwei Zeilen aus je zwei Stats. */
.hmi-stat-bar-cols-2x2 .hmi-stat-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  max-width: 36rem;
  margin: 0 auto;
}
.hmi-stat-bar-cols-2x2 .hmi-stat-divider { display: none; }

.hmi-stat-bar-cols-1 .hmi-stat-bar { flex-direction: column; }
.hmi-stat-bar-cols-1 .hmi-stat-divider { width: 60px; height: 1px; }

/* Trenn-Linien ausblenden, wenn Redakteur sie deaktiviert hat. */
.hmi-stat-bar-no-dividers .hmi-stat-divider { display: none; }

@media (max-width: 700px) {
  .hmi-stat-bar { flex-direction: column; }
  .hmi-stat-divider { width: 60px; height: 1px; }
  .hmi-stat-bar-cols-2x2 .hmi-stat-bar { grid-template-columns: 1fr; }
}

/* ============================================================================
   6) Contact Person Card
   ============================================================================ */
.hmi-contact-person {
  padding: 24px;
  border-radius: 16px;
  box-shadow: var(--hmi-shadow-sm);
}
.hmi-contact-person-inner { text-align: center; }
/* Zentriert sowohl den runden Einzel-Avatar als auch den (inline-flex)
   Avatar-Stack zuverlaessig. */
.hmi-contact-person-avatar-wrap { display: flex; justify-content: center; }
.hmi-contact-person-avatar {
  width: 112px; height: 112px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--hmi-teal-100);
  margin-inline: auto;
}
.hmi-contact-person-intro {
  font-weight: 600; color: var(--hmi-ink); margin: 1rem 0 0.25rem;
}
.hmi-contact-person-name { font-weight: 700; color: var(--hmi-ink); margin: 0 0 0.25rem; }
.hmi-contact-person-role { font-size: 14px; color: var(--hmi-ink-light); margin: 0 0 0.75rem; }
.hmi-contact-person-badges {
  list-style: none; padding: 0; margin: 0.75rem 0;
  display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
}
.hmi-contact-person-trust {
  font-size: 12px; color: var(--hmi-ink-light); margin: 0.75rem 0 0;
}

/* ============================================================================
   7) Timeline
   ============================================================================ */
.hmi-timeline-section { padding: 64px 0 80px; }
.hmi-timeline-grid {
  display: grid; gap: 60px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .hmi-timeline-grid { grid-template-columns: 1fr; } }
.hmi-timeline-intro { position: sticky; top: 96px; align-self: start; }
.hmi-timeline-intro-text {
  color: var(--hmi-ink-light); line-height: 1.6; margin-bottom: 1.5rem;
}
.hmi-timeline-accent {
  display: block; width: 80px; height: 4px;
  background: linear-gradient(to right, var(--hmi-teal-400), var(--hmi-teal-500), var(--hmi-teal-600));
  border-radius: 2px;
}
.hmi-timeline-list {
  list-style: none; padding: 0 0 0 32px;
  margin: 0; position: relative;
}
.hmi-timeline-list::before {
  /* Linie zieht sich bewusst ~32px ueber den letzten Meilenstein-Punkt hinaus
     und blendet dort sanft aus — mask-image fadet die letzten 30% zu transparent. */
  content: ""; position: absolute;
  top: 12px; bottom: -32px; left: 10px; width: 2px;
  background: linear-gradient(to bottom, var(--hmi-teal-400), var(--hmi-teal-200), var(--hmi-teal-100));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 70%, rgba(0,0,0,0) 100%);
}
.hmi-timeline-item { position: relative; margin-bottom: 40px; }
.hmi-timeline-item:last-child { margin-bottom: 0; }
.hmi-timeline-dot {
  position: absolute; left: -32px; top: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--hmi-sand-50); border: 2px solid var(--hmi-teal-500);
}
.hmi-timeline-year {
  font-size: 11px; font-weight: 700;
  color: var(--hmi-teal-500); text-transform: uppercase;
  letter-spacing: 1px; margin: 0 0 0.25rem;
}
.hmi-timeline-title { margin: 0 0 0.25rem; color: var(--hmi-ink); font-size: 16px; }
.hmi-timeline-text { margin: 0; color: var(--hmi-ink-light); font-size: 14px; line-height: 1.6; }

/* ============================================================================
   8) Curriculum Modules (Redesign 2026-04-20)
   ============================================================================ */
.hmi-curriculum { padding: 80px 0 96px; }

/* Generische Grid-Cols (legacy, wird aktuell von keiner Komponente genutzt) */
.hmi-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hmi-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hmi-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .hmi-grid-cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) {
  .hmi-grid-cols-3, .hmi-grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .hmi-grid-cols-2, .hmi-grid-cols-3, .hmi-grid-cols-4 { grid-template-columns: 1fr; }
}

/* Intro-Block (Eyebrow + Headline + Sub) */
.hmi-curriculum-intro { margin-bottom: 3rem; }
.hmi-curriculum-intro-sub {
  margin: 0.75rem auto 0;
  max-width: 560px;
  text-align: center;
  color: var(--hmi-ink-light);
  font-size: 16px;
  line-height: 1.6;
}

/* Gruppen (Teil 1 / Teil 2) */
.hmi-curriculum-group + .hmi-curriculum-group { margin-top: 2.5rem; }
.hmi-curriculum-group-header {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.hmi-curriculum-group-meta {
  font-size: 14px;
  color: var(--hmi-ink-light);
}

/* Module-Grid — 2 Spalten auf Desktop, 1 Spalte unter 768px */
.hmi-curriculum-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) {
  .hmi-curriculum-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Module-Card — Basis */
.hmi-curriculum-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hmi-curriculum-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(0, 37, 40, 0.15);
}

/* Card-Stil: Sand (warm, aus Prototyp). Doppel-Klasse-Selektor + !important
   damit generische Theme/Impreza-Styles nicht den Hintergrund überschreiben. */
.hmi-curriculum .hmi-curriculum-card.hmi-curriculum-card-sand {
  background-color: var(--hmi-sand-50) !important;
  border-color: var(--hmi-sand-200);
}
.hmi-curriculum .hmi-curriculum-card.hmi-curriculum-card-sand:hover {
  border-color: var(--hmi-sand-300);
}

/* Card-Stil: Weiß (clean) — reines #FFFFFF, dezente Border. */
.hmi-curriculum .hmi-curriculum-card.hmi-curriculum-card-white {
  background-color: #ffffff !important;
  border-color: #e5e7eb;
}
.hmi-curriculum .hmi-curriculum-card.hmi-curriculum-card-white:hover {
  border-color: #cbd5e1;
}
.hmi-curriculum-card-badge { flex-shrink: 0; }
.hmi-curriculum-card-body { flex: 1 1 auto; min-width: 0; }
.hmi-curriculum-card-title {
  margin: 0 0 0.25rem;
  color: var(--hmi-ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}
.hmi-curriculum-card-meta {
  margin: 0 0 0.5rem;
  color: var(--hmi-ink-light);
  font-size: 12px;
}
.hmi-curriculum-card-desc {
  margin: 0;
  color: var(--hmi-ink-light);
  font-size: 14px;
  line-height: 1.55;
}
/* Block-Inhalte (Absätze, Listen) in der Modul-Beschreibung sauber abständeln. */
.hmi-curriculum-card-desc > :first-child { margin-top: 0; }
.hmi-curriculum-card-desc > :last-child  { margin-bottom: 0; }
.hmi-curriculum-card-desc p  { margin: 0 0 0.5rem; }
.hmi-curriculum-card-desc ul,
.hmi-curriculum-card-desc ol { margin: 0.5rem 0; padding-left: 1.25rem; }
.hmi-curriculum-card-desc li { margin: 0.2rem 0; }

/* Hinweis-Box (Footer pro Gruppe) */
.hmi-curriculum-footer {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  border: 1px solid transparent;
}
.hmi-curriculum-footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 20px;
  line-height: 1;
}
.hmi-curriculum-footer-body { flex: 1 1 auto; min-width: 0; }
.hmi-curriculum-footer-headline {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--hmi-ink);
  line-height: 1.4;
}
.hmi-curriculum-footer-text {
  margin: 0.25rem 0 0;
  font-size: 13px;
  color: var(--hmi-ink-light);
  line-height: 1.5;
}
.hmi-curriculum-footer-text > :first-child { margin-top: 0; }
.hmi-curriculum-footer-text > :last-child  { margin-bottom: 0; }
.hmi-curriculum-footer-text p { margin: 0; }
.hmi-curriculum-footer-text p + p { margin-top: 0.375rem; }
.hmi-curriculum-footer-text ul,
.hmi-curriculum-footer-text ol { margin: 0.375rem 0; padding-left: 1.25rem; }
.hmi-curriculum-footer-text li { margin: 0.15rem 0; }

/* Farbvarianten der Hinweis-Box */
.hmi-curriculum-footer-teal {
  background: rgba(0, 112, 120, 0.05);
  border-color: rgba(0, 112, 120, 0.2);
}
.hmi-curriculum-footer-teal .hmi-curriculum-footer-icon { color: var(--hmi-teal-500); }

.hmi-curriculum-footer-violet {
  background: rgba(76, 62, 128, 0.05);
  border-color: rgba(76, 62, 128, 0.2);
}
.hmi-curriculum-footer-violet .hmi-curriculum-footer-icon { color: var(--hmi-violet-500); }

.hmi-curriculum-footer-ink {
  background: rgba(11, 26, 29, 0.04);
  border-color: rgba(11, 26, 29, 0.12);
}
.hmi-curriculum-footer-ink .hmi-curriculum-footer-icon { color: var(--hmi-ink); }

@media (prefers-reduced-motion: reduce) {
  .hmi-curriculum-card { transition: none; }
  .hmi-curriculum-card:hover { transform: none; }
}

/* ============================================================================
   9) Pricing Cards + Toggle (Refactor 2026-04-27)
   Default-Card = Sand-50 hell, Featured-Card = Teal-900 dunkel mit weißem Text.
   Toggle ist ein Switch (Pill mit Dot) — Labels links und rechts daneben.
   ============================================================================ */

.hmi-pricing { padding: 80px 0 112px; }
.hmi-pricing--bg-cool  { background: var(--hmi-cool-50, #f4f7f9); }
.hmi-pricing--bg-sand  { background: var(--hmi-sand-50, #fbf9f4); }
.hmi-pricing--bg-white { background: #fff; }

.hmi-pricing-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Header --- */
.hmi-pricing-header {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.hmi-pricing-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hmi-teal-500, #007078);
  margin-bottom: 0.75rem;
}
.hmi-pricing-headline {
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--hmi-ink, #002528);
  margin: 0 0 0.75rem;
}
.hmi-pricing-subtext {
  font-size: 1rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
}

/* --- Grid --- */
.hmi-pricing-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 768px;
  margin: 0 auto;
}
.hmi-pricing-cols-1 { grid-template-columns: 1fr; max-width: 480px; }
@media (min-width: 768px) {
  .hmi-pricing-cols-2 { grid-template-columns: 1fr 1fr; max-width: 768px; }
  .hmi-pricing-cols-3 { grid-template-columns: 1fr 1fr 1fr; max-width: 1140px; }
}

/* --- Card (Basis) --- */
.hmi-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 16px;
  border: 2px solid transparent;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover-Varianten: greift auf der Section, wirkt auf alle Cards darin. */
.hmi-pricing-hover-lift .hmi-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.hmi-pricing-hover-lift .hmi-pricing-card--featured-teal:hover {
  /* Featured behaelt seinen Premium-Schatten + bekommt zusaetzlich Lift. */
  box-shadow: 0 16px 40px rgba(0, 112, 120, 0.28), 0 0 0 1px rgba(0, 112, 120, 0.15);
}
.hmi-pricing-hover-lift .hmi-pricing-card--featured-violet:hover {
  box-shadow: 0 16px 40px rgba(76, 62, 128, 0.32), 0 0 0 1px rgba(76, 62, 128, 0.18);
}
.hmi-pricing-hover-glow-teal .hmi-pricing-card:hover {
  box-shadow: 0 8px 30px rgba(0, 112, 120, 0.28), 0 2px 8px rgba(0, 0, 0, 0.05);
}
.hmi-pricing-hover-glow-violet .hmi-pricing-card:hover {
  box-shadow: 0 8px 30px rgba(76, 62, 128, 0.32), 0 2px 8px rgba(0, 0, 0, 0.05);
}
.hmi-pricing-hover-none .hmi-pricing-card { transition: none; }
.hmi-pricing-hover-none .hmi-pricing-card:hover { transform: none; }

/* Default-Card: sand-50 Hintergrund, Sand-200 Border */
.hmi-pricing-card--default {
  background: var(--hmi-sand-50, #fbf9f4);
  border-color: var(--hmi-sand-200, #ede4cf);
}

/* Featured-Card: dunkler Hintergrund mit Premium-Schatten.
   Default-Akzent ist Teal — Violet wird durch zusätzliche Modifier-Klasse
   .hmi-pricing-card--featured-violet aktiviert (Setting "Akzentfarbe"). */
.hmi-pricing-card--featured {
  color: #fff;
}
.hmi-pricing-card--featured-teal {
  background: var(--hmi-teal-900, #002528);
  border-color: var(--hmi-teal-500, #007078);
  box-shadow: 0 8px 30px rgba(0, 112, 120, 0.2), 0 0 0 1px rgba(0, 112, 120, 0.1);
}
.hmi-pricing-card--featured-violet {
  /* Sehr dunkles Violet als Hintergrund (analog teal-900 vs. teal-500). */
  background: #1c1640;
  border-color: var(--hmi-violet-500, #4C3E80);
  box-shadow: 0 8px 30px rgba(76, 62, 128, 0.22), 0 0 0 1px rgba(76, 62, 128, 0.12);
}

/* "Empfohlen"-Badge oben rechts auf Featured. Farbe folgt dem featured-Color. */
.hmi-pricing-card-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--hmi-teal-500, #007078);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.375rem 1rem;
  border-radius: 0 14px 0 12px;
}
.hmi-pricing-card--featured-violet .hmi-pricing-card-badge {
  background: var(--hmi-violet-500, #4C3E80);
}

/* --- Card-Inhalte --- */
.hmi-pricing-card-name {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-pricing-card--featured .hmi-pricing-card-name {
  color: rgba(255, 255, 255, 0.6);
}

.hmi-pricing-card-desc {
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 1rem;
}
.hmi-pricing-card--featured .hmi-pricing-card-desc {
  color: rgba(255, 255, 255, 0.5);
}

/* --- Preis-Block --- */
.hmi-pricing-card-price {
  margin: 0 0 0.25rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.hmi-pricing-value,
.hmi-pricing-currency {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--hmi-ink, #002528);
}
/* Animierter Preis- und Sub-Wechsel: JS setzt kurz .is-animating fuer Fade-Out,
   tauscht dann den Text und entfernt die Klasse. */
.hmi-pricing-value,
.hmi-pricing-card-price-sub {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.hmi-pricing-value.is-animating,
.hmi-pricing-card-price-sub.is-animating {
  opacity: 0;
  transform: translateY(-4px);
}
.hmi-pricing-card--featured .hmi-pricing-value,
.hmi-pricing-card--featured .hmi-pricing-currency {
  color: #fff;
}
.hmi-pricing-netto {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-pricing-card--featured .hmi-pricing-netto {
  color: rgba(255, 255, 255, 0.5);
}

.hmi-pricing-card-price-sub {
  font-size: 0.75rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 1.5rem;
}
.hmi-pricing-card--featured .hmi-pricing-card-price-sub {
  color: rgba(255, 255, 255, 0.4);
}

/* --- Features-Liste --- */
.hmi-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-pricing-card--featured .hmi-pricing-features {
  color: rgba(255, 255, 255, 0.7);
}
.hmi-pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  /* Animation fuer Toggle-abhaengiges Ein-/Ausblenden (max-height + opacity).
     overflow:hidden + max-height liefern den smoothen "Wander"-Effekt. */
  overflow: hidden;
  max-height: 200px;
  opacity: 1;
  transition: opacity 0.25s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}
.hmi-pricing-feature[hidden] {
  /* Override des nativen [hidden]-Default (display:none), weil wir per
     max-height animieren wollen. JS setzt/entfernt das Attribut. */
  display: flex !important;
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
/* Bold-Hervorhebung pro Feature. Auf der Featured-Card weiss + 600. */
.hmi-pricing-feature--bold {
  font-weight: 600;
  color: var(--hmi-ink, #002528);
}
.hmi-pricing-card--featured .hmi-pricing-feature--bold {
  color: #fff;
}
.hmi-pricing-feature-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  color: var(--hmi-teal-500, #007078);
}
.hmi-pricing-card--featured-teal .hmi-pricing-feature-icon {
  color: var(--hmi-teal-300, #5eead4);
}
.hmi-pricing-card--featured-violet .hmi-pricing-feature-icon {
  color: #b7a9e8; /* helles Violet auf dunklem Hintergrund */
}

/* --- CTA --- */
.hmi-pricing-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hmi-pricing-card--default .hmi-pricing-cta {
  border: 2px solid var(--hmi-teal-500, #007078);
  background: transparent;
  color: var(--hmi-teal-600, #005a60);
}
.hmi-pricing-card--default .hmi-pricing-cta:hover {
  background: rgba(0, 112, 120, 0.06);
}
.hmi-pricing-card--featured .hmi-pricing-cta {
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.hmi-pricing-card--featured-teal .hmi-pricing-cta {
  color: var(--hmi-teal-700, #004a4f);
}
.hmi-pricing-card--featured-violet .hmi-pricing-cta {
  color: var(--hmi-violet-500, #4C3E80);
}
.hmi-pricing-card--featured .hmi-pricing-cta:hover {
  background: #f9fafb;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}
.hmi-pricing-cta-arrow {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}
.hmi-pricing-cta:hover .hmi-pricing-cta-arrow {
  transform: translateX(0.25rem);
}

/* --- Switch-Toggle (unter den Cards) --- */
.hmi-pricing-switch-wrap {
  margin-top: 2.5rem;
  text-align: center;
}
.hmi-pricing-switch-helper {
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 1rem;
}
.hmi-pricing-switch-row {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.hmi-pricing-switch-label {
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
  transition: color 0.2s ease, font-weight 0.2s ease;
}
.hmi-pricing-switch-label--active {
  color: var(--hmi-ink, #002528);
  font-weight: 600;
}

.hmi-pricing-switch {
  position: relative;
  width: 56px;
  height: 28px;
  background: var(--hmi-teal-500, #007078);
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}
.hmi-pricing-switch:focus-visible {
  outline: 2px solid var(--hmi-teal-500, #007078);
  outline-offset: 2px;
}
.hmi-pricing-switch-dot {
  position: absolute;
  top: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: left 0.3s ease, right 0.3s ease;
}
/* Default (data-hmi-toggle-active="a"): Dot links */
.hmi-pricing-switch[data-hmi-toggle-active="a"] .hmi-pricing-switch-dot { left: 2px; right: auto; }
/* B aktiv: Dot rechts */
.hmi-pricing-switch[data-hmi-toggle-active="b"] .hmi-pricing-switch-dot { left: auto; right: 2px; }

/* --- Footnote --- */
.hmi-pricing-footnote {
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--hmi-ink-light, #4a5568);
  max-width: 720px;
}
.hmi-pricing-footnote a {
  color: var(--hmi-teal-500, #007078);
}

@media (prefers-reduced-motion: reduce) {
  .hmi-pricing-switch-dot,
  .hmi-pricing-cta,
  .hmi-pricing-cta-arrow,
  .hmi-pricing-card,
  .hmi-pricing-value,
  .hmi-pricing-card-price-sub,
  .hmi-pricing-feature { transition: none; }
  .hmi-pricing-value.is-animating,
  .hmi-pricing-card-price-sub.is-animating { opacity: 1; transform: none; }
  /* Kein Animations-Trick fuer hidden-Features bei reduced-motion — instant. */
  .hmi-pricing-feature[hidden] { display: none !important; }
}

/* ============================================================================
   10) Persona Vertical Tabs (Redesign 2026-04-20)
   ============================================================================ */
.hmi-persona-tabs { padding: 80px 0 112px; }

/* Intro-Block: Headline zentriert, Eyebrow darunter (umgekehrt zur
   Standard-Reihenfolge, Prototyp-Vorgabe). */
.hmi-persona-tabs-intro {
  text-align: center;
  margin: 0 auto 3.5rem;
}
.hmi-persona-tabs-headline {
  margin: 0;
  color: var(--hmi-ink);
  font-size: clamp(1.875rem, 3vw + 1rem, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hmi-persona-tabs-eyebrow {
  display: block;
  margin: 0.75rem auto 0;
  max-width: 560px;
  color: var(--hmi-ink-light);
  font-size: 16px;
  line-height: 1.6;
}

/* Grid: links Tabs, rechts Gallery. Auf Mobile stackt der Inhalt.
   align-items: center auf Desktop, damit das Gallery-Bild vertikal mittig
   zur Tabs-Spalte sitzt (Tabs-Spalte ist idR hoeher als das Bild). */
.hmi-vtabs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .hmi-vtabs-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
  }
}

/* ---------- Linke Spalte: Tabs ---------- */
.hmi-vtabs-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.hmi-vtabs-nav-item {
  border-top: 1px solid #e5e7eb;
}
.hmi-vtabs-nav-item:first-child { border-top: 0; }

.hmi-vtabs-nav-btn {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  padding: 1.5rem 0 1.5rem 1.5rem;
  background: transparent;
  border: 0;
  color: var(--hmi-ink-light);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hmi-vtabs-nav-btn:hover { background-color: rgba(243, 244, 246, 0.5); }

/* Progress-Bar links vom Tab (vertikal, nur auf Desktop sichtbar). */
.hmi-vtabs-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
  overflow: hidden;
  display: none;
}
@media (min-width: 1024px) {
  .hmi-vtabs-progress { display: block; }
}
.hmi-vtabs-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to bottom, var(--hmi-teal-400, #3abcc6), var(--hmi-teal-500));
  transform-origin: top;
}
/* Active-Tab: Progress-Bar fuellt sich auf 100% via Transition. */
.hmi-vtabs-nav-item.is-active .hmi-vtabs-progress-fill { height: 100%; }

/* Numbering (/01 /02 ...) klein links, nur Desktop. */
.hmi-vtabs-number {
  display: none;
  padding-top: 0.5rem;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  opacity: 0.5;
  flex-shrink: 0;
}
@media (min-width: 768px) { .hmi-vtabs-number { display: inline; } }

.hmi-vtabs-btn-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hmi-vtabs-label {
  font-size: clamp(1.25rem, 1.2vw + 1rem, 2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  transition: color 0.4s ease;
  color: inherit;
}

/* Active-Tab: Label voll, Description sichtbar. */
.hmi-vtabs-nav-item.is-active .hmi-vtabs-nav-btn { color: var(--hmi-ink); }
.hmi-vtabs-nav-item.is-active .hmi-vtabs-label    { color: var(--hmi-ink); }

/* Description-Block: standardmaessig collapsed + unsichtbar.
   Aktiver Tab expandiert (grid-template-rows Trick fuer smooth height anim). */
.hmi-vtabs-desc {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows 0.5s ease, opacity 0.4s ease;
  color: var(--hmi-ink-light);
  font-size: 15px;
  line-height: 1.6;
}
.hmi-vtabs-nav-item.is-active .hmi-vtabs-desc {
  grid-template-rows: 1fr;
  opacity: 1;
}
.hmi-vtabs-desc > * { min-height: 0; }
.hmi-vtabs-desc-text {
  display: block;
  padding: 0.25rem 0 0.75rem;
}
.hmi-vtabs-desc-cta { display: block; }

/* ---------- Rechte Spalte: Image-Gallery ---------- */
.hmi-vtabs-gallery {
  position: relative;
}
.hmi-vtabs-gallery-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 2rem;
  overflow: hidden;
  background: var(--hmi-sand-100);
  border: 1px solid rgba(229, 231, 235, 0.5);
}
@media (min-width: 768px) {
  .hmi-vtabs-gallery-frame { border-radius: 2.5rem; }
}
.hmi-vtabs-gallery-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.hmi-vtabs-gallery-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hmi-vtabs-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback-Gradients wenn kein Bild gesetzt ist. */
.hmi-vtabs-gallery-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.hmi-vtabs-gallery-fallback-teal-dark {
  background: linear-gradient(135deg, rgba(0, 60, 64, 0.75), rgba(0, 37, 40, 0.8));
}
.hmi-vtabs-gallery-fallback-teal-navy {
  background: linear-gradient(135deg, rgba(0, 60, 64, 0.75), rgba(0, 30, 58, 0.8));
}
.hmi-vtabs-gallery-fallback-navy-teal {
  background: linear-gradient(135deg, rgba(0, 30, 58, 0.75), rgba(0, 60, 64, 0.75));
}
.hmi-vtabs-gallery-fallback-violet-teal {
  background: linear-gradient(135deg, rgba(76, 62, 128, 0.55), rgba(0, 60, 64, 0.65));
}
.hmi-vtabs-gallery-fallback-violet {
  background: linear-gradient(135deg, rgba(76, 62, 128, 0.65), rgba(76, 62, 128, 0.35));
}

/* Sanfter dunkler Verlauf unten fuer optische Tiefe. */
.hmi-vtabs-gallery-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 33%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.1), transparent);
  opacity: 0.6;
  pointer-events: none;
}

/* Prev/Next-Buttons unten rechts im Gallery-Frame. */
.hmi-vtabs-gallery-nav {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .hmi-vtabs-gallery-nav { right: 2rem; bottom: 2rem; gap: 0.75rem; }
}
.hmi-vtabs-gallery-nav-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hmi-ink);
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}
@media (min-width: 768px) {
  .hmi-vtabs-gallery-nav-btn { width: 48px; height: 48px; }
}
.hmi-vtabs-gallery-nav-btn:hover,
.hmi-vtabs-gallery-nav-btn:focus-visible {
  background-color: #ffffff;
  color: var(--hmi-teal-500);
  box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.2);
}
.hmi-vtabs-gallery-nav-btn:active { transform: scale(0.9); }
.hmi-vtabs-gallery-nav-btn:focus-visible {
  outline: 2px solid var(--hmi-teal-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hmi-vtabs-nav-btn,
  .hmi-vtabs-label,
  .hmi-vtabs-desc,
  .hmi-vtabs-gallery-slide,
  .hmi-vtabs-progress-fill,
  .hmi-vtabs-gallery-nav-btn { transition: none; }
}

/* ============================================================================
   Mobile-Akkordeon-Modus (seit 2026-04-30)
   ----------------------------------------------------------------------------
   Unter 1024px wird das Persona-Tab-System zu einem natuerlichen Akkordeon:
   - Bild-Spalte (Gallery) komplett ausgeblendet — Vertical-Space sparen
   - min-height der Tab-Liste aufgehoben — Card schrumpft zur tatsaechlichen
     Inhaltshoehe des aktiven Tabs (JS skipt stabilizeNavHeight im Mobile-Modus)
   - Auto-Play deaktiviert (im JS) — User entscheidet self-paced
   - Tap-Targets vergroessert, Border deutlicher, Chevron-Cue rechts
   - Aktiver Tab bekommt sanften Cool-50-Hintergrund + Teal-Linie links
   ============================================================================ */
@media (max-width: 1023px) {
  /* Bild-Spalte verstecken */
  .hmi-vtabs-gallery-col { display: none; }

  /* Tab-Spalte: Karten-artiger Look mit deutlichen Borders + Chevron */
  .hmi-vtabs-nav { min-height: 0 !important; }

  .hmi-vtabs-nav-item {
    border-top: 1px solid #e5e7eb;
  }
  .hmi-vtabs-nav-item:last-child {
    border-bottom: 1px solid #e5e7eb;
  }

  .hmi-vtabs-nav-btn {
    padding: 1.25rem 3rem 1.25rem 1.25rem;   /* rechts Platz fuer Chevron */
    align-items: center;
    gap: 0.75rem;
    position: relative;
  }

  /* Chevron-Indikator rechts (nur Mobile sichtbar) */
  .hmi-vtabs-nav-btn::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -8px;
    border-right: 2px solid var(--hmi-ink-light, #4A5568);
    border-bottom: 2px solid var(--hmi-ink-light, #4A5568);
    transform: rotate(45deg);
    transition: transform 0.3s ease, border-color 0.3s ease;
  }
  /* Aktiver Tab: Chevron rotiert nach oben (= „expanded") */
  .hmi-vtabs-nav-item.is-active .hmi-vtabs-nav-btn::after {
    transform: rotate(-135deg);
    margin-top: -2px;
    border-color: var(--hmi-teal-500, #007078);
  }

  /* Aktiver Tab: sanfter Cool-50-Hintergrund + Teal-Akzentlinie links */
  .hmi-vtabs-nav-item.is-active {
    background-color: var(--hmi-cool-50, #f1f9fa);
  }
  .hmi-vtabs-nav-item.is-active .hmi-vtabs-nav-btn {
    box-shadow: inset 3px 0 0 0 var(--hmi-teal-500, #007078);
  }

  /* Description: groesserer Tap-Target-Abstand zur Card-Bottom */
  .hmi-vtabs-desc-text {
    padding: 0.5rem 0 0.25rem;
  }
  .hmi-vtabs-desc-cta {
    padding-bottom: 0.25rem;
  }

  /* Hover-Zustand auf Mobile zurueckhaltender (kein Hover bei Touch) */
  .hmi-vtabs-nav-btn:hover {
    background-color: transparent;
  }
  .hmi-vtabs-nav-item.is-active .hmi-vtabs-nav-btn:hover {
    background-color: transparent;
  }
}

/* ============================================================================
   11) Star Rating
   ============================================================================ */
.hmi-star-rating { line-height: 1; }
.hmi-stars-align-left { text-align: left; }
.hmi-stars-align-center { text-align: center; }
.hmi-stars-align-right { text-align: right; }
.hmi-stars-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hmi-star { display: inline-block; }
.hmi-stars-small .hmi-star { width: 14px; height: 14px; }
.hmi-stars-medium .hmi-star { width: 18px; height: 18px; }
.hmi-stars-large .hmi-star { width: 24px; height: 24px; }
.hmi-stars-label {
  margin-left: 0.5rem;
  font-weight: 600;
  color: var(--hmi-ink);
}
.hmi-stars-small .hmi-stars-label { font-size: 13px; }
.hmi-stars-medium .hmi-stars-label { font-size: 15px; }
.hmi-stars-large .hmi-stars-label { font-size: 18px; }
.hmi-stars-subtext {
  margin: 0.25rem 0 0;
  font-size: 12px;
  color: var(--hmi-ink-light);
}

/* ============================================================================
   HMi Button Atom — neues Stil-System (seit 2026-04-18)
   ============================================================================
   Wird vom [hmi_button]-Shortcode verwendet. Koexistiert mit den Legacy-Klassen
   .hmi-btn-primary (violet) und .hmi-btn-secondary-outline (CTA-Banner),
   die in bestehenden Komponenten weiterleben. Fuer neue Templates + Content
   IMMER das neue Atom-System nutzen.
   Groessen: sm / md / lg / xl. Stile: primary-violet / primary-teal /
   outline-teal / soft-teal / ghost. Icons: <i class="hmi-btn-icon ...">.
   ============================================================================ */

.hmi-btn-label { display: inline-block; }
.hmi-btn-icon { flex-shrink: 0; font-size: 0.875em; line-height: 1; }

/* Sizes ----------------------------------------------------------------- */
.hmi-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.5rem;
}
.hmi-btn-md {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.75rem;
}
.hmi-btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.75rem;
}
.hmi-btn-xl {
  padding: 1rem 2rem;
  font-size: 1.0625rem;
  font-weight: 600;
  border-radius: 0.75rem;
}

/* Full-width modifier (ueberschreibt Legacy .hmi-btn-block) */
.hmi-btn-full {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* Styles ---------------------------------------------------------------- */
/* Selektoren nutzen Doppel-Klasse (.hmi-btn.hmi-btn-XXX) + !important auf
   color/text-decoration, um gegen Impreza-/Theme-Overrides auf a:hover
   zu bestehen (z.B. globale Link-Farben). */

/* Primary Violet — staerkster CTA (Erstgespraech) */
a.hmi-btn.hmi-btn-primary-violet,
.hmi-btn.hmi-btn-primary-violet {
  background-color: var(--hmi-violet-500);
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 8px 16px rgba(76, 62, 128, 0.25);
  border: 1px solid transparent;
}
a.hmi-btn.hmi-btn-primary-violet:hover,
a.hmi-btn.hmi-btn-primary-violet:focus-visible,
.hmi-btn.hmi-btn-primary-violet:hover,
.hmi-btn.hmi-btn-primary-violet:focus-visible {
  background-color: var(--hmi-violet-600);
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(76, 62, 128, 0.4);
  transform: translateY(-2px);
  text-decoration: none !important;
}

/* Primary Teal — Standard-CTA */
a.hmi-btn.hmi-btn-primary-teal,
.hmi-btn.hmi-btn-primary-teal {
  background-color: var(--hmi-teal-500);
  color: #ffffff !important;
  text-decoration: none !important;
  border: 1px solid transparent;
}
a.hmi-btn.hmi-btn-primary-teal:hover,
a.hmi-btn.hmi-btn-primary-teal:focus-visible,
.hmi-btn.hmi-btn-primary-teal:hover,
.hmi-btn.hmi-btn-primary-teal:focus-visible {
  background-color: var(--hmi-teal-700);
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 112, 120, 0.3);
  text-decoration: none !important;
}

/* Outline Teal — Secondary neben Primary-CTA */
a.hmi-btn.hmi-btn-outline-teal,
.hmi-btn.hmi-btn-outline-teal {
  background-color: transparent;
  color: var(--hmi-teal-500) !important;
  text-decoration: none !important;
  border: 1px solid var(--hmi-teal-500);
}
a.hmi-btn.hmi-btn-outline-teal:hover,
a.hmi-btn.hmi-btn-outline-teal:focus-visible,
.hmi-btn.hmi-btn-outline-teal:hover,
.hmi-btn.hmi-btn-outline-teal:focus-visible {
  background-color: var(--hmi-teal-50);
  color: var(--hmi-teal-700) !important;
  border-color: var(--hmi-teal-700);
  text-decoration: none !important;
}

/* Soft Teal — Tertiaer, z.B. in Cards */
a.hmi-btn.hmi-btn-soft-teal,
.hmi-btn.hmi-btn-soft-teal {
  background-color: rgba(0, 112, 120, 0.10);
  color: var(--hmi-teal-500) !important;
  text-decoration: none !important;
  border: 1px solid transparent;
}
a.hmi-btn.hmi-btn-soft-teal:hover,
a.hmi-btn.hmi-btn-soft-teal:focus-visible,
.hmi-btn.hmi-btn-soft-teal:hover,
.hmi-btn.hmi-btn-soft-teal:focus-visible {
  background-color: rgba(0, 112, 120, 0.20);
  color: var(--hmi-teal-700) !important;
  text-decoration: none !important;
}

/* Soft Violet — Tertiaer-Pendant zu Soft Teal, fuer Premium-/ICF-Cards etc. */
a.hmi-btn.hmi-btn-soft-violet,
.hmi-btn.hmi-btn-soft-violet {
  background-color: rgba(76, 62, 128, 0.10);
  color: var(--hmi-violet-500) !important;
  text-decoration: none !important;
  border: 1px solid transparent;
}
a.hmi-btn.hmi-btn-soft-violet:hover,
a.hmi-btn.hmi-btn-soft-violet:focus-visible,
.hmi-btn.hmi-btn-soft-violet:hover,
.hmi-btn.hmi-btn-soft-violet:focus-visible {
  background-color: rgba(76, 62, 128, 0.20);
  color: var(--hmi-violet-600) !important;
  text-decoration: none !important;
}

/* Ghost — zart, fuer Sekundaer-Links, die wie Buttons aussehen sollen */
a.hmi-btn.hmi-btn-ghost,
.hmi-btn.hmi-btn-ghost {
  background-color: transparent;
  color: var(--hmi-teal-500) !important;
  text-decoration: none !important;
  border: 1px solid transparent;
}
a.hmi-btn.hmi-btn-ghost:hover,
a.hmi-btn.hmi-btn-ghost:focus-visible,
.hmi-btn.hmi-btn-ghost:hover,
.hmi-btn.hmi-btn-ghost:focus-visible {
  background-color: rgba(0, 112, 120, 0.08);
  color: var(--hmi-teal-700) !important;
  text-decoration: none !important;
}

/* Outline White — fuer Dark-Backgrounds (CTA-Banner Dark, Hero Overlay) */
a.hmi-btn.hmi-btn-outline-white,
.hmi-btn.hmi-btn-outline-white {
  background-color: rgba(255, 255, 255, 0.05);
  color: #ffffff !important;
  text-decoration: none !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
a.hmi-btn.hmi-btn-outline-white:hover,
a.hmi-btn.hmi-btn-outline-white:focus-visible,
.hmi-btn.hmi-btn-outline-white:hover,
.hmi-btn.hmi-btn-outline-white:focus-visible {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6);
  text-decoration: none !important;
}

/* Solid White — Primary-CTA auf violettem / farbigem BG, wo primary-violet
   optisch untergeht. Weisse Fuellung mit violettem Text dominiert sicher. */
a.hmi-btn.hmi-btn-solid-white,
.hmi-btn.hmi-btn-solid-white {
  background-color: #ffffff;
  color: var(--hmi-violet-500) !important;
  text-decoration: none !important;
  border: 1px solid #ffffff;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.25);
}
a.hmi-btn.hmi-btn-solid-white:hover,
a.hmi-btn.hmi-btn-solid-white:focus-visible,
.hmi-btn.hmi-btn-solid-white:hover,
.hmi-btn.hmi-btn-solid-white:focus-visible {
  background-color: #f5f3ff;
  color: var(--hmi-violet-600) !important;
  border-color: #f5f3ff;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
  text-decoration: none !important;
}

/* Focus-Ring fuer Keyboard-Users (Spezifitaet analog) */
a.hmi-btn:focus-visible,
.hmi-btn:focus-visible {
  outline: 2px solid var(--hmi-violet-500);
  outline-offset: 2px;
}

/* ============================================================================
   HMi Heading Atom (seit 2026-04-18)
   ============================================================================
   Wird vom [hmi_heading]-Shortcode verwendet. Entkoppelt HTML-Tag (H1..H6, SEO)
   von optischer Groesse (Size-Scale). Nutzt !important auf font-size/weight,
   um gegen Imprezas globale Theme-Typografie zu bestehen.
   ============================================================================ */

.hmi-heading-block {
  margin: 0 0 1rem 0;
}
.hmi-heading-block > .hmi-heading {
  margin: 0;
  padding: 0; /* neutralisiert Impreza/Theme-seitige padding-top auf h2..h6 */
}
/* Wenn ein Eyebrow vor der Headline steht, darf die Headline einen kleinen
   padding-top behalten (0.5rem) — nicht auf 0, sonst klebt sie visuell am
   Eyebrow. Ohne Eyebrow bleibt padding: 0 aus der Regel oben. */
.hmi-heading-block > .hmi-eyebrow + .hmi-heading {
  padding-top: 0.5rem;
}

/* Eyebrow ---------------------------------------------------------------- */
.hmi-eyebrow {
  display: block;
  font-family: 'Ubuntu', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin: 0 0 0.5rem 0;
}

/* Im Heading-Atom-Kontext: Eyebrow erbt Alignment vom Wrapper (left/center/
   right je nach hmi-heading-align-*) und sitzt dichter an der Headline.
   margin-bottom: 0 — der visuelle Gap kommt aus line-height der Eyebrow
   (1.4 * 0.75rem) und der Headline; mehr braucht's nicht. */
.hmi-heading-block .hmi-eyebrow {
  text-align: inherit;
  margin-bottom: 0;
  line-height: 1.2; /* war 1.4 — reduziert visuelle Luft unter dem Text */
}
.hmi-eyebrow-color-ink,
.hmi-eyebrow-color-teal {
  color: var(--hmi-teal-500);
}
.hmi-eyebrow-color-violet {
  color: var(--hmi-violet-500);
}
.hmi-eyebrow-color-white {
  color: var(--hmi-teal-300);
}

/* Heading Base ----------------------------------------------------------- */
.hmi-heading {
  font-family: 'Ubuntu', sans-serif;
  line-height: 1.25;
}

/* Alignment (auf dem Wrapper, damit Eyebrow mit-ausgerichtet wird) ------- */
.hmi-heading-align-left   { text-align: left; }
.hmi-heading-align-center { text-align: center; }
.hmi-heading-align-right  { text-align: right; }

/* Size-Scale (mobile-first, Desktop ab 768px).
   Werte ueber :root-Variablen definiert (siehe oben) — Overrides im
   Child-Theme-CSS oder Theme-Options-Additional-CSS moeglich ohne Plugin-Patch. */
.hmi-heading-size-hero {
  font-size: var(--hmi-heading-hero-mobile) !important;
  line-height: 1.1 !important;
}
@media (min-width: 768px) {
  .hmi-heading-size-hero {
    font-size: var(--hmi-heading-hero-desktop) !important;
  }
}

.hmi-heading-size-section-lg {
  font-size: var(--hmi-heading-section-lg-mobile) !important;
  line-height: 1.2 !important;
}
@media (min-width: 768px) {
  .hmi-heading-size-section-lg {
    font-size: var(--hmi-heading-section-lg-desktop) !important;
  }
}

.hmi-heading-size-section-md {
  font-size: var(--hmi-heading-section-md-mobile) !important;
  line-height: 1.3 !important;
}
@media (min-width: 768px) {
  .hmi-heading-size-section-md {
    font-size: var(--hmi-heading-section-md-desktop) !important;
  }
}

.hmi-heading-size-section-sm {
  font-size: var(--hmi-heading-section-sm-mobile) !important;
  line-height: 1.35 !important;
}
@media (min-width: 768px) {
  .hmi-heading-size-section-sm {
    font-size: var(--hmi-heading-section-sm-desktop) !important;
  }
}

.hmi-heading-size-card {
  font-size: var(--hmi-heading-card-size) !important;
  line-height: 1.4 !important;
}

.hmi-heading-size-eyebrow-label {
  font-size: var(--hmi-heading-eyebrow-size) !important;
  line-height: 1.4 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Weights ---------------------------------------------------------------- */
.hmi-heading-weight-light   { font-weight: 300 !important; }
.hmi-heading-weight-regular { font-weight: 400 !important; }
.hmi-heading-weight-medium  { font-weight: 500 !important; }
.hmi-heading-weight-bold    { font-weight: 700 !important; }

/* Colors ----------------------------------------------------------------- */
.hmi-heading-color-ink    { color: var(--hmi-ink) !important; }
.hmi-heading-color-teal   { color: var(--hmi-teal-500) !important; }
.hmi-heading-color-violet { color: var(--hmi-violet-500) !important; }
.hmi-heading-color-white  { color: #ffffff !important; }

/* ============================================================================
   HMi Badge Atom (seit 2026-04-18)
   ============================================================================
   Wird vom [hmi_badge]-Shortcode verwendet. Pill-/Tag-Label mit 4 Stilen
   (Soft/Solid x Teal/Violet) und 2 Groessen (sm/md), optional Icon.
   ============================================================================ */

.hmi-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1.2;
  vertical-align: middle;
}
.hmi-badge-label { display: inline-block; }
.hmi-badge-icon  { display: inline-flex; align-items: center; font-size: 0.9em; }

/* Sizes ----------------------------------------------------------------- */
.hmi-badge-sm { font-size: 0.6875rem; padding: 0.25rem 0.625rem; }
.hmi-badge-md { font-size: 0.75rem;   padding: 0.375rem 0.875rem; }

/* Styles (analog Button: Spezifitaet + !important wegen Theme-a:hover) --- */
.hmi-badge.hmi-badge-soft-teal {
  background-color: rgba(0, 112, 120, 0.10);
  color: var(--hmi-teal-500) !important;
}
.hmi-badge.hmi-badge-soft-violet {
  background-color: rgba(76, 62, 128, 0.10);
  color: var(--hmi-violet-500) !important;
}
.hmi-badge.hmi-badge-solid-teal {
  background-color: var(--hmi-teal-500);
  color: #ffffff !important;
}
.hmi-badge.hmi-badge-solid-violet {
  background-color: var(--hmi-violet-500);
  color: #ffffff !important;
}
.hmi-badge.hmi-badge-soft-navy {
  background-color: rgba(2, 116, 190, 0.10);
  color: var(--hmi-navy-500) !important;
}
.hmi-badge.hmi-badge-solid-navy {
  background-color: var(--hmi-navy-500);
  color: #ffffff !important;
}

/* ============================================================================
   HMi Separator Atom (seit 2026-04-18)
   ============================================================================
   Wird vom [hmi_separator]-Shortcode verwendet. Horizontale Trennlinie oder
   reiner Abstand. 5 Stile (line / gradient-teal / gradient-violet / dots /
   empty) x 4 Breiten x 3 Alignments x 4 Abstaende.
   ============================================================================ */

.hmi-separator {
  display: flex;
  width: 100%;
}
.hmi-separator-align-left   { justify-content: flex-start; }
.hmi-separator-align-center { justify-content: center; }
.hmi-separator-align-right  { justify-content: flex-end; }

.hmi-separator-spacing-compact  { margin: 1rem 0; }
.hmi-separator-spacing-normal   { margin: 2rem 0; }
.hmi-separator-spacing-relaxed  { margin: 3rem 0; }
.hmi-separator-spacing-spacious { margin: 4rem 0; }

.hmi-separator-line { display: block; }

/* Widths (auf die innere Linie) */
.hmi-separator-width-full   { width: 100%; }
.hmi-separator-width-wide   { width: 80%; }
.hmi-separator-width-narrow { width: 30%; max-width: 240px; }
.hmi-separator-width-thin   { width: 100px; }

/* Styles (auf die innere Linie) */
.hmi-separator-style-line {
  height: 1px;
  background-color: var(--hmi-cool-100);
}
.hmi-separator-style-gradient-teal {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--hmi-teal-500), transparent);
}
.hmi-separator-style-gradient-violet {
  height: 2px;
  background: linear-gradient(to right, transparent, var(--hmi-violet-500), transparent);
}
.hmi-separator-style-dots {
  height: 8px;
  background-image: radial-gradient(var(--hmi-teal-500) 1px, transparent 1px);
  background-size: 12px 12px;
  background-repeat: repeat-x;
  background-position: center;
}
.hmi-separator-style-empty {
  height: 0;
  background: transparent;
}

/* ============================================================================
   HMi Link Atom (seit 2026-04-18)
   ============================================================================
   Wird vom [hmi_link]-Shortcode verwendet. Dezenterer Gegenpart zum Button —
   Text-Link in drei Stilen (Arrow / Underline / Plain), vier Farben,
   drei Groessen, optional eigenes Icon.
   ============================================================================ */

.hmi-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 500;
  line-height: 1.4;
  transition: all 0.2s ease;
}
.hmi-link-label { display: inline-block; }
.hmi-link-icon  { display: inline-flex; align-items: center; font-size: 0.875em; transition: transform 0.2s ease; }

/* Breite: auto = natuerliche Breite (inline-flex, Default), full = 100 %.
   Bei full wird der Link zu display:flex mit justify-content gemaess align. */
.hmi-link-width-full {
  display: flex;
  width: 100%;
}
.hmi-link-width-full.hmi-link-align-left   { justify-content: flex-start; }
.hmi-link-width-full.hmi-link-align-center { justify-content: center; }
.hmi-link-width-full.hmi-link-align-right  { justify-content: flex-end; }

/* Arrow-Stil: Pfeil bewegt sich beim Hover leicht — in die Richtung in die
   er zeigt (rechts bei icon-position=right, links bei icon-position=left). */
a.hmi-link.hmi-link-arrow.hmi-link-icon-right:hover .hmi-link-icon,
a.hmi-link.hmi-link-arrow.hmi-link-icon-right:focus-visible .hmi-link-icon {
  transform: translateX(3px);
}
a.hmi-link.hmi-link-arrow.hmi-link-icon-left:hover .hmi-link-icon,
a.hmi-link.hmi-link-arrow.hmi-link-icon-left:focus-visible .hmi-link-icon {
  transform: translateX(-3px);
}

/* Underline-Stil */
a.hmi-link.hmi-link-underline,
.hmi-link.hmi-link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Sizes */
.hmi-link-size-sm { font-size: 0.875rem; }
.hmi-link-size-md { font-size: 1rem; }
.hmi-link-size-lg { font-size: 1.125rem; }

/* Colors (Doppel-Klasse + !important gegen Theme-a:hover) */
a.hmi-link.hmi-link-color-teal,
.hmi-link.hmi-link-color-teal {
  color: var(--hmi-teal-500) !important;
}
a.hmi-link.hmi-link-color-teal:hover,
a.hmi-link.hmi-link-color-teal:focus-visible,
.hmi-link.hmi-link-color-teal:hover {
  color: var(--hmi-teal-700) !important;
  text-decoration: none;
}
a.hmi-link.hmi-link-color-violet,
.hmi-link.hmi-link-color-violet {
  color: var(--hmi-violet-500) !important;
}
a.hmi-link.hmi-link-color-violet:hover,
a.hmi-link.hmi-link-color-violet:focus-visible,
.hmi-link.hmi-link-color-violet:hover {
  color: var(--hmi-violet-600) !important;
  text-decoration: none;
}
a.hmi-link.hmi-link-color-navy,
.hmi-link.hmi-link-color-navy {
  color: var(--hmi-navy-500) !important;
}
a.hmi-link.hmi-link-color-navy:hover,
a.hmi-link.hmi-link-color-navy:focus-visible,
.hmi-link.hmi-link-color-navy:hover {
  color: var(--hmi-navy-600) !important;
  text-decoration: none;
}
a.hmi-link.hmi-link-color-ink,
.hmi-link.hmi-link-color-ink {
  color: var(--hmi-ink) !important;
}
a.hmi-link.hmi-link-color-ink:hover,
a.hmi-link.hmi-link-color-ink:focus-visible,
.hmi-link.hmi-link-color-ink:hover {
  color: var(--hmi-teal-500) !important;
  text-decoration: none;
}

/* Bei Underline-Stil bleibt die Underline auch im Hover, nur Farbe wechselt */
a.hmi-link.hmi-link-underline:hover,
.hmi-link.hmi-link-underline:hover {
  text-decoration: underline;
}

/* ============================================================================
   HMi Avatar Atom (seit 2026-04-18)
   ============================================================================
   Wird vom [hmi_avatar]-Shortcode verwendet. Rundes Bild, optional mit
   Name und Rolle. Fuenf Groessen (xs/sm/md/lg/xl), vier Border-Varianten
   (none/teal/violet/white), drei Layouts (image-only / name-right / name-below).
   ============================================================================ */

.hmi-avatar {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Ubuntu', sans-serif;
  line-height: 1.3;
  vertical-align: middle;
}
.hmi-avatar-layout-image-only { gap: 0; }
.hmi-avatar-layout-name-below {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.hmi-avatar-image-wrapper {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 9999px;
  overflow: hidden;
  background-color: var(--hmi-cool-100);
}
.hmi-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}
.hmi-avatar-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--hmi-ink-light);
  font-weight: 700;
  background-color: var(--hmi-cool-100);
}

/* Sizes */
.hmi-avatar-size-xs .hmi-avatar-image-wrapper { width: 32px;  height: 32px;  }
.hmi-avatar-size-sm .hmi-avatar-image-wrapper { width: 48px;  height: 48px;  }
.hmi-avatar-size-md .hmi-avatar-image-wrapper { width: 64px;  height: 64px;  }
.hmi-avatar-size-lg .hmi-avatar-image-wrapper { width: 96px;  height: 96px;  }
.hmi-avatar-size-xl .hmi-avatar-image-wrapper { width: 128px; height: 128px; }

.hmi-avatar-size-xs .hmi-avatar-placeholder { font-size: 14px; }
.hmi-avatar-size-sm .hmi-avatar-placeholder { font-size: 20px; }
.hmi-avatar-size-md .hmi-avatar-placeholder { font-size: 26px; }
.hmi-avatar-size-lg .hmi-avatar-placeholder { font-size: 36px; }
.hmi-avatar-size-xl .hmi-avatar-placeholder { font-size: 48px; }

/* Borders */
.hmi-avatar-border-none   .hmi-avatar-image-wrapper { box-shadow: none; }
.hmi-avatar-border-teal   .hmi-avatar-image-wrapper { box-shadow: 0 0 0 3px var(--hmi-teal-500); }
.hmi-avatar-border-violet .hmi-avatar-image-wrapper { box-shadow: 0 0 0 3px var(--hmi-violet-500); }
.hmi-avatar-border-white  .hmi-avatar-image-wrapper { box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px rgba(0,0,0,0.08); }

/* Meta */
.hmi-avatar-meta {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
}
.hmi-avatar-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hmi-ink);
  line-height: 1.3;
}
.hmi-avatar-role {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--hmi-ink-light);
  line-height: 1.3;
  margin-top: 0.125rem;
}

/* Size-abhaengige Meta-Typografie */
.hmi-avatar-size-xs .hmi-avatar-name { font-size: 0.8125rem; }
.hmi-avatar-size-xs .hmi-avatar-role { font-size: 0.75rem; }
.hmi-avatar-size-lg .hmi-avatar-name { font-size: 1.0625rem; }
.hmi-avatar-size-lg .hmi-avatar-role { font-size: 0.875rem; }
.hmi-avatar-size-xl .hmi-avatar-name { font-size: 1.125rem; }
.hmi-avatar-size-xl .hmi-avatar-role { font-size: 0.9375rem; }

/* ============================================================================
   HMi Stat Atom (seit 2026-04-18)
   ============================================================================
   Wird vom [hmi_stat]-Shortcode verwendet. Einzelne Kennzahl mit Label,
   optionaler Description und optionalem Icon.
   ============================================================================ */

.hmi-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: 'Ubuntu', sans-serif;
}
.hmi-stat-align-left   { align-items: flex-start; text-align: left; }
.hmi-stat-align-center { align-items: center;     text-align: center; }
.hmi-stat-align-right  { align-items: flex-end;   text-align: right; }

.hmi-stat-icon {
  display: inline-flex;
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  line-height: 1;
}

.hmi-stat-number {
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hmi-stat-label {
  font-size: 0.875rem;
  /* !important gegen Impreza-Theme-Default, das sonst 600 erzwingt. */
  font-weight: 400 !important;
  color: var(--hmi-ink-light);
  line-height: 1.3;
  margin-top: 0.25rem;
}
.hmi-stat-description {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--hmi-ink-light);
  line-height: 1.45;
  margin-top: 0.25rem;
}

/* Sizes (mobile / desktop Number-Size) */
.hmi-stat-size-sm .hmi-stat-number { font-size: 1.5rem; }
@media (min-width: 768px) { .hmi-stat-size-sm .hmi-stat-number { font-size: 2rem; } }

.hmi-stat-size-md .hmi-stat-number { font-size: 2rem; }
@media (min-width: 768px) { .hmi-stat-size-md .hmi-stat-number { font-size: 3rem; } }

.hmi-stat-size-lg .hmi-stat-number { font-size: 3rem; }
@media (min-width: 768px) { .hmi-stat-size-lg .hmi-stat-number { font-size: 4rem; } }

.hmi-stat-size-xl .hmi-stat-number { font-size: 4rem; }
@media (min-width: 768px) { .hmi-stat-size-xl .hmi-stat-number { font-size: 5rem; } }

/* Farben der Zahl */
.hmi-stat-color-teal   .hmi-stat-number { color: var(--hmi-teal-500); }
.hmi-stat-color-violet .hmi-stat-number { color: var(--hmi-violet-500); }
.hmi-stat-color-ink    .hmi-stat-number { color: var(--hmi-ink); }
.hmi-stat-color-navy   .hmi-stat-number { color: var(--hmi-navy-500, #0274be); }

/* Icon-Farbe folgt der Number-Farbe */
.hmi-stat-color-teal   .hmi-stat-icon { color: var(--hmi-teal-500); }
.hmi-stat-color-violet .hmi-stat-icon { color: var(--hmi-violet-500); }
.hmi-stat-color-ink    .hmi-stat-icon { color: var(--hmi-ink-light); }
.hmi-stat-color-navy   .hmi-stat-icon { color: var(--hmi-navy-500, #0274be); }

/* Label-Farbe: Default ist ink-light (siehe .hmi-stat-label oben).
   Optional per Param ueberschreibbar. 'inherit' uebernimmt die Zahl-Farbe. */
.hmi-stat-label-color-teal   .hmi-stat-label { color: var(--hmi-teal-500); }
.hmi-stat-label-color-violet .hmi-stat-label { color: var(--hmi-violet-500); }
.hmi-stat-label-color-ink    .hmi-stat-label { color: var(--hmi-ink); }
.hmi-stat-label-color-navy   .hmi-stat-label { color: var(--hmi-navy-500, #0274be); }
/* 'inherit'-Variante: Label uebernimmt die Akzentfarbe der Zahl (gleiche Klasse). */
.hmi-stat-label-color-inherit.hmi-stat-color-teal   .hmi-stat-label { color: var(--hmi-teal-500); }
.hmi-stat-label-color-inherit.hmi-stat-color-violet .hmi-stat-label { color: var(--hmi-violet-500); }
.hmi-stat-label-color-inherit.hmi-stat-color-ink    .hmi-stat-label { color: var(--hmi-ink); }
.hmi-stat-label-color-inherit.hmi-stat-color-navy   .hmi-stat-label { color: var(--hmi-navy-500, #0274be); }

/* ============================================================================
   HMi Icon Box Atom (seit 2026-04-18)
   ============================================================================
   Wird vom [hmi_icon_box]-Shortcode verwendet. Icon + optional Titel + Text.
   Sechs Stile (Teal/Violet x Circle/Box/Minimal), drei Groessen, vertikal/
   horizontal Layout, drei Alignments.
   ============================================================================ */

.hmi-icon-box {
  display: flex;
  font-family: 'Ubuntu', sans-serif;
}
.hmi-icon-box-layout-vertical {
  flex-direction: column;
  gap: 1rem;
}
.hmi-icon-box-layout-horizontal {
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
}

.hmi-icon-box-align-left {
  align-items: flex-start;
  text-align: left;
}
.hmi-icon-box-align-center {
  align-items: center;
  text-align: center;
}
.hmi-icon-box-align-right {
  align-items: flex-end;
  text-align: right;
}
.hmi-icon-box-layout-horizontal.hmi-icon-box-align-center { align-items: center; }
.hmi-icon-box-layout-horizontal.hmi-icon-box-align-right  { align-items: flex-start; }

/* Icon-Wrapper: positioniert Icon + optional rotated BG */
.hmi-icon-box-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hmi-icon-box-icon-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hmi-icon-box-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Sizes: Container + Icon */
.hmi-icon-box-size-sm .hmi-icon-box-icon-wrapper { width: 40px;  height: 40px; }
.hmi-icon-box-size-md .hmi-icon-box-icon-wrapper { width: 56px;  height: 56px; }
.hmi-icon-box-size-lg .hmi-icon-box-icon-wrapper { width: 72px;  height: 72px; }

.hmi-icon-box-size-sm .hmi-icon-box-icon { font-size: 18px; }
.hmi-icon-box-size-md .hmi-icon-box-icon { font-size: 24px; }
.hmi-icon-box-size-lg .hmi-icon-box-icon { font-size: 32px; }

/* Styles: Circle (rounded-full, soft BG) */
.hmi-icon-box-style-teal-circle   .hmi-icon-box-icon-bg { background-color: rgba(0, 112, 120, 0.10); border-radius: 9999px; }
.hmi-icon-box-style-teal-circle   .hmi-icon-box-icon    { color: var(--hmi-teal-500); }
.hmi-icon-box-style-violet-circle .hmi-icon-box-icon-bg { background-color: rgba(76, 62, 128, 0.10); border-radius: 9999px; }
.hmi-icon-box-style-violet-circle .hmi-icon-box-icon    { color: var(--hmi-violet-500); }

/* Styles: Teal-Box / Violet-Box (Prototyp-Design, HMi-Signature)
   Zwei Layer: rotierte transparente BG-Box hinten + Gradient-FG-Box
   mit Border davor. Icon sitzt darueber (z-index 2). */
.hmi-icon-box-style-teal-box .hmi-icon-box-icon-bg,
.hmi-icon-box-style-violet-box .hmi-icon-box-icon-bg {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  transform: rotate(6deg);
  transition: transform 0.3s ease;
  z-index: 0;
}
.hmi-icon-box-style-teal-box   .hmi-icon-box-icon-bg { background-color: rgba(0, 112, 120, 0.10); }
.hmi-icon-box-style-violet-box .hmi-icon-box-icon-bg { background-color: rgba(76, 62, 128, 0.10); }

.hmi-icon-box-style-teal-box .hmi-icon-box-icon-fg,
.hmi-icon-box-style-violet-box .hmi-icon-box-icon-fg {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  z-index: 1;
}
.hmi-icon-box-style-teal-box .hmi-icon-box-icon-fg {
  background: linear-gradient(to bottom right, var(--hmi-teal-50), var(--hmi-teal-100));
  border: 1px solid rgba(175, 233, 236, 0.5);
}
.hmi-icon-box-style-violet-box .hmi-icon-box-icon-fg {
  background: linear-gradient(to bottom right, var(--hmi-violet-50), rgba(76, 62, 128, 0.12));
  border: 1px solid rgba(76, 62, 128, 0.2);
}

.hmi-icon-box-style-teal-box .hmi-icon-box-icon,
.hmi-icon-box-style-violet-box .hmi-icon-box-icon { z-index: 2; position: relative; }
.hmi-icon-box-style-teal-box   .hmi-icon-box-icon { color: var(--hmi-teal-600); }
.hmi-icon-box-style-violet-box .hmi-icon-box-icon { color: var(--hmi-violet-500); }

/* Hover: Back-Box rotiert staerker. Greift auch wenn icon_box in einer
   Karte sitzt (group-hover-Effekt analog Prototyp). */
.hmi-icon-box-style-teal-box:hover   .hmi-icon-box-icon-bg,
.hmi-icon-box-style-violet-box:hover .hmi-icon-box-icon-bg,
.hmi-card:hover .hmi-icon-box-style-teal-box   .hmi-icon-box-icon-bg,
.hmi-card:hover .hmi-icon-box-style-violet-box .hmi-icon-box-icon-bg {
  transform: rotate(12deg);
}

/* Styles: Minimal (nur Icon, kein Container) */
.hmi-icon-box-style-minimal-teal   .hmi-icon-box-icon { color: var(--hmi-teal-500); }
.hmi-icon-box-style-minimal-violet .hmi-icon-box-icon { color: var(--hmi-violet-500); }
.hmi-icon-box-style-minimal-teal   .hmi-icon-box-icon-wrapper,
.hmi-icon-box-style-minimal-violet .hmi-icon-box-icon-wrapper {
  width: auto;
  height: auto;
}

/* Styles: Soft (flach, clean — Prototyp-Alternative zu Teal-Box / Violet-Box)
   Einfacher farbig getoenter Hintergrund, rounded-lg, kein Gradient, keine
   Rotation, kein Border. Ideal fuer Curriculum-Karten und andere Listen,
   in denen die dreidimensionale Signature zu dominant wirken wuerde. */
.hmi-icon-box-style-teal-soft .hmi-icon-box-icon-bg,
.hmi-icon-box-style-violet-soft .hmi-icon-box-icon-bg {
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  z-index: 0;
}
.hmi-icon-box-style-teal-soft   .hmi-icon-box-icon-bg { background-color: rgba(0, 112, 120, 0.10); }
.hmi-icon-box-style-violet-soft .hmi-icon-box-icon-bg { background-color: rgba(76, 62, 128, 0.10); }

.hmi-icon-box-style-teal-soft .hmi-icon-box-icon,
.hmi-icon-box-style-violet-soft .hmi-icon-box-icon { z-index: 1; position: relative; }
.hmi-icon-box-style-teal-soft   .hmi-icon-box-icon { color: var(--hmi-teal-500); }
.hmi-icon-box-style-violet-soft .hmi-icon-box-icon { color: var(--hmi-violet-500); }

/* Soft-Style braucht keinen Gradient-Foreground-Layer. */
.hmi-icon-box-style-teal-soft .hmi-icon-box-icon-fg,
.hmi-icon-box-style-violet-soft .hmi-icon-box-icon-fg { display: none; }

/* Text-Content in der Icon-Box (fuer hmi_text_box) — gleiche Box wie
   hmi_icon_box, aber ein kurzer Text (1-3 Zeichen) statt <i>-Icon. */
.hmi-icon-box-is-text {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Content */
.hmi-icon-box-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}
.hmi-icon-box-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hmi-ink);
  margin: 0;
  line-height: 1.3;
}
.hmi-icon-box-text {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--hmi-ink-light);
  margin: 0;
  line-height: 1.55;
}

/* ============================================================================
   HMi List Atom (seit 2026-04-18)
   ============================================================================
   Wird vom [hmi_list]-Shortcode verwendet. Stilisierte Liste mit einheitlichen
   Bullets (Check, Dot, Dash, Arrow oder Custom-Icon).
   ============================================================================ */

.hmi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', sans-serif;
}
.hmi-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  color: var(--hmi-ink);
}
.hmi-list-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.25em;
}
.hmi-list-text {
  line-height: 1.55;
}

/* Sizes */
.hmi-list-size-sm .hmi-list-item   { font-size: 0.875rem; }
.hmi-list-size-sm .hmi-list-bullet { font-size: 0.8125rem; }
.hmi-list-size-md .hmi-list-item   { font-size: 1rem; }
.hmi-list-size-md .hmi-list-bullet { font-size: 0.9375rem; }
.hmi-list-size-lg .hmi-list-item   { font-size: 1.125rem; }
.hmi-list-size-lg .hmi-list-bullet { font-size: 1rem; }

/* Spacing (Item-Abstaende) */
.hmi-list-spacing-compact .hmi-list-item + .hmi-list-item { margin-top: 0.375rem; }
.hmi-list-spacing-normal  .hmi-list-item + .hmi-list-item { margin-top: 0.75rem; }
.hmi-list-spacing-relaxed .hmi-list-item + .hmi-list-item { margin-top: 1.25rem; }

/* Bullet-Farben */
.hmi-list-color-teal   .hmi-list-bullet { color: var(--hmi-teal-500); }
.hmi-list-color-violet .hmi-list-bullet { color: var(--hmi-violet-500); }
.hmi-list-color-ink    .hmi-list-bullet { color: var(--hmi-ink); }

/* Dot-Bullet kleiner als Icon-basierte Bullets */
.hmi-list-bullet-dot .hmi-list-bullet { font-size: 0.5em; margin-top: 0.5em; }

/* ============================================================================
   HMi Quote Atom (Redesign 2026-04-18, nach Prototyp)
   ============================================================================
   Testimonial-Layout aus prototype/_parts. Boxed Breite (max 768px standard),
   grosses transparentes Quote-Mark absolut positioniert als Hintergrund-Deko,
   Gradient-Trennlinie, Avatar mit Gradient-Hintergrund und weissem Ring.
   ============================================================================ */

.hmi-quote {
  position: relative;
  display: block;
  font-family: 'Ubuntu', sans-serif;
  padding: 2rem 0;
  margin: 0 auto;
}

/* Breiten-Varianten (max-width des Figure-Containers) */
.hmi-quote-width-boxed { max-width: 48rem;  }  /* 768px, entspricht Tailwind max-w-3xl */
.hmi-quote-width-wide  { max-width: 64rem;  }  /* 1024px */
.hmi-quote-width-full  { max-width: none;   }

/* Alignments */
.hmi-quote-align-left   { text-align: left;   }
.hmi-quote-align-center { text-align: center; }

/* Quote-Mark: absolut positioniert, gross, sehr transparent (Hintergrund-Deko) */
.hmi-quote-mark {
  position: absolute;
  top: 12px;
  left: -4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 8rem;
  line-height: 0.85;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.hmi-quote-align-center .hmi-quote-mark {
  left: 50%;
  transform: translateX(-50%);
}

/* Blockquote-Wrapper fuer Text (liegt ueber der Deko-Quote-Mark) */
.hmi-quote-blockquote {
  position: relative;
  z-index: 1;
  padding-left: 1rem;
  margin: 0;
  border: 0;
}

/* Impreza (und manche Themes) injizieren via blockquote::before ein
   Anfuehrungszeichen. Unser Atom bringt sein eigenes mit (absolut positioniert),
   daher muessen die Theme-Pseudos neutralisiert werden — auch auf dem p.text. */
.hmi-quote blockquote::before,
.hmi-quote blockquote::after,
.hmi-quote-blockquote::before,
.hmi-quote-blockquote::after,
.hmi-quote-text::before,
.hmi-quote-text::after {
  content: none !important;
  display: none !important;
}

/* Zitat-Text */
.hmi-quote-text {
  margin: 0;
  font-weight: 500;
  line-height: 1.6;
}

/* Trennlinie: Gradient, faded zur rechten Seite */
.hmi-quote-divider {
  border: 0;
  height: 1px;
  margin: 1.5rem 0 1.25rem 1rem;
}

/* Footer: Avatar + Person */
.hmi-quote-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-left: 1rem;
}
.hmi-quote-align-center .hmi-quote-footer { justify-content: center; }
.hmi-quote-align-center .hmi-quote-divider { margin-left: 0; }
.hmi-quote-align-center .hmi-quote-blockquote { padding-left: 0; }

/* Avatar: Gradient-Hintergrund + weisser Ring */
.hmi-quote-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: 0 0 0 2px #ffffff;
}
.hmi-quote-avatar-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}
.hmi-quote-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* Wenn ein Bild gesetzt ist: Gradient-BG wird nicht gebraucht */
.hmi-quote-avatar-has-image { background: transparent !important; }

/* Person: Name + Rolle */
.hmi-quote-person {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.3;
}
.hmi-quote-attribution {
  font-weight: 600;
  font-style: normal;
  color: var(--hmi-ink);
  font-size: 0.875rem;
  line-height: 1.3;
}
.hmi-quote-role {
  font-weight: 400;
  color: var(--hmi-ink-light);
  font-size: 0.875rem;
  line-height: 1.3;
  margin-top: 0.125rem;
}

/* Sizes: Zitat-Text (nach Tailwind text-xl / md:text-2xl / lg:text-3xl) */
.hmi-quote-size-sm .hmi-quote-text { font-size: 1.0625rem; }
@media (min-width: 768px) {
  .hmi-quote-size-sm .hmi-quote-text { font-size: 1.125rem; }
}
.hmi-quote-size-md .hmi-quote-text { font-size: 1.25rem; }
@media (min-width: 768px) {
  .hmi-quote-size-md .hmi-quote-text { font-size: 1.5rem; }
}
.hmi-quote-size-lg .hmi-quote-text { font-size: 1.5rem; line-height: 1.55; }
@media (min-width: 768px) {
  .hmi-quote-size-lg .hmi-quote-text { font-size: 1.875rem; }
}
.hmi-quote-size-lg .hmi-quote-mark { font-size: 10rem; }

/* Farbvarianten: Quote-Mark-Opacity, Text-Farbe, Avatar-Gradient, Divider-Gradient */
.hmi-quote-color-teal   .hmi-quote-mark     { color: rgba(0, 112, 120, 0.12); }
.hmi-quote-color-teal   .hmi-quote-text     { color: var(--hmi-teal-700); }
.hmi-quote-color-teal   .hmi-quote-avatar   { background: linear-gradient(135deg, #007078 0%, #0274be 100%); }
.hmi-quote-color-teal   .hmi-quote-divider  {
  background: linear-gradient(to right, rgba(0, 112, 120, 0.35), rgba(0, 112, 120, 0.15), transparent);
}

.hmi-quote-color-violet .hmi-quote-mark     { color: rgba(76, 62, 128, 0.14); }
.hmi-quote-color-violet .hmi-quote-text     { color: var(--hmi-violet-600); }
.hmi-quote-color-violet .hmi-quote-avatar   { background: linear-gradient(135deg, #4C3E80 0%, #3f3369 100%); }
.hmi-quote-color-violet .hmi-quote-divider  {
  background: linear-gradient(to right, rgba(76, 62, 128, 0.35), rgba(76, 62, 128, 0.15), transparent);
}

.hmi-quote-color-ink    .hmi-quote-mark     { color: rgba(27, 32, 41, 0.10); }
.hmi-quote-color-ink    .hmi-quote-text     { color: var(--hmi-ink); }
.hmi-quote-color-ink    .hmi-quote-avatar   { background: linear-gradient(135deg, #007078 0%, #0274be 100%); }
.hmi-quote-color-ink    .hmi-quote-divider  {
  background: linear-gradient(to right, rgba(0, 112, 120, 0.35), rgba(0, 112, 120, 0.15), transparent);
}

/* ============================================================================
   HMi Quote Atom — Card-Stil (für Testimonial-Grids)
   ============================================================================
   Quote-Mark außerhalb oben links über einem weißen Card-Container mit
   Schatten + Hover-Lift. Für Grids mit mehreren Testimonials nebeneinander
   (vgl. prototype/_parts, Testimonials-Sektion).
   ============================================================================ */

.hmi-quote-style-card {
  position: relative;
  width: 100%;
  max-width: none;
  padding: 32px 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.hmi-quote-style-card .hmi-quote-mark {
  position: absolute;
  top: -2px;
  left: -6px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9rem;
  line-height: 0.85;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.hmi-quote-style-card.hmi-quote-color-teal   .hmi-quote-mark { color: rgba(0, 112, 120, 0.20); }
.hmi-quote-style-card.hmi-quote-color-violet .hmi-quote-mark { color: rgba(76, 62, 128, 0.20); }
.hmi-quote-style-card.hmi-quote-color-ink    .hmi-quote-mark { color: rgba(0, 112, 120, 0.20); }

.hmi-quote-style-card .hmi-quote-card {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  border-radius: 1rem;
  padding: 40px 36px 32px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  /* overflow hidden, damit BG-Icon und Dot-Overlay an der Card-Kante sauber
     abschneiden (dot-overlay sitzt per position:absolute in Ecken, bg-icon
     ragt meist rechts unten raus). */
  overflow: hidden;
}
.hmi-quote-style-card:hover .hmi-quote-card {
  box-shadow: 0 8px 24px rgba(0, 112, 120, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.03);
  transform: translateY(-4px);
}
.hmi-quote-style-card.hmi-quote-color-violet:hover .hmi-quote-card {
  box-shadow: 0 8px 24px rgba(76, 62, 128, 0.10), 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* Im Card-Stil: Zitat-Text in Ink (nicht farbig), Line-Height geräumig */
.hmi-quote-style-card .hmi-quote-blockquote {
  padding-left: 0;
  margin: 0;
  border: 0;
}
.hmi-quote-style-card .hmi-quote-text {
  color: var(--hmi-ink) !important;
  font-weight: 400;
  line-height: 1.75;
  margin: 0 0 2rem 0;
  flex-grow: 1;
}

/* Footer als Trenner-Zeile (statt separatem hr) */
.hmi-quote-style-card .hmi-quote-footer {
  padding-top: 24px;
  margin-top: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Avatar im Card-Stil etwas größer (56px, wie Prototyp) */
.hmi-quote-style-card .hmi-quote-avatar {
  width: 56px;
  height: 56px;
}
.hmi-quote-style-card .hmi-quote-avatar-initials {
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

/* Size-Scale im Card-Stil: base (16px) → lg (18px) */
.hmi-quote-style-card.hmi-quote-size-sm .hmi-quote-text { font-size: 0.9375rem; }
.hmi-quote-style-card.hmi-quote-size-md .hmi-quote-text { font-size: 1rem; }
.hmi-quote-style-card.hmi-quote-size-lg .hmi-quote-text { font-size: 1.125rem; }

/* Size-unabhängiges Quote-Mark: immer 9rem */
.hmi-quote-style-card.hmi-quote-size-lg .hmi-quote-mark { font-size: 10rem; }

/* ============================================================================
   HMi Card Atom (Container, seit 2026-04-18)
   ============================================================================
   Wird vom [hmi_card]-Shortcode verwendet. Container fuer andere Elemente,
   sieben Stile, vier Padding-Stufen, vier Hover-Effekte.

   Koexistiert mit der Legacy-.hmi-card-Basisklasse, die bereits seit 2026-04-01
   existiert. Die neuen Variant-Modifikatoren (hmi-card-style-*) werden ueber
   die Basis-Klasse gelegt.
   ============================================================================ */

/* Padding-Stufen (ueberschreiben das Base-Padding von 2rem).
   Kompakt behaelt bewusst mehr Luft nach oben, damit das Card-Icon nicht
   zu nah am oberen Card-Rand klebt (kompakt reduziert v.a. Seiten + unten). */
.hmi-card.hmi-card-padding-compact  { padding: 1.75rem 1.25rem 1rem; }
.hmi-card.hmi-card-padding-normal   { padding: 2rem; }
.hmi-card.hmi-card-padding-relaxed  { padding: 2.5rem; }
.hmi-card.hmi-card-padding-spacious { padding: 3rem; }

/* Style: Default - nur Base */

/* Accent-Top als inline-span (neuer Name, um Kollision mit Legacy
   .hmi-card-stripe zu vermeiden, das pain_cards etc. via ::before nutzt).
   Damit kann Badge gleichzeitig ueber den oberen Rand ragen.
   border-top-left/right-radius: inherit, damit der Balken die Card-Rundung
   uebernimmt und nicht als Rechteck ueber die Ecken haengt. */
.hmi-card .hmi-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 2;
  display: block;
  pointer-events: none;
  /* Explizite Top-Rundung passend zur Card (16px = .hmi-card-Basis-border-radius).
     PLUS border-radius: inherit als Fallback, falls der Card-Radius variiert. */
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.hmi-card .hmi-card-accent-teal {
  background: linear-gradient(to right, var(--hmi-teal-400), var(--hmi-teal-500), var(--hmi-teal-600));
}
.hmi-card .hmi-card-accent-violet {
  background: linear-gradient(to right, var(--hmi-violet-500), var(--hmi-violet-600));
}

/* Overflow visible nur wenn Badge aktiv (Badge ragt ueber den oberen Rand).
   Stripe-Styles brauchen KEIN overflow:visible — der Accent liegt innerhalb
   der Card, die Card-Rundung (overflow:hidden aus Legacy-Base) clippt ihn
   an den Ecken automatisch und sauber. */
.hmi-card.hmi-card-has-badge {
  overflow: visible;
}

/* Style: Elevated (staerkerer Schatten) */
.hmi-card.hmi-card-style-elevated {
  box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.08);
}

/* Style: Bordered (Rahmen + weniger Schatten) */
.hmi-card.hmi-card-style-bordered {
  border: 1px solid var(--hmi-cool-100);
  box-shadow: none;
}

/* Style: Moderation-Step (linker Farb-Balken) */
.hmi-card.hmi-card-style-moderation-step {
  border-left: 4px solid var(--hmi-teal-500);
}

/* Style: Premium (Violet Glow) */
.hmi-card.hmi-card-style-premium {
  box-shadow: var(--hmi-shadow-premium);
}

/* Hover-Effekte */
.hmi-card.hmi-card-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hmi-card.hmi-card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}
.hmi-card.hmi-card-hover-glow-teal {
  transition: box-shadow 0.3s ease;
}
.hmi-card.hmi-card-hover-glow-teal:hover {
  box-shadow: 0 8px 30px rgba(0,112,120,0.18), 0 2px 8px rgba(0,0,0,0.06);
}
.hmi-card.hmi-card-hover-glow-violet {
  transition: box-shadow 0.3s ease;
}
.hmi-card.hmi-card-hover-glow-violet:hover {
  box-shadow: 0 16px 40px rgba(76,62,128,0.22), 0 4px 12px rgba(76,62,128,0.08);
}

/* ============================================================================
   HMi Card Atom — Prescriptive (seit 2026-04-18)
   ============================================================================
   Erweitert die Legacy-Base .hmi-card um:
   - Badge (oben ueberragend, 3 Positionen, 4 Stile)
   - Icon-Block (6 Stile, 3 Groessen, 3 Alignments)
   - Title + Text (mit UL/OL-Support)
   - Button-Wrapper
   - Hintergrund-Varianten (uni, dotted-Mask, Gradient subtile/strong)
   - Content-Alignment
   ============================================================================ */

/* Alle direkten Kinder ueber der Hintergrund-Deko (dots etc.) positionieren */
.hmi-card > * { position: relative; z-index: 1; }
.hmi-card > .hmi-card-accent { z-index: 2; }
.hmi-card > .hmi-card-badge  { z-index: 3; }

/* Card-Hoehen-Normalisierung: Alle Cards in einer Bakery-Row / Grid sind
   gleich hoch, Inhalte vertikal gestaffelt per flex-column, Button-Wrapper
   per margin-top:auto ans untere Ende — damit stehen Buttons in einer
   Reihe immer auf gleicher Hoehe, unabhaengig von Titel-/Text-Laengen. */
.hmi-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hmi-card .hmi-card-button-wrapper {
  margin-top: auto;
  padding-top: 1rem;
}

/* Bakery/Impreza-Integration: Wenn eine HMi-Card in einer Bakery-Row
   (g-cols / vc_row) steckt, zwingen wir die Row + Column in stretch-Modus,
   damit die Cards die volle Zeilenhoehe einnehmen. Impreza's valign_top
   setzt sonst align-items:flex-start, wodurch Cards ihre natuerliche Hoehe
   behalten und die Buttons nicht in einer Reihe stehen.
   Nutzt :has() (Browser-Support seit Ende 2023) — Fallback ist das
   height:100% oben, das nur bei bereits gestretchtem Parent greift. */
.g-cols:has(.hmi-card),
.vc_row:has(.hmi-card) {
  align-items: stretch !important;
}
.g-cols:has(.hmi-card) > .wpb_column,
.g-cols:has(.hmi-card) > .vc_column_container,
.vc_row:has(.hmi-card) > .wpb_column,
.vc_row:has(.hmi-card) > .vc_column_container {
  display: flex;
  flex-direction: column;
}
.wpb_column:has(> .vc_column-inner > .hmi-card) > .vc_column-inner,
.vc_column_container:has(> .vc_column-inner > .hmi-card) > .vc_column-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.vc_column-inner:has(> .hmi-card) > .hmi-card,
.vc_column-inner:has(> .wpb_wrapper > .hmi-card) > .wpb_wrapper {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.wpb_wrapper:has(> .hmi-card) > .hmi-card {
  flex: 1 1 auto;
}

/* ---- Badge ---- */
.hmi-card-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3125rem 0.75rem;
  font-family: 'Ubuntu', sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
/* Badge sitzt MITTIG AUF der Accent-Stripe (top: 0, transform -50%). Damit
   die Stripe nicht durch den Badge hindurchscheint, bekommt der Badge eine
   OPAKE Hintergrundfarbe — vorher war er rgba(.., .10) transparent, was
   bei daruberliegender Stripe (gleiche Farbe) als "hinter der Linie" wirkte.
   Die opake Farbe ist identisch zur visuellen Wirkung des soft-Looks auf
   weisser Card (10%-teal auf weiss = #e6f0f1, analog fuer violet/navy). */
.hmi-card-badge-top-center { top: 0; left: 50%; transform: translate(-50%, -50%); }
.hmi-card-badge-top-left   { top: 0; left: 1.5rem;  transform: translateY(-50%); }
.hmi-card-badge-top-right  { top: 0; right: 1.5rem; transform: translateY(-50%); }

/* Soft-Varianten: opake Farben statt rgba(.., .10) — sonst scheint die Top-
   Stripe gleicher Farbe durch den Badge durch ("Badge hinter der Linie").
   Die gewaehlten Werte entsprechen visuell 10%-Overlay auf weisser Card. */
.hmi-card-badge-soft-teal    { background-color: #e6f0f1; color: var(--hmi-teal-500); }
.hmi-card-badge-soft-violet  { background-color: #edecf2; color: var(--hmi-violet-500); }
.hmi-card-badge-solid-teal   { background-color: var(--hmi-teal-500);   color: #ffffff; }
.hmi-card-badge-solid-violet { background-color: var(--hmi-violet-500); color: #ffffff; }

/* ---- Icon-Block ---- */
/* Card bindet fuer das Icon das hmi_icon_box-Atom ein (Single Source of Truth).
   Hier bleibt nur der Wrapper-Abstand zum Title. Alle Style-/Size-/Align-
   Varianten kommen aus dem Icon-Box-Atom (.hmi-icon-box-*). */
.hmi-card-icon-wrapper {
  display: block;
  margin-bottom: 1rem;
}

/* --- Card Stat-Value (Alternative zum Icon) --------------------------------
   Plain grosse Zahl ohne Box — Pattern aus dem Prototyp ("70%", "50-200%",
   "40%"). Priorisiert ueber dem Icon im Header-Slot der Card. Alignment
   erbt von .hmi-card-content-align-* auf dem Parent. */
.hmi-card-stat {
  font-size: 2.25rem;    /* ~text-4xl */
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem; /* eng an den folgenden Titel gekoppelt */
}
@media (min-width: 768px) {
  .hmi-card-stat { font-size: 2.5rem; }
}
/* Title direkt nach einem Stat: zusaetzliches Theme-Padding neutralisieren,
   damit der Stat+Title-Block wirklich dicht steht. */
.hmi-card-stat + .hmi-card-title {
  padding-top: 0;
  margin-top: 0;
}
.hmi-card-stat-color-teal   { color: var(--hmi-teal-500, #007078); }
.hmi-card-stat-color-violet { color: var(--hmi-violet-500, #7c3aed); }
.hmi-card-stat-color-ink    { color: var(--hmi-ink, #002528); }
/* Das Icon-Box-Atom im Card-Kontext: kein eigener bottom-margin mehr, das
   macht der Wrapper oben. */
.hmi-card-icon-wrapper .hmi-icon-box {
  margin-bottom: 0;
}
.hmi-card-icon-wrapper .hmi-icon-box-icon-wrapper {
  margin-bottom: 0;
}

/* ---- Avatar-Header-Block (Alternative zum Icon) ---- */
.hmi-card-avatar-wrapper {
  display: block;
  margin-bottom: 1rem;
}
.hmi-card-avatar-wrapper .hmi-avatar-stack { margin: 0; }

/* ---- Trust-Badges (Footer-Reihe vor dem Button) ---- */
.hmi-card-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* ---- Preis-Block (grosser Preis + kleiner Zusatztext) ---- */
.hmi-card-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.hmi-card-price-value {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--hmi-ink, #0f131f);
  letter-spacing: -0.01em;
}
.hmi-card-price-note {
  font-size: 0.8125rem;
  color: var(--hmi-ink-light, #4a5568);
  font-weight: 400;
}

/* ---- USP-Liste (Aufzaehlungspunkte mit Icon) ---- */
.hmi-card-usps {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hmi-card-usp-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-card-usp-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  line-height: 1;
}
.hmi-card-usp-icon i,
.hmi-card-usp-icon svg {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  fill: currentColor;
}
/* USP-Icon-Farben (Standardpalette + Success/Amber fuer Akzente) */
.hmi-card-usp-icon-teal     { color: var(--hmi-teal-500, #007078); }
.hmi-card-usp-icon-violet   { color: var(--hmi-violet-500, #4c3e80); }
.hmi-card-usp-icon-navy     { color: var(--hmi-navy-500, #0274be); }
.hmi-card-usp-icon-neutral  { color: var(--hmi-ink-light, #4a5568); }
.hmi-card-usp-icon-success  { color: #16a34a; }
.hmi-card-usp-icon-amber    { color: #f59e0b; }
.hmi-card-usp-text {
  flex: 1 1 auto;
}

/* ---- Title + Text ---- */
.hmi-card-title {
  margin: 0 0 0.75rem 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hmi-ink);
  line-height: 1.3;
}
.hmi-card-text {
  font-family: 'Ubuntu', sans-serif;
  font-size: 0.9375rem;
  color: var(--hmi-ink-light);
  line-height: 1.55;
}
.hmi-card-text p  { margin: 0 0 0.75rem; }
.hmi-card-text p:last-child { margin-bottom: 0; }
.hmi-card-text ul,
.hmi-card-text ol { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
.hmi-card-text li { margin-bottom: 0.25rem; }
.hmi-card-text a  { color: var(--hmi-teal-500); text-decoration: underline; }

/* Content-Alignment */
.hmi-card-content-align-left   .hmi-card-stat,
.hmi-card-content-align-left   .hmi-card-title,
.hmi-card-content-align-left   .hmi-card-text,
.hmi-card-content-align-left   .hmi-card-button-wrapper { text-align: left; }
.hmi-card-content-align-center .hmi-card-stat,
.hmi-card-content-align-center .hmi-card-title,
.hmi-card-content-align-center .hmi-card-text,
.hmi-card-content-align-center .hmi-card-button-wrapper { text-align: center; }
.hmi-card-content-align-right  .hmi-card-stat,
.hmi-card-content-align-right  .hmi-card-title,
.hmi-card-content-align-right  .hmi-card-text,
.hmi-card-content-align-right  .hmi-card-button-wrapper { text-align: right; }

/* ---- Button-Wrapper ---- */
.hmi-card-button-wrapper {
  margin-top: 1.25rem;
}

/* Button-Breite "Voll": Button fuellt die komplette Card-Breite aus —
   typisch fuer Pricing-/CTA-Cards. Der Wrapper wird zu display:block und
   der Button darin streckt sich. Label bleibt dabei zentriert. */
.hmi-card-button-wrapper-width-full { display: block; }
.hmi-card-button-wrapper-width-full > .hmi-btn {
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ---- Hintergrund-Varianten ---- */
.hmi-card.hmi-card-bg-white    { background-color: #ffffff; }
.hmi-card.hmi-card-bg-cool-50  { background-color: var(--hmi-cool-50); }
.hmi-card.hmi-card-bg-sand-50  { background-color: var(--hmi-sand-50); }

/* Dotted-Pattern oben rechts (maskiert, verblasst Richtung Card-Mitte) */
.hmi-card.hmi-card-bg-dots-teal-tr,
.hmi-card.hmi-card-bg-dots-violet-tr {
  background-color: #ffffff;
}
.hmi-card.hmi-card-bg-dots-teal-tr::after,
.hmi-card.hmi-card-bg-dots-violet-tr::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 160px;
  pointer-events: none;
  z-index: 0;
  background-size: 10px 10px;
  mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 0%, transparent 75%);
}
.hmi-card.hmi-card-bg-dots-teal-tr::after {
  background-image: radial-gradient(circle, rgba(0, 112, 120, 0.28) 1px, transparent 1.5px);
}
.hmi-card.hmi-card-bg-dots-violet-tr::after {
  background-image: radial-gradient(circle, rgba(76, 62, 128, 0.28) 1px, transparent 1.5px);
}

/* Gradient-Backgrounds */
.hmi-card.hmi-card-bg-gradient-teal-subtle {
  background: linear-gradient(135deg, #ffffff 0%, rgba(0, 112, 120, 0.05) 100%);
}
.hmi-card.hmi-card-bg-gradient-teal-strong {
  background: linear-gradient(135deg, #ffffff 0%, rgba(0, 112, 120, 0.14) 100%);
}
.hmi-card.hmi-card-bg-gradient-violet-subtle {
  background: linear-gradient(135deg, #ffffff 0%, rgba(76, 62, 128, 0.05) 100%);
}
.hmi-card.hmi-card-bg-gradient-violet-strong {
  background: linear-gradient(135deg, #ffffff 0%, rgba(76, 62, 128, 0.14) 100%);
}

/* ---- Cross-Color Gradients (Teal ↔ Violet) — Prototyp Sektion 15 ---- */

/* 15a: Teal → Violet subtil (Standard-Highlight-Card) */
.hmi-card.hmi-card-bg-gradient-teal-violet-subtle {
  background: linear-gradient(135deg,
    rgba(0, 112, 120, 0.07) 0%,
    rgba(255, 255, 255, 0.95) 45%,
    rgba(76, 62, 128, 0.05) 100%);
}

/* 15b: Violet → Teal subtil (Invertiert, für Abwechslung) */
.hmi-card.hmi-card-bg-gradient-violet-teal-subtle {
  background: linear-gradient(135deg,
    rgba(76, 62, 128, 0.06) 0%,
    rgba(255, 255, 255, 0.95) 45%,
    rgba(0, 112, 120, 0.06) 100%);
}

/* 15c: Compact Teal → Violet (für kompakte Grid-Cards, 145deg für etwas anderen Winkel) */
.hmi-card.hmi-card-bg-gradient-compact-teal-violet {
  background: linear-gradient(145deg,
    rgba(0, 112, 120, 0.06) 0%,
    rgba(255, 255, 255, 0.97) 50%,
    rgba(76, 62, 128, 0.04) 100%);
}
.hmi-card.hmi-card-bg-gradient-compact-violet-teal {
  background: linear-gradient(145deg,
    rgba(76, 62, 128, 0.05) 0%,
    rgba(255, 255, 255, 0.97) 50%,
    rgba(0, 112, 120, 0.05) 100%);
}

/* 15d: Full-Width CTA Banner — 5 Color-Stops, 120deg */
.hmi-card.hmi-card-bg-gradient-banner {
  background: linear-gradient(120deg,
    rgba(0, 112, 120, 0.08) 0%,
    rgba(238, 251, 251, 0.60) 25%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(243, 241, 249, 0.50) 75%,
    rgba(76, 62, 128, 0.06) 100%);
}

/* 15e: Intensiver Gradient — doppelte Sättigung, 5 Color-Stops */
.hmi-card.hmi-card-bg-gradient-intense {
  background: linear-gradient(135deg,
    rgba(0, 112, 120, 0.14) 0%,
    rgba(213, 244, 245, 0.40) 20%,
    rgba(255, 255, 255, 0.90) 50%,
    rgba(243, 241, 249, 0.50) 80%,
    rgba(76, 62, 128, 0.10) 100%);
}

/* ---- Dunkle Card-Backgrounds (mit Glow oben rechts, fuer Kontext-/Highlight-Cards) ----
   Pattern aus Prototyp „Integratives Prinzip"-Kontext-Card. Schriftfarben werden
   weiter unten automatisch invertiert (siehe Block „Auto-Inversion auf Dark-BG"). */
.hmi-card.hmi-card-bg-dark-teal {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08) 0%, transparent 50%),
    linear-gradient(135deg, var(--hmi-teal-900, #002528) 0%, var(--hmi-teal-800, #003c40) 50%, var(--hmi-teal-900, #002528) 100%);
  color: #ffffff;
}
.hmi-card.hmi-card-bg-dark-violet {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,0.08) 0%, transparent 50%),
    linear-gradient(135deg, #1c1640 0%, var(--hmi-violet-700, #382f5e) 50%, #1c1640 100%);
  color: #ffffff;
}

/* ---- Auto-Inversion auf Dark-BG ---- */
/* Ueberschriften: weiß */
.hmi-card.hmi-card-bg-dark-teal h1,
.hmi-card.hmi-card-bg-dark-teal h2,
.hmi-card.hmi-card-bg-dark-teal h3,
.hmi-card.hmi-card-bg-dark-teal h4,
.hmi-card.hmi-card-bg-dark-teal h5,
.hmi-card.hmi-card-bg-dark-teal h6,
.hmi-card.hmi-card-bg-dark-teal .hmi-heading,
.hmi-card.hmi-card-bg-dark-teal .hmi-card-title,
.hmi-card.hmi-card-bg-dark-violet h1,
.hmi-card.hmi-card-bg-dark-violet h2,
.hmi-card.hmi-card-bg-dark-violet h3,
.hmi-card.hmi-card-bg-dark-violet h4,
.hmi-card.hmi-card-bg-dark-violet h5,
.hmi-card.hmi-card-bg-dark-violet h6,
.hmi-card.hmi-card-bg-dark-violet .hmi-heading,
.hmi-card.hmi-card-bg-dark-violet .hmi-card-title { color: #ffffff; }
/* Fließtext: weiß mit reduzierter Deckkraft (etablierter Prototyp-Wert) */
.hmi-card.hmi-card-bg-dark-teal p,
.hmi-card.hmi-card-bg-dark-teal .hmi-card-text,
.hmi-card.hmi-card-bg-dark-teal li,
.hmi-card.hmi-card-bg-dark-violet p,
.hmi-card.hmi-card-bg-dark-violet .hmi-card-text,
.hmi-card.hmi-card-bg-dark-violet li { color: rgba(255,255,255,0.78); }
/* Eyebrow: helle Akzentfarbe passend zur BG-Farbfamilie */
.hmi-card.hmi-card-bg-dark-teal .hmi-eyebrow-atom,
.hmi-card.hmi-card-bg-dark-teal .hmi-eyebrow-atom-label,
.hmi-card.hmi-card-bg-dark-teal .hmi-text-eyebrow { color: var(--hmi-teal-300, #5fd6dc); }
.hmi-card.hmi-card-bg-dark-violet .hmi-eyebrow-atom,
.hmi-card.hmi-card-bg-dark-violet .hmi-eyebrow-atom-label,
.hmi-card.hmi-card-bg-dark-violet .hmi-text-eyebrow { color: #c4b5fd; }
/* Links und Button-Atom (Ghost/Text-Variante): weiß, Hover-Akzent in Pastellton */
.hmi-card.hmi-card-bg-dark-teal a,
.hmi-card.hmi-card-bg-dark-violet a { color: #ffffff; }
.hmi-card.hmi-card-bg-dark-teal a:hover    { color: var(--hmi-teal-200, #afe9ec); }
.hmi-card.hmi-card-bg-dark-violet a:hover  { color: #c4b5fd; }
/* Stripe-Akzent oben passt nicht zu dunkler Card → ausblenden */
.hmi-card.hmi-card-bg-dark-teal .hmi-card-accent,
.hmi-card.hmi-card-bg-dark-teal .hmi-card-stripe::before,
.hmi-card.hmi-card-bg-dark-violet .hmi-card-accent,
.hmi-card.hmi-card-bg-dark-violet .hmi-card-stripe::before { display: none; }
/* Border bei .hmi-card-style-bordered weniger sichtbar auf dunklem BG */
.hmi-card.hmi-card-bg-dark-teal.hmi-card-style-bordered,
.hmi-card.hmi-card-bg-dark-violet.hmi-card-style-bordered { border-color: rgba(255,255,255,0.15); }

/* ---- Dot-Pattern-Overlay (unabhängig vom Background, als eigener Layer) ---- */

.hmi-card.hmi-card-has-dot-overlay { position: relative; }

.hmi-card-dot-overlay {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}

/* Standard-Position oben rechts — 50% Höhe und Breite der Card */
.hmi-card-dot-overlay-teal-tr,
.hmi-card-dot-overlay-violet-tr,
.hmi-card-dot-overlay-fine-teal-tr,
.hmi-card-dot-overlay-fine-violet-tr {
  width: 50%;
  height: 50%;
  mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
}

/* Rechte Seite (für Full-Width-Banner) */
.hmi-card-dot-overlay-teal-right,
.hmi-card-dot-overlay-violet-right {
  width: 33%;
  height: 100%;
  mask-image: radial-gradient(ellipse at right center, black 10%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at right center, black 10%, transparent 60%);
  opacity: 0.4;
}

/* Standard-Dichte (20px spacing, 1px dots) */
.hmi-card-dot-overlay-teal-tr,
.hmi-card-dot-overlay-teal-right {
  background-image: radial-gradient(circle, rgba(0, 112, 120, 0.28) 1px, transparent 1.5px);
  background-size: 20px 20px;
}
.hmi-card-dot-overlay-violet-tr,
.hmi-card-dot-overlay-violet-right {
  background-image: radial-gradient(circle, rgba(76, 62, 128, 0.28) 1px, transparent 1.5px);
  background-size: 20px 20px;
}

/* Feine Dichte (12px spacing, 0.8px dots) */
.hmi-card-dot-overlay-fine-teal-tr {
  background-image: radial-gradient(circle, rgba(0, 112, 120, 0.22) 0.8px, transparent 1.2px);
  background-size: 12px 12px;
  opacity: 0.6;
}
.hmi-card-dot-overlay-fine-violet-tr {
  background-image: radial-gradient(circle, rgba(76, 62, 128, 0.22) 0.8px, transparent 1.2px);
  background-size: 12px 12px;
  opacity: 0.6;
}

/* Card-Content muss über dem Overlay liegen */
.hmi-card.hmi-card-has-dot-overlay > *:not(.hmi-card-dot-overlay):not(.hmi-card-bg-icon):not(.hmi-card-accent) {
  position: relative;
  z-index: 1;
}

/* ---- Hintergrund-Icon (unten rechts, angeschnitten, low opacity) ---- */

.hmi-card.hmi-card-has-bg-icon { position: relative; overflow: hidden; }

.hmi-card-bg-icon {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  line-height: 0;
  transition: color 0.3s ease, opacity 0.3s ease;
}

/* Größen */
.hmi-card-bg-icon.hmi-card-bg-icon-md { width: 6rem;  height: 6rem;  }
.hmi-card-bg-icon.hmi-card-bg-icon-lg { width: 8rem;  height: 8rem;  }
.hmi-card-bg-icon.hmi-card-bg-icon-xl { width: 10rem; height: 10rem; }

/* Farben mit Opacity 0.08 (Hover 0.12) */
.hmi-card-bg-icon-teal   { color: rgba(0, 112, 120, 0.08); }
.hmi-card-bg-icon-violet { color: rgba(76, 62, 128, 0.08); }
.hmi-card-bg-icon-navy   { color: rgba(0, 37, 40,  0.08); }

.hmi-card:hover .hmi-card-bg-icon-teal   { color: rgba(0, 112, 120, 0.12); }
.hmi-card:hover .hmi-card-bg-icon-violet { color: rgba(76, 62, 128, 0.12); }
.hmi-card:hover .hmi-card-bg-icon-navy   { color: rgba(0, 37, 40,  0.12); }

.hmi-card-bg-icon i,
.hmi-card-bg-icon svg {
  width: 100%;
  height: 100%;
  font-size: inherit;
  line-height: 1;
}
/* Font-Awesome Icon: Eigengröße übersteuern, damit es die volle Box ausfüllt */
.hmi-card-bg-icon.hmi-card-bg-icon-md i { font-size: 6rem;  }
.hmi-card-bg-icon.hmi-card-bg-icon-lg i { font-size: 8rem;  }
.hmi-card-bg-icon.hmi-card-bg-icon-xl i { font-size: 10rem; }

/* Content über BG-Icon */
.hmi-card.hmi-card-has-bg-icon > *:not(.hmi-card-dot-overlay):not(.hmi-card-bg-icon):not(.hmi-card-accent) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hmi-card-bg-icon { transition: none; }
}

/* =========================================================================
   SHARED BG-DECOR UTILITIES (generisch für ALLE Komponenten)

   Idee: Jede Komponente, die einen Box-Container rendert, kann diese
   Utility-Klassen am Root-Element anbringen, um Gradient-Hintergrund,
   Dot-Overlay und ein dekoratives Background-Icon zu erhalten — identisch
   zum hmi_card-Design-System.

   Voraussetzungen für den Container:
     - position: relative (wird von .hmi-bg-decor-container erzwungen)
     - overflow: hidden (für Icon-Anschnitt; von .hmi-bg-decor-container)

   Layer-Reihenfolge (z-index):
     0  = Container-Background (Gradient)
     0  = Dot-Overlay (absolut positioniert, pointer-events:none)
     0  = BG-Icon (absolut positioniert, pointer-events:none)
     1+ = Inhalts-Elemente (via .hmi-bg-decor-container > * Regel)
   ========================================================================= */

.hmi-bg-decor-container {
  position: relative;
  overflow: hidden;
}
.hmi-bg-decor-container > *:not(.hmi-dot-overlay):not(.hmi-bg-icon):not(.hmi-bg-accent) {
  position: relative;
  z-index: 1;
}

/* ---- Gradient-Hintergründe (auf Container anwenden) ---- */
.hmi-bg-gradient-teal-subtle {
  background: linear-gradient(135deg, #ffffff 0%, rgba(0, 112, 120, 0.05) 100%);
}
.hmi-bg-gradient-teal-strong {
  background: linear-gradient(135deg, #ffffff 0%, rgba(0, 112, 120, 0.14) 100%);
}
.hmi-bg-gradient-violet-subtle {
  background: linear-gradient(135deg, #ffffff 0%, rgba(76, 62, 128, 0.05) 100%);
}
.hmi-bg-gradient-violet-strong {
  background: linear-gradient(135deg, #ffffff 0%, rgba(76, 62, 128, 0.14) 100%);
}

/* Cross-Color (Prototyp Sektion 15) */
.hmi-bg-gradient-teal-violet-subtle {
  background: linear-gradient(135deg,
    rgba(0, 112, 120, 0.07) 0%,
    rgba(255, 255, 255, 0.95) 45%,
    rgba(76, 62, 128, 0.05) 100%);
}
.hmi-bg-gradient-violet-teal-subtle {
  background: linear-gradient(135deg,
    rgba(76, 62, 128, 0.06) 0%,
    rgba(255, 255, 255, 0.95) 45%,
    rgba(0, 112, 120, 0.06) 100%);
}
.hmi-bg-gradient-compact-teal-violet {
  background: linear-gradient(145deg,
    rgba(0, 112, 120, 0.06) 0%,
    rgba(255, 255, 255, 0.97) 50%,
    rgba(76, 62, 128, 0.04) 100%);
}
.hmi-bg-gradient-compact-violet-teal {
  background: linear-gradient(145deg,
    rgba(76, 62, 128, 0.05) 0%,
    rgba(255, 255, 255, 0.97) 50%,
    rgba(0, 112, 120, 0.05) 100%);
}
.hmi-bg-gradient-banner {
  background: linear-gradient(120deg,
    rgba(0, 112, 120, 0.08) 0%,
    rgba(238, 251, 251, 0.60) 25%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(243, 241, 249, 0.50) 75%,
    rgba(76, 62, 128, 0.06) 100%);
}
.hmi-bg-gradient-intense {
  background: linear-gradient(135deg,
    rgba(0, 112, 120, 0.14) 0%,
    rgba(213, 244, 245, 0.40) 20%,
    rgba(255, 255, 255, 0.90) 50%,
    rgba(243, 241, 249, 0.50) 80%,
    rgba(76, 62, 128, 0.10) 100%);
}

/* ---- Dot-Pattern-Overlay als separate Schicht ---- */
.hmi-dot-overlay {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
}

/* Standard oben rechts, ca. halbe Card */
.hmi-dot-overlay-teal-tr,
.hmi-dot-overlay-violet-tr,
.hmi-dot-overlay-fine-teal-tr,
.hmi-dot-overlay-fine-violet-tr {
  width: 50%;
  height: 50%;
  mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
}

/* Rechter Bereich — für Full-Width-Banner */
.hmi-dot-overlay-teal-right,
.hmi-dot-overlay-violet-right {
  width: 33%;
  height: 100%;
  mask-image: radial-gradient(ellipse at right center, black 10%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at right center, black 10%, transparent 60%);
  opacity: 0.4;
}

/* Dichten */
.hmi-dot-overlay-teal-tr,
.hmi-dot-overlay-teal-right {
  background-image: radial-gradient(circle, rgba(0, 112, 120, 0.28) 1px, transparent 1.5px);
  background-size: 20px 20px;
}
.hmi-dot-overlay-violet-tr,
.hmi-dot-overlay-violet-right {
  background-image: radial-gradient(circle, rgba(76, 62, 128, 0.28) 1px, transparent 1.5px);
  background-size: 20px 20px;
}
.hmi-dot-overlay-fine-teal-tr {
  background-image: radial-gradient(circle, rgba(0, 112, 120, 0.22) 0.8px, transparent 1.2px);
  background-size: 12px 12px;
  opacity: 0.6;
}
.hmi-dot-overlay-fine-violet-tr {
  background-image: radial-gradient(circle, rgba(76, 62, 128, 0.22) 0.8px, transparent 1.2px);
  background-size: 12px 12px;
  opacity: 0.6;
}

/* ---- BG-Icon (unten rechts, angeschnitten, low opacity) ---- */
.hmi-bg-icon {
  position: absolute;
  right: -1rem;
  bottom: -1rem;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  line-height: 0;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.hmi-bg-icon.hmi-bg-icon-md { width: 6rem;  height: 6rem;  }
.hmi-bg-icon.hmi-bg-icon-lg { width: 8rem;  height: 8rem;  }
.hmi-bg-icon.hmi-bg-icon-xl { width: 10rem; height: 10rem; }

.hmi-bg-icon-teal   { color: rgba(0, 112, 120, 0.08); }
.hmi-bg-icon-violet { color: rgba(76, 62, 128, 0.08); }
.hmi-bg-icon-navy   { color: rgba(0, 37, 40,  0.08); }

.hmi-bg-decor-container:hover .hmi-bg-icon-teal   { color: rgba(0, 112, 120, 0.12); }
.hmi-bg-decor-container:hover .hmi-bg-icon-violet { color: rgba(76, 62, 128, 0.12); }
.hmi-bg-decor-container:hover .hmi-bg-icon-navy   { color: rgba(0, 37, 40,  0.12); }

.hmi-bg-icon i,
.hmi-bg-icon svg {
  width: 100%;
  height: 100%;
  font-size: inherit;
  line-height: 1;
}
.hmi-bg-icon.hmi-bg-icon-md i { font-size: 6rem;  }
.hmi-bg-icon.hmi-bg-icon-lg i { font-size: 8rem;  }
.hmi-bg-icon.hmi-bg-icon-xl i { font-size: 10rem; }

@media (prefers-reduced-motion: reduce) {
  .hmi-bg-icon { transition: none; }
}

/* ============================================================================
   HMi Eyebrow Atom (seit 2026-04-19)
   ============================================================================
   Wird vom [hmi_eyebrow]-Shortcode verwendet. Kleines Uppercase-Label fuer
   standalone Einsatz (nicht als Teil einer Heading). Eigene Klasse
   .hmi-eyebrow-atom (nicht .hmi-eyebrow), um Kollision mit der im hmi_heading
   eingebetteten Eyebrow-Variante zu vermeiden.
   ============================================================================ */

.hmi-eyebrow-atom {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.hmi-eyebrow-atom-icon { display: inline-flex; align-items: center; font-size: 0.85em; }

/* Sizes */
.hmi-eyebrow-atom-size-sm { font-size: 0.625rem; }
.hmi-eyebrow-atom-size-md { font-size: 0.75rem; }
.hmi-eyebrow-atom-size-lg { font-size: 0.875rem; }

/* Align — Wrapper als Block, damit text-align durchschlaegt */
.hmi-eyebrow-atom-align-left,
.hmi-eyebrow-atom-align-center,
.hmi-eyebrow-atom-align-right { display: inline-flex; }

/* Farben */
.hmi-eyebrow-atom-color-teal   { color: var(--hmi-teal-500); }
.hmi-eyebrow-atom-color-violet { color: var(--hmi-violet-500); }
.hmi-eyebrow-atom-color-sand   { color: var(--hmi-sand-300); }
.hmi-eyebrow-atom-color-ink    { color: var(--hmi-ink); }
.hmi-eyebrow-atom-color-white  { color: #ffffff; }

/* ============================================================================
   HMi Number Badge Atom (seit 2026-04-19)
   ============================================================================
   Wird vom [hmi_number_badge]-Shortcode verwendet. Runder oder quadratischer
   Badge mit Nummer/Kennung. Acht Stile, zwei Formen, vier Groessen.
   ============================================================================ */

.hmi-number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  user-select: none;
}

/* Form */
.hmi-number-badge-shape-circle { border-radius: 9999px; }
.hmi-number-badge-shape-square { border-radius: 12px; }

/* Groessen: Container + Fontsize */
.hmi-number-badge-size-sm { width: 32px;  height: 32px;  font-size: 0.8125rem; }
.hmi-number-badge-size-md { width: 40px;  height: 40px;  font-size: 0.9375rem; }
.hmi-number-badge-size-lg { width: 56px;  height: 56px;  font-size: 1.25rem; }
.hmi-number-badge-size-xl { width: 72px;  height: 72px;  font-size: 1.625rem; }

/* Stile: Solid */
.hmi-number-badge-style-solid-teal   { background-color: var(--hmi-teal-500);   color: #ffffff; }
.hmi-number-badge-style-solid-violet { background-color: var(--hmi-violet-500); color: #ffffff; }
.hmi-number-badge-style-solid-ink    { background-color: var(--hmi-ink);        color: #ffffff; }

/* Stile: Soft (transparenter Hintergrund) */
.hmi-number-badge-style-soft-teal {
  background-color: rgba(0, 112, 120, 0.12);
  color: var(--hmi-teal-500);
}
.hmi-number-badge-style-soft-violet {
  background-color: rgba(76, 62, 128, 0.12);
  color: var(--hmi-violet-500);
}

/* Stile: Outline */
.hmi-number-badge-style-outline-teal {
  background-color: transparent;
  color: var(--hmi-teal-500);
  border: 2px solid var(--hmi-teal-500);
}
.hmi-number-badge-style-outline-violet {
  background-color: transparent;
  color: var(--hmi-violet-500);
  border: 2px solid var(--hmi-violet-500);
}

/* Stile: Gradient */
.hmi-number-badge-style-gradient-teal-navy {
  background: linear-gradient(135deg, var(--hmi-teal-500) 0%, var(--hmi-navy-500) 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 112, 120, 0.25);
}

/* ============================================================================
   HMi Toggle Atom (seit 2026-04-19)
   ============================================================================
   Wird vom [hmi_toggle]-Shortcode verwendet. Zwei-Optionen-Umschalter mit
   drei Stilen: Pill (Slider-BG), Switch (Knob), Tabs.
   ============================================================================ */

.hmi-toggle-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: 'Ubuntu', sans-serif;
}
.hmi-toggle-align-left   { align-items: flex-start; }
.hmi-toggle-align-center { align-items: center; }
.hmi-toggle-align-right  { align-items: flex-end; }

.hmi-toggle-helper {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--hmi-ink-light);
  line-height: 1.4;
}

.hmi-toggle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  user-select: none;
}

.hmi-toggle-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  color: var(--hmi-ink-light);
  transition: color 0.2s ease;
  z-index: 1;
}
.hmi-toggle-option.is-active { color: #ffffff; }

.hmi-toggle-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border-radius: inherit;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.hmi-toggle-active-a .hmi-toggle-slider { transform: translateX(0%); }
.hmi-toggle-active-b .hmi-toggle-slider { transform: translateX(100%); }

/* Sizes */
.hmi-toggle-size-sm { font-size: 0.8125rem; }
.hmi-toggle-size-sm .hmi-toggle-option { padding: 0.375rem 0.875rem; }
.hmi-toggle-size-md { font-size: 0.9375rem; }
.hmi-toggle-size-md .hmi-toggle-option { padding: 0.5rem 1.25rem; }
.hmi-toggle-size-lg { font-size: 1rem; }
.hmi-toggle-size-lg .hmi-toggle-option { padding: 0.625rem 1.5rem; }

/* Stil: Pill (Standard) — Slider mit runder Border */
.hmi-toggle-style-pill {
  background-color: var(--hmi-cool-100);
  border-radius: 9999px;
  padding: 0.25rem;
}
.hmi-toggle-style-pill .hmi-toggle-slider {
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: calc(50% - 0.25rem);
  border-radius: 9999px;
}
.hmi-toggle-style-pill.hmi-toggle-color-teal   .hmi-toggle-slider { background-color: var(--hmi-teal-500); }
.hmi-toggle-style-pill.hmi-toggle-color-violet .hmi-toggle-slider { background-color: var(--hmi-violet-500); }
.hmi-toggle-style-pill .hmi-toggle-option { border-radius: 9999px; }

/* Stil: Switch — klassischer Toggle mit Knob */
.hmi-toggle-style-switch {
  background-color: var(--hmi-cool-100);
  border-radius: 9999px;
  padding: 0;
}
.hmi-toggle-style-switch .hmi-toggle-option {
  padding: 0.5rem 1rem;
  color: var(--hmi-ink-light);
}
.hmi-toggle-style-switch .hmi-toggle-option.is-active { color: var(--hmi-ink); }
.hmi-toggle-style-switch .hmi-toggle-slider {
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 9999px;
}
.hmi-toggle-style-switch.hmi-toggle-color-teal   .hmi-toggle-option.is-active { color: var(--hmi-teal-500); }
.hmi-toggle-style-switch.hmi-toggle-color-violet .hmi-toggle-option.is-active { color: var(--hmi-violet-500); }

/* Stil: Tabs — flache Tab-Buttons mit Bottom-Border */
.hmi-toggle-style-tabs {
  background-color: transparent;
  border-bottom: 1px solid var(--hmi-cool-100);
}
.hmi-toggle-style-tabs .hmi-toggle-option {
  padding: 0.625rem 1.25rem;
  color: var(--hmi-ink-light);
}
.hmi-toggle-style-tabs .hmi-toggle-option.is-active {
  color: var(--hmi-ink);
}
.hmi-toggle-style-tabs .hmi-toggle-slider {
  top: auto;
  bottom: -1px;
  height: 2px;
  border-radius: 0;
}
.hmi-toggle-style-tabs.hmi-toggle-color-teal   .hmi-toggle-slider { background-color: var(--hmi-teal-500); }
.hmi-toggle-style-tabs.hmi-toggle-color-violet .hmi-toggle-slider { background-color: var(--hmi-violet-500); }

/* ============================================================================
   HMi Logo Marquee Atom (seit 2026-04-19)
   ============================================================================
   Wird vom [hmi_logo_marquee]-Shortcode verwendet. Zeile mit Kunden-/Partner-
   Logos, optional endlos scrollend. Fade-Maske links/rechts fuer weichen
   Uebergang.
   ============================================================================ */

.hmi-logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hmi-logo-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
}

.hmi-logo-marquee-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hmi-logo-marquee-item img {
  display: block;
  max-width: none;
  width: auto;
  object-fit: contain;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Hoehen */
.hmi-logo-marquee-height-sm .hmi-logo-marquee-item img { height: 32px; }
.hmi-logo-marquee-height-md .hmi-logo-marquee-item img { height: 48px; }
.hmi-logo-marquee-height-lg .hmi-logo-marquee-item img { height: 64px; }

/* Abstand */
.hmi-logo-marquee-gap-compact .hmi-logo-marquee-track { gap: 2rem; }
.hmi-logo-marquee-gap-normal  .hmi-logo-marquee-track { gap: 3rem; }
.hmi-logo-marquee-gap-relaxed .hmi-logo-marquee-track { gap: 4rem; }

/* Farb-Darstellung */
.hmi-logo-marquee-color-grayscale .hmi-logo-marquee-item img {
  filter: grayscale(100%);
  opacity: 0.7;
}
.hmi-logo-marquee-color-grayscale .hmi-logo-marquee-item:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Static-Modus: keine Animation, zentriert */
.hmi-logo-marquee-mode-static .hmi-logo-marquee-track {
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}

/* Scrolling-Modus: CSS-Animation */
.hmi-logo-marquee-mode-scrolling .hmi-logo-marquee-track {
  animation: hmi-logo-marquee-scroll linear infinite;
}
.hmi-logo-marquee-mode-scrolling.hmi-logo-marquee-speed-slow   .hmi-logo-marquee-track { animation-duration: 60s; }
.hmi-logo-marquee-mode-scrolling.hmi-logo-marquee-speed-medium .hmi-logo-marquee-track { animation-duration: 40s; }
.hmi-logo-marquee-mode-scrolling.hmi-logo-marquee-speed-fast   .hmi-logo-marquee-track { animation-duration: 25s; }

@keyframes hmi-logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hmi-logo-marquee-mode-scrolling:hover .hmi-logo-marquee-track {
  animation-play-state: paused;
}

/* Fade-Maske an den Raendern */
.hmi-logo-marquee-fade {
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hmi-logo-marquee-mode-scrolling .hmi-logo-marquee-track {
    animation: none;
  }
  .hmi-toggle-slider { transition: none; }
}

/* ============================================================================
   HMi Case Study Component (seit 2026-04-19)
   ============================================================================
   Strukturierte Referenz-Karte: Eyebrow / Kunde / Logo im Header, Titel,
   drei Bloecke (Herausforderung / Aktion / Loesung), optional Testimonial.
   ============================================================================ */

/* ============================================================================
   HMi Case Study Component (Layout-Refresh 2026-04-28)
   ----------------------------------------------------------------------------
   Aufbau: Dunkler Header-Bar (Icon + Eyebrow + Title + Industry/Logo rechts)
   → optionaler Intro-Text → 3 Spalten mit Circle-Icons (rot/teal/violet) →
   optionaler Testimonial-Footer.
   Loesungs-Spalte erhaelt einen subtilen Violet-Gradient.
   accent-Param (teal/violet) steuert ausschliesslich den Header-Gradient.
   ============================================================================ */

.hmi-case-study {
  position: relative;
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  font-family: 'Ubuntu', sans-serif;
}
/* Schatten-Stile: Default = weicher Prototyp-Schatten + 1px Hairline. */
.hmi-case-study-style-default {
  box-shadow:
    rgba(0, 0, 0, 0.06) 0 4px 24px,
    rgba(0, 0, 0, 0.03) 0 0 0 1px;
}
.hmi-case-study-style-elevated {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.06),
    0 12px 32px rgba(0, 0, 0, 0.08);
}
.hmi-case-study-style-premium {
  box-shadow: var(--hmi-shadow-premium);
}

/* ---- Header-Bar -------------------------------------------------------- */
.hmi-case-study-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 2rem;
  background: linear-gradient(
    to right,
    var(--hmi-teal-900) 0%,
    var(--hmi-teal-800) 50%,
    var(--hmi-teal-900) 100%
  );
  color: #ffffff;
}
.hmi-case-study-accent-violet .hmi-case-study-header {
  background: linear-gradient(
    to right,
    #1f1742 0%,
    var(--hmi-violet-500) 50%,
    #1f1742 100%
  );
}

.hmi-case-study-header-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
}
.hmi-case-study-header-icon svg {
  width: 1rem;
  height: 1rem;
  color: #5eead4; /* teal-300 */
}
.hmi-case-study-accent-violet .hmi-case-study-header-icon svg {
  color: #c4b5fd; /* violet-300 */
}

.hmi-case-study-header-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hmi-case-study-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: rgba(94, 234, 212, 0.7); /* teal-300/70 */
}
.hmi-case-study-accent-violet .hmi-case-study-eyebrow {
  color: rgba(196, 181, 253, 0.75); /* violet-300/75 */
}
/* Spezifitaet erhoehen: Impreza setzt h3 einen margin-top via Typography-Reset.
   Wir muessen die Klasse zweimal qualifizieren (.hmi-case-study .title), damit
   unser Wert ohne !important durchschlaegt. */
.hmi-case-study .hmi-case-study-title,
.hmi-case-study h3.hmi-case-study-title {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}
@media (min-width: 768px) {
  .hmi-case-study .hmi-case-study-title,
  .hmi-case-study h3.hmi-case-study-title { font-size: 1.0625rem; }
}

.hmi-case-study-header-aside {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .hmi-case-study-header-aside:not(.hmi-case-study-header-aside--logo) {
    display: none;
  }
}
.hmi-case-study-header-aside--logo img {
  max-height: 28px;
  max-width: 120px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* ---- Body (umrahmt Intro + Blocks + Testimonial) ----------------------- */
.hmi-case-study-body {
  background: #ffffff;
}

.hmi-case-study-intro {
  margin: 0;
  padding: 1.5rem 2rem 0;
  font-size: 1rem;
  color: var(--hmi-ink-light);
  line-height: 1.55;
}

/* ---- Drei Spalten ------------------------------------------------------ */
.hmi-case-study-blocks {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .hmi-case-study-blocks {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.hmi-case-study-block {
  padding: 1.5rem;
  border-bottom: 1px solid #f3f4f6; /* gray-100 */
  background: #ffffff;
}
@media (min-width: 640px) {
  .hmi-case-study-block {
    padding: 2rem;
    border-bottom: 0;
    border-right: 1px solid #f3f4f6;
  }
  .hmi-case-study-block:last-child { border-right: 0; }
}
.hmi-case-study-block:last-child { border-bottom: 0; }

/* Loesungs-Spalte: subtiler Violet-Gradient. */
.hmi-case-study-block-solution {
  background: linear-gradient(
    to bottom right,
    rgba(243, 241, 249, 0.5),
    #ffffff
  );
}

.hmi-case-study-block-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.hmi-case-study-block-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
}
.hmi-case-study-block-icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Semantische Farbgebung — fix unabhaengig vom accent-Param. */
.hmi-case-study-block-challenge .hmi-case-study-block-icon {
  background: #fef2f2; /* red-50 */
}
.hmi-case-study-block-challenge .hmi-case-study-block-icon svg { color: #f87171; /* red-400 */ }
.hmi-case-study-block-challenge .hmi-case-study-block-label  { color: #f87171; }

.hmi-case-study-block-action .hmi-case-study-block-icon {
  background: #f0fdfa; /* teal-50 */
}
.hmi-case-study-block-action .hmi-case-study-block-icon svg { color: var(--hmi-teal-500); }
.hmi-case-study-block-action .hmi-case-study-block-label  { color: var(--hmi-teal-500); }

.hmi-case-study-block-solution .hmi-case-study-block-icon {
  background: #ede9fe; /* violet-100 */
}
.hmi-case-study-block-solution .hmi-case-study-block-icon svg { color: var(--hmi-violet-500); }
.hmi-case-study-block-solution .hmi-case-study-block-label  { color: var(--hmi-violet-500); }

.hmi-case-study-block-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.hmi-case-study-block-text {
  font-size: 1rem;
  color: var(--hmi-ink-light);
  line-height: 1.625;
}
/* Loesungs-Spalte: gleiche Schriftgroesse wie die anderen Spalten,
   nur Farbe (Ink) und Gewicht (medium) heben den Erfolg optisch hervor. */
.hmi-case-study-block-solution .hmi-case-study-block-text {
  color: var(--hmi-ink);
  font-weight: 500;
}
.hmi-case-study-block-text p  { margin: 0 0 0.75rem; }
.hmi-case-study-block-text p:last-child { margin-bottom: 0; }
.hmi-case-study-block-text ul,
.hmi-case-study-block-text ol { margin: 0.5rem 0 0.75rem; padding-left: 1.25rem; }
.hmi-case-study-block-text li { margin-bottom: 0.25rem; }

/* ---- Testimonial-Footer ----------------------------------------------- */
.hmi-case-study-testimonial {
  padding: 2rem;
  border-top: 1px solid var(--hmi-cool-100);
  background: #ffffff;
}
.hmi-case-study-testimonial .hmi-quote {
  padding-top: 0;
  padding-bottom: 0;
}

/* ============================================================================
   HMi Newsletter Box Component (seit 2026-04-19)
   ============================================================================
   Wrapper um ein WPForms-Formular. Layout: stacked / centered / side-by-side.
   Hintergrund: white / cool-50 / sand-50 / gradient / dark-teal.
   ============================================================================ */

.hmi-newsletter-box {
  border-radius: 16px;
  padding: 2rem;
  font-family: 'Ubuntu', sans-serif;
}
@media (min-width: 768px) {
  .hmi-newsletter-box { padding: 2.5rem; }
}
.hmi-newsletter-box-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Layout */
.hmi-newsletter-box-layout-stacked .hmi-newsletter-box-inner {
  flex-direction: column;
  align-items: flex-start;
}
.hmi-newsletter-box-layout-centered .hmi-newsletter-box-inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .hmi-newsletter-box-layout-side-by-side .hmi-newsletter-box-inner {
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
  }
  .hmi-newsletter-box-layout-side-by-side .hmi-newsletter-box-intro { flex: 1; }
  .hmi-newsletter-box-layout-side-by-side .hmi-newsletter-box-form  { flex: 1.2; }
}

/* Icon */
.hmi-newsletter-box-icon {
  display: inline-flex;
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.hmi-newsletter-box-accent-teal   .hmi-newsletter-box-icon { color: var(--hmi-teal-500); }
.hmi-newsletter-box-accent-violet .hmi-newsletter-box-icon { color: var(--hmi-violet-500); }

.hmi-newsletter-box-intro {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hmi-newsletter-box-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--hmi-ink);
  line-height: 1.3;
}
@media (min-width: 768px) { .hmi-newsletter-box-title { font-size: 1.5rem; } }

.hmi-newsletter-box-subtitle {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--hmi-ink-light);
  line-height: 1.55;
}

.hmi-newsletter-box-form {
  width: 100%;
}
.hmi-newsletter-box-form-missing {
  padding: 0.75rem 1rem;
  background-color: rgba(255, 193, 7, 0.15);
  color: #7a5500;
  border-radius: 8px;
  font-size: 0.875rem;
}

.hmi-newsletter-box-privacy {
  margin: 0;
  font-size: 0.75rem;
  color: var(--hmi-ink-light);
  line-height: 1.5;
}
.hmi-newsletter-box-privacy a { color: var(--hmi-teal-500); text-decoration: underline; }

/* Hintergruende */
.hmi-newsletter-box-bg-white   { background-color: #ffffff; box-shadow: var(--hmi-shadow-sm); }
.hmi-newsletter-box-bg-cool-50 { background-color: var(--hmi-cool-50); }
.hmi-newsletter-box-bg-sand-50 { background-color: var(--hmi-sand-50); }
.hmi-newsletter-box-bg-gradient-teal {
  background: linear-gradient(135deg, #ffffff 0%, rgba(0, 112, 120, 0.08) 100%);
}
.hmi-newsletter-box-bg-gradient-violet {
  background: linear-gradient(135deg, #ffffff 0%, rgba(76, 62, 128, 0.08) 100%);
}
.hmi-newsletter-box-bg-dark-teal {
  background-color: var(--hmi-teal-900);
  color: #ffffff;
}
.hmi-newsletter-box-bg-dark-teal .hmi-newsletter-box-title     { color: #ffffff; }
.hmi-newsletter-box-bg-dark-teal .hmi-newsletter-box-subtitle  { color: rgba(255,255,255,0.85); }
.hmi-newsletter-box-bg-dark-teal .hmi-newsletter-box-privacy   { color: rgba(255,255,255,0.65); }
.hmi-newsletter-box-bg-dark-teal .hmi-newsletter-box-privacy a { color: var(--hmi-teal-300); }
.hmi-newsletter-box-bg-dark-teal .hmi-newsletter-box-icon      { color: var(--hmi-teal-300); }

@media (prefers-reduced-motion: reduce) {
  .hmi-card-lift, .hmi-vtabs-panel, .hmi-btn, .hmi-pricing-card { transition: none; animation: none; }
  .hmi-btn-primary-violet:hover { transform: none; }
  .hmi-link-icon, .hmi-link { transition: none; }
  a.hmi-link.hmi-link-arrow:hover .hmi-link-icon { transform: none; }
  .hmi-icon-box-style-teal-box .hmi-icon-box-icon-bg,
  .hmi-icon-box-style-violet-box .hmi-icon-box-icon-bg { transition: none; }
  .hmi-icon-box-style-teal-box:hover .hmi-icon-box-icon-bg,
  .hmi-icon-box-style-violet-box:hover .hmi-icon-box-icon-bg { transform: rotate(6deg); }
  .hmi-card.hmi-card-hover-lift,
  .hmi-card.hmi-card-hover-glow-teal,
  .hmi-card.hmi-card-hover-glow-violet { transition: none; }
  .hmi-card.hmi-card-hover-lift:hover { transform: none; }
}

/* ============================================================================
   HMi Termine Tabelle (seit 2026-04-21)
   ============================================================================
   Schedule-Tabelle mit dark-teal Head, zart gestreiften Zeilen, farbigen
   Datums-Spalten und hmi_badge-basierten Format-Tags. Mobile: 2 Spalten.
   ============================================================================ */
.hmi-termine-tabelle { padding: 80px 0 96px; }

.hmi-termine-intro {
  text-align: center;
  margin: 0 auto 2.5rem;
}
.hmi-termine-intro-sub {
  margin: 0.75rem auto 0;
  max-width: 560px;
  color: var(--hmi-ink-light);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}
.hmi-termine-intro-sub > :first-child { margin-top: 0; }
.hmi-termine-intro-sub > :last-child  { margin-bottom: 0; }
.hmi-termine-intro-sub p { margin: 0; }
.hmi-termine-intro-sub p + p { margin-top: 0.5rem; }

/* Card-Container (weiß mit Shadow + Border, rounded-2xl, clip overflow) */
.hmi-termine-card {
  background: #ffffff;
  border: 1px solid var(--hmi-sand-200);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Horizontal-Scroll nur falls nötig (bei schmaler Viewport). */
.hmi-termine-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hmi-termine-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* Head: dark teal-900 mit weißer Uppercase-Schrift. */
.hmi-termine-table thead tr {
  background: var(--hmi-teal-900);
  color: #ffffff;
}
.hmi-termine-th {
  text-align: left;
  padding: 0.75rem 1.25rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
}

/* Rows: Divider zwischen Zeilen, Hover zart Sand. */
.hmi-termine-row {
  border-top: 1px solid var(--hmi-sand-100, #FAF7F2);
  transition: background-color 0.2s ease;
}
.hmi-termine-row:first-child { border-top: 0; }
.hmi-termine-row:hover { background-color: var(--hmi-sand-50); }

.hmi-termine-td {
  padding: 0.75rem 1.25rem;
  vertical-align: middle;
  color: var(--hmi-ink);
  line-height: 1.4;
}

/* Datum-Zelle: Farbvarianten + nicht-umbrechen. */
.hmi-termine-td-datum {
  font-weight: 500;
  white-space: nowrap;
}
.hmi-termine-datum-teal   { color: var(--hmi-teal-600); }
.hmi-termine-datum-violet { color: var(--hmi-violet-500); }
.hmi-termine-datum-ink    { color: var(--hmi-ink); }

/* Modul-Zelle: optionale Style-Modifier. */
.hmi-termine-modul-italic { font-style: italic; color: var(--hmi-ink); }
.hmi-termine-modul-bold   { font-weight: 600; color: var(--hmi-ink); }

/* Ausbilder-Zelle: dezenter Ton. */
.hmi-termine-td-ausbilder { color: var(--hmi-ink-light); }

/* Zeilen-Highlight (zart-farbiger BG-Akzent, z.B. fuer Pruefungen). */
.hmi-termine-row-highlight-teal {
  background-color: rgba(0, 112, 120, 0.05);
}
.hmi-termine-row-highlight-teal:hover {
  background-color: rgba(0, 112, 120, 0.08);
}
.hmi-termine-row-highlight-violet {
  background-color: rgba(76, 62, 128, 0.05);
}
.hmi-termine-row-highlight-violet:hover {
  background-color: rgba(76, 62, 128, 0.08);
}

/* Fußnote unter der Tabelle */
.hmi-termine-footnote {
  margin: 1rem 0 0;
  text-align: center;
  color: var(--hmi-ink-light);
  font-size: 12px;
  line-height: 1.5;
}

/* Mobile: Format + Ausbilder ausblenden (<768px), nur Datum + Modul bleiben. */
.hmi-termine-col-desktop { display: none; }
@media (min-width: 768px) {
  .hmi-termine-col-desktop { display: table-cell; }
  .hmi-termine-th,
  .hmi-termine-td { padding: 0.875rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hmi-termine-row { transition: none; }
}

/* ============================================================================
   HMi Avatar Stack Atom (seit 2026-04-21)
   ============================================================================
   2-5 runde Portraits leicht ueberlappend, optional mit Text-Block rechts.
   Typischer Use: Ansprechpartner-Duo, Trust-Element am Footer.
   ============================================================================ */
.hmi-avatar-stack {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.hmi-avatar-stack-images {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.hmi-avatar-stack-img {
  border-radius: 9999px;
  object-fit: cover;
  object-position: top;
  display: block;
  box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.25);
}
/* Overlap: jedes weitere Bild ragt ueber das vorherige. */
.hmi-avatar-stack-images .hmi-avatar-stack-img + .hmi-avatar-stack-img {
  margin-left: -0.75rem;
}

/* Größen */
.hmi-avatar-stack-size-sm .hmi-avatar-stack-img { width: 40px; height: 40px; border-width: 2px; }
.hmi-avatar-stack-size-md .hmi-avatar-stack-img { width: 48px; height: 48px; border-width: 2px; }
.hmi-avatar-stack-size-lg .hmi-avatar-stack-img { width: 56px; height: 56px; border-width: 2px; }
.hmi-avatar-stack-size-xl .hmi-avatar-stack-img { width: 72px; height: 72px; border-width: 3px; }

/* Border-Ring */
.hmi-avatar-stack-border-white .hmi-avatar-stack-img        { border-style: solid; border-color: #ffffff; }
.hmi-avatar-stack-border-white-translucent .hmi-avatar-stack-img {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.3);
}
.hmi-avatar-stack-border-teal .hmi-avatar-stack-img   { border-style: solid; border-color: var(--hmi-teal-500); }
.hmi-avatar-stack-border-violet .hmi-avatar-stack-img { border-style: solid; border-color: var(--hmi-violet-500); }
.hmi-avatar-stack-border-none .hmi-avatar-stack-img   { border: 0; }

/* Text-Block rechts */
.hmi-avatar-stack-text { min-width: 0; }
.hmi-avatar-stack-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}
.hmi-avatar-stack-subtitle {
  margin: 0.125rem 0 0;
  font-size: 13px;
  line-height: 1.4;
}

/* Text-Farben */
.hmi-avatar-stack-text-ink .hmi-avatar-stack-title    { color: var(--hmi-ink); }
.hmi-avatar-stack-text-ink .hmi-avatar-stack-subtitle { color: var(--hmi-ink-light); }
.hmi-avatar-stack-text-light .hmi-avatar-stack-title    { color: #ffffff; }
.hmi-avatar-stack-text-light .hmi-avatar-stack-subtitle { color: rgba(255, 255, 255, 0.6); }

/* ============================================================================
   HMi Anfrage Formular (seit 2026-04-21)
   ============================================================================
   Dark-Gradient Card mit Avatar-Header + WPForms-Formular. Formular-Felder
   werden auf halbtransparentes Weiß gesetzt, damit das WPForms-Markup ins
   Dark-Design passt.
   ============================================================================ */
.hmi-anfrage-form {
  border-radius: 16px;
  padding: 1.75rem;
  color: #ffffff;
}
@media (min-width: 768px) {
  .hmi-anfrage-form { padding: 2.25rem; }
}

/* Hintergrund-Varianten */
.hmi-anfrage-bg-gradient-teal-dark {
  background: linear-gradient(135deg, var(--hmi-teal-800) 0%, var(--hmi-teal-700, #004a4f) 100%);
}
.hmi-anfrage-bg-gradient-teal-navy {
  background: linear-gradient(135deg, var(--hmi-teal-900) 0%, #001e3a 100%);
}
.hmi-anfrage-bg-gradient-teal-violet {
  background: linear-gradient(135deg, var(--hmi-teal-900) 0%, var(--hmi-violet-500) 100%);
}
.hmi-anfrage-bg-teal-900 { background-color: var(--hmi-teal-900); }
.hmi-anfrage-bg-violet   { background-color: var(--hmi-violet-500); }

/* Header mit Avatar-Stack */
.hmi-anfrage-form-header { margin-bottom: 1.5rem; }

/* Body = Wrapper um das WPForms-Markup */
.hmi-anfrage-form-body { color: #ffffff; }

/* Platzhalter, wenn form_id fehlt oder WPForms nicht aktiv */
.hmi-anfrage-form-placeholder {
  margin: 0;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

/* Fußnote unter dem Button */
.hmi-anfrage-form-footnote {
  margin: 1rem 0 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

/* ---- WPForms-Styling auf Dark-BG ---- */
/* Labels + Pflichtfeld-Stern weiß / teal-300 */
.hmi-anfrage-form .wpforms-field-label,
.hmi-anfrage-form .wpforms-field-sublabel,
.hmi-anfrage-form label {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-bottom: 0.25rem !important;
}
.hmi-anfrage-form .wpforms-required-label {
  color: #fca5a5 !important;
}

/* Inputs: halbtransparentes Weiß, weiße Schrift, teal-300 Focus-Ring */
.hmi-anfrage-form input[type="text"],
.hmi-anfrage-form input[type="email"],
.hmi-anfrage-form input[type="tel"],
.hmi-anfrage-form input[type="url"],
.hmi-anfrage-form input[type="number"],
.hmi-anfrage-form textarea,
.hmi-anfrage-form select {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 0.625rem 1rem !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.hmi-anfrage-form input::placeholder,
.hmi-anfrage-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}
.hmi-anfrage-form input:focus,
.hmi-anfrage-form textarea:focus,
.hmi-anfrage-form select:focus {
  outline: 0 !important;
  border-color: var(--hmi-teal-300, #78d7dd) !important;
  box-shadow: 0 0 0 3px rgba(120, 215, 221, 0.2) !important;
}
.hmi-anfrage-form textarea { resize: vertical; min-height: 72px; }

/* Checkbox-Consent-Block: weißer Text, Links in teal-300 */
.hmi-anfrage-form .wpforms-field-checkbox label,
.hmi-anfrage-form input[type="checkbox"] + label,
.hmi-anfrage-form .wpforms-field-gdpr-checkbox .wpforms-field-label-inline {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.hmi-anfrage-form a {
  color: var(--hmi-teal-300, #78d7dd) !important;
  text-decoration: underline;
}

/* GDPR-/Checkbox-Inputs: groß, sichtbarer Border, teal-Akzent.
   accent-color funktioniert in allen modernen Browsern; Border + BG fangen
   ältere Browser ab und machen die unbestätigte Checkbox auf dunklem
   Teal-BG überhaupt erst auffindbar. */
.hmi-anfrage-form input[type="checkbox"],
.hmi-anfrage-form .wpforms-field-gdpr-checkbox input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin-right: 0.625rem !important;
  margin-top: 0.125rem !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid var(--hmi-teal-300, #78d7dd) !important;
  border-radius: 4px !important;
  accent-color: var(--hmi-teal-300, #78d7dd) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}
.hmi-anfrage-form .wpforms-field-gdpr-checkbox ul,
.hmi-anfrage-form .wpforms-field-checkbox ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.hmi-anfrage-form .wpforms-field-gdpr-checkbox li,
.hmi-anfrage-form .wpforms-field-checkbox li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.25rem !important;
}

/* Submit-Button: weiß mit teal-700 Text, Shadow + Hover-Lift.
   Spezifischere Selektoren (Container + Form-ID-Klassen + Render-Modern)
   nötig, weil wpforms-render-modern eigene Button-Styles via inline-CSS-
   Variablen und .wpforms-render-modern-Selektoren reinbringt. */
.hmi-anfrage-form button[type="submit"],
.hmi-anfrage-form .wpforms-submit,
.hmi-anfrage-form input[type="submit"],
.hmi-anfrage-form .wpforms-container .wpforms-submit-container .wpforms-submit,
.hmi-anfrage-form .wpforms-render-modern .wpforms-submit-container button.wpforms-submit,
.hmi-anfrage-form .wpforms-container button[type="submit"].wpforms-submit {
  width: 100% !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: var(--hmi-teal-700, #004a4f) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 0.875rem 1.25rem !important;
  height: auto !important;
  border-radius: 10px !important;
  border: 0 !important;
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  text-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.hmi-anfrage-form button[type="submit"]:hover,
.hmi-anfrage-form .wpforms-submit:hover,
.hmi-anfrage-form input[type="submit"]:hover,
.hmi-anfrage-form .wpforms-container .wpforms-submit-container .wpforms-submit:hover,
.hmi-anfrage-form .wpforms-render-modern .wpforms-submit-container button.wpforms-submit:hover,
.hmi-anfrage-form .wpforms-container button[type="submit"].wpforms-submit:hover {
  background-color: var(--hmi-teal-900, #002528) !important;
  color: #ffffff !important;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* WPForms Fehler- und Confirmation-Meldungen */
.hmi-anfrage-form .wpforms-error {
  color: #fca5a5 !important;
  font-size: 12px !important;
}
.hmi-anfrage-form .wpforms-confirmation-container-full {
  background-color: rgba(120, 215, 221, 0.15) !important;
  border: 1px solid rgba(120, 215, 221, 0.3) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
}

/* ============================================================================
   Anfrage-Form — helle Hintergrund-Varianten
   ----------------------------------------------------------------------------
   Zwei sanfte, helle Alternativen zum kräftigen Dunkelgrün:
     - teal-soft            → flacher, sehr heller Teal-Tint
     - gradient-violet-teal → subtiler Violet→Teal-Verlauf (vom Event-Buchungsformular)
   Der Form-Block oben ist auf weisse Schrift / dunklen Grund ausgelegt (alles
   !important) — die hellen Varianten brauchen daher ein vollstaendiges Re-Theme
   aller Text-, Input-, Checkbox-, Button-, Link- und Meldungs-Farben. Das
   Template setzt bei hellen bg-Werten zusaetzlich die Marker-Klasse
   .hmi-anfrage-light; alle Re-Theme-Regeln haengen daran (Scope
   .hmi-anfrage-form.hmi-anfrage-light, Spezifitaet 0,3,x → schlaegt die
   Dark-Defaults 0,2,x eindeutig).
   Schlicht gehalten wie das Event-Buchungsformular (.hmi-event-single-register):
   Hintergrund + 16px-Radius, kein Extra-Rahmen. Aufmerksamkeit kommt ueber die
   getoente Flaeche und den kraeftig gefuellten Teal-CTA-Button.
   ============================================================================ */
.hmi-anfrage-bg-teal-soft {
  background: rgba(0, 112, 120, 0.1);
}
.hmi-anfrage-bg-gradient-violet-teal {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.07) 0%, rgba(20, 184, 166, 0.07) 100%);
}
.hmi-anfrage-form.hmi-anfrage-light {
  color: var(--hmi-ink, #1B2029) !important;
  /* Sanfter Teal-Glow nach aussen — gilt fuer BEIDE hellen Varianten
     (teal-soft + gradient-violet-teal). Kein Rahmen; der Glow hebt das
     Formular weich ab und passt farblich zur Site (Teal = Primaerfarbe). */
  box-shadow: 0 0 48px 4px rgba(0, 112, 120, 0.15);
}
.hmi-anfrage-form.hmi-anfrage-light .hmi-anfrage-form-body {
  color: var(--hmi-ink, #1B2029) !important;
}

/* Labels + Pflichtfeld-Stern */
.hmi-anfrage-form.hmi-anfrage-light .wpforms-field-label,
.hmi-anfrage-form.hmi-anfrage-light .wpforms-field-sublabel,
.hmi-anfrage-form.hmi-anfrage-light label {
  color: var(--hmi-ink-light, #4A5568) !important;
}
.hmi-anfrage-form.hmi-anfrage-light .wpforms-required-label {
  color: #dc2626 !important;
}

/* Inputs: weisser Grund, teal-Rahmen, dunkle Schrift */
.hmi-anfrage-form.hmi-anfrage-light input[type="text"],
.hmi-anfrage-form.hmi-anfrage-light input[type="email"],
.hmi-anfrage-form.hmi-anfrage-light input[type="tel"],
.hmi-anfrage-form.hmi-anfrage-light input[type="url"],
.hmi-anfrage-form.hmi-anfrage-light input[type="number"],
.hmi-anfrage-form.hmi-anfrage-light textarea,
.hmi-anfrage-form.hmi-anfrage-light select {
  background-color: #ffffff !important;
  border: 1px solid var(--hmi-teal-200, #afe9ec) !important;
  color: var(--hmi-ink, #1B2029) !important;
}
.hmi-anfrage-form.hmi-anfrage-light input::placeholder,
.hmi-anfrage-form.hmi-anfrage-light textarea::placeholder {
  color: #64748b !important;
}
.hmi-anfrage-form.hmi-anfrage-light input:focus,
.hmi-anfrage-form.hmi-anfrage-light textarea:focus,
.hmi-anfrage-form.hmi-anfrage-light select:focus {
  border-color: var(--hmi-teal-500, #007078) !important;
  box-shadow: 0 0 0 3px rgba(0, 112, 120, 0.15) !important;
}

/* Checkbox-Consent-Block: dunkle Schrift, teal-Links, sichtbare Checkbox */
.hmi-anfrage-form.hmi-anfrage-light .wpforms-field-checkbox label,
.hmi-anfrage-form.hmi-anfrage-light input[type="checkbox"] + label,
.hmi-anfrage-form.hmi-anfrage-light .wpforms-field-gdpr-checkbox .wpforms-field-label-inline {
  color: var(--hmi-ink-light, #4A5568) !important;
}
.hmi-anfrage-form.hmi-anfrage-light a {
  color: var(--hmi-teal-600, #005a60) !important;
}
.hmi-anfrage-form.hmi-anfrage-light input[type="checkbox"],
.hmi-anfrage-form.hmi-anfrage-light .wpforms-field-gdpr-checkbox input[type="checkbox"] {
  background-color: #ffffff !important;
  border: 2px solid var(--hmi-teal-500, #007078) !important;
  accent-color: var(--hmi-teal-500, #007078) !important;
}

/* Submit-Button: kraeftig gefuelltes Teal mit weisser Schrift = primaerer CTA */
.hmi-anfrage-form.hmi-anfrage-light button[type="submit"],
.hmi-anfrage-form.hmi-anfrage-light .wpforms-submit,
.hmi-anfrage-form.hmi-anfrage-light input[type="submit"],
.hmi-anfrage-form.hmi-anfrage-light .wpforms-container .wpforms-submit-container .wpforms-submit,
.hmi-anfrage-form.hmi-anfrage-light .wpforms-render-modern .wpforms-submit-container button.wpforms-submit,
.hmi-anfrage-form.hmi-anfrage-light .wpforms-container button[type="submit"].wpforms-submit {
  background-color: var(--hmi-teal-500, #007078) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 30px -14px rgba(0, 112, 120, 0.5) !important;
}
.hmi-anfrage-form.hmi-anfrage-light button[type="submit"]:hover,
.hmi-anfrage-form.hmi-anfrage-light .wpforms-submit:hover,
.hmi-anfrage-form.hmi-anfrage-light input[type="submit"]:hover,
.hmi-anfrage-form.hmi-anfrage-light .wpforms-container .wpforms-submit-container .wpforms-submit:hover,
.hmi-anfrage-form.hmi-anfrage-light .wpforms-render-modern .wpforms-submit-container button.wpforms-submit:hover,
.hmi-anfrage-form.hmi-anfrage-light .wpforms-container button[type="submit"].wpforms-submit:hover {
  background-color: var(--hmi-teal-700, #004a4f) !important;
  color: #ffffff !important;
}

/* Fussnote, Platzhalter-Box, Fehler- + Confirmation-Meldungen */
.hmi-anfrage-form.hmi-anfrage-light .hmi-anfrage-form-footnote {
  color: #64748b !important;
}
.hmi-anfrage-form.hmi-anfrage-light .hmi-anfrage-form-placeholder {
  background: rgba(0, 112, 120, 0.06);
  border-color: rgba(0, 112, 120, 0.3);
  color: var(--hmi-ink, #1B2029);
}
.hmi-anfrage-form.hmi-anfrage-light .wpforms-error {
  color: #dc2626 !important;
}
.hmi-anfrage-form.hmi-anfrage-light .wpforms-confirmation-container-full {
  background-color: rgba(0, 112, 120, 0.08) !important;
  border: 1px solid rgba(0, 112, 120, 0.25) !important;
  color: var(--hmi-ink, #1B2029) !important;
}

/* ============================================================================
   HMi Sub-Navigation (In-Page Anchor-Nav, sticky) — seit 2026-04-21
   ============================================================================
   Pro Seite vom Redakteur platziert, typischerweise direkt nach dem Hero.
   JS (hmi-interactions.js initSubnav) setzt Smooth-Scroll + active-State
   via IntersectionObserver.

   Sticky-Offset kommt als CSS-Var --hmi-subnav-offset aus dem Inline-Style
   im Template (entspricht der Megamenü-Höhe, default 72px).
   ============================================================================ */
/* Sub-Nav ist permanent aus dem Dokumentfluss genommen (position:fixed) und
   standardmäßig unsichtbar. JS togglet `.is-visible` sobald der Scroll-
   Schwellwert überschritten ist (--hmi-subnav-reveal, default 60vh). Damit
   belegt die Sub-Nav keinen Layout-Platz an der Shortcode-Stelle und klebt
   zuverlässig am oberen Viewport-Rand, unabhängig vom Containing Block. */
.hmi-subnav {
  position: fixed;
  top: var(--hmi-subnav-offset, 72px);
  left: 0;
  right: 0;
  z-index: 40;
  border-top: 1px solid rgba(229, 231, 235, 0.5);
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
  font-family: 'Ubuntu', sans-serif;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms ease;
}
.hmi-subnav.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .hmi-subnav { transition: none; }
}

/* Hintergrund-Varianten */
.hmi-subnav-bg-glass {
  background-color: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.hmi-subnav-bg-sand-50 {
  background-color: var(--hmi-sand-50, #FDFCFA);
}
.hmi-subnav-bg-cool-50 {
  background-color: var(--hmi-cool-50, #F5F5F8);
}
.hmi-subnav-bg-transparent {
  background-color: transparent;
  border-top-color: transparent;
  border-bottom-color: rgba(229, 231, 235, 0.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hmi-subnav-bg-glass { background-color: #ffffff; }
}

/* Horizontal-Scroll-Container bei vielen Items auf schmalen Viewports */
.hmi-subnav-scroll {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.hmi-subnav-scroll::-webkit-scrollbar { display: none; }

.hmi-subnav-list {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.hmi-subnav-align-left   .hmi-subnav-list { justify-content: flex-start; }
.hmi-subnav-align-center .hmi-subnav-list { justify-content: center; }
.hmi-subnav-align-right  .hmi-subnav-list { justify-content: flex-end; }

.hmi-subnav-item { flex: 0 0 auto; }

.hmi-subnav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.875rem 1rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--hmi-ink-light, #4a5568);
  text-decoration: none !important;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.hmi-subnav-link:hover {
  color: var(--hmi-teal-600, #005a60);
}
.hmi-subnav-link.is-active {
  color: var(--hmi-teal-600, #005a60);
  border-bottom-color: var(--hmi-teal-500, #007078);
}

@media (prefers-reduced-motion: reduce) {
  .hmi-subnav-link { transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   HMi Trust-Bar (standalone & embedded in Hero)
   ========================================================================= */

.hmi-trust-bar {
  width: 100%;
  font-size: 12px;
  line-height: 1.4;
}
.hmi-trust-bar--border-top {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.5rem;
  margin-top: 1rem;
}
.hmi-trust-bar--on-light.hmi-trust-bar--border-top {
  border-top-color: rgba(0, 37, 40, 0.08);
}

.hmi-trust-bar__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
}
.hmi-trust-bar__inner::-webkit-scrollbar { display: none; }

.hmi-trust-bar--layout-centered .hmi-trust-bar__inner { justify-content: center; }
.hmi-trust-bar--layout-left-aligned .hmi-trust-bar__inner { justify-content: flex-start; }

@media (min-width: 768px) {
  .hmi-trust-bar__inner { gap: 1.25rem; }
}

.hmi-trust-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: 0 0 auto;
}

.hmi-trust-bar--on-light .hmi-trust-bar__item { color: var(--hmi-ink-light, #4a5568); }
.hmi-trust-bar--on-dark .hmi-trust-bar__item { color: rgba(255, 255, 255, 0.7); }

.hmi-trust-bar__separator {
  display: inline-block;
  color: rgba(255, 255, 255, 0.2);
  user-select: none;
}
.hmi-trust-bar--on-light .hmi-trust-bar__separator { color: rgba(0, 37, 40, 0.2); }

/* Icon-Wrapper: Das Template rendert Pipe-Icons selbst als <i class="fas fa-xxx">.
   Wir erzwingen die Text-Farbe mit !important — manche Icon-Sets/Themes haben
   Inline-Farben oder hohe Spezifitaet, die sonst gegen das dezente Trust-Bar-
   Design durchschlagen (vorher gruener Check-Icon trotz weisser Trust-Bar). */
.hmi-trust-bar .hmi-trust-bar__icon,
.hmi-trust-bar .hmi-trust-bar__icon::before,
.hmi-trust-bar .hmi-trust-bar__icon i,
.hmi-trust-bar .hmi-trust-bar__icon i::before,
.hmi-trust-bar .hmi-trust-bar__icon svg,
.hmi-trust-bar .hmi-trust-bar__icon svg *,
.hmi-trust-bar .hmi-trust-bar__icon svg path {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  background: none !important;
}
.hmi-trust-bar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.65;
  margin-right: 0.3rem;
}
.hmi-trust-bar__icon i,
.hmi-trust-bar__icon svg {
  font-size: inherit !important;
  line-height: inherit !important;
  width: auto;
  height: auto;
}

.hmi-trust-bar__metric {
  font-weight: 600;
}
.hmi-trust-bar--on-light .hmi-trust-bar__metric { color: var(--hmi-ink, #002528); }
.hmi-trust-bar--on-dark .hmi-trust-bar__metric { color: rgba(255, 255, 255, 0.85); }

.hmi-trust-bar__metric-suffix {
  font-weight: 600;
  margin-left: 0; /* direkt an der Zahl, ohne Luft — "25+", nicht "25  +" */
}
.hmi-trust-bar__metric-label {
  margin-left: 0.375rem;
  font-weight: 400;
}

.hmi-trust-bar__stars {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  color: #f59e0b; /* amber-500 */
}
.hmi-trust-bar__stars svg {
  width: 0.875rem;
  height: 0.875rem;
}

.hmi-trust-bar__rating-value {
  font-weight: 500;
  margin-left: 0.25rem;
}
.hmi-trust-bar--on-light .hmi-trust-bar__rating-value { color: var(--hmi-ink-light, #4a5568); }
.hmi-trust-bar--on-dark .hmi-trust-bar__rating-value { color: rgba(255, 255, 255, 0.7); }

.hmi-trust-bar__rating-count {
  opacity: 0.7;
  margin-left: 0.125rem;
}

/* =========================================================================
   HMi Hero (unified: gradient-only + image-with-overlay, incl. split layout)
   ========================================================================= */

.hmi-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.hmi-hero__bg-image {
  position: absolute;
  inset: 0;
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
.hmi-hero__bg-image--pos-center       { background-position: center center; }
.hmi-hero__bg-image--pos-left         { background-position: left center; }
.hmi-hero__bg-image--pos-right        { background-position: right center; }
.hmi-hero__bg-image--pos-top          { background-position: center top; }
.hmi-hero__bg-image--pos-bottom       { background-position: center bottom; }
.hmi-hero__bg-image--pos-top-left     { background-position: left top; }
.hmi-hero__bg-image--pos-top-right    { background-position: right top; }
.hmi-hero__bg-image--pos-bottom-left  { background-position: left bottom; }
.hmi-hero__bg-image--pos-bottom-right { background-position: right bottom; }

/* Gradient-Only-Variante */
.hmi-hero--bg-gradient-teal-900-800-900 {
  background: linear-gradient(135deg, #003236 0%, #004a4f 50%, #003236 100%);
}
.hmi-hero--bg-gradient-teal-violet-mix {
  background: linear-gradient(135deg, #003236 0%, #1c1640 100%);
}
.hmi-hero--bg-gradient-dark-neutral {
  background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
}

/* Overlay-Varianten (für image-with-overlay) */
.hmi-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hmi-hero__overlay--none {
  background: transparent;
}
.hmi-hero__overlay--teal-dark-horizontal {
  background: linear-gradient(to right,
    rgba(0, 50, 54, 0.92) 0%,
    rgba(0, 50, 54, 0.85) 35%,
    rgba(0, 50, 54, 0.55) 65%,
    rgba(0, 50, 54, 0.30) 100%);
}
.hmi-hero__overlay--teal-dark-radial {
  background: radial-gradient(ellipse at 30% 50%,
    rgba(0, 50, 54, 0.92) 0%,
    rgba(0, 50, 54, 0.75) 45%,
    rgba(0, 50, 54, 0.25) 100%);
}
.hmi-hero__overlay--teal-dark-right {
  background: linear-gradient(to left,
    rgba(0, 50, 54, 0.92) 0%,
    rgba(0, 50, 54, 0.85) 35%,
    rgba(0, 50, 54, 0.55) 65%,
    rgba(0, 50, 54, 0.30) 100%);
}
.hmi-hero__overlay--dark-neutral-horizontal {
  background: linear-gradient(to right,
    rgba(15, 20, 25, 0.90) 0%,
    rgba(15, 20, 25, 0.80) 40%,
    rgba(15, 20, 25, 0.45) 75%,
    rgba(15, 20, 25, 0.20) 100%);
}
.hmi-hero__overlay--violet-teal-mix {
  background: linear-gradient(120deg,
    rgba(28, 22, 64, 0.85) 0%,
    rgba(0, 50, 54, 0.70) 70%,
    rgba(0, 50, 54, 0.30) 100%);
}
.hmi-hero__overlay--white-left-horizontal {
  background: linear-gradient(to right,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.85) 35%,
    rgba(255, 255, 255, 0.55) 65%,
    rgba(255, 255, 255, 0.15) 100%);
}
.hmi-hero__overlay--white-right-horizontal {
  background: linear-gradient(to left,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.85) 35%,
    rgba(255, 255, 255, 0.55) 65%,
    rgba(255, 255, 255, 0.15) 100%);
}
.hmi-hero__overlay--white-radial {
  background: radial-gradient(ellipse at 30% 50%,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.72) 45%,
    rgba(255, 255, 255, 0.20) 100%);
}
.hmi-hero__overlay--white-soft {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.60) 50%,
    rgba(255, 255, 255, 0.75) 100%);
}
.hmi-hero__overlay--sand-left-horizontal {
  background: linear-gradient(to right,
    rgba(250, 247, 242, 0.92) 0%,
    rgba(243, 237, 227, 0.82) 35%,
    rgba(243, 237, 227, 0.50) 65%,
    rgba(243, 237, 227, 0.15) 100%);
}
.hmi-hero__overlay--sand-right-horizontal {
  background: linear-gradient(to left,
    rgba(250, 247, 242, 0.92) 0%,
    rgba(243, 237, 227, 0.82) 35%,
    rgba(243, 237, 227, 0.50) 65%,
    rgba(243, 237, 227, 0.15) 100%);
}
.hmi-hero__overlay--sand-radial {
  background: radial-gradient(ellipse at 30% 50%,
    rgba(250, 247, 242, 0.92) 0%,
    rgba(243, 237, 227, 0.70) 45%,
    rgba(224, 213, 200, 0.20) 100%);
}

/* Text-Farbe-Varianten — automatisch aus bg_overlay_preset abgeleitet,
   kann via text_color-Param ueberschrieben werden. Auf hellen Overlays
   (white-*, sand-*) muss der Text dunkel sein, damit er lesbar bleibt. */
.hmi-hero--text-dark {
  color: var(--hmi-ink, #0f131f);
}
.hmi-hero--text-dark .hmi-hero__eyebrow {
  background: rgba(0, 112, 120, 0.1);
  border-color: rgba(0, 112, 120, 0.25);
  color: var(--hmi-teal-600, #005a60);
}
/* H1 wird sonst von .hmi-hero { color: #fff } ueberschrieben — deshalb
   explizit mit hoher Spezifitaet eindunkeln. Hervorhebungs-Varianten
   (solid-teal, solid-violet, gradient-ul etc.) bleiben von ihren eigenen
   data-h1-style-Regeln gesteuert. */
.hmi-hero--text-dark .hmi-hero__headline {
  color: var(--hmi-ink, #0f131f);
}
.hmi-hero--text-dark .hmi-hero__lead,
.hmi-hero--text-dark .hmi-hero__sub-lead {
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-hero--text-dark .hmi-hero__breadcrumbs ol { color: var(--hmi-ink-light, #4a5568); }
.hmi-hero--text-dark .hmi-hero__breadcrumbs-sep { color: rgba(15, 19, 31, 0.3); }
.hmi-hero--text-dark .hmi-hero__breadcrumbs [aria-current="page"] { color: var(--hmi-ink, #0f131f); }

/* Atmospheric Glows */
.hmi-hero__glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 75% 20%, rgba(0, 112, 120, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 25% 80%, rgba(2, 116, 190, 0.12) 0%, transparent 50%);
}

/* Subtle Dot-Pattern */
.hmi-hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.06;
  background-image: radial-gradient(circle at 25% 25%, #fff 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Content-Container */
.hmi-hero__inner {
  position: relative;
  z-index: 10;
  max-width: 80rem; /* 1280px */
  margin: 0 auto;
  padding: 5rem 1rem 3rem;
}
@media (min-width: 768px) {
  .hmi-hero__inner { padding: 7rem 1.5rem 4rem; }
}
@media (min-width: 1024px) {
  .hmi-hero__inner { padding: 7rem 2rem 4rem; }
}

/* Split-Layout (Text + Right-Graphic) */
.hmi-hero--split .hmi-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .hmi-hero--split .hmi-hero__grid { grid-template-columns: 1fr 1fr; }
}

/* Breadcrumbs */
.hmi-hero__breadcrumbs {
  margin-bottom: 1.5rem;
}
.hmi-hero__breadcrumbs ol {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hmi-hero__breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hmi-hero__breadcrumbs a:hover {
  color: rgba(255, 255, 255, 0.8);
}
.hmi-hero__breadcrumbs-sep {
  color: rgba(255, 255, 255, 0.3);
}
.hmi-hero__breadcrumbs [aria-current="page"] {
  color: rgba(255, 255, 255, 0.7);
}

/* Eyebrow Pill */
.hmi-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.025em;
  margin-bottom: 0.25rem;
}

/* Headline */
.hmi-hero__headline {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  color: #fff;
}

/* Highlight-Word Style-Variants */
.hmi-hero__headline [data-h1-style="solid-teal"] {
  color: #5eead4; /* teal-300 */
}
.hmi-hero__headline [data-h1-style="solid-violet"] {
  color: #c4b5fd; /* violet-300 */
}
.hmi-hero__headline [data-h1-style="gradient-ul"] {
  background: linear-gradient(135deg, #3f3369, #9585cc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: auto;
  text-decoration-color: #7c6dba;
  padding-bottom: 2px;
}
.hmi-hero__headline [data-h1-style="smart-underline"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: auto;
  text-decoration-color: #7c6dba;
  padding-bottom: 2px;
}
.hmi-hero__headline [data-h1-style="thick-gradient"] {
  text-decoration: underline;
  text-decoration-thickness: 6px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
  text-decoration-color: #6b5ba7;
  padding-bottom: 2px;
}
.hmi-hero__headline [data-h1-style="underline"] {
  border-bottom: 3px solid #4C3E80;
  padding-bottom: 2px;
  color: rgba(255, 255, 255, 0.95);
}
.hmi-hero__headline [data-h1-style="glow"] {
  color: #a89bd4;
  text-shadow:
    0 0 30px rgba(76, 62, 128, 0.5),
    0 0 60px rgba(76, 62, 128, 0.2);
}

/* Lead + Sub-Lead */
.hmi-hero__lead {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 40rem;
  margin: 0 0 1rem;
}
.hmi-hero__sub-lead {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  max-width: 36rem;
  margin: 0 0 2rem;
}

/* CTA-Group */
.hmi-hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

/* Hero-CTA Buttons (eigene Utility-Klassen — analog zu hmi_button, damit wir
   nicht den Button-Atom aus dem Hero heraus rendern muessen) */
.hmi-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none !important;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
}
.hmi-hero__cta:hover { transform: translateY(-1px); }

.hmi-hero__cta--primary-violet {
  background: #4C3E80;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(76, 62, 128, 0.25);
}
.hmi-hero__cta--primary-violet:hover { background: #3f3369; box-shadow: 0 10px 20px -3px rgba(76, 62, 128, 0.4); }

.hmi-hero__cta--primary-teal {
  background: #007078;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgba(0, 112, 120, 0.25);
}
.hmi-hero__cta--primary-teal:hover { background: #005a60; box-shadow: 0 10px 20px -3px rgba(0, 112, 120, 0.4); }

.hmi-hero__cta--outline-teal {
  background: transparent;
  color: #5eead4;
  border-color: #5eead4;
}
.hmi-hero__cta--outline-teal:hover { background: rgba(94, 234, 212, 0.1); }

.hmi-hero__cta--solid-white {
  background: #fff;
  color: #4C3E80;
}
.hmi-hero__cta--solid-white:hover { background: #f3f4f6; }

.hmi-hero__cta--outline-white {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
}
.hmi-hero__cta--outline-white:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.hmi-hero__cta--soft-teal {
  background: rgba(0, 112, 120, 0.1);
  color: #007078;
}
.hmi-hero__cta--soft-teal:hover { background: rgba(0, 112, 120, 0.2); }

.hmi-hero__cta--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
}
.hmi-hero__cta--ghost:hover { color: #fff; }

.hmi-hero__cta-icon {
  width: 1rem;
  height: 1rem;
}

/* Right-Graphic */
.hmi-hero__graphic {
  position: relative;
}
.hmi-hero__graphic img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Trust-Bar within Hero — slightly different spacing */
.hmi-hero .hmi-trust-bar {
  margin-top: 1rem;
}

/* Trust-Bar-Rail: full-width-Streifen am unteren Hero-Rand, Inhalt
   horizontal zentriert. Sitzt ausserhalb von .hmi-hero__inner, damit sie
   nicht neben der rechten Grafik eingeklemmt wird und die ganze
   Section-Breite nutzt. Subtile Top-Border grenzt optisch vom Content ab. */
.hmi-hero__trust-bar-rail {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 1rem 1rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hmi-hero--text-dark .hmi-hero__trust-bar-rail {
  border-top-color: rgba(15, 19, 31, 0.08);
}
/* Content innerhalb der Rail zentriert + max-width angleichen an .hmi-hero__inner */
.hmi-hero__trust-bar-rail .hmi-trust-bar {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.hmi-hero__trust-bar-rail .hmi-trust-bar__inner {
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .hmi-hero__cta { transition: none; }
  .hmi-hero__cta:hover { transform: none; }
}

/* =========================================================================
   HMi Blog-Teaser (Post-Grid, 2/3/4 Spalten)
   ========================================================================= */

.hmi-blog-teaser {
  padding: 3rem 1rem;
}
@media (min-width: 768px) {
  .hmi-blog-teaser { padding: 4rem 1.5rem; }
}

.hmi-blog-teaser-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  max-width: 80rem;
  margin: 0 auto 2rem;
}
/* Split-Layout (Standard): Headline links, "Alle Beitraege"-Link rechts. */
.hmi-blog-teaser-header-align-split { flex-direction: row; align-items: flex-end; }
/* Stacked-Ausrichtungen (Header-Text + Link untereinander). */
.hmi-blog-teaser-header-align-left,
.hmi-blog-teaser-header-align-center,
.hmi-blog-teaser-header-align-right {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.hmi-blog-teaser-header-align-left   .hmi-blog-teaser-header-text { text-align: left; }
.hmi-blog-teaser-header-align-center .hmi-blog-teaser-header-text { text-align: center; }
.hmi-blog-teaser-header-align-right  .hmi-blog-teaser-header-text { text-align: right; }
.hmi-blog-teaser-header-align-left   .hmi-blog-teaser-all-link { align-self: flex-start; }
.hmi-blog-teaser-header-align-center .hmi-blog-teaser-all-link { align-self: center; }
.hmi-blog-teaser-header-align-right  .hmi-blog-teaser-all-link { align-self: flex-end; }

.hmi-blog-teaser-header-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hmi-blog-teaser-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hmi-teal-500, #007078);
  margin: 0;
}
.hmi-blog-teaser-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
  max-width: 48rem;
}
.hmi-blog-teaser-header-align-center .hmi-blog-teaser-intro { margin-inline: auto; }
.hmi-blog-teaser-header-align-right  .hmi-blog-teaser-intro { margin-inline-start: auto; }
.hmi-blog-teaser-intro a {
  color: var(--hmi-teal-500, #007078);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hmi-blog-teaser-headline {
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  margin: 0;
}
.hmi-blog-teaser-header h4.hmi-blog-teaser-headline,
.hmi-blog-teaser-header h3.hmi-blog-teaser-headline {
  font-size: 1.125rem;
  line-height: 1.4;
}
.hmi-blog-teaser-header h2.hmi-blog-teaser-headline {
  font-size: 1.75rem;
  line-height: 1.3;
}
.hmi-blog-teaser-all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hmi-teal-500, #007078);
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.hmi-blog-teaser-all-link:hover {
  color: var(--hmi-violet-500, #4C3E80);
}
.hmi-blog-teaser-all-link-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.hmi-blog-teaser-all-link:hover .hmi-blog-teaser-all-link-arrow {
  transform: translateX(3px);
}
@media (max-width: 767px) {
  .hmi-blog-teaser-all-link { display: none; }
}

/* --- Grid --- */
.hmi-blog-teaser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .hmi-blog-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hmi-blog-teaser-cols-2 .hmi-blog-teaser-grid { grid-template-columns: repeat(2, 1fr); }
  .hmi-blog-teaser-cols-3 .hmi-blog-teaser-grid { grid-template-columns: repeat(3, 1fr); }
  .hmi-blog-teaser-cols-4 .hmi-blog-teaser-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- Card --- */
.hmi-blog-teaser-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.hmi-blog-teaser-hover-lift .hmi-blog-teaser-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 8px 30px rgba(0, 112, 120, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hmi-blog-teaser-hover-shadow .hmi-blog-teaser-card:hover {
  box-shadow: 0 8px 30px rgba(0, 112, 120, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* --- Image --- */
.hmi-blog-teaser-image-wrap {
  position: relative;
  background: var(--hmi-cool-50, #eef3f4);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hmi-blog-teaser-image-wrap .hmi-blog-teaser-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hmi-blog-teaser-image-placeholder {
  font-size: 0.75rem;
  color: var(--hmi-ink-light, #4a5568);
}

/* --- Kategorie-Pill (top-right auf dem Bild) --- */
.hmi-blog-teaser-category {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}
.hmi-blog-teaser-cat-teal   { color: var(--hmi-teal-500, #007078); }
.hmi-blog-teaser-cat-violet { color: var(--hmi-violet-500, #4C3E80); }

/* Inline-Variante (wenn kein Bild): ohne backdrop-blur, eingebettet in der Meta-Zeile */
.hmi-blog-teaser-category-inline {
  position: static;
  background: rgba(0, 112, 120, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hmi-blog-teaser-category-inline.hmi-blog-teaser-cat-violet {
  background: rgba(76, 62, 128, 0.08);
}

/* --- Body --- */
.hmi-blog-teaser-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.25rem;
}
.hmi-blog-teaser-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--hmi-ink-light, #4a5568);
  margin-bottom: 0.375rem;
}
.hmi-blog-teaser-title {
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  line-height: 1.35;
  /* padding:0 erzwingen — Impreza-Theme legt auf H-Tags einen padding-top
     (ueber --hX-padding-top o.ae.), der sonst einen grossen Luftabstand
     zwischen Datum/Meta und Titel erzeugt. */
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 1rem;
  transition: color 0.2s ease;
}
.hmi-blog-teaser-card:hover .hmi-blog-teaser-title {
  color: var(--hmi-teal-500, #007078);
}
.hmi-blog-teaser-excerpt {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 0.75rem;
}

/* --- Read-More: ans untere Ende der Card gezwungen für Höhen-Konsistenz --- */
.hmi-blog-teaser-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto; /* pusht den Link nach unten; Cards enden bündig */
  padding-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hmi-teal-500, #007078);
  transition: color 0.2s ease;
}
.hmi-blog-teaser-card:hover .hmi-blog-teaser-read-more {
  color: var(--hmi-teal-600, #005a60);
}
.hmi-blog-teaser-read-more-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}
.hmi-blog-teaser-card:hover .hmi-blog-teaser-read-more-icon {
  transform: translateX(0.25rem);
}

/* --- Empty-State (nur im Editor sichtbar) --- */
.hmi-blog-teaser-empty {
  padding: 2rem;
  text-align: center;
  color: var(--hmi-ink-light, #4a5568);
  background: var(--hmi-cool-50, #eef3f4);
  border-radius: 0.75rem;
  font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  .hmi-blog-teaser-card,
  .hmi-blog-teaser-read-more-icon,
  .hmi-blog-teaser-title,
  .hmi-blog-teaser-read-more { transition: none; }
  .hmi-blog-teaser-hover-lift .hmi-blog-teaser-card:hover { transform: none; }
}

/* =========================================================================
   HMi Blog Archive (Post-Grid mit Pagination)
   ------------------------------------------------------------------------
   Erbt die komplette Card-Optik vom hmi_blog_teaser. Eigene Zusaetze:
   - Meta-Zeile (Datum . Lesezeit . Autor) mit Bullet-Separatoren
   - Header-Block (Eyebrow + Headline + Intro) mit Ausrichtung
   - Pagination (paginate_links-Markup)
   - Featured-Tile (optional, ueber Wrapper-Klasse hmi-blog-archive-featured-on)
   - Empty-State
   ========================================================================= */

.hmi-blog-archive {
  padding: 3rem 1rem;
}
@media (min-width: 768px) {
  .hmi-blog-archive { padding: 4rem 1.5rem; }
}

/* ---- Header ---- */
.hmi-blog-archive-header {
  max-width: 80rem;
  margin: 0 auto 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hmi-blog-archive-header-align-left   { text-align: left; }
.hmi-blog-archive-header-align-center { text-align: center; }
.hmi-blog-archive-header-align-right  { text-align: right; }
.hmi-blog-archive-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hmi-teal-500, #007078);
  margin: 0;
}
.hmi-blog-archive-headline {
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  margin: 0;
}
.hmi-blog-archive-header h2.hmi-blog-archive-headline { font-size: 1.75rem; line-height: 1.3; }
.hmi-blog-archive-header h3.hmi-blog-archive-headline,
.hmi-blog-archive-header h4.hmi-blog-archive-headline { font-size: 1.25rem; line-height: 1.4; }
.hmi-blog-archive-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
  max-width: 48rem;
}
.hmi-blog-archive-header-align-center .hmi-blog-archive-intro { margin-inline: auto; }
.hmi-blog-archive-header-align-right  .hmi-blog-archive-intro { margin-inline-start: auto; }
.hmi-blog-archive-intro a {
  color: var(--hmi-teal-500, #007078);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Grid (analog blog_teaser) ---- */
.hmi-blog-archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 80rem;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .hmi-blog-archive-cols-2 .hmi-blog-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .hmi-blog-archive-cols-3 .hmi-blog-archive-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .hmi-blog-archive-cols-4 .hmi-blog-archive-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Card (1:1 Optik aus blog_teaser) ---- */
.hmi-blog-archive-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 0.875rem;
  box-shadow: 0 1px 3px rgba(0, 37, 40, 0.06), 0 4px 12px rgba(0, 37, 40, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hmi-blog-archive-hover-lift .hmi-blog-archive-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(0, 37, 40, 0.08), 0 12px 28px rgba(0, 37, 40, 0.10);
}
.hmi-blog-archive-hover-shadow .hmi-blog-archive-card:hover {
  box-shadow: 0 4px 10px rgba(0, 37, 40, 0.10), 0 20px 40px rgba(0, 37, 40, 0.12);
}

/* ---- Image + Category-Pill-Overlay ---- */
.hmi-blog-archive-image-wrap {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--hmi-sand-50, #FDFCFA);
}
.hmi-blog-archive-image-wrap .hmi-blog-archive-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hmi-blog-archive-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: rgba(0, 37, 40, 0.4);
}
.hmi-blog-archive-category {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 9999px;
}
.hmi-blog-archive-cat-teal   { color: var(--hmi-teal-500, #007078); }
.hmi-blog-archive-cat-violet { color: var(--hmi-violet-500, #4C3E80); }
.hmi-blog-archive-category-inline {
  position: static;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
  font-weight: 700;
}

/* ---- Body ---- */
.hmi-blog-archive-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.25rem 1.5rem;
  flex: 1 1 auto;
}
/* Theme-Reset: Impreza/Theme setzt eigene margin UND padding auf <h3> und
   <p> in Content-Body-Bereichen, die den Flex-Gap verfaelschen. Hier zwingend
   alle direkten Kinder auf margin:0 + padding-block:0 — Gap regelt die
   Abstaende zentral. Horizontales Padding bleibt (falls Theme z.B. Drop-Caps
   setzt, sollen die erhalten bleiben). */
.hmi-blog-archive-body > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---- Meta-Zeile: Datum . Lesezeit . Autor ---- */
.hmi-blog-archive-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-blog-archive-meta-separator {
  color: rgba(0, 37, 40, 0.25);
  line-height: 1;
}
.hmi-blog-archive-date,
.hmi-blog-archive-read-time {
  color: var(--hmi-ink-light, #4a5568);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.hmi-blog-archive-date i,
.hmi-blog-archive-read-time i {
  font-size: 0.8125rem;
  opacity: 0.7;
}
.hmi-blog-archive-author {
  font-weight: 500;
  color: var(--hmi-ink, #002528);
}

/* ---- Title ---- */
.hmi-blog-archive-title {
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  margin: 0;
  transition: color 0.25s ease;
}
.hmi-blog-archive-card:hover .hmi-blog-archive-title {
  color: var(--hmi-teal-500, #007078);
}

/* ---- Excerpt ---- */
.hmi-blog-archive-excerpt {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
}

/* ---- Read-More ---- */
.hmi-blog-archive-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hmi-teal-500, #007078);
  transition: color 0.25s ease;
}
/* Kein Farbwechsel beim Read-More im Hover (Violet ist Markenregel-maessig
   exklusiv fuer CTAs reserviert). Als Hover-Feedback reicht der Pfeil, der
   sich weiter unten durch translateX bewegt. */
.hmi-blog-archive-read-more-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.hmi-blog-archive-card:hover .hmi-blog-archive-read-more-icon {
  transform: translateX(3px);
}

/* ---- Featured-Tile (nur aktiv bei Wrapper .hmi-blog-archive-featured-on) ---- */
@media (min-width: 768px) {
  .hmi-blog-archive-featured-on.hmi-blog-archive-cols-2 .hmi-blog-archive-card.is-featured,
  .hmi-blog-archive-featured-on.hmi-blog-archive-cols-3 .hmi-blog-archive-card.is-featured,
  .hmi-blog-archive-featured-on.hmi-blog-archive-cols-4 .hmi-blog-archive-card.is-featured {
    grid-column: span 2;
  }
  .hmi-blog-archive-featured-on .hmi-blog-archive-card.is-featured .hmi-blog-archive-image-wrap {
    aspect-ratio: 16 / 9;
  }
  .hmi-blog-archive-featured-on .hmi-blog-archive-card.is-featured .hmi-blog-archive-title {
    font-size: 1.5rem;
    line-height: 1.25;
  }
  .hmi-blog-archive-featured-on .hmi-blog-archive-card.is-featured .hmi-blog-archive-excerpt {
    font-size: 1rem;
  }
}

/* ---- Pagination ---- */
.hmi-blog-archive-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 80rem;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 37, 40, 0.08);
}
.hmi-blog-archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(0, 37, 40, 0.15);
  border-radius: 9999px;
  color: var(--hmi-ink-light, #4a5568);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.hmi-blog-archive-pagination .page-numbers:hover,
.hmi-blog-archive-pagination .page-numbers:focus-visible {
  border-color: var(--hmi-teal-500, #007078);
  color: var(--hmi-teal-500, #007078);
}
.hmi-blog-archive-pagination .page-numbers.current {
  background: var(--hmi-teal-500, #007078);
  border-color: var(--hmi-teal-500, #007078);
  color: #fff;
}
.hmi-blog-archive-pagination .page-numbers.dots {
  border: none;
  background: transparent;
}

/* ---- Empty-State ---- */
.hmi-blog-archive-empty {
  max-width: 40rem;
  margin: 3rem auto;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--hmi-ink-light, #4a5568);
  font-size: 1rem;
  background: var(--hmi-sand-50, #FDFCFA);
  border-radius: 0.875rem;
  border: 1px dashed rgba(0, 37, 40, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .hmi-blog-archive-card,
  .hmi-blog-archive-read-more-icon,
  .hmi-blog-archive-title,
  .hmi-blog-archive-read-more,
  .hmi-blog-archive-pagination .page-numbers { transition: none; }
  .hmi-blog-archive-hover-lift .hmi-blog-archive-card:hover { transform: none; }
}

/* =========================================================================
   HMi Related Teasers (3er-Card-Block, optional mit Overlap in Folge-Section)
   ========================================================================= */

.hmi-related-teasers {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .hmi-related-teasers { padding-top: 4rem; }
}
/* Bei Overlap-Modi: pb unten reduzieren, weil margin-bottom greift */
.hmi-related-teasers-transition-overlap-transparent,
.hmi-related-teasers-transition-overlap-solid {
  padding-bottom: 0;
  z-index: 2; /* über der Folge-Section */
}

.hmi-related-teasers-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .hmi-related-teasers-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .hmi-related-teasers-inner { padding-left: 2rem; padding-right: 2rem; }
}
.hmi-related-teasers-width-compact .hmi-related-teasers-inner { max-width: 64rem; }  /* 1024px */
.hmi-related-teasers-width-medium  .hmi-related-teasers-inner { max-width: 72rem; }  /* 1152px */
.hmi-related-teasers-width-wide    .hmi-related-teasers-inner { max-width: 80rem; }  /* 1280px */

/* --- Header --- */
.hmi-related-teasers-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.hmi-related-teasers-headline {
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  line-height: 1.3;
  margin: 0 0 0.75rem;
}
.hmi-related-teasers-subline {
  font-size: 1rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
}

/* Optionaler zentrierter "Alle X ansehen"-Link unter der Subline. */
.hmi-related-teasers-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.hmi-related-teasers-header-link:hover { transform: translateX(2px); }
.hmi-related-teasers-header-link-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}
.hmi-related-teasers-header-link:hover .hmi-related-teasers-header-link-icon {
  transform: translateX(2px);
}
.hmi-related-teasers-header-link-teal    { color: var(--hmi-teal-500, #007078); }
.hmi-related-teasers-header-link-teal:hover { color: var(--hmi-teal-700, #004a4f); }
.hmi-related-teasers-header-link-violet  { color: var(--hmi-violet-500, #4C3E80); }
.hmi-related-teasers-header-link-violet:hover { color: var(--hmi-violet-600, #3f3369); }
.hmi-related-teasers-header-link-navy    { color: var(--hmi-navy-500, #0274be); }
.hmi-related-teasers-header-link-navy:hover { color: var(--hmi-navy-600, #0260a0); }
.hmi-related-teasers-header-link-neutral { color: var(--hmi-ink-light, #4a5568); }
.hmi-related-teasers-header-link-neutral:hover { color: var(--hmi-ink, #0f131f); }

/* Meta-Zeile pro Card (Datum / Location / etc.) — dezent, zwischen Eyebrow
   und Headline positioniert. Bewusst neutrale Farbe, damit die Eyebrow-
   Akzentfarbe dominant bleibt. */
/* Meta sitzt als dezenter Untertitel direkt unter dem Eyebrow — kein
   margin-top, und nur kurzer margin-bottom zum Titel. */
.hmi-related-teasers-meta {
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 0.5rem;
  line-height: 1.45;
}

/* --- Grid --- */
.hmi-related-teasers-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  z-index: 3; /* Cards liegen über Overlay/Overlap-Grenze */
}
@media (min-width: 640px) {
  .hmi-related-teasers-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Card --- */
.hmi-related-teasers-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hmi-related-teasers-hover-lift .hmi-related-teasers-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 8px 30px rgba(0, 112, 120, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hmi-related-teasers-hover-shadow .hmi-related-teasers-card:hover {
  box-shadow: 0 8px 30px rgba(0, 112, 120, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Card-Body mit flex-col + mt-auto auf Link für Höhen-Konsistenz */
.hmi-related-teasers-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.5rem;
}

/* --- Accent-Bar (Top-Balken) --- */
.hmi-related-teasers-accent-bar {
  display: block;
  height: 4px;
  background: linear-gradient(to right, var(--hmi-teal-400, #26c6c7), var(--hmi-teal-500, #007078), var(--hmi-teal-600, #005a60));
}
.hmi-related-teasers-accent-violet  .hmi-related-teasers-accent-bar { background: linear-gradient(to right, #9585cc, var(--hmi-violet-500, #4C3E80), #3f3369); }
.hmi-related-teasers-accent-navy    .hmi-related-teasers-accent-bar { background: linear-gradient(to right, #60a5fa, var(--hmi-navy-500, #0274be), var(--hmi-navy-600, #0260a0)); }
.hmi-related-teasers-accent-warm    .hmi-related-teasers-accent-bar { background: linear-gradient(to right, #f8b57e, #e08a4c, #c56d2e); }
.hmi-related-teasers-accent-neutral .hmi-related-teasers-accent-bar { background: linear-gradient(to right, #cbd5e1, #94a3b8, #64748b); }

/* --- Eyebrow (Icon + Label) --- */
.hmi-related-teasers-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* Enger Abstand zur Meta-Zeile darunter — Meta ist eine dezente
     Erweiterung der Eyebrow-Info und gehoert optisch dazu. */
  margin-bottom: 0.25rem;
}
/* Wenn kein Meta-Block folgt, direkt zur Headline — kompakter. */
.hmi-related-teasers-eyebrow:not(:has(+ .hmi-related-teasers-meta)) {
  margin-bottom: 0.5rem;
}
.hmi-related-teasers-accent-teal    .hmi-related-teasers-eyebrow { color: var(--hmi-teal-500, #007078); }
.hmi-related-teasers-accent-violet  .hmi-related-teasers-eyebrow { color: var(--hmi-violet-500, #4C3E80); }
.hmi-related-teasers-accent-navy    .hmi-related-teasers-eyebrow { color: var(--hmi-navy-500, #0274be); }
.hmi-related-teasers-accent-warm    .hmi-related-teasers-eyebrow { color: #c56d2e; }
.hmi-related-teasers-accent-neutral .hmi-related-teasers-eyebrow { color: #64748b; }

.hmi-related-teasers-icon i,
.hmi-related-teasers-icon svg {
  width: 0.875rem;
  height: 0.875rem;
  font-size: 0.875rem;
}

/* --- Title --- */
.hmi-related-teasers-card .hmi-related-teasers-title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hmi-ink, #002528);
  margin: 0 0 0.5rem !important;
  padding-top: 0 !important;
  transition: color 0.2s ease;
}
.hmi-related-teasers-accent-teal   .hmi-related-teasers-card:hover .hmi-related-teasers-title { color: var(--hmi-teal-500, #007078); }
.hmi-related-teasers-accent-violet .hmi-related-teasers-card:hover .hmi-related-teasers-title { color: var(--hmi-violet-500, #4C3E80); }
.hmi-related-teasers-accent-navy   .hmi-related-teasers-card:hover .hmi-related-teasers-title { color: var(--hmi-navy-500, #0274be); }

/* --- Text --- */
.hmi-related-teasers-text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 1rem;
}

/* --- Link (immer unten bündig durch mt-auto) --- */
.hmi-related-teasers-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: gap 0.2s ease, color 0.2s ease;
}
.hmi-related-teasers-accent-teal    .hmi-related-teasers-link { color: var(--hmi-teal-500, #007078); }
.hmi-related-teasers-accent-violet  .hmi-related-teasers-link { color: var(--hmi-violet-500, #4C3E80); }
.hmi-related-teasers-accent-navy    .hmi-related-teasers-link { color: var(--hmi-navy-500, #0274be); }
.hmi-related-teasers-accent-warm    .hmi-related-teasers-link { color: #c56d2e; }
.hmi-related-teasers-accent-neutral .hmi-related-teasers-link { color: #64748b; }
.hmi-related-teasers-link:hover { gap: 0.5rem; }

.hmi-related-teasers-link-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}
.hmi-related-teasers-link:hover .hmi-related-teasers-link-icon {
  transform: translateX(0.25rem);
}

/* --- Empty-State (nur im Editor sichtbar) --- */
.hmi-related-teasers-empty {
  padding: 2rem;
  text-align: center;
  color: var(--hmi-ink-light, #4a5568);
  background: var(--hmi-cool-50, #eef3f4);
  border-radius: 0.75rem;
  font-size: 0.875rem;
}

/* ===========================================================================
   HMi Selbsttests Teaser — 3er-Block aus dem hmi-selbsttests-Plugin
   Pattern abgekupfert von hmi_related_teasers (Section + Overlap) und
   .hmi-card (Card + Stripe + Hover-Glow).
   =========================================================================== */
.hmi-selbsttests-teaser {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .hmi-selbsttests-teaser { padding-top: 4rem; }
}
.hmi-selbsttests-teaser-transition-overlap-transparent,
.hmi-selbsttests-teaser-transition-overlap-solid {
  padding-bottom: 0;
  z-index: 2;
}

.hmi-selbsttests-teaser-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .hmi-selbsttests-teaser-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .hmi-selbsttests-teaser-inner { padding-left: 2rem; padding-right: 2rem; }
}
.hmi-selbsttests-teaser-width-compact .hmi-selbsttests-teaser-inner { max-width: 64rem; }
.hmi-selbsttests-teaser-width-medium  .hmi-selbsttests-teaser-inner { max-width: 72rem; }
.hmi-selbsttests-teaser-width-wide    .hmi-selbsttests-teaser-inner { max-width: 80rem; }

/* --- Header --- */
.hmi-selbsttests-teaser-header {
  text-align: center;
  margin-bottom: 2rem;
}
.hmi-selbsttests-teaser-headline {
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.hmi-selbsttests-teaser-subline {
  font-size: 1rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
}
.hmi-selbsttests-teaser-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hmi-teal-500, #007078);
  text-decoration: none;
  transition: color 0.2s ease;
}
.hmi-selbsttests-teaser-header-link:hover {
  color: var(--hmi-teal-700, #004a4f);
}
.hmi-selbsttests-teaser-header-link-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.hmi-selbsttests-teaser-header-link:hover .hmi-selbsttests-teaser-header-link-arrow {
  transform: translateX(2px);
}

/* --- Grid --- */
.hmi-selbsttests-teaser-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  z-index: 3; /* Cards liegen über Overlap-Grenze */
}
@media (min-width: 768px) {
  .hmi-selbsttests-teaser-cols-3 .hmi-selbsttests-teaser-grid { grid-template-columns: repeat(3, 1fr); }
  .hmi-selbsttests-teaser-cols-2 .hmi-selbsttests-teaser-grid { grid-template-columns: repeat(2, 1fr); max-width: 48rem; margin-left: auto; margin-right: auto; }
  .hmi-selbsttests-teaser-cols-1 .hmi-selbsttests-teaser-grid { grid-template-columns: 1fr; max-width: 24rem; margin-left: auto; margin-right: auto; }
}

/* --- Card --- */
.hmi-selbsttests-teaser-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hmi-selbsttests-teaser-hover-lift a.hmi-selbsttests-teaser-card:hover {
  transform: translateY(-0.25rem);
}

/* --- Top-Stripe (4px Gradient, Default = teal) --- */
.hmi-selbsttests-teaser-card-stripe {
  display: block;
  height: 4px;
  background: linear-gradient(to right,
    var(--hmi-teal-400, #26c6c7),
    var(--hmi-teal-500, #007078),
    var(--hmi-teal-600, #005a60));
}
.hmi-selbsttests-teaser-accent-violet .hmi-selbsttests-teaser-card-stripe {
  background: linear-gradient(to right, #9585cc, var(--hmi-violet-500, #4C3E80), #3f3369);
}
.hmi-selbsttests-teaser-accent-navy .hmi-selbsttests-teaser-card-stripe {
  background: linear-gradient(to right, #60a5fa, var(--hmi-navy-500, #0274be), var(--hmi-navy-600, #0260a0));
}
.hmi-selbsttests-teaser-accent-warm .hmi-selbsttests-teaser-card-stripe {
  background: linear-gradient(to right, #f8b57e, #e08a4c, #c56d2e);
}
.hmi-selbsttests-teaser-accent-neutral .hmi-selbsttests-teaser-card-stripe {
  background: linear-gradient(to right, #cbd5e1, #94a3b8, #64748b);
}

/* Hover-Glow pro Akzent (Card-Wrapper). Nur fuer hover-lift relevant —
   Border-via-Stripe + Default-Schatten bleiben unangetastet. */
.hmi-selbsttests-teaser-hover-lift a.hmi-selbsttests-teaser-accent-teal:hover {
  box-shadow: 0 8px 30px rgba(0, 112, 120, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hmi-selbsttests-teaser-hover-lift a.hmi-selbsttests-teaser-accent-violet:hover {
  box-shadow: 0 16px 40px rgba(76, 62, 128, 0.22), 0 4px 12px rgba(76, 62, 128, 0.08);
}
.hmi-selbsttests-teaser-hover-lift a.hmi-selbsttests-teaser-accent-navy:hover {
  box-shadow: 0 8px 30px rgba(2, 116, 190, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hmi-selbsttests-teaser-hover-lift a.hmi-selbsttests-teaser-accent-warm:hover {
  box-shadow: 0 8px 30px rgba(197, 109, 46, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hmi-selbsttests-teaser-hover-lift a.hmi-selbsttests-teaser-accent-neutral:hover {
  box-shadow: 0 8px 30px rgba(100, 116, 139, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* --- Card-Inner (flex-col, padding) --- */
.hmi-selbsttests-teaser-card-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.5rem;
}

/* --- Eyebrow (Icon + Label) — Default teal, Akzent-Overrides unten --- */
.hmi-selbsttests-teaser-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hmi-teal-500, #007078);
  margin-bottom: 0.5rem;
}
.hmi-selbsttests-teaser-eyebrow i {
  font-size: 0.875rem;
}
.hmi-selbsttests-teaser-accent-violet  .hmi-selbsttests-teaser-eyebrow { color: var(--hmi-violet-500, #4C3E80); }
.hmi-selbsttests-teaser-accent-navy    .hmi-selbsttests-teaser-eyebrow { color: var(--hmi-navy-500, #0274be); }
.hmi-selbsttests-teaser-accent-warm    .hmi-selbsttests-teaser-eyebrow { color: #c56d2e; }
.hmi-selbsttests-teaser-accent-neutral .hmi-selbsttests-teaser-eyebrow { color: #64748b; }

/* --- Meta-Zeile (Dauer · Sofort-Ergebnis) --- */
.hmi-selbsttests-teaser-meta {
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
  margin-bottom: 0.75rem;
}

/* --- Title --- */
.hmi-selbsttests-teaser-card .hmi-selbsttests-teaser-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hmi-ink, #002528);
  margin: 0 0 0.5rem !important;
  padding-top: 0 !important;
}

/* --- Teaser-Text --- */
.hmi-selbsttests-teaser-text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 1rem;
  flex-grow: 1;
}

/* --- CTA "Jetzt kostenlos starten →" — Default teal, Akzent-Overrides unten --- */
.hmi-selbsttests-teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hmi-teal-500, #007078);
  transition: color 0.2s ease, gap 0.2s ease;
}
.hmi-selbsttests-teaser-accent-violet  .hmi-selbsttests-teaser-cta { color: var(--hmi-violet-500, #4C3E80); }
.hmi-selbsttests-teaser-accent-navy    .hmi-selbsttests-teaser-cta { color: var(--hmi-navy-500, #0274be); }
.hmi-selbsttests-teaser-accent-warm    .hmi-selbsttests-teaser-cta { color: #c56d2e; }
.hmi-selbsttests-teaser-accent-neutral .hmi-selbsttests-teaser-cta { color: #64748b; }

a.hmi-selbsttests-teaser-card:hover .hmi-selbsttests-teaser-cta {
  color: var(--hmi-teal-700, #004a4f);
  gap: 0.5rem;
}
a.hmi-selbsttests-teaser-accent-violet:hover  .hmi-selbsttests-teaser-cta { color: var(--hmi-violet-600, #3f3369); }
a.hmi-selbsttests-teaser-accent-navy:hover    .hmi-selbsttests-teaser-cta { color: var(--hmi-navy-600, #0260a0); }
a.hmi-selbsttests-teaser-accent-warm:hover    .hmi-selbsttests-teaser-cta { color: #a35621; }
a.hmi-selbsttests-teaser-accent-neutral:hover .hmi-selbsttests-teaser-cta { color: #475569; }

.hmi-selbsttests-teaser-cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
a.hmi-selbsttests-teaser-card:hover .hmi-selbsttests-teaser-cta-arrow {
  transform: translateX(0.25rem);
}

/* --- Empty / Builder-Hint --- */
.hmi-selbsttests-teaser-empty {
  padding: 2rem;
  text-align: center;
  color: var(--hmi-ink-light, #4a5568);
  background: var(--hmi-cool-50, #eef3f4);
  border-radius: 0.75rem;
  font-size: 0.875rem;
}
.hmi-selbsttests-teaser-builder-hint {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(124, 58, 237, 0.06);
  border: 1px dashed var(--hmi-violet-500, #7c3aed);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
  text-align: center;
}
.hmi-selbsttests-teaser-builder-hint code {
  background: transparent;
  font-size: 0.875rem;
  color: var(--hmi-ink, #002528);
}

@media (prefers-reduced-motion: reduce) {
  .hmi-selbsttests-teaser-card,
  .hmi-selbsttests-teaser-cta,
  .hmi-selbsttests-teaser-cta-arrow,
  .hmi-selbsttests-teaser-header-link,
  .hmi-selbsttests-teaser-header-link-arrow { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hmi-related-teasers-card,
  .hmi-related-teasers-title,
  .hmi-related-teasers-link,
  .hmi-related-teasers-link-icon { transition: none; }
  .hmi-related-teasers-hover-lift .hmi-related-teasers-card:hover { transform: none; }
}

/* =========================================================================
   HMi Selbsttests Lead-Gate (Section-Wrapper)
   Das Test-UI selbst (Paywall, Fog, Lead-Form, Chart) liegt im
   hmi-selbsttests-Plugin. Hier nur die Hülle.
   ========================================================================= */

.hmi-selbsttests-gate {
  position: relative;
  padding: 3rem 1rem;
}
@media (min-width: 768px) {
  .hmi-selbsttests-gate { padding: 4rem 1.5rem; }
}

/* Hintergrund-Varianten (flach) */
.hmi-selbsttests-gate-bg-cool-50     { background: var(--hmi-cool-50, #F5F5F8); }
.hmi-selbsttests-gate-bg-sand-50     { background: var(--hmi-sand-50, #FAF8F3); }
.hmi-selbsttests-gate-bg-white       { background: #FFFFFF; }
.hmi-selbsttests-gate-bg-transparent { background: transparent; }

.hmi-selbsttests-gate-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
.hmi-selbsttests-gate-width-compact .hmi-selbsttests-gate-inner { max-width: 48rem; }  /* 768px */
.hmi-selbsttests-gate-width-medium  .hmi-selbsttests-gate-inner { max-width: 56rem; }  /* 896px */
.hmi-selbsttests-gate-width-wide    .hmi-selbsttests-gate-inner { max-width: 72rem; }  /* 1152px */
.hmi-selbsttests-gate-width-full    .hmi-selbsttests-gate-inner { max-width: 80rem; }  /* 1280px */

/* --- Header --- */
.hmi-selbsttests-gate-header {
  text-align: center;
  margin-bottom: 2rem;
}
.hmi-selbsttests-gate-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hmi-teal-500, #007078);
  margin-bottom: 0.75rem;
}
.hmi-selbsttests-gate-headline {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  line-height: 1.3;
  margin: 0 0 0.75rem;
}
.hmi-selbsttests-gate-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* --- Content-Bereich (Shortcode-Output liegt hier) --- */
.hmi-selbsttests-gate-content {
  position: relative;
}

/* --- Admin-Warnung (nur für Admins / Builder sichtbar) --- */
.hmi-selbsttests-gate-warning {
  padding: 1.25rem 1.5rem;
  background: #fef3c7; /* amber-100 */
  border: 1px solid #fbbf24; /* amber-400 */
  border-radius: 0.5rem;
  color: #78350f; /* amber-900 */
  font-size: 0.875rem;
  line-height: 1.5;
}
.hmi-selbsttests-gate-warning code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.8125rem;
}

/* =========================================================================
   HMi Accordion (FAQ / ausklappbare Inhalte)

   Progressive Enhancement: ohne JS sind alle Panels offen (max-height:none).
   JS fügt der Section .hmi-accordion--js hinzu — dann greifen die
   max-height-Regeln, und nur Items mit .is-open werden ausgeklappt.
   ========================================================================= */

.hmi-accordion {
  position: relative;
  padding: 3rem 1rem;
}
@media (min-width: 768px) {
  .hmi-accordion { padding: 4rem 1.5rem; }
}

/* Hintergrund-Varianten (flach) */
.hmi-accordion-bg-sand-50     { background: var(--hmi-sand-50, #FAF8F3); }
.hmi-accordion-bg-cool-50     { background: var(--hmi-cool-50, #F5F5F8); }
.hmi-accordion-bg-white       { background: #FFFFFF; }
.hmi-accordion-bg-transparent { background: transparent; }

.hmi-accordion-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.hmi-accordion-width-compact .hmi-accordion-inner { max-width: 48rem; } /* 768px */
.hmi-accordion-width-medium  .hmi-accordion-inner { max-width: 56rem; } /* 896px */
.hmi-accordion-width-wide    .hmi-accordion-inner { max-width: 64rem; } /* 1024px */

/* --- Header --- */
.hmi-accordion-header {
  margin-bottom: 2rem;
}
.hmi-accordion-align-center .hmi-accordion-header { text-align: center; }
.hmi-accordion-align-left   .hmi-accordion-header { text-align: left; }

.hmi-accordion-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.hmi-accordion-accent-teal   .hmi-accordion-eyebrow { color: var(--hmi-teal-500, #007078); }
.hmi-accordion-accent-violet .hmi-accordion-eyebrow { color: var(--hmi-violet-500, #4C3E80); }
.hmi-accordion-accent-ink    .hmi-accordion-eyebrow { color: var(--hmi-ink, #002528); }

.hmi-accordion-headline {
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  line-height: 1.3;
  margin: 0 0 0.75rem;
}
.hmi-accordion-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
  max-width: 42rem;
}
.hmi-accordion-align-center .hmi-accordion-intro {
  margin-left: auto;
  margin-right: auto;
}

/* --- Items-Liste --- */
.hmi-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hmi-accordion-item {
  background: #FFFFFF;
  border: 1px solid #E5E7EB; /* gray-200 */
  border-radius: 0.75rem;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hmi-accordion-item.is-open {
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* --- Heading (hält den Button) --- */
.hmi-accordion-heading {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* --- Button (die Frage) --- */
.hmi-accordion-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.125rem 1.25rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color 0.15s ease;
}
.hmi-accordion-button:hover {
  background-color: #F9FAFB; /* gray-50 */
}
.hmi-accordion-button:focus-visible {
  outline: 2px solid var(--hmi-teal-500, #007078);
  outline-offset: -2px;
}
.hmi-accordion-accent-violet .hmi-accordion-button:focus-visible { outline-color: var(--hmi-violet-500, #4C3E80); }
.hmi-accordion-accent-ink    .hmi-accordion-button:focus-visible { outline-color: var(--hmi-ink, #002528); }

.hmi-accordion-question {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--hmi-ink, #002528);
  padding-right: 1rem;
  line-height: 1.4;
}

.hmi-accordion-chevron {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.2s ease;
}
.hmi-accordion-accent-teal   .hmi-accordion-chevron { color: var(--hmi-teal-500, #007078); }
.hmi-accordion-accent-violet .hmi-accordion-chevron { color: var(--hmi-violet-500, #4C3E80); }
.hmi-accordion-accent-ink    .hmi-accordion-chevron { color: var(--hmi-ink, #002528); }

/* Chevron rotieren wenn aria-expanded=true */
.hmi-accordion-button[aria-expanded="true"] .hmi-accordion-chevron {
  transform: rotate(180deg);
}

/* --- Panel (die Antwort) ---
   Ohne JS: kein max-height-Limit → Content voll sichtbar (SEO + a11y ok).
   Mit JS: max-height:0 wenn nicht is-open, max-height:<großer Wert> wenn is-open. */
.hmi-accordion-panel {
  overflow: hidden;
}
.hmi-accordion--js .hmi-accordion-panel {
  max-height: 0;
  transition: max-height 0.3s ease;
}
.hmi-accordion--js .hmi-accordion-item.is-open .hmi-accordion-panel {
  max-height: 40rem; /* ausreichend für lange Antworten; bei Bedarf pro Item überschreibbar */
}

.hmi-accordion-content {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-accordion-content > :first-child { margin-top: 0; }
.hmi-accordion-content > :last-child  { margin-bottom: 0; }
.hmi-accordion-content strong { color: var(--hmi-ink, #002528); }
.hmi-accordion-content a {
  color: var(--hmi-teal-500, #007078);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.hmi-accordion-content a:hover {
  border-bottom-color: var(--hmi-teal-500, #007078);
}
.hmi-accordion-accent-violet .hmi-accordion-content a { color: var(--hmi-violet-500, #4C3E80); }
.hmi-accordion-accent-violet .hmi-accordion-content a:hover { border-bottom-color: var(--hmi-violet-500, #4C3E80); }

/* --- Empty-State (nur im Editor sichtbar) --- */
.hmi-accordion-empty {
  padding: 2rem;
  text-align: center;
  color: var(--hmi-ink-light, #4a5568);
  background: var(--hmi-cool-50, #eef3f4);
  border-radius: 0.75rem;
  font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  .hmi-accordion-button,
  .hmi-accordion-chevron,
  .hmi-accordion-item,
  .hmi-accordion-content a { transition: none; }
  .hmi-accordion--js .hmi-accordion-panel { transition: none; }
}

/* =========================================================================
   HMi Two-Columns Section
   Flexible Zwei-Spalten mit wählbarem Typ (text/image/video) pro Spalte.
   ========================================================================= */

.hmi-two-columns {
  position: relative;
}

/* --- Section-Padding --- */
.hmi-two-columns-padding-normal    { padding: 5rem 1rem; }
.hmi-two-columns-padding-compact   { padding: 3rem 1rem; }
.hmi-two-columns-padding-spacious  { padding: 7rem 1rem; }
@media (min-width: 768px) {
  .hmi-two-columns-padding-normal   { padding: 5rem 1.5rem; }
  .hmi-two-columns-padding-compact  { padding: 3rem 1.5rem; }
  .hmi-two-columns-padding-spacious { padding: 7rem 1.5rem; }
}

/* --- Hintergrund --- */
.hmi-two-columns-bg-white       { background: #FFFFFF; }
.hmi-two-columns-bg-cool-50     { background: var(--hmi-cool-50, #F5F5F8); }
.hmi-two-columns-bg-sand-50     { background: var(--hmi-sand-50, #FAF8F3); }
.hmi-two-columns-bg-transparent { background: transparent; }

/* --- Container-Breite --- */
.hmi-two-columns-inner {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
.hmi-two-columns-width-medium .hmi-two-columns-inner { max-width: 72rem; }  /* 1152px */
.hmi-two-columns-width-wide   .hmi-two-columns-inner { max-width: 80rem; }  /* 1280px */
.hmi-two-columns-width-full   .hmi-two-columns-inner { max-width: 96rem; }  /* 1536px */

/* --- Grid --- */
.hmi-two-columns-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .hmi-two-columns-grid { gap: 2.5rem; }
}

/* Gap-Modifier (nur auf Desktop wirksam) */
@media (min-width: 1024px) {
  .hmi-two-columns-gap-sm .hmi-two-columns-grid { gap: 2rem; }
  .hmi-two-columns-gap-md .hmi-two-columns-grid { gap: 3rem; }
  .hmi-two-columns-gap-lg .hmi-two-columns-grid { gap: 4rem; }
}

/* Ratio-Modifier — greifen ab lg-Breakpoint */
@media (min-width: 1024px) {
  .hmi-two-columns-ratio-50-50 .hmi-two-columns-grid { grid-template-columns: 1fr 1fr; }
  .hmi-two-columns-ratio-60-40 .hmi-two-columns-grid { grid-template-columns: 3fr 2fr; }
  .hmi-two-columns-ratio-40-60 .hmi-two-columns-grid { grid-template-columns: 2fr 3fr; }
  .hmi-two-columns-ratio-67-33 .hmi-two-columns-grid { grid-template-columns: 2fr 1fr; }
  .hmi-two-columns-ratio-33-67 .hmi-two-columns-grid { grid-template-columns: 1fr 2fr; }
}

/* Vertikale Ausrichtung */
.hmi-two-columns-valign-top     .hmi-two-columns-grid { align-items: start; }
.hmi-two-columns-valign-center  .hmi-two-columns-grid { align-items: center; }
.hmi-two-columns-valign-bottom  .hmi-two-columns-grid { align-items: end; }
.hmi-two-columns-valign-stretch .hmi-two-columns-grid { align-items: stretch; }

/* Mobile-Reihenfolge umkehren (nur unterhalb lg) */
@media (max-width: 1023px) {
  .hmi-two-columns-mobile-reversed .hmi-two-columns-col-1 { order: 2; }
  .hmi-two-columns-mobile-reversed .hmi-two-columns-col-2 { order: 1; }
}

/* --- Einzelne Spalte --- */
.hmi-two-columns-col {
  min-width: 0; /* verhindert, dass lange Text-Blöcke das Grid sprengen */
}

/* --- TEXT-Spalte --- */
.hmi-two-columns-text > * + * {
  margin-top: 1rem;
}
.hmi-two-columns-text > *:first-child {
  margin-top: 0;
}

/* --- Per-Spalten-Vertikal-Ausrichtung (fuer Image/Video) ----------------- */
/* Ueberschreibt align-items der Section-Ebene fuer die einzelne Spalte.
   Nuetzlich, wenn z.B. das Bild in Spalte 2 zentriert sein soll, waehrend
   die Text-Spalte 1 oben ausgerichtet bleibt. */
.hmi-two-columns-col-valign-top     { align-self: start; }
.hmi-two-columns-col-valign-center  { align-self: center; }
.hmi-two-columns-col-valign-bottom  { align-self: end; }
.hmi-two-columns-col-valign-stretch { align-self: stretch; }
.hmi-two-columns-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-two-columns-body > :first-child { margin-top: 0; }
.hmi-two-columns-body > :last-child  { margin-bottom: 0; }
.hmi-two-columns-body strong { color: var(--hmi-ink, #002528); }
.hmi-two-columns-body a {
  color: var(--hmi-teal-500, #007078);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.hmi-two-columns-body a:hover {
  color: var(--hmi-teal-600, #005a60);
}
.hmi-two-columns-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* --- IMAGE-Spalte --- */
.hmi-two-columns-image {
  margin: 0;
  position: relative;
}
.hmi-two-columns-image-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Aspect-Ratios — wenn kein "auto", fixierte Box */
.hmi-two-columns-image-ratio-4-3  .hmi-two-columns-image-img { aspect-ratio: 4 / 3; }
.hmi-two-columns-image-ratio-3-2  .hmi-two-columns-image-img { aspect-ratio: 3 / 2; }
.hmi-two-columns-image-ratio-16-9 .hmi-two-columns-image-img { aspect-ratio: 16 / 9; }
.hmi-two-columns-image-ratio-1-1  .hmi-two-columns-image-img { aspect-ratio: 1 / 1; }
.hmi-two-columns-image-ratio-3-4  .hmi-two-columns-image-img { aspect-ratio: 3 / 4; }
.hmi-two-columns-image-ratio-auto .hmi-two-columns-image-img { aspect-ratio: auto; }

/* Frames */
.hmi-two-columns-image-frame-plain            .hmi-two-columns-image-img {
  border-radius: 0;
}
.hmi-two-columns-image-frame-rounded          .hmi-two-columns-image-img {
  border-radius: 1rem;
}
.hmi-two-columns-image-frame-bordered         .hmi-two-columns-image-img {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 1rem;
}
.hmi-two-columns-image-frame-shadow           .hmi-two-columns-image-img {
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 10px 30px rgba(0, 0, 0, 0.08);
}
.hmi-two-columns-image-frame-bordered-shadow  .hmi-two-columns-image-img {
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.hmi-two-columns-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--hmi-cool-50, #F5F5F8);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 1rem;
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
}

.hmi-two-columns-image-caption {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--hmi-ink-light, #4a5568);
  text-align: center;
  line-height: 1.5;
}

/* --- VIDEO-Spalte --- */
.hmi-two-columns-video {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #000;
}
.hmi-two-columns-video-ratio-16-9 { aspect-ratio: 16 / 9; }
.hmi-two-columns-video-ratio-4-3  { aspect-ratio: 4 / 3; }
.hmi-two-columns-video-ratio-1-1  { aspect-ratio: 1 / 1; }

.hmi-two-columns-video iframe,
.hmi-two-columns-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hmi-two-columns-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: var(--hmi-cool-50, #F5F5F8);
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 1rem;
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
}

/* =========================================================================
   HMi Selbsttest-Cards — Test-Raster mit Eyebrow-Pill, Header, Grid,
   Trust-Bar und Footer-Link. Zentriertes Card-Design (Icon-Box + Titel +
   Subline + Meta-Zeile + Pfeil-Link). Akzent-Stripe oben pro Card.
   ========================================================================= */

.hmi-selbsttest-cards {
  padding: 4rem 1.25rem;
}
.hmi-selbsttest-cards-bg-transparent { background: transparent; }
.hmi-selbsttest-cards-bg-white       { background: #fff; }
.hmi-selbsttest-cards-bg-cool-50     { background: var(--hmi-cool-50, #F5F5F8); }
.hmi-selbsttest-cards-bg-sand-50     { background: var(--hmi-sand-50, #FAF8F3); }

.hmi-selbsttest-cards-inner {
  margin: 0 auto;
  width: 100%;
}
.hmi-selbsttest-cards-width-standard .hmi-selbsttest-cards-inner { max-width: 1280px; }
.hmi-selbsttest-cards-width-compact  .hmi-selbsttest-cards-inner { max-width: 1080px; }
.hmi-selbsttest-cards-width-narrow   .hmi-selbsttest-cards-inner { max-width: 860px; }
.hmi-selbsttest-cards-width-wide     .hmi-selbsttest-cards-inner { max-width: 1440px; }

/* ---------- Header ---------- */
.hmi-selbsttest-cards-header {
  text-align: center;
  margin-bottom: 3rem;
}
.hmi-selbsttest-cards-eyebrow-pill {
  display: inline-block;
  padding: 0.25rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.875rem;
}
.hmi-selbsttest-cards-eyebrow-pill-teal   { background: rgba(0, 112, 120, 0.10);  color: var(--hmi-teal-500, #007078); }
.hmi-selbsttest-cards-eyebrow-pill-violet { background: rgba(76, 62, 128, 0.10);  color: var(--hmi-violet-500, #4C3E80); }
.hmi-selbsttest-cards-eyebrow-pill-navy   { background: rgba(2, 116, 190, 0.10);  color: var(--hmi-navy-500, #0274be); }

.hmi-selbsttest-cards-headline {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  line-height: 1.2;
  margin: 0 0 0.75rem;
}
.hmi-selbsttest-cards-intro {
  max-width: 36rem;
  margin: 0 auto;
  font-size: 1rem;
  color: var(--hmi-ink-light, #4a5568);
  line-height: 1.55;
}
.hmi-selbsttest-cards-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.hmi-selbsttest-cards-header-link:hover { transform: translateX(2px); }
.hmi-selbsttest-cards-header-link-teal    { color: var(--hmi-teal-500, #007078); }
.hmi-selbsttest-cards-header-link-teal:hover { color: var(--hmi-teal-700, #004a4f); }
.hmi-selbsttest-cards-header-link-violet  { color: var(--hmi-violet-500, #4C3E80); }
.hmi-selbsttest-cards-header-link-violet:hover { color: var(--hmi-violet-600, #3f3369); }
.hmi-selbsttest-cards-header-link-navy    { color: var(--hmi-navy-500, #0274be); }
.hmi-selbsttest-cards-header-link-navy:hover { color: var(--hmi-navy-600, #0260a0); }
.hmi-selbsttest-cards-header-link-neutral { color: var(--hmi-ink-light, #4a5568); }
.hmi-selbsttest-cards-header-link-neutral:hover { color: var(--hmi-ink, #0f131f); }

/* Pfeil-Icon (Header-Link, Card-Link, Footer-Link) */
.hmi-selbsttest-cards-arrow {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.hmi-selbsttest-cards-header-link:hover .hmi-selbsttest-cards-arrow,
.hmi-selbsttest-card-link:hover .hmi-selbsttest-cards-arrow,
.hmi-selbsttest-cards-footer-link:hover .hmi-selbsttest-cards-arrow {
  transform: translateX(3px);
}

/* ---------- Grid ---------- */
.hmi-selbsttest-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}
@media (min-width: 640px) {
  .hmi-selbsttest-cards-cols-2 .hmi-selbsttest-cards-grid,
  .hmi-selbsttest-cards-cols-3 .hmi-selbsttest-cards-grid,
  .hmi-selbsttest-cards-cols-4 .hmi-selbsttest-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hmi-selbsttest-cards-cols-3 .hmi-selbsttest-cards-grid { grid-template-columns: repeat(3, 1fr); }
  .hmi-selbsttest-cards-cols-4 .hmi-selbsttest-cards-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Card ----------
   Aufteilung in AEUSSEREN Wrapper (<article>) und INNEREN (<div>):
   - .hmi-selbsttest-card        → aeusserer Container, overflow:visible,
                                     damit das Badge ueber den Card-Rand ragen
                                     kann, ohne geclippt zu werden.
   - .hmi-selbsttest-card-inner  → innerer Container, overflow:hidden +
                                     border-radius, clippt den Top-Akzent-
                                     Stripe an den abgerundeten Ecken.
*/
.hmi-selbsttest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* bewusst KEIN overflow:hidden — wuerde das ueberragende Badge killen. */
  /* transform auf der aeusseren Card, damit der Lift-Effekt das ueberragende
     Badge automatisch mitnimmt (wenn der Lift nur auf .card-inner laege,
     bliebe das Badge als Kind von .card stehen). */
  transition: transform 0.3s ease;
}
.hmi-selbsttest-card-inner {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;   /* Stripe folgt der Rundung */
  /* Padding-Top-Reserve ist UEBERALL gleich (egal ob Badge oder nicht),
     damit Icon/Titel/Link auf gleicher Hoehe stehen wie bei Cards mit Badge. */
  padding: 2.5rem 1.75rem 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.3s ease;
}
.hmi-selbsttest-cards-hover-lift .hmi-selbsttest-card:hover {
  transform: translateY(-8px);
}
.hmi-selbsttest-cards-hover-lift .hmi-selbsttest-card:hover .hmi-selbsttest-card-inner {
  box-shadow: 0 8px 30px rgba(0, 112, 120, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Top-Akzent-Stripe: sitzt im overflow:hidden-Inner, folgt daher automatisch
   der Card-Rundung (keine eigenen border-radius noetig). */
.hmi-selbsttest-card-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1;
}
.hmi-selbsttest-card-accent-teal   .hmi-selbsttest-card-accent-bar { background: linear-gradient(to right, var(--hmi-teal-400, #3abcc6), var(--hmi-teal-500, #007078), var(--hmi-teal-600, #005a60)); }
.hmi-selbsttest-card-accent-violet .hmi-selbsttest-card-accent-bar { background: linear-gradient(to right, #9585cc, var(--hmi-violet-500, #4C3E80), var(--hmi-violet-600, #3f3369)); }
.hmi-selbsttest-card-accent-navy   .hmi-selbsttest-card-accent-bar { background: linear-gradient(to right, #60a5fa, var(--hmi-navy-500, #0274be), var(--hmi-navy-600, #0260a0)); }

/* Per-Card-Badge: sitzt auf der AEUSSEREN Card (nicht im overflow:hidden-
   Context), damit es oben hinausragen kann. Durch translate(-50%, -50%)
   liegt die Badge-Mitte exakt auf der oberen Card-Kante (d.h. auf der
   Oberkante von .hmi-selbsttest-card-inner). */
.hmi-selbsttest-card-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.3125rem 0.75rem;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 3;  /* hoeher als Stripe (z:1 in inner), damit Badge vor Stripe sitzt */
}
.hmi-selbsttest-card-badge-solid-teal   { background: var(--hmi-teal-500, #007078);   color: #fff; }
.hmi-selbsttest-card-badge-solid-violet { background: var(--hmi-violet-500, #4C3E80); color: #fff; }
.hmi-selbsttest-card-badge-soft-teal    { background: #e6f0f1; color: var(--hmi-teal-500, #007078); }
.hmi-selbsttest-card-badge-soft-violet  { background: #edecf2; color: var(--hmi-violet-500, #4C3E80); }

/* Icon-Wrapper: gleicher Margin auf ALLEN Cards. Die Padding-Top-Reserve
   auf .hmi-selbsttest-card-inner ist fest; dadurch steht das Icon bei Cards
   mit UND ohne Badge exakt auf gleicher Hoehe. Titel, Subline, Meta und
   Link folgen im Flow. Kein Sprung beim Badge-Toggle. */
.hmi-selbsttest-card-icon-wrapper {
  margin-bottom: 1.25rem;
}

.hmi-selbsttest-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  line-height: 1.3;
  margin: 0 0 0.375rem;
}
.hmi-selbsttest-card-subline {
  font-size: 0.9375rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

.hmi-selbsttest-card-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--hmi-ink-light, #4a5568);
  opacity: 0.85;
  margin-bottom: 1rem;
}
.hmi-selbsttest-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.hmi-selbsttest-card-meta-icon {
  display: inline-flex;
  font-size: 0.75rem;
  color: inherit;
}
.hmi-selbsttest-card-meta-icon i,
.hmi-selbsttest-card-meta-icon svg {
  font-size: inherit;
  color: inherit !important;
  fill: currentColor !important;
  width: auto;
  height: auto;
}
.hmi-selbsttest-card-meta-dot {
  display: inline-block;
  color: inherit;
  opacity: 0.4;
  font-weight: 700;
}

.hmi-selbsttest-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hmi-selbsttest-card-link-teal    { color: var(--hmi-teal-500, #007078); }
.hmi-selbsttest-card-link-teal:hover { color: var(--hmi-teal-700, #004a4f); }
.hmi-selbsttest-card-link-violet  { color: var(--hmi-violet-500, #4C3E80); }
.hmi-selbsttest-card-link-violet:hover { color: var(--hmi-violet-600, #3f3369); }
.hmi-selbsttest-card-link-navy    { color: var(--hmi-navy-500, #0274be); }
.hmi-selbsttest-card-link-navy:hover { color: var(--hmi-navy-600, #0260a0); }
.hmi-selbsttest-card-link-neutral { color: var(--hmi-ink-light, #4a5568); }
.hmi-selbsttest-card-link-neutral:hover { color: var(--hmi-ink, #0f131f); }

/* ---------- Trust-Bar ---------- */
.hmi-selbsttest-cards-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  font-size: 0.75rem;
  color: var(--hmi-ink-light, #4a5568);
  opacity: 0.8;
}
.hmi-selbsttest-cards-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
/* Trust-Bar Icons: kleine Groesse (~11px) + gleiche Farbe wie Label-Text
   (color:inherit). Aggressiver Selektor gegen Impreza-/Material-Icons mit
   eigener inline-Farbe oder fester Groesse — erzwingt Konsistenz. */
.hmi-selbsttest-cards-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;    /* ~11px */
  line-height: 1;
  color: inherit;
  width: 0.75rem;
  height: 0.75rem;
}
.hmi-selbsttest-cards-trust-icon,
.hmi-selbsttest-cards-trust-icon::before,
.hmi-selbsttest-cards-trust-icon *,
.hmi-selbsttest-cards-trust-icon i,
.hmi-selbsttest-cards-trust-icon i::before,
.hmi-selbsttest-cards-trust-icon svg,
.hmi-selbsttest-cards-trust-icon svg *,
.hmi-selbsttest-cards-trust-icon svg path {
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  background: none !important;
}
.hmi-selbsttest-cards-trust-icon i,
.hmi-selbsttest-cards-trust-icon svg {
  font-size: 0.75rem !important;
  line-height: 1 !important;
  width: 0.75rem !important;
  height: 0.75rem !important;
}

/* ---------- Footer-Link ---------- */
.hmi-selbsttest-cards-footer {
  text-align: center;
  margin-top: 1.5rem;
}
.hmi-selbsttest-cards-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hmi-selbsttest-cards-footer-link-teal    { color: var(--hmi-teal-500, #007078); }
.hmi-selbsttest-cards-footer-link-teal:hover { color: var(--hmi-violet-500, #4C3E80); }
.hmi-selbsttest-cards-footer-link-violet  { color: var(--hmi-violet-500, #4C3E80); }
.hmi-selbsttest-cards-footer-link-violet:hover { color: var(--hmi-violet-600, #3f3369); }
.hmi-selbsttest-cards-footer-link-navy    { color: var(--hmi-navy-500, #0274be); }
.hmi-selbsttest-cards-footer-link-navy:hover { color: var(--hmi-navy-600, #0260a0); }
.hmi-selbsttest-cards-footer-link-neutral { color: var(--hmi-ink-light, #4a5568); }
.hmi-selbsttest-cards-footer-link-neutral:hover { color: var(--hmi-ink, #0f131f); }

/* ---------- Compact-Spacing (Section-weit) ----------
   Reduziert alle vertikalen Abstaende zwischen Card-Elementen (Icon, Titel,
   Subline, Meta, Link). Gut bei mehr Cards pro Reihe oder kurzen Sublines. */
.hmi-selbsttest-cards-spacing-compact .hmi-selbsttest-card-inner {
  padding: 2rem 1.5rem 1.5rem;  /* top bleibt Reserve fuer moegliches Badge */
}
.hmi-selbsttest-cards-spacing-compact .hmi-selbsttest-card-icon-wrapper {
  margin-bottom: 0.75rem;
}
.hmi-selbsttest-cards-spacing-compact .hmi-selbsttest-card-title {
  margin-bottom: 0.25rem;
}
.hmi-selbsttest-cards-spacing-compact .hmi-selbsttest-card-subline {
  margin-bottom: 0.5rem;
}
.hmi-selbsttest-cards-spacing-compact .hmi-selbsttest-card-meta {
  margin-bottom: 0.625rem;
}
.hmi-selbsttest-cards-spacing-compact.hmi-selbsttest-cards-hover-lift .hmi-selbsttest-card:hover {
  transform: translateY(-6px); /* etwas weniger Lift zur kompakteren Anmutung */
}

@media (prefers-reduced-motion: reduce) {
  .hmi-selbsttest-card,
  .hmi-selbsttest-card-inner,
  .hmi-selbsttest-cards-arrow,
  .hmi-selbsttest-cards-header-link,
  .hmi-selbsttest-card-link,
  .hmi-selbsttest-cards-footer-link { transition: none; }
  .hmi-selbsttest-cards-hover-lift .hmi-selbsttest-card:hover { transform: none; }
}

/* ============================================================================
   Section-Intro Atom (hmi_section_intro)
   ============================================================================
   Trio aus Badge/Eyebrow + Headline + Lead-Text. Zentriert per Default;
   Alignment wirkt auf alle drei Kinder (via text-align-Kaskade + margin:auto
   fuer den Lead). Abstaende sind hier zentral definiert, damit Aenderungen
   an einer Stelle wirken.
   ============================================================================ */
.hmi-section-intro {
  display: block;
}
.hmi-section-intro-align-left   { text-align: left; }
.hmi-section-intro-align-center { text-align: center; }
.hmi-section-intro-align-right  { text-align: right; }

/* Badge im Section-Intro: kleiner Abstand zum Headline-Block (0.75rem).
   Bei Eyebrow ist der Abstand ueber den Heading-Block-Eyebrow-Selector
   separat geregelt (margin-bottom: 0 + padding-top auf Headline). */
.hmi-section-intro > .hmi-badge + .hmi-heading-block {
  margin-top: 0.75rem;
}

/* Lead-Text: Abstand zur Headline + optische Eigenschaften. */
.hmi-section-intro-lead {
  margin-top: 0.75rem;
  margin-bottom: 0;
  color: var(--hmi-ink-light, #4a5568);
  line-height: 1.65;
}
.hmi-section-intro-lead-size-sm { font-size: 0.875rem; }
.hmi-section-intro-lead-size-md { font-size: 1rem; }
.hmi-section-intro-lead-size-lg { font-size: 1.125rem; }

/* Max-Breite des Lead-Absatzes — bei center-Alignment wird er horizontal
   zentriert (margin-inline: auto). Bei left/right klebt er an der Kante. */
.hmi-section-intro-lead-width-narrow { max-width: 28rem; }
.hmi-section-intro-lead-width-normal { max-width: 36rem; }
.hmi-section-intro-lead-width-wide   { max-width: 48rem; }
.hmi-section-intro-lead-width-full   { max-width: none; }

.hmi-section-intro-align-center .hmi-section-intro-lead {
  margin-inline: auto;
}
.hmi-section-intro-align-right .hmi-section-intro-lead {
  margin-inline-start: auto;
}

/* Strong + Links im Lead */
.hmi-section-intro-lead strong { color: var(--hmi-ink, #002528); }
.hmi-section-intro-lead a {
  color: var(--hmi-teal-500, #007078);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================================
   Section-Outro Atom (hmi_section_outro)
   ============================================================================
   Gegenstueck zu section_intro: Separator + optional Headline + Flisstext +
   1-2 CTAs + optional Footer-Link. Alignment wirkt auf ALLE Kinder (Text,
   Separator, Buttons).
   ============================================================================ */
.hmi-section-outro {
  display: block;
}
.hmi-section-outro-align-left   { text-align: left; }
.hmi-section-outro-align-center { text-align: center; }
.hmi-section-outro-align-right  { text-align: right; }

/* --- Separator oben ---------------------------------------------------------
   Dezenter Trenner zwischen Hauptinhalt der Section und dem Outro-Block.
   line = schmale teal-20 Linie; accent = kurzer dicker teal-stripe. */
.hmi-section-outro-separator-line {
  width: 100%;
  max-width: 120px;
  height: 1px;
  background: rgba(0, 112, 120, 0.2);
  margin: 0 0 1.5rem;
  border: 0;
}
.hmi-section-outro-separator-accent {
  width: 48px;
  height: 3px;
  background: var(--hmi-teal-500, #007078);
  border-radius: 2px;
  margin: 0 0 1.5rem;
}
.hmi-section-outro-align-center .hmi-section-outro-separator-line,
.hmi-section-outro-align-center .hmi-section-outro-separator-accent {
  margin-inline: auto;
}
.hmi-section-outro-align-right .hmi-section-outro-separator-line,
.hmi-section-outro-align-right .hmi-section-outro-separator-accent {
  margin-inline-start: auto;
}

/* --- Fliesstext ------------------------------------------------------------- */
.hmi-section-outro-body {
  color: var(--hmi-ink-light, #4a5568);
  line-height: 1.7;
  margin-top: 0.75rem; /* Abstand unter Headline, wenn eine vorhanden ist */
}
.hmi-section-outro-body > :first-child { margin-top: 0; }
.hmi-section-outro-body > :last-child  { margin-bottom: 0; }

.hmi-section-outro-body-width-narrow { max-width: 28rem; }
.hmi-section-outro-body-width-normal { max-width: 36rem; }
.hmi-section-outro-body-width-wide   { max-width: 48rem; }
.hmi-section-outro-body-width-full   { max-width: none; }

.hmi-section-outro-align-center .hmi-section-outro-body {
  margin-inline: auto;
}
.hmi-section-outro-align-right .hmi-section-outro-body {
  margin-inline-start: auto;
}

.hmi-section-outro-body strong { color: var(--hmi-ink, #002528); }
.hmi-section-outro-body a {
  color: var(--hmi-teal-500, #007078);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hmi-section-outro-body a:hover,
.hmi-section-outro-body a:focus {
  color: var(--hmi-violet-500, #7c3aed);
}

/* --- CTA-Row ----------------------------------------------------------------
   flex-wrap: wrap sorgt dafuer, dass Buttons auf Mobile untereinander
   umbrechen. gap ersetzt manuelle margins zwischen den Buttons. */
.hmi-section-outro-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  justify-content: flex-start;
}
.hmi-section-outro-align-center .hmi-section-outro-ctas { justify-content: center; }
.hmi-section-outro-align-right  .hmi-section-outro-ctas { justify-content: flex-end; }

/* --- Footer-Link ------------------------------------------------------------
   Kleine Zeile unter den Buttons fuer Sekundaer-Kontakt (z.B.
   "Oder ruf uns direkt an: 0123 456 789"). */
.hmi-section-outro-footer-link {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-section-outro-footer-link a {
  color: var(--hmi-teal-500, #007078);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.hmi-section-outro-footer-link a:hover,
.hmi-section-outro-footer-link a:focus {
  color: var(--hmi-violet-500, #7c3aed);
}

/* ============================================================================
   Profile Cards (hmi_profile_cards)
   ============================================================================
   Grid aus Profil-Karten: Cover-Bild mit optionalen Overlay-Badges (glass),
   Name (H3) + Role-Line (teal-600) + Beschreibung. Für Coach-Übersichten,
   Team-Seiten, Dozenten-/Experten-Listen.
   ============================================================================ */
.hmi-profile-cards {
  display: block;
}
.hmi-profile-cards-inner {
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.hmi-profile-cards-width-narrow .hmi-profile-cards-inner { max-width: 720px; }
.hmi-profile-cards-width-medium .hmi-profile-cards-inner { max-width: 896px; }
.hmi-profile-cards-width-wide   .hmi-profile-cards-inner { max-width: 1152px; }
.hmi-profile-cards-width-xwide  .hmi-profile-cards-inner { max-width: 1280px; }
.hmi-profile-cards-width-full   .hmi-profile-cards-inner { max-width: none; }

/* --- Section-Header --------------------------------------------------------- */
.hmi-profile-cards-header {
  margin-bottom: 3rem;
}
.hmi-profile-cards-header-align-left   { text-align: left; }
.hmi-profile-cards-header-align-center { text-align: center; }
.hmi-profile-cards-header-align-right  { text-align: right; }

.hmi-profile-cards-intro {
  margin: 0.75rem 0 0;
  max-width: 640px;
  color: var(--hmi-ink-light, #4a5568);
  line-height: 1.65;
}
.hmi-profile-cards-header-align-center .hmi-profile-cards-intro {
  margin-inline: auto;
}
.hmi-profile-cards-header-align-right .hmi-profile-cards-intro {
  margin-inline-start: auto;
}
.hmi-profile-cards-intro a {
  color: var(--hmi-teal-500, #007078);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Grid ------------------------------------------------------------------- */
.hmi-profile-cards-grid {
  display: grid;
  gap: 2rem;
}
.hmi-profile-cards-cols-1 { grid-template-columns: 1fr; }
.hmi-profile-cards-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hmi-profile-cards-cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .hmi-profile-cards-cols-2,
  .hmi-profile-cards-cols-3 { grid-template-columns: 1fr; }
}

/* --- Einzelne Karte --------------------------------------------------------- */
.hmi-profile-card {
  display: flex;
  flex-direction: column;
  background: var(--hmi-white, #fff);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow:
    rgba(76, 62, 128, 0.06) 0px 1px 3px,
    rgba(76, 62, 128, 0.10) 0px 8px 24px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* --- Hover-Varianten ------------------------------------------------------- */
/* Lift (Standard): sanftes Anheben + staerkerer Schatten. */
.hmi-profile-card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow:
    rgba(76, 62, 128, 0.08) 0px 2px 6px,
    rgba(76, 62, 128, 0.16) 0px 16px 40px;
}
/* Glow Teal: farbiger Schatten in HMi-Teal (passt zu Brand-Akzent). */
.hmi-profile-card-hover-glow-teal:hover {
  transform: translateY(-2px);
  box-shadow:
    rgba(0, 112, 120, 0.10) 0px 2px 6px,
    rgba(0, 112, 120, 0.22) 0px 16px 40px;
}
/* Glow Violet: passt zu Violet-Badges und Premium-Signalen. */
.hmi-profile-card-hover-glow-violet:hover {
  transform: translateY(-2px);
  box-shadow:
    rgba(124, 58, 237, 0.10) 0px 2px 6px,
    rgba(124, 58, 237, 0.22) 0px 16px 40px;
}
/* Shadow-Only: keine Bewegung, nur tiefere Schatten. */
.hmi-profile-card-hover-shadow:hover {
  box-shadow:
    rgba(76, 62, 128, 0.10) 0px 4px 10px,
    rgba(76, 62, 128, 0.18) 0px 20px 48px;
}
/* None: explizit kein Hover — Transform zurueckdraengen, Shadow bleibt auf
   Base-Level (keine Vertiefung). Zusaetzlich auf die Kombi-Klasse setzen,
   damit eine versehentlich spaeter definierte .hmi-profile-card:hover-Regel
   nicht gewinnt (Specificity 0,2,1 statt 0,1,1). */
.hmi-profile-card.hmi-profile-card-hover-none:hover {
  transform: none;
  box-shadow:
    rgba(76, 62, 128, 0.06) 0px 1px 3px,
    rgba(76, 62, 128, 0.10) 0px 8px 24px;
}

/* --- Cover-Bild + Overlay-Badges ------------------------------------------- */
.hmi-profile-card-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f5efe8 0%, #ebe3d6 100%); /* Sand-100/200 Fallback */
}
/* Aspect-Ratios */
.hmi-profile-card-media-ratio-4-3  { aspect-ratio: 4 / 3; }
.hmi-profile-card-media-ratio-1-1  { aspect-ratio: 1 / 1; }
.hmi-profile-card-media-ratio-3-4  { aspect-ratio: 3 / 4; }
.hmi-profile-card-media-ratio-16-9 { aspect-ratio: 16 / 9; }

.hmi-profile-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hmi-profile-card-media-pos-top    .hmi-profile-card-image { object-position: center top; }
.hmi-profile-card-media-pos-center .hmi-profile-card-image { object-position: center center; }
.hmi-profile-card-media-pos-bottom .hmi-profile-card-image { object-position: center bottom; }

.hmi-profile-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.75rem;
  color: rgba(0, 37, 40, 0.4);
}

/* Overlay-Badges unten links, Glass-Effekt (white/90 + backdrop-blur). */
.hmi-profile-card-badges {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  z-index: 1;
}
.hmi-profile-card-badge {
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem; /* 10px */
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}
.hmi-profile-card-badge-teal   { color: var(--hmi-teal-600, #005a62); }
.hmi-profile-card-badge-violet { color: var(--hmi-violet-500, #7c3aed); }
.hmi-profile-card-badge-ink    { color: var(--hmi-ink, #002528); }

/* --- Content-Block ---------------------------------------------------------- */
.hmi-profile-card-body {
  padding: 1.5rem;
}
.hmi-profile-card-content-align-left   .hmi-profile-card-body { text-align: left; }
.hmi-profile-card-content-align-center .hmi-profile-card-body { text-align: center; }
.hmi-profile-card-content-align-right  .hmi-profile-card-body { text-align: right; }

.hmi-profile-card-name {
  margin: 0 0 0.25rem;
  padding: 0;
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  line-height: 1.3;
  color: var(--hmi-ink, #002528);
}
.hmi-profile-card-role {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hmi-teal-600, #005a62);
  line-height: 1.5;
}
.hmi-profile-card-description {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-profile-card-description strong { color: var(--hmi-ink, #002528); }
.hmi-profile-card-description a {
  color: var(--hmi-teal-500, #007078);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Social-Media-Icons ---------------------------------------------------- */
/* Zurueckhaltendes, markenkonformes Design: monochrom, kein Skalieren,
   kein Spring-Bounce, keine Plattformfarben. Im Default leichter Rand +
   dunkles Icon; im Hover volle Teal-Fuellung mit weissem Icon. Das Inline-SVG
   nutzt fill/stroke="currentColor" und erbt die Farbe ueber CSS vom <a> —
   damit greifen Theme-Overrides nicht. */
.hmi-profile-card-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.hmi-profile-card-socials-body-bottom {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 37, 40, 0.08);
}
.hmi-profile-card-content-align-center .hmi-profile-card-socials-body-bottom { justify-content: center; }
.hmi-profile-card-content-align-right  .hmi-profile-card-socials-body-bottom { justify-content: flex-end; }

/* Gemeinsame Basis fuer beide Varianten — KEIN Border hier, damit die
   Overlay-Pille nicht doppelt gerahmt wird. Der Border wird separat nur
   bei der Body-Variante gesetzt. */
.hmi-profile-cards a.hmi-profile-card-social,
.hmi-profile-cards a.hmi-profile-card-social:link,
.hmi-profile-cards a.hmi-profile-card-social:visited {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 9999px !important;
  background: transparent !important;
  line-height: 1;
  text-decoration: none !important;
  border: 0 !important;
}
.hmi-profile-cards a.hmi-profile-card-social svg {
  width: 0.9375rem; /* 15px */
  height: 0.9375rem;
  display: block;
  color: inherit;
}

/* --- Body-Variante (unterhalb Beschreibung): Border als Hover-Signal ---- */
.hmi-profile-cards .hmi-profile-card-socials-body-bottom a.hmi-profile-card-social,
.hmi-profile-cards .hmi-profile-card-socials-body-bottom a.hmi-profile-card-social:link,
.hmi-profile-cards .hmi-profile-card-socials-body-bottom a.hmi-profile-card-social:visited {
  width: 2.25rem;   /* 36px - komfortabler mobile Tap-Target */
  height: 2.25rem;
  border: 1px solid rgba(0, 37, 40, 0.18) !important;
  color: var(--hmi-ink-light, #4a5568) !important;
  transition: border-color 0.25s ease, color 0.25s ease !important;
}
.hmi-profile-cards .hmi-profile-card-socials-body-bottom a.hmi-profile-card-social:hover,
.hmi-profile-cards .hmi-profile-card-socials-body-bottom a.hmi-profile-card-social:focus-visible {
  border-color: var(--hmi-teal-500, #007078) !important;
  color: var(--hmi-teal-500, #007078) !important;
}
.hmi-profile-cards .hmi-profile-card-socials-body-bottom a.hmi-profile-card-social:focus-visible {
  outline: 2px solid var(--hmi-teal-500, #007078);
  outline-offset: 2px;
}
/* SVG-Innenelemente zurueck auf currentColor zwingen, falls das Theme fill
   oder stroke direkt auf Paths setzt. */
.hmi-profile-cards .hmi-profile-card-socials-body-bottom a.hmi-profile-card-social:hover svg[fill="currentColor"],
.hmi-profile-cards .hmi-profile-card-socials-body-bottom a.hmi-profile-card-social:focus-visible svg[fill="currentColor"] {
  fill: currentColor !important;
}
.hmi-profile-cards .hmi-profile-card-socials-body-bottom a.hmi-profile-card-social:hover svg[stroke="currentColor"],
.hmi-profile-cards .hmi-profile-card-socials-body-bottom a.hmi-profile-card-social:focus-visible svg[stroke="currentColor"] {
  stroke: currentColor !important;
}

/* Oben rechts auf dem Bild: weisse Glass-Pille als Rahmen. Da hier kein
   fester Rand existiert, uebernimmt im Hover ein inset-Schatten die Rolle
   des Teal-Akzents. */
.hmi-profile-card-socials-image-top-right {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  flex-direction: column;
  gap: 0.25rem;
  z-index: 2;
  padding: 0.375rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 37, 40, 0.10);
}
/* --- Overlay-Variante (oben rechts auf dem Bild): innerhalb der
   weissen Glass-Pille — kein Border, stattdessen inset-Ring beim Hover. */
.hmi-profile-cards .hmi-profile-card-socials-image-top-right a.hmi-profile-card-social,
.hmi-profile-cards .hmi-profile-card-socials-image-top-right a.hmi-profile-card-social:link,
.hmi-profile-cards .hmi-profile-card-socials-image-top-right a.hmi-profile-card-social:visited {
  width: 1.875rem; /* 30px */
  height: 1.875rem;
  color: var(--hmi-ink, #002528) !important;
  box-shadow: inset 0 0 0 0 transparent;
  transition: box-shadow 0.25s ease, color 0.25s ease !important;
}
.hmi-profile-cards .hmi-profile-card-socials-image-top-right a.hmi-profile-card-social:hover,
.hmi-profile-cards .hmi-profile-card-socials-image-top-right a.hmi-profile-card-social:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--hmi-teal-500, #007078);
  color: var(--hmi-teal-500, #007078) !important;
}

/* Mobile: Icons oben rechts horizontal stapeln und dezent kleiner. */
@media (max-width: 560px) {
  .hmi-profile-card-socials-image-top-right {
    flex-direction: row;
    top: 0.5rem;
    right: 0.5rem;
  }
  .hmi-profile-card-socials-image-top-right .hmi-profile-card-social {
    width: 1.75rem;
    height: 1.75rem;
  }
}

/* =========================================================================
   HMi Stats Showcase
   2-Spalten-Komponente: Textspalte (Badge/Headline/Text/Bullets/CTAs) links
   + Stat-Cards-Grid rechts mit optionaler Full-Width-Highlight-Card.
   ========================================================================= */
.hmi-stats-showcase { position: relative; }
.hmi-stats-showcase-bg-sand-50     { background-color: var(--hmi-sand-50, #FDFCFA); }
.hmi-stats-showcase-bg-cool-50     { background-color: var(--hmi-cool-50, #F5F5F8); }
.hmi-stats-showcase-bg-white       { background-color: #ffffff; }
.hmi-stats-showcase-bg-transparent { background-color: transparent; }

.hmi-stats-showcase-inner {
  margin: 0 auto;
  padding-inline: 1rem;
}
.hmi-stats-showcase-width-normal { max-width: 80rem; }
.hmi-stats-showcase-width-wide   { max-width: 90rem; }

/* 2-Spalten-Grid (Text links, Stats rechts).
   Schwelle auf 768px (Tablet) gesenkt — vorher 1024px, was dazu fuehrte, dass
   auf normalen Desktop-Viewports innerhalb schmaler Container die Komponente
   1-spaltig blieb. 768px ist konsistent mit den anderen HM-i-Komponenten. */
.hmi-stats-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  /* Hinweis: Modifier-Klassen sitzen direkt auf dem Grid-Element (selber Knoten,
     kein Eltern-Container). Daher Selektor ohne Leerzeichen — sonst greift die
     Regel nicht. */
  .hmi-stats-showcase-grid.hmi-stats-showcase-gap-sm { gap: 2rem; }
  .hmi-stats-showcase-grid.hmi-stats-showcase-gap-md { gap: 3rem; }
  .hmi-stats-showcase-grid.hmi-stats-showcase-gap-lg { gap: 3.5rem; }

  .hmi-stats-showcase-grid.hmi-stats-showcase-ratio-50-50 { grid-template-columns: 1fr 1fr; }
  .hmi-stats-showcase-grid.hmi-stats-showcase-ratio-60-40 { grid-template-columns: 1.5fr 1fr; }
  .hmi-stats-showcase-grid.hmi-stats-showcase-ratio-40-60 { grid-template-columns: 1fr 1.5fr; }

  .hmi-stats-showcase-grid.hmi-stats-showcase-valign-top    { align-items: start; }
  .hmi-stats-showcase-grid.hmi-stats-showcase-valign-center { align-items: center; }
  .hmi-stats-showcase-grid.hmi-stats-showcase-valign-bottom { align-items: end; }
}

/* Mobile: Reihenfolge umschaltbar */
@media (max-width: 767px) {
  .hmi-stats-showcase-mobile-stats-first .hmi-stats-showcase-text  { order: 2; }
  .hmi-stats-showcase-mobile-stats-first .hmi-stats-showcase-stats { order: 1; }
}

/* Textspalte */
.hmi-stats-showcase-text > * + * { margin-top: 1rem; }
.hmi-stats-showcase-text .hmi-badge,
.hmi-stats-showcase-text .hmi-eyebrow-atom {
  display: inline-flex;
  margin-bottom: 0.5rem;
}
.hmi-stats-showcase-body {
  color: var(--hmi-ink-light, #4a5568);
  line-height: 1.7;
}
.hmi-stats-showcase-body p { margin: 0; }
.hmi-stats-showcase-body p + p { margin-top: 0.75rem; }

/* Bullets */
.hmi-stats-showcase-bullets {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.hmi-stats-showcase-bullet {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hmi-ink, #002528);
}
.hmi-stats-showcase-bullet i {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  font-size: 1.125rem;
}
.hmi-stats-showcase-bullets-color-teal   .hmi-stats-showcase-bullet i { color: var(--hmi-teal-500, #007078); }
.hmi-stats-showcase-bullets-color-violet .hmi-stats-showcase-bullet i { color: var(--hmi-violet-500, #4C3E80); }
.hmi-stats-showcase-bullets-color-ink    .hmi-stats-showcase-bullet i { color: var(--hmi-ink, #002528); }

/* CTA-Row */
.hmi-stats-showcase-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Stat-Cards-Grid (rechts) */
.hmi-stats-showcase-stats-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  /* Modifier-Klasse direkt am Grid (selber Knoten, kein Eltern-Container). */
  .hmi-stats-showcase-stats-grid.hmi-stats-showcase-stats-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .hmi-stats-showcase-stats-grid.hmi-stats-showcase-stats-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Einzelne Stat-Card */
.hmi-stats-showcase-stat-card {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(0,112,120,0.07) 0%, rgba(255,255,255,0.95) 45%, rgba(76,62,128,0.05) 100%);
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.hmi-stats-showcase-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,112,120,0.12), 0 2px 8px rgba(0,0,0,0.04);
}
.hmi-stats-showcase-stat-dots::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  background-image: radial-gradient(circle, rgba(0,112,120,0.12) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
          mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.hmi-stats-showcase-stat-value {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 0.25rem;
  position: relative;
}
@media (min-width: 768px) {
  .hmi-stats-showcase-stat-value { font-size: 2.5rem; }
}
.hmi-stats-showcase-stat-color-teal   .hmi-stats-showcase-stat-value { color: var(--hmi-teal-500, #007078); }
.hmi-stats-showcase-stat-color-violet .hmi-stats-showcase-stat-value { color: var(--hmi-violet-500, #4C3E80); }
.hmi-stats-showcase-stat-color-ink    .hmi-stats-showcase-stat-value { color: var(--hmi-ink, #002528); }

.hmi-stats-showcase-stat-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hmi-ink, #002528);
  margin: 0;
  position: relative;
}
.hmi-stats-showcase-stat-sublabel {
  font-size: 0.75rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0.25rem 0 0;
  position: relative;
}

/* Highlight-Card (Full-Width unter Stat-Grid) */
.hmi-stats-showcase-highlight {
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 20px rgba(0,0,0,0.05);
}
.hmi-stats-showcase-highlight-grad-violet-teal {
  background: linear-gradient(135deg, rgba(76,62,128,0.06) 0%, rgba(255,255,255,0.95) 45%, rgba(0,112,120,0.06) 100%);
}
.hmi-stats-showcase-highlight-grad-teal-violet {
  background: linear-gradient(135deg, rgba(0,112,120,0.06) 0%, rgba(255,255,255,0.95) 45%, rgba(76,62,128,0.06) 100%);
}
.hmi-stats-showcase-highlight-grad-teal-soft {
  background: linear-gradient(135deg, rgba(0,112,120,0.12) 0%, rgba(255,255,255,0.95) 100%);
}
.hmi-stats-showcase-highlight-grad-violet-soft {
  background: linear-gradient(135deg, rgba(76,62,128,0.12) 0%, rgba(255,255,255,0.95) 100%);
}
.hmi-stats-showcase-highlight-dots-violet::before,
.hmi-stats-showcase-highlight-dots-teal::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
          mask-image: radial-gradient(ellipse at top right, black 20%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.hmi-stats-showcase-highlight-dots-violet::before {
  background-image: radial-gradient(circle, rgba(76,62,128,0.12) 1px, transparent 1px);
}
.hmi-stats-showcase-highlight-dots-teal::before {
  background-image: radial-gradient(circle, rgba(0,112,120,0.12) 1px, transparent 1px);
}
.hmi-stats-showcase-highlight-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--hmi-teal-600, #005a60);
  margin: 0 0 0.25rem;
  position: relative;
}
.hmi-stats-showcase-highlight-text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
  position: relative;
}
.hmi-stats-showcase-highlight-text strong { color: var(--hmi-ink, #002528); }
.hmi-stats-showcase-highlight-text a {
  color: var(--hmi-teal-500, #007078);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===========================================================================
   HMi Blog Post — Single-Post-Layout (hmi_blog_post)
   ===========================================================================
   Hero (Eyebrow-Pill, Titel, Meta), Content-Wrapper mit Typografie,
   Author-Box, Related-Posts-Grid, Inline-CTA-Block.
   --------------------------------------------------------------------------- */

.hmi-blog-post {
  position: relative;
  margin: 0 auto;
}
.hmi-blog-post-width-narrow .hmi-blog-post-hero-inner,
.hmi-blog-post-width-narrow .hmi-blog-post-content,
.hmi-blog-post-width-narrow .hmi-blog-post-author-box,
.hmi-blog-post-width-narrow .hmi-blog-post-related,
.hmi-blog-post-width-narrow .hmi-blog-post-cta {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.hmi-blog-post-width-medium .hmi-blog-post-hero-inner,
.hmi-blog-post-width-medium .hmi-blog-post-content,
.hmi-blog-post-width-medium .hmi-blog-post-author-box,
.hmi-blog-post-width-medium .hmi-blog-post-related,
.hmi-blog-post-width-medium .hmi-blog-post-cta {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.hmi-blog-post-width-wide .hmi-blog-post-hero-inner,
.hmi-blog-post-width-wide .hmi-blog-post-content,
.hmi-blog-post-width-wide .hmi-blog-post-author-box,
.hmi-blog-post-width-wide .hmi-blog-post-related,
.hmi-blog-post-width-wide .hmi-blog-post-cta {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Hero -------------------------------------------------------------- */
.hmi-blog-post-hero {
  position: relative;
  padding: 3rem 1.5rem 2rem;
}
.hmi-blog-post-hero-inner {
  position: relative;
  z-index: 2;
}
.hmi-blog-post-eyebrow-pill {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.hmi-blog-post-cat-teal {
  background: rgba(20, 184, 166, 0.12);
  color: var(--hmi-teal-600, #00585f);
}
.hmi-blog-post-cat-violet {
  background: rgba(124, 58, 237, 0.12);
  color: var(--hmi-violet-600, #6d28d9);
}
.hmi-blog-post-title {
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--hmi-ink, #002528);
}
.hmi-blog-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 1.5rem;
}
.hmi-blog-post-date,
.hmi-blog-post-read-time {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.hmi-blog-post-date i,
.hmi-blog-post-read-time i {
  font-size: 0.8125rem;
  opacity: 0.7;
}
.hmi-blog-post-author {
  font-weight: 500;
  color: var(--hmi-ink, #002528);
}
.hmi-blog-post-meta-separator {
  color: rgba(0, 37, 40, 0.25);
}
.hmi-blog-post-featured-image-wrap {
  margin: 2rem 0 0;
}
.hmi-blog-post-featured-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--hmi-radius-card, 16px);
}

/* --- Image-Background-Variant ------------------------------------------ */
.hmi-blog-post-layout-image-bg .hmi-blog-post-hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 6rem 1.5rem 4rem;
  border-radius: var(--hmi-radius-card, 16px);
  overflow: hidden;
}
.hmi-blog-post-layout-image-bg .hmi-blog-post-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 37, 40, 0.55) 0%, rgba(0, 37, 40, 0.85) 100%);
  z-index: 1;
}
.hmi-blog-post-layout-image-bg .hmi-blog-post-title,
.hmi-blog-post-layout-image-bg .hmi-blog-post-meta,
.hmi-blog-post-layout-image-bg .hmi-blog-post-author {
  color: #fff;
}
.hmi-blog-post-layout-image-bg .hmi-blog-post-meta {
  color: rgba(255, 255, 255, 0.85);
}
.hmi-blog-post-layout-image-bg .hmi-blog-post-meta-separator {
  color: rgba(255, 255, 255, 0.4);
}

/* --- Content-Wrapper / the_content() Typografie ------------------------ */
.hmi-blog-post-content {
  padding: 2.5rem 1.5rem 1rem;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--hmi-ink, #002528);
}
.hmi-blog-post-content > * {
  max-width: 100%;
}
.hmi-blog-post-content h2 {
  font-size: 1.625rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
  color: var(--hmi-ink, #002528);
}
.hmi-blog-post-content h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
  color: var(--hmi-ink, #002528);
}
.hmi-blog-post-content h4 {
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 1.75rem 0 0.5rem;
}
.hmi-blog-post-content p {
  margin: 0 0 1.25rem;
}
.hmi-blog-post-content ul,
.hmi-blog-post-content ol {
  margin: 0 0 1.5rem 1.5rem;
  padding: 0;
}
.hmi-blog-post-content li {
  margin: 0 0 0.5rem;
}
.hmi-blog-post-content blockquote {
  border-left: 4px solid var(--hmi-teal-500, #007078);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-blog-post-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--hmi-radius-card, 16px);
  margin: 1.5rem 0;
}
.hmi-blog-post-content figure {
  margin: 2rem 0;
}
.hmi-blog-post-content figcaption {
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
  margin-top: 0.5rem;
  text-align: center;
}
.hmi-blog-post-content a {
  color: var(--hmi-teal-600, #00585f);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hmi-blog-post-content a:hover,
.hmi-blog-post-content a:focus-visible {
  color: var(--hmi-teal-500, #007078);
}
.hmi-blog-post-content code {
  background: rgba(0, 37, 40, 0.06);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.9375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.hmi-blog-post-content pre {
  background: var(--hmi-ink, #002528);
  color: #fff;
  padding: 1.25rem;
  border-radius: var(--hmi-radius-card, 16px);
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.hmi-blog-post-content pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}
.hmi-blog-post-content hr {
  border: none;
  border-top: 1px solid rgba(0, 37, 40, 0.08);
  margin: 2.5rem 0;
}
.hmi-blog-post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}
.hmi-blog-post-content th,
.hmi-blog-post-content td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(0, 37, 40, 0.08);
}
.hmi-blog-post-content th {
  background: rgba(0, 37, 40, 0.03);
  font-weight: 600;
}

/* Dropcap (optional) */
.hmi-blog-post-dropcap-on .hmi-blog-post-content > p:first-of-type::first-letter {
  font-size: 3.5rem;
  line-height: 1;
  float: left;
  margin: 0.25rem 0.5rem 0 0;
  color: var(--hmi-teal-500, #007078);
  font-weight: 700;
}

/* --- Author-Box -------------------------------------------------------- */
.hmi-blog-post-author-box {
  margin: 4rem auto 0;
  padding: 2rem;
  background: rgba(0, 37, 40, 0.03);
  border-radius: var(--hmi-radius-card, 16px);
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}
.hmi-blog-post-author-avatar {
  flex: 0 0 auto;
  border-radius: 9999px;
  overflow: hidden;
  background: rgba(0, 37, 40, 0.08);
}
.hmi-blog-post-author-avatar img,
.hmi-blog-post-author-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}
.hmi-blog-post-author-meta {
  flex: 1;
  min-width: 0;
}
.hmi-blog-post-author-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 0.25rem;
  font-weight: 600;
}
.hmi-blog-post-author-name {
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
  color: var(--hmi-ink, #002528);
}
.hmi-blog-post-author-bio {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-blog-post-author-socials {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.hmi-blog-post-author-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 37, 40, 0.15);
  color: var(--hmi-ink-light, #4a5568);
  font-size: 0.9375rem;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  text-decoration: none;
}
.hmi-blog-post-author-social:hover,
.hmi-blog-post-author-social:focus-visible {
  border-color: var(--hmi-teal-500, #007078);
  color: var(--hmi-teal-500, #007078);
  background: rgba(20, 184, 166, 0.06);
}
.hmi-blog-post-author-social-linkedin:hover { border-color: #0a66c2; color: #0a66c2; }
.hmi-blog-post-author-social-xing:hover { border-color: #006567; color: #006567; }

@media (max-width: 640px) {
  .hmi-blog-post-author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hmi-blog-post-author-socials {
    justify-content: center;
  }
}

/* --- Related-Posts (Card-Pattern aus hmi_related_teasers + Bild) ------- */
/* Section-Wrapper bricht aus der Content-Width-Beschraenkung aus (kann
   breiter sein) und unterstuetzt Overlap in die Folge-Section analog zu
   hmi_related_teasers. */

.hmi-blog-post-related {
  position: relative;
  margin-top: 4rem;
  padding: 3.5rem 1.5rem;
  border-radius: var(--hmi-radius-card, 16px);
}
.hmi-blog-post-width-narrow .hmi-blog-post-related,
.hmi-blog-post-width-medium .hmi-blog-post-related,
.hmi-blog-post-width-wide   .hmi-blog-post-related {
  /* Die Width-Modifier des Outer-Containers werden hier ueberschrieben,
     damit die Related-Section breiter sein darf als der Content. */
  max-width: none;
}
.hmi-blog-post-related-width-inherit { /* erbt von outer Width-Modifier */ }
.hmi-blog-post-related-width-medium  { max-width: 1152px; margin-left: auto; margin-right: auto; }
.hmi-blog-post-related-width-wide    { max-width: 1280px; margin-left: auto; margin-right: auto; }
.hmi-blog-post-related-width-full    { max-width: none; }

.hmi-blog-post-related-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.hmi-blog-post-related-width-full .hmi-blog-post-related-inner {
  max-width: 1440px;
}

.hmi-blog-post-related-label {
  font-size: 1.625rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 2rem;
  text-align: center;
  color: var(--hmi-ink, #002528);
}

.hmi-blog-post-related-grid {
  display: grid;
  gap: 1.5rem;
}
.hmi-blog-post-related-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hmi-blog-post-related-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hmi-blog-post-related-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .hmi-blog-post-related-cols-3,
  .hmi-blog-post-related-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hmi-blog-post-related-grid { grid-template-columns: 1fr !important; }
}

/* Bild-Wrap oben in der Card. Kein eigener border-radius noetig — die
   Card hat overflow:hidden + border-radius, das schneidet das Bild oben
   automatisch ab. */
.hmi-blog-post-related-image-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(0, 37, 40, 0.04);
  overflow: hidden;
}

/* Top-Stripe absolut an die Card-Oberkante setzen — sitzt damit ueber
   dem Bild (nicht zwischen Bild und Body). Card hat bereits
   position:relative + overflow:hidden + border-radius (aus
   .hmi-related-teasers-card), Stripe wird sauber abgeschnitten. */
.hmi-blog-post-related-card-link > .hmi-related-teasers-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}
.hmi-blog-post-related-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.hmi-blog-post-related-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: rgba(0, 37, 40, 0.4);
}
.hmi-blog-post-related-card-link:hover .hmi-blog-post-related-image,
.hmi-blog-post-related-card-link:focus-visible .hmi-blog-post-related-image {
  transform: scale(1.04);
}

/* Card-Wrapper als <a> (volle Klickbarkeit) — ergaenzt das related_teasers-Card-CSS */
.hmi-blog-post-related-card-link {
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}
.hmi-blog-post-related-card-link:hover,
.hmi-blog-post-related-card-link:focus-visible {
  text-decoration: none;
}

/* Pfeil-Animation aus Card-Hover triggern (das related_teasers-CSS triggert
   den Translate nur beim Link-Hover; bei voller Card-Klickbarkeit braucht's
   einen zweiten Trigger). */
.hmi-blog-post-related-card-link:hover .hmi-related-teasers-link-icon,
.hmi-blog-post-related-card-link:focus-visible .hmi-related-teasers-link-icon {
  transform: translateX(0.25rem);
}
.hmi-blog-post-related-card-link:hover .hmi-related-teasers-link,
.hmi-blog-post-related-card-link:focus-visible .hmi-related-teasers-link {
  gap: 0.5rem;
}

/* Meta-Zeile (Datum + Lesezeit) — explizit etwas mehr Abstand zum Titel
   als die statischen related_teasers, weil hier ein H3 direkt folgt und
   die Lesbarkeit durch mehr Luft profitiert. */
.hmi-blog-post-related-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 0.875rem !important;
}
.hmi-blog-post-related-meta-bit {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.hmi-blog-post-related-meta-bit i {
  font-size: 0.75rem;
  opacity: 0.7;
}
.hmi-blog-post-related-meta-separator {
  color: rgba(0, 37, 40, 0.25);
}

/* --- CTA-Block --------------------------------------------------------- */
.hmi-blog-post-cta {
  margin-top: 5rem;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.07) 0%, rgba(20, 184, 166, 0.07) 100%);
  border-radius: var(--hmi-radius-card, 16px);
  text-align: center;
}
.hmi-blog-post-cta-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hmi-violet-500, #7c3aed);
  margin: 0 0 0.5rem;
  font-weight: 600;
}
.hmi-blog-post-cta-headline {
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--hmi-ink, #002528);
}
.hmi-blog-post-cta-text {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 auto 1.5rem;
  max-width: 540px;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-blog-post-cta-button {
  display: flex;
  justify-content: center;
}

/* --- Builder-Hinweis (ausserhalb Single-Post-Kontext) ------------------ */
.hmi-blog-post-builder-notice {
  padding: 2rem;
  background: rgba(124, 58, 237, 0.08);
  border: 1px dashed var(--hmi-violet-500, #7c3aed);
  border-radius: 12px;
  color: var(--hmi-ink, #002528);
  text-align: center;
  font-size: 0.9375rem;
}

/* ===========================================================================
   HMi Event Single — Single-Event-Layout
   =========================================================================== */
.hmi-event-single { position: relative; max-width: 960px; margin: 0 auto; }

.hmi-event-single-hero {
  position: relative;
  padding: 3rem 1.5rem 2rem;
}
.hmi-event-single-hero-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.hmi-event-single-eyebrow {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(124, 58, 237, 0.12);
  color: var(--hmi-violet-600, #6d28d9);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.hmi-event-single-title {
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--hmi-ink, #002528);
}
.hmi-event-single-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9375rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 1rem;
}
/* Eine einzelne Meta-Zeile: horizontaler Flex mit Wrap, fuer den Fall dass
   Format + Speaker auf engen Viewports nicht in eine Zeile passen. */
.hmi-event-single-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.hmi-event-single-meta i { font-size: 0.875rem; opacity: 0.75; margin-right: 0.375rem; }
.hmi-event-single-meta-separator { color: rgba(0, 37, 40, 0.25); }
.hmi-event-single-audience {
  font-size: 0.9375rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 1rem;
}
.hmi-event-single-audience strong { color: var(--hmi-ink, #002528); }
.hmi-event-single-featured-image-wrap { margin: 2rem 0 0; }
.hmi-event-single-featured-image {
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--hmi-radius-card, 16px);
}
.hmi-event-single-layout-image-bg .hmi-event-single-hero {
  background-size: cover;
  background-position: center;
  border-radius: var(--hmi-radius-card, 16px);
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
}
.hmi-event-single-layout-image-bg .hmi-event-single-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 37, 40, 0.55) 0%, rgba(0, 37, 40, 0.85) 100%);
  z-index: 1;
}
.hmi-event-single-layout-image-bg .hmi-event-single-title,
.hmi-event-single-layout-image-bg .hmi-event-single-meta,
.hmi-event-single-layout-image-bg .hmi-event-single-audience { color: #fff; }
.hmi-event-single-layout-image-bg .hmi-event-single-meta { color: rgba(255, 255, 255, 0.85); }

.hmi-event-single-body { max-width: 820px; margin: 0 auto; padding: 0 1.5rem; }
.hmi-event-single-description {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--hmi-ink, #002528);
  margin: 2rem 0;
}
.hmi-event-single-description p { margin: 0 0 1.25rem; }

.hmi-event-single-section-heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
  color: var(--hmi-ink, #002528);
}
.hmi-event-single-bullet-block { margin: 2rem 0; }
.hmi-event-single-bullet-list { margin: 0; padding: 0; list-style: none; }
.hmi-event-single-bullet-list li {
  position: relative;
  padding: 0.375rem 0 0.375rem 2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hmi-ink, #002528);
}
.hmi-event-single-bullet-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.875rem;
  width: 1rem; height: 1rem;
  background: var(--hmi-teal-500, #007078);
  border-radius: 50%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="white"><path d="M6.173 11.293L3.06 8.18l1.06-1.06 2.053 2.053 5.66-5.66 1.06 1.06z"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
}

.hmi-event-single-speaker-box {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2rem;
  margin: 3rem 0;
  background: rgba(0, 37, 40, 0.03);
  border-radius: var(--hmi-radius-card, 16px);
}
.hmi-event-single-speaker-avatar {
  flex: 0 0 auto;
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 37, 40, 0.08);
}
.hmi-event-single-speaker-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hmi-event-single-speaker-meta { flex: 1; }
.hmi-event-single-speaker-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 0.25rem;
  font-weight: 600;
}
.hmi-event-single-speaker-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--hmi-ink, #002528);
}
.hmi-event-single-speaker-role {
  font-size: 0.9375rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
}
@media (max-width: 640px) {
  .hmi-event-single-speaker-box { flex-direction: column; text-align: center; }
  .hmi-event-single-speaker-avatar { margin: 0 auto; }
}

.hmi-event-single-share {
  margin: 2.5rem 0 0;
  display: flex;
  justify-content: flex-start;
}

.hmi-event-single-register {
  margin: 4rem 0 0;
  padding: 3rem 2rem;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.07) 0%, rgba(20, 184, 166, 0.07) 100%);
  border-radius: var(--hmi-radius-card, 16px);
}
.hmi-event-single-register-heading {
  font-size: 1.625rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 0.5rem;
  color: var(--hmi-ink, #002528);
}
.hmi-event-single-register-subline {
  text-align: center;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0 0 1rem;
  font-size: 0.9375rem;
}
/* Spezifitaet via .hmi-event-single-register, damit Theme-Overrides
   (Impreza/WPBakery setzen text-align:left auf Block-Paragraphen) nicht
   greifen. */
.hmi-event-single-register .hmi-event-single-price,
.hmi-event-single .hmi-event-single-price,
p.hmi-event-single-price {
  text-align: center !important;
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 auto 0.25rem;
  padding: 0;
  color: var(--hmi-ink, #002528);
}
.hmi-event-single-register .hmi-event-single-price-sub,
.hmi-event-single .hmi-event-single-price-sub,
p.hmi-event-single-price-sub {
  text-align: center !important;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0 auto 1.5rem;
  padding: 0;
  color: var(--hmi-ink-muted, #5b6b6e);
}
.hmi-event-single-register .hmi-event-single-price + .hmi-event-single-price-sub { margin-top: -0.125rem; }
.hmi-event-single-register .hmi-event-single-price-free,
p.hmi-event-single-price-free {
  text-align: center !important;
  color: var(--hmi-teal-600, #00585f);
  margin-bottom: 1.5rem;
}

/* === Reihen-Block (Weitere Veranstaltungen derselben Taxonomy) ===
   Hohe Spezifitaet ueber das umschliessende .hmi-event-single-series,
   damit Impreza/WPBakery-Theme-Resets (besonders auf ul/li) nicht greifen. */
.hmi-event-single .hmi-event-single-series,
.hmi-event-single-series {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hmi-line, #e5e9ea);
}
.hmi-event-single-series .hmi-event-single-series-heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
  padding: 0;
  color: var(--hmi-ink, #002528);
  line-height: 1.25;
}
.hmi-event-single-series ul.hmi-event-single-series-list,
.hmi-event-single-series .hmi-event-single-series-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid;
  gap: 0.625rem;
}
.hmi-event-single-series .hmi-event-single-series-item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
}
.hmi-event-single-series .hmi-event-single-series-item::before,
.hmi-event-single-series .hmi-event-single-series-item::marker {
  content: none !important;
  display: none !important;
}
.hmi-event-single-series .hmi-event-single-series-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.125rem;
  background: #fff;
  border: 1px solid var(--hmi-line, #e5e9ea);
  border-radius: 0.75rem;
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 1px 2px rgba(0, 37, 40, 0.04);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.hmi-event-single-series .hmi-event-single-series-link:hover,
.hmi-event-single-series .hmi-event-single-series-link:focus-visible {
  border-color: var(--hmi-teal-500, #00747e);
  box-shadow: 0 8px 22px -10px rgba(0, 37, 40, 0.22);
  transform: translateY(-1px);
  text-decoration: none !important;
}
.hmi-event-single-series .hmi-event-single-series-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--hmi-teal-600, #00585f);
  background: var(--hmi-teal-50, #eaf6f6);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  min-width: 2.75rem;
  height: 2.5rem;
}
.hmi-event-single-series .hmi-event-single-series-body {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  min-width: 0;
}
.hmi-event-single-series .hmi-event-single-series-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--hmi-ink, #002528);
  line-height: 1.35;
}
.hmi-event-single-series .hmi-event-single-series-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--hmi-ink-muted, #5b6b6e);
  line-height: 1.4;
}
.hmi-event-single-series .hmi-event-single-series-date {
  font-weight: 500;
}
.hmi-event-single-series .hmi-event-single-series-format {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  background: var(--hmi-bg-muted, #f4f6f6);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.hmi-event-single-series .hmi-event-single-series-format i {
  font-size: 0.75rem;
  color: var(--hmi-teal-600, #00585f);
}
.hmi-event-single-series .hmi-event-single-series-badge {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  background: var(--hmi-line, #e5e9ea);
  color: var(--hmi-ink-muted, #5b6b6e);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hmi-event-single-series .hmi-event-single-series-arrow {
  color: var(--hmi-ink-muted, #5b6b6e);
  font-size: 1.25rem;
  font-weight: 600;
  transition: transform 0.18s ease, color 0.18s ease;
}
.hmi-event-single-series .hmi-event-single-series-link:hover .hmi-event-single-series-arrow,
.hmi-event-single-series .hmi-event-single-series-link:focus-visible .hmi-event-single-series-arrow {
  transform: translateX(4px);
  color: var(--hmi-teal-600, #00585f);
}

/* Vergangene Termine: gedimmt, aber lesbar. */
.hmi-event-single-series .hmi-event-single-series-item.is-past .hmi-event-single-series-link {
  background: var(--hmi-bg-muted, #fafbfb);
  opacity: 0.7;
}
.hmi-event-single-series .hmi-event-single-series-item.is-past .hmi-event-single-series-link:hover,
.hmi-event-single-series .hmi-event-single-series-item.is-past .hmi-event-single-series-link:focus-visible {
  opacity: 1;
}
.hmi-event-single-series .hmi-event-single-series-item.is-past .hmi-event-single-series-num {
  background: var(--hmi-line, #e5e9ea);
  color: var(--hmi-ink-muted, #5b6b6e);
}

/* Mobile: Nummer links, Pfeil weg, Meta umbrechen. */
@media (max-width: 640px) {
  .hmi-event-single-series .hmi-event-single-series-link {
    grid-template-columns: auto 1fr;
    padding: 0.875rem 1rem;
    gap: 0.75rem;
  }
  .hmi-event-single-series .hmi-event-single-series-arrow {
    display: none;
  }
}

/* iCal-Download-Link in der Event-Meta-Zeile (v1.4.1) */
.hmi-event-single-meta-ics {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-left: 0.5rem;
  padding: 2px 8px;
  background: rgba(0, 112, 120, 0.08);
  border: 1px solid rgba(0, 112, 120, 0.18);
  border-radius: 999px;
  color: var(--hmi-teal-600, #00585f);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: all 0.15s ease;
}
.hmi-event-single-meta-ics:hover,
.hmi-event-single-meta-ics:focus-visible {
  background: var(--hmi-teal-500, #007078);
  border-color: var(--hmi-teal-500, #007078);
  color: #fff;
  text-decoration: none;
}
.hmi-event-single-meta-ics i {
  font-size: 0.8125rem;
}

/* iCal-Download als sekundäre Aktion in der Share-Sektion (v1.4.9).
   Visuell IDENTISCH zu den Share-Buttons des hmi_atom('share_buttons')-
   Atoms — gleiche Square-Outline-Box (2.5rem × 2.5rem, 10 px Radius,
   1.5 px Border). Nur Icon sichtbar, Text-Label via .screen-reader-text
   für Barrierefreiheit. Höhere Spezifität via Element + Klasse +
   !important, weil das Theme globale `a`-Stile setzt, die ohne Defense
   die Border/Padding-Werte überschreiben. */
.hmi-event-single-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
a.hmi-event-single-share-ics,
a.hmi-event-single-share-ics:link,
a.hmi-event-single-share-ics:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1.5px solid var(--hmi-teal-500, #007078) !important;
  border-radius: 10px !important;
  color: var(--hmi-teal-600, #00585f) !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  flex: 0 0 auto;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  box-shadow: none !important;
}
a.hmi-event-single-share-ics:hover,
a.hmi-event-single-share-ics:focus,
a.hmi-event-single-share-ics:focus-visible,
a.hmi-event-single-share-ics:active {
  background: var(--hmi-teal-500, #007078) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}
a.hmi-event-single-share-ics i {
  font-size: 1em;
  line-height: 1;
}
/* Text-Label visuell verstecken, für Screenreader + title-Tooltip bleibt
   die Aktion erkennbar. Standard sr-only-Pattern. */
a.hmi-event-single-share-ics .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Hero-CTA (v1.4.3): Preis-Pill + Quick-Anmeldelink im Hero — Above-the-Fold-
   CTA, damit Besucher nicht ~80 % der Seite scrollen müssen, um Preis und
   Anmelde-Möglichkeit zu sehen.
   ========================================================================== */
.hmi-event-single-hero-cta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}
.hmi-event-single-hero-price {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: rgba(0, 112, 120, 0.08);
  color: var(--hmi-teal-600, #00585f);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  white-space: nowrap;
}
.hmi-event-single-hero-cta .hmi-event-single-hero-button,
.hmi-event-single-hero-cta a.hmi-event-single-hero-button,
.hmi-event-single-hero-cta a.hmi-event-single-hero-button:link,
.hmi-event-single-hero-cta a.hmi-event-single-hero-button:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  background: var(--hmi-violet-500, #4C3E80) !important;
  color: #fff !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.2;
  transition: background 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px rgba(76, 62, 128, 0.22);
}
.hmi-event-single-hero-cta a.hmi-event-single-hero-button:hover,
.hmi-event-single-hero-cta a.hmi-event-single-hero-button:focus,
.hmi-event-single-hero-cta a.hmi-event-single-hero-button:focus-visible,
.hmi-event-single-hero-cta a.hmi-event-single-hero-button:active {
  background: var(--hmi-violet-600, #3F3369) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* Auf dunklem Hero-Background (image-bg) das Preis-Pill in transluzentem
   Weiß zeigen, damit die Lesbarkeit erhalten bleibt. */
.hmi-event-single-layout-image-bg .hmi-event-single-hero-price {
  background: rgba(255, 255, 255, 0.92);
  color: var(--hmi-teal-600, #00585f);
}

/* ==========================================================================
   Risk-Reversal-Element (v1.4.3): „Noch unsicher? → Info-Session" direkt
   unter dem Anmeldeformular. Fängt unentschlossene Leser auf.
   ========================================================================== */
.hmi-event-single-riskreversal {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 1.25rem 0 0;
  padding: 1.125rem 1.25rem;
  background: rgba(0, 112, 120, 0.04);
  border-left: 3px solid var(--hmi-teal-500, #007078);
  border-radius: 0 8px 8px 0;
}
.hmi-event-single-riskreversal-body {
  flex: 1 1 320px;
  min-width: 0;
}
.hmi-event-single-riskreversal-headline {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--hmi-ink, #1B2029);
  line-height: 1.35;
}
.hmi-event-single-riskreversal-text {
  margin: 0;
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4A5568);
  line-height: 1.55;
}
.hmi-event-single-riskreversal a.hmi-event-single-riskreversal-link,
.hmi-event-single-riskreversal a.hmi-event-single-riskreversal-link:link,
.hmi-event-single-riskreversal a.hmi-event-single-riskreversal-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.125rem;
  background: #fff !important;
  border: 1px solid var(--hmi-teal-500, #007078);
  color: var(--hmi-teal-600, #00585f) !important;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.hmi-event-single-riskreversal a.hmi-event-single-riskreversal-link:hover,
.hmi-event-single-riskreversal a.hmi-event-single-riskreversal-link:focus,
.hmi-event-single-riskreversal a.hmi-event-single-riskreversal-link:focus-visible,
.hmi-event-single-riskreversal a.hmi-event-single-riskreversal-link:active {
  background: var(--hmi-teal-500, #007078) !important;
  color: #fff !important;
  text-decoration: none !important;
}

.hmi-event-single-builder-notice,
.hmi-event-list-builder-notice,
.hmi-product-teasers-builder-notice {
  padding: 2rem;
  background: rgba(124, 58, 237, 0.08);
  border: 1px dashed var(--hmi-violet-500, #7c3aed);
  border-radius: 12px;
  color: var(--hmi-ink, #002528);
  text-align: center;
  font-size: 0.9375rem;
}

/* ===========================================================================
   HMi Event Thanks — Danke-Seite nach Event-Anmeldung
   =========================================================================== */
.hmi-event-thanks {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.hmi-event-thanks-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hmi-teal-500, #007078);
}
.hmi-event-thanks-title {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--hmi-ink, #002528);
}
.hmi-event-thanks-title strong {
  color: var(--hmi-teal-500, #007078);
  font-weight: 700;
}
.hmi-event-thanks-lead {
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-event-thanks-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(0, 112, 120, 0.04);
  border-left: 3px solid var(--hmi-teal-500, #007078);
  border-radius: 0 6px 6px 0;
}
.hmi-event-thanks-meta-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.75rem;
  margin: 0;
}
.hmi-event-thanks-meta-row dt {
  font-weight: 600;
  color: var(--hmi-ink, #002528);
  margin: 0;
}
.hmi-event-thanks-meta-row dt i {
  margin-right: 0.375rem;
  color: var(--hmi-teal-500, #007078);
}
.hmi-event-thanks-meta-row dd {
  margin: 0;
  color: var(--hmi-ink, #002528);
}
.hmi-event-thanks-meta-secondary {
  color: var(--hmi-ink-light, #4a5568);
}
@media (max-width: 540px) {
  .hmi-event-thanks-meta-row {
    grid-template-columns: 1fr;
    gap: 0.125rem;
  }
}
.hmi-event-thanks-note {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background: rgba(76, 62, 128, 0.06);
  border-left: 3px solid var(--hmi-violet-500, #4C3E80);
  border-radius: 0 6px 6px 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--hmi-ink, #002528);
}
.hmi-event-thanks-note p { margin: 0 0 0.75rem; }
.hmi-event-thanks-note p:last-child { margin-bottom: 0; }
.hmi-event-thanks-steps { margin-top: 2rem; }
.hmi-event-thanks-steps-heading {
  margin: 0 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hmi-ink, #002528);
}
.hmi-event-thanks-steps-list {
  margin: 0;
  padding: 0 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--hmi-ink, #002528);
}
.hmi-event-thanks-steps-list li {
  margin-bottom: 0.5rem;
}
.hmi-event-thanks-builder-hint {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(124, 58, 237, 0.06);
  border: 1px dashed var(--hmi-violet-500, #7c3aed);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
}

/* ===========================================================================
   HMi Event List — Liste anstehender Events
   =========================================================================== */
.hmi-event-list { padding: 3rem 1.5rem; }
.hmi-event-list-header { margin: 0 auto 2.5rem; max-width: 720px; }
/* Header-Alignment: zentriert (Default) oder linksbündig. Linksbündig hebt
   die max-width auf, damit Eyebrow/Headline/Intro die volle Section-Breite
   nutzen — fühlt sich auf Editorial-Layouts natürlicher an. */
.hmi-event-list-header--align-center { text-align: center; }
.hmi-event-list-header--align-left   { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }

.hmi-event-list-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hmi-teal-500, #007078);
  /* Eyebrow + Headline lesen als visuelle Einheit — sehr enger Abstand. */
  margin: 0 0 0.125rem;
  font-weight: 600;
}
.hmi-event-list-headline {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--hmi-ink, #002528);
}
.hmi-event-list-subline {
  font-size: 1rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
}
.hmi-event-list-header--align-left .hmi-event-list-subline {
  max-width: 720px;
}
.hmi-event-list-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-event-list-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}
.hmi-event-list-cols-2 .hmi-event-list-grid { grid-template-columns: repeat(2, 1fr); }
.hmi-event-list-cols-3 .hmi-event-list-grid { grid-template-columns: repeat(3, 1fr); }
.hmi-event-list-cols-4 .hmi-event-list-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .hmi-event-list-cols-3 .hmi-event-list-grid,
  .hmi-event-list-cols-4 .hmi-event-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hmi-event-list-grid { grid-template-columns: 1fr !important; }
}
.hmi-event-list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--hmi-radius-card, 16px);
  overflow: hidden;
  border: 1px solid rgba(0, 37, 40, 0.08);
  text-decoration: none !important;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hmi-event-list-hover-lift .hmi-event-list-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 37, 40, 0.12);
}
/* Glow-Farbe folgt der Akzentfarbe der Card. So bekommt z.B. die letzte Card
   im "Letzte Violet"-Modus einen violetten Glow, waehrend die anderen teal
   bleiben. Greift fuer beide Hover-Modi. */
.hmi-event-list-hover-lift   .hmi-event-list-accent-teal:hover,
.hmi-event-list-hover-shadow .hmi-event-list-accent-teal:hover {
  box-shadow: 0 10px 30px rgba(0, 112, 120, 0.18), 0 2px 8px rgba(0, 0, 0, 0.05);
}
.hmi-event-list-hover-lift   .hmi-event-list-accent-violet:hover,
.hmi-event-list-hover-shadow .hmi-event-list-accent-violet:hover {
  box-shadow: 0 10px 30px rgba(76, 62, 128, 0.22), 0 2px 8px rgba(0, 0, 0, 0.05);
}
.hmi-event-list-card-image-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(0, 37, 40, 0.04);
  overflow: hidden;
}
.hmi-event-list-card-image {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Bewusst kein transform-Hover mehr — Bild bleibt unskaliert. Die ganze
     Card hebt sich stattdessen via .hmi-event-list-hover-lift bzw. -hover-shadow. */
}
.hmi-event-list-card-image-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; color: rgba(0, 37, 40, 0.4);
}
.hmi-event-list-format-pill {
  position: absolute; top: 0.75rem; left: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.375rem;
  /* Vertikales Padding halbiert (0.25 → 0.125rem), Border-Radius dezenter
     (9999px voll-pill → 0.375rem leicht abgerundet) — einheitlicher mit
     anderen kleinen Tag-Elementen auf der Site. */
  padding: 0.125rem 0.625rem;
  border-radius: 0.375rem;
  /* Echtes Frosted-Glass: dunkler halbtransparenter Grund + starker Blur.
     Funktioniert auf hellen wie dunklen Bildern gut lesbar. */
  background: rgba(0, 37, 40, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.hmi-event-list-status-overlay {
  position: absolute; top: 0.75rem; right: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}
.hmi-event-list-status-full { background: #dc2626; }
.hmi-event-list-status-past { background: #64748b; }
.hmi-event-list-card-body {
  display: flex; flex-direction: column; gap: 0.375rem;
  padding: 1.25rem 1.25rem 1.5rem;
  flex: 1 1 auto;
}
.hmi-event-list-card-body > * { margin: 0; }
.hmi-event-list-card-meta {
  font-size: 0.8125rem;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-event-list-card-date i { font-size: 0.75rem; opacity: 0.7; margin-right: 0.375rem; }
.hmi-event-list-card-title {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  /* Kein zusaetzlicher margin-top — der Body-gap reicht. */
}
.hmi-event-list-card-speaker {
  font-size: 0.875rem;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-event-list-card-capacity {
  font-size: 0.8125rem;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-event-list-card-capacity strong { color: var(--hmi-violet-500, #7c3aed); }
.hmi-event-list-card-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hmi-ink, #002528);
}
.hmi-event-list-card-price-free { color: var(--hmi-teal-600, #00585f); }
.hmi-event-list-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hmi-teal-500, #007078);
  margin-top: 0.5rem !important;
}
/* CTA-Farbe folgt der Card-Akzentfarbe. */
.hmi-event-list-accent-violet .hmi-event-list-card-cta { color: var(--hmi-violet-500, #4C3E80); }
/* "Kostenfrei"-Badge akzentfarbig — vorher hardcoded teal-600. */
.hmi-event-list-accent-violet .hmi-event-list-card-price-free { color: var(--hmi-violet-500, #4C3E80); }
.hmi-event-list-card-cta svg {
  width: 0.875rem; height: 0.875rem;
  transition: transform 0.2s ease;
}
.hmi-event-list-card:hover .hmi-event-list-card-cta svg { transform: translateX(0.25rem); }

/* Card-Footer: pinnt Preis + CTA an den unteren Rand der Card. So stehen
   die "Mehr erfahren"-Links aller Cards in einer Zeile, unabhaengig davon
   wie viele Felder (Speaker, Kapazitaet, Datum) gefuellt sind. */
.hmi-event-list-card-footer {
  margin-top: auto;
  padding-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.hmi-event-list-card-footer .hmi-event-list-card-cta { margin-top: 0 !important; }

/* ===========================================================================
   HMi Product Teasers — kontextuelle WC-Empfehlung
   =========================================================================== */
.hmi-product-teasers { padding: 3rem 1.5rem; }
.hmi-product-teasers-header { margin: 0 auto 2.5rem; max-width: 720px; }
/* Header-Alignment: zentriert (Default) oder linksbündig. Linksbündig hebt
   die max-width auf, damit Eyebrow/Headline/Intro die volle Section-Breite
   nutzen — fühlt sich auf Editorial-Layouts natürlicher an. */
.hmi-product-teasers-header--align-center { text-align: center; }
.hmi-product-teasers-header--align-left   { text-align: left; max-width: none; margin-left: 0; margin-right: 0; }

.hmi-product-teasers-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hmi-teal-500, #007078);
  /* Eyebrow + Headline lesen als visuelle Einheit — sehr enger Abstand. */
  margin: 0 0 0.125rem;
  font-weight: 600;
}
.hmi-product-teasers-headline {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--hmi-ink, #002528);
}
.hmi-product-teasers-subline {
  font-size: 1rem;
  color: var(--hmi-ink-light, #4a5568);
  margin: 0;
}
.hmi-product-teasers-header--align-left .hmi-product-teasers-subline {
  max-width: 720px;
}
.hmi-product-teasers-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}
.hmi-product-teasers-cols-2 .hmi-product-teasers-grid { grid-template-columns: repeat(2, 1fr); }
.hmi-product-teasers-cols-3 .hmi-product-teasers-grid { grid-template-columns: repeat(3, 1fr); }
.hmi-product-teasers-cols-4 .hmi-product-teasers-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .hmi-product-teasers-cols-3 .hmi-product-teasers-grid,
  .hmi-product-teasers-cols-4 .hmi-product-teasers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hmi-product-teasers-grid { grid-template-columns: 1fr !important; }
}
.hmi-product-teasers-card-image-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(0, 37, 40, 0.04);
  overflow: hidden;
}
.hmi-product-teasers-card-image {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Bewusst kein transform-Hover mehr — Bild bleibt unskaliert. Die ganze
     Card hebt sich stattdessen via .hmi-product-teasers-hover-lift bzw.
     -hover-shadow (siehe unten). */
}
.hmi-product-teasers-card-image-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8125rem; color: rgba(0, 37, 40, 0.4);
}
.hmi-product-teasers-card-link {
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
}
.hmi-product-teasers-card-link > .hmi-related-teasers-accent-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
}
.hmi-product-teasers-card-link:hover .hmi-related-teasers-link-icon,
.hmi-product-teasers-card-link:focus-visible .hmi-related-teasers-link-icon {
  transform: translateX(0.25rem);
}
.hmi-product-teasers-card-link:hover .hmi-related-teasers-link,
.hmi-product-teasers-card-link:focus-visible .hmi-related-teasers-link {
  gap: 0.5rem;
}
.hmi-product-teasers-card-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--hmi-ink, #002528);
  margin: 0.5rem 0 0 !important;
}
.hmi-product-teasers-card-price del {
  font-weight: 400;
  color: var(--hmi-ink-light, #4a5568);
  margin-right: 0.5rem;
}
.hmi-product-teasers-card-price ins {
  text-decoration: none;
  color: var(--hmi-teal-600, #00585f);
}
.hmi-product-teasers-card-cta { margin-top: 0.75rem !important; }

/* Card-Footer: pinnt Preis + CTA an den unteren Rand der Card. So stehen
   die "Mehr erfahren"-Links aller Cards in einer Zeile, unabhängig davon
   wie lang Title oder Excerpt ausfallen. Greift, weil .hmi-related-teasers-card-body
   bereits flex-column + flex:1 hat (siehe oben). */
.hmi-product-teasers-card-footer {
  margin-top: auto;
  padding-top: 1rem;
}
.hmi-product-teasers-card-footer .hmi-product-teasers-card-price {
  margin-top: 0 !important;
}
.hmi-product-teasers-card-footer .hmi-product-teasers-card-cta {
  margin-top: 0.5rem !important;
}

/* Hover-Effekte: Lift bzw. Shadow auf der ganzen Card (nicht auf dem Bild).
   Identisch zu .hmi-related-teasers-hover-lift, aber mit dem
   .hmi-product-teasers-hover-*-Wrapper-Selektor — vorher griff der Hover
   gar nicht (Wrapper-/Selektor-Mismatch). */
.hmi-product-teasers-hover-lift   .hmi-related-teasers-card,
.hmi-product-teasers-hover-shadow .hmi-related-teasers-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hmi-product-teasers-hover-lift .hmi-related-teasers-card:hover {
  transform: translateY(-0.25rem);
}
/* Glow-Farbe folgt der Akzentfarbe der Card (.hmi-related-teasers-accent-*).
   So bekommt z.B. die letzte Card im "Letzte Violet"-Modus einen violetten
   Glow, waehrend die anderen teal bleiben. Greift fuer beide Hover-Modi. */
.hmi-product-teasers-hover-lift   .hmi-related-teasers-accent-teal:hover,
.hmi-product-teasers-hover-shadow .hmi-related-teasers-accent-teal:hover {
  box-shadow: 0 8px 30px rgba(0, 112, 120, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.hmi-product-teasers-hover-lift   .hmi-related-teasers-accent-violet:hover,
.hmi-product-teasers-hover-shadow .hmi-related-teasers-accent-violet:hover {
  box-shadow: 0 8px 30px rgba(76, 62, 128, 0.22), 0 2px 8px rgba(0, 0, 0, 0.06);
}
@media (prefers-reduced-motion: reduce) {
  .hmi-product-teasers-hover-lift .hmi-related-teasers-card,
  .hmi-product-teasers-hover-shadow .hmi-related-teasers-card { transition: none; }
  .hmi-product-teasers-hover-lift .hmi-related-teasers-card:hover { transform: none; }
}

/* ============================================================================
 * HMi Page Header — schlanker Header für Sekundärseiten (Impressum, Datenschutz, AGB).
 * 3 Style-Varianten (light/subtle/dark) × 3 Paddings (compact/default/generous)
 * × 2 Alignments (left/center).
 * ========================================================================== */

.hmi-page-header {
  position: relative;
  width: 100%;
  background: #fff;
  color: var(--hmi-ink, #0f131f);
}

.hmi-page-header__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* --- Style-Varianten ------------------------------------------------------- */

.hmi-page-header--light {
  background: #fff;
  color: var(--hmi-ink, #0f131f);
}

.hmi-page-header--subtle {
  background: var(--hmi-teal-50, #f0fdfa);
  color: var(--hmi-ink, #0f131f);
  border-bottom: 1px solid rgba(15, 19, 31, 0.06);
}

/* Teal: HM-i-Standard. Identisch zum Hero-Default-Gradient
   (.hmi-hero--bg-gradient-teal-900-800-900) — diagonaler 135deg-Verlauf
   mit hellerem Mid-Stop, ergibt das offene, lichtdurchflutete Look-and-Feel. */
.hmi-page-header--teal {
  background: linear-gradient(135deg, #003236 0%, #004a4f 50%, #003236 100%);
  color: #fff;
}

.hmi-page-header--dark {
  background: linear-gradient(180deg, var(--hmi-teal-900, #002528) 0%, var(--hmi-teal-800, #003c40) 100%);
  color: #fff;
}

/* --- Padding-Stufen -------------------------------------------------------- */

.hmi-page-header--pad-compact .hmi-page-header__inner {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.hmi-page-header--pad-default .hmi-page-header__inner {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.hmi-page-header--pad-generous .hmi-page-header__inner {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* --- Alignment ------------------------------------------------------------- */

.hmi-page-header--align-left .hmi-page-header__inner {
  text-align: left;
}
.hmi-page-header--align-center .hmi-page-header__inner {
  text-align: center;
}
.hmi-page-header--align-center .hmi-page-header__breadcrumbs ol {
  justify-content: center;
}
.hmi-page-header--align-center .hmi-page-header__intro {
  margin-left: auto;
  margin-right: auto;
}

/* --- Breadcrumbs ----------------------------------------------------------- */

.hmi-page-header__breadcrumbs {
  margin-bottom: 1rem;
}
.hmi-page-header__breadcrumbs ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 13px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-page-header__breadcrumbs a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hmi-page-header__breadcrumbs a:hover {
  color: var(--hmi-teal-700, #007078);
}
.hmi-page-header__breadcrumbs-sep {
  color: rgba(15, 19, 31, 0.3);
}
.hmi-page-header__breadcrumbs [aria-current="page"] {
  color: var(--hmi-ink, #0f131f);
  font-weight: 500;
}

/* Yoast/Rank-Math liefern oft <span> statt <ol>/<li> — wir styling-fallen
   die Direkt-Kinder ähnlich. */
.hmi-page-header__breadcrumbs > span,
.hmi-page-header__breadcrumbs > p {
  font-size: 13px;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-page-header__breadcrumbs a {
  color: inherit;
}

/* Auf-dunklem-Hintergrund-Variants (teal + dark): Breadcrumbs invertieren */
.hmi-page-header--teal .hmi-page-header__breadcrumbs ol,
.hmi-page-header--teal .hmi-page-header__breadcrumbs > span,
.hmi-page-header--teal .hmi-page-header__breadcrumbs > p,
.hmi-page-header--dark .hmi-page-header__breadcrumbs ol,
.hmi-page-header--dark .hmi-page-header__breadcrumbs > span,
.hmi-page-header--dark .hmi-page-header__breadcrumbs > p {
  color: rgba(255, 255, 255, 0.6);
}
.hmi-page-header--teal .hmi-page-header__breadcrumbs a:hover,
.hmi-page-header--dark .hmi-page-header__breadcrumbs a:hover {
  color: rgba(255, 255, 255, 0.95);
}
.hmi-page-header--teal .hmi-page-header__breadcrumbs-sep,
.hmi-page-header--dark .hmi-page-header__breadcrumbs-sep {
  color: rgba(255, 255, 255, 0.3);
}
.hmi-page-header--teal .hmi-page-header__breadcrumbs [aria-current="page"],
.hmi-page-header--dark .hmi-page-header__breadcrumbs [aria-current="page"] {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Eyebrow --------------------------------------------------------------- */

.hmi-page-header__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hmi-teal-700, #007078);
  margin-bottom: 0.5rem;
}
.hmi-page-header--teal .hmi-page-header__eyebrow,
.hmi-page-header--dark .hmi-page-header__eyebrow {
  color: var(--hmi-teal-300, #5eead4);
}

/* --- Title (H1) ------------------------------------------------------------ */

.hmi-page-header__title {
  font-size: clamp(1.75rem, 4vw, 2.625rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: inherit;
}

/* --- Intro-Text ------------------------------------------------------------ */

.hmi-page-header__intro {
  margin-top: 1rem;
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--hmi-ink-light, #4a5568);
}
.hmi-page-header--teal .hmi-page-header__intro,
.hmi-page-header--dark .hmi-page-header__intro {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Trust-Bar-Rail (optional, am unteren Rand des Headers) ---------------- */

.hmi-page-header__trust-bar-rail {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 1rem 1.5rem 1.25rem;
}
.hmi-page-header__trust-bar-rail--with-border {
  border-top: 1px solid rgba(15, 19, 31, 0.08);
}
.hmi-page-header--teal .hmi-page-header__trust-bar-rail--with-border,
.hmi-page-header--dark .hmi-page-header__trust-bar-rail--with-border {
  border-top-color: rgba(255, 255, 255, 0.12);
}
/* Content innerhalb der Rail zentriert + max-width angleichen an __inner */
.hmi-page-header__trust-bar-rail .hmi-trust-bar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
}
.hmi-page-header__trust-bar-rail .hmi-trust-bar__inner {
  justify-content: center;
}

/* Wenn Trust-Bar aktiv ist, reduzieren wir das Bottom-Padding des Inner-
   Containers etwas, damit die Trust-Bar nicht doppelt-luftig wird. */
.hmi-page-header__trust-bar-rail + section,
.hmi-page-header:has(.hmi-page-header__trust-bar-rail) .hmi-page-header__inner {
  padding-bottom: 2rem;
}

/* --- Mobile-Tweaks --------------------------------------------------------- */

@media (max-width: 640px) {
  .hmi-page-header--pad-default .hmi-page-header__inner {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .hmi-page-header--pad-generous .hmi-page-header__inner {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* ============================================================================
   Shop Archive (WooCommerce) — seit 2026-04-27
   ============================================================================
   Pattern: Header (Eyebrow + Headline + Subline) + Card-Grid + Pagination.
   Cards rendern Produktbild, Kategorie-Eyebrow, Titel, Preis (mit Sale-
   Striche), optionalen Sale-Badge + Rating, CTA-Pfeil. */
.hmi-shop-archive {
	width: 100%;
}
.hmi-shop-archive-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.25rem;
}
.hmi-shop-archive--bg-white   { background: #fff; }
.hmi-shop-archive--bg-cool-50 { background: var(--hmi-cool-50, #f1f9fa); }
.hmi-shop-archive--bg-sand-50 { background: var(--hmi-sand-50, #fdfcfa); }

.hmi-shop-archive-header {
	margin-bottom: 2.5rem;
}
.hmi-shop-archive--align-center .hmi-shop-archive-header {
	text-align: center;
}
.hmi-shop-archive--align-left .hmi-shop-archive-header {
	text-align: left;
}
.hmi-shop-archive-eyebrow {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hmi-teal-700, #007078);
}
.hmi-shop-archive-headline {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--hmi-ink, #002528);
	line-height: 1.2;
}
.hmi-shop-archive-subline {
	margin: 0;
	font-size: 1rem;
	color: var(--hmi-ink-light, #4a5568);
	line-height: 1.6;
	max-width: 640px;
}
.hmi-shop-archive--align-center .hmi-shop-archive-subline {
	margin-left: auto;
	margin-right: auto;
}

.hmi-shop-archive-empty {
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--hmi-ink-light, #4a5568);
	background: rgba(0, 0, 0, 0.025);
	border-radius: 12px;
}

.hmi-shop-archive-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.hmi-shop-archive--cols-2 .hmi-shop-archive-grid,
	.hmi-shop-archive--cols-3 .hmi-shop-archive-grid,
	.hmi-shop-archive--cols-4 .hmi-shop-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 960px) {
	.hmi-shop-archive--cols-3 .hmi-shop-archive-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.hmi-shop-archive--cols-4 .hmi-shop-archive-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.hmi-shop-archive-card {
	background: #fff;
	border: 1px solid var(--hmi-border, #e5e7eb);
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hmi-shop-archive--hover-lift .hmi-shop-archive-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.18);
	border-color: var(--hmi-teal-300, #78d7dd);
}
.hmi-shop-archive--hover-shadow .hmi-shop-archive-card:hover {
	box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.22);
	border-color: var(--hmi-teal-300, #78d7dd);
}
.hmi-shop-archive-card-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.hmi-shop-archive-card-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--hmi-cool-50, #f1f9fa);
}
.hmi-shop-archive-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hmi-shop-archive-card-image--placeholder {
	background: linear-gradient(135deg, var(--hmi-cool-50, #f1f9fa), var(--hmi-sand-50, #fdfcfa));
}
.hmi-shop-archive-card-sale-badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.25rem 0.625rem;
	background: var(--hmi-violet-500, #4C3E80);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 4px;
}
.hmi-shop-archive-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
	flex: 1;
}
.hmi-shop-archive-card-eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hmi-teal-700, #007078);
}
.hmi-shop-archive-card-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--hmi-ink, #002528);
	line-height: 1.35;
}
.hmi-shop-archive-card-rating {
	font-size: 0.875rem;
}
.hmi-shop-archive-card-price {
	font-size: 1rem;
	font-weight: 600;
	color: var(--hmi-ink, #002528);
}
.hmi-shop-archive-card-price del {
	color: var(--hmi-ink-light, #4a5568);
	font-weight: 400;
	margin-right: 0.5rem;
}
.hmi-shop-archive-card-price ins {
	text-decoration: none;
	color: var(--hmi-violet-500, #4C3E80);
}
.hmi-shop-archive-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: auto;
	padding-top: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hmi-teal-700, #007078);
	transition: color 0.2s ease, gap 0.2s ease;
}
.hmi-shop-archive-card-link:hover .hmi-shop-archive-card-cta {
	color: var(--hmi-teal-900, #002528);
	gap: 0.5rem;
}
.hmi-shop-archive-card-cta-arrow {
	width: 16px;
	height: 16px;
}

/* Pagination */
.hmi-shop-archive-pagination {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}
.hmi-shop-archive-pagination ul.page-numbers {
	display: inline-flex;
	gap: 0.375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hmi-shop-archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 0.625rem;
	border: 1px solid var(--hmi-border, #e5e7eb);
	border-radius: 6px;
	color: var(--hmi-ink, #002528);
	text-decoration: none;
	font-size: 0.875rem;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.hmi-shop-archive-pagination .page-numbers:hover {
	background: var(--hmi-cool-50, #f1f9fa);
	border-color: var(--hmi-teal-300, #78d7dd);
}
.hmi-shop-archive-pagination .page-numbers.current {
	background: var(--hmi-teal-700, #007078);
	color: #fff;
	border-color: var(--hmi-teal-700, #007078);
}

/* Editor-Hint wenn WC fehlt */
.hmi-shop-archive--missing-wc {
	padding: 1rem 1.25rem;
	background: #fef3c7;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	color: #78350f;
}

/* ============================================================================
   Shop Product Single (WooCommerce) — seit 2026-04-27
   ============================================================================
   Hero mit Galerie + Info-Block (image-left/-right/-text-only) + Tabs +
   Cross-Sells + Related-Products. */
.hmi-shop-product {
	width: 100%;
	padding: 2rem 0;
}
.hmi-shop-product--bg-white   { background: #fff; }
.hmi-shop-product--bg-cool-50 { background: var(--hmi-cool-50, #f1f9fa); }
.hmi-shop-product--bg-sand-50 { background: var(--hmi-sand-50, #fdfcfa); }

.hmi-shop-product-breadcrumbs {
	max-width: 1200px;
	margin: 0 auto 1.5rem;
	padding: 0 1.25rem;
	font-size: 0.8125rem;
	color: var(--hmi-ink-light, #4a5568);
}
.hmi-shop-product-breadcrumbs a {
	color: var(--hmi-teal-700, #007078);
	text-decoration: none;
}
.hmi-shop-product-breadcrumbs a:hover {
	text-decoration: underline;
}

.hmi-shop-product-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.25rem;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.hmi-shop-product--image-left .hmi-shop-product-grid,
	.hmi-shop-product--image-right .hmi-shop-product-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.hmi-shop-product--image-right .hmi-shop-product-gallery {
		order: 2;
	}
}

.hmi-shop-product-gallery {
	position: relative;
}
.hmi-shop-product-gallery img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.hmi-shop-product-sale-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	padding: 0.375rem 0.75rem;
	background: var(--hmi-violet-500, #4C3E80);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 6px;
}

.hmi-shop-product-info {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.hmi-shop-product-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hmi-teal-700, #007078);
	margin-bottom: -0.25rem;
}
.hmi-shop-product-title {
	margin: 0;
	font-size: clamp(1.625rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--hmi-ink, #002528);
	line-height: 1.2;
}
.hmi-shop-product-rating {
	font-size: 0.9375rem;
}
.hmi-shop-product-price {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--hmi-ink, #002528);
}
.hmi-shop-product-price del {
	color: var(--hmi-ink-light, #4a5568);
	font-weight: 400;
	font-size: 1.125rem;
	margin-right: 0.625rem;
}
.hmi-shop-product-price ins {
	text-decoration: none;
	color: var(--hmi-violet-500, #4C3E80);
}
.hmi-shop-product-excerpt {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--hmi-ink-light, #4a5568);
}
.hmi-shop-product-stock {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hmi-teal-700, #007078);
}
.hmi-shop-product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.hmi-shop-product-cta-secondary {
	display: inline-flex;
	align-items: center;
	padding: 0.875rem 1.5rem;
	border: 2px solid var(--hmi-teal-700, #007078);
	border-radius: 8px;
	color: var(--hmi-teal-700, #007078);
	background: transparent;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background 0.2s ease, color 0.2s ease;
}
.hmi-shop-product-cta-secondary:hover {
	background: var(--hmi-teal-700, #007078);
	color: #fff;
}
.hmi-shop-product-meta {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--hmi-border, #e5e7eb);
	font-size: 0.8125rem;
	color: var(--hmi-ink-light, #4a5568);
}

/* Tabs / Cross-Sells / Related */
.hmi-shop-product-tabs,
.hmi-shop-product-upsells,
.hmi-shop-product-related {
	max-width: 1200px;
	margin: 3rem auto 0;
	padding: 0 1.25rem;
}
.hmi-shop-product-upsells h2,
.hmi-shop-product-related h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--hmi-ink, #002528);
	margin-bottom: 1.5rem;
}

/* Editor-Hints */
.hmi-shop-product--missing-wc,
.hmi-shop-product--wrong-context {
	padding: 1rem 1.25rem;
	background: #fef3c7;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	color: #78350f;
	max-width: 1200px;
	margin: 1rem auto;
}

/* ============================================================================
   Process Steps (kompakt-vertikal) — seit 2026-04-27
   ============================================================================
   Pattern fuer "So laeuft es ab"-Cards: Nummern-Pills mit gestrichelter
   Verbindungslinie zwischen den Schritten. Typischer Use-Case in einer
   Sidebar neben einem Anfrageformular oder in einer kompakten Section. */
.hmi-process-steps--bg-sand-50 { background: var(--hmi-sand-50, #fdfcfa); padding: 2rem 0; }
.hmi-process-steps--bg-cool-50 { background: var(--hmi-cool-50, #f1f9fa); padding: 2rem 0; }
.hmi-process-steps--bg-white   { background: #fff; padding: 2rem 0; }

.hmi-process-steps-inner {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.hmi-process-steps-card {
	padding: 1.5rem;
}
.hmi-process-steps--container-card .hmi-process-steps-card {
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
}
.hmi-process-steps--container-flat .hmi-process-steps-card {
	padding: 0;
	background: transparent;
}

.hmi-process-steps-eyebrow {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.hmi-process-steps--accent-teal   .hmi-process-steps-eyebrow { color: var(--hmi-teal-700, #007078); }
.hmi-process-steps--accent-violet .hmi-process-steps-eyebrow { color: var(--hmi-violet-500, #4C3E80); }
.hmi-process-steps--accent-ink    .hmi-process-steps-eyebrow { color: var(--hmi-ink, #002528); }

.hmi-process-steps-headline {
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--hmi-ink, #002528);
	line-height: 1.35;
}

.hmi-process-steps-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hmi-process-steps-item {
	position: relative;
	display: flex;
	gap: 1rem;
	padding-bottom: 1.25rem;
}
.hmi-process-steps-item:last-child {
	padding-bottom: 0;
}
/* Gestrichelte Verbindungslinie zwischen den Markern */
.hmi-process-steps-item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 2.25rem; /* unter dem Marker */
	left: 1rem;   /* mittig zum Marker */
	bottom: 0.25rem;
	width: 0;
	border-left: 2px dashed rgba(0,0,0,0.12);
	transform: translateX(-1px);
}

.hmi-process-steps-marker {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.875rem;
	font-weight: 700;
	z-index: 1;
}
.hmi-process-steps--accent-teal .hmi-process-steps-marker {
	background: rgba(0, 112, 120, 0.10);
	color: var(--hmi-teal-700, #007078);
}
.hmi-process-steps--accent-violet .hmi-process-steps-marker {
	background: rgba(76, 62, 128, 0.10);
	color: var(--hmi-violet-500, #4C3E80);
}
.hmi-process-steps--accent-ink .hmi-process-steps-marker {
	background: rgba(0, 37, 40, 0.08);
	color: var(--hmi-ink, #002528);
}

.hmi-process-steps-marker svg {
	width: 0.875rem;
	height: 0.875rem;
}
.hmi-process-steps-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: currentColor;
}

.hmi-process-steps-body {
	flex: 1;
	min-width: 0;
}
.hmi-process-steps-title {
	margin: 0 0 0.125rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--hmi-ink, #002528);
	line-height: 1.4;
}
.hmi-process-steps-desc {
	margin: 0;
	font-size: 0.875rem;
	color: var(--hmi-ink-light, #4a5568);
	line-height: 1.55;
}

/* ============================================================================
   Accordion-Erweiterung: Pre-Label-Pill + Post-Badge — seit 2026-04-27
   ============================================================================
   Bestehender Akkordeon-Button bekommt optional eine Pille VOR dem Titel
   (z.B. "K1") und/oder einen kleinen gedimmten Hinweis NACH dem Titel
   (z.B. "ca. 10 Min."). Layout: Label · Question · Badge · Chevron. */
.hmi-accordion-label {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	margin-right: 0.875rem;
	background: rgba(0, 112, 120, 0.08);
	color: var(--hmi-teal-700, #007078);
	border-radius: 8px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}
.hmi-accordion-accent-violet .hmi-accordion-label {
	background: rgba(76, 62, 128, 0.08);
	color: var(--hmi-violet-500, #4C3E80);
}
.hmi-accordion-accent-ink .hmi-accordion-label {
	background: rgba(0, 37, 40, 0.06);
	color: var(--hmi-ink, #002528);
}
.hmi-accordion-button--has-label .hmi-accordion-question {
	flex: 1;
}

.hmi-accordion-badge {
	flex-shrink: 0;
	margin: 0 0.875rem 0 1rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(0, 37, 40, 0.55);
	white-space: nowrap;
}

/* Mobile: Badge unter den Titel rutschen lassen, damit Layout nicht bricht */
@media (max-width: 540px) {
	.hmi-accordion-button {
		flex-wrap: wrap;
	}
	.hmi-accordion-badge {
		flex-basis: 100%;
		margin: 0.25rem 0 0 0;
		text-align: left;
	}
	.hmi-accordion-button--has-label .hmi-accordion-badge {
		margin-left: 2.875rem; /* aligned mit Question hinter Label */
	}
}

/* ============================================================================
   Construction Notice (Seite im Umbau) — seit 2026-04-27
   ============================================================================
   Temporaerer Hinweis fuer Pages, die in der Architektur schon existieren,
   aber inhaltlich noch nicht final sind. Card- oder Banner-Variante. */
.hmi-construction-notice {
	padding: 3rem 1.25rem;
}
.hmi-construction-notice--banner {
	background: linear-gradient(135deg, var(--hmi-cool-50, #f1f9fa), var(--hmi-sand-50, #fdfcfa));
	padding: 4rem 1.25rem;
}

.hmi-construction-notice-inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.hmi-construction-notice--card .hmi-construction-notice-inner {
	background: #fff;
	padding: 2.5rem 2rem;
	border-radius: 16px;
	border: 1px solid var(--hmi-border, #e5e7eb);
	box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}

.hmi-construction-notice-icon {
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1.25rem;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hmi-construction-notice-icon svg {
	width: 2rem;
	height: 2rem;
}
.hmi-construction-notice--accent-teal .hmi-construction-notice-icon {
	background: rgba(0, 112, 120, 0.10);
	color: var(--hmi-teal-700, #007078);
}
.hmi-construction-notice--accent-violet .hmi-construction-notice-icon {
	background: rgba(76, 62, 128, 0.10);
	color: var(--hmi-violet-500, #4C3E80);
}
.hmi-construction-notice--accent-amber .hmi-construction-notice-icon {
	background: rgba(217, 119, 6, 0.12);
	color: #b45309;
}

.hmi-construction-notice-eyebrow {
	display: inline-block;
	margin-bottom: 0.625rem;
	padding: 0.25rem 0.75rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
}
.hmi-construction-notice--accent-teal .hmi-construction-notice-eyebrow {
	background: rgba(0, 112, 120, 0.08);
	color: var(--hmi-teal-700, #007078);
}
.hmi-construction-notice--accent-violet .hmi-construction-notice-eyebrow {
	background: rgba(76, 62, 128, 0.08);
	color: var(--hmi-violet-500, #4C3E80);
}
.hmi-construction-notice--accent-amber .hmi-construction-notice-eyebrow {
	background: rgba(217, 119, 6, 0.10);
	color: #b45309;
}

.hmi-construction-notice-headline {
	margin: 0 0 0.875rem;
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 700;
	color: var(--hmi-ink, #002528);
	line-height: 1.25;
}

.hmi-construction-notice-desc {
	margin: 0 0 1.75rem;
	font-size: 1rem;
	color: var(--hmi-ink-light, #4a5568);
	line-height: 1.65;
}

.hmi-construction-notice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}
/* CTAs werden seit v1.0.46 via hmi_render_atom('button', ...) gerendert.
   Eigene .hmi-construction-notice-cta--primary/--secondary entfallen — die
   Buttons bringen ihre Stile selbst mit (8 Varianten, hover-konsistent). */

/* =========================================================================
   HMi Share Buttons Atom (seit 2026-04-28)
   Stile: solid (gefuellt), outline (Rahmen), ghost (dezent).
   Groessen: sm 32px / md 40px / lg 48px (icon-only). Bei Label-Modus
   skaliert die Hoehe entsprechend.
   ========================================================================= */
.hmi-share {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.hmi-share--vertical {
	flex-direction: column;
	align-items: flex-start;
}
.hmi-share-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--hmi-text-muted, #4A5568);
	letter-spacing: 0.02em;
}
.hmi-share-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.hmi-share--vertical .hmi-share-list {
	flex-direction: column;
}
.hmi-share-item {
	margin: 0;
	padding: 0;
}
.hmi-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	cursor: pointer;
	border: 1.5px solid transparent;
	background: transparent;
	color: inherit;
	text-decoration: none;
	font-family: inherit;
	font-weight: 500;
	line-height: 1;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
	position: relative;
}
.hmi-share-btn:focus-visible {
	outline: 2px solid var(--hmi-violet-500, #4C3E80);
	outline-offset: 2px;
}
.hmi-share-btn:hover {
	transform: translateY(-1px);
}
.hmi-share-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.hmi-share-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	display: block;
}
.hmi-share-label {
	font-size: 0.875rem;
	white-space: nowrap;
}
.hmi-share-label--sronly {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Groessen ---------------------------------------------------------- */
.hmi-share--sm .hmi-share-btn { font-size: 14px; min-width: 2rem; min-height: 2rem; padding: 0 0.5rem; border-radius: 8px; }
.hmi-share--md .hmi-share-btn { font-size: 16px; min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.625rem; border-radius: 10px; }
.hmi-share--lg .hmi-share-btn { font-size: 18px; min-width: 3rem; min-height: 3rem; padding: 0 0.75rem; border-radius: 12px; }

/* Icon-only-Modus: quadratisch, kein zusaetzliches horizontales Padding. */
.hmi-share--label-icon .hmi-share-btn,
.hmi-share--label-sronly .hmi-share-btn {
	padding: 0;
}
.hmi-share--label-icon.hmi-share--sm .hmi-share-btn,
.hmi-share--label-sronly.hmi-share--sm .hmi-share-btn { width: 2rem; height: 2rem; }
.hmi-share--label-icon.hmi-share--md .hmi-share-btn,
.hmi-share--label-sronly.hmi-share--md .hmi-share-btn { width: 2.5rem; height: 2.5rem; }
.hmi-share--label-icon.hmi-share--lg .hmi-share-btn,
.hmi-share--label-sronly.hmi-share--lg .hmi-share-btn { width: 3rem; height: 3rem; }

/* Label-Modus: etwas mehr horizontales Padding. */
.hmi-share--label-label.hmi-share--sm .hmi-share-btn { padding: 0 0.75rem; }
.hmi-share--label-label.hmi-share--md .hmi-share-btn { padding: 0 1rem; }
.hmi-share--label-label.hmi-share--lg .hmi-share-btn { padding: 0 1.25rem; }

/* ---- Brand-Farben (CSS-Variablen, override-bar) ----------------------- */
.hmi-share-item--linkedin { --hmi-share-c: #0A66C2; }
.hmi-share-item--xing     { --hmi-share-c: #006567; }
.hmi-share-item--facebook { --hmi-share-c: #1877F2; }
.hmi-share-item--x        { --hmi-share-c: #111111; }
.hmi-share-item--email    { --hmi-share-c: #4C3E80; } /* HMi-Violet */
.hmi-share-item--whatsapp { --hmi-share-c: #25D366; }
.hmi-share-item--copy     { --hmi-share-c: #007078; } /* HMi-Teal */
.hmi-share-item--ics      { --hmi-share-c: #007078; } /* HMi-Teal (iCal-Download) */

/* ---- Stil: solid ------------------------------------------------------- */
.hmi-share--solid .hmi-share-btn {
	background: var(--hmi-share-c, #4A5568);
	color: #fff;
	border-color: var(--hmi-share-c, #4A5568);
}
.hmi-share--solid .hmi-share-btn:hover {
	background: color-mix(in srgb, var(--hmi-share-c, #4A5568) 88%, #000);
	border-color: color-mix(in srgb, var(--hmi-share-c, #4A5568) 88%, #000);
}

/* ---- Stil: outline ----------------------------------------------------- */
.hmi-share--outline .hmi-share-btn {
	background: #fff;
	color: var(--hmi-share-c, #4A5568);
	border-color: var(--hmi-share-c, #4A5568);
}
.hmi-share--outline .hmi-share-btn:hover {
	background: var(--hmi-share-c, #4A5568);
	color: #fff;
}

/* ---- Stil: ghost ------------------------------------------------------- */
.hmi-share--ghost .hmi-share-btn {
	background: transparent;
	color: var(--hmi-share-c, #4A5568);
	border-color: transparent;
}
.hmi-share--ghost .hmi-share-btn:hover {
	background: color-mix(in srgb, var(--hmi-share-c, #4A5568) 12%, transparent);
}

/* ---- Copy-to-Clipboard Toast ------------------------------------------ */
.hmi-share-toast {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	background: var(--hmi-ink-900, #1B2029);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.hmi-share-btn.is-copied .hmi-share-toast {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =========================================================================
   HMi Error 404 Component (seit 2026-04-28, v1.0.46)
   Aufbau: Update-Notice (optional, oben oder inline) + Hero (grosse Zahl im
   Hintergrund, Eyebrow, Headline, Description, Suchfeld) + Recovery-Cards
   (klickbar, Icon + Label + Description + Pfeil) + Footer-CTA.
   ========================================================================= */

.hmi-error-404 {
	font-family: 'Ubuntu', sans-serif;
	color: var(--hmi-ink, #1B2029);
	padding: 4rem 1.5rem;
	position: relative;
	overflow: hidden;
}
@media (min-width: 768px) { .hmi-error-404 { padding: 6rem 2rem; } }

/* ---- Background-Variants ---------------------------------------------- */
.hmi-error-404--bg-white                { background: #ffffff; }
.hmi-error-404--bg-sand-50              { background: var(--hmi-sand-50, #fdfcfa); }
.hmi-error-404--bg-cool-50              { background: var(--hmi-cool-50, #f1f9fa); }
.hmi-error-404--bg-gradient-violet-soft {
	background: linear-gradient(135deg, #ede9fe 0%, #f3f1f9 45%, #ffffff 100%);
}

.hmi-error-404-inner {
	max-width: 960px;
	margin: 0 auto;
	position: relative;
}

/* ---- Update-Notice (Banner) ------------------------------------------- */
.hmi-error-404-update {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1rem 1.25rem;
	background: rgba(76, 62, 128, 0.06);
	border-left: 3px solid var(--hmi-violet-500, #4C3E80);
	border-radius: 6px;
	margin-bottom: 2.5rem;
}
.hmi-error-404--accent-teal .hmi-error-404-update {
	background: rgba(0, 112, 120, 0.06);
	border-left-color: var(--hmi-teal-500, #007078);
}
.hmi-error-404-update-icon {
	flex-shrink: 0;
	display: inline-flex;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--hmi-violet-500, #4C3E80);
	margin-top: 0.125rem;
}
.hmi-error-404--accent-teal .hmi-error-404-update-icon { color: var(--hmi-teal-500, #007078); }
.hmi-error-404-update-icon svg { width: 100%; height: 100%; }
.hmi-error-404-update-body { flex: 1; min-width: 0; }
.hmi-error-404-update-eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hmi-violet-500, #4C3E80);
	margin-bottom: 0.25rem;
}
.hmi-error-404--accent-teal .hmi-error-404-update-eyebrow { color: var(--hmi-teal-500, #007078); }
.hmi-error-404-update-text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--hmi-ink-light, #4A5568);
}

/* ---- Hero ------------------------------------------------------------- */
.hmi-error-404-hero {
	position: relative;
	padding: 1rem 0 3rem;
}
.hmi-error-404-number {
	position: absolute;
	top: -1rem;
	right: -1rem;
	font-size: clamp(7rem, 22vw, 14rem);
	font-weight: 800;
	line-height: 0.85;
	color: rgba(0, 112, 120, 0.08);
	pointer-events: none;
	user-select: none;
	letter-spacing: -0.02em;
	z-index: 0;
}
.hmi-error-404--accent-violet .hmi-error-404-number {
	color: rgba(76, 62, 128, 0.08);
}
.hmi-error-404-hero-content {
	position: relative;
	z-index: 1;
	max-width: 640px;
}
.hmi-error-404-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--hmi-teal-500, #007078);
	margin-bottom: 0.75rem;
}
.hmi-error-404--accent-violet .hmi-error-404-eyebrow { color: var(--hmi-violet-500, #4C3E80); }

.hmi-error-404 .hmi-error-404-headline,
.hmi-error-404 h1.hmi-error-404-headline {
	margin: 0 0 1rem;
	padding: 0;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--hmi-ink, #1B2029);
}
.hmi-error-404-description {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--hmi-ink-light, #4A5568);
}

/* ---- Suchfeld --------------------------------------------------------- */
.hmi-error-404-search {
	margin-top: 1.5rem;
	max-width: 520px;
}
.hmi-error-404-search-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hmi-ink, #1B2029);
	margin-bottom: 0.5rem;
}
.hmi-error-404-search form,
.hmi-error-404-search .search-form {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}
.hmi-error-404-search input[type="search"],
.hmi-error-404-search input[type="text"] {
	flex: 1;
	min-width: 0;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-family: inherit;
	border: 1.5px solid #e5e7eb;
	border-radius: 10px;
	background: #ffffff;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.hmi-error-404-search input[type="search"]:focus,
.hmi-error-404-search input[type="text"]:focus {
	outline: none;
	border-color: var(--hmi-teal-500, #007078);
	box-shadow: 0 0 0 3px rgba(0, 112, 120, 0.12);
}
.hmi-error-404--accent-violet .hmi-error-404-search input[type="search"]:focus,
.hmi-error-404--accent-violet .hmi-error-404-search input[type="text"]:focus {
	border-color: var(--hmi-violet-500, #4C3E80);
	box-shadow: 0 0 0 3px rgba(76, 62, 128, 0.12);
}
.hmi-error-404-search button[type="submit"],
.hmi-error-404-search input[type="submit"] {
	padding: 0.75rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
	font-family: inherit;
	color: #ffffff;
	background: var(--hmi-teal-500, #007078);
	border: 1.5px solid var(--hmi-teal-500, #007078);
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.18s ease;
}
.hmi-error-404--accent-violet .hmi-error-404-search button[type="submit"],
.hmi-error-404--accent-violet .hmi-error-404-search input[type="submit"] {
	background: var(--hmi-violet-500, #4C3E80);
	border-color: var(--hmi-violet-500, #4C3E80);
}
.hmi-error-404-search button[type="submit"]:hover,
.hmi-error-404-search input[type="submit"]:hover {
	filter: brightness(0.92);
}

/* ---- Recovery-Cards --------------------------------------------------- */
.hmi-error-404-recovery {
	margin-top: 3rem;
}
.hmi-error-404-recovery-eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hmi-ink-light, #4A5568);
	margin-bottom: 1.25rem;
}
.hmi-error-404-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 640px) {
	.hmi-error-404-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.hmi-error-404-cards { grid-template-columns: repeat(3, 1fr); }
	.hmi-error-404-cards[data-card-count="4"] { grid-template-columns: repeat(2, 1fr); }
	.hmi-error-404-cards[data-card-count="5"],
	.hmi-error-404-cards[data-card-count="6"] { grid-template-columns: repeat(3, 1fr); }
}

.hmi-error-404-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background: #ffffff;
	border: 1px solid #ebebf0;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.hmi-error-404-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	border-color: var(--hmi-teal-500, #007078);
}
.hmi-error-404--accent-violet .hmi-error-404-card:hover {
	border-color: var(--hmi-violet-500, #4C3E80);
}
.hmi-error-404-card-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 10px;
	background: rgba(0, 112, 120, 0.1);
	color: var(--hmi-teal-500, #007078);
	font-size: 1.125rem;
}
.hmi-error-404--accent-violet .hmi-error-404-card-icon {
	background: rgba(76, 62, 128, 0.1);
	color: var(--hmi-violet-500, #4C3E80);
}
.hmi-error-404-card-icon i { line-height: 1; }
.hmi-error-404-card-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.hmi-error-404-card-label {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--hmi-ink, #1B2029);
	line-height: 1.3;
}
.hmi-error-404-card-desc {
	font-size: 0.8125rem;
	color: var(--hmi-ink-light, #4A5568);
	line-height: 1.4;
}
.hmi-error-404-card-arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--hmi-ink-light, #4A5568);
	transition: transform 0.2s ease, color 0.2s ease;
}
.hmi-error-404-card-arrow svg { width: 100%; height: 100%; }
.hmi-error-404-card:hover .hmi-error-404-card-arrow {
	transform: translateX(3px);
	color: var(--hmi-teal-500, #007078);
}
.hmi-error-404--accent-violet .hmi-error-404-card:hover .hmi-error-404-card-arrow {
	color: var(--hmi-violet-500, #4C3E80);
}

/* ---- Footer-CTA ------------------------------------------------------- */
.hmi-error-404-cta {
	margin-top: 3rem;
	padding: 2rem;
	background: rgba(0, 112, 120, 0.04);
	border-radius: 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.hmi-error-404--accent-violet .hmi-error-404-cta {
	background: rgba(76, 62, 128, 0.04);
}
.hmi-error-404-cta-text {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--hmi-ink, #1B2029);
}
@media (min-width: 768px) {
	.hmi-error-404-cta {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		padding: 2rem 2.5rem;
	}
}

/* =========================================================================
   HMi People Grid Component (seit 2026-04-29, v1.0.47)
   Personen-Karten im Grid mit Avatar/Initialen-Badge LINKS und Name + Rolle
   + Beschreibung RECHTS. Mobile-stabil — bleibt horizontal auch auf 320px.
   Akzent ueber CSS-Variable --card-accent (pro-Karte ueberschreibbar).
   ========================================================================= */

.hmi-people-grid {
	font-family: 'Ubuntu', sans-serif;
	color: var(--hmi-ink, #1B2029);
	padding: 4rem 1.5rem;
}
@media (min-width: 768px) { .hmi-people-grid { padding: 5rem 2rem; } }

.hmi-people-grid--bg-white                { background: #ffffff; }
.hmi-people-grid--bg-cool-50              { background: var(--hmi-cool-50, #f1f9fa); }
.hmi-people-grid--bg-sand-50              { background: var(--hmi-sand-50, #fdfcfa); }
.hmi-people-grid--bg-gradient-violet-soft {
	background: linear-gradient(135deg, #ede9fe 0%, #f3f1f9 45%, #ffffff 100%);
}

.hmi-people-grid-inner {
	max-width: 80rem;
	margin: 0 auto;
}

/* ---- Intro / Outro Wrapper ------------------------------------------- */
.hmi-people-grid-intro { margin-bottom: 3rem; }
.hmi-people-grid-outro { margin-top: 3rem; }

/* ---- Grid ------------------------------------------------------------ */
.hmi-people-grid-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px) {
	.hmi-people-grid--cols-2 .hmi-people-grid-cards,
	.hmi-people-grid--cols-3 .hmi-people-grid-cards,
	.hmi-people-grid--cols-4 .hmi-people-grid-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.hmi-people-grid--cols-3 .hmi-people-grid-cards { grid-template-columns: repeat(3, 1fr); }
	.hmi-people-grid--cols-4 .hmi-people-grid-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Card ------------------------------------------------------------ */
.hmi-people-card {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.5rem;
	background: #ffffff;
	border-radius: 1rem;
	overflow: hidden;       /* Stripe-Span saubere Clip an Card-Rundung */
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	position: relative;
	/* --card-accent wird per Inline-Style gesetzt — Default Teal als Fallback. */
}
/* Card-Stile: Border-Look IMMER ueber inset box-shadow — KEIN echter CSS-Border.
   Pattern direkt aus .hmi-card / .hmi-card-stripe abgeschrieben:
   - keine border = keine Verschiebung der Padding-Box
   - overflow:hidden auf der Card clippt den Stripe an der Card-Rundung
   - Stripe-Span braucht KEINE eigene border-radius
   --card-border-shadow wird in Hover-Rules wiederverwendet, damit der
   Border-Look auch beim Hover-Glow erhalten bleibt. */
.hmi-people-card { --card-border-shadow: 0 0 0 0 transparent; }
.hmi-people-grid--style-border .hmi-people-card,
.hmi-people-grid--style-both   .hmi-people-card { --card-border-shadow: inset 0 0 0 1px #ebebf0; }
.hmi-people-grid--style-shadow .hmi-people-card { box-shadow: var(--card-border-shadow), 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); }
.hmi-people-grid--style-border .hmi-people-card { box-shadow: var(--card-border-shadow); }
.hmi-people-grid--style-both   .hmi-people-card { box-shadow: var(--card-border-shadow), 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); }

/* Akzent-Stripe oben — Pattern 1:1 aus .hmi-card-stripe::before.
   Card hat overflow:hidden + border-radius:1rem, dadurch wird der Stripe
   automatisch an den Card-Ecken sauber geclippt. Keine eigene border-radius. */
.hmi-people-card-accent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	z-index: 2;
	display: block;
	pointer-events: none;
}
.hmi-people-card-accent--teal {
	background: linear-gradient(to right, var(--hmi-teal-400), var(--hmi-teal-500), var(--hmi-teal-600));
}
.hmi-people-card-accent--violet {
	background: linear-gradient(to right, var(--hmi-violet-500), var(--hmi-violet-600));
}
.hmi-people-card-accent--sand {
	background: linear-gradient(to right, #d4a574, #a87b3d, #855e2a);
}

/* ---- Avatar / Initialen-Badge --------------------------------------- */
.hmi-people-card-avatar {
	flex-shrink: 0;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #ffffff;
	font-weight: 700;
	background: linear-gradient(
		135deg,
		var(--card-accent, var(--hmi-teal-500, #007078)) 0%,
		var(--hmi-violet-500, #4C3E80) 100%
	);
}
.hmi-people-card-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
	z-index: 2;
}
.hmi-people-card-initials {
	position: relative;
	z-index: 2;
	letter-spacing: 0.02em;
}

/* Doppel-Layer-Bg/Fg: nur im Rotated-Mode sichtbar, sonst aus.
   Pattern analog .hmi-icon-box-style-teal-box / .hmi-icon-box-style-violet-box. */
.hmi-people-card-avatar-bg,
.hmi-people-card-avatar-fg {
	display: none;
}

/* Avatar-Groessen */
.hmi-people-grid--avatar-sm .hmi-people-card-avatar { width: 2.5rem; height: 2.5rem; font-size: 0.75rem; }
.hmi-people-grid--avatar-md .hmi-people-card-avatar { width: 3.5rem; height: 3.5rem; font-size: 0.9375rem; }
.hmi-people-grid--avatar-lg .hmi-people-card-avatar { width: 4.5rem; height: 4.5rem; font-size: 1.125rem; }

/* Avatar-Form: Square / Round (Single-Layer-Gradient) */
.hmi-people-grid--shape-square .hmi-people-card-avatar { border-radius: 0.75rem; }
.hmi-people-grid--shape-round  .hmi-people-card-avatar { border-radius: 9999px; }

/* Avatar-Form: Rotated (Doppel-Layer wie hmi_icon_box-style-teal-box).
   Avatar-Wrapper transparent, bg-Layer rotiert hinten, fg-Layer mit Gradient
   davor, Initialen/Foto liegen z-index 2 darueber. Hover dreht bg auf 12deg. */
.hmi-people-grid--shape-rotated .hmi-people-card-avatar {
	background: transparent;
	overflow: visible;
	border-radius: 0;
	color: var(--hmi-teal-600, #00565c);
}
.hmi-people-grid--shape-rotated .hmi-people-card-avatar-bg,
.hmi-people-grid--shape-rotated .hmi-people-card-avatar-fg {
	display: block;
	position: absolute;
	inset: 0;
	border-radius: 0.75rem;
}
.hmi-people-grid--shape-rotated .hmi-people-card-avatar-bg {
	transform: rotate(6deg);
	transition: transform 0.3s ease;
	background-color: rgba(0, 112, 120, 0.10);
	z-index: 0;
}
.hmi-people-grid--shape-rotated .hmi-people-card-avatar-fg {
	background: linear-gradient(to bottom right, var(--hmi-teal-50, #ecfeff), var(--hmi-teal-100, #cffafe));
	border: 1px solid rgba(175, 233, 236, 0.5);
	z-index: 1;
}
.hmi-people-grid--shape-rotated .hmi-people-card:hover .hmi-people-card-avatar-bg {
	transform: rotate(12deg);
}
/* Foto im Rotated-Mode: muss border-radius selbst tragen (Wrapper hat overflow:visible). */
.hmi-people-grid--shape-rotated .hmi-people-card-avatar img {
	border-radius: 0.75rem;
}

/* Rotated + pro-Karten-Akzent Violet: Doppel-Layer in Violet umfaerben. */
.hmi-people-grid--shape-rotated .hmi-people-card--accent-violet .hmi-people-card-avatar { color: var(--hmi-violet-500, #4C3E80); }
.hmi-people-grid--shape-rotated .hmi-people-card--accent-violet .hmi-people-card-avatar-bg {
	background-color: rgba(76, 62, 128, 0.10);
}
.hmi-people-grid--shape-rotated .hmi-people-card--accent-violet .hmi-people-card-avatar-fg {
	background: linear-gradient(to bottom right, var(--hmi-violet-50, #f3f0ff), rgba(76, 62, 128, 0.12));
	border: 1px solid rgba(76, 62, 128, 0.2);
}
/* Rotated + globaler Akzent Violet (kein pro-Karten-Override): gleicher Look. */
.hmi-people-grid--shape-rotated.hmi-people-grid--accent-violet .hmi-people-card:not(.hmi-people-card--accent-teal):not(.hmi-people-card--accent-sand) .hmi-people-card-avatar { color: var(--hmi-violet-500, #4C3E80); }
.hmi-people-grid--shape-rotated.hmi-people-grid--accent-violet .hmi-people-card:not(.hmi-people-card--accent-teal):not(.hmi-people-card--accent-sand) .hmi-people-card-avatar-bg {
	background-color: rgba(76, 62, 128, 0.10);
}
.hmi-people-grid--shape-rotated.hmi-people-grid--accent-violet .hmi-people-card:not(.hmi-people-card--accent-teal):not(.hmi-people-card--accent-sand) .hmi-people-card-avatar-fg {
	background: linear-gradient(to bottom right, var(--hmi-violet-50, #f3f0ff), rgba(76, 62, 128, 0.12));
	border: 1px solid rgba(76, 62, 128, 0.2);
}

/* ---- Body (Name + Role + Description) ------------------------------ */
.hmi-people-card-body {
	flex: 1;
	min-width: 0;             /* erlaubt text-wrap auch in engen Cards */
}
.hmi-people-card-name {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hmi-ink, #1B2029);
	line-height: 1.3;
}
.hmi-people-card-role {
	margin: 0 0 0.625rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--card-accent, var(--hmi-teal-500, #007078));
	letter-spacing: 0.02em;
}
.hmi-people-card-desc {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--hmi-ink-light, #4A5568);
}
.hmi-people-card-desc a {
	color: var(--card-accent, var(--hmi-teal-500, #007078));
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- Hover-Effekte (zentral pro Wrapper) ----------------------------
   Werte 1:1 aus .hmi-card-hover-glow-teal / -violet uebernommen.
   var(--card-border-shadow) sorgt dafuer, dass der 1px-Inset-Border bei
   style=border/both auch beim Hover-Glow erhalten bleibt. */
.hmi-people-grid--hover-lift .hmi-people-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--card-border-shadow), 0 12px 30px rgba(0,0,0,0.1);
}
.hmi-people-grid--hover-glow.hmi-people-grid--accent-teal   .hmi-people-card:hover {
	box-shadow: var(--card-border-shadow), 0 8px 30px rgba(0,112,120,0.18), 0 2px 8px rgba(0,0,0,0.06);
}
.hmi-people-grid--hover-glow.hmi-people-grid--accent-violet .hmi-people-card:hover {
	box-shadow: var(--card-border-shadow), 0 16px 40px rgba(76,62,128,0.22), 0 4px 12px rgba(76,62,128,0.08);
}
/* Pro-Karten-Override: einzelne Karten mit card_accent=violet/teal bekommen
   den passenden farbigen Glow unabhaengig vom globalen Wrapper-Akzent. */
.hmi-people-grid--hover-glow .hmi-people-card--accent-violet:hover {
	box-shadow: var(--card-border-shadow), 0 16px 40px rgba(76,62,128,0.22), 0 4px 12px rgba(76,62,128,0.08);
}
.hmi-people-grid--hover-glow .hmi-people-card--accent-teal:hover {
	box-shadow: var(--card-border-shadow), 0 8px 30px rgba(0,112,120,0.18), 0 2px 8px rgba(0,0,0,0.06);
}
/* hover-none: ALLE Hover-Aenderungen aus. Schatten beim Hover = Schatten in
   Ruhe, identisch nachgebildet ueber denselben var(--card-border-shadow)
   + Style-spezifische Schatten. Damit auch Theme-Hover-Regeln (Impreza
   article:hover) sauber ueberschrieben sind. */
.hmi-people-grid--hover-none .hmi-people-card,
.hmi-people-grid--hover-none .hmi-people-card-avatar-bg { transition: none; }
.hmi-people-grid--hover-none .hmi-people-card:hover { transform: none; }
.hmi-people-grid--hover-none .hmi-people-card:hover .hmi-people-card-avatar-bg { transform: rotate(6deg); }
.hmi-people-grid--hover-none.hmi-people-grid--style-shadow .hmi-people-card:hover { box-shadow: var(--card-border-shadow), 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); }
.hmi-people-grid--hover-none.hmi-people-grid--style-border .hmi-people-card:hover { box-shadow: var(--card-border-shadow); }
.hmi-people-grid--hover-none.hmi-people-grid--style-both   .hmi-people-card:hover { box-shadow: var(--card-border-shadow), 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04); }

/* =========================================================================
   HMi Trust-Card (Card mit Badge-Pills + Fakten-Zeile)
   ========================================================================= */

.hmi-trust-card {
  width: 100%;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--hmi-shadow-sm, 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04));
}

/* Container-Breite — Card wird in ihrem Container zentriert */
.hmi-trust-card--width-standard { max-width: 1280px; margin-left: auto; margin-right: auto; }
.hmi-trust-card--width-compact  { max-width: 1080px; margin-left: auto; margin-right: auto; }
.hmi-trust-card--width-narrow   { max-width: 860px;  margin-left: auto; margin-right: auto; }
.hmi-trust-card--width-wide     { max-width: 1440px; margin-left: auto; margin-right: auto; }
.hmi-trust-card--width-full     { max-width: none; }

/* Hintergrundfarbe — Zweiton-Paar je Variante (abgesetzte __top- / __facts-Zone).
   bg-white = unveraendert, dafuer greifen die Basis-Regeln weiter oben. */
.hmi-trust-card--bg-cool-50,
.hmi-trust-card--bg-cool-50 .hmi-trust-card__facts { background: var(--hmi-cool-50, #f5f5f8); }
.hmi-trust-card--bg-cool-50 .hmi-trust-card__top   { background: var(--hmi-cool-100, #ebebf0); }

.hmi-trust-card--bg-sand-50,
.hmi-trust-card--bg-sand-50 .hmi-trust-card__facts { background: var(--hmi-sand-50, #fdfcfa); }
.hmi-trust-card--bg-sand-50 .hmi-trust-card__top   { background: var(--hmi-sand-100, #faf7f2); }

/* Dunkel-Varianten: Card dunkel, Schrift invertiert. Weisse Badge-Pills bleiben. */
.hmi-trust-card--bg-dark-teal,
.hmi-trust-card--bg-dark-teal .hmi-trust-card__facts { background: var(--hmi-teal-900, #002528); }
.hmi-trust-card--bg-dark-teal .hmi-trust-card__top   { background: var(--hmi-teal-800, #003c40); border-bottom-color: rgba(255,255,255,0.1); }
.hmi-trust-card--bg-dark-teal .hmi-trust-card__eyebrow    { color: var(--hmi-teal-300, #78d7dd); }
.hmi-trust-card--bg-dark-teal .hmi-trust-card__facts      { color: rgba(255,255,255,0.78); }
.hmi-trust-card--bg-dark-teal .hmi-trust-card__fact-check { color: var(--hmi-teal-300, #78d7dd); }
.hmi-trust-card--bg-dark-teal .hmi-trust-card__fact-sep   { color: rgba(255,255,255,0.25); }

.hmi-trust-card--bg-dark-violet,
.hmi-trust-card--bg-dark-violet .hmi-trust-card__facts { background: var(--hmi-violet-600, #3f3369); }
.hmi-trust-card--bg-dark-violet .hmi-trust-card__top   { background: var(--hmi-violet-500, #4c3e80); border-bottom-color: rgba(255,255,255,0.1); }
.hmi-trust-card--bg-dark-violet .hmi-trust-card__eyebrow    { color: #c4b5fd; }
.hmi-trust-card--bg-dark-violet .hmi-trust-card__facts      { color: rgba(255,255,255,0.78); }
.hmi-trust-card--bg-dark-violet .hmi-trust-card__fact-check { color: #c4b5fd; }
.hmi-trust-card--bg-dark-violet .hmi-trust-card__fact-sep   { color: rgba(255,255,255,0.25); }

.hmi-trust-card__top {
  padding: 1.5rem 1.25rem;
  background: var(--hmi-cool-50, #f5f5f8);
  border-bottom: 1px solid var(--hmi-cool-100, #ebebf0);
}

.hmi-trust-card__eyebrow {
  margin: 0 0 1.25rem;
  text-align: center;
  font-size: var(--hmi-heading-eyebrow-size, 0.75rem);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(74, 85, 104, 0.6);
}

.hmi-trust-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.hmi-trust-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  background: #fff;
  border: 1px solid var(--hmi-cool-100, #ebebf0);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.hmi-trust-card__badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1;
}
.hmi-trust-card__badge-icon i,
.hmi-trust-card__badge-icon svg {
  font-size: inherit;
  width: 1em;
  height: 1em;
}
.hmi-trust-card__badge-icon--teal    { color: var(--hmi-teal-500, #007078); }
.hmi-trust-card__badge-icon--violet  { color: var(--hmi-violet-500, #4c3e80); }
.hmi-trust-card__badge-icon--ink     { color: var(--hmi-ink, #1b2029); }
.hmi-trust-card__badge-icon--neutral { color: var(--hmi-ink-light, #4a5568); }

.hmi-trust-card__badge-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hmi-ink, #1b2029);
}
.hmi-trust-card__badge--no-icon .hmi-trust-card__badge-label {
  color: var(--hmi-ink-light, #4a5568);
}

.hmi-trust-card__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--hmi-ink-light, #4a5568);
}

.hmi-trust-card__fact {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.hmi-trust-card__fact-check {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--hmi-teal-500, #007078);
}

.hmi-trust-card__fact-sep {
  color: rgba(74, 85, 104, 0.3);
  user-select: none;
}

@media (min-width: 768px) {
  .hmi-trust-card__top    { padding: 1.5rem 2rem; }
  .hmi-trust-card__badges { gap: 1.5rem; }
  .hmi-trust-card__facts  { gap: 0.5rem 1.5rem; padding: 1rem 2rem; }
}

@media (max-width: 575px) {
  .hmi-trust-card__fact-sep { display: none; }
}